/*           .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;}*/


/* ===== GALLERY WRAPPER ===== */
.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;
  flex-shrink: 0;
}

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

/* VIDEO THUMBNAIL */
.thumb-video {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  overflow: hidden;
  position: relative;
  background: #000;
  flex-shrink: 0;
}

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

.thumb-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

.thumb-video .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ===== MAIN IMAGE AREA ===== */
.main-image-area {
  position: relative;
  background: #f5f5f5;
  border-radius: 14px;
  overflow: hidden;
  width: 520px;
  max-width: 100%;
}

/* ===== MAIN MEDIA WRAPPER ===== */
#mainMediaWrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

#mainMediaWrapper img {
  width: 100%;
  height: 420px;
  object-fit: contain;
  border-radius: 12px;
  cursor: zoom-in;
  transition: transform 0.3s ease;
  display: block;
}

#mainMediaWrapper img:hover {
  transform: scale(1.08);
}

#mainMediaWrapper video {
  width: 100%;
  height: 420px;
  object-fit: contain;
  background: #000;
  border-radius: 12px;
  display: block;
}

/* ===== NAV BUTTONS ===== */
.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;
  font-size: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.nav-btn:hover {
  background: #f0f0f0;
}

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

/* ===== FULLSCREEN MODAL ===== */
#imageModal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

#imageModal.open {
  display: flex;
}

#imageModal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

.closeBtn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.modal-prev { left: 20px; }
.modal-next { right: 20px; }

/* ===== SIZE BOX ===== */
.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 ===== */
.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);
}

/* ===== SOCIAL SHARE ===== */
.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; }

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
  .product-gallery-wrapper {
    flex-direction: column;
  }

  .main-image-area {
    order: 1;
    width: 100%;
  }

  #mainMediaWrapper img,
  #mainMediaWrapper video {
    height: 280px;
  }

  #mainMediaWrapper {
    min-height: 280px;
  }

  .thumbs-vertical {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    margin-top: 10px;
    padding-bottom: 4px;
  }

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

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