body{
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    margin: 0;   
    font-family: 'Tinos', serif;
}

h1, h2, h3, h4, h5, h6, .contact h3, .info h2 {
    font-family: 'Libre Caslon Condensed', serif;
    font-weight: 600; /* Μπορείς να παίξεις με το 400, 500, 600, 700 για το πάχος */
}

.navbar a, .mobile_navbar a, .top-button, .card button {
    font-family: 'EB Garamond', serif;
    font-weight: 500; /* Για να είναι ευανάγνωστο το μενού */
}

.card input, .card textarea, .contact li, .info {
    font-family: 'Tinos', serif;
}

html {
	scroll-behavior: smooth;
}

.navbar, .mobile_navbar{
    background-color: #2a3f20;
    backdrop-filter: blur(10px);
    box-shadow: 0px 8px 50px rgba(0, 0, 0, 0.336);
}

.navbar ul, .mobile_navbar{
    background-color: #2a3f20;
    backdrop-filter: blur(10px);
    height: 70px;
    margin: 0; 
    padding: 0;
    

    list-style: none;
    display: flex;
    justify-content:center;
    align-items: center;
    position: relative;
}

.navbar .menu-button {
    display: none;
}

@media (max-width: 1200px){
    .hideOnMobile{
        display: none;
    }
    .navbar .menu-button{
        display: block;
        position: absolute;
        right: 20px;
    }
}

.navbar li, .mobile_navbar li{
    height: 100%;
}

.navbar li:first-child{
    position: absolute; 
    left: 20px;
    height: 100%;
}

.navbar img{
    height: 100%;
    width: auto;
    display: block;
    object-fit: cover;
}


.navbar a{
    height: 100%;
    padding: 0 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #e5e0ca;
    font-size: clamp(1rem, 1.4vw, 1.5rem);
    font-family: 'Libre Caslon Condensed', serif;
}

.mobile_navbar a{
    height: 100%;
    padding: 0 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #e5e0ca;
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-family: 'Libre Caslon Condensed', serif;
}

.navbar li:not(:first-child) a, 
.mobile_navbar li:not(:first-child) a {
    position: relative;
}

.navbar li:not(:first-child) a::before, 
.mobile_navbar li:not(:first-child) a::before {
    content: '';
    position: absolute;
    width: calc(100% - 60px);
    height: 3px; 
    border-radius: 4px;
    background-color: white;
    bottom: 20px;
    left: 30px;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.navbar li:not(:first-child) a:hover::before, 
.mobile_navbar li:not(:first-child) a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

.mobile_navbar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 50%;
    z-index: 999;
    background-color: rgba(48, 48, 48, 0.4);
    backdrop-filter: blur(10px); 
    box-shadow: -10px 0 10px rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.mobile_navbar li{
    width: 100%;
    height: 90px;
}

.mobile_navbar li:first-child{
    height: 110px;
}

/* Back to Top Button Styles */
.top-button {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #2a3f20e3;
    border: 2px solid #223319;
	border-radius: 2rem;
	padding: 0.2rem;
	text-decoration: none;

    opacity: 0;
    pointer-events: none; 
    z-index: 100;
}

.top-button.show {
    opacity: 1;
    pointer-events: auto;
}

.top-button span {
	color: #fff;
	font-size: 3rem;
	transition: 0.2s ease-out;
}

.top-button:hover {
	background-color: #2a3f20;
}
.top-button:hover span {
	transform: translateY(-4px);
}





footer {
    background-color: #2a3f20;
    color: #e5e0ca;
    padding: 4rem 20px 1rem 20px; /* Άπλετος χώρος πάνω και κάτω */
    font-family: 'Tinos', serif;
}

/* Ο "σκελετός" που κρατάει τις 3 στήλες */
.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; 
    max-width: 1100px; /* Κλειδώνει στο ίδιο πλάτος με το .content της σελίδας σου */
    margin: 0 auto;
    gap: 3rem;
}

/* Η κάθε μία στήλη ξεχωριστά */
.footer-section {
    flex: 1;
    min-width: 250px;
}

