/* ============================================================
   استایل سفارشی نهایی — جِهان‌چاپگر
   محل قرارگیری:  themes/pandachild/assets/css/custom.css
   ------------------------------------------------------------
   شامل:
   ۱) بخش «انتخاب کیفیت» به‌صورت ردیفی با قیمت (مثل دیجی‌کالا)
   ۲) نوار شناور «افزودن به سبد خرید» در موبایل
   ۳) مخفی‌کردن نام انگلیسی محصول (مرجع) زیر عنوان
   ۴) خط جداکننده بین عنوان و امتیاز نظرات
   ۵) جعبه «تحویل ۳ ساعته» زیر ترکیبات (شبیه دیجی‌کالا)
   ۶) جعبه «ویژگی‌ها» — ۳ ویژگی اول + «مشاهده همه ویژگی‌ها»
   ۷) نوار امتیاز دیجی‌کالایی + درصد خرید هر ترکیب از فروش واقعی
   ۹) جعبه بازشونده «روش‌ها و هزینه‌های ارسال» (قیمت زنده از پرستاشاپ)
   ۱۰) نشان «بهترین/بیشترین قیمت در ۳۰ روز گذشته» بالای دکمه خرید
   ۱۱) باکس «فروشندگان این کالا» + حذف «ارسال فوری در اولین روز کاری»
   ۱۲) انتخاب ترکیب در فرم نظر/سوال + برچسب ترکیب در نظرات
   ۱۳) پنل «آمار از نظر خریداران» زیر ترکیبات + مودال «ثبت رای کارایی محصول»
   ⚠️ کل محتوای قبلی custom.css را با این فایل جایگزین کنید.
   بعد از اعمال: کش پرستاشاپ را پاک کنید (پرفورمنس -> پاک کردن کش) + Ctrl+F5
   ============================================================ */


/* ============================================================
   ۱) بخش «انتخاب کیفیت» — کارت‌های ۲×۲ با نوار درصد فروش (طرح ۱۰)
   قیمت هر کارت توسط custom.js خوانده می‌شود؛
   نوار درصد = سهم فروش واقعی همان ترکیب (dg-variant-stats.php).
   ============================================================ */

/* ── بدون قاب بیرونی ── */
.product-variants .product-variants-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 12px 0 4px;
}

/* ── عنوان «کیفیت» ── */
.product-variants .product-variants-item > .control-label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 700;
  font-size: 13px;
  color: #33453b;
  margin: 0 !important;
  padding: 2px 2px 8px;
}

/* ── گرید ۲ ستونه ── */
.product-variants .product-variants-item ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── هر گزینه = کارت با نوار درصد ── */
.product-variants .product-variants-item .input-container {
  position: relative;
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
  padding: 9px 11px 8px !important;
  border: 1.5px solid transparent !important;
  border-radius: 10px !important;
  background: #eceef0 !important;
  cursor: pointer;
  text-align: right;
  list-style: none;
  transition: background .15s ease, border-color .15s ease;
}
.product-variants .product-variants-item .input-container:hover {
  background: #e6f3ec !important;
}

/* ── رادیو نامرئی تمام‌اندازه ── */
.product-variants .product-variants-item .input-container .input-radio {
  opacity: 0;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 3;
}
.product-variants .product-variants-item .input-container .st-input-loading {
  pointer-events: none;
}

.product-variants .product-variants-item .input-container .vhead {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-bottom: 2px;
}
.product-variants .product-variants-item .input-container .radio-label {
  flex: 1;
  min-width: 0;
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
  color: #33453b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-variants .product-variants-item .input-container .vprice {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: #1a7a45;
  white-space: nowrap;
  pointer-events: none;
}
.product-variants .product-variants-item .input-container .vprice .price {
  font-size: 13px;
  font-weight: 800;
}
/* آیکون تومان کوچک (SVG استایل inline=24px دارد) */
.product-variants .product-variants-item .input-container .vprice svg {
  width: 10px !important;
  height: 10px !important;
  vertical-align: -1px !important;
  opacity: .7;
}

/* ── کارت انتخاب‌شده ── */
.product-variants .product-variants-item .input-container:has(.input-radio:checked) {
  background: #eaf9f1 !important;
  border-color: #25a65b !important;
  box-shadow: none !important;
  color: #33453b !important;
}
.product-variants .product-variants-item .input-container:has(.input-radio:checked) .radio-label {
  color: #0f5c2d !important;
}
.product-variants .product-variants-item .input-container:has(.input-radio:checked) .vprice {
  color: #0f5c2d;
}

/* ── بج «⭐ کیفیت پیشنهادی» — نوار اول کارت (داخل کارت، بدون absolute)
      به این ترتیب هیچ overflow:hidden قالب نمی‌تواند آن را برش دهد ── */
.product-variants .product-variants-item .input-container .vbadge {
  order: -1;             /* در ابتدای کارت (بالای نام) */
  align-self: flex-start;
  margin: 0 0 4px;
  font-size: 8.5px;
  font-weight: 700;
  color: #ffffff;
  background: #ff7a2f;
  border-radius: 20px;
  padding: 1px 7px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  pointer-events: none;
}

/* ── موبایل: همان چیدمان، فشرده‌تر ── */
@media (max-width: 480px) {
  .product-variants .product-variants-item .input-container {
    padding: 8px 9px 7px !important;
  }
  .product-variants .product-variants-item .input-container .radio-label {
    font-size: 11.5px;
  }
  .product-variants .product-variants-item .input-container .vprice .price {
    font-size: 12px;
  }
  .product-variants .product-variants-item .input-container .vprice svg {
    width: 9px !important;
    height: 9px !important;
  }
}

/* نمایشگرهای خیلی باریک: تک‌ستونه */
@media (max-width: 359px) {
  .product-variants .product-variants-item ul {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   ۲) نوار شناور «افزودن به سبد خرید» در موبایل — شبیه دیجی‌کالا
   فقط در موبایل (عرض کمتر از ۷۶۸px) و فقط صفحه محصول نمایش داده می‌شود.
   رنگ دکمه به‌صورت خودکار از دکمه اصلی دسکتاپ خوانده می‌شود
   (توسط custom.js — تابع syncStickyBtnStyle).
   رنگ پیش‌فرض زیر فقط تا قبل از اعمال JS است (fallback).
   ============================================================ */

/* نوار شناور: پیش‌فرض مخفی */
#mobile-sticky-cart {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ffffff;
  border-top: 1px solid #e4e9e6;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  align-items: center;
  gap: 14px;
  direction: rtl;
}

/* قیمت داخل نوار */
#mobile-sticky-cart .msc-price {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  color: #173b2a;
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mobile-sticky-cart .msc-price svg {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
}

/* دکمه نوار — رنگ پیش‌فرض (fallback) آبی مثل دسکتاپ؛
   JS رنگ واقعی را از دکمه اصلی می‌خواند و اعمال می‌کند */
#mobile-sticky-cart .msc-btn {
  flex: 0 0 auto;
  background: #0058b5;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s ease, transform .1s ease, filter .2s ease;
  box-shadow: 0 4px 12px rgba(0, 88, 181, .35);
}

