/* =========================================================
   UNIVERSAL CAROUSEL LAYOUT — FINAL
   Targets: .sic2 , .sic , [data-sic]
   ========================================================= */

/* ---- RESET / SCOPE ---- */
.sic2, .sic, [data-sic],
.sic2 *, .sic *, [data-sic] * {
  box-sizing: border-box;
}

/* ---- MAIN WRAPPER (THIS CREATES THE INSET LOOK) ---- */
.sic2,
.sic,
[data-sic] {
  width: 100%;
  margin: 0 auto;

  /* This is what creates the left/right spacing like your image */
  padding-left: 28px;
  padding-right: 28px;

  background: transparent !important;
}

/* ---- VIEWPORT (BIG IMAGE AREA) ---- */
.sic2__viewport,
.sic__viewport,
[data-sic] .sic__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;

  border-radius: 0;
  margin: 0;
  padding: 0;

  background: transparent !important;
}

/* ---- TRACK + SLIDES ---- */
.sic2__track,
.sic__track,
[data-sic] .sic__track {
  display: flex;
  transition: transform 280ms ease;
  will-change: transform;
}

.sic2__slide,
.sic__slide,
[data-sic] .sic__slide {
  min-width: 100%;
}

/* ---- MAIN IMAGE ---- */
.sic2__slide img,
.sic__slide img,
[data-sic] .sic__slide img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;

  pointer-events: none; /* arrows always clickable */
}

/* ---- ARROWS ---- */
.sic2__btn,
.sic__btn,
[data-sic] .sic__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 44px;
  height: 44px;

  background: rgba(255,255,255,0.65);
  border: 0;
  border-radius: 4px;

  color: #111;
  cursor: pointer;

  display: grid;
  place-items: center;

  font-size: 22px;
  line-height: 1;

  padding: 0;
  z-index: 20;
}

/* No hover / no interaction styling */
.sic2__btn:hover,
.sic__btn:hover,
[data-sic] .sic__btn:hover,
.sic2__btn:active,
.sic__btn:active,
[data-sic] .sic__btn:active {
  background: rgba(255,255,255,0.65);
}

.sic2__btn:focus,
.sic__btn:focus,
[data-sic] .sic__btn:focus {
  outline: none;
}

/* Arrow positions */
.sic2__btn--prev,
.sic__btn--prev,
[data-sic] .sic__btn--prev {
  left: 18px;
}

.sic2__btn--next,
.sic__btn--next,
[data-sic] .sic__btn--next {
  right: 18px;
}

/* ---- THUMBNAILS ROW ---- */
.sic2__thumbs,
.sic__thumbs,
[data-sic] .sic__thumbs {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 18px;

  margin-top: 14px;
  padding-bottom: 14px;

  overflow-x: auto;
  overflow-y: hidden;

  background: transparent !important;
  height: auto;
}

/* Hide scrollbar (clean look like screenshot) */
.sic2__thumbs,
.sic__thumbs,
[data-sic] .sic__thumbs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sic2__thumbs::-webkit-scrollbar,
.sic__thumbs::-webkit-scrollbar,
[data-sic] .sic__thumbs::-webkit-scrollbar {
  display: none;
}

/* ---- THUMBNAIL ITEM ---- */
.sic2__thumb,
.sic__thumb,
[data-sic] .sic__thumb {
  width: 76px;
  height: 56px;

  border: 0;
  background: transparent;

  padding: 0;
  margin: 0;

  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}

.sic2__thumb img,
.sic__thumb img,
[data-sic] .sic__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- ACTIVE UNDERLINE ---- */
.sic2__thumb.is-active::after,
.sic__thumb.is-active::after,
[data-sic] .sic__thumb.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;

  height: 2px;
  background: #111;
}