/* ====================================
   [03] TARJETA DE PRODUCTO GENERAL
   ------------------------------------
   Estilos para productos mostrados en la tienda
   (no aplica en la página de producto individual).
==================================== */
body:not(.single-product) .product {
  background: #fff;                /* Fondo blanco para las tarjetas */
  border: 1px solid #ddd;          /* Borde gris claro */
  border-radius: 6px;              /* Bordes ligeramente redondeados */
  display: flex;                   /* Flexbox para contenido interno */
  flex-direction: column;         /* Coloca el contenido en columna */
  justify-content: space-between; /* Distribuye el contenido verticalmente */
  transition: box-shadow 0.3s ease;/* Suaviza la aparición de la sombra al hacer hover */
  height: 100%;                    /* Altura completa disponible */
  width: 100%;                     /* Ancho completo */
  overflow: hidden;                /* Oculta cualquier desborde de contenido */
  position: relative;             /* Posición relativa para elementos internos si es necesario */
  padding-bottom: 0 !important;    /* Elimina padding inferior forzado */
  padding-left: 0;                 /* Elimina padding izquierdo */
  padding-right: 0;                /* Elimina padding derecho */
}

/* Efecto al pasar el mouse (hover): sombra para destacar la tarjeta */
body:not(.single-product) .product:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Imagen del producto */
body:not(.single-product) .product img {
  object-fit: contain;         /* Escala la imagen sin recortarla */
  width: 100%;                 /* Ocupa todo el ancho del contenedor */
  aspect-ratio: 4 / 3;         /* Mantiene una proporción de 4:3 */
  padding: 0px;                /* Sin padding */
}

/* Título del producto */
body:not(.single-product) .product .woocommerce-loop-product__title {
  font-size: 1rem;             /* Tamaño estándar */
  padding: 0 10px;             /* Espaciado lateral */
  margin: 1em 0;               /* Separación vertical */
  margin-left: 1em;            /* Ajuste adicional a la izquierda */
  color: #222;                 /* Color del texto (gris muy oscuro) */
}

/* Precio del producto */
body:not(.single-product) .product .price {
  font-weight: bold;          /* Negrita para resaltar el precio */
  color: #b12704;             /* Color rojo estilo Amazon */
  padding: 0 10px 0.5em;      /* Espaciado interno */
  font-size: 1.1em;           /* Tamaño un poco más grande */
  margin-left: 1em;           /* Espaciado izquierdo extra */
}

/* ====================================
   [04] PRODUCTOS EN PÁGINA INDIVIDUAL
   ------------------------------------
   Estilos para tarjetas de productos relacionados,
   upsells y cross-sells en la página individual.
==================================== */
body.single-product .related.products ul.products li.product,
body.single-product .upsells.products ul.products li.product,
body.single-product .cross-sells.products ul.products li.product {
  background: #fff;              /* Mismo fondo que en tienda */
  border: 1px solid #ddd;        /* Mismo borde */
  border-radius: 6px;            /* Bordes redondeados */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.3s ease;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

/* Hover con sombra igual al de tienda */
body.single-product .related.products ul.products li.product:hover,
body.single-product .upsells.products ul.products li.product:hover,
body.single-product .cross-sells.products ul.products li.product:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Imagen en productos relacionados, upsells y cross-sells */
body.single-product .related.products ul.products li.product img,
body.single-product .upsells.products ul.products li.product img,
body.single-product .cross-sells.products ul.products li.product img {
  object-fit: contain;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 10px; /* Un poco de padding en este caso para separarlo del borde */
}

/* Título en estas tarjetas */
body.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
body.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title,
body.single-product .cross-sells.products ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  padding: 0 10px;
  margin: 0.5em 0;               /* Menor separación vertical que en tienda */
  color: #222;
  margin-left: 1em !important;   /* Alineado con el resto del contenido */
}

/* Precio en estas tarjetas */
body.single-product .related.products ul.products li.product .price,
body.single-product .upsells.products ul.products li.product .price,
body.single-product .cross-sells.products ul.products li.product .price {
  font-weight: bold;
  color: #b12704;
  padding: 0 10px 0.5em;
  font-size: 1.1em;
  margin-left: 1em;
}