@charset "UTF-8";
/* ==========================================================================
   BajetKala — Unified SCSS Design Tokens
   ========================================================================== */
:root {
  --bk-primary: #0F4C81;
  --bk-primary-hover: #0A3A63;
  --bk-primary-dark: #0B3D68;
  --bk-secondary: #FF8A00;
  --bk-secondary-hover: #E97A00;
  --bk-accent: #FF8A00;
  --bk-success: #2E7D32;
  --bk-warning: #F9A825;
  --bk-danger: #D32F2F;
  --bk-bg: #F8F9FA;
  --bk-surface: #FFFFFF;
  --bk-white: #FFFFFF;
  --bk-border: #E5E7EB;
  --bk-border-soft: #EEF1F4;
  --bk-text-primary: #222222;
  --bk-text-secondary: #666666;
  --bk-text: #172033;
  --bk-text-soft: #475467;
  --bk-muted: #667085;
  --bk-disabled: #BDBDBD;
  --bk-surface-blue: #F4F8FC;
  --bk-space-xs: 8px;
  --bk-space-sm: 16px;
  --bk-space-md: 24px;
  --bk-space-lg: 32px;
  --bk-space-xl: 48px;
  --bk-space-xxl: 64px;
  --bk-space-section: 96px;
  --bk-radius-button: 12px;
  --bk-radius-input: 12px;
  --bk-radius-card: 16px;
  --bk-radius-modal: 20px;
  --bk-radius-badge: 999px;
  --bk-radius-sm: 8px;
  --bk-radius-md: 10px;
  --bk-radius-lg: 14px;
  --bk-font-fa: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
  --bk-font-en: 'Inter', sans-serif;
  --bk-fs-h2: 36px;
  --bk-fs-h4: 24px;
  --bk-fs-h5: 20px;
  --bk-fs-body: 16px;
  --bk-fs-small: 14px;
  --bk-fs-caption: 12px;
  --bk-line-height: 1.5;
  --bk-shadow-1: 0 2px 8px rgba(0, 0, 0, .08);
  --bk-shadow-2: 0 6px 24px rgba(0, 0, 0, .10);
  --bk-shadow-3: 0 12px 40px rgba(0, 0, 0, .12);
  --bk-shadow-soft: 0 4px 18px rgba(16,24,40,.05);
  --bk-motion-hover: 150ms;
  --bk-motion-card: 180ms;
  --bk-motion-fade: 200ms;
  --bk-container-desktop: 1280px;
  --bk-container-large: 1320px;
  --bk-page-margin-desktop: 32px;
  --bk-page-margin-tablet: 24px;
  --bk-page-margin-mobile: 16px;
  --bk-header-height: 80px;
  --bk-logo-width: 160px;
  --bk-search-width: 600px;
  --bk-header-icon-size: 24px;
  --bk-widenav-height: 56px;
  --bk-search-radius: 8px;
  /* Existing Shop system intentionally kept as a separate token namespace. */
  /* ==========================================================================
     یکپارچه‌سازی توکن‌ها (۲۰۲۶) — هرجا یک --bk-shop-* همان مفهوم یکی از
     توکن‌های بالا را داشت، الان مستقیماً از همان‌جا مقدار می‌گیرد (var(--bk-X))
     به‌جای یک عدد hex جداگانه — یعنی برای رنگ/radius برند فقط یک‌جا برای
     ویرایش وجود دارد. چند توکن که واقعاً مخصوص چیدمان/فروشگاه هستند (بدون
     معادل در سایت) مقدار مستقل خودشان را نگه داشته‌اند؛ کنار هرکدام علتش
     نوشته شده.

     نکته: چندتای این‌ها قبلاً مقداری داشتند که با معادل --bk-* اش کمی فرق
     می‌کرد (چند رقم hex، ۱ الی ۲px در radius). این یکپارچه‌سازی همیشه مقدار
     --bk-* (سایت) را به‌عنوان مرجع انتخاب کرده، پس همان چند مورد کمی تغییر
     می‌کنند؛ فهرست دقیق در README (changelog) آمده. جایی که این تفاوت واقعاً
     عمدی و کارکردی بود (مثل سایه آبی‌رنگ کارت‌های فروشگاه)، دست نخورده.
     ========================================================================== */
  --bk-shop-primary: var(--bk-primary); /* بدون تغییر (هردو #0F4C81) */
  --bk-shop-primary-dark: var(--bk-primary-dark); /* بود #0B3B63 → می‌شود #0B3D68 */
  --bk-shop-accent: var(--bk-accent); /* بدون تغییر (هردو #FF8A00) */
  --bk-shop-text: var(--bk-text); /* بود #1F2937 → می‌شود #172033 */
  --bk-shop-text-secondary: var(--bk-text-soft); /* بود #475569 → می‌شود #475467 (تقریباً یکسان) */
  --bk-shop-text-muted: var(--bk-muted); /* بود #64748B → می‌شود #667085 */
  --bk-shop-text-light: #94A3B8; /* مخصوص فروشگاه: یک پله روشن‌تر از muted؛ در سایت معادل ندارد */
  --bk-shop-page-bg: #F5F7FA; /* مخصوص فروشگاه: چیدمان صفحه */
  --bk-shop-surface: var(--bk-surface); /* بدون تغییر (هردو #FFFFFF) */
  --bk-shop-border: var(--bk-border); /* بود #E6EBF0 → می‌شود #E5E7EB */
  --bk-shop-border-hover: #D7E1EA; /* مخصوص فروشگاه: حالت hover تیره‌تر بوردر؛ در سایت معادل ندارد */
  --bk-shop-danger: var(--bk-danger); /* بود #D92D20 → می‌شود #D32F2F */
  --bk-shop-container: 1200px; /* مخصوص فروشگاه: چیدمان */
  --bk-shop-page-padding: 20px; /* مخصوص فروشگاه: چیدمان */
  --bk-shop-grid-gap: 16px; /* مخصوص فروشگاه: چیدمان */
  --bk-shop-card-gap-y: 18px; /* مخصوص فروشگاه: چیدمان */
  --bk-shop-section-gap: 20px; /* مخصوص فروشگاه: چیدمان */
  --bk-shop-radius-sm: var(--bk-radius-sm); /* بود 9px → می‌شود 8px */
  --bk-shop-radius-md: var(--bk-radius-md); /* بود 12px → می‌شود 10px (فعلاً هیچ‌جا استفاده نمی‌شد) */
  --bk-shop-radius-lg: var(--bk-radius-lg); /* بدون تغییر (هردو 14px) */
  --bk-shop-shadow-card: 0 2px 8px rgba(15, 76, 129, 0.04); /* مخصوص فروشگاه: سایه آبی‌رنگ برند، عمدی */
  --bk-shop-shadow-hover: 0 8px 20px rgba(15, 76, 129, 0.08); /* مخصوص فروشگاه: همان بالا */
  --bk-shop-shadow-control: 0 2px 7px rgba(15, 76, 129, 0.035); /* مخصوص فروشگاه: همان بالا */
  --bk-shop-transition: 180ms cubic-bezier(0.2, 0.7, 0.2, 1); /* مخصوص فروشگاه: easing سفارشی */
}

