.section-content-features-pc, .section-content-features-mb, .versions-container-pc, .versions-container-mb {
      display: none; 
     
    }

 /* @media (min-width: 768px) { */
  @media (min-width: 1280px) {
.section-content-features-pc, .versions-container-pc {
    display: block;

}
 }


 /* @media (max-width: 767px) { */
  @media (max-width: 1279px) {
.section-content-features-mb, .versions-container-mb {
    display: block;

}
 }

 .container-product-buttons-header-mb {

    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;

}

.product-title-text-mb {

    font-family: Fahkwang;
    font-weight: 600;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -1px;
    padding-bottom: 15px;
    padding-left: 15px;
}




.container-column-mb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.container-column-mb > * {
  flex: 1;
  min-width: 0;
  margin-bottom: 15px; /* Add space between items */
}

.container-column-mb > *:last-child {
  margin-bottom: 0; /* Remove margin from last item */
}



.container-versions-mb {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 15px;
    padding-left: 15px;
}


.white-container-versions-mb {
    display: grid;
    gap: 5px;
    background-color: white;
    width: 255px;
    border-radius: 10px;
    padding: 10px;
}

.container-similars-mb {
   display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 15px;
    padding-left: 15px;
}


  @media (min-width: 1280px) {
 /* @media (min-width: 768px) { */
.container-product-image {

    /* display: flex;
    justify-content: center; 
    align-items: center;
    margin: 0;
    padding-top: 100px;
    padding-bottom: 30px;
    padding-left: 5px;
    padding-right: 5px; */
  
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 300px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  /* padding-top: 15px;
  padding-bottom: 30px;
  padding-left: 5px;
  padding-right: 5px; */
 

}

}


@media (min-width: 1280px) {
/* @media (min-width: 768px) { */
.product-main-image {

  transform: scale(0.3); 
  transform-origin: center;
  width: auto;
  height: auto;
  display: block;
  filter: contrast(0.9) brightness(1.1); /* Adjusts image to reduce white prominence */
  mix-blend-mode: multiply; /* Blends white areas with the background */
  background: transparent;


  

  /* max-width: 100%;
  max-height: 290px;

  filter: contrast(0.9) brightness(1.1);
  mix-blend-mode: multiply; 
  background: transparent; */

}


.fallback-main-image {

  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scale(0.5);
  padding-top: 20px;

}



}




.container-product-image-mb {

    display: flex;
    justify-content: center; 
    align-items: center;
    max-height: 150px; 
    margin: 0;
    padding-top: 50px;
    padding-bottom: 30px;
    padding-left: 5px;
    padding-right: 5px;
  
}



 /* @media (min-width: 768px) { */
   @media (min-width: 1280px) {
.section-content-features-pc, .versions-container-pc {
    display: block;

}
 }





 /* @media (max-width: 767px) { */
   @media (max-width: 1279px) {
.product-main-image {

  transform: scale(0.11); 
  transform-origin: center;
  width: auto;
  height: auto;
  display: block;
  filter: contrast(0.9) brightness(1.1); /* Adjusts image to reduce white prominence */
  mix-blend-mode: multiply; /* Blends white areas with the background */
  background: transparent;
 

}

.fallback-main-image {

  display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: scale(0.5);

}


}





.container-product-header {

    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    padding-left: 30px;
    padding-right: 30px;

}


.product-title-text {

    font-family: Fahkwang;
    font-weight: 600;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -1px;
    padding-bottom: 15px;
}

.container-buttons {

    display: flex;
    flex-direction: row;
    gap: 5px;


}

.button-capsule {

    display: flex;
    background-color: white;
    border-radius: 20px;
    margin: 0px;
    height: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    cursor: pointer;
	border: none;


}

.text-capsule {

  font-family: Inter;
  font-weight: 400;
  font-size: 15px;
  line-height: 16px;
  letter-spacing: 0px;
  color: black;

}


.container-features {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    flex-wrap: wrap; 
    gap: 20px; /* Space between items */
    justify-content: center; /* Center the grid horizontally */
    margin: 0 auto; 
    align-items: start; 
    padding-left: 30px;
    padding-right: 30px;
    
}


.container-features-mb {

    display: flex;
    align-items: center;
    justify-content: center; /* Center the grid horizontally */
    margin: 0px; 
    
}



.white-container-features {

    display: flex;
    flex-direction: column;
    background-color: white;
    max-width: 450px;
    border-radius: 10px;

 
}

.container-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.container-title-text {
    display: flex;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    padding-right: 5px;
    align-items: center;
    gap: 5px;
}

.title-text-features {
    font-family: Fahkwang;
    font-weight: 600;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0px;

}


.container-features-text {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;

}

.features-name-container {
        display: flex;
    flex-direction: row;
}

.features-text-name {
    font-family: Inter;
    font-weight: 300;
   font-size: 13px;
   line-height: 20px;
   letter-spacing: 0px;
  
}

.features-questionMark {
font-family: Inter;
font-weight: 400;
font-style: Regular;
font-size: 10px;
line-height: 20px;
letter-spacing: 0px;

color: rgba(128, 128, 128, 1);
padding-right: 10px;
  cursor: pointer;
}



.features-text {
    font-family: Inter;
    font-weight: 300;
   font-size: 15px;
   line-height: 20px;
   letter-spacing: 0px;
   text-align: right;
}


