/* ═══════════════════════════════════════════════════════════════════
   Toska Product Cards — product-card.css  |  v30.0.0
   BUG FIX: epc-star-partial::after direction لحاظ نشده بود — رفع شد
   BUG FIX: epc-reviews-panel در mobile از صفحه خارج میشد — rفع شد
   BUG FIX: epc-buy-btn با <a> tag نیاز به display:flex داشت — اضافه شد
   BUG FIX: focus-visible برای accessibility اضافه شد
   BUG FIX: epc-lb-nav در RTL جای prev/next عوض بود — اصلاح شد
   ═══════════════════════════════════════════════════════════════════ */

.epc-card *,
.epc-card *::before,
.epc-card *::after { box-sizing: border-box; }

.epc-card {
  --epc-accent:     #6366f1;
  --epc-accent2:    #8b5cf6;
  --epc-surface:    #ffffff;
  --epc-bg:         #f8f9ff;
  --epc-text:       #1e1b4b;
  --epc-muted:      #6b7280;
  --epc-border:     rgba(99,102,241,.15);
  --epc-radius:     20px;
  --epc-shadow:     0 8px 40px rgba(99,102,241,.12);
  --epc-transition: .35s cubic-bezier(.4,0,.2,1);

  position:      relative;
  background:    var(--epc-surface);
  border-radius: var(--epc-radius);
  box-shadow:    var(--epc-shadow);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  font-family:   'IRANSans','Vazirmatn','Tahoma',sans-serif;
  direction:     rtl;
  isolation:     isolate;
  transition:    transform var(--epc-transition), box-shadow var(--epc-transition);
}

.epc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(99,102,241,.03) 0%,rgba(139,92,246,.03) 100%);
  pointer-events: none;
  z-index: 0;
}

.epc-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 24px 64px rgba(99,102,241,.22);
}

