/* Carvil UX Enhancer Premium Styles - Sketch Layout */

/* 1. Estructura de la tarjeta (Mini-grid vertical) */
.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column;
  position: relative;
  justify-content: space-between; /* Empuja el bottom action hacia abajo */
  height: 100%; /* Asegura que todas las tarjetas midan lo mismo */
}

/* 2. Top Actions (Favoritos y Más Info) */
.carvil-top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 100 !important;
  order: -1; /* Siempre arriba del todo */
}

/* Estilo unificado para los botones superiores (mismo alto) */
.carvil-top-actions .yith-wcwl-add-to-wishlist,
.carvil-top-actions .yith-wcwl-add-button,
.carvil-top-actions .btn-favoritos,
.carvil-top-actions .btn-mas-info {
  margin: 0 !important;
}

.carvil-top-actions a.add_to_wishlist,
.carvil-top-actions .btn-favoritos,
.carvil-top-actions .btn-mas-info {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: transparent !important;
  color: #002e6d !important;
  border: 1px solid #002e6d !important;
  border-radius: 4px !important;
  padding: 0 12px !important;
  height: 36px !important; /* Alto fijo para simetría */
  box-sizing: border-box !important;
  font-family: 'Effra', 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  width: auto !important;
}

/* Hover sutil para botones superiores */
.carvil-top-actions a.add_to_wishlist:hover,
.carvil-top-actions .btn-favoritos:hover,
.carvil-top-actions .btn-mas-info:hover {
  background-color: #002e6d !important;
  color: #ffffff !important;
}

/* Hacer que los iconos SVG se "iluminen" o rellenen en el hover */
.carvil-top-actions a.add_to_wishlist:hover svg,
.carvil-top-actions .btn-favoritos:hover svg,
.carvil-top-actions .btn-mas-info:hover svg {
  fill: currentColor !important;
}

/* Asegurar que el texto de YITH Wishlist se vea (antes estaba oculto) */
.carvil-top-actions a.add_to_wishlist span {
  display: inline-block !important;
}
.carvil-top-actions a.add_to_wishlist:before {
  font-size: 14px !important;
  margin: 0 !important;
}

/* 2.5 Limitar Títulos Largos (Puntos Suspensivos) */
.woocommerce ul.products li.product .product-item__description--info h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* Mostrar máximo 2 líneas */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  min-height: 2.8em !important; /* Asegura que todas las cards tengan la misma altura reservada para el título */
  margin-bottom: 8px !important;
}

/* 3. Bottom Actions (Añadir al carrito) */
.carvil-bottom-actions {
  width: 100%;
  margin-top: 15px;
  position: relative;
  z-index: 100 !important;
}

/* Botón de Agregar al carrito (Llamativo y Ancho Completo) */
.carvil-bottom-actions .btn-carrito,
.woocommerce ul.products li.product .button.btn-carrito {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important; /* Ocupa todo el ancho inferior */
  font-family: 'Effra', 'Inter', sans-serif !important;
  background-color: #002e6d !important;
  color: #ffffff !important;
  padding: 14px 20px !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important; /* Letra más pesada */
  font-size: 15px !important;
  text-transform: uppercase !important; /* Más persuasivo */
  cursor: pointer;
  transition: all 0.3s ease-in-out !important;
  text-decoration: none !important;
  box-shadow: 0 4px 8px rgba(0, 46, 109, 0.2);
}

.carvil-bottom-actions .btn-carrito:hover,
.woocommerce ul.products li.product .button.btn-carrito:hover {
  background-color: #0044aa !important;
  box-shadow: 0 6px 12px rgba(0, 46, 109, 0.3);
  transform: translateY(-2px);
}

.carvil-bottom-actions .btn-carrito:active {
  transform: translateY(0);
}

/* 4. Precio Llamativo y Persuasivo */
.woocommerce ul.products li.product .price {
  font-size: 22px !important; /* Precio mucho más grande */
  font-weight: 800 !important; /* Letra muy gruesa */
  color: #002e6d !important; /* Azul corporativo para resaltar */
  margin-top: auto !important; /* Lo empuja hacia abajo junto al boton de carrito */
  display: block;
}

/* 5. Iconos SVG */
.carvil-icon {
  display: inline-block;
  vertical-align: middle;
}

/* 6. Badges (Etiquetas de producto) */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Effra', 'Inter', sans-serif;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.badge.entrega {
  background-color: #e9f241;
  color: #002e6d;
}

.badge.pedido {
  background-color: #f0f0f0;
  color: #555555;
  border: 1px solid #ddd;
}

/* 7. Ocultar duplicados y botones nativos del tema Miniture */
.product-item__description--top-actions,
.product-item__description--actions {
  display: none !important;
}

/* Ocultar el botón nativo de YITH Wishlist que se inyecta automáticamente en la foto o título, manteniendo solo el nuestro de .carvil-top-actions */
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist {
  display: none !important;
}

/* Forzar mayor especificidad para que el nuestro SÍ se vea */
.woocommerce ul.products li.product .carvil-top-actions .yith-wcwl-add-to-wishlist {
  display: block !important;
}