/* X Slider – RTL, thumbs-only, anti-jump, true centering */
.xsl{
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.12);
  --thumb-h:88px;
  contain:layout paint;
  display:block;                 /* بلاک ساده؛ کنترل مرکزدهی با margin */
}
.xsl *{box-sizing:border-box}

/* ==== Viewport & Slide ==== */
/* ویوپورت با ابعاد ثابت و مرکز صفحه */
.xsl-viewport{
  position:relative;
  overflow:hidden;
  display:block;                 /* flex لازم نیست؛ اسلایدها absolute هستند */
  width:472px;
  height:328px;
  margin-inline:auto;            /* مرکز افقی واقعی */
  border-radius:16px;
}

/* خود figure را هم بدون حاشیه و هم‌اندازه نگه‌دار */
.xsl-viewport figure{
  width:472px;
  height:328px;
  border-radius:16px;
  margin:0;
}

/* اسلایدها همیشه absolute می‌مانند تا reflow رخ ندهد */
.xsl-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(.98) translateZ(0);
  transition:opacity .4s ease, transform .4s ease;
  will-change:opacity, transform;
  border-radius:16px;
}
.xsl-slide.is-active{opacity:1; transform:scale(1); z-index:1}

/* تصویر داخل اسلاید: پر کردن کادر با برش، مرکز تصویر در وسط */
.xsl-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;        /* تضمین تمرکز روی مرکز تصویر */
  display:block;
  border-radius:16px;
  background:#ddd;
}

/* اگر «بدون برش» می‌خواهی، کلاس اختیاری: <section class="xsl xsl--contain"> */
.xsl--contain .xsl-slide img{
  object-fit:contain;
  object-position:center;
  background:#111;               /* پس‌زمینه‌ی دلخواه هنگام letterbox */
}

/* ==== Badge & Caption ==== */
.xsl-badge{
  position:absolute;
  bottom:12px;
  background:#fff;
  color:#222;
  font-style:normal;
  padding:.35rem .8rem;
  border-radius:16px 0 0 16px;
  font-weight:700;
  box-shadow:var(--shadow);
  z-index:4;
  margin-bottom:40px;
  font-size:12px;
}

.xsl-caption{
  position:absolute;
  bottom:0; right:0; left:0;
  padding:14px 18px 22px;
  color:#fff;
  font-style:normal;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.55) 40%,rgba(0,0,0,.75) 100%);
  font-size:14px;
  border-radius:16px;
}

/* ==== Thumbs bar + arrows ==== */
/* کل نوار تامب‌ها هم وسط صفحه */
.xsl-thumbs-wrap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  margin-top:18px;
  width:720px;
  margin-inline:auto;            /* مرکز افقی */
}

.xsl-tprev,
.xsl-tnext{
  width:36px;
  height:36px;
  border-radius:999px;
  border:0;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.xsl-tprev:focus-visible,
.xsl-tnext:focus-visible{
  outline:2px solid #111;
  outline-offset:2px;
}

/* ==== Thumbs list ==== */
.xsl-thumbs{
  display:flex;
  gap:14px;
  overflow:auto;
  scroll-behavior:smooth;
  padding:0 4px;
}
.xsl-thumbs::-webkit-scrollbar{height:8px}
.xsl-thumbs::-webkit-scrollbar-thumb{background:#cfcfcf; border-radius:4px}

.xsl-thumb{
  flex:0 0 120px;
  border:0;
  padding:0;
  background:transparent;
  border-radius:12px;
  overflow:hidden;
  opacity:.6;
  cursor:pointer;
}
.xsl-thumb.is-active{opacity:1}
.xsl-thumb img{
  border-radius:16px;
  width:120px;
  height:88px;
  object-fit:cover;
  display:block;
}

/* ==== Mobile helpers ==== */
@media (hover:none) and (pointer:coarse){
  .xsl-thumbs{
    direction:ltr;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .xsl-thumb{scroll-snap-align:center}
}

/* ==== Responsive ==== */
@media (max-width:1240px){
  .xsl-viewport{
    width:358px;
    height:328px;
    margin-inline:auto;
  }
  .xsl-viewport figure,
  .xsl-slide img{
    width:358px;
    height:328px;
  }
  .xsl-thumbs-wrap{
    width:350px;
    margin-inline:auto;
  }
  .xsl-thumb{flex-basis:120px}
  .xsl-thumb img{border-radius:16px}
}