/* hover و کلیک: به‌جای رنگ ثابت، با فیلتر روشن/تیره می‌کنیم
   تا با هر رنگی که از دکمه اصلی می‌آید سازگار باشد */
#mobile-sticky-cart .msc-btn:hover { filter: brightness(.92); }
#mobile-sticky-cart .msc-btn:active { transform: scale(.97); filter: brightness(.85); }
#mobile-sticky-cart .msc-btn:disabled { background: #b6c1bb !important; box-shadow: none; cursor: not-allowed; filter: none; }

/* فقط موبایل */
@media (max-width: 767px) {
  body#product #mobile-sticky-cart { display: flex; }
  /* جا برای نوار پایین (تا فوتر/محصولات مرتبط زیر آن نروند) */
  body#product { padding-bottom: 86px !important; }

  /* (اختیاری) مخفی‌کردن دکمه اصلی داخل صفحه تا تکراری نشود — مثل دیجی‌کالا
     اگر می‌خواهید دکمه اصلی هم باشد، این دو خط را حذف/کامنت کنید */
  body#product .product-add-to-cart .add .add-to-cart { display: none; }
}

/* اطمینان: در دسکتاپ هیچ‌وقت نمایش داده نشود */
@media (min-width: 768px) {
  body#product #mobile-sticky-cart { display: none !important; }
}


/* ============================================================
   ۳) مخفی‌کردن نام انگلیسی محصول (مرجع) زیر عنوان
   ============================================================ */
.product-reference.pro_extra_info {
  display: none !important;
}

/* خلاصه محصول — در همه صفحات مخفی
   ۱) h2 نامرئی زیر عنوان:  .product-subtitle
   ۲) بلاک خلاصه زیر ترکیبات (لیست «ویژگی های محصول» تکراری): .product-description-short */
.product-subtitle,
.product-description-short,
.row:has(> .product-description-short) {
  display: none !important;
}


/* ============================================================
   ۴) خط جداکننده بین عنوان محصول و امتیاز نظرات
   ساختار HTML: .steasy_divider هم‌سطح .product_name_wrap است
   و مستقیم داخل .product_middle_column_inner قرار دارد.
   کلاس d-none دارد → اینجا دوباره نمایش داده می‌شود.
   ============================================================ */

/* نمایش خط (دسکتاپ + موبایل) */
.product_middle_column_inner > .steasy_divider.between_short_and_price,
.steasy_divider.between_short_and_price {
  display: block !important;
  margin: 4px 0 12px !important;
  padding-top: 2px !important;
}
.product_middle_column_inner > .steasy_divider.between_short_and_price .steasy_divider_item,
.steasy_divider.between_short_and_price .steasy_divider_item {
  display: block;
  border-bottom: 1px solid #e5e9e7;
}

/* ── موبایل: فاصله خط تا امتیاز (مقدار دلخواه 15px) ── */
@media (max-width: 767px) {
  .product_middle_column_inner > .steasy_divider.between_short_and_price,
  .steasy_divider.between_short_and_price {
    margin: 0 0 15px !important;
    padding: 0 !important;
  }
  /* فاصله بالای بلوک امتیاز هم صفر شود */
  #product_review_block_extra {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ============================================================
   ۵) جعبه «تحویل ۳ ساعته» زیر ترکیبات (شبیه دیجی‌کالا)
   HTML توسط custom.js (بخش ۵) بعد از .product-variants درج می‌شود.
   ============================================================ */
.dg-delivery {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0faf4;
  border: 1px solid #cdeedd;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0 14px;
  direction: rtl;
}
.dg-delivery .dgd-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #cdeedd;
  border-radius: 50%;
}
.dg-delivery .dgd-icon svg {
  width: 20px;
  height: 20px;
  fill: #25a65b;
}
.dg-delivery .dgd-text {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  min-width: 0;
}
.dg-delivery .dgd-title {
  font-size: 13px;
  font-weight: 800;
  color: #1a7a45;
}
.dg-delivery .dgd-sub {
  font-size: 11px;
  color: #8b949e;
}

/* ============================================================
   ۶) جعبه «ویژگی‌ها» زیر جعبه تحویل (شبیه دیجی‌کالا)
   HTML توسط custom.js (بخش ۷) درج می‌شود؛ ۳ ویژگی اول از تب مشخصات.
   ============================================================ */
.dg-features {
  background: #ffffff;
  border: 1px solid #e8ece9;
  border-radius: 10px;
  padding: 10px 12px 6px;
  margin: 0 0 14px;
  direction: rtl;
}
.dg-features .dgf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #edf0ee;
  margin-bottom: 9px;
}
.dg-features .dgf-title {
  font-size: 13px;
  font-weight: 800;
  color: #33453b;
}
/* طرح C: نوار یک‌تکه ۳ ستونه — نام بالا (خاکستری)، مقدار زیرش (سبز درشت) */
.dg-features .dgf-strip {
  display: flex;
  background: #f7f8f9;
  border-radius: 8px;
  overflow: hidden;
}
.dg-features .dgf-cell {
  flex: 1 1 auto;          /* پهنای ستون خودکار، متناسب با طول متن */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 9px 10px 8px;
  border-left: 1px solid #e3e7e4;
  transition: background .15s ease;
}
.dg-features .dgf-cell:last-child {
  border-left: none;
}
.dg-features .dgf-cell:hover {
  background: #f0faf4;
}
.dg-features .dgf-n {
  display: block;
  font-size: 8.5px;
  color: #8b949e;
  font-weight: 700;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dg-features .dgf-v {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #0f5c2d;
  line-height: 1.8;
  white-space: normal;      /* متن بلند کامل دیده شود — به خط بعدی می‌رود */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.dg-features .dgf-more {
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 800;
  color: #0f5c2d;
  background: #eaf9f1;
  border: 1px solid #9fd4b4;
  border-radius: 20px;
  padding: 3px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.dg-features .dgf-more:hover {
  background: #25a65b;
  color: #ffffff;
}

/* ============================================================
   ۷) نوار امتیاز دیجی‌کالایی زیر عنوان محصول
   ⭐ 4.8 │ 5 دیدگاه │ 1 پرسش
   HTML توسط custom.js (بخش ۸) ساخته می‌شود.
   ============================================================ */
/* ترتیب از راست به چپ: ⭐ امتیاز │ دیدگاه │ پرسش
   (ماژول امتیاز direction:ltr دارد — اینجا اجباری RTL می‌کنیم) */
#product_review_block_extra .ws_stars_wrapp,
#product_review_block_extra .star_content,
#dg-rating-wrap {
  direction: rtl !important;
}
#product_review_block_extra .star_content {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
}
/* یکدستی اندازه: امتیاز هم‌اندازه لینک‌های دیدگاه/پرسش */
#product_review_block_extra .star_content a.scroll_review {
  font-size: 13px !important;
}
#product_review_block_extra .star_content a.scroll_review strong {
  font-size: 13px !important;
  font-weight: 800;
}
#product_review_block_extra .star_content a.scroll_review i {
  font-size: 13px !important;
  line-height: 1;
}
#dg-rating-wrap {
  display: inline-flex;
  align-items: center;
}
#product_review_block_extra .dg-count-link {
  color: inherit;
  font-size: 13px;
  text-decoration: none;
  border-right: 1px solid #d5ddd8;
  padding: 0 10px;
  margin-right: 10px;
  transition: color .15s ease;
}
#product_review_block_extra .dg-count-link strong {
  font-weight: 800;
  color: #33453b;
}
#product_review_block_extra .dg-count-link:hover {
  color: #1a7a45;
  text-decoration: underline;
}
#product_review_block_extra .dg-count-link:hover strong {
  color: #1a7a45;
}

