/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ===== Chips (mismos que la lista) ===== */
.ecoi-pill{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;color:#fff}
.ecoi-pill--green{background:#28a745}
.ecoi-pill--orange{background:#f39c12}
.ecoi-pill--blue{background:#2d7ef7}
.ecoi-pill--gray{background:#95a5a6}
.ecoi-pill--red{background:#e74c3c}
.ecoi-pill--dark{background:#34495e}

/* ===== Cabecera detalle ===== */
.ecoi-oh-date{color:#6e6e6e;font-size:13px;margin-top:2px}
.ecoi-oh-meta{color:#8e8e8e;font-size:13px;margin-top:6px}
.ecoi-oh-right{text-align:right}
.ecoi-oh-total{font-weight:800;margin-top:8px}

/* ===== Tabla ===== */
.ecoi-table{width:100%}
.ecoi-col-product{width:70%}
.ecoi-col-qty{width:10%;text-align:center}
.ecoi-col-total{width:20%;text-align:right}
.ecoi-line{display:flex;gap:10px;align-items:flex-start}
.ecoi-thumb img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.ecoi-name{font-weight:600}

/* ===== Notas & Direcciones ===== */
.ecoi-order-notes{margin-top:18px}
.ecoi-addresses{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.ecoi-address{background:#fff;border:1px solid #eee;border-radius:10px;padding:14px}
.ecoi-address h3{margin-top:0}

/* Responsive */
@media (max-width:900px){
  .ecoi-order-header{flex-direction:column;align-items:flex-start}
  .ecoi-oh-right{text-align:left}
  .ecoi-addresses{grid-template-columns:1fr}
  .ecoi-col-product{width:auto}
}

/* Dashboard My Account */
.ecoi-links li + li { margin-top: 6px; }

/* ====== Mis pedidos (lista) ====== */
.woocommerce-account .ecoi-orders {
  margin-top: 8px;
  display: grid;
  gap: 14px;
}

.woocommerce-account .ecoi-order-row {
  display: grid;
  grid-template-columns: 220px 1fr 140px 140px 150px; /* nº+fecha | pack | chip | total | botón */
  align-items: center;
  column-gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e9e9e9;
}

.woocommerce-account .ecoi-order-col { min-width: 0; }

/* Nº y fecha */
.woocommerce-account .ecoi-order-number { font-weight: 700; }
.woocommerce-account .ecoi-order-date { color: #6e6e6e; font-size: 13px; margin-top: 2px; }

/* “Bultos” + subtítulo (primer producto) */
.woocommerce-account .ecoi-order-pack-title { font-weight: 600; }
.woocommerce-account .ecoi-order-pack-sub {
  color: #8e8e8e; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Chip de estado (colores del mockup) */
.ecoi-pill{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;color:#fff}
.ecoi-pill--green{background:#2db56f;}     /* Enviado */
.ecoi-pill--orange{background:#f39c12;}    /* Retrasado */
.ecoi-pill--blue{background:#3b5bdb;}      /* Entregado */
.ecoi-pill--gray{background:#95a5a6;}
.ecoi-pill--red{background:#e74c3c;}
.ecoi-pill--dark{background:#34495e;}

.woocommerce-account .ecoi-order-amount { font-weight: 700; text-align: right; }

/* Botón “Ver detalles” (a la derecha y azul) */
.ecoi-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  background: #2f75ff;
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}
.woocommerce-account .ecoi-order-cta { text-align: right; }

/* ====== Responsive ====== */
@media (max-width: 980px){
  .woocommerce-account .ecoi-order-row {
    grid-template-columns: 1fr 1fr auto;
    row-gap: 6px;
  }
  .woocommerce-account .ecoi-order-total,
  .woocommerce-account .ecoi-order-cta { justify-self: end; }
}

/* ====== Dashboard (si usas el override) ====== */
.ecoi-dashboard { background:#fff; border-radius:12px; padding:16px; }
.ecoi-stats { margin:6px 0 14px; padding-left:18px; }
.ecoi-links { padding-left:18px; }
.ecoi-links .ecoi-btn { margin-top:6px; }

/* ====== Detalle (si usas los overrides) ====== */
.ecoi-order-detail{background:#fff;border-radius:12px;padding:16px}
.ecoi-order-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid #eee;padding-bottom:12px;margin-bottom:16px}
.ecoi-oh-number{font-size:20px;font-weight:800}
.ecoi-oh-date{color:#6e6e6e;font-size:13px;margin-top:2px}
.ecoi-oh-meta{color:#8e8e8e;font-size:13px;margin-top:6px}
.ecoi-oh-right{text-align:right}
.ecoi-oh-total{font-weight:800;margin-top:8px}
.ecoi-table{width:100%}
.ecoi-col-product{width:70%}
.ecoi-col-qty{width:10%;text-align:center}
.ecoi-col-total{width:20%;text-align:right}
.ecoi-line{display:flex;gap:10px;align-items:flex-start}
.ecoi-thumb img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.ecoi-name{font-weight:600}
.ecoi-addresses{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.ecoi-address{background:#fff;border:1px solid #eee;border-radius:10px;padding:14px}
@media (max-width:900px){
  .ecoi-order-header{flex-direction:column;align-items:flex-start}
  .ecoi-oh-right{text-align:left}
  .ecoi-addresses{grid-template-columns:1fr}
}

.ecoi-back{ margin-bottom:12px; display: flex; justify-content: space-between }
.ecoi-btn--ghost{
  background:#fff;
  color:#2f75ff !important;
  border:1px solid #d4dcff;
}
.ecoi-btn--ghost:hover{ background:#f3f6ff; }

/* —— Lista: nombre + ojito ————————————————————————— */
.ecoi-prod{ display:flex; flex-direction:column; gap:4px }
.ecoi-name--blue{ color:#2f75ff; font-weight:600; line-height:1.25 }
.ecoi-item-eye{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:4px; font-size:14px; line-height:1.25;
  color:#2f75ff; text-decoration:none;
}
.ecoi-item-eye svg{ width:16px; height:16px; flex:0 0 16px; display:block; }
.ecoi-item-eye:hover{ text-decoration:underline }

/* —— Modal: centrado y layout horizontal ———————————— */
.ecoi-modal[hidden]{display:none!important;}
.ecoi-modal{ position:fixed !important; inset:0 !important; z-index:10000 !important; }
.ecoi-modal__overlay{ position:absolute !important; inset:0 !important; background:rgba(0,0,0,.35) !important; z-index:1 !important; }

/* Dialog centrado */
.ecoi-modal__dialog{
  position:absolute !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important; background:#fff; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:18px;
  width:min(900px, calc(100% - 48px));
  max-height:calc(100vh - 48px); overflow:auto;
  z-index:2 !important;
}

/* Grid horizontal */
.ecoi-modal__grid{ display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start; }
.ecoi-modal__media img{ width:100%; height:auto; border-radius:10px; object-fit:cover; }
.ecoi-modal__title{ margin:0 0 6px; font-size:22px; font-weight:800; }
.ecoi-modal__subtitle{
  margin: 18px 0 6px;
  font-size:14px; color:#666; }

/* Atributos */
.ecoi-attrs{ margin:0 0 12px; padding-left:18px; }
.ecoi-attrs li{ margin:2px 0; }
.ecoi-attrs .k{ color:#666; }
.ecoi-attrs .v{ color:#111; font-weight:500; }
.ecoi-attrs-empty{ color:#777; }

/* Coste: columnas label / valor, con espacio generoso */
.ecoi-cost{ display:grid; gap:10px; max-width:360px; }
.ecoi-cost .row{ display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:28px; }
.ecoi-cost .label{ color:#555; }
.ecoi-cost .value{ font-weight:700; }
.ecoi-cost .total .value{ font-size:16px; }

/* Cerrar (X negra simple) */
.ecoi-modal__close{
  position:absolute; top:10px; right:12px;
  background:none !important; border:none !important;
  color:#000 !important; padding:6px; cursor:pointer; line-height:1;
}

/* Responsive */
@media (max-width: 980px){
  .ecoi-modal__grid{ grid-template-columns:1fr; }
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  color: #ffffff
}

.cart-empty.woocommerce-info {
  color: #000 !important;
}

.site-content {
  padding: 10px !important;
}

.woocommerce .woocommerce-info a {
  color: #1B71E9 !important;           /* verde */
}
.eco-invoice-note .woocommerce-message{ color: gray }

/* ============================================================
   PRECIO EN FICHA (Elementor)
   - Alineado a la derecha
   - Fondo blanco
   - Texto negro
   - Borde azul corporativo
   - Estilo limpio / premium
   ============================================================ */

.single-product
.elementor-widget-woocommerce-product-price
.elementor-widget-container{
  display: flex;
  justify-content: flex-end;
  align-items: center;

  background: transparent !important;
  padding: 0 !important;
  margin: 12px 0 18px !important;
}

/* Wrapper del precio */
.single-product
.elementor-widget-woocommerce-product-price
p.price{
  margin: 0 !important;
  padding: 0 !important;
}

/* Caja del precio */
.single-product
.elementor-widget-woocommerce-product-price
p.price .woocommerce-Price-amount{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;

  padding: 12px 18px;
  border-radius: 14px;

  background: #ffffff;
  border: 2px solid #2165f1;

  color: #0f172a;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;

  box-shadow: 0 6px 18px rgba(33, 101, 241, 0.12);
}

/* Símbolo € */
.single-product
.elementor-widget-woocommerce-product-price
.woocommerce-Price-currencySymbol{
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-left: 2px;
}

/* Por seguridad: evitar colores heredados raros */
.single-product
.elementor-widget-woocommerce-product-price
p.price,
.single-product
.elementor-widget-woocommerce-product-price
p.price *{
  color: #0f172a !important;
}

/* En fichas de producto (Elementor Add to Cart) -> apilar en columna */
.single-product .elementor-add-to-cart form.cart{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px;
}

/* La cantidad y el botón a ancho completo */
.single-product .elementor-add-to-cart form.cart .quantity,
.single-product .elementor-add-to-cart form.cart .single_add_to_cart_button{
  width: 100% !important;
}

/* Evita que la cantidad quede estrecha */
.single-product .elementor-add-to-cart form.cart .quantity input.qty{
  width: 100% !important;
}

/* La calculadora ocupa todo el ancho dentro del form */
.single-product .elementor-add-to-cart form.cart .eco-bc-wrap{
  width: 100% !important;
}

/* Ocultar cantidad nativa de WooCommerce en productos con calculadora */
.single-product .elementor-add-to-cart form.cart .quantity {
  display: none !important;
}

/* ✅ La columna Cantidad ya NO se oculta: pasa a formar parte de la
   tarjeta del rediseño del carrito (ver más abajo, "REDISEÑO CARRITO").
   Subtotal se sigue ocultando ahí (duplica siempre el mismo importe que
   Precio, ver comentario en esa sección). */

/* Quitar "(sin impuestos)" SOLO del botón del carrito en header */
#elementor-menu-cart__toggle_button .tax_label {
  display: none !important;
}

/* Productos relacionados: ocultar botón Añadir al carrito */
.single-product section.related.products a.add_to_cart_button,
.single-product section.related.products a.product_type_simple.button {
  display: none !important;
}

/* Quitar botones del loop de tienda/categorías */
.woocommerce ul.products li.product .woocommerce-loop-product__buttons {
  display: none !important;
}

/* Ocultar alerta Elementor en carrito y checkout */
.woocommerce-cart .elementor-alert,
.woocommerce-checkout .elementor-alert {
  display: none !important;
}

body.woocommerce-cart .page-header .entry-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart .elementor-page-title,
body.woocommerce-cart .elementor-widget-theme-post-title .elementor-heading-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}

/* ✅ Mismo ajuste en "Finalizar compra" (checkout): confirmado con el
   inspector (Carla) que el H1 real es header.entry-header > h1.entry-title,
   agrandado por el kit global de Elementor (.elementor-kit-6 h1, 54px). Se
   deja al mismo tamaño que "Carrito de compras" (24px). */
body.woocommerce-checkout .page-header .entry-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .elementor-page-title,
body.woocommerce-checkout .elementor-widget-theme-post-title .elementor-heading-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}

/* ✅ Checkout: "Detalles de facturación" e "Información adicional"
   (h3 dentro de .woocommerce-billing-fields / .woocommerce-additional-fields)
   salían sin color visible -- heredaban --sections-title-color del widget
   de checkout de Elementor, resuelta a un tono demasiado claro sobre fondo
   blanco -- y con demasiado margen (30px de --sections-title-spacing, más
   otros 20px extra en el segundo título). Se fuerza un color oscuro legible
   y se recorta el espaciado. */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
  color: #1d2327 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* ============================================================
   PRESUPUESTOS (Mi cuenta > Downloads)
   - Grid propio (4 columnas)
   - Producto más ancho
   - Título en 2 líneas máximo (sin descuadrar)
   ============================================================ */

.woocommerce-account-downloads .ebc-quotes .ecoi-order-row{
  display: grid !important;
  /* ref+fecha | producto (ancho) | total | botón */
  grid-template-columns: 260px minmax(420px, 1fr) 140px 240px !important;
  column-gap: 16px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid #e9e9e9 !important;
}

/* Asegura que el contenido pueda encoger sin romper el grid */
.woocommerce-account-downloads .ebc-quotes .ecoi-order-col{
  min-width: 0 !important;
}

/* Producto: 2 líneas máximo y ellipsis */
.woocommerce-account-downloads .ebc-quotes .ecoi-order-items-title{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* Total alineado como pedidos */
.woocommerce-account-downloads .ebc-quotes .ecoi-order-total{
  text-align: right !important;
}

/* Botón a la derecha como pedidos */
.woocommerce-account-downloads .ebc-quotes .ecoi-order-cta{
  text-align: right !important;
}

/* Responsive: apilar como tu bloque de pedidos */
@media (max-width: 980px){
  .woocommerce-account-downloads .ebc-quotes .ecoi-order-row{
    grid-template-columns: 1fr 1fr auto !important;
    row-gap: 6px !important;
  }
  .woocommerce-account-downloads .ebc-quotes .ecoi-order-total,
  .woocommerce-account-downloads .ebc-quotes .ecoi-order-cta{
    justify-self: end !important;
  }
}

/* ============================================================
   CARRITO: Cantidad antes de Precio + sin +/- + readonly
   ============================================================ */

/* Mostrar qty y precio */
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity,
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart td.product-price{
  display: table-cell !important;
}

/* Subtotal sigue oculto (si lo quieres así) */
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-subtotal{
  display: none !important;
}

/* Ocultar botones +/- (varía según tema) */
.woocommerce-cart table.cart td.product-quantity .quantity .minus,
.woocommerce-cart table.cart td.product-quantity .quantity .plus,
.woocommerce-cart table.cart td.product-quantity button.minus,
.woocommerce-cart table.cart td.product-quantity button.plus{
  display: none !important;
}

/* Dejar el input visible, centrado y "bloqueado" */
.woocommerce-cart table.cart td.product-quantity .quantity input.qty{
  pointer-events: none !important;
  opacity: .70 !important;
  background: #f5f5f5 !important;
  border-color: #ddd !important;
  width: 54px !important;
  text-align: center !important;
}

/* Ocultar "Actualizar carrito" */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart button.update_cart{
  display: none !important;
}

/* cuando ocultamos por JS, esto asegura que no queda layout raro */
.eco-bc-wrap[style*="display: none"] { display: none !important; }

.eco-bc-unavailable-notice{
  background: #f0f0f6;
  border: 2px solid #101011;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.04);
}

/* Transición suave para ambos */
.elementor-menu-cart__footer-buttons a.elementor-button{
  border-radius:999px !important;
  text-transform:none !important;
  transition: all .25s ease !important;
}

/* ============================= */
/* VER CARRITO (gris) */
/* ============================= */
.elementor-menu-cart__footer-buttons a.elementor-button--view-cart{
  background:#e6e6e6 !important;
  color:#111 !important;
  border:1px solid #d0d0d0 !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover{
  background:#cfcfcf !important;       /* más contraste */
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* ============================= */
/* FINALIZAR COMPRA (azul global) */
/* ============================= */
.elementor-menu-cart__footer-buttons a.elementor-button--checkout{
  background-color: var(--e-global-color-primary) !important;
  border-color: var(--e-global-color-primary) !important;
  color:#fff !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover{
  filter: brightness(0.85);             /* más oscuro que antes */
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

/* Input cantidad limpio estilo texto */
.eco-qty-clean{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: center;
  font-weight: 600;
  width: 40px;
  cursor: default;
}

/* ============================================================
   REDISEÑO CARRITO: tarjetas tipo app
   Petición de Carla: la tabla de carrito (Producto/Envío/Precio/Cantidad
   descuadrados) tenía que "parecer una app", basándose en una captura de
   referencia de otro sitio (tarjeta con cabecera "Trabajo 1", imagen +
   nombre + entrega estimada, y abajo cantidad + precio) pero con
   nuestros propios colores (azul/rosa de la calculadora) en vez del
   turquesa del sitio de referencia.

   ✅ Esto es un RESKIN puro sobre la tabla real de WooCommerce/Elementor
   (confirmado con el inspector del navegador, HTML real pegado por
   Carla) — no se toca ningún PHP/plantilla, así que toda la lógica
   (quitar del carrito, AJAX, el modal "Ver detalle", el cálculo de
   totales) sigue funcionando exactamente igual que antes. Cada fila
   `tr.woocommerce-cart-form__cart-item` pasa de fila de tabla a tarjeta
   mediante CSS Grid, colocando sus mismas celdas (td) en una cabecera
   "Trabajo N" (numerada sola vía contador CSS, sin tocar el HTML) +
   imagen/nombre/quitar arriba + cantidad/precio abajo.
   ============================================================ */

/* Quita el aspecto de tabla: sin cabecera "Producto/Precio/...", cada
   fila pasa a ser un bloque independiente (la tarjeta). */
.woocommerce-cart table.cart{
  border: 0 !important;
  border-collapse: separate !important;
}
.woocommerce-cart table.cart thead{
  display: none !important;
}
.woocommerce-cart table.cart tbody{
  display: block !important;
  counter-reset: eco-cart-job;
}

.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item{
  counter-increment: eco-cart-job;
  display: grid !important;
  position: relative; /* ✅ ancla para el botón "quitar" (X), que ahora se
     saca del grid y se coloca encima de la barra azul "Trabajo N" */
  grid-template-columns: 64px 1fr;
  grid-template-areas:
    "jobtag jobtag"
    "thumb  name"
    "qty    qty"
    "price  price";
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--eco-border, #e3e8f2);
  /* ✅ Sin borde abajo (pedido de Carla: "la última, la que está debajo
     del precio, yo la quitaría") — se deja el resto del borde igual.
     Reforzado con !important por si acaso, aunque lo más probable es
     que lo que Carla siga viendo ahí sea caché del navegador. */
  border-bottom: none !important;
  border-radius: var(--eco-radius, 12px);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  padding: 0 14px 14px;
  margin: 0 0 16px;
  overflow: hidden;
}

/* Cabecera "Trabajo 1", "Trabajo 2"... numerada sola por CSS, sin tocar
   el HTML (como "Resumen del trabajo" en la calculadora, misma idea de
   nombrar cada producto como "Trabajo"). */
.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item::before{
  content: "Trabajo " counter(eco-cart-job);
  grid-area: jobtag;
  display: block;
  margin: 0 -14px 12px;
  padding: 8px 14px;
  background: var(--eco-blue-accent, #9cb5dc);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
}

/* ✅ Neutraliza el patrón responsive "clásico" de WooCommerce (etiquetas
   Producto:/Cantidad:/Precio: generadas con ::before + content:
   attr(data-title), más el padding-left:50% que las acompaña siempre
   en ese patrón) que seguía activo por debajo de este rediseño. Era la
   causa de las etiquetas de texto no deseadas y del "montón de margen"
   sin sentido que Carla vio a la izquierda del contenido. */
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart td.product-name,
.woocommerce-cart table.cart td.product-quantity,
.woocommerce-cart table.cart td.product-price{
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: static !important;
}
.woocommerce-cart table.cart td.product-thumbnail,
.woocommerce-cart table.cart td.product-name,
.woocommerce-cart table.cart td.product-quantity{
  text-align: left !important;
}
/* ✅ product-price se EXCLUYE de este "matar ::before" (con :not()):
   ahí SÍ queremos un ::before propio, el que pinta la palabra "Precio"
   (ver más abajo) — sin este :not(), esta regla (más específica que la
   de "Precio") lo anulaba también a él y por eso no se veía. */
.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td:not(.product-price)::before{
  content: none !important;
  display: none !important;
}
/* ✅ Iteración 11: blindaje extra para la raya de debajo de "Precio".
   No hay ningún border-bottom nuestro ni de WooCommerce que la explique
   (revisado el CSS de fábrica de WooCommerce, no pone ninguno ahí) —
   esto anula por si acaso un border-bottom en CUALQUIER celda de la
   tarjeta, no solo en el <tr> (ya cubierto arriba), por si viniera de
   Elementor. Si tras esto y un refresco forzado del navegador sigue
   viéndose, ya no es nuestro CSS: habría que mirar si el widget de
   Elementor del carrito tiene su propia opción de "divisor" activada. */
.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td{
  border-bottom: none !important;
}

.woocommerce-cart table.cart td.product-thumbnail{
  grid-area: thumb !important;
  width: auto !important;
  padding: 0 !important;
  border-top: none !important;
}
.woocommerce-cart table.cart td.product-thumbnail img{
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* ✅ El botón "quitar" (X) se saca del grid y se ancla encima de la
   barra azul "Trabajo N" (que es un ::before y no puede llevar hijos
   reales dentro), como pidió Carla: "la x yo la pondría dentro de la
   barra azul del trabajo". Se restyla en blanco/translúcido para que
   se vea bien sobre el azul en vez del rojo por defecto de WooCommerce. */
.woocommerce-cart table.cart td.product-remove{
  position: absolute !important;
  top: 8px;
  right: 12px;
  z-index: 2;
  padding: 0 !important;
  border-top: none !important;
}
.woocommerce-cart table.cart td.product-remove a.remove{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  font-size: 16px;
  line-height: 1;
}
.woocommerce-cart table.cart td.product-remove a.remove:hover{
  background: #fff !important;
  color: var(--eco-blue-accent-dark, #7891c2) !important;
}

.woocommerce-cart table.cart td.product-name{
  grid-area: name !important;
  padding: 0 !important;
  min-width: 0;
  /* ✅ WooCommerce pone por defecto un border-top a TODAS las celdas de
     la tabla (.woocommerce table.shop_table td{border-top:...}). Sin
     anular esto aquí, esa línea nativa se sumaba a la nuestra (la que
     separa la info de "cantidad") y se veían dos rayas seguidas, como
     comentó Carla. */
  border-top: none !important;
  /* ✅ Grid propio (dentro de la celda) para emparejar "Ver detalle" con
     la fecha de entrega en una fila, y "Normal (envío)" con el add-on
     "+5€" en la siguiente (petición de Carla, marcado a mano en la
     captura) — sin tocar el HTML de nombre/enlace, "aplanando" el
     <dl>/<dd>/<p> de WooCommerce con display:contents más abajo para que
     sus piezas puedan colocarse como grid items independientes. */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "pname pname"
    "eye   entrega"
    "ship  addon";
  column-gap: 10px;
  row-gap: 6px;
  align-items: baseline;
}
.woocommerce-cart table.cart td.product-name .ecoi-cart-item-name-plain{
  grid-area: pname;
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #1d2327;
}
/* Los <br> sueltos (entre nombre y "Ver detalle", y entre el envío y la
   fecha de entrega dentro del mismo párrafo) ya no hacen falta: el grid
   de arriba se encarga de las filas. */
.woocommerce-cart table.cart td.product-name > br,
.woocommerce-cart table.cart td.product-name dl.variation dd.variation-Envo p br{
  display: none;
}

/* "Envío" / "Revisión exhaustiva de ficheros": se "aplana" el <dl> (y el
   <dd>/<p> del envío en concreto, que junta el precio de envío y la
   fecha de entrega en un único párrafo con un <br> en medio) para que
   cada pieza pueda colocarse en su propia celda del grid de arriba sin
   tocar el HTML. Se ocultan las etiquetas "Envío:"/"Revisión exhaustiva
   de ficheros:" (el propio texto ya se entiende sin repetirlas). */
.woocommerce-cart table.cart td.product-name dl.variation{
  display: contents;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
.woocommerce-cart table.cart td.product-name dl.variation dt{
  display: none;
}
.woocommerce-cart table.cart td.product-name dl.variation dd.variation-Envo,
.woocommerce-cart table.cart td.product-name dl.variation dd.variation-Envo p{
  display: contents;
}
/* ✅ Red de seguridad: si algún producto trajera alguna otra fila extra
   de atributos (ni "Envío" ni el add-on), que no desaparezca ni se
   monte encima de las demás — se deja como fila propia a todo lo ancho. */
.woocommerce-cart table.cart td.product-name dl.variation dd:not(.variation-Envo):not(.variation-Revisinexhaustivadeficheros){
  grid-column: 1 / -1;
}
.woocommerce-cart table.cart td.product-name .eco-ship-price{
  grid-area: ship;
  justify-self: start;
}
.woocommerce-cart table.cart td.product-name .eco-entrega-estimada{
  grid-area: entrega;
  justify-self: end;
  text-align: right;
  color: var(--eco-blue-accent-dark, #7891c2);
  font-weight: 600;
}

/* El add-on ("+5€" + papelera) se queda como UN bloque (no se "aplana"
   su <dd>) para que el importe y la papelera se sigan viendo uno al
   lado del otro dentro de su propia celda, a la derecha, emparejados
   con "Normal (...)" en la misma fila. */
.woocommerce-cart table.cart td.product-name dl.variation dd.variation-Revisinexhaustivadeficheros{
  grid-area: addon;
  justify-self: end;
  margin: 0;
}
.woocommerce-cart table.cart td.product-name dl.variation dd.variation-Revisinexhaustivadeficheros p{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* "Ver detalle" al estilo "⊙ Detalles" de la imagen de referencia:
   icono redondo (dibujado en CSS, sin depender de ningún icono nuevo) +
   texto, en nuestro azul en vez del turquesa del original. */
.woocommerce-cart table.cart td.product-name .ecoi-item-eye{
  grid-area: eye;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  /* ✅ Rosa del branding en vez de azul (pedido de Carla) — el icono
     circular usa currentColor, así que cambia de color solo. */
  color: var(--eco-pink-accent, #e7a3c4);
  text-decoration: none;
}
.woocommerce-cart table.cart td.product-name .ecoi-item-eye::before{
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* Cantidad: ya no es un input editable (viene "readonly" del propio
   plugin, .eco-qty-clean), así que se muestra como texto plano + la
   palabra "unidades" añadida por CSS (no hace falta tocar el PHP). */
.woocommerce-cart table.cart td.product-quantity{
  grid-area: qty !important;
  padding: 0 !important;
  /* ✅ Iteración 12: Carla pidió UNA sola línea de separación, entre el
     bloque de envío/detalles y "cantidad" (ninguna en "precio"). Se
     pone aquí un border-top propio (nuestro selector ya es más
     específico que el de WooCommerce, así que gana sin necesitar
     !important) — es la ÚNICA raya que debe quedar en el pie de la
     tarjeta. */
  border-top: 1px solid var(--eco-border, #eef1f7);
  /* ✅ Iteración 13: Carla probó en el inspector con padding-top:20px
     !important y confirmó que así se ve bien — se traslada aquí al
     fichero. Necesita !important porque el "padding: 0 !important" de
     arriba (en esta misma regla) si no, gana siempre sobre un
     padding-top sin !important, aunque esté escrito después. */
  padding-top: 20px !important;
  font-size: 13px;
  color: #64748b;
  /* ✅ Alineada a la derecha igual que el precio (pedido de Carla), en vez
     de a la izquierda como estaba antes — así las dos filas (cantidad
     arriba, precio abajo) quedan alineadas por el mismo borde derecho. */
  text-align: right !important;
}
.woocommerce-cart table.cart td.product-quantity .eco-qty-clean{
  color: #64748b;
  font-weight: 600;
}
.woocommerce-cart table.cart td.product-quantity::after{
  content: " unidades";
}

.woocommerce-cart table.cart td.product-price{
  grid-area: price !important;
  padding: 0 !important;
  /* ✅ Sin línea divisoria respecto a "Cantidad" (pedido de Carla, ver
     nota en product-quantity: "déjalas al mínimo posible") — se queda
     solo el hueco del row-gap del grid como separación entre las dos
     filas, sin raya. Se anula también aquí, explícitamente, el
     border-top por defecto de WooCommerce (mismo problema que se
     detectó en product-quantity en la iteración 10) para que no
     reaparezca una raya encima de "Precio" el día de mañana. */
  border-top: none !important;
  padding-top: 10px !important;
  text-align: right !important;
  font-weight: 800;
  font-size: 16px;
  color: #1d2327;
  /* ✅ El importe se queda exactamente donde estaba (a la derecha, sin
     tocar su posición); la etiqueta "Precio" se añade aparte con
     position:absolute para no desplazar el importe (ver ::before).
     Necesita !important: un reset anterior fuerza position:static
     !important en todas las celdas y si no, ganaba él (por ir después
     en el archivo) y el ::before se posicionaba respecto a toda la
     tarjeta en vez de respecto a esta celda, quedando escondido detrás
     de la barra azul "Trabajo N". */
  position: relative !important;
}
.woocommerce-cart table.cart td.product-price::before{
  content: "Precio";
  position: absolute;
  left: 0;
  top: 10px;
  font-weight: 600;
  font-size: 13px;
  color: #64748b;
}

/* El "Subtotal" repite siempre el mismo importe que "Precio" (la cantidad
   configurada -100 unidades, etc.- ya viene incluida en el precio de la
   línea; la cantidad NATIVA de WooCommerce se fuerza a 1 en la
   calculadora), así que se oculta para no mostrar el mismo número dos
   veces en la tarjeta. */
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-subtotal{
  display: none !important;
}

/* ✅ Anula el "rayado de cebra" que WooCommerce añade de serie en pantallas
   pequeñas a las filas pares (tr:nth-child(2n) td → fondo gris clarito).
   Con nuestro diseño de tarjetas independientes no tiene sentido que una
   tarjeta salga con fondo gris solo por ser la "2ª", "4ª"... — esto es lo
   que hacía que la tarjeta "Trabajo 2" se viera "rara" (fondo gris en la
   fila de cantidad) que comentó Carla. */
.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item:nth-child(2n) td{
  background-color: transparent !important;
}

/* ✅ En móvil (<768px) WooCommerce oculta la miniatura de serie
   (table.cart .product-thumbnail{display:none}, en woocommerce-smallscreen.css)
   pero nuestro grid seguía reservando su columna de 64px igualmente, dejando
   un hueco en blanco a la izquierda sin ningún sentido (justo lo que Carla
   marcó en la captura: "hay demasiado margen en los lados... es una versión
   móvil y le estás quitando espacio"). En móvil pasamos a una sola columna
   a todo el ancho para nombre/cantidad/precio, ya que no hay miniatura que
   compartir columna con ellos. */
@media (max-width: 768px){
  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "jobtag"
      "name"
      "qty"
      "price";
  }
}

/* ==============================
   Modal - evitar que la X se solape con el título
   ============================== */

.ecoi-modal__dialog {
  position: relative;
  padding-top: 40px; /* espacio reservado para la X */
}

/* Botón cerrar */
.ecoi-modal__close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  font-size: 20px;
}

/* Ajuste título por seguridad */
.ecoi-modal__title {
  margin-top: 0;
  padding-right: 40px; /* evita que texto largo toque la X en horizontal */
}

/* ============================================================
   FIX DEFINITIVO — Modal (X no se solapa + media full height)
   Pegar al FINAL del style.css
   ============================================================ */

/* Reservar espacio superior para la X y evitar solape */
.ecoi-modal__dialog{
  position: relative !important;
  padding-top: 56px !important;  /* espacio real para la X */
}

/* X arriba derecha, siempre encima */
.ecoi-modal__close{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 50 !important;
  width: 40px !important;
  height: 40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: #fff !important;
}

/* El título deja hueco a la derecha por seguridad */
.ecoi-modal__title{
  padding-right: 80px !important;
}

/* Grid: estirar columnas para que la izquierda tenga alto */
.ecoi-modal__grid{
  align-items: stretch !important;
}

/* Media: ocupa todo el alto disponible */
.ecoi-modal__media{
  min-height: 340px !important; /* ajusta si quieres más grande */
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

/* Imagen: rellena el contenedor */
.ecoi-modal__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display:block !important;
  border-radius: 12px !important;
}

/* Responsive */
@media (max-width: 980px){
  .ecoi-modal__media{ min-height: 220px !important; }
}


/* ============================================================
   (antes "FIX DEFINITIVO — Carrito: imagen grande y cuadrada": esa
   versión -110/130px- quedó reemplazada por el rediseño de tarjetas más
   arriba, "REDISEÑO CARRITO", que fija el tamaño de la miniatura en
   64px a juego con la tarjeta. Esta regla se deja vacía a propósito en
   vez de borrarla, para que quede constancia de dónde vivía y no
   reaparezca sin querer en un copia/pega futuro.)
   ============================================================ */
.woocommerce-cart table.cart td.product-thumbnail img{
  display: block !important;
}

/* ==========================================
   MINI CART - Scroll interno
   ========================================== */

/* Limita la altura del contenido */
.woocommerce-mini-cart.cart_list {
  max-height: 380px;   /* ajusta a tu gusto */
  overflow-y: auto;
  padding-right: 6px;  /* evita que el scroll tape contenido */
}

/* Opcional: scroll más fino (moderno) */
.woocommerce-mini-cart.cart_list::-webkit-scrollbar {
  width: 6px;
}

.woocommerce-mini-cart.cart_list::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 6px;
}

.woocommerce-mini-cart.cart_list::-webkit-scrollbar-thumb:hover {
  background: #b5b5b5;
}

.cart_totals .wc-proceed-to-checkout .button.alt {
  display: block;
  width: 100%;
  padding: 22px 0;     /* 👈 esto le da altura */
  font-size: 20px;     /* 👈 texto más grande */
  font-weight: 600;
  border-radius: 4px;
}

/* Botón realizar pedido (checkout) */
.woocommerce #place_order,
.woocommerce-page #place_order {
  width: 100%;
  padding: 24px 0;
  font-size: 22px;
  font-weight: 700;
  border-radius: 4px;
}

/* Mata cualquier <br> dentro del botón de checkout del carrito */
#eco_proceed_to_checkout br,
.wc-proceed-to-checkout br {
  display: none !important;
}

/* Finalizar compra (carrito) */
.wc-proceed-to-checkout a.checkout-button,
#eco_proceed_to_checkout {
  font-weight: 700 !important;
}

/* Realizar pedido (checkout) */
.woocommerce-checkout #place_order {
  font-weight: 700 !important;
}

/* Ocultar "1 Bulto" */
.ecoi-order-pack-title {
  display: none !important;
}

/* recortar texto sí o sí */
.ecoi-orders .ecoi-order-pack-sub,
.ecoi-orders .ecoi-order-tracking{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* botón más compacto */
.ecoi-orders .ecoi-order-cta .ecoi-btn{
  padding: 7px 10px !important;
  font-size: 13px !important;
}

/* Centrar contenido de las columnas */
.ecoi-orders .ecoi-order-main,
.ecoi-orders .ecoi-order-pack,
.ecoi-orders .ecoi-order-tracking,
.ecoi-orders .ecoi-order-status,
.ecoi-orders .ecoi-order-total,
.ecoi-orders .ecoi-order-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Pedido: número + fecha uno debajo del otro pero centrado */
.ecoi-orders .ecoi-order-main{
  flex-direction:column;
}

/* Total centrado correctamente */
.ecoi-orders .ecoi-order-total{
  font-weight:800;
}

/* Botón centrado */
.ecoi-orders .ecoi-order-cta{
  justify-content:center;
}

/* Cabecera visible */
.ecoi-orders .ecoi-order-row--head{
  padding: 10px 0 !important;
  border-bottom: 1px solid #eee !important;
  font-weight: 800 !important;
  color: #444 !important;
  background: transparent !important;
}

/* Alinear texto cabecera */
.ecoi-orders .ecoi-order-row--head .ecoi-order-col{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* En total/acción, un pelín a la derecha si quieres estética tabla */
.ecoi-orders .ecoi-order-row--head .ecoi-order-total,
.ecoi-orders .ecoi-order-row--head .ecoi-order-cta{
  justify-content:flex-end;
  text-align:right;
}

form.cart .button:not(:first-child),
form.cart button:not(:first-child) {
    margin-left: 0 !important;
}

@media (max-width:768px){
  .product_title.entry-title{
    font-size:24px;
    line-height:1.3;
  }

  /* ocultar precio vacío en móvil */
  .elementor-widget-woocommerce-product-price:has(.price:empty){
    display:none !important;
  }
}

[data-cookiefirst-widget] {
    display: none !important;
}

[data-testid="cookieWidgetContent"] {
    display: none !important;
}

[class^="cf"], [class*=" cf"] {
    display: none !important;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp{
  background: transparent !important;
}

/* ============================================================
   CALCULADORA
   Migrado desde Simple CSS
   ============================================================ */

/* Estilo Nube de Etiquetas */
.nube-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
}

.nube-categorias .btn-categoria {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 50px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    display: inline-block;
}

.nube-categorias .btn-categoria:hover {
    background-color: #f1f5ff;
    border-color: #80b3ff;
    color: #1a1a1a;
}

/* Estilo Calculadora */
#fieldlist_1 .fields {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

#fieldlist_1 .form-group {
    flex: 1 1 auto;
    min-width: 180px;
    margin-bottom: 0 !important;
}

#fieldlist_1 .form-control,
#fieldlist_1 select {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
}

#fieldlist_1 input[type="button"] {
    background-color: #5385D0;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease;
}

#fieldlist_1 input[type="button"]:hover {
    background-color: #8888FF;
}

#fieldlist_1 label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

/* ============================================================
   WOOCOMMERCE - OCULTAR PESTAÑA INFORMACIÓN ADICIONAL
   Migrado desde Simple CSS
   ============================================================ */

.woocommerce div.product .woocommerce-tabs ul.tabs li.additional_information_tab {
    display: none !important;
}

/* ============================================================
   YITH WAPO - ETIQUETAS DE OPCIONES DE PRODUCTO
   Migrado desde Simple CSS
   ============================================================ */

.yith-wapo-block .yith-wapo-addon .yith-wapo-option label,
.yith-wapo-block .yith-wapo-addon .yith-wapo-option div.label {
    font-size: 16px !important;
}

/* ============================================================
   COMPLIANZ - TAMAÑO DE TEXTO EN DOCUMENTOS LEGALES
   Migrado desde Simple CSS
   ============================================================ */

#cmplz-document,
.editor-styles-wrapper .cmplz-unlinked-mode,
#cmplz-document p,
.editor-styles-wrapper .cmplz-unlinked-mode p,
#cmplz-document li,
.editor-styles-wrapper .cmplz-unlinked-mode li,
#cmplz-document td,
.editor-styles-wrapper .cmplz-unlinked-mode td {
  font-size: 17px;
}

/* ============================================================
   WOOCOMMERCE - BOTONES ALT / FINALIZAR COMPRA
   Migrado desde Simple CSS
   ============================================================ */

/* Colores botón finalizar compra */ 
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce #respond input#submit.alt:disabled[disabled],
.woocommerce #respond input#submit.alt:disabled[disabled]:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled:hover,
.woocommerce a.button.alt:disabled[disabled],
.woocommerce a.button.alt:disabled[disabled]:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover,
.woocommerce input.button.alt:disabled[disabled],
.woocommerce input.button.alt:disabled[disabled]:hover {
    color: #ffffff;
    background-color: #1b71e9;
}

/* ============================================================
   WOOCOMMERCE - METADATOS Y VARIACIONES EN CARRITO
   Migrado desde Simple CSS
   ============================================================ */

.woocommerce td.product-name .wc-item-meta .wc-item-meta-label,
.woocommerce td.product-name .wc-item-meta dt,
.woocommerce td.product-name dl.variation .wc-item-meta-label,
.woocommerce td.product-name dl.variation dt {
    list-style: none outside;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
}

.woocommerce td.product-name .wc-item-meta,
.woocommerce td.product-name dl.variation {
    list-style: none outside;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
}

/* ============================================================
   WOOCOMMERCE - CABECERAS DE TABLAS
   Migrado desde Simple CSS
   ============================================================ */

.woocommerce table.shop_table th {
    font-weight: 500;
    color: #121212;
    background-color: #ffffff;
}

/* ============================================================
   WOOCOMMERCE - FILAS DE TOTALES EN TABLAS
   Migrado desde Simple CSS
   ============================================================ */

.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
    width: 35%;
    background-color: rgba(0, 0, 0, .005);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

/* ============================================================
   WOOCOMMERCE - ETIQUETAS DE TOTALES DEL CARRITO
   Migrado desde Simple CSS
   ============================================================ */

#add_payment_method .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-checkout .cart-collaterals .cart_totals table th {
    width: 35%;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
}

/* ============================================================
   WOOCOMMERCE - CONTROLES DE CANTIDAD
   Migrado desde Simple CSS
   ============================================================ */

.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):after,
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):before,
.woocommerce form .quantity.buttons-added .minus,
.woocommerce form .quantity.buttons-added .plus,
.woocommerce form .quantity.buttons-added .qty {
    display: block;
    width: 25px;
    height: 25px;
    min-height: 25px;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, .1);
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    -moz-appearance: textfield !important;
    -webkit-appearance: none;
    border-radius: 0;
    color: inherit;
    box-sizing: border-box;
    text-decoration: none;
}

/* ============================================================
   WOOCOMMERCE - NAVEGACIÓN MI CUENTA
   Migrado desde Simple CSS
   ============================================================ */

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 8px 0;
    border-bottom: 0 solid rgba(0, 0, 0, .1);
    font-size: 18px;
    color: #605F5F;
    font-weight: 500;
    line-height: 32px;
}

.woocommerce-MyAccount-navigation li.is-active a {
    font-weight: 700;
    border-bottom: 1px solid #121212;
    color: #121212;
}

.woocommerce-MyAccount-navigation li a:hover {
    border-bottom: 0 solid rgba(0, 0, 0, .2);
}

/* ============================================================
   ELEMENTOR / WOOCOMMERCE - MINI CARRITO ESCRITORIO
   Migrado desde Simple CSS
   ============================================================ */

.elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__main {
    bottom: auto;
    height: auto;
    left: auto;
    overflow: visible;
    position: relative;
    right: auto;
    top: auto;
    transform: translateX(-300px);
    transition: .3s;
    width: 500px;
}

/* ============================================================
   ELEMENTOR / WOOCOMMERCE - MINI CARRITO MÓVIL
   Migrado desde Simple CSS
   ============================================================ */

@media (max-width: 767px) {
    .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container {
        min-width: auto;
        width: 325px;
    }

    .elementor-menu-cart__product .variation {
        color: var(--product-variations-color, #1f2124);
        display: flow;
        grid-template-columns: max-content auto;
        margin: 10px 0;
    }

    .elementor-4140 .elementor-element.elementor-element-aadc03d.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated {
        align-content: center;
        align-items: center;
        padding-left: 75px;
    }

    .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__main {
        bottom: auto;
        height: auto;
        left: auto;
        overflow: visible;
        position: relative;
        right: auto;
        top: auto;
        transform: translateX(-100px);
        transition: .3s;
        width: 500px;
    }
}

/* ============================================================
   MEGA MENÚ - TARJETAS DE CATEGORÍAS
   Migrado y consolidado desde CSS adicional
   ============================================================ */

.mega-grid ul.products li.product-category {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.mega-grid ul.products li.product-category a {
    display: block;
    height: 100%;
}

.mega-grid ul.products li.product-category img {
    display: block;
    border-radius: 15px;
    border: 2px solid rgba(0, 0, 0, .15);
    transition: transform .35s ease;
}

.mega-grid ul.products li.product-category::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 2px solid transparent;
    transition: border-color .25s ease;
    pointer-events: none;
}

.mega-grid ul.products li.product-category:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .3);
    border-radius: 14px;
    pointer-events: none;
}

.mega-grid ul.products li.product-category:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

.mega-grid ul.products li.product-category:hover::after {
    border-color: #5385D0;
}

.mega-grid ul.products li.product-category:hover img {
    transform: scale(1.04);
}

.mega-grid ul.products li.product-category h2.woocommerce-loop-category__title {
    text-align: center;
    padding: 12px 0;
    margin: 12px 0 0;
    font-size: 1rem;
    line-height: 1.4;
}

.mega-grid ul.products li.product-category h2.woocommerce-loop-category__title mark {
    display: none !important;
}

.mega-grid ul.products li.product-category::before {
    pointer-events: none;
}

/* ============================================================
   MEGA MENÚ - TARJETAS DE PRODUCTOS
   Migrado y consolidado desde CSS adicional
   ============================================================ */

.mega-grid-products {
    --accent-light: #2563eb;
}

.mega-grid-products ul.products li.product {
    position: relative;
    background: #fff;
    border-radius: 15px !important;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.mega-grid-products ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
}

.mega-grid-products ul.products li.product a {
    display: block;
    height: 100%;
    text-decoration: none;
}

.mega-grid-products ul.products li.product a img {
    display: block;
    width: 100%;
    border-radius: 15px !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform .28s ease;
}

.mega-grid-products ul.products li.product:hover a img {
    transform: scale(1.03);
}

.mega-grid-products ul.products li.product .woocommerce-loop-product__title {
    text-align: center;
    margin-top: 12px;
    line-height: 1.4;
    border-top: none !important;
    box-shadow: none !important;
    transition: color .25s ease;
}

.mega-grid-products ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--accent-light);
}

.mega-grid-products ul.products li.product .price {
    display: none !important;
}

.mega-grid-products ul.products li.product .button,
.mega-grid-products ul.products li.product .added_to_cart,
.mega-grid-products ul.products li.product .product_type_simple,
.mega-grid-products ul.products li.product .product_type_variable,
.mega-grid-products ul.products li.product .product_type_grouped {
    display: none !important;
}

/* ============================================================
   WOOCOMMERCE - TARJETAS GENERALES DE PRODUCTO Y CATEGORÍA
   Migrado y consolidado desde CSS adicional
   ============================================================ */

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product-category .woocommerce-loop-category__title {
    border-top: none !important;
    box-shadow: none !important;
}

ul.products li.product,
ul.products li.product-category,
ul.products li.product a,
ul.products li.product-category a,
ul.products li.product img,
ul.products li.product-category img,
ul.products li.product::before,
ul.products li.product::after,
ul.products li.product-category::before,
ul.products li.product-category::after {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

ul.products li.product::before,
ul.products li.product::after,
ul.products li.product-category::before,
ul.products li.product-category::after {
    pointer-events: none !important;
}

ul.products li.product,
ul.products li.product-category {
    background: #fff;
    border-radius: 15px !important;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

ul.products li.product:hover,
ul.products li.product-category:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important;
}

ul.products li.product a img,
ul.products li.product-category a img {
    display: block;
    width: 100%;
    border-radius: 15px !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform .28s ease;
}

ul.products li.product:hover a img,
ul.products li.product-category:hover a img {
    transform: scale(1.03);
}

/* ============================================================
   MEGA MENÚ - APERTURA SUAVE EN ESCRITORIO
   Migrado desde CSS adicional
   ============================================================ */

@media (min-width: 1025px) {

    .mega-smooth .menu-item-has-children > .sub-menu {
        display: block !important;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 9999;

        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transform: translateY(-12px);

        transition:
            max-height .35s ease,
            opacity .25s ease,
            transform .25s ease,
            visibility 0s linear .25s;

        will-change: transform, opacity, max-height;
        pointer-events: none;

        box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    }

    .mega-smooth .menu-item-has-children:hover > .sub-menu,
    .mega-smooth .menu-item-has-children:focus-within > .sub-menu {
        max-height: 1200px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);

        transition:
            max-height .35s ease,
            opacity .25s ease,
            transform .25s ease,
            visibility 0s;

        pointer-events: auto;
    }
}

/* ============================================================
   WOOCOMMERCE - RELACIONADOS / UPSELLS / CROSS-SELLS
   Migrado y consolidado desde CSS adicional
   ============================================================ */

.related.products ul.products li.product .woocommerce-loop-product__title,
.upsells.products ul.products li.product .woocommerce-loop-product__title,
.cross-sells ul.products li.product .woocommerce-loop-product__title {
    text-align: center;
    margin: 12px 8px 8px;
    padding-top: 0;
    border-top: 0 !important;
    line-height: 1.4;
    transition: color .25s ease;
}

.related.products ul.products li.product:hover .woocommerce-loop-product__title,
.upsells.products ul.products li.product:hover .woocommerce-loop-product__title,
.cross-sells ul.products li.product:hover .woocommerce-loop-product__title {
    color: #2563eb;
}

.related.products ul.products li.product .price,
.upsells.products ul.products li.product .price,
.cross-sells ul.products li.product .price {
    display: none !important;
}

.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button,
.cross-sells ul.products li.product .button,
.related.products ul.products li.product .added_to_cart,
.upsells.products ul.products li.product .added_to_cart,
.cross-sells ul.products li.product .added_to_cart,
.related.products ul.products li.product .product_type_simple,
.upsells.products ul.products li.product .product_type_simple,
.cross-sells ul.products li.product .product_type_simple,
.related.products ul.products li.product .product_type_variable,
.upsells.products ul.products li.product .product_type_variable,
.cross-sells ul.products li.product .product_type_variable,
.related.products ul.products li.product .product_type_grouped,
.upsells.products ul.products li.product .product_type_grouped,
.cross-sells ul.products li.product .product_type_grouped {
    display: none !important;
}

/* ============================================================
   WOOCOMMERCE - TARJETAS DEL LISTADO NORMAL
   Migrado desde CSS adicional
   ============================================================ */

.woocommerce ul.products li.product {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
    transition: transform .25s ease, box-shadow .25s ease;
    padding: 14px 14px 16px;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}

.woocommerce ul.products li.product a img {
    display: block;
    width: 100%;
    border-radius: 15px;
    border: 2px solid rgba(0, 0, 0, .15);
    transition: transform .35s ease;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    text-align: center;
    margin: 12px 8px 4px;
    line-height: 1.4;
    font-family: "Sora", sans-serif;
    font-weight: 600;
}

.woocommerce ul.products li.product .price {
    display: block !important;
    text-align: center;
    margin-bottom: 8px;
}

.woocommerce ul.products li.product .button {
    display: inline-block;
    margin: 0 auto;
    background: #E9E6ED !important;
    color: #5485D0 !important;
    border-radius: 14px !important;
    border: 0 !important;
    padding: 10px 22px !important;
    font-family: "Sora", sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
}

.woocommerce ul.products li.product .button:hover {
    background: #5485D0 !important;
    color: #FFFFFF !important;
}