.desc{
    color: #676767
    ;
    font-size: 18px;
}

.size,.color{
    height: 40px;
    width: 40px;
    border-radius: 5px;
    cursor: pointer;
}
.size.active{
    background-color: black ;
    color: white;
}
.size{
   background-color: white;
    line-height: 40px;
    font-weight: bold;
}

.color {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
}

.color.active {
  border: 2px solid #fffdfd; /* يحدد اللون المختار */
  position: relative;
}
.color.active::before{
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #00000024;
}

.color.active::after {
  content: "✔"; /* أو بدلها أيقونة FontAwesome */
  position: absolute;
  color: white;
  font-size: 18px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn-increase,.btn-decrease{
 height: 40px;
    width: 40px;
    border-radius: 5px;
    cursor: pointer;
        background-color: black ;
    color: white;
      user-select: none;
    transition: transform 0.15s ease;
}
  .btn-increase:active,.btn-decrease:active {
    transform: scale(1.1);
  }
.quantity input{
    width: 50px;
}
/* for scale */
.main-image {
  position: relative;
  overflow: hidden;
  cursor: crosshair;
}

.main-image img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

/* الـ Zoom effect */
.main-image.zoomed img {
  transform: scale(3); /* تكبير الصورة */
  transform-origin: var(--x, 50%) var(--y, 50%);
}

.main-image {
aspect-ratio: .7/1;
}
.sub-images img{

}
.sub-images .box{
    aspect-ratio: .7/1;
    padding: 5px;
}
   input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
            .details-span{
   height: fit-content !important;

  }