/* ============================================================
   ۸) درصد خرید هر ترکیب (از فروش واقعی — dg-variant-stats.php)
   مخفی‌کردن خط «٪۱۰۰ از خریداران توصیه کرده‌اند» و نمایش
   چیپ «۳۵٪ خریداران» داخل هر کارت ترکیب.
   ============================================================ */

/* خط «٪۱۰۰ توصیه کرده‌اند» حذف می‌شود (جایش درصد واقعی هر ترکیب است) */
#product_review_block_extra .review_count_extra {
  display: none !important;
}

/* چیپ درصد داخل کارت ترکیب — دسکتاپ: خط دوم، زیر قیمت (سمت چپ) */
.product-variants .product-variants-item .input-container .vstat {
  order: 5;
  flex: 0 0 auto;
  margin: 4px auto 0 0;   /* margin-right:auto → می‌رود انتهای چپ خط دوم */
  font-size: 9.5px;
  font-weight: 700;
  color: #55665c;
  background: #e8f1ec;
  border-radius: 10px;
  padding: 1px 7px;
  pointer-events: none;
  white-space: nowrap;
}
/* روی کارت انتخاب‌شده پررنگ‌تر */
.product-variants .product-variants-item .input-container:has(.input-radio:checked) .vstat {
  background: #c9ead8;
  color: #0f5c2d;
}

/* ============================================================
   ۹) جعبه بازشونده «روش‌ها و هزینه‌های ارسال» (مثل دیجی‌کالا)
   HTML توسط custom.js (بخش ۱۱) ساخته می‌شود؛
   قیمت‌ها زنده از حامل‌های پرستاشاپ (dg-shipping-info.php).
   ============================================================ */
.dg-shipping {
  background: #ffffff;
  border: 1px solid #e8ece9;
  border-radius: 10px;
  margin: 12px 0 8px;   /* زیر دکمه خرید، داخل کادر خرید */
  direction: rtl;
  overflow: hidden;
}
.dg-shipping .dgs-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}
.dg-shipping .dgs-head:hover {
  background: #fafbfa;
}
.dg-shipping .dgs-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 30px !important;
  height: 30px !important;
  align-items: center;
  justify-content: center;
  background: #f0faf4;
  border-radius: 50%;
  overflow: hidden;          /* آیکون بزرگ‌تر نشود بیرون بزند */
}
.dg-shipping .dgs-icon svg {
  width: 17px !important;
  height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
  fill: #25a65b;
}
.dg-shipping .dgs-title {
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  color: #33453b;
}
.dg-shipping .dgs-min {
  font-size: 10.5px;
  color: #85938a;
  white-space: nowrap;
}
.dg-shipping .dgs-chevron {
  flex: 0 0 auto;
  font-size: 14px;
  color: #85938a;
  transition: transform .2s ease;
}
.dg-shipping.open .dgs-chevron {
  transform: rotate(180deg);
}
.dg-shipping .dgs-body {
  display: none !important;      /* بسته در ابتدا — مثل دیجی‌کالا */
  padding: 0 12px 6px;
}
.dg-shipping.open .dgs-body {
  display: block !important;     /* با کلیک روی سربرگ باز می‌شود */
  animation: dgsFade .18s ease;
}
@keyframes dgsFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.dg-shipping .dgs-row {
  padding: 9px 0 8px;
  border-top: 1px dashed #e8ece9;
}
.dg-shipping .dgs-row:first-child {
  border-top: none;
}
.dg-shipping .dgs-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dg-shipping .dgs-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #33453b;
}
.dg-shipping .dgs-price {
  margin-right: auto;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  color: #1a7a45;
  background: #eaf6ef;
  border-radius: 8px;
  padding: 2px 9px;
  white-space: nowrap;
}
.dg-shipping .dgs-price.txt {
  font-size: 10px;
  font-weight: 700;
  color: #55665c;
  background: #f0f2f1;
  white-space: normal;
  line-height: 1.7;
  max-width: 60%;
  text-align: center;
}
.dg-shipping .dgs-price.free {
  color: #55665c;
  background: #f0f2f1;
}
.dg-shipping .dgs-desc {
  font-size: 10.5px;
  color: #85938a;
  line-height: 1.9;
  margin-top: 4px;
}
.dg-shipping .dgs-note {
  font-size: 9.5px;
  color: #a4b0a9;
  margin-top: 3px;
}

/* ============================================================
   ۱۰) نشان قیمت ۳۰ روزه بالای دکمه «افزودن به سبد خرید»
   سبز = بهترین قیمت ۳۰ روز گذشته | قرمز = بیشترین
   HTML توسط custom.js (بخش ۱۲) ساخته می‌شود (dg-price-history.php).
   ============================================================ */
.dg-price-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 8px;
  padding: 7px 10px;
  margin: 0 0 8px;
  line-height: 1.5;
}
.dg-price-badge.good {
  color: #0f5c2d;
  background: #e2f7ec;
  border: 1px solid #bfead3;
}
.dg-price-badge.bad {
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f6cdc8;
}

/* ============================================================
   ۱۱) باکس «فروشندگان این کالا» (مثل دیجی‌کالا)
   HTML توسط custom.js (بخش ۱۳) ساخته می‌شود.
   ============================================================ */

/* حذف متن «ارسال فوری در اولین روز کاری» از کادر خرید */
#product .tax-shipping-delivery-label {
  display: none !important;
}

.dg-sellers {
  background: #ffffff;
  border: 1px solid #e8ece9;
  border-radius: 10px;
  margin: 12px 0 10px;
  direction: rtl;
  overflow: hidden;
}
.dg-sellers .dgse-head {
  padding: 9px 12px 7px;
  font-size: 12.5px;
  font-weight: 800;
  color: #33453b;
  border-bottom: 1px solid #f0f3f1;
}
.dg-sellers .dgse-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f7f9f8;
  transition: background .15s ease;
}
/* حالت تک‌تامین‌کننده: نمایشی است، کلیک/هاور ندارد */
.dg-sellers.single .dgse-row {
  cursor: default;
}
.dg-sellers.single .dgse-row:hover {
  background: #ffffff;
}
.dg-sellers .dgse-row:last-child {
  border-bottom: none;
}
.dg-sellers .dgse-row:hover {
  background: #fafdfb;
}
.dg-sellers .dgse-row.on {
  background: #eaf9f1;
}
.dg-sellers .dgse-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #cfd8d2;
  flex: 0 0 auto;
  position: relative;
  transition: border-color .15s ease;
}
.dg-sellers .dgse-row.on .dgse-dot {
  border-color: #25a65b;
}
.dg-sellers .dgse-row.on .dgse-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #25a65b;
}
.dg-sellers .dgse-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
.dg-sellers .dgse-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #33453b;
}
.dg-sellers .dgse-row.on .dgse-name {
  color: #0f5c2d;
}
.dg-sellers .dgse-perf {
  font-size: 9.5px;
  color: #25a65b;
  font-weight: 700;
}
.dg-sellers .dgse-price.contact {
  font-size: 10px;
  font-weight: 700;
  color: #98a29b;
}
.dg-sellers .dgse-price {
  font-size: 12px;
  font-weight: 800;
  color: #232f3e;
  white-space: nowrap;
}
.dg-sellers .dgse-row.on .dgse-price {
  color: #1a7a45;
}

