/* General Styles */
.container {
    width: 90%;
    margin: 0 auto;
    padding: 30px 0;
}

/* Product Highlight Section */
.product-highlight {
    background-color: var(--background-color-secondary);
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Espacio entre texto e imagen */
	 flex-direction: column; /* Imagen debajo del texto */
    align-items: center; /* Centra el contenido */
}

.product-text {
    flex: 1; /* El texto ocupa la mitad del espacio */
    max-width: 600px;
    display: flex;
    flex-direction: column; /* Mantiene el texto alineado en bloque */
    justify-content: center; /* Asegura que el contenido del texto esté centrado verticalmente */
}

.product-text h2 {
    color: var(--text-color);
    margin-bottom: 20px;
	font-size: 2rem;
}

.product-text p {
    margin-bottom: 20px;
}

.product-text ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.product-text ul li {
    font-size: 1.1em;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.product-text ul li:before {
    content: "✔";
    color: var(--button-color);
    position: absolute;
    left: 0;
    top: 0;
}



.product-image {
        width: 100%; /* Asegura que la imagen ocupe el 100% del contenedor */
        height: 300px; /* Fija la altura de la imagen */
        overflow: hidden; /* Oculta cualquier desbordamiento */
        display: flex;
        justify-content: center;
        align-items: center;
			border-radius: 33px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

    .product-image img {
        width: 100%; /* La imagen ajustada al ancho del contenedor */
        height: auto; /* Mantiene la proporción original */
        max-height: 350px; /* Asegura que la altura no exceda 300px */
        object-fit: cover; /* Recorta la imagen para que cubra el contenedor */
    }


/* Purchase Options Section */
.purchase-info {
    background-color: var(--background-color);
    padding: 10px 0;
    text-align: center;
}

.purchase-info h3 {
    font-size: 2em;
    margin-bottom: 15px;
    color: var(--text-color);
}

section div p{
	margin-bottom: 1.2rem;
	text-align: left;
}

.purchase-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.purchase-card {
    background-color: white;
    padding: 20px;
    border-radius: 33px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex: 1;
    text-align: center;
    display: flex;
	/*flex: 1 1 calc(33.33% - 20px); /* Cada tarjeta ocupa 1/3 menos el espacio de gap*/
	
	 flex-direction: column;
    justify-content: space-between; /* Para separar el contenido del botón */
	
	width: 90%;
}

.purchase-card img {
    max-width: 150px;
    margin: 10px 0;
	align-self: center
}
#Etsy{
	max-width: 100px;
}

#Amazon {
	max-width: 120px;
}

.purchase-card h4 {
    font-size: 1.5em;
    color: var(--text-color);
    margin-bottom: 15px;
}

.purchase-card p {
    font-size: 1em;
    color: var(--text-color);
    margin-bottom: 10px;
	text-align: center;
}

.purchase-card .btn {
    margin: auto; /* Empuja el botón al fondo del contenedor */
    margin-top: 10px;
    align-self: flex-end;
}

/* Highlighting the recommended option */
.highlight {
    border: 2px solid var(--button-color);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Customer Reviews Section */
.customer-reviews {
    background-color: var(--background-color-secondary);
    padding: 20px 0;
	margin-bottom: auto;
}

.customer-reviews h3 {
    font-size: 2em;
    margin-bottom: 40px;
	color: var(--text-color);
    text-align: center;
}

.reviews-carousel {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.review-item {
    max-width: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 33px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-style: italic;
    text-align: center;
	color: var(--text-color);
}

.review-item strong {
    font-weight: bold;
    display: block;
    margin-top: 10px;
}
.review-item img {
    width: 100%; /* Ajusta el ancho al contenedor */
    max-height: 200px; /* Limita la altura máxima */
    object-fit: cover; /* Recorta la imagen para ajustarse al contenedor */
    border-radius: 20px; /* Bordes redondeados */
    margin: 15px 0; /* Espaciado alrededor de la imagen */
}

/* General Button Styles */
.btn {
    display: inline-flex; /* Ajusta el ancho al contenido */
    justify-content: center; /* Centra el texto dentro del botón */
    align-items: center; /* Centra verticalmente el texto */
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
    max-width: 100%; /* Asegura que el botón no se desborde */
    width: auto; /* El ancho se ajusta al contenido */
}
.btn-primary {
    background-color: var(--button-color);
    color: white;
    border: 2px solid var(--button-color);
    width: auto; /* Ancho auto basado en el texto */
}

.btn-primary:hover {
    background-color: white;
    color: var(--button-color);
}

.btn-outline {
    background-color: white;
    color: var(--button-color);
    border: 2px solid var(--button-color);
    width: auto; /* El ancho se ajusta al contenido */
}

.btn-outline:hover {
    background-color: var(--button-color);
    color: white;
}

.btn-secondary {
    margin-left: 1rem;
    width: auto; /* Asegura que también el botón secundario tenga ancho auto */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .product-highlight {
        flex-direction: column; /* Cambia a diseño de columna en pantallas pequeñas */
        align-items: center; /* Centra el contenido en pantallas pequeñas */
    }
	p, li{
		text-align: left;
	}

    .product-text {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
	.product-image {
		/*max-width: 100%; /* La imagen se ajusta en pantallas pequeñas */
		 max-height: 200px;
		 object-fit: cover;
	}
	 .product-image img {
        max-width: 100%; /* La imagen se ajusta en pantallas pequeñas */
		 max-height: 200px;
		 object-fit: cover;
    }
	

    .purchase-grid {
        flex-direction: column;
        align-items: center;
    }

    .review-item {
        max-width: 100%;
    }
	.purchase-card {
        flex: 1 1 100%; /* Cada tarjeta ocupa el 100% del ancho en pantallas pequeñas */
    }
    .review-item img {
        max-height: 150px; /* Ajusta la altura máxima para pantallas más pequeñas */
    }
	
	
}


@media (min-width: 768px) {
    .button-group {
        display: flex;
        gap: 10px; /* Espacio entre los botones */
        justify-content: flex-start; /* Opcional: alinea los botones a la izquierda */
    }

    .btn-secondary {
        margin-left: 0; /* Elimina el margen izquierdo en pantallas grandes */
        margin-top: 0; /* Elimina el margen superior en pantallas grandes */
    }
	 .product-highlight {
        flex-direction: row; /* Imagen a la derecha del texto */
        align-items: stretch; /* Alinea el contenido verticalmente */
    }
}



/*-------- Nuevo formato descripción ---------*/

/* Product Highlight Section */
#product-section {
    background-color: var(--background-color-secondary);
    padding: 10px 0;
}

#product-section .container {
    display: flex;
    flex-direction: column; /* Imagen debajo del texto en pantallas pequeñas */
    align-items: center;
    gap: 20px;
}

#product-section .product-text {
    flex: 1;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#product-section .product-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 33px;
}

#product-section .product-image img {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: cover;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    #product-section .container {
        flex-direction: row; /* Imagen a la derecha del texto en pantallas grandes */
        align-items: center;
    }

    #product-section .product-text,
    #product-section .product-image {
        width: 48%; /* Ancho de 48% para texto e imagen en pantallas grandes */
    }
}