:root {
    --swiper-height-sxs: 205px;
    --swiper-height-xs: 221px;
    --swiper-height-xss: 232px;
    --swiper-height-xsss: 242px;
    --swiper-height-sm: 253px;
    --swiper-height-smw: 262px;
    --swiper-height-sms: 269px;
    --swiper-height-smss: 284px;
    --swiper-height-smsss: 289px;
    --swiper-height-small: 351px;
    --swiper-height-medium: 450px;
    --swiper-height-old: 312px;
    --swiper-height-large: 435px;
    --swiper-height-xxl: 451px;
    --swiper-height-2xxl: 600px;
}

@media (max-width: 576px) {
   .quantity
   {
    display:flex;
    justify-content: center;
   }
   .right-detail-section
   {
    margin-left:0;
    text-align: center;
   }
   .checkbox-wrapper
   {
    display: flex;
    justify-content: center;
   }
   .right-detail-section h1
   {
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .right-detail-section h1 .size-chart {
    display: none; /* Hide span on smaller screens */
    }

    .size-chart-2 {
        display: inline; /* Display on small screens */

      }
      .social-list
      {
        margin-bottom:15px;
      }
}
@media (max-width: 345px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-xs);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
}

@media (min-width: 346px) and (max-width: 361px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-xss);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
  
}

@media (min-width: 361px) and (max-width: 376px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-xsss);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
    
}

@media (min-width: 376px) and (max-width: 391px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-sm);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
   
}

@media (min-width: 391px) and (max-width: 406px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-smw);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
 
}

@media (min-width: 406px) and (max-width: 416px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-sms);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
  
}


@media (min-width: 416px) and (max-width: 431px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-smss);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }

}
@media (min-width: 431px) and (max-width: 767px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-sms);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
  
}

@media (min-width: 767px) and (max-width: 920px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-medium);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
  

}
@media (min-width: 920px) and (max-width: 1025px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-sxs);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
  
}

@media (min-width: 1025px) and (max-width: 1281px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-xss);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
   
}
@media (min-width: 1281px) and (max-width: 1440px) {
    .swiper-wrapper {
        min-height: var(--swiper-height-smsss);
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
   
}

@media (min-width: 1441px) and (max-width: 2040px) {
    /* .swiper-wrapper {
        min-height: var(--swiper-height-medium);
    }
    */
    .productslide {
        height: var(--swiper-height-large); 
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .productslide img {
        max-height: var(--swiper-height-xxl); 
        width: auto;
        object-fit: contain;
    }
    
    .color-badge {
        user-select: none; /* Prevent text selection */
        cursor: pointer; /* Change cursor to pointer */
    }

    .swiper-slide a {
        user-select: none; /* Prevent text selection */
        text-decoration: none; /* Remove underline from link */
    }
    .showcase-content {
        padding: 4px 10px 0;
    }
   
}