/* ============================================================
   ۱۲) انتخاب ترکیب در فرم «نظر/سوال» (ws_productreviews)
   HTML توسط custom.js (بخش ۱۴) درج می‌شود.
   ============================================================ */
.dg-rev-variant {
  margin-bottom: 10px;
}
.dg-rev-variant label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #33453b;
  margin-bottom: 4px;
}
.dg-rev-variant select {
  width: 100%;
  font-size: 12.5px;
  padding: 7px 10px;
  border: 1px solid #cfd8d2;
  border-radius: 8px;
  background: #ffffff;
  color: #33453b;
  outline: none;
}
.dg-rev-variant select:focus {
  border-color: #25a65b;
}
.dg-rev-variant .dg-rv-bought {
  display: inline-block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #0f5c2d;
  background: #e2f7ec;
  border-radius: 10px;
  padding: 2px 8px;
}

/* ستاره‌های معیار در فرم نظر — قابل کلیک */
#new_review_form .rating span[data-criterion-id],
.rating span[data-criterion-id] {
  cursor: pointer;
  font-size: 17px;
  padding: 0 1px;
}

/* چیپ ترکیب در نظرات منتشرشده */
.dg-combo-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #1a7a45;
  background: #eaf6ef;
  border: 1px solid #cdeedd;
  border-radius: 10px;
  padding: 1px 8px;
  margin-left: 4px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ============================================================
   ۱۳) مودال «آمار کارایی محصول» + نوار رضایت کارت + دکمه و مودال ثبت رای
   HTML توسط custom.js ساخته می‌شود.
   ============================================================ */
.c-blue   { color: #0058b5; }  .b-blue   { background: #3f8ef7; }
.c-green  { color: #0f5c2d; }  .b-green  { background: #25a65b; }
.c-purple { color: #6d28d9; }  .b-purple { background: #8b5cf6; }
.c-orange { color: #c2410c; }  .b-orange { background: #ff7a2f; }
.c-black  { color: #232f3e; }  .b-black  { background: #374151; }

/* مودال «آمار کارایی محصول از نظر خریداران» */
.dg-vote-panel.dgm-panel {
  max-width: 560px;
  position: relative;
  padding: 16px 16px 12px;
}
.dgm-close {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 20px;
  font-weight: 400;
  color: #8b949e;
  cursor: pointer;
  line-height: 1;
}
.dgm-close:hover {
  color: #232f3e;
}
.dgm-hint {
  font-size: 10px;
  color: #8b949e;
}
.dgm-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.dgm-chart-btn {
  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
  color: #0f5c2d;
  background: #eaf9f1;
  border: 1px solid #9fd4b4;
  border-radius: 20px;
  padding: 3px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.dgm-chart-btn:hover {
  background: #25a65b;
  color: #ffffff;
}
.dgm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.dgm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  font-weight: 700;
  color: #5a6b61;
}
.dgm-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.dgm-svg-wrap {
  position: relative;
}
.dgm-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}
.dgm-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  background: #232f3e;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 6px;
  padding: 4px 9px;
  white-space: nowrap;
  transform: translate(50%, -120%);
  transition: opacity .12s ease;
  z-index: 5;
}
.dgm-scroll {
  overflow-x: auto;
}
.dgm-table {
  width: 100%;
  border-collapse: collapse;
}
.dgm-table th,
.dgm-table td {
  padding: 5px 4px;
  text-align: center;
  vertical-align: middle;
}
.dgm-table thead th {
  font-size: 10px;
  font-weight: 800;
  color: #33453b;
  cursor: pointer;
  border-bottom: 1px solid #e5e9e2;
  padding-bottom: 7px;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.dgm-table thead th:hover {
  background: #f3f6f4;
}
.dgm-table thead th.dgm-hi {
  background: #eaf9f1;
  color: #0f5c2d;
}
.dgm-table tbody th.dgm-mname {
  font-size: 9px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.dgm-table td {
  min-width: 64px;
}
.dgm-table td.dgm-hi {
  background: #f7fcf9;
  border-radius: 6px;
}
.dgm-num {
  display: block;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 3px;
}
.dgm-bar {
  display: block;
  height: 4px;
  background: #eef1ef;
  border-radius: 4px;
  overflow: hidden;
}
.dgm-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width .5s ease;
}

/* بج «⭐ پیشنهادی» برای گران‌ترین گزینه گروه‌های غیر کیفیت */
.product-variants .product-variants-item .input-container .vbadge.vbadge-suggest {
  background: #1a7a45;
  color: #ffffff;
}

/* ردیف دکمه‌ها روی محصولات بدون ترکیب */
.dg-simple-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}
.dg-simple-actions #dg-vote-btn {
  border: 1px solid #c7bffd;
  background: #f3efff;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 800;
  font-family: inherit;
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.dg-simple-actions #dg-vote-btn:hover {
  background: #6d28d9;
  color: #ffffff;
}
.dg-simple-actions #dg-stats-btn {
  border: 1px solid #9fd4b4;
  background: #eaf9f1;
  color: #0f5c2d;
  font-size: 10px;
  font-weight: 800;
  font-family: inherit;
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.dg-simple-actions #dg-stats-btn:hover {
  background: #25a65b;
  color: #ffffff;
}

/* زیرعنوان گروه‌ها در جدول آمار (وقتی چند گروه ترکیب وجود دارد) */
.dgm-table tr.dgm-group-row th {
  font-size: 9.5px;
  font-weight: 800;
  color: #5a6b61;
  text-align: right;
  background: #fbfcfb;
  border-bottom: 1px dashed #eef1ef;
  padding: 6px 4px 4px;
  cursor: default;
}

/* دکمه «آمار کارایی محصول» کنار دکمه رای */
.product-variants .product-variants-item > .control-label #dg-stats-btn {
  border: 1px solid #9fd4b4;
  background: #eaf9f1;
  color: #0f5c2d;
  font-size: 9px;
  font-weight: 800;
  font-family: inherit;
  border-radius: 20px;
  padding: 2px 10px;
  cursor: pointer;
  transition: all .15s ease;
}
.product-variants .product-variants-item > .control-label #dg-stats-btn:hover {
  background: #25a65b;
  color: #ffffff;
}

