.mobile-version {
    display: none;
  }


.sitehtml{
}

  .sitehtml img {
    width: 100%;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    align-items: center;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 auto;
    gap: 0;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  
.flex-row img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

  .flex-row>a {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }

 .swiper {
  width: 100%;
  max-width: 1250px; 
  margin: 0 auto;
}
.swiper-wrapper {
  margin: 0 !important;
}




.swiper-slide {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch;    
  margin: 0 !important;
  padding: 0 !important;
}

.swiper .swiper-wrapper{
  justify-content: flex-start !important;
  gap: 0 !important;
}

.swiper-slide > *{
  width: 100%;
  max-width: 310px;      
  margin: 0 auto;
}

.swiper-arxeio .swiper-slide img {
  width: auto;
  max-width: 100%;
  height: auto; 
  max-height: 529px;
  object-fit: contain; 
  display: block;
}



/* Second carousel border (#5A1E00) */
.swiper-lifestyle .swiper-slide img {
  height: 500px;
  width: auto;
  object-fit: contain;
   display: block;
  border-left: 3px solid #5A1E00;
}
.swiper-brown .swiper-slide:first-child img {
  border-left: none;
}

.swiper-lifestyle .swiper-wrapper {
  height: auto !important;
}

.my-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #A98D79;
  cursor: pointer;
  z-index: 10; /* make sure they’re above slides */
}
.my-arrow2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #5A1E00;
  cursor: pointer;
  z-index: 10; /* make sure they’re above slides */
}

.my-arrow-prev {
  left: 0px;
}

.my-arrow2-next {
  right: 0px;
}

.my-arrow2-prev {
  left: 0px;
}

.my-arrow-next {
  right: 0px;
}

.swiper-button-disabled {
  display: none;
}
.swiper-button-disabled::after {
  background: none; /* removes gray circle */
  opacity: 0.5;     /* optional, keep faded look */
}

.cp-brand-size{
  padding: 10px;
}

.green-button-template{
  width:86.2%;
  margin: 0 auto;
  background-color: #F9F5F0;

}

.fpa-color{
 
  background-color: #F9F5F0;
    border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  width:86.2%;

}

.menu-button-space{
  padding:10px;
}

.note-fpa-text{
  padding: 5px;
}

.green-selection-button{
  width: 270px; 
  height: 48px;
   display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #cfd9cf;
  background-color: transparent;
  color: #000;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
   transition: 
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;



}

.green-selection-button:hover{

background-color: #5c9873;
  color: #fff;
  border-color: #5c9873;
 

}

.purple-selection-button{
  width: 270px; 
  height: 48px;
   display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #AF9DC4;
  background-color: transparent;
  color: #000;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
   transition: 
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;



}

.purple-selection-button:hover{

background-color: #AF9DC4;
  color: #fff;
  border-color: #AF9DC4;
 

}

.orange-selection-button{
  width: 270px; 
  height: 48px;
   display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #D49657;
  background-color: transparent;
  color: #000;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
   transition: 
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;



}

.orange-selection-button:hover{

background-color: #D49657;
  color: #fff;
  border-color: #D49657;
 

}




.flex-row-button{
   position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(220px + 315px); /* -25px για να κάθεται ωραία */
  z-index: 3;

  width: 100%;
  display: flex;
  justify-content: center;
}


.category-all-button{
  width: 300px;
  height: 50px;
  background-color: transparent;
  font-weight: bold;
  border: 1px solid #000;
  border-radius: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #000;
}

.carousel-box-green{
  width: 86.3%;
  height: 650px;
  margin: 0 auto;

  /* το φόντο της σελίδας */
  background: #F9F5F0;

  position: relative;
  overflow: visible; /* για να φαίνεται σωστά το fade */
}

.carousel-box-green::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 220px;              /* πόσο “χαμηλά” ξεκινάει το πράσινο */
  width: min(1450px, 100vw); /* panel max-width, αλλά responsive */
  height: 400px;           /* ύψος του πράσινου */
  border-radius: 16px;     /* προαιρετικό */

  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 5%,
    #d6e5d9 5%,
    #d6e5d9 95%,
    transparent 95%,
    transparent 100%
  );
    clip-path: inset(0 round 28px);

  z-index: 0;
  pointer-events: none;
}
.carousel-box-purple{
  width: 86.3%;
  height: 650px;
  margin: 0 auto;

  /* το φόντο της σελίδας */
  background: #F9F5F0;

  position: relative;
  overflow: visible; /* για να φαίνεται σωστά το fade */
}

.carousel-box-purple::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 220px;              /* πόσο “χαμηλά” ξεκινάει το πράσινο */
  width: min(1450px, 100vw); /* panel max-width, αλλά responsive */
  height: 400px;           /* ύψος του πράσινου */
  border-radius: 16px;     /* προαιρετικό */

  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 5%,
    #C7BBD5 5%,
    #C7BBD5 95%,
    transparent 95%,
    transparent 100%
  );
    clip-path: inset(0 round 28px);

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

.carousel-box-orange{
  width: 86.3%;
  height: 650px;
  margin: 0 auto;

  /* το φόντο της σελίδας */
  background: #F9F5F0;

  position: relative;
  overflow: visible; /* για να φαίνεται σωστά το fade */
}

.carousel-box-orange::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 220px;              /* πόσο “χαμηλά” ξεκινάει το πράσινο */
  width: min(1450px, 100vw); /* panel max-width, αλλά responsive */
  height: 400px;           /* ύψος του πράσινου */
  border-radius: 16px;     /* προαιρετικό */

  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 5%,
    #efddc9 5%,
    #efddc9 95%,
    transparent 95%,
    transparent 100%
  );
    clip-path: inset(0 round 28px);

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

.carousel-box-green .carousel-box-purple .carousel-box-orange .swiper{
  position: relative;
  z-index: 1;
}



.selection-category-title{
  font-size: 30px;
  font-weight: bold;
  padding: 40px;
}








/* Views */
.view {
  display: none;
  flex-direction: column; /* stack content vertically */
  align-items: center;
  margin-bottom: 30px;
}

.view.active {
  display: flex;
}





@media (max-width: 1600px) {
.carousel-box-green::before, .carousel-box-purple::before, .carousel-box-orange::before{
  width: min(1280px, 100vw); 
}
}
@media (max-width: 1400px) {
.carousel-box-green::before, .carousel-box-purple::before, .carousel-box-orange::before{
  width: min(1180px, 100vw); 
}
.green-selection-button, .purple-selection-button, .orange-selection-button{
  width: 230px; 
  height: 43px;
  font-size: 12px;
}
}
@media (max-width: 1280px) {
.carousel-box-green::before, .carousel-box-purple::before, .carousel-box-orange::before{
  width: min(1080px, 100vw); 
}
}

@media (max-width: 1180px) {
.carousel-box-green::before, .carousel-box-purple::before, .carousel-box-orange::before{
  width: min(980px, 100vw); 
}
.green-selection-button, .purple-selection-button, .orange-selection-button{
  width: 200px; 
  height: 40px;
  font-size: 10px;
}

 
}



 @media (max-width: 1070px) {
  .mobile-version {
    display: block;
  }

  .desktop-version{
    display: none;
  }

  .green-button-template, .carousel-box-green, .fpa-color, .carousel-box-purple, .carousel-box-orange{
    width: 100%;
  }

  .green-selection-button, .purple-selection-button, .orange-selection-button{
        width: 320px;
        height: 50px;
        font-size: 14px;
  }



  }