/* WC Kavak Product Gallery - Track carousel + mobile drag */
.wcpg, .wcpg * { box-sizing: border-box; }
.wcpg { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: var(--wcpg-gap, 12px); overflow-x: hidden; }

.wcpg__stage { position: relative; width: 100%; aspect-ratio: var(--wcpg-aspect, 16 / 9); background: var(--wcpg-stage-bg, #f3f4f6);
  border-radius: var(--wcpg-main-radius, 14px); overflow: hidden; outline: none; touch-action: pan-y; }

.wcpg__viewport { width: 100%; height: 100%; overflow: hidden; }

.wcpg__track { height: 100%; display: flex; transform: translate3d(0,0,0); will-change: transform;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1); }
.wcpg__track.is-instant, .wcpg__track.is-dragging { transition: none !important; }

.wcpg__slide { flex: 0 0 100%; height: 100%; }
.wcpg__img { width: 100%; height: 100%; display: block; object-fit: var(--wcpg-fit, cover); }

.wcpg__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: var(--wcpg-arrow-size, 44px); height: var(--wcpg-arrow-size, 44px);
  background: var(--wcpg-arrow-bg, #fff); color: var(--wcpg-arrow-color, #111827); border: 0; border-radius: var(--wcpg-arrow-radius, 14px);
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; box-shadow: 0 8px 18px rgba(0,0,0,.12); padding: 0; }
.wcpg__arrow svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.wcpg__arrow--prev { left: 12px; } .wcpg__arrow--next { right: 12px; }

.wcpg__counter { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 12px; line-height: 1; padding: 7px 10px; border-radius: 999px; user-select: none; }

/* Thumbs */
.wcpg__thumbs { width: 100%; display: flex; align-items: center; gap: var(--wcpg-thumb-gap, 10px); overflow-x: auto; overflow-y: hidden; padding: 2px 0 0;
  scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.wcpg__thumbs::-webkit-scrollbar { height: 0; display: none; }

.wcpg__thumb { flex: 0 0 auto; width: var(--wcpg-thumb-w, 92px); height: var(--wcpg-thumb-h, 62px); border-radius: var(--wcpg-thumb-radius, 12px);
  border: 2px solid var(--wcpg-thumb-border, #e5e7eb); background: #fff; padding: 0; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wcpg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcpg__thumb.is-active { border-color: var(--wcpg-accent, #1e73ff); box-shadow: 0 0 0 1px rgba(30,115,255,0.15); }

/* MOBILE */
@media (max-width: 768px) {
  .wcpg__arrow { display: none !important; }
  .wcpg { overflow-x: visible; }
  .wcpg__stage { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    border-radius: 0 !important; background: transparent !important; }
  .wcpg__counter { top: 10px; right: 10px; }
}