/* ============ WCPG Final – Next LEFT, Prev RIGHT ============ */
/* رنگ‌ها/شِمای کلی (در صورت نیاز override کن) */
:root{
  --wcpg-radius-lg: 14px;
  --wcpg-radius-md: 10px;
  --wcpg-surface: #f7f7f7;
  --wcpg-border: #e7e7e7;
  --wcpg-text: #111;

  --wcpg-nav-size: 38px;
  --wcpg-nav-radius: 8px;             /* کمی تیزتر */
  --wcpg-nav-bg: rgba(0,0,0,.55);
  --wcpg-nav-bg-hover: rgba(0,0,0,.75);
  --wcpg-nav-fg: #fff;
  --wcpg-nav-icon: 18px;
}

/* Layout */
.wcpg-gallery{ display:grid; gap:12px; }

/* Main image area */
.product-gallery-main{
  position:relative;
  width:100%;
  background:var(--wcpg-surface);
  border-radius:var(--wcpg-radius-lg);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.product-gallery-main .swiper,
.product-gallery-main .swiper-wrapper,
.product-gallery-main .swiper-slide{
  inline-size:100%; block-size:100%;
}
.product-gallery-main .swiper-slide{
  display:grid; place-items:center;   /* دقیق‌ترین سنتر */
}
.wcpg-main-img{
  inline-size:100%; block-size:auto;
  object-fit:contain; display:block;
  pointer-events:none; -webkit-user-drag:none;
}

/* ---- Custom nav buttons ---- */
/* مکان: چپ = بعدی ، راست = قبلی (همیشه؛ مستقل از RTL/LTR) */
.wcpg-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  inline-size:var(--wcpg-nav-size);
  block-size:var(--wcpg-nav-size);
  padding:0; border:0;
  border-radius:var(--wcpg-nav-radius);
  background:var(--wcpg-nav-bg);
  color:var(--wcpg-nav-fg);
  display:grid; place-items:center;   /* آیکون دقیقاً وسط */
  cursor:pointer; z-index:10;
  transition:background .18s ease, transform .18s ease, opacity .18s ease;
  opacity:.96;
  box-shadow:none; outline:none;
}
.wcpg-nav:hover{ background:var(--wcpg-nav-bg-hover); transform:translateY(-50%) scale(1.06); }
.wcpg-nav:active{ transform:translateY(-50%) scale(.98); }

.wcpg-prev{ left:10px; }   /* بصری: سمت چپ (این دکمه کار Next را انجام می‌دهد) */
.wcpg-next{ right:10px; }  /* بصری: سمت راست (این دکمه کار Prev را انجام می‌دهد) */

/* آیکون Flaticon 100% وسط و بدون جابه‌جایی */
.wcpg-nav .fi{
  font-size:var(--wcpg-nav-icon);
  line-height:1;
  display:block;
  transform:translateZ(0); /* رندر دقیق‌تر */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* حالت غیرفعال */
.wcpg-nav.swiper-button-disabled{
  opacity:.36; cursor:not-allowed;
}

/* ---- Thumbs strip ---- */
.product-gallery-thumbs{ width:100%; border-top:1px solid var(--wcpg-border); padding-top:8px; }
.product-gallery-thumbs .swiper-wrapper{ align-items:center; }
.product-gallery-thumbs .swiper-slide{
  inline-size:72px; block-size:72px;
  border-radius:var(--wcpg-radius-md);
  overflow:hidden;
  border:1.5px solid transparent;
  background:#fff;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.product-gallery-thumbs .swiper-slide:hover{ box-shadow:0 2px 6px rgba(0,0,0,.10); }
.product-gallery-thumbs .swiper-slide.swiper-slide-thumb-active{
  border-color:var(--wcpg-text); transform:translateY(-1px);
}
.wcpg-thumb-img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.product-gallery-thumbs .swiper-slide:focus{ outline:2px solid var(--wcpg-text); outline-offset:2px; }

@media (min-width:768px){
  .product-gallery-thumbs .swiper-slide{ inline-size:84px; block-size:84px; }
}

/* اطمینان از اینکه ناوبری پیش‌فرض Swiper قطع باشد */
.product-gallery-main .swiper-button-prev,
.product-gallery-main .swiper-button-next{ display:none !important; }

/* امن‌سازی Line-height در برابر استایل‌های تم */
.wcpg-nav, .wcpg-nav *{ line-height:1 !important; }