.products > li {
  width: 100%;
  list-style: none;
}

.products > li > a {
  display: flex;
  flex-direction: column;
}

.products > li .product-image {
  position: relative;
  width: 100%;
  border-radius: 32px;
  background: var(--background-secondary);
}

.product-image img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.product-title {
  display: grid;
  justify-content: space-between;

  align-items: center;
  width: 100%;

  text-decoration: none;
  list-style: none;
  height: 36px;
}

.product-title h2 {
  order: -1;
}

.product-title:has(.star-rating) {
  grid-template-columns: 1fr 38px;
}

.product-title .star-rating {
  margin: 0 !important;
  padding-right: 4px;
  width: 14px;
  overflow: inherit;
  justify-self: flex-end;
}

.product-title .star-rating::before {
  content: "";
  margin-right: 10px;
  right: 10px;
  top: 2px;
  left: inherit;
  font-family: "Jost", sans-serif;
  font-weight: 600;
}

.product-title:has([aria-label*="5."]) .star-rating::before {
  content: "5.0";
}

.product-title:has([aria-label*="4."]) .star-rating::before {
  content: "4.0";
}

.product-title:has([aria-label*="3."]) .star-rating::before {
  content: "3.0";
}

.product-title:has([aria-label*="2."]) .star-rating::before {
  content: "2.0";
}

.product-title:has([aria-label*="1."]) .star-rating::before {
  content: "1.0";
}

.product-title .star-rating,
.product-title .star-rating > span {
  font-size: 14px;
}

.product-title .star-rating > span {
  overflow: hidden;
  height: 0px;
}

.product-title h2 {
  margin: 0;
  padding-left: 4px;
}

.product-price {
  font-size: 1.1rem;
  padding: 0 4px;
}

.product-price > span {
  color: #8c8c8c;
  font-weight: 400;
}

.product-price > .price {
  color: var(--color-text-primary);
}

.product-price .price > del {
  color: red;
}

.product-price .price > ins {
  color: var(--color-text-primary);
  text-decoration: none;
  background-color: transparent !important;
}

.products > li .product-image .onsale {
  display: none;
}

.woocommerce-shop-container .shop-content .woocommerce-ordering select {
  padding: 8px;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-primary);
}

/* Animations */

.product-image img {
  transition: all var(--transition-duration) var(--transition-timing);
}

.woocommerce-loop-product__link:hover .product-image img {
  transform: scale(1.05);
}

.woocommerce-loop-product__title {
  display: -webkit-box; /* Habilita la compatibilidad con truncado de varias líneas */
  -webkit-line-clamp: 1; /* Número máximo de líneas a mostrar */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* Asegura el comportamiento normal del texto */
  font-size: 18px !important;
  font-weight: 400;
}

.product-price .star-rating {
  display: none !important;
}

.product-price > .price > .woocommerce-Price-amount.amount bdi,
.product-price > .price > ins > .woocommerce-Price-amount.amount bdi {
  font-size: 20px;
  font-weight: 600;
}

@media (max-width: 48em) {
  .woocommerce-loop-product__title {
    font-size: 14px !important;
  }

  .product-price > .price > del {
    font-size: 14px !important;
  }

  .product-price > .price > .woocommerce-Price-amount.amount bdi {
    font-size: 18px;
    font-weight: 600;
  }
}

/* Estilos para el contenedor de precio en el modal */
.shop-variation-price {
  font-size: 1.4rem;
  padding: 0 4px;
}

.shop-variation-price > span {
  color: #8c8c8c;
  font-weight: 400;
}

/* Estilos para el precio regular */
.shop-variation-price del,
.shop-variation-price .shop-regular-price {
  color: red;
  text-decoration: line-through;
  margin-right: 8px;
  font-weight: 400;
}

/* Estilos para el precio de oferta */
.shop-variation-price ins,
.shop-variation-price .shop-sale-price {
  color: var(--color-text-primary);
  text-decoration: none;
  background-color: transparent !important;
  font-weight: 600;
}

/* Estilos para el precio normal (sin descuento) */
.shop-variation-price .shop-price {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Estilos para el símbolo de moneda */
.shop-variation-price .woocommerce-Price-currencySymbol {
  font-weight: 400;
  font-size: 0.9em;
}

/* Animación para cambio de precio */
@keyframes price-update {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.shop-variation-price.updating {
  animation: price-update 0.3s ease-in-out;
}

.shop-variation-price > del .woocommerce-Price-amount.amount {
  font-size: 1.2rem;
}