/* نوار «رضایت» روی کارت ترکیب (طرح B) */
.product-variants .product-variants-item .input-container .vsat-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  pointer-events: none;
}
.product-variants .product-variants-item .input-container .vsat-t {
  flex: 0 0 auto;
  font-size: 8.5px;
  font-weight: 700;
  color: #0f5c2d;
}
.product-variants .product-variants-item .input-container .vsat-b {
  flex: 1;
  height: 4px;
  background: #d3e6da;
  border-radius: 4px;
  overflow: hidden;
}
.product-variants .product-variants-item .input-container .vsat-b i {
  display: block;
  height: 100%;
  width: 0;
  background: #25a65b;
  border-radius: 4px;
  transition: width .6s cubic-bezier(.25, .8, .35, 1);
}
.product-variants .product-variants-item .input-container .vsat-p {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 800;
  color: #0f5c2d;
}
.product-variants .product-variants-item .input-container:has(.input-radio:checked) .vsat-b {
  background: #c3ead2;
}

/* دکمه «ثبت رای کارایی محصول» کنار عنوان کیفیت (جای شمارنده) */
.product-variants .product-variants-item > .control-label #dg-vote-btn {
  border: 1px solid #c7bffd;
  background: #f3efff;
  color: #6d28d9;
  font-size: 9px;
  font-weight: 800;
  font-family: inherit;
  border-radius: 20px;
  padding: 2px 10px;
  cursor: pointer;
  transition: all .15s ease;
}
.product-variants .product-variants-item > .control-label #dg-vote-btn:hover {
  background: #6d28d9;
  color: #ffffff;
}

