/* Estilo general del contenedor del detalle del producto */
.product-detail {
    padding: 20px;
    background-color: #f9f9f930;

      
}

.product-detail-container {
    max-width: 800px; /* Limita el ancho del contenedor */
    margin: auto; /* Centra el contenedor */
    background: rgba(255, 255, 255, 0.48); /* Fondo blanco */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    padding: 20px; /* Espaciado interno */


}


/* Títulos y descripciones del producto */
.product-title {
    font-size: 28px; /* Tamaño del título */
    margin-bottom: 10px; /* Espacio inferior */
}

.product-description {
    font-size: 16px; /* Tamaño del texto de descripción */
    color: #666; /* Color gris */
    margin-bottom: 15px; /* Espacio inferior */
}

.product-price {
    font-size: 20px; /* Tamaño del precio */
    color: #007bff; /* Color azul */
    margin-bottom: 20px; /* Espacio inferior */
}

/* Estilos para el carrusel de imágenes */
.image-carousel {
    margin-bottom: 20px; /* Espacio inferior */
}

.image-main {
    width: 100%; /* Ancho completo */
    height: auto; /* Altura automática */
    border-radius: 5px; /* Bordes redondeados */
}

/* Imágenes en miniatura */
.thumbnail-images {
    display: flex; /* Flexbox para mostrar las imágenes en miniatura */
    gap: 10px; /* Espacio entre imágenes */
    margin-top: 10px; /* Espacio superior */
}

.thumbnail {
    width: 80px; /* Ancho fijo para miniaturas */
    height: auto; /* Altura automática */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano */
    transition: transform 0.2s; /* Transición al pasar el mouse */
}

.thumbnail:hover {
    transform: scale(1.1); /* Efecto de ampliación al pasar el mouse */
}

/* Sección de reseñas */
.reviews-section {
    margin-top: 30px; /* Espacio superior */
}

.reviews-title {
    font-size: 24px; /* Tamaño del título de reseñas */
    margin-bottom: 10px; /* Espacio inferior */
}

.reviews-list {
    list-style-type: none; /* Sin viñetas */
    padding: 0; /* Sin relleno */
}

.review-item {
    border: 1px solid #ddd; /* Borde gris */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px; /* Espacio interno */
    margin-bottom: 10px; /* Espacio inferior */
    background-color: #f9f9f9; /* Fondo claro */
}

.review-rating {
    font-weight: bold; /* Negrita */
}

.review-comment {
    margin: 5px 0; /* Espacio superior e inferior */
}

.review-user {
    font-size: 12px; /* Tamaño de fuente más pequeño */
    color: #999; /* Color gris */
}

/* Estilos para enlaces de acción */
.action-links {
    margin-top: 20px; /* Espacio superior */
}

.review-link,
.back-link {
    display: inline-block; /* Bloque en línea para los enlaces */
    margin-right: 15px; /* Espacio entre enlaces */
    text-decoration: none; /* Sin subrayado */
    color: #007bff; /* Color azul */
    transition: color 0.3s; /* Transición suave para el color */
}

.review-link:hover,
.back-link:hover {
    color: #0056b3; /* Color más oscuro al pasar el mouse */
}



/* whatsapp */

.whatsapp-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366; /* Color de fondo de WhatsApp */
    color: white;
    border-radius: 50%;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    font-size: 24px; /* Tamaño del ícono */
    transition: background-color 0.3s;
}

.whatsapp-icon:hover {
    background-color: #128C7E; /* Color al pasar el mouse */
}