@media (max-width: 849px) {
  :root {
    --bk-header-height: 64px;
    --bk-shop-page-padding: 10px;
    --bk-shop-grid-gap: 8px;
    --bk-shop-card-gap-y: 9px;
  }
}
@media (max-width: 480px) {
  :root {
    --bk-shop-page-padding: 8px;
    --bk-shop-grid-gap: 6px;
    --bk-shop-card-gap-y: 8px;
  }
}
@media (max-width: 360px) {
  :root {
    --bk-shop-page-padding: 7px;
    --bk-shop-grid-gap: 5px;
  }
}
@media (min-width: 850px) and (max-width: 1199px) {
  :root {
    --bk-shop-page-padding: 16px;
    --bk-shop-grid-gap: 14px;
  }
}
/* ============================================================================
   BajetKala — Related Products / Single Product
   -----------------------------------------------------------------------------
   هدف این فایل فقط Related Products صفحه محصول است.

   HTML واقعی Flatsome:

   .product-small.col
   └── .col-inner
       ├── .badge-container
       └── .product-small.box
           ├── .box-image
           │   ├── .image-fade_in_back > a > img
           │   └── .image-tools
           └── .box-text.box-text-products

   اصول:
   - .product-small.col فقط ستون/layout است.
   - .col-inner فقط یک سطح کارت بصری است.
   - .product-small.box فقط content shell است و کارت دوم نمی‌سازد.
   - همه selectorها scoped هستند تا Shop از این فایل تأثیر نگیرد.
   ============================================================================ */