.footer-section h3 {
    font-family: 'Libre Caslon Condensed', serif;
    font-size: 1.8rem; /* Αντίστοιχο του x-large που είχες */
    margin-bottom: 1.5rem;
    text-align: left; /* Στους υπολογιστές τα θέλουμε στοιχισμένα αριστερά */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Απαλή γραμμή υπογράμμισης */
    padding-bottom: 0.5rem;
}

.footer-section p {
    font-size: 1.2rem; /* Αντίστοιχο του large που είχες */
    line-height: 1.5;
    text-align: left;
}

/* Λίστες Πλοήγησης και Επικοινωνίας */
.footer-links, .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Libre Caslon Condensed', serif;
}

.footer-links li, .footer-contact li {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    align-items: flex-end;
}

.footer-contact img {
    vertical-align: bottom;
}




/* Links (σύνδεσμοι) μέσα στο Footer */
.footer-section a {
    color: #e5e0ca;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Ειδικά τα links του μενού παίρνουν τη γραμματοσειρά του Navbar */
.footer-links a {
    font-family: 'EB Garamond', serif;
}

/* Hover εφέ στα links */
.footer-section a:hover {
    color: white; /* Ένα ανοιχτό λαχανί για να ξεχωρίζει στο hover */
}

/* Το κάτω μέρος με το Copyright */
.footer-bottom {
    text-align: center;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 1.1rem;
    text-align: center;
    margin-top: 0;
}

.footer-content img {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    margin-top: 0;
}

@media (max-width: 767px) {
    .footer-content {
        flex-direction: column; /* Οι στήλες μπαίνουν η μία κάτω από την άλλη */
        text-align: center;
        gap: 0.9rem;
    }

    .footer-section h3, 
    .footer-section p {
        text-align: center; 
        margin-top: 1rem;
        padding-bottom: 0;
    }

    .footer-section h3 {
        border-bottom: none; /* Βγάζουμε τη γραμμή στα κινητά γιατί στο κέντρο "χτυπάει" άσχημα */
    }

    footer {
    padding: 1rem 20px 1rem 20px; /* Άπλετος χώρος πάνω και κάτω */
}
}

.section-wrapper-white{
    width: 100%;
    background-color: white;
}
.section-wrapper1 {
    width: 100%;
    background: #e5e0ca;
}
.section-wrapper1 h1, 
.section-wrapper1 h2, 
.section-wrapper1 p {
    color: #2a3f20;
    
}

.section-wrapper1 h1 {
    margin-top: 3rem;
    padding-bottom: 15px; 
    margin-bottom: 25px; 
    width: 100%;
    text-align: center; 
    position: relative; /* ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ: Λέει στη γραμμή να "κολλήσει" πάνω σε αυτόν τον τίτλο */
}
.section-wrapper1 h1::after {
    content: ""; /* Δημιουργεί ένα αόρατο στοιχείο */
    position: absolute; /* Το τοποθετεί ελεύθερα... */
    bottom: 0; /* ...ακριβώς στο κάτω μέρος του h1 */
    left: 0;
    width: 100%;
    height: 3px; /* Το πάχος της γραμμής σου */
    
    /* ΕΔΩ ΓΙΝΕΤΑΙ Η ΜΑΓΕΙΑ */
    /* Ξεκινάει διάφανο, γίνεται πράσινο στη μέση, και καταλήγει πάλι διάφανο */
    background: linear-gradient(to right, transparent, #2a3f20, transparent);
}


.section-wrapper2 {
    width: 100%;
    background-color: #787c63;
}
.section-wrapper2 h1 {
    margin-top: 3rem;
    padding-bottom: 15px; 
    margin-bottom: 25px; 
    width: 100%;
    text-align: center; 
    position: relative; /* ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ: Λέει στη γραμμή να "κολλήσει" πάνω σε αυτόν τον τίτλο */
    color: #e5e0ca;
}
.section-wrapper2 h1::after {
    content: ""; /* Δημιουργεί ένα αόρατο στοιχείο */
    position: absolute; /* Το τοποθετεί ελεύθερα... */
    bottom: 0; /* ...ακριβώς στο κάτω μέρος του h1 */
    left: 0;
    width: 100%;
    height: 3px; /* Το πάχος της γραμμής σου */
    
    /* ΕΔΩ ΓΙΝΕΤΑΙ Η ΜΑΓΕΙΑ */
    /* Ξεκινάει διάφανο, γίνεται πράσινο στη μέση, και καταλήγει πάλι διάφανο */
    background: linear-gradient(to right, transparent, #e5e0ca, transparent);
}

.section-wrapper3 {
    width: 100%;
    background: linear-gradient(
        to bottom, 
        #e5e0ca 0px,
        #e5e0ca calc(100% - 40px),
        #ffffff 100%     
    );
}
.section-wrapper3 h1, 
.section-wrapper3 h2, 
.section-wrapper3 p {
    color: #2a3f20;
}
.section-wrapper3 h1 {
    margin-top: 3rem;
    padding-bottom: 15px; 
    margin-bottom: 25px; 
    width: 100%;
    text-align: center; 
    position: relative; /* ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ: Λέει στη γραμμή να "κολλήσει" πάνω σε αυτόν τον τίτλο */
}
.section-wrapper3 h1::after {
    content: ""; /* Δημιουργεί ένα αόρατο στοιχείο */
    position: absolute; /* Το τοποθετεί ελεύθερα... */
    bottom: 0; /* ...ακριβώς στο κάτω μέρος του h1 */
    left: 0;
    width: 100%;
    height: 3px; /* Το πάχος της γραμμής σου */
    
    /* ΕΔΩ ΓΙΝΕΤΑΙ Η ΜΑΓΕΙΑ */
    /* Ξεκινάει διάφανο, γίνεται πράσινο στη μέση, και καταλήγει πάλι διάφανο */
    background: linear-gradient(to right, transparent, #2a3f20, transparent);
}

/* =========================================
   ΠΡΟΣΑΡΜΟΓΗ ΓΡΑΜΜΑΤΟΣΕΙΡΩΝ ΓΙΑ ΚΙΝΗΤΑ (Mobile)
========================================= */
@media (max-width: 767px) {
    
    /* 1. Ρύθμιση για όλους τους Κεντρικούς Τίτλους (h1) */
    .section-wrapper1 h1,
    .section-wrapper2 h1,
    .section-wrapper3 h1,
    .title h1 {
        font-size: 2.0rem; /* Ιδανικό, ευανάγνωστο μέγεθος για κινητά */
        margin-top: 2rem;  /* Μικραίνουμε ελαφρώς το κενό από πάνω (από 3rem σε 2rem) */
    }

    /* 2. Ρύθμιση για όλους τους Υπότιτλους (h2) */
    .section-wrapper1 h2,
    .section-wrapper2 h2,
    .section-wrapper3 h2 {
        font-size: 1.5rem;
    }

    /* 3. Ρύθμιση για όλες τις παραγράφους / κείμενα (p) */
    .section-wrapper1 p,
    .section-wrapper2 p,
    .section-wrapper3 p {
        font-size: 1.1rem; /* Όχι πολύ μικρό, για να μη χρειάζεται ζουμ ο χρήστης */
        line-height: 1.6; /* Αφήνει ωραίο "αέρα" ανάμεσα στις γραμμές του κειμένου */
        padding: 0 15px; /* (Προαιρετικό) Βάζει λίγο κενό δεξιά-αριστερά για να μην κολλάει το κείμενο στις άκρες της οθόνης */
    }

    .section-wrapper1, .section-wrapper3{
        padding-bottom: 3rem;
    }
}

.title h1{
    text-align: center;
    color: #2a3f20;
    margin-top: 3rem;
    margin-bottom:0;
    padding-bottom:0;
}


.content{
    width: min(90%, 1100px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content .text-section {
    display: flex;
    flex-direction: column;
    background-color: #2a3f2027;
    gap: 2rem;
    border: 3px solid #2a3f2058;
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 6rem auto;
    box-shadow: 0 1.5rem 3rem -0.75rem hsl(0, 0%, 0%);
}

.content .text-section-white {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 6rem auto;
}

.content .text-section h2, .content .text-section-white h2 {
    font-size: clamp(1.5rem, 1.6vw, 2rem);
    text-align: center;
}

.content .text-section p, .content .text-section-white p {
    font-size: clamp(1.1rem, 1.4vw, 2rem);
    text-align: left;
}





main{
    flex: 1;
}


















/*start of index*/
@keyframes fadeInHero {
    0% { opacity: 0; }
    100% { opacity: 1; }
}




.upper-text {
    width: min(90%, 1100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 15vw;
    color: #e5e0ca;
    text-shadow: 0px 10px 20px rgb(0, 0, 0);
    font-size: clamp(1rem, 2vw, 3rem);   
}

.photo-section {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
    width: 100%;
    
}

.photo-section img {
    flex: 1; 
    min-width: 0;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 1.5rem 3rem -0.75rem hsl(0, 0%, 0%);
    margin-bottom: 2rem;
}

@media (max-width: 767px) {
    .upper-text {
        /* Προαιρετικά: Μειώνουμε λίγο το κενό στο κάτω μέρος για τα κινητά */
        margin-bottom: 10vw; 
    }

    .photo-section {
        flex-direction: column;
        gap: 1rem;
    }
}

.categories-container {
    width: 100%;  
    padding-top:0;  
    margin-top: 0;
}

.category {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.category img{
    width: 100%;          
    max-width: 500px;    
    min-width: 120px;      
    height: auto;        
    aspect-ratio: 1 / 1;   
    object-fit: cover;

    border-radius: 12px;  
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.384);
    
}

.inside-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.inside-category-products {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding:0;
    margin-top:0;
}

.inside-category-products .text h2 {
    font-family: 'Libre Caslon Condensed', serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #e5e0ca;
    text-align: center;
    margin-bottom: 2rem;
}

.inside-category-products h1 ,.inside-category-products h2{
    font-family: 'Libre Caslon Condensed', serif;
    font-size: 2rem;
    color: #e5e0ca;
    text-align: center;
    margin-top: 50px; 

}

.inside-category-products p {
    font-family: 'Tinos', serif;
    font-size: 1.4rem;
    color: #e5e0ca;
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.486);
    padding: 0 6rem;
}

.inside-category .text {
    flex-direction: column;
    flex: 1; 
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 1rem;
    text-align: center;
}

.inside-category .text h2{
    margin-top: 0;
}

.inside-category p{
    font-size: 1.5rem;
}


.drast-text{
    font-size: 1.5rem;
    text-align: center;
}


.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.3s ease-out, transform 1.3s ease-out;
    will-change: opacity, transform; /* Λέει στον browser να το τρέξει γρήγορα */
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}











/*start of slideshow*/
.slideshow {
    position: relative;
    z-index: 0; 
    flex: 1;
    min-width: 0; 
    
    height: 400px; 
    margin: 2rem;
    
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.542);
    text-align: center; 
}

.slideshow .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.slideshow input {
    position: fixed;
    opacity: 0;
    pointer-events: none;
}

.slideshow label {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: solid 2px white;
    border-radius: 50%;
    background-color: transparent;
    margin-top: 360px; /* Φέρνει τις τελίτσες ακριβώς στο κάτω μέρος */
    margin-left: 6px;
    margin-right: 6px;
    cursor: pointer;
    transition: 0.4s;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.slideshow input:checked + label {
    background-color: white;
}

.slideshow input + label::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100' style='fill:white'%3E%3Cpath d='M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    position: absolute;
    height: 100%;
    width: 60px;
    top: 0;
    left: 0;
    z-index: 20;
    cursor: pointer;
    transition: background-size 0.2s;
}

.slideshow input + label:hover::after {
    background-size: 50px 50px;
}

.slideshow input:checked + label::after {
    display: none;
}

.slideshow input:checked + label + .slide ~ input + label::after {
    display: none;
}

.slideshow input:checked + label + .slide + input + label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100' fill='white'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z' /%3E%3C/svg%3E");
    display: block;
    width: 60px;
    right: 0;
    left: auto;
}

.slideshow .slide {
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; /* Τις βάζει κάτω από τις τελίτσες και τα βελάκια */
    transform: translateX(-100%);
    transition: transform 0.4s ease-in-out;
}

.slideshow .slide video,
.slideshow .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;

    object-position: 50% 50%; 

    top: 0;
    left: 0;
    z-index: -2;
}

/* Μαύρο ημιδιάφανο gradient στο κάτω μέρος των εικόνων για να φαίνονται πάντα καθαρά οι άσπρες τελίτσες */
.slideshow .slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 25%);
}

