.size-box-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
    margin-top: 15px;
}

.size-box {
    border: 2px solid #bcbcbc;
    border-radius: 6px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: 0.25s;
}

.size-box:hover {
    border-color: #000;
}

.size-box.active {
    background: #e9eef2;
    border-color: #6c757d;
}

.size-text {
    font-weight: 600;
    font-size: 14px;
}

.price-text {
    font-size: 13px;
    margin-top: 4px;
}



.color-box-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.color-box {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
    background: #fff;
}

.color-box span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.color-box:hover {
    border-color: #000;
}

.color-box.active {
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}



/*product*/
.product-gallery-wrapper{
  display:flex;
  gap:15px;
  align-items:flex-start;
}

/* LEFT THUMBNAILS */
.thumbs-vertical{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.thumb-img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:10px;
  cursor:pointer;
  border:2px solid transparent;
}

.thumb-img.active{
  border:2px solid #000;
}

/* MAIN IMAGE */
.main-image-area{
  position:relative;
  background:#f5f5f5;
  border-radius:14px;
  padding:10px;
}

.main-image-area img{
  width:520px;
  max-width:100%;
  border-radius:12px;
}

/* NAV BUTTON */
.nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:none;
  width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
  cursor:pointer;
}

.nav-btn.left{ left:-20px; }
.nav-btn.right{ right:-20px; }

/*@media(max-width:768px){*/
/*  .product-gallery-wrapper{*/
/*    flex-direction:column;*/
/*  }*/
/*  .thumbs-vertical{*/
/*    flex-direction:row;*/
/*    overflow-x:auto;*/
/*  }*/
/*}*/

@media(max-width:768px){

  .product-gallery-wrapper{
    flex-direction:column;
  }

  /* MAIN IMAGE PEHLE */
  .main-image-area{
    order:1;
    width:100%;
  }

  /* THUMBNAILS NEECHHE */
  .thumbs-vertical{
    order:2;
    flex-direction:row;
    overflow-x:auto;
    margin-top:10px;
  }

  .thumb-img{
    width:65px;
    height:65px;
  }

}

.social-share{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.social-icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:14px;
    text-decoration:none;
    transition:0.3s;
}

.social-icon:hover{
    transform:translateY(-3px);
}

.fb{background:#1877f2;}
.insta{background:#e1306c;}
.tw{background:#1da1f2;}
.wa{background:#25d366;}
.pin{background:#bd081c;}