/* --------------------------------------------------------------------------
   01. SECTION
   -------------------------------------------------------------------------- */
#main .related.related-products-wrapper.product-section {
  direction: rtl;
  width: 100%;
  margin: 36px 0 0;
  text-align: right;
}
#main .related.related-products-wrapper.product-section > h2 {
  margin: 0 0 20px !important;
  padding: 0 !important;
  color: #14264c !important;
  font-family: inherit !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  text-align: right !important;
}

/* --------------------------------------------------------------------------
   02. PRODUCT ROW / COLUMNS
   -------------------------------------------------------------------------- */
#main .related.related-products-wrapper.product-section > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  margin-inline: -8px !important;
}

#main .related.related-products-wrapper.product-section .product-small.col {
  display: flex !important;
  flex: 0 0 25% !important;
  width: 25% !important;
  max-width: 25% !important;
  align-self: stretch !important;
  margin: 0 0 16px !important;
  padding-inline: 8px !important;
  /* جلوگیری از override شدن transform / shadow عمومی product-card */
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#main .related.related-products-wrapper.product-section .product-small.col:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   03. SINGLE VISUAL CARD = .col-inner
   -------------------------------------------------------------------------- */
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--bk-shop-border, #e6ebf0) !important;
  border-radius: 16px !important; /* سند ۵.۷ */
  box-shadow: var(--bk-shop-shadow-card, 0 2px 8px rgba(15, 76, 129, 0.04)) !important;
  overflow: hidden !important;
  transform: none !important;
  transition: transform var(--bk-shop-transition, 180ms cubic-bezier(0.2, 0.7, 0.2, 1)), border-color var(--bk-shop-transition, 180ms cubic-bezier(0.2, 0.7, 0.2, 1)), box-shadow var(--bk-shop-transition, 180ms cubic-bezier(0.2, 0.7, 0.2, 1)) !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner {
  min-height: 430px !important; /* سند ۵.۷: حداقل‌ارتفاع */
}

#main .related.related-products-wrapper.product-section .product-small.col:hover > .col-inner {
  transform: translateY(-4px) !important; /* سند ۵.۷ */
  border-color: var(--bk-shop-border-hover, #d7e1ea) !important;
  box-shadow: var(--bk-shop-shadow-hover, 0 8px 20px rgba(15, 76, 129, 0.08)) !important;
}

/* --------------------------------------------------------------------------
   04. INNER .product-small.box — NO SECOND CARD
   -------------------------------------------------------------------------- */
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* همان منطق «کارت روی .col-inner، محتوا خنثی» که در components/_product-card.scss
   برای فروشگاه هست، اینجا هم باید برقرار بماند */
#main .related.related-products-wrapper.product-section .product-small.box {
  padding: 0 !important;
}