.slideshow input:checked ~ .slide {
    transform: translateX(100%);
}

.slideshow input:checked + label + .slide {
    transform: translateX(0);
}

/*end of slideshow*/

@media (max-width: 767px) {

    .category {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .category .inside-category {
        display: grid;
        grid-template-columns: 1fr; /* Λέει στο κελί να πιάσει όλο το διαθέσιμο πλάτος */
        width: 100%; /* Εξασφαλίζει ότι το κουτί ακολουθεί το 100vw του γονέα */
        border-radius: 0;
        overflow: hidden;
        min-height: 250px;
    }


    .categories-container .category:first-child .inside-category,
    .categories-container .category:first-child .inside-category .image img {
        border-radius: 6px 6px 0 0;
    }

    .categories-container .category:last-child .inside-category,
    .categories-container .category:last-child .inside-category .image img {
        border-radius: 0 0 6px 6px;
        box-shadow: 0 1rem 3rem -0.75rem hsla(0, 0%, 0%, 0.582);
    }

    /* Ξεχωρίζουμε την εικόνα για να την αναγκάσουμε να πιάσει 100% του χώρου */
    .category .inside-category .image {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
    }

    .category .inside-category .text {
        grid-area: 1 / 1;
        min-width: 0;
        min-height: 0;
    }

    .category .inside-category .image img {
        width: 100%;
        height: 100%;
        max-width: none; /* SOS: Ακυρώνει τυχόν περιορισμούς από τον κώδικα του PC! */
        object-fit: cover;
        display: block;
        filter: brightness(0.5);
        border-radius: 0;
    }

    .category .inside-category .text {
        z-index: 2; 
        display: flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center;     
        padding:0;         
        box-sizing: border-box;
        max-height: 100%;
    }

    .category .inside-category .text p {
        color: #e5e0ca; 
        text-align: center;
        margin: 0; 
        line-height: 1.4; 

        overflow-wrap: break-word;
        word-break: break-word;

        font-size: 1.3rem;
        text-shadow: 1px 3px 4px rgb(0, 0, 0); 
    }

    .category .inside-category .text h2 {
        color: #e5e0ca; 
        text-align: center;
        text-shadow: 1px 3px 4px rgb(0, 0, 0); 
    }

    

    .inside-category-products h2:first-child {
        margin-top: 0;
    }

    .inside-category-products p {
        padding: 0 1rem;
    }

    .inside-category .slideshow {
        order: 2; 
    }

    .slideshow {
        flex: none; 
        width: 95%; 
        margin: 1rem; 
        height: 300px; 
    }

    .slideshow label {
        margin-top: 260px; 
    }
}


/*end of about*/



/*start of contact*/

.contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    color: #2a3f20;
}

