/* carousel.css */

/* Center the carousel container and allow it to wrap */
.product-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Gap between cards */
    justify-content: center; /* Ensure the cards are centered horizontally */
    align-items: flex-start; /* Align items to the top (prevents the extra card from being pushed down) */
    margin: 0 auto; /* Center the carousel container itself */
    max-width: 100%; /* Ensure the carousel doesn't exceed the container width */
}

.product-carousel .slick-list {
	padding-top:20px;
	padding-bottom: 20px;
}
/* Styling for the individual product cards */
.product-carousel .single-product {
    border: 1px solid #ddd; /* Light border for the card */
    border-radius: 0.3rem; /* Rounded corners for the card */
    padding: 15px; /* Padding inside the card */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    background-color: #f5f5f5; /* White background */
    transition: transform 0.3s ease; /* Smooth hover effect */
    text-align: center; /* Center content */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px; /* Set minimum height */
    height: 100%; /* Allow card to stretch */
    flex-grow: 1; /* Ensure cards stretch to fill available space */
    flex-basis: calc(33.333% - 20px); /* Set width of each card to be 1/3 of the container width, accounting for gaps */
    box-sizing: border-box; /* Ensure padding and border are included in width */
}

/* Adjustments for smaller screen sizes (optional) */
@media screen and (max-width: 1024px) {
    .product-carousel .single-product {
        flex-basis: calc(50% - 20px); /* On medium screens, show 2 items per row */
    }
	
	
	.product-carousel .single-product {
		width: 100%; /* ή όσο πλάτος έχει η εικόνα */
		height: auto; /* προσαρμόζεται στο ύψος της εικόνας */
		overflow: hidden; /* κρύβει ό,τι ξεφεύγει */
	  }

	  .product-carousel .single-product img {
		width: 100%;
		height: auto;
		display: block;
		object-fit: contain; /* ή cover, ανάλογα με το αποτέλεσμα που θέλεις */
	  }
}

@media screen and (max-width: 768px) {
	
}

/* Hover effect for product cards */
.product-carousel .single-product:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

.product-carousel .single-product img {
    max-width: 100%; /* Make image fill width */
    object-fit: cover; /* Ensure image fits inside without being stretched */
    border-radius: 0.3rem; /* Rounded corners for the image */
    margin-bottom: 10px; /* Space below the image */
    margin-top: 10px; /* Space below the image */
}

.product-carousel .single-product h2 {
    font-size: 21px; /* Adjust the font size */
    color: #333; /* Adjust the color */
    text-align: center; /* Center the title */
    flex-grow: 1; /* Allow the title to take available space */
    height: 1rem;/* Adjust the font size */
    font-weight: 600;
}

.product-carousel .single-product p {
    font-size: 18px; /* Adjust the font size */
    color: #B22222; /* Change the text color */
    text-align: center; /* Center-align the price */
    margin-top: 5rem; /* Add some space above the price */
    font-weight: 700;
}