/* Container for the images */















 /* Custom radio appearance (just for visual) */
 .custom-radio {
     display: block;
     background-color: transparent;
     border-radius: 5px;
     color: inherit;
     font-size: 14px;
     padding: 5px 3rem;
     font:bold;
     transition: all 0.3s ease-in-out;
     
 }

 /* Active state for text when selected */
 .variant_name input[type="radio"]:checked + .custom-radio {
     background-color: var(--brand-bg-color);
     color: var(--background-color);

 }

 /* Disabled state */
 .variant_name input[type="radio"]:disabled + .custom-radio {
     background-color: #f0f0f0;
     border-color: #ddd;
     cursor: not-allowed;
 }


 .variant_set{
     padding:0rem 0rem 1rem 0rem;
     display:inline-block;
}
/* .variant_name.selected{
     background-color:white;
     cursor:default;
     font-weight: normal;

} */


.variant_name.selected:hover{
     background-color:white;

}

.variant_name{
     text-transform: capitalize;
     display: inline-block;
     border: 0.5px solid grey;
     user-select: none;

     cursor: pointer;
     border-radius: 0.3rem;
     font-weight: bold;

}

.variant_name:hover{
     background-color:#f9f9f9;
     border: 0.5px solid black;
}


    /* Hide the default radio button completely */
    input[type="radio"] {
     display: none;
 }



 /* Style for the "button-like" variant selection */
 .variant_name {
     display: inline-block;
     margin-right: 15px;
     cursor: pointer;
     font-size: 16px;
     border-radius: 5px;
    
     transition: all 0.3s ease-in-out;
 }


 /* Change background color on hover */
 .variant_name:hover {
     background-color: #eaeaea;
 }





















.product_top{
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
}
.product-left{
  flex-grow: 1;
  width:50%;
  flex-basis: min-content;
}


.product-right .content_cat{
     padding:1rem 2rem;
}
.main-product-image {
     max-width: 100%;
     width:100%;
     height:25rem;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     transition: opacity 0.3s ease;
}

.product-images {
     max-width: 100%;
     
     margin-bottom: 2rem;
     position: sticky;
     top: 2rem;

     display: flex;
     flex-direction: column;
     align-items: center;
}
   .product-images .large {

     object-fit: contain;
     background-color: #f9f9f9; 
     /* height:60%; */
}
.main-image-viewer {
     position: relative;
     width: 100%;
     max-width: 500px;
     min-width: 100%;
}
   
 
   
.nav-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     border: none;
     font-size: 24px;
     padding: 8px 12px;
     cursor: pointer;
     z-index: 2;
     box-shadow: 0 2px 8px rgba(0,0,0,0.2);
     border-radius: 2rem;
}
   
.nav-arrow.left {
     left: -10px;
}
   
.nav-arrow.right {
     right: -10px;
}
   
.thumbnail-gallery {
     display: flex;
     gap: 10px;
     margin-top: 1rem;
     flex-wrap: wrap;
     justify-content: start;
     width:100%;
}
   
.thumbnail {
     width: 70px;
     height: 70px;
     object-fit: cover;
     border-radius: 4px;
     cursor: pointer;
     border: 2px solid transparent;
     transition: transform 0.2s, border 0.2s;
}
   
.thumbnail:hover,
.thumbnail.active {
     transform: scale(1.1);
     border-color: #007BFF;
}
.thumbnail.active {
     border: 2px solid #007BFF;
     opacity: 1;
}
   
.thumbnail {
     opacity: 0.7;
     cursor: pointer;
     transition: 0.3s;
}
   
.thumbnail:hover {
    

     opacity: 1;
}