.contact h2{
    font-size: clamp(1rem, 1.5vw, 2rem);
    text-align: center;
}

.contact ul{
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    gap: 5rem;
    flex: 1;
}

.contact li{
    font-size: clamp(1.1rem, 1.4vw, 2rem);
    margin: 2rem auto;
}

.interactive {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 4rem;
}

.interactive h2{
    text-align: center;
    color: #2a3f20;
}

.info {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 1rem;
    max-width: 500px;
    text-align: left;
    background-color: #2a3f2027;
    gap: 2rem;
    border: 3px solid #2a3f2058;
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 3rem auto;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.801);
    font-size: clamp(1.1rem, 1.4vw, 2rem);

}

.info img{
    width: 50px;
    height: 50px;
}

.map{
    flex: 1;
}

.message{
    flex: 1;
}



.card{
    display: flex;
    background-color: white;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    margin: 2rem auto;
    transition: transform 0.3s ease;
}

.card input, .card textarea{
    width: 80%;
    background-color: white;
    padding: 0.5rem;
    border-radius: 1rem;
    border: 3px solid #2a3f2058;
    font-size: clamp(1.1rem, 3vw, 1.2rem);
    margin-bottom: min(2rem, 3vw);
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.795);
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.card input:focus, .card textarea:focus{
    border: 3px solid #2a3f20;
    outline: none;
    box-shadow: 0 1.5rem 3rem -0.75rem #309700;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.card button{
    margin-top: clamp(1rem, 2vw, 2rem);
    position: relative;
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 1000px;
    border: 3px solid #2a3f2058;
    background-color: white;
    text-decoration: none;
    color: black;
    padding: 1em 1em;
    font-size: clamp(1.1rem, 3vw, 1.2rem);
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.795);
    cursor: pointer;
}

