/* === BOTÓN "AGREGAR AL CARRITO" === */
.woocommerce.archive .add_to_cart_button,
.woocommerce.archive .button {
  background-color: #f4d03f !important;
  color: #000 !important;
  border: none !important;
  border-radius: 19px !important;
  padding: 10px 30px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-size: 12px;
}

/* Hover (al pasar el cursor) */
.woocommerce.archive .add_to_cart_button:hover,
.woocommerce.archive .button:hover {
  background-color: #e6c300 !important;
  color: #000 !important;
  transform: scale(1.03);
}

/* === TÍTULO DE PRODUCTOS === */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2em;
  font-size: 15px;
  text-align: left;
  
}

/* === IMÁGENES DE PRODUCTO === */
.woocommerce ul.products li.product img {
  min-height: 250px;
  object-fit: contain;
  background-color: #fff;
  width: 100%;
  max-height: 250px;
}

/* === OCULTAR ELEMENTOS NO DESEADOS === */
.shopengine_add_to_list_action,
.shopengine-quickview-trigger,
.shopengine_comparison_add_to_list_action,
.woocommerce ul.products li.product .onsale {
  display: none !important;
}

/* === ESPACIADO ENTRE PRODUCTOS EN ESCRITORIO === */
.woocommerce ul.products li.product {
  margin-bottom: 10px !important;
}

.woocommerce ul.products {
  row-gap: 20px !important;
  gap: 20px !important;
}

/* === ESTILOS RESPONSIVOS (MÓVIL) === */
@media (max-width: 768px) {
  /* Botón más compacto */
  .woocommerce.archive .add_to_cart_button,
  .woocommerce.archive .button {
    font-size: 12px !important;
    padding: 14px 20px !important;
    white-space: nowrap;
    width: auto !important;
    max-width: 100%;
    display: inline-block;
  }

  /* Imagen más pequeña */
  .woocommerce ul.products li.product img {
    height: 200px;
  }

  /* Menor separación entre productos */
  .woocommerce ul.products li.product {
    margin-bottom: 10px !important;
  }

  .woocommerce ul.products {
    row-gap: 10px !important;
    gap: 10px !important;
  }
}