.xc-wrap{position:relative;width:100%}
.xc-viewport{position:relative;overflow:hidden;padding:32px 0}
.xc-belt{position:relative;width:100%}

.xc-card{
  position:absolute;
  left:50%;top:50%;
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  cursor:pointer;
  overflow:hidden;
  /* transform set by JS: translateX(Xpx) translateY(-50%) */
}
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
}
.xc-thumb{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  display:block;
}
.xc-thumb img{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  pointer-events:none;
  user-select:none;
}
.xc-dim{
  position:absolute;inset:0;
  pointer-events:none;
  will-change:opacity;
  transition:opacity 0.5s;
}
.xc-cap{
  text-align:center;margin-top:10px;
  font-size:13px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}

.xc-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,0.45);border:none;color:#fff;
  font-size:38px;width:48px;height:48px;border-radius:50%;
  cursor:pointer;z-index:20;
  display:flex;align-items:center;justify-content:center;
  line-height:1;padding:0;transition:background 0.25s;
}
.xc-btn:hover{background:rgba(0,0,0,0.75)}
.xc-prev{left:12px}.xc-next{right:12px}

.xc-dots{display:flex;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.xc-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.25);cursor:pointer;transition:background 0.35s,transform 0.35s}
.xc-dot.active{background:#39ff14;transform:scale(1.35)}

/* LIGHTBOX */
.xc-lb{display:none;position:fixed;inset:0;z-index:999999;align-items:center;justify-content:center}
.xc-lb.open{display:flex}
.xc-lb-bg{position:absolute;inset:0;background:rgba(0,0,0,0.93);cursor:pointer}
.xc-lb-body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  align-items:center;gap:12px;max-width:92vw;
  animation:lbin 0.3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes lbin{from{opacity:0;transform:scale(0.93)}to{opacity:1;transform:scale(1)}}
.xc-lb-body img{max-width:90vw;max-height:78vh;object-fit:contain;border-radius:6px;display:block}
.xc-lb-cap{color:#ccc;font-size:14px;text-align:center}
.xc-lb-cnt{color:rgba(255,255,255,0.4);font-size:12px}
.xc-lb-x{
  position:fixed;top:16px;right:20px;
  background:none;border:none;color:#fff;
  font-size:44px;cursor:pointer;z-index:2;
  line-height:1;opacity:0.75;padding:0;
}
.xc-lb-x:hover{opacity:1}

/* Desktop: side arrows */
.xc-lb-p,.xc-lb-n{
  position:fixed;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,0.1);border:none;color:#fff;
  font-size:50px;width:54px;height:80px;
  cursor:pointer;z-index:2;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  padding:0;transition:background 0.2s;
}
.xc-lb-p:hover,.xc-lb-n:hover{background:rgba(255,255,255,0.22)}
.xc-lb-p{left:12px}.xc-lb-n{right:12px}

/* Mobile: NO lightbox arrows */
@media(max-width:768px){
  .xc-lb-p,.xc-lb-n{display:none}
  .xc-lb-x{top:10px;right:14px;font-size:36px}
  .xc-btn{width:38px;height:38px;font-size:28px}
  .xc-prev{left:6px}.xc-next{right:6px}
}