.subtitle {
    font-family: Fahkwang;
    font-weight: 600;
    font-size: 25px;
    line-height: 100%;
    letter-spacing: -1px;    
    padding-top: 35px;
    padding-bottom: 10px;
    padding-left: 30px;
}

.subtitle-mb {
    font-family: Fahkwang;
    font-weight: 600;
    font-size: 25px;
    line-height: 100%;
    letter-spacing: -1px;    
    padding-top: 35px;
    padding-bottom: 10px;
    padding-left: 15px;
}



.container-versions {
    /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     overflow-x: auto;
    gap: 15px;
    padding-left: 30px; */

      display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 15px;
    padding-left: 30px;
}


.white-container-versions {
    /* display: grid;
    gap: 5px;
    background-color: white;
    max-width: 255px;
    border-radius: 10px;
    padding: 10px; */
    display: grid;
    gap: 5px;
    background-color: white;
    width: 255px;
    border-radius: 10px;
    padding: 10px;
}


.text-similar-title-box {
      font-family: Fahkwang, Arial;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0px;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  line-height: 1; /* Consistent line height */
  height: calc(15px * 1 * 2); /* Limit to 2 lines */
  color: rgba(0, 0, 0, 1);
  flex-shrink: 0;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
        /* color: black;
    font-family: Fahkwang, Arial;
font-weight: 600;
font-size: 15px;
letter-spacing: 0px;
text-align: center;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; 
width: 100%;
padding-bottom: 5px;
color: rgba(0, 0, 0, 1);
  flex-shrink: 0; 
  margin-top: auto;
  margin-top: -20px;
  box-sizing: border-box; 
  padding-left: 5px;
  padding-right: 5px; */



}



.text-title-box {
    max-width: 100%;
    font-family: Fahkwang;
    color: black;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0px;
    white-space: nowrap;
    text-overflow: ellipsis; 
    overflow: hidden; 
    text-overflow: ellipsis;
    text-align: center;

 

}

.secondary-text-box{ 
font-family: Inter;
font-weight: 400;
font-size: 12px;
letter-spacing: 0px;
text-align: center;
color: rgba(129, 129, 129, 1);
padding-top: 10px; 
}

/* .white-container-similar {
    display: grid;
    gap: 5px;
    width: 100%;
    justify-content: center;
    background-color: white;
    max-width: 255px;
    border-radius: 10px;
    padding: 10px;
   

} */

.white-container-similar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  width: 255px;
  height: 165px;
  padding-bottom: 10px;
    /* display: grid; */
    /* display: flex;
     flex-direction: column;
    gap: 5px;
    background-color: white;
    width: 255px;
    height: 150px;
    border-radius: 10px;
    padding: 10px;
    place-items: center; */
      /* display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  width: 255px;
  height: 150px;
  padding-top: 20px;
  padding-bottom: 10px; */
}

.white-container-similar-mb {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  width: 255px;
  height: 165px;
  padding-bottom: 10px;
    /* display: grid;
    gap: 5px;
    background-color: white;
    width: 255px;
     height: 150px;
    border-radius: 10px;
    padding: 10px;
     place-items: center; */
           /* display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  width: 255px;
  height: 150px;
  padding-top: 20px;
  padding-bottom: 10px; */
}


.image-similar-product {
      transform: scale(0.087); 
  transform-origin: center;
  width: auto;
  height: auto;
  display: block;
  filter: contrast(0.9) brightness(1.1); /* Adjusts image to reduce white prominence */
  mix-blend-mode: multiply; /* Blends white areas with the background */
  background: transparent;
    /* transform: scale(0.8);
    filter: contrast(0.9) brightness(1.1); 
    mix-blend-mode: multiply;
    background: transparent;
    max-width: 100%;
    max-height: 100%;
    display: block; */
}

.image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: -30px;
}

.fallback-similar-image {

    transform: scale(0.5);
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;

}


.container-links {
display: flex;
gap: 15px; 
} 

.text-links {
    font-family: Inter;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0px;
    text-decoration: underline;
    color: rgba(128, 128, 128, 1);
    border: none;
    background-color: transparent;
    cursor: pointer;
    white-space: nowrap; 

}


a {
  text-decoration: none; /* no underline */
}





       /* FILTER popup */
        /* .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-height: 80vh;
            overflow-y: auto; 
            background-color: white;
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            border-radius: 10px;
            width: 360px;
        }
      
        .overlay-popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); 
            z-index: 999; 
        }

        .overlay-active {
        overflow: hidden; 
        } */

             .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            max-width: 400px;
            text-align: center;
        }

        .popup.show {
            display: block;
        }

        .popup-content {
            margin-bottom: 15px;
        }

        .popup-close {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            border-radius: 3px;
        }

        .popup-close:hover {
            background-color: #0056b3;
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .overlay.show {
            display: block;
        }



        .title-popup {
            font-family: Fahkwang;
            font-weight: 600;
            font-size: 15px;
            line-height: 100%;
            letter-spacing: -1px;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
            flex-grow: 1; 
        }

        .text-popup { 

                padding: 8px;
            
            font-family: Inter;
            font-weight: 400;
            font-size: 13px;
            line-height: 100%;
            letter-spacing: 0px;
        }

          .filter-close-button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            width: 15px;
            height: 15px;
            padding: 15px;

        }

             .container-header-popup {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        
        }