/* مودال رای */
.dg-vote-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(20, 30, 25, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  direction: rtl;
}
.dg-vote-panel {
  background: #ffffff;
  border-radius: 14px;
  width: 100%;
  max-width: 380px;
  padding: 18px 18px 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.dg-vote-panel h3 {
  font-size: 14px;
  font-weight: 800;
  color: #33453b;
  margin-bottom: 2px;
}
.dg-vote-panel .dgv-sub {
  font-size: 10.5px;
  color: #8b949e;
  margin-bottom: 12px;
  line-height: 1.9;
}
.dg-vote-panel .dgv-row {
  padding: 7px 0;
  border-top: 1px dashed #edf0ee;
}
.dg-vote-panel .dgv-row:first-of-type {
  border-top: none;
}
.dg-vote-panel .dgv-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #33453b;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}
.dg-vote-panel .dgv-pct {
  color: #6d28d9;
  font-weight: 800;
}
.dg-vote-panel .dgv-stars {
  display: flex;
  gap: 3px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.dg-vote-panel .dgv-stars b {
  width: 25px;
  height: 25px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #d5dbd8;
  transition: color .1s ease, transform .1s ease;
}
.dg-vote-panel .dgv-stars b.on {
  color: #f9a825;
}
.dg-vote-panel .dgv-stars b:hover {
  transform: scale(1.15);
}
.dg-vote-panel .dgv-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.dg-vote-panel .dgv-submit {
  flex: 1;
  background: #25a65b;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 12.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.dg-vote-panel .dgv-cancel {
  background: none;
  border: 1px solid #cfd8d2;
  color: #5a6b61;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

/* پیام کوتاه (توست) */
.dg-toast {
  position: fixed;
  bottom: 18px;
  right: 50%;
  transform: translateX(50%);
  background: #0f5c2d;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  padding: 9px 18px;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 10001;
  pointer-events: none;
}
.dg-toast.show {
  opacity: 1;
}

/* موبایل: ویژگی‌ها و جدول آمار فشرده‌تر */
@media (max-width: 480px) {
  .dg-features .dgf-v {
    font-size: 10px;
    line-height: 1.7;
  }
  .dg-features .dgf-n {
    font-size: 8px;
  }
  .dg-features .dgf-cell {
    padding: 7px 5px 6px;
  }
  .dgm-panel {
    padding: 14px 10px 10px;
  }
  .dgm-table td {
    min-width: 56px;
  }
}

/* ============================================================
   ۱۴) «کالاهای مرتبط» به سبک دیجی‌کالا — کاروسل افقی
   ============================================================ */
.dg-related {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px 4px 10px;
  direction: rtl;
}
.dg-related .dk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px;
}
.dg-related .dk-title {
  font-size: 15px;
  font-weight: 800;
  color: #232f3e;
}
.dg-related .dk-nav {
  display: flex;
  gap: 8px;
  direction: ltr;   /* ‹ همیشه چپ، › همیشه راست — مستقل از قالب */
}
.dg-related .dk-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e0e6e2;
  background: #ffffff;
  color: #5a6b61;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.dg-related .dk-arrow:hover {
  border-color: #25a65b;
  color: #0f5c2d;
}
.dg-related .dk-arrow.off {
  opacity: .35;
  cursor: default;
}
.dg-related .dk-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 12px 6px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.dg-related .dk-track::-webkit-scrollbar {
  display: none;
}
.dg-related .dk-card {
  flex: 0 0 168px;
  background: #ffffff;
  border: 1px solid #e3e7e4;   /* کادر دور کارت — مثل دیجی‌کالا */
  border-radius: 8px;
  padding: 10px;
  text-decoration: none !important;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.dg-related .dk-card:hover {
  border-color: #25a65b;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
.dg-related .dk-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #f7f8f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.dg-related .dk-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dg-related .dk-name {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.8;
  color: #3f4e42;
  height: 41px;               /* دقیقاً ۲ خط — مثل دیجی‌کالا */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.dg-related .dk-rate {
  font-size: 10px;
  color: #b0b8b3;
  margin-bottom: auto;
}
.dg-related .dk-price-row {
  margin-top: 8px;
}
.dg-related .dk-price {
  font-size: 14.5px;
  font-weight: 800;
  color: #232f3e;
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.dg-related .dk-price small {
  font-size: 10px;
  font-weight: 600;
  color: #8b949e;
}
@media (max-width: 640px) {
  .dg-related .dk-card {
    flex: 0 0 148px;
  }
  .dg-related .dk-nav {
    display: none;   /* در موبایل: اسکرول با انگشت */
  }
}

/* ============================================================
   ۱۵) گالری تصاویر محصول به سبک دیجی‌کالا + لایت‌باکس
   ============================================================ */
.dkg-old-hidden { display: none !important; }

.dkg {
  display: flex;
  gap: 12px;
  direction: rtl;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
}
.dkg .dkg-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;        /* اسکرول افقی هرگز — فقط عمودی */
  max-height: 440px;         /* جایگزین می‌شود: هم‌قد تصویر اصلی (custom.js) */
  scrollbar-width: thin;
  scrollbar-color: #cfd8d2 transparent;
  flex: 0 0 74px;
  padding: 3px;
}
.dkg .dkg-thumbs::-webkit-scrollbar { width: 3px; }
.dkg .dkg-thumbs::-webkit-scrollbar-track { background: transparent; }
.dkg .dkg-thumbs::-webkit-scrollbar-thumb {
  background: #d7ded9;
  border-radius: 3px;
}
.dkg .dkg-thumbs::-webkit-scrollbar-thumb:hover { background: #b8c4bd; }
.dkg .dkg-thumb {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: #f7f8f9;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s ease;
}
.dkg .dkg-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dkg .dkg-thumb:hover { border-color: #bfe0cc; }
.dkg .dkg-thumb.on { border-color: #25a65b; }
.dkg .dkg-main { flex: 1; min-width: 0; position: relative; }
.dkg .dkg-main-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .15s ease;
}
.dkg .dkg-main-img:hover { box-shadow: 0 0 0 1px #e3e7e4; }
.dkg .dkg-main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .12s ease;
}
.dkg .dkg-main-img img.swap { opacity: 0; }
.dkg .dkg-zoom {
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgba(35, 47, 62, .55);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.dkg .dkg-main:hover .dkg-zoom { opacity: 1; }
.dkg .dkg-count {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(35, 47, 62, .65);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 11px;
  pointer-events: none;
}

/* لایت‌باکس تمام‌صفحه */
.dklb {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 18, .92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  direction: rtl;
  animation: dklbfade .18s ease;
}
@keyframes dklbfade { from { opacity: 0; } to { opacity: 1; } }
.dklb .dklb-top {
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: #ffffff;
}
.dklb .dklb-title { font-size: 13px; font-weight: 700; }
.dklb .dklb-counter { font-size: 12px; color: #cfd8d2; }
.dklb .dklb-close {
  background: rgba(255, 255, 255, .12);
  border: none;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: background .15s ease;
}
.dklb .dklb-close:hover { background: rgba(255, 255, 255, .25); }
.dklb .dklb-stage {
  max-width: min(82vw, 900px);
  max-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dklb .dklb-stage img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 6px;
}
/* فلش‌ها در نوار پایین، دو طرف بندانگشتی‌ها — بیرون از ناحیه عکس */
.dklb .dklb-bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  max-width: 92vw;
}
.dklb .dklb-arrow {
  position: static;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dklb .dklb-arrow:hover { background: #25a65b; }
.dklb .dklb-arrow.off { opacity: .3; cursor: default; }
.dklb .dklb-thumbs {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.dklb .dklb-thumbs::-webkit-scrollbar { display: none; }
.dklb .dklb-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}
.dklb .dklb-thumb img { width: 100%; height: 100%; object-fit: contain; }
.dklb .dklb-thumb.on { border-color: #25a65b; }

@media (max-width: 520px) {
  .dkg { flex-direction: column-reverse; }
  .dkg .dkg-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 0 auto;
  }
}

/* ============================================================
   ۱۶) کادر خرید در دسکتاپ — فاصله از ترکیبات + جمع‌وجورتر
   ============================================================ */
@media (min-width: 768px) {
  /* فاصله اصلی: خودِ فرم خرید از هر چیزی که بالایش است (ترکیبات/جعبه‌ها) */
  body#product #main form#add-to-cart-or-refresh,
  body#product #main #add-to-cart-or-refresh {
    margin-top: 16px !important;
  }
  /* اگر قالب فرم را داخل یک wrapper گذاشته باشد، آن هم فاصله بگیرد */
  body#product .product-information > .product-prices,
  body#product #main .product-quantities,
  body#product #main .product-add-to-cart {
    margin-top: 6px !important;
  }
  /* آخرین جعبه‌ی زیر ترکیبات هم کمی فاصله بگیرد */
  body#product #main .product-variants {
    margin-bottom: 4px !important;
  }
  /* جمع‌وجورتر شدن کادر و دکمه */
  #add-to-cart-or-refresh .product-add-to-cart {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  #add-to-cart-or-refresh .product-add-to-cart .add,
  #add-to-cart-or-refresh .product-add-to-cart .add-to-cart {
    min-height: 0 !important;
  }
  #add-to-cart-or-refresh .product-add-to-cart .add-to-cart {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

/* ============================================================
   ۱۷) حذف «مقایسه» از هدر — پشتیبان CSS (حذف اصلی با custom.js)
   ============================================================ */
.dg-hide { display: none !important; }
#header a[href*="/compare"], header a[href*="/compare"] { display: none !important; }

/* ============================================================
   ۱۸) اکشن‌های بالای تصویر محصول — آیکون بزرگ‌تر + کپی لینک
   ============================================================ */
.dg-act-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  min-width: 40px;
  min-height: 40px;
  padding: 7px 11px !important;
  font-size: 14px !important;
  font-weight: 700;
  border-radius: 9px;
  transition: all .15s ease;
}
.dg-act-btn:hover { background: #eef7f1; color: #1e8c4d; }
.dg-act-btn i, .dg-act-btn svg, .dg-act-btn img, .dg-act-btn .material-icons {
  width: 22px !important;
  height: 22px !important;
  font-size: 22px !important;
}
.dg-share-ic { font-size: 17px; line-height: 1; }
#dg-toast {
  position: fixed;
  bottom: 26px;
  right: 50%;
  transform: translateX(50%);
  background: #182b22;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  z-index: 10060;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(10, 25, 17, .35);
}
#dg-toast.on { opacity: 1; visibility: visible; }

/* ============================================================
   ۱۹) پنجره اشتراک‌گذاری (بدون نمایش آدرس — فقط دکمه کپی)
   ============================================================ */
.dgsm-ov {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 22, .55);
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dgsm-ov.on { display: flex; }
.dgsm {
  width: min(430px, 100%);
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 20px 18px;
  box-shadow: 0 22px 60px rgba(10, 25, 17, .35);
  text-align: center;
  direction: rtl;
}
.dgsm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dgsm-title { font-size: 16.5px; font-weight: 800; color: #22312a; }
.dgsm-x {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: #f2f5f3;
  color: #54625a; font-size: 17px; cursor: pointer; line-height: 1;
}
.dgsm-x:hover { background: #e6ebe8; color: #22312a; }
.dgsm-sub { font-size: 12.5px; color: #6b7a71; margin-bottom: 16px; }
.dgsm-copy {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px;
  background: #25a65b; color: #ffffff; border: none; border-radius: 10px;
  padding: 12px; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .15s ease;
}
.dgsm-copy:hover { background: #1e8c4d; }
.dgsm-copy.done { background: #e6f6ec; color: #1e8c4d; }

/* دکمه خودساخته اشتراک‌گذاری (کنار دوست داشتن) */
.dg-act-btn svg { flex: 0 0 auto; }

/* دکمه فقط-آیکون (اشتراک‌گذاری — مثل دیجی‌کالا) */
.dg-act-btn.dg-icon-only {
  width: 40px;
  min-width: 40px;
  padding: 7px 0 !important;
  justify-content: center;
}

/* قلب دوست داشتن: هاور قرمز (مثل دیجی‌کالا) */
.dg-act-btn.dg-wl-btn:hover { color: #ef4444 !important; background: #fdeeea !important; }

/* دکمه اشتراک‌گذاری: بدون بک‌گراند طوسی و کادر (تمیز، مثل دیجی‌کالا) */
#dg-share-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  cursor: pointer !important;   /* نشانگر دست مثل بقیه دکمه‌ها */
}
#dg-share-btn:hover { background: #eef7f1 !important; }
#dg-share-btn:active { transform: scale(.94); }

/* ============================================================
   ۲۰) مقایسه کالاها (سبک دیجی‌کالا) — نوار شناور + جدول مقایسه
   ============================================================ */
#dg-cmp-bar {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 10055;
  background: #ffffff;
  border: 1px solid #e5eae7;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15, 35, 25, .22);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  max-width: min(92vw, 720px);
  direction: rtl;
}
.dgcb-chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; max-width: calc(100% - 140px); scrollbar-width: thin; }
.dgcb-chip {
  display: inline-flex; align-items: center; gap: 7px; background: #f5f7f6;
  border: 1px solid #e8ece9; border-radius: 999px; padding: 4px 6px 4px 10px;
  font-size: 12px; font-weight: 700; white-space: nowrap; color: #33453b;
}
.dgcb-chip img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: #fff; }
.dgcb-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.dgcb-x { width: 22px; height: 22px; border: none; border-radius: 50%; background: transparent; color: #98a49d; font-size: 15px; cursor: pointer; line-height: 1; }
.dgcb-x:hover { background: #fdeeea; color: #ef4444; }
.dgcb-clear { border: none; background: transparent; cursor: pointer; font-size: 15px; }
.dgcb-clear:hover { transform: scale(1.12); }
.dgcb-go {
  background: #25a65b; color: #ffffff; border: none; border-radius: 9px; padding: 9px 16px;
  font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 10px rgba(37, 166, 91, .3);
  white-space: nowrap;
}
.dgcb-go:hover { background: #1e8c4d; }
@media (max-width: 767px) {
  #dg-cmp-bar { left: 10px; right: 10px; bottom: 88px; max-width: none; }
  .dgcb-name { max-width: 90px; }
}

#dg-cmp-view { position: fixed; inset: 0; background: #f7faf8; z-index: 10080; display: flex; flex-direction: column; direction: rtl; }
.dgcv-head { display: flex; align-items: center; gap: 12px; background: #ffffff; border-bottom: 1px solid #e5eae7; padding: 14px 20px; }
.dgcv-title { font-size: 16px; font-weight: 800; color: #22312a; }
.dgcv-x { margin-right: auto; width: 36px; height: 36px; border: none; border-radius: 50%; background: #f2f5f3; color: #54625a; font-size: 18px; cursor: pointer; line-height: 1; }
.dgcv-x:hover { background: #e6ebe8; color: #22312a; }
.dgcv-body { flex: 1; overflow: auto; padding: 18px; }
.dgcv-loading { text-align: center; padding: 60px 0; color: #6b7a71; font-size: 14px; }
.dgcv-table { border-collapse: collapse; background: #ffffff; border: 1px solid #e8ece9; min-width: 640px; width: 100%; }
.dgcv-table th, .dgcv-table td { border-bottom: 1px solid #e4eae7; padding: 10px 12px; font-size: 12.5px; vertical-align: top; text-align: right; color: #33453b; }
.dgcv-attr { position: sticky; right: 0; background: #fafcfb; font-weight: 800; color: #33453b; min-width: 130px; box-shadow: -2px 0 0 #f0f3f1; }
.dgcv-pcol { min-width: 200px; text-align: center; }
.dgcv-del { position: absolute; top: 8px; left: 8px; border: none; background: #fdeeea; color: #ef4444; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; z-index: 2; }
.dgcv-del:hover { background: #ef4444; color: #ffffff; }
.dgcv-img { width: 84px; height: 84px; object-fit: contain; margin: 6px auto; display: flex; align-items: center; justify-content: center; }
.dgcv-noimg { background: #f5f7f6; border-radius: 10px; font-size: 30px; }
.dgcv-name { font-weight: 800; font-size: 13px; margin-top: 4px; }
.dgcv-price { color: #1e8c4d; font-weight: 800; margin-top: 4px; }
.dgcv-table tr.dgcv-diff .dgcv-attr { background: #fffbe8; }
.dgcv-diffdot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #f5b40e; color: #ffffff; font-size: 11px; font-weight: 800;
  margin-right: 6px; vertical-align: middle;
}
body.dgcv-lock { overflow: hidden; }

/* رنگ متمایز هر کالا در مقایسه (سبز/آبی/نارنجی/بنفش) */
.dgcv-pcol { position: relative; }
.dgcv-idx {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  color: #ffffff; font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dgcb-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* کالا ۱ — سبز */
.dgcv-table thead td.dgcv-c0 { background: #eef7f1; border-top: 4px solid #25a65b; }
.dgcv-table thead td.dgcv-c0 .dgcv-name { color: #1e8c4d; }
.dgcv-table tbody td:nth-child(2) { border-left: 4px solid #25a65b; background: #f0faf4; }
.dgcv-c0 .dgcv-idx, .dgcb-c0 .dgcb-dot { background: #25a65b; }

/* کالا ۲ — آبی */
.dgcv-table thead td.dgcv-c1 { background: #e9f2fb; border-top: 4px solid #2f7fd3; }
.dgcv-table thead td.dgcv-c1 .dgcv-name { color: #2268a8; }
.dgcv-table tbody td:nth-child(3) { border-left: 4px solid #2f7fd3; background: #eff6fc; }
.dgcv-c1 .dgcv-idx, .dgcb-c1 .dgcb-dot { background: #2f7fd3; }

/* کالا ۳ — نارنجی */
.dgcv-table thead td.dgcv-c2 { background: #fdf1e3; border-top: 4px solid #e8862e; }
.dgcv-table thead td.dgcv-c2 .dgcv-name { color: #b35f13; }
.dgcv-table tbody td:nth-child(4) { border-left: 4px solid #e8862e; background: #fdf4ea; }
.dgcv-c2 .dgcv-idx, .dgcb-c2 .dgcb-dot { background: #e8862e; }

/* کالا ۴ — بنفش */
.dgcv-table thead td.dgcv-c3 { background: #f2edfa; border-top: 4px solid #8a5fd6; }
.dgcv-table thead td.dgcv-c3 .dgcv-name { color: #6b46b8; }
.dgcv-table tbody td:nth-child(5) { border-left: 4px solid #8a5fd6; background: #f6f2fc; }
.dgcv-c3 .dgcv-idx, .dgcb-c3 .dgcb-dot { background: #8a5fd6; }

/* ============================================================
   ۲۱) علاقه‌مندی‌ها (دوست داشتن) — مثل دیجی‌کالا
   ============================================================ */
.dg-wl-btn.dg-on { color: #ef4444 !important; }
.dg-wl-btn.dg-on svg path { fill: #ef4444; stroke: #ef4444; }
.dg-wl-btn svg { transition: transform .2s ease; }
.dg-wl-btn.dg-on svg { animation: dgwl-pop .4s ease; }
@keyframes dgwl-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* دکمه شناور علاقه‌مندی‌ها (پایین چپ) */
#dg-wl-fab {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 10058;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #ef4444;
  box-shadow: 0 10px 28px rgba(15, 35, 25, .25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#dg-wl-fab:hover { background: #fff7f5; }
#dg-wl-fab svg { width: 24px; height: 24px; }
#dg-wl-fab .dgwl-badge {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px;
  border-radius: 999px; background: #ef4444; color: #ffffff; font-size: 10.5px;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid #ffffff; padding: 0 4px;
}
@media (max-width: 767px) {
  #dg-wl-fab { bottom: 96px; left: 12px; width: 46px; height: 46px; }
}

/* پنل لیست علاقه‌مندی‌ها */
.dgwl-ov { position: fixed; inset: 0; background: rgba(15, 30, 22, .35); z-index: 10069; }
#dg-wl-panel {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(360px, 92vw);
  background: #ffffff; z-index: 10070; box-shadow: 0 0 40px rgba(10, 25, 17, .3);
  display: flex; flex-direction: column; direction: rtl; animation: dgwl-in .25s ease;
}
@keyframes dgwl-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.dgwl-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #eef1ef; }
.dgwl-title { font-size: 15px; font-weight: 800; color: #22312a; }
.dgwl-x { margin-right: auto; width: 34px; height: 34px; border: none; border-radius: 50%; background: #f2f5f3; color: #54625a; font-size: 17px; cursor: pointer; line-height: 1; }
.dgwl-x:hover { background: #e6ebe8; color: #22312a; }
.dgwl-list { flex: 1; overflow-y: auto; padding: 10px; }
.dgwl-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #f0f3f1; border-radius: 12px; margin-bottom: 8px; background: #ffffff; }
.dgwl-item img { width: 52px; height: 52px; border-radius: 8px; object-fit: contain; background: #f8faf9; }
.dgwl-noimg { width: 52px; height: 52px; border-radius: 8px; background: #f8faf9; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.dgwl-name { flex: 1; font-size: 12.5px; font-weight: 700; color: #33453b; text-decoration: none; }
.dgwl-name:hover { color: #1e8c4d; }
.dgwl-rm { border: none; background: #fdeeea; color: #ef4444; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; flex: 0 0 auto; }
.dgwl-rm:hover { background: #ef4444; color: #ffffff; }
.dgwl-empty { text-align: center; color: #98a49d; font-size: 12.5px; padding: 40px 10px; }

/* پنجره «برای ذخیره علاقه‌مندی‌ها وارد شوید» */
.dgwll-ov { position: fixed; inset: 0; background: rgba(15, 30, 22, .5); z-index: 10078; }
.dgwll {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(360px, 92vw); background: #ffffff; border-radius: 16px; padding: 24px 20px 18px;
  text-align: center; z-index: 10079; box-shadow: 0 22px 60px rgba(10, 25, 17, .35);
  direction: rtl; animation: dgwll-pop .22s ease;
}
@keyframes dgwll-pop { from { transform: translate(-50%, -46%) scale(.96); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.dgwll-ic { font-size: 34px; margin-bottom: 8px; }
.dgwll-t { font-size: 15.5px; font-weight: 800; color: #22312a; margin-bottom: 8px; }
.dgwll-s { font-size: 12px; color: #6b7a71; line-height: 1.9; margin-bottom: 16px; }
.dgwll-go {
  display: block; background: #25a65b; color: #ffffff; border-radius: 10px;
  padding: 12px; font-size: 14px; font-weight: 800; text-decoration: none; margin-bottom: 8px;
}
.dgwll-go:hover { background: #1e8c4d; color: #ffffff; }
.dgwll-x { border: none; background: transparent; color: #98a49d; font-size: 12.5px; cursor: pointer; padding: 6px 14px; }
.dgwll-x:hover { color: #54625a; }

/* ============================================================
   ۲۲) نوار اکشن خودساخته + زنگ اطلاع‌رسانی + نمودار قیمت
   ============================================================ */
#dg-actions { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; direction: rtl; }

.dg-pa-btn.dg-on { color: #1e8c4d !important; background: #eef7f1 !important; }
.dg-pa-btn.dg-on svg { animation: dgpa-ring .5s ease; }
@keyframes dgpa-ring {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(14deg); }
  50% { transform: rotate(-12deg); }
  75% { transform: rotate(8deg); }
}

#dg-price-chart {
  background: #ffffff;
  border: 1px solid #e8ece9;
  border-radius: 10px;
  padding: 10px 12px 8px;
  margin: 0 0 8px;
  direction: rtl;
}
.dgc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dgc-title { font-size: 12px; font-weight: 800; color: #33453b; }
.dgc-range { font-size: 10.5px; color: #6b7a71; }
.dgc-range b { font-weight: 800; }
.dgc-range b.mn { color: #1e8c4d; }
.dgc-range b.mx { color: #ef4444; }
#dg-price-chart svg { width: 100%; height: 84px; display: block; }
.dgc-dates { display: flex; justify-content: space-between; font-size: 10px; color: #98a49d; margin-top: 3px; }

/* ============================================================
   نوار اکشن: بدون بک‌گراند و کادر (مثل دیجی‌کالا) + قلب دیجی‌کالایی
   ============================================================ */
#dg-actions .dg-act-btn,
#dg-share-btn,
.dg-pa-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#dg-actions .dg-act-btn:hover { background: #eef7f1 !important; }
#dg-actions .dg-act-btn:active { transform: scale(.94); }

/* قلب — هاور قرمز (مثل دیجی‌کالا) */
.dg-wl-btn:hover { background: #fdeeea !important; color: #ef4444 !important; }

/* قلب — حالت لایک‌شده: قرمز پر (چه کلاس خود ماژول چه کلاس ما) */
.dg-wl-btn.dg-on, .dg-wl-btn.active, .dg-wl-btn.on, .dg-wl-btn[aria-pressed="true"] {
  color: #ef4444 !important;
}
.dg-wl-btn.dg-on svg path, .dg-wl-btn.active svg path,
.dg-wl-btn.on svg path, .dg-wl-btn[aria-pressed="true"] svg path {
  fill: #ef4444;
  stroke: #ef4444;
}
.dg-wl-btn.dg-on svg { animation: dgwl-pop .4s ease; }

/* آیتم «علاقه‌مندی‌ها» در منوی هدر — استایل مستقل، بدون کپی از قالب */
#dg-wl-menu {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer !important;
  color: inherit !important;
  font: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  vertical-align: middle;
}
#dg-wl-menu svg { width: 1em; height: 1em; color: #ef4444; flex: 0 0 auto; }
#dg-wl-menu:hover svg path { fill: #ef4444; stroke: #ef4444; }
/* صفحه‌بندی بنر بزرگ اصلی */
#st_swiper_1 > .swiper-pagination {
    bottom: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    direction: ltr;
}

/* حذف تمام لایه‌های اضافه داخل هر نشانگر */
#st_swiper_1 > .swiper-pagination
.swiper-pagination-bullet > span,
#st_swiper_1 > .swiper-pagination
.swiper-pagination-bullet::before,
#st_swiper_1 > .swiper-pagination
.swiper-pagination-bullet::after {
    content: none !important;
    display: none !important;
}

/* نقاط معمولی */
#st_swiper_1 > .swiper-pagination
.swiper-pagination-bullet {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    margin: 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    opacity: 1 !important;
    transform: none !important;
    box-sizing: border-box;
    transition: width 0.25s ease, background 0.25s ease !important;
}

/* نشانگر فعال کشیده، مشابه دیجی‌کالا */
#st_swiper_1 > .swiper-pagination
.swiper-pagination-bullet-active {
    width: 24px !important;
    min-width: 24px !important;
    background: #ffffff !important;
    border-radius: 999px !important;
}

/* موبایل */
@media (max-width: 767px) {
    #st_swiper_1 > .swiper-pagination {
        bottom: 8px !important;
    }

    #st_swiper_1 > .swiper-pagination
    .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        margin: 0 3px !important;
    }

    #st_swiper_1 > .swiper-pagination
    .swiper-pagination-bullet-active {
        width: 18px !important;
        min-width: 18px !important;
    }
}