#main .related.related-products-wrapper.product-section .product-small.box:hover {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   05. BADGE — OUTSIDE REAL CARD CONTENT, ABSOLUTE
   -------------------------------------------------------------------------- */
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .badge-container {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 20px) !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .badge-container .badge,
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .badge-container .badge-inner {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .badge-container .badge-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  min-height: 28px !important;
  padding: 0 12px !important; /* سند ۵.۱۶ */
  border: 0 !important;
  border-radius: 999px !important; /* سند ۵.۱۶: کپسولی */
  background: var(--bk-shop-accent, #ff8a00) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 12px !important; /* سند ۵.۱۶ */
  font-weight: 600 !important; /* سند ۵.۱۶ */
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 8px rgba(255, 138, 0, 0.14) !important;
}

/* --------------------------------------------------------------------------
   06. IMAGE AREA
   -------------------------------------------------------------------------- */
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-image {
  position: relative !important;
  flex: 0 0 220px !important; /* سند ۵.۷: ارتفاع تصویر 220px */
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-fade_in_back {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-fade_in_back > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 10px !important;
  background: #fff !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-fade_in_back > a > img:first-child {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  transform: none !important;
  transition: transform var(--bk-shop-transition, 180ms ease) !important;
}

#main .related.related-products-wrapper.product-section .product-small.col:hover > .col-inner > .product-small.box .image-fade_in_back > a > img:first-child {
  transform: scale(1.03) !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-fade_in_back > a > img.back-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 10px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
}

/* --------------------------------------------------------------------------
   07. WISHLIST — USE EXISTING YITH / FLATSOME HTML, ONLY STYLE IT
   -------------------------------------------------------------------------- */
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-tools.is-small.top.right {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-icon,
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.97) !important;
  color: #667085 !important;
  box-shadow: 0 3px 9px rgba(15, 76, 129, 0.08) !important;
  transform: none !important;
  transition: color var(--bk-shop-transition, 180ms ease), border-color var(--bk-shop-transition, 180ms ease), background-color var(--bk-shop-transition, 180ms ease), transform var(--bk-shop-transition, 180ms ease) !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-button:hover {
  color: #e5484d !important;
  border-color: #f1cbcd !important;
  background: #fff !important;
  transform: scale(1.05) !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .yith-wcwl-icon-svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-button i {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-icon .yith-wcwl-add-button a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-icon .yith-wcwl-add-button > span {
  display: none !important;
}

/* YITH / Flatsome tooltip / popup should never become a second visual element */
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-popup,
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-icon .tooltip,
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-icon [role=tooltip] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   08. QUICK VIEW
   -------------------------------------------------------------------------- */
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-tools.grid-tools {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  left: 10px !important;
  z-index: 35 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity var(--bk-shop-transition, 180ms ease), visibility var(--bk-shop-transition, 180ms ease), transform var(--bk-shop-transition, 180ms ease) !important;
}

#main .related.related-products-wrapper.product-section .product-small.col:hover > .col-inner > .product-small.box .image-tools.grid-tools {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-tools.grid-tools .quick-view {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 20px) !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 10px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--bk-shop-primary, #0f4c81) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(15, 76, 129, 0.1) !important;
  backdrop-filter: blur(8px);
  transition: background-color var(--bk-shop-transition, 180ms ease), border-color var(--bk-shop-transition, 180ms ease), color var(--bk-shop-transition, 180ms ease), transform var(--bk-shop-transition, 180ms ease) !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-tools.grid-tools .quick-view:hover {
  background: var(--bk-shop-primary, #0f4c81) !important;
  border-color: var(--bk-shop-primary, #0f4c81) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-tools.grid-tools .tooltip::before,
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-tools.grid-tools .tooltip::after {
  display: none !important;
}

/* --------------------------------------------------------------------------
   09. PRODUCT CONTENT
   -------------------------------------------------------------------------- */
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-text.box-text-products {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 14px 14px !important;
  background: #fff !important;
  direction: rtl !important;
  text-align: right !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .title-wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-cat {
  display: block !important;
  width: 100% !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--bk-shop-text-muted, #64748b) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  text-align: right !important;
  text-transform: none !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title,
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title a,
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title,
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title a {
  display: -webkit-box !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--bk-shop-text, #1f2937) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  text-align: right !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title a:hover,
#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title a:hover {
  color: var(--bk-shop-primary, #0f4c81) !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .price-wrapper {
  display: flex !important;
  align-items: flex-end !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: auto 0 0 !important;
  padding: 12px 0 0 !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--bk-shop-primary, #0f4c81) !important;
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: right !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .price ins {
  margin: 0 !important;
  text-decoration: none !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .price del {
  margin-inline-start: 6px !important;
  color: var(--bk-shop-text-light, #94a3b8) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

#main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-Price-currencySymbol {
  margin-inline-end: 3px !important;
  color: var(--bk-shop-text-muted, #64748b) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   10. TABLET
   -------------------------------------------------------------------------- */
@media (min-width: 850px) and (max-width: 1199px) {
  #main .related.related-products-wrapper.product-section > .row {
    margin-inline: -7px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col {
    flex-basis: 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    padding-inline: 7px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-image {
    flex-basis: 205px !important;
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-text.box-text-products {
    padding: 11px 12px 13px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title a,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title a {
    font-size: 14.5px !important;
    line-height: 22px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .price {
    font-size: 19px !important;
  }
}
/* --------------------------------------------------------------------------
   11. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
  #main .related.related-products-wrapper.product-section {
    margin-top: 28px;
  }
  #main .related.related-products-wrapper.product-section > h2 {
    margin-bottom: 14px !important;
    font-size: 21px !important;
  }
  #main .related.related-products-wrapper.product-section > .row {
    margin-inline: -4px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner {
    min-height: 300px !important; /* کف ۴۳۰px دسکتاپ با تصویر/فونت کوچک‌تر موبایل فضای خالی می‌ساخت */
  }
  #main .related.related-products-wrapper.product-section .product-small.col {
    flex-basis: 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    margin-bottom: 10px !important;
    padding-inline: 4px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-image {
    flex-basis: 170px !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-text.box-text-products {
    padding: 9px 8px 10px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-cat {
    height: 19px !important;
    min-height: 19px !important;
    max-height: 19px !important;
    margin-bottom: 3px !important;
    font-size: 12px !important;
    line-height: 19px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title a,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title a {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 13px !important;
    line-height: 20px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .price {
    font-size: 16px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-tools.is-small.top.right {
    top: 7px !important;
    right: 7px !important;
    width: 32px !important;
    height: 32px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-icon,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-button,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-icon .yith-wcwl-add-button a {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .wishlist-icon .yith-wcwl-icon-svg {
    width: 15px !important;
    height: 15px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .badge-container {
    top: 7px !important;
    left: 7px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .badge-container .badge-inner {
    min-height: 25px !important;
    padding-inline: 7px !important;
    font-size: 8.5px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .image-tools.grid-tools {
    display: none !important;
  }
}
@media (max-width: 480px) {
  #main .related.related-products-wrapper.product-section > h2 {
    font-size: 20px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner {
    min-height: 280px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-image {
    flex-basis: 150px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-text.box-text-products {
    padding: 8px 7px 9px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-cat {
    font-size: 9.5px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title a,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title a {
    font-size: 11.5px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .price {
    font-size: 12.5px !important;
  }
}
@media (max-width: 360px) {
  #main .related.related-products-wrapper.product-section > h2 {
    font-size: 19px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner {
    min-height: 265px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-image {
    flex-basis: 140px !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .box-text.box-text-products {
    padding: 7px 6px 8px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-cat {
    font-size: 9px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .product-title a,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title,
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .woocommerce-loop-product__title a {
    font-size: 10.5px !important;
  }
  #main .related.related-products-wrapper.product-section .product-small.col > .col-inner > .product-small.box .price {
    font-size: 11.5px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #main .related.related-products-wrapper.product-section * {
    animation: none !important;
    transition: none !important;
  }
}