/* ── Badges ──────────────────────────────────────────────────────── */
.epc-badges {
  position:       absolute;
  top:            14px;
  right:          14px;
  z-index:        20;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.epc-badge {
  background:   linear-gradient(135deg, var(--epc-accent), var(--epc-accent2));
  color:        #fff;
  font-size:    11px;
  font-weight:  700;
  padding:      4px 12px;
  border-radius: 50px;
  box-shadow:   0 4px 15px rgba(0,0,0,.2);
  white-space:  nowrap;
  animation:    epc-pulse 2.5s ease-in-out infinite;
}

@keyframes epc-pulse {
  0%,100% { box-shadow: 0 4px 15px rgba(0,0,0,.2); }
  50%     { box-shadow: 0 4px 25px rgba(0,0,0,.4); }
}

/* ── Gallery ─────────────────────────────────────────────────────── */
.epc-gallery { position: relative; background: var(--epc-bg); }

.epc-main-media {
  position:   relative;
  width:      100%;
  aspect-ratio: 4/3;
  overflow:   hidden;
  background: var(--epc-bg);
  cursor:     zoom-in;
}

.epc-thumb-wrap {
  /* BUG FIX (v30.2.5): قبلاً width/height:100% بود که برای resolve شدنش
     وابسته به این بود که مرورگر ارتفاعِ مشتق‌شده از aspect-ratio والد را
     یک مقدار «قطعی» برای درصدگیری فرزند در نظر بگیرد. اگر به هر دلیلی
     (نسخهٔ مرورگر، تداخل با استایل دیگر) این resolve درست انجام نشود،
     ارتفاع wrap صفر/auto می‌شود و img داخلش دیگر 100% معتبر نمی‌گیرد و
     در اندازهٔ طبیعیِ خودش render می‌شود که با overflow:hidden از هر
     ۴ طرف بریده به‌نظر می‌رسد. با inset:0 دیگر هیچ محاسبهٔ درصدی لازم
     نیست — مستقیماً به box والد (که position:relative دارد) قفل می‌شود. */
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}

.epc-card .epc-gallery .epc-main-media .epc-thumb-wrap img {
  /* BUG FIX (v30.2.7): specificity به‌عمد با زنجیرهٔ کلاس‌های خودمان
     (که مختص این افزونه‌اند و با هیچ افزونهٔ دیگری تداخل نمی‌کنند)
     بالا برده شد — دقیقاً هم‌ارز با استفاده از یک ID یکتا، تا در برابر
     قوانین CSS کلاس‌محورِ افزونه‌های دیگر (نه inline style) قطعاً برنده
     باشیم. توجه: این فقط تداخل از نوع «قانون CSS در فایل استایل» را حل
     می‌کند؛ اگر تداخل از نوع inline style با جاوااسکریپت باشد (که در
     اسکرین‌شات قبلی دیده شد)، هیچ specificity ای آن را شکست نمی‌دهد —
     برای آن حالت اسکریپت guardGalleryImages در product-card.js مسئول
     پاک‌کردن مستقیم آن inline style است. */
  position:  absolute !important;
  inset:     0 !important;
  width:     100% !important;
  height:    100% !important;
  object-fit: contain !important;
  display:    block;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

.epc-thumb-wrap img.epc-media-gif {
  object-fit: contain;
  transition: transform .4s ease;
}

.epc-main-media:hover .epc-thumb-wrap img:not(.epc-media-gif) { transform: scale(1.18); }
.epc-main-media:hover .epc-thumb-wrap img.epc-media-gif       { transform: scale(1.06); }

.epc-media-overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(0,0,0,0);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .35s ease;
  z-index:         2;
  pointer-events:  none;
}

.epc-main-media:hover .epc-media-overlay { background: rgba(0,0,0,.38); }

.epc-zoom-icon {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  color:          #fff;
  opacity:        0;
  transform:      scale(.7) translateY(10px);
  transition:     opacity .3s ease, transform .3s ease;
}

.epc-zoom-icon span {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: .5px;
  text-shadow:    0 1px 4px rgba(0,0,0,.5);
}

.epc-main-media:hover .epc-zoom-icon {
  opacity:   1;
  transform: scale(1) translateY(0);
}

.epc-gif-badge {
  position:     absolute;
  bottom:       10px;
  left:         10px;
  z-index:      10;
  background:   rgba(0,0,0,.7);
  color:        #fff;
  font-size:    10px;
  font-weight:  800;
  padding:      3px 8px;
  border-radius: 6px;
  letter-spacing: 1px;
}

/* Thumbnails */
.epc-thumbnails {
  display:          flex;
  gap:              8px;
  padding:          10px 12px;
  overflow-x:       auto;
  scrollbar-width:  thin;
  scrollbar-color:  var(--epc-accent) transparent;
}

.epc-thumb-btn {
  position:        relative;
  flex:            0 0 64px;
  height:          48px;
  border:          2px solid transparent;
  border-radius:   10px;
  overflow:        hidden;
  cursor:          pointer;
  background:      #e5e7eb;
  transition:      border-color var(--epc-transition), transform var(--epc-transition);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
}

.epc-thumb-btn img           { width: 100%; height: 100%; object-fit: cover; }
.epc-thumb-btn:hover         { transform: scale(1.06); }
.epc-thumb-btn.active        { border-color: var(--epc-accent); }

/* BUG FIX: focus-visible برای keyboard navigation */
.epc-thumb-btn:focus-visible {
  outline: 2px solid var(--epc-accent);
  outline-offset: 2px;
}

.epc-thumb-gif-tag {
  position:     absolute;
  bottom:       2px;
  right:        2px;
  background:   rgba(0,0,0,.65);
  color:        #fff;
  font-size:    8px;
  font-weight:  800;
  padding:      1px 4px;
  border-radius: 4px;
  line-height:  1.4;
}

/* ── Info ────────────────────────────────────────────────────────── */
.epc-info {
  padding:        20px 22px 24px;
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            14px;
  position:       relative;
  z-index:        1;
}

.epc-title {
  margin:      0;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.3px;
  word-break:  break-word;
}

.epc-desc {
  margin:      0;
  color:       var(--epc-muted);
  font-size:   13.5px;
  line-height: 1.8;
}

/* ── Stars ───────────────────────────────────────────────────────── */
.epc-rating-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}

