/* ===== LIGHTBOX ===== */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.lightbox.show{ display:flex; }

.lightbox img{
  max-width: 95%;
  max-height: 95%;
  border-radius: 14px;
}

/* Only main images should zoom */
.card.has-thumbs img.main-img{
  cursor: zoom-in;
}

/* ===== THUMBNAILS ===== */
.card.has-thumbs .thumbs{
  display:flex;
  gap:8px;
  padding:10px 12px;
  justify-content:center;
  flex-wrap: wrap; /* THIS fixes the half-hidden thumbnails */
}

.card.has-thumbs .thumbs img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  border:2px solid transparent;
  opacity:0.95;
}

.card.has-thumbs .thumbs img:hover{
  border-color: var(--brand2);
  opacity: 1;
}
/* HARD LOCK gallery behavior */
.card.has-thumbs{
  display: flex;
  flex-direction: column;
}

.card.has-thumbs img.main-img{
  width: 100%;
  height: 240px;
  object-fit: contain;
  background: #f1f5f9;
}

.card.has-thumbs .thumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}