/* =========================================================
   WRAPPER
========================================================= */
.swc-wrap{
  width: 100%;

  --swc-gap: 18px;
  --swc-height: 520px;

  --swc-pad-top: 0px;
  --swc-pad-bottom: 0px;

  --swc-bg-color: #ffffff;
  --swc-bg-image: none;
  --swc-bg-size: cover;

  /* arrow colors (per carousel via inline style) */
  --swc-arrow-color: rgba(0,0,0,.8);
  --swc-arrow-hover: rgba(0,0,0,.38);

  padding-top: var(--swc-pad-top);
  padding-bottom: var(--swc-pad-bottom);

  background-color: var(--swc-bg-color);
  background-image: var(--swc-bg-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--swc-bg-size, cover);

  position: relative;
  overflow: hidden;
}

/* background repeat option */
.swc-wrap[style*="--swc-bg-size:repeat"]{
  background-repeat: repeat;
  background-size: auto;
}

/* =========================================================
   FULL WIDTH ROW
========================================================= */
.swc-wrap.swc-fullwidth{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* =========================================================
   ARROWS (BIG – CLEAN – NO BORDERS) + COLOR SETTINGS
========================================================= */
.swc-arrows{
  position: absolute;
  left: 50%;
  top: calc(var(--swc-pad-top) * 0.5);
  transform: translateX(-50%);
  display: flex;
  gap: 110px;
  align-items: center;
  z-index: 10;
  pointer-events: auto;
}

.swc-wrap[style*="--swc-pad-top:0px"] .swc-arrows{
  top: 20px;
}

/* button reset */
.swc-arrow{
  width: 140px;
  height: 44px;

  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  padding: 0;
  cursor: pointer;
  position: relative;

  -webkit-tap-highlight-color: transparent;

  /* map to per-carousel vars */
  --swc-arrow-color-now: var(--swc-arrow-color);
  --swc-arrow-color-hover: var(--swc-arrow-hover);
}

.swc-arrow:focus,
.swc-arrow:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* smooth transitions */
.swc-arrow::before,
.swc-arrow::after{
  transition:
    background-color .2s ease,
    border-color .2s ease,
    opacity .2s ease,
    transform .2s ease;
}

/* line */
.swc-arrow::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 2px;
  background: var(--swc-arrow-color-now);
  transform: translateY(-50%);
}

/* arrow head */
.swc-arrow::after{
  content:"";
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* left */
.swc-arrow-left::after{
  left: 0;
  border-right: 14px solid var(--swc-arrow-color-now);
}

/* right */
.swc-arrow-right::after{
  right: 0;
  border-left: 14px solid var(--swc-arrow-color-now);
}

/* hover (desktop only) */
@media (hover:hover){
  .swc-arrow:hover{
    --swc-arrow-color-now: var(--swc-arrow-color-hover);
  }
}

/* active press */
.swc-arrow:active{
  transform: translateY(1px);
  opacity: .9;
}

/* =========================================================
   STRIP MODE VIEWPORT
========================================================= */
.swc-mode-strip .swc-viewport{
  position: relative;
  width: 100%;
  height: var(--swc-height);

  overflow: hidden;

  cursor: grab;
  touch-action: pan-y;
}

.swc-mode-strip .swc-viewport.swc-grabbing,
.swc-mode-strip .swc-viewport.swc-grabbing *{
  cursor: grabbing !important;
  user-select: none;
}

/* =========================================================
   TRACK + LOOP SEQUENCES
========================================================= */
.swc-mode-strip .swc-track{
  display: flex;
  height: 100%;
  will-change: transform;
  gap: var(--swc-gap);
}

.swc-mode-strip .swc-seq,
.swc-mode-strip .swc-seq-clone{
  display: flex;
  height: 100%;
  gap: var(--swc-gap);
}

/* =========================================================
   VERTICAL ALIGN
========================================================= */
.swc-mode-strip.swc-valign-bottom .swc-seq,
.swc-mode-strip.swc-valign-bottom .swc-seq-clone{
  align-items: flex-end;
}

.swc-mode-strip.swc-valign-center .swc-seq,
.swc-mode-strip.swc-valign-center .swc-seq-clone{
  align-items: center;
}

/* =========================================================
   ITEMS
========================================================= */
.swc-mode-strip .swc-item{
  flex: 0 0 auto;
  width: var(--swc-w, 320px);
}

.swc-mode-strip .swc-item img{
  width: 100%;
  height: var(--swc-item-h, 320px);
  display: block;

  object-fit: var(--swc-fit, cover);

  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* =========================================================
   PER IMAGE BOTTOM OFFSET
========================================================= */
.swc-mode-strip.swc-valign-bottom .swc-item{
  transform: translate3d(0, calc(-1 * var(--swc-bo, 0px)), 0);
}

.swc-mode-strip.swc-valign-center .swc-item{
  transform: none;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 900px){
  .swc-arrows{
    gap: 70px;
  }

  .swc-arrow{
    width: 120px;
    height: 48px;
  }

  .swc-arrow::before{
    left: 14px;
    right: 14px;
  }

  .swc-mode-strip .swc-viewport{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: auto;
  }

  .swc-mode-strip .swc-viewport::-webkit-scrollbar{
    height: 8px;
  }
}