.ak-gallery{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:45%;
}

.ak-gallery-main{
  position:relative;
  overflow:hidden;
  border-radius:10px;

  /* defaults for zoom origin */
  --ak-zoom-x: 50%;
  --ak-zoom-y: 50%;
  --ak-zoom-scale: 2.6; /* ΑΥΤΟ ανεβοκατεβάζεις για “πολύ” zoom */
}

.ak-gallery-main-img{
  width:100%;
  height:600px;
  object-fit:contain;
  display:block;

  transform:scale(1);
  transform-origin: var(--ak-zoom-x) var(--ak-zoom-y);
  transition: transform .08s linear; /* γρήγορο follow */
  will-change: transform;
}

/* όταν κάνεις hover, κάνε μεγάλο zoom */
.ak-gallery-main.is-zooming .ak-gallery-main-img{
  transform: scale(var(--ak-zoom-scale));
}

/* προαιρετικό: στο zoom να “γεμίζει” καλύτερα για να μη βλέπεις κενά */
.ak-gallery-main.is-zooming .ak-gallery-main-img{
  object-fit: cover;
}

.ak-gallery-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ak-gallery-thumb{
  border:1px solid #ddd;
  background:#fff;
  padding:0;
  border-radius:8px;
  cursor:pointer;
  overflow:hidden;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ak-gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ak-gallery-thumb.is-active{
  border-color:#2271b1;
  box-shadow:0 0 0 2px rgba(34,113,177,.15);
}

/* καλύτερο UX */
.ak-gallery-main{ cursor: zoom-in; }

/* σε touch συσκευές μην κάνει “τρέλα” */
@media (pointer: coarse) {
  .ak-gallery-main{ cursor: default; }
  .ak-gallery-main.is-zooming .ak-gallery-main-img{
    transform: scale(1);
  }
}