.ii-image-carousel{
  --ii-main-h: auto;
  --ii-main-fit: cover;
  --ii-main-radius: 16px;

  --ii-thumb-w: 140px;
  --ii-thumb-h: 100px;
  --ii-thumb-gap: 16px;
  --ii-thumb-bw: 1px;
  --ii-thumb-bc: #e5e7eb;
  --ii-thumb-bw-active: 2px;
  --ii-thumb-bc-active: #f59e0b;
  --ii-thumb-radius: 12px;

  --ii-skeleton: #f3f4f6;

  /* Thumbnails nav button theming */
  --ii-thnav-bg: rgba(0,0,0,.15);
  --ii-thnav-bg-hover: rgba(0,0,0,.25);
  --ii-thnav-icon: #111827;
  --ii-thnav-icon-hover: #111827;
}

/* Main */
.ii-image-carousel .iiic-main{ position:relative; }
.ii-image-carousel .iiic-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow:hidden;
  scroll-behavior:smooth;
}
.ii-image-carousel .iiic-slide{ margin:0; position:relative; }
.ii-image-carousel .iiic-image{
  width:100%;
  height: var(--ii-main-h);
  object-fit: var(--ii-main-fit);
  display:block;
  border-radius: var(--ii-main-radius);
  background: var(--ii-skeleton);
}
.ii-image-carousel .iiic-caption{
  margin-top:8px;
  text-align:center;
  font-size:14px;
  color:#374151;
}

/* Arrows (main) */
.ii-image-carousel .iiic-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px;height:40px;border-radius:9999px;border:none;cursor:pointer;
 backdrop-filter:blur(2px);
 background: var(--ii-thnav-bg);
    color: var(--ii-thnav-icon);
}



.ii-image-carousel .iiic-nav:hover, 
.ii-image-carousel .iiic-nav:focus-visible {
    background: var(--ii-thnav-bg-hover);
    color: var(--ii-thnav-icon-hover);
}


.ii-image-carousel .iiic-prev{ left:10px; }
.ii-image-carousel .iiic-next{ right:10px; }
.ii-image-carousel .iiic-nav:disabled{ opacity:.4; cursor:default; }

/* Dots */
.ii-image-carousel .iiic-dots{
  display:flex; gap:8px; justify-content:center; margin-top:10px;
}
.ii-image-carousel .iiic-dots button{
  width:13px;height:13px;border-radius:50%; padding: 0;border:none;background: var(--ii-thumb-bc);cursor:pointer;
}
.ii-image-carousel .iiic-dots button.is-active{ background: var(--ii-thumb-bc-active); }

/* Thumbs wrapper */
.ii-image-carousel .iiic-thumbs{
  margin-top:18px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
}

/* Thumbs nav buttons */
.ii-image-carousel .iiic-thumbs-nav{
  width:36px;height:36px;border-radius:9999px;border:none;cursor:pointer;
  background: var(--ii-thnav-bg);
  color: var(--ii-thnav-icon);
  transition: background .2s, color .2s, opacity .2s;
  line-height: 0;
    text-indent: -2px;
}
.ii-image-carousel .iiic-thumbs-nav:hover,
.ii-image-carousel .iiic-thumbs-nav:focus-visible{
  background: var(--ii-thnav-bg-hover);
  color: var(--ii-thnav-icon-hover);
}
.ii-image-carousel .iiic-thumbs-nav:disabled{ opacity:.4; cursor:default; }

/* Thumbs viewport — native scroll + hidden scrollbar */
.ii-image-carousel .iiic-thumbs-viewport{
  overflow: auto;
  cursor: grab;
  touch-action: none;                 /* JS controls gesture */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none; -webkit-user-select: none;
  pointer-events: auto;
}
.ii-image-carousel .iiic-thumbs-viewport::-webkit-scrollbar{ display:none; }
.ii-image-carousel .iiic-thumbs-viewport.dragging{ cursor: grabbing; }



/* Thumbs track + item */
.ii-image-carousel .iiic-thumbs-track{
  display:flex; gap:var(--ii-thumb-gap); align-items:center;
  user-select:none; -webkit-user-drag:none; will-change:transform;
}
.ii-image-carousel .iiic-thumb{
  flex:0 0 auto; width:var(--ii-thumb-w); height:var(--ii-thumb-h);
  border:var(--ii-thumb-bw) solid var(--ii-thumb-bc);
  border-radius:var(--ii-thumb-radius);
  overflow:hidden; cursor:pointer;
  transition:border-color .2s, border-width .2s, transform .2s;
}
.ii-image-carousel .iiic-thumb img{
  width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
}
.ii-image-carousel .iiic-thumb.is-active{
  border-color:var(--ii-thumb-bc-active);
  border-width:var(--ii-thumb-bw-active);
  transform:translateZ(0);
}