.card button:hover {
    background-color: #2a3f20;
    color: white;
    transition: background-color 0.3s ease;
    box-shadow: 0 1.5rem 3rem -0.75rem #309700;
    img{filter:invert(1);}
}

.card img{
    width: clamp(30px, 5vw, 40px);
    height: clamp(30px, 5vw, 40px);
    margin-left: 10px;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .contact ul {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .contact li {
        margin: 0; 
    }

    .interactive {
        flex-direction: column;
        gap: 20px;
    }

    .info {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
}

/*end of contact*/






/*start of products*/

.products-container {
    width: min(90%, 1100px);
    margin: 40px auto;
}

.products-container h1, .products-container h2 {
    text-align: center;
    color: #e5e0ca;
    margin-bottom: 2rem;
}

.category-dropdown {
    margin-bottom: 1.5rem;
    border: 2px solid #e5e0ca;
    border-radius: 8px;
    background-color: white;
    overflow: hidden;
}

.category-dropdown summary {
    background-color: #2a3f20;
    color: white;
    padding: 1rem 1.5rem;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    list-style: none; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}


.category-dropdown summary:hover {
    background-color: #008f13;
}

.category-dropdown summary::after {
    content: "▼";
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.category-dropdown[open] summary::after {
    transform: rotate(180deg);
}

:root {
  interpolate-size: allow-keywords;
}

.category-dropdown::details-content {
  opacity: 0;
  height: 0; /* Ξεκινάει κλειστό */
  overflow: hidden; 
  
  transition: 
    height 400ms ease-out,
    opacity 400ms ease-out,
    content-visibility 400ms allow-discrete;
}

.category-dropdown[open]::details-content {
  opacity: 1;
  height: auto; 
}

.products-grid {
    display: flex;
    flex-direction: row; /* Τα βάζει στη σειρά (δίπλα-δίπλα) */
    justify-content: flex-start; /* Τα στοιχίζει από αριστερά προς τα δεξιά */
    flex-wrap: wrap; /* Αν δεν χωράνε, τα σπρώχνει στην επόμενη σειρά */
    gap: 20px;
    margin-top: 30px;
    width: 100%;
}

.product-card {
    flex: 1 1 calc(25% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    border-radius: 12px;
    padding: 30px 20px; 

    
    
    position: relative;
    cursor: pointer;
    transition: all 400ms ease;
}

.product-card img {
    width: 100%;      
    max-width: 300px;      
    min-width: 120px;     
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.397);
    
    filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.1)); 
    transition: transform 0.4s ease, box-shadow 0.6s ease;
}

.product-card h4 {
    margin: 0;
    font-family: 'Libre Caslon Condensed', serif;
    font-size: 1.6rem; /* Ελαφρώς μεγαλύτερα γράμματα */
    color: #e5e0ca;
    text-align: center;
    letter-spacing: 0.5px; /* Ελάχιστη απόσταση στα γράμματα για κομψότητα */
}



.product-card:hover img {
    transform: scale(1.12);
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}


@media (max-width: 767px) {
    .products-grid {
        justify-content: center; /* Κεντράρει το 3ο προϊόν (ή όποιο περισσεύει) στη μέση της κάτω σειράς */
        gap: 15px; /* Ελαφρώς μικρότερο κενό ανάμεσα στις κάρτες στα κινητά */
    }
    
    .product-card {
        /* Το 0 0 είναι το μυστικό: Κρατάει την κάρτα αυστηρά στο 50% του πλάτους χωρίς να την αφήνει να τεντώσει! */
        flex: 0 0 calc(70% - 15px); 
        min-width: 140px; /* Προστασία για να μη γίνουν υπερβολικά στενές */
        padding: 15px 10px;
    }
    
    /* Μικραίνουμε ελαφρώς και την εικόνα στα κινητά για να χωράει τέλεια */
    .product-card img {
        max-width: 100%;
        height: auto;
    }
}

/*end of products*/

/*start of individual product*/

.product-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    border-radius: 1rem;
    padding: 1.5rem;
    
    /* 1. Σωστό κεντράρισμα και μέγεθος */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; 
    
    /* -- ΤΑ 3 ΜΥΣΤΙΚΑ ΓΙΑ ΝΑ ΜΗΝ ΞΕΧΕΙΛΩΝΕΙ ΣΤΑ ΚΙΝΗΤΑ -- */
    box-sizing: border-box; /* Υπολογίζει το padding εσωτερικά στο 100% του width */
    max-width: 100vw; /* Απαγορεύει στο κουτί να γίνει πιο πλατύ από την ίδια την οθόνη */
    overflow-x: hidden; /* Κρύβει οτιδήποτε προσπαθήσει να βγει δεξιά/αριστερά */

    align-items: center;
    justify-content: center;
    text-align: center;
}

.product-images {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
    width: 100%;
    height: auto;
}

.product-images img {
    flex:1;
    min-width: 0;
     object-fit: cover;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 1.5rem 3rem -0.75rem hsl(0, 0%, 0%);
    margin-bottom: 2rem;
}

@media (max-width: 767px) {
    .product-images {
        flex-direction: column;
        gap: 1rem;
    }

    .product-images {
        flex-direction: column;
        height: auto; 
    }

    .product-images img {
        width: 100%; 
        height: auto; 
        margin-bottom: 1rem; 
    }
}








.product-images-recipe {
    display: flex;
    flex-direction: row; /* Δίπλα-δίπλα */
    align-items: flex-start; /* Ευθυγράμμιση στην κορυφή */
    gap: 4rem; /* Κενό ανάμεσα σε εικόνα και συνταγή */
    margin-top: 2rem;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

.product-images-recipe > img {
    flex: 0 0 40%; 
    max-width: 500px;
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 1.5rem 3rem -0.75rem hsl(0, 0%, 0%);
}

.product-images-recipe .recipe {
    flex: 1 1 60%;
    width: 100%;
}

.recipe-layout {
    display: flex;
    gap: 40px; 
    margin-top: 20px;
    flex-wrap: wrap; /* Στα κινητά θα πάνε το ένα κάτω από το άλλο */
}

.recipe-ingredients, .recipe-steps {
    flex: 1 1 250px;
}

.recipe-layout h4 {
    color: #2a3f20;
    border-bottom: 2px solid #787c63;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.recipe h3{
    color: #2a3f20;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.5rem;
}


.check-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #2a3f20;
}

.check-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-top: 4px;
    accent-color: #2a3f20; 
    flex-shrink: 0;
    
}

.check-item span {
    transition: all 1s ease;
}

.check-item input[type="checkbox"]:checked + span {
    text-decoration: line-through;
    color: #787c63;
}



@media (max-width: 1200px) {
    /* Εικόνα και συνταγή το ένα κάτω από το άλλο */
    .product-images-recipe {
        flex-direction: column; 
        align-items: center;
        gap: 2rem;
    }

    .product-images-recipe > img {
        flex: 1 1 auto;
        max-width: 100%; /* Η εικόνα απλώνεται σε όλο το κινητό */
    }

    .product-images-recipe .recipe {
        flex: 1 1 auto;
    }
}


#instagram {
    min-height: 550px; /* Μπορείς να το αυξομειώσεις αν το widget σου είναι πιο κοντό ή πιο ψηλό */
    display: flex;
    justify-content: center;
}