/* 1. Forzar que las columnas de la fila compartan la misma altura */
.products.row,
.products .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

.products .js-product {
    display: flex !important;
}

.products .product-miniature {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

/* 2. Sobrescribir height: auto de theme.css para estirar la caja blanca */
.products .product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Reemplaza height: auto de theme.css */
    position: relative !important;
}

/* 3. Fijar la altura exacta del área de descripción */
.products .product-description {
    height: 100px !important; /* Altura fija para alineación exacta */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Centrado horizontal y vertical de los títulos */
.product-miniature .product-title {
    display: flex !important;
    align-items: center !important;     /* Centrado vertical */
    justify-content: center !important; /* Centrado horizontal */
    text-align: center !important;      /* Alineación de texto */
    height: 60px !important;            /* Asegura que mantenga la misma altura reservada */
    margin-bottom: 0 !important;
}

.product-miniature .product-title a {
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}


/* Estilos generales para el contenedor de botones de compartir */
.social-sharing ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.social-sharing ul li {
  margin: 0;
}

.social-sharing ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 4px;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-sharing ul li a:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* Inserción de iconos mediante pseudo-elementos ::before */
.social-sharing ul li a::before {
  font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", "FontAwesome";
  font-weight: 400;
  margin-right: 8px;
  font-size: 16px;
}

/* Iconos y Colores Corporativos por Red Social */

/* Facebook */
.social-sharing ul li.facebook a { background-color: #1877f2; }
.social-sharing ul li.facebook a::before { content: "\f09a"; }

/* X / Twitter */
.social-sharing ul li.twitter a,
.social-sharing ul li.x a { background-color: #000000; }
.social-sharing ul li.twitter a::before,
.social-sharing ul li.x a::before { content: "\e61b"; } /* Si usas FA5 antiguo, cambia \e61b por \f099 */

/* Pinterest */
.social-sharing ul li.pinterest a { background-color: #e60023; }
.social-sharing ul li.pinterest a::before { content: "\f0d2"; }

/* WhatsApp */
.social-sharing ul li.whatsapp a { background-color: #25d366; }
.social-sharing ul li.whatsapp a::before { content: "\f232"; }

/* LinkedIn */
.social-sharing ul li.linkedin a { background-color: #0a66c2; }
.social-sharing ul li.linkedin a::before { content: "\f0e1"; }

/* Telegram */
.social-sharing ul li.telegram a { background-color: #24a1de; }
.social-sharing ul li.telegram a::before { content: "\f2c6"; }

/* Instagram */
.social-sharing ul li.instagram a { background-color: #c13584; }
.social-sharing ul li.instagram a::before { content: "\f16d"; }