.epc-stars { display: flex; gap: 2px; direction: ltr; }

.epc-star       { font-size: 18px; display: inline-block; line-height: 1; }
.epc-star-full  { color: #f59e0b; }
.epc-star-empty { color: #d1d5db; }

.epc-star-partial {
  position: relative;
  color:    #d1d5db;
}
/* BUG FIX: direction:ltr روی ::after تضمین میکنه width به درستی از چپ اعمال بشه */
.epc-star-partial::after {
  content:    '★';
  position:   absolute;
  left:       0;
  top:        0;
  color:      #f59e0b;
  width:      var(--fill, 50%);
  overflow:   hidden;
  white-space: nowrap;
  direction:  ltr;
}

.epc-rating-val { font-size: 14px; font-weight: 700; color: var(--epc-text); }

.epc-reviews-toggle {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  background:     rgba(99,102,241,.08);
  color:          var(--epc-accent);
  border:         1px solid var(--epc-border);
  border-radius:  50px;
  padding:        4px 12px;
  font-size:      12.5px;
  font-weight:    600;
  cursor:         pointer;
  transition:     background var(--epc-transition);
  font-family:    inherit;
}
.epc-reviews-toggle:hover        { background: rgba(99,102,241,.15); }
.epc-reviews-toggle:focus-visible { outline: 2px solid var(--epc-accent); outline-offset: 2px; }

/* ── Pricing ─────────────────────────────────────────────────────── */
.epc-pricing { display: flex; flex-direction: column; gap: 4px; }

.epc-pricing-center {
  align-items:   center;
  text-align:    center;
  background:    linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.06));
  border-radius: 14px;
  padding:       14px 16px;
  border:        1px solid rgba(99,102,241,.12);
}

.epc-price-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }

.epc-old-price {
  color:               var(--epc-muted);
  font-size:           13px;
  text-decoration:     line-through;
  text-decoration-color: #f87171;
}

.epc-discount-badge {
  background:    linear-gradient(135deg,#ef4444,#f87171);
  color:         #fff;
  font-size:     11px;
  font-weight:   700;
  padding:       3px 10px;
  border-radius: 50px;
}

.epc-new-price       { font-size: 26px; font-weight: 900; color: var(--epc-accent); line-height: 1; }
.epc-new-price span  { font-size: 14px; font-weight: 500; color: var(--epc-muted); }

/* ── Buy Button ──────────────────────────────────────────────────── */
/* BUG FIX: display:flex و text-decoration:none برای <a> tag */
.epc-buy-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  padding:         14px 20px;
  background:      linear-gradient(135deg, var(--epc-accent), var(--epc-accent2));
  color:           #fff;
  font-size:       15px;
  font-weight:     700;
  border:          none;
  border-radius:   14px;
  cursor:          pointer;
  letter-spacing:  .3px;
  box-shadow:      0 4px 20px rgba(99,102,241,.3);
  transition:      transform var(--epc-transition), box-shadow var(--epc-transition);
  position:        relative;
  overflow:        hidden;
  margin-top:      auto;
  text-decoration: none;
  font-family:     inherit;
  -webkit-appearance: none;
}

.epc-buy-btn::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(255,255,255,.12);
  opacity:    0;
  transition: opacity var(--epc-transition);
}
.epc-buy-btn:hover       { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99,102,241,.5); }
.epc-buy-btn:hover::after { opacity: 1; }
.epc-buy-btn:active      { transform: translateY(0); }
.epc-buy-btn:focus-visible { outline: 2px solid var(--epc-accent); outline-offset: 3px; }

/* ── NEW (v30.30): دکمه‌ی سه‌تیکه — تماس/مشاهده/سبد کنار هم در یک ردیف ──── */
/* BUG FIX (v30.32): در موبایل بهم می‌ریخت و دکمه‌ها روی هم می‌افتادند —
   علتش این بود که خیلی از قالب‌های وردپرس یک قانون سراسری فقط-موبایل
   دارند («هر دکمه/لینک‌شبه‌دکمه در موبایل تمام‌عرض و زیر هم بشود») که چون
   داخل یک @media است، حتی با اهمیت (!important) برابر می‌تواند قوانین
   عادی ما را کنار بزند. اینجا هم specificity رو با تکرار کلاس (که در
   CSS معتبر و مجاز است) بالا بردیم و هم !important رو کامل کردیم تا این
   تداخل دیگر ممکن نباشد. */
.epc-btn-segmented.epc-btn-segmented {
  display:        flex !important;
  flex-direction:  row !important;
  flex-wrap:       nowrap !important;
  align-items:     stretch !important;
  width:           100% !important;
  max-width:       100% !important;
  margin-top:      auto !important;
  margin-bottom:   0 !important;
  border-radius:   14px !important;
  overflow:        hidden !important;
  box-shadow:      0 4px 20px rgba(99,102,241,.3) !important;
  position:        relative !important;
}
/* داخل حالت سه‌تیکه، هر سه دکمه (لینک مشاهده/تماس/سبد) باید شکل یکسان
   بگیرند — استایل‌های مجزای هرکدام (رنگ سفید سبد، گرادیان دکمه اصلی) نادیده
   گرفته می‌شود تا یک نوار واحد و یکدست دیده شوند */
.epc-btn-segmented.epc-btn-segmented > a,
.epc-btn-segmented.epc-btn-segmented > button {
  flex:            1 1 0 !important;
  min-width:       0 !important;
  max-width:       none !important;
  min-height:      0 !important;
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             4px !important;
  padding:         12px 4px !important;
  margin:          0 !important;
  width:           auto !important;
  height:          auto !important;
  background:      linear-gradient(135deg, var(--epc-accent), var(--epc-accent2)) !important;
  color:           #fff !important;
  border:          none !important;
  border-radius:   0 !important;
  box-shadow:      none !important;
  font-size:       11.5px !important;
  font-weight:     700 !important;
  cursor:          pointer !important;
  text-decoration: none !important;
  font-family:     inherit !important;
  position:        relative !important;
  top:             auto !important;
  right:           auto !important;
  left:            auto !important;
  bottom:          auto !important;
  transform:       none !important;
  box-sizing:      border-box !important;
}
.epc-btn-segmented.epc-btn-segmented > a:not(:last-child),
.epc-btn-segmented.epc-btn-segmented > button:not(:last-child) {
  border-left: 1px solid rgba(255,255,255,.3) !important;
}
.epc-btn-segmented span {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  min-width:     0;
}
.epc-btn-segmented svg { flex-shrink: 0; width: 14px; height: 14px; }
.epc-btn-segmented .epc-add-to-cart svg path,
.epc-btn-segmented .epc-add-to-cart svg circle { stroke: #fff !important; }

/* FIX (v30.34): طبق درخواست کاربر — به‌جای کوچک‌کردن فونتِ متنِ دلخواه
   ادمین (که در گوشی‌های خیلی کوچک بازم جا نمی‌شد)، در موبایل و تبلت یک
   برچسب کوتاه و ثابت (تماس/مشاهده/سبد) جایگزین می‌شود. در دسکتاپ، همان
   متنی که ادمین نوشته دقیقاً همان‌طور نمایش داده می‌شود. */
.epc-btn-short { display: none; }
@media (max-width: 1024px) {
  .epc-btn-segmented.epc-btn-segmented .epc-btn-full  { display: none !important; }
  .epc-btn-segmented.epc-btn-segmented .epc-btn-short { display: inline !important; }
}

/* BUG FIX (v30.32): همین قوانین را دوباره داخل مدیاکوئری موبایل هم تکرار
   می‌کنیم — چون اگر قانون مزاحمِ قالب هم داخل یک @media باشد، صرفاً بودن
   قانون ما بیرون از @media می‌تواند در برخی مرورگرها اولویت را کم کند. */
@media (max-width: 767px) {
  .epc-btn-segmented.epc-btn-segmented {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  .epc-btn-segmented.epc-btn-segmented > a,
  .epc-btn-segmented.epc-btn-segmented > button {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    margin: 0 !important;
  }
}

/* دکمه‌ی تماس در حالت زیر هم (غیر سه‌تیکه) هم رنگ گرادیان یکسان با دکمه‌ی
   اصلی دارد تا هم‌خانواده به نظر برسند */
.epc-call-btn { margin-top: 8px; }

/* ── Reviews Panel ───────────────────────────────────────────────── */
/* BUG FIX: در mobile از صفحه خارج میشد — max-height و overflow اضافه شد */
.epc-reviews-panel {
  position:      absolute;
  inset:         0;
  background:    var(--epc-surface);
  z-index:       50;
  display:       flex;
  flex-direction: column;
  transform:     translateY(100%);
  transition:    transform .45s cubic-bezier(.4,0,.2,1);
  border-radius: var(--epc-radius);
  overflow:      hidden;
  max-height:    100%;
}
.epc-reviews-panel.open { transform: translateY(0); }

.epc-reviews-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  background:      linear-gradient(135deg, var(--epc-accent), var(--epc-accent2));
  color:           #fff;
  font-weight:     700;
  font-size:       15px;
  flex-shrink:     0;
}

.epc-reviews-close {
  background:      rgba(255,255,255,.2);
  border:          none;
  color:           #fff;
  width:           30px;
  height:          30px;
  border-radius:   50%;
  cursor:          pointer;
  font-size:       14px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.epc-reviews-close:focus-visible { outline: 2px solid rgba(255,255,255,.8); }

.epc-reviews-list {
  flex:           1;
  overflow-y:     auto;
  padding:        14px 16px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
  scrollbar-width: thin;
}

.epc-loading { color: var(--epc-muted); font-size: 13px; text-align: center; padding: 20px; }

.epc-review-item {
  background:    var(--epc-bg);
  border-radius: 14px;
  padding:       14px 16px;
  border:        1px solid var(--epc-border);
  animation:     epc-slide-in .3s ease both;
}

@keyframes epc-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.epc-review-top     { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.epc-review-avatar {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--epc-accent), var(--epc-accent2));
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-size:       15px;
  font-weight:     700;
  flex-shrink:     0;
}

.epc-review-meta    { flex: 1; }
.epc-review-name    { font-size: 13.5px; font-weight: 700; color: var(--epc-text); }
.epc-review-date    { font-size: 11px; color: var(--epc-muted); }
.epc-review-stars   { color: #f59e0b; font-size: 13px; }
.epc-review-content { font-size: 13px; color: #374151; line-height: 1.8; }

/* ── پاسخ فروشنده/ادمین (v30.4) ──────────────────────────────────────── */
.epc-review-reply {
    margin-top:    10px;
    margin-right:  14px;
    padding:       10px 12px;
    background:    #f4f5ff;
    border-right:  3px solid var(--epc-accent, #6366f1);
    border-radius: 8px;
}
.epc-review-reply-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   11.5px;
    font-weight: 700;
    color:       var(--epc-accent, #6366f1);
    margin-bottom: 4px;
}
.epc-review-reply-content {
    font-size:   12.5px;
    color:       #374151;
    line-height: 1.7;
}

.epc-add-review {
  padding:     16px;
  border-top:  1px solid var(--epc-border);
  background:  var(--epc-bg);
  flex-shrink: 0;
}
.epc-add-review h4 { margin: 0 0 12px; font-size: 14px; color: var(--epc-text); }

.epc-star-input { display: flex; gap: 6px; margin-bottom: 10px; direction: ltr; }

.epc-star-rate {
  background:  none;
  border:      none;
  font-size:   24px;
  color:       #d1d5db;
  cursor:      pointer;
  padding:     0;
  transition:  color .2s, transform .15s;
  line-height: 1;
}
.epc-star-rate.active, .epc-star-rate.hover { color: #f59e0b; transform: scale(1.2); }

.epc-input {
  width:         100%;
  padding:       10px 14px;
  border:        1.5px solid var(--epc-border);
  border-radius: 10px;
  font-size:     13px;
  font-family:   inherit;
  background:    #fff;
  color:         var(--epc-text);
  transition:    border-color var(--epc-transition);
  margin-bottom: 8px;
  resize:        none;
  outline:       none;
}
.epc-input:focus { border-color: var(--epc-accent); }

.epc-submit-review {
  width:         100%;
  padding:       11px;
  background:    linear-gradient(135deg, var(--epc-accent), var(--epc-accent2));
  color:         #fff;
  border:        none;
  border-radius: 10px;
  font-size:     14px;
  font-weight:   700;
  cursor:        pointer;
  font-family:   inherit;
}
.epc-submit-review:hover    { opacity: .9; }
.epc-submit-review:disabled { opacity: .6; cursor: not-allowed; }

.epc-form-msg         { font-size: 12.5px; text-align: center; margin-top: 6px; min-height: 18px; }
.epc-form-msg.success { color: #16a34a; }
.epc-form-msg.error   { color: #dc2626; }

/* ── Lightbox ────────────────────────────────────────────────────── */
#epc-lightbox {
  position:        fixed;
  inset:           0;
  z-index:         999999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  visibility:      hidden;
  transition:      opacity .4s ease, visibility .4s;
}
#epc-lightbox.open { opacity: 1; visibility: visible; }

#epc-lightbox-backdrop {
  position:       absolute;
  inset:          0;
  background:     rgba(0,0,0,.92);
  backdrop-filter: blur(20px) saturate(1.5);
}

#epc-lb-header {
  box-sizing:      border-box;
  position:        fixed;
  top:             0; left: 0; right: 0;
  z-index:         3;
  padding:         16px 20px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
}

#epc-lb-counter { color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600; }

#epc-lightbox-close {
  width:           44px;
  height:          44px;
  background:      rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  border:          1px solid rgba(255,255,255,.2);
  border-radius:   50%;
  color:           #fff;
  font-size:       20px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .2s, transform .2s;
}
#epc-lightbox-close:hover { background: rgba(255,255,255,.28); transform: scale(1.1); }

#epc-lightbox-content {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  padding:         70px 80px;
}

#epc-lightbox-media {
  max-width:       100%;
  max-height:      100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

#epc-lightbox-media img {
  max-width:   90vw;
  max-height:  80vh;
  border-radius: 12px;
  box-shadow:  0 30px 100px rgba(0,0,0,.7);
  object-fit:  contain;
  display:     block;
  animation:   epc-lb-zoom-in .35s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes epc-lb-zoom-in {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

#epc-lb-footer {
  position:        fixed;
  bottom:          0; left: 0; right: 0;
  z-index:         3;
  padding:         16px 20px;
  background:      linear-gradient(to top, rgba(0,0,0,.7), transparent);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             12px;
}

#epc-lightbox-caption { color: rgba(255,255,255,.85); font-size: 14px; text-align: center; }

#epc-lb-thumbs {
  display:          flex;
  gap:              8px;
  overflow-x:       auto;
  max-width:        90vw;
  padding:          4px;
  scrollbar-width:  thin;
  scrollbar-color:  rgba(255,255,255,.3) transparent;
}

.epc-lb-thumb {
  flex:          0 0 60px;
  height:        44px;
  border-radius: 8px;
  overflow:      hidden;
  border:        2px solid rgba(255,255,255,.2);
  cursor:        pointer;
  transition:    border-color .2s, transform .2s;
  opacity:       .6;
}
.epc-lb-thumb img    { width: 100%; height: 100%; object-fit: cover; }
.epc-lb-thumb.active { border-color: #fff; opacity: 1; transform: scale(1.05); }
.epc-lb-thumb:hover  { opacity: .9; }

/* BUG FIX: RTL — prev باید سمت راست و next سمت چپ باشه */
.epc-lb-nav {
  box-sizing:      border-box; /* BUG FIX (v30.20): لایت‌باکس ممکنه بیرون .epc-card باشه و border-box ارثی نگیره */
  position:        fixed;
  top:             50%;
  transform:       translateY(-50%);
  width:           52px;
  height:          52px;
  max-width:       52px;
  max-height:      52px;
  background:      rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  border:          1px solid rgba(255,255,255,.25);
  border-radius:   50%;
  color:           #fff;
  font-size:       24px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .2s, transform .2s;
  z-index:         3;
  line-height:     1;
  padding:         0; /* دکمه <button> پدینگ پیش‌فرض مرورگر نگیره */
}
.epc-lb-nav:hover    { background: rgba(255,255,255,.3); transform: translateY(-50%) scale(1.08); }
.epc-lb-nav:disabled { opacity: .3; pointer-events: none; }

/* BUG FIX: RTL — prev راست، next چپ */
#epc-lb-prev { right: 20px; }
#epc-lb-next { left:  20px; }

/* ── Accessibility ───────────────────────────────────────────────── */
.epc-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .epc-info          { padding: 16px 16px 20px; }
  .epc-new-price     { font-size: 22px; }
  #epc-lb-prev       { right: 8px; }
  #epc-lb-next       { left:  8px; }

  /* BUG FIX (v30.33): عنوان‌های طولانی روی موبایل به دو خط می‌شکستند —
     فونت کوچک‌تر شد و تک‌خط با سه‌نقطه (fallback ایمنی برای عنوان‌های
     خیلی‌خیلی طولانی) اجباری شد. اگر ادمین از تنظیمات تایپوگرافیِ عنوان
     مقدار مخصوص موبایل ست کرده باشد، همچنان آن مقدار برنده می‌شود (چون
     المنتور آن را با سلکتور اختصاصی‌تر تولید می‌کند). */
  .epc-title {
    font-size:     15px !important;
    line-height:   1.35 !important;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
  }

  /* BUG FIX (v30.33): متن دکمه‌های سه‌تیکه (تماس/مشاهده/سبد) در موبایل
     هنوز جا کم می‌آورد — فونت و آیکون کوچک‌تر شد تا متن کامل (بدون سه‌نقطه)
     نمایش داده شود. */
  .epc-btn-segmented.epc-btn-segmented > a,
  .epc-btn-segmented.epc-btn-segmented > button {
    font-size: 10px !important;
    gap:       3px !important;
    padding:   10px 2px !important;
  }
  .epc-btn-segmented svg { width: 12px !important; height: 12px !important; }

  /* BUG FIX (v30.20): روی بعضی مرورگرهای اندروید، backdrop-filter:blur
     رو این دکمه به‌جای یه دایرهٔ کوچیک، به‌شکل یه بیضی/لکهٔ تار بزرگ رندر
     می‌شد. تو موبایل کاملاً حذفش کردیم و به یه پس‌زمینهٔ تیرهٔ ساده و
     مطمئن (بدون افکت بلور) تغییرش دادیم. */
  .epc-lb-nav {
    width:           38px;
    height:          38px;
    max-width:       38px;
    max-height:      38px;
    font-size:       16px;
    background:      rgba(0,0,0,.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* BUG FIX (v30.22): قبلاً با top:50% دقیقاً وسط تصویر زوم‌شده می‌افتاد
       و دید محصول را می‌گرفت. حالا در موبایل به‌جای وسط، پایین صفحه
       (بالای فوتر/تصاویر بندانگشتی) قرار می‌گیرد و دیگر روی تصویر نمی‌آید. */
    top:       auto;
    bottom:    calc(132px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
  .epc-lb-nav:hover { transform: scale(1.08); }
  #epc-lightbox-content { padding: 60px 56px; }
}

/* ── Dark Mode ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .epc-card {
    --epc-surface: #1e1b4b;
    --epc-bg:      #13111f;
    --epc-text:    #f5f3ff;
    --epc-muted:   #a5b4fc;
    --epc-border:  rgba(139,92,246,.2);
  }
  .epc-input          { background: #13111f; }
  .epc-review-content { color: #d1d5db; }
  .epc-review-reply { background: rgba(99,102,241,.12); }
  .epc-review-reply-content { color: #e0e0f5; }
}