.yw-gallery__empty{padding:16px;background:#111;color:#fff;border-radius:8px}

/* Full width background without changing page width */
.yw-gallery__backdrop{position:relative;padding:24px 0;background:transparent}
.yw-gallery__backdrop::before{
  content:"";
  position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100vw;
  background:var(--yw-bg, transparent);
  pointer-events:none;
  z-index:0;
}

.yw-gallery__stage{
  position:relative;
  width:min(100%, var(--yw-stage-width, 1140px));
  margin:0 auto;
  z-index:1;
  overflow:visible; /* allow side peeks */
}

.yw-gallery__viewport{
  position:relative;
  overflow:visible; /* keep page width stable */
  touch-action:pan-y;
}

.yw-gallery__track{
  display:flex;
  gap:var(--yw-space, 24px);
  will-change:transform;
}

.yw-gallery__slide{
  flex:0 0 auto;
  width:calc(var(--yw-stage-width, 1140px) * (var(--yw-slide-width, 100) / 100));
  max-width:100%;
  transition:opacity 280ms ease, transform 280ms ease;
  opacity:var(--yw-side-opacity, 0.6);
  transform:scale(var(--yw-side-scale, 1));
}

.yw-gallery__slide.is-active{
  opacity:1;
  transform:scale(var(--yw-active-scale, 1));
}

/* Bez widocznego przeskoku przy zapetleniu (reset na klonach) */
.yw-gallery.is-resetting .yw-gallery__slide{
  transition:none !important;
}

.yw-gallery__imgwrap{border-radius:var(--yw-radius, 8px);overflow:hidden;background:transparent}
.yw-gallery__imgwrap img{display:block;width:100%;height:auto}

/* Nav overlay like first version */
.yw-gallery__nav{position:absolute;inset:0;pointer-events:none;z-index:4}
.yw-gallery__btn{
  all: unset;
  box-sizing: border-box;
  pointer-events:auto;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:var(--yw-nav-size, 46px);
  height:var(--yw-nav-size, 46px);
  border-radius:var(--yw-nav-radius, 999px);
  background:var(--yw-nav-bg, rgba(0,0,0,0.55)) !important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.yw-gallery__prev{left:12px}
.yw-gallery__next{right:12px}

.yw-gallery__btn::before{
  content:"";
  position:absolute;inset:0;margin:auto;
  width:10px;height:10px;
  border-top:2px solid var(--yw-nav-color, #fff) !important;
  border-right:2px solid var(--yw-nav-color, #fff) !important;
  transform:rotate(45deg);
}
.yw-gallery__prev::before{transform:rotate(-135deg)}

/* Safety: never create horizontal page scroll */
.yw-gallery__backdrop{overflow-x:clip;}


/* === image contain fix (scoped to this widget only) === */
.yw-gallery .yw-gallery__slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.yw-gallery .yw-gallery__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}


/* === uniform slide height + no-crop fit (contain) === */
.yw-gallery__imgwrap{
  height: var(--yw-fixed-height, auto);
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-gallery__imgwrap img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* === slide background cover mode (div as slide, image as background) === */
.yw-gallery__imgwrap{
  height: var(--yw-fixed-height, auto);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
}

/* Manual height: allow choosing cover/contain via --yw-img-fit */
.yw-gallery .yw-gallery__imgwrap{
  background-size: var(--yw-img-fit, cover);
}

/* keep <img> only as a loader/SEO element, visually hidden */
.yw-gallery__imgwrap img{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}




/* === Custom nav (nav2) - isolated styles (should not be overridden by Elementor) === */
.yw-gallery__nav2{
  position:absolute;
  z-index:6;
  display:flex;
  gap:var(--yw-nav2-gap, 10px);
  pointer-events:auto;
}

.yw-gallery__nav2.yw-pos-br{right:var(--yw-nav2-ox, 18px);bottom:var(--yw-nav2-oy, 18px);}
.yw-gallery__nav2.yw-pos-bl{left:var(--yw-nav2-ox, 18px);bottom:var(--yw-nav2-oy, 18px);}
.yw-gallery__nav2.yw-pos-tr{right:var(--yw-nav2-ox, 18px);top:var(--yw-nav2-oy, 18px);}
.yw-gallery__nav2.yw-pos-tl{left:var(--yw-nav2-ox, 18px);top:var(--yw-nav2-oy, 18px);}
.yw-gallery__nav2.yw-pos-bc{left:50%;bottom:var(--yw-nav2-oy, 18px);transform:translateX(-50%);}

.yw-gallery__nav2 .yw-nav2__btn{
  all: unset;
  box-sizing: border-box;
  width:var(--yw-nav2-size, 44px);
  height:var(--yw-nav2-size, 44px);
  border-radius:var(--yw-nav2-radius, 999px);
  background:var(--yw-nav2-bg, rgba(0,0,0,0.55)) !important;
  color:var(--yw-nav2-color, #fff) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
  user-select:none;
  transition: transform 160ms linear, background-color 160ms linear, color 160ms linear, opacity 160ms linear;
}

.yw-gallery__nav2 .yw-nav2__btn:hover{
  background:var(--yw-nav2-bg-hover, rgba(0,0,0,0.75)) !important;
  color:var(--yw-nav2-color-hover, #fff) !important;
  transform: scale(var(--yw-nav2-hscale, 1.03));
}

.yw-gallery__nav2 .yw-nav2__btn:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

.yw-gallery__nav2 .yw-nav2__icon,
.yw-gallery__nav2 .yw-nav2__icon *{
  box-sizing:border-box;
}

.yw-gallery__nav2 .yw-nav2__icon svg{
  width:var(--yw-nav2-icon, 18px);
  height:var(--yw-nav2-icon, 18px);
  display:block;
  fill: currentColor;
}

.yw-gallery__nav2 .yw-nav2__icon i,
.yw-gallery__nav2 .yw-nav2__icon span{
  font-size:var(--yw-nav2-icon, 18px) !important;
  line-height:1 !important;
}




/* === nav2 color enforcement (Elementor icons + custom SVG) === */
.yw-gallery__nav2 .yw-nav2__btn{
  background-color: var(--yw-nav2-bg, rgba(0,0,0,0.55)) !important;
  color: var(--yw-nav2-color, #fff) !important;
}

.yw-gallery__nav2 .yw-nav2__btn:hover{
  background-color: var(--yw-nav2-bg-hover, rgba(0,0,0,0.75)) !important;
  color: var(--yw-nav2-color-hover, #fff) !important;
}

/* force Elementor SVG icons to follow currentColor */
.yw-gallery__nav2 .yw-nav2__icon svg,
.yw-gallery__nav2 .yw-nav2__icon svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}