@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;
  }
}
/* ==========================================================================
   Base site
   ========================================================================== */
body {
  font-family: var(--bk-font-fa);
  line-height: var(--bk-line-height);
}

/* ==========================================================================
   بخش ۱ — هدر (Header) — طبق ۳.۳ (Header Language) و ۵.۱ (Header Spec)
   ========================================================================== */
/* --- ۱.۱ Top Bar: نوار بالای هدر (مزایای سایت طبق ۱.۱۵) --- */
#top-bar.header-top {
  background-color: var(--bk-primary);
  border-bottom: none;
  transition: background-color var(--bk-motion-fade) ease;
}

#top-bar.header-top .container {
  min-height: 40px;
}

#top-bar .html_topbar_right strong,
#top-bar .html_top_right_text strong,
#top-bar .html_topbar_left strong {
  color: var(--bk-surface);
  font-weight: 500;
  font-size: var(--bk-fs-caption);
  text-transform: none; /* حروف فارسی نیازی به uppercase ندارد */
  letter-spacing: 0;
}

#top-bar .header-divider {
  border-color: rgba(255, 255, 255, 0.25);
}

#top-bar .social-icons a.icon {
  color: var(--bk-surface);
  transition: opacity var(--bk-motion-hover) ease;
}

#top-bar .social-icons a.icon:hover {
  opacity: 0.75;
  color: var(--bk-surface);
}

/* --- ۱.۲ هدر اصلی: ارتفاع 80px --- */
#masthead.header-main {
  height: var(--bk-header-height);
  background-color: transparent;
  border-bottom: none;
  transition: background-color var(--bk-motion-fade) ease, box-shadow var(--bk-motion-fade) ease;
}

#masthead .header-inner {
  height: var(--bk-header-height);
  padding-top: 0;
  padding-bottom: 0;
}

/* --- ۱.۳ Sticky: شفاف → سفید + سایه هنگام اسکرول (۵.۱)
   کلاس فعال‌کننده را اسکریپت اسکرول شما اضافه می‌کند. طبق نسخه قبلی هر دو نام
   احتمالی (.scrolled و .is-sticky) پشتیبانی می‌شوند تا با هر پیاده‌سازی سازگار
   باشد — لازم نیست هر دو را بسازید، هرکدام را که استفاده کردید فعال می‌شود. --- */
.header-wrapper.scrolled #masthead.header-main,
.header-wrapper.is-sticky #masthead.header-main {
  background-color: var(--bk-surface);
  box-shadow: var(--bk-shadow-1);
}

/* --- ۱.۴ لوگو: عرض 160px --- */
#logo.flex-col.logo {
  width: var(--bk-logo-width);
  max-width: var(--bk-logo-width);
}

#logo img.header-logo,
#logo img.header-logo-dark {
  width: 100%;
  height: auto;
  max-width: var(--bk-logo-width);
}

/* --- ۱.۵ جعبه جستجو — ارتفاع 52px، Border 1px، عرض 600px طبق ۵.۳
   نکته تصمیم: سند (۵.۳) رادیوس کپسولی 999px را پیشنهاد می‌دهد، اما طبق موک
   نهایی تأییدشده (preview.webp) قالب جستجو گوشه‌تیز و دکمه جستجو مربعی با
   پس‌زمینه نارنجی پررنگ است. این تصمیم آگاهانه گرفته شد و موک را به‌عنوان
   مرجع بصری نهایی در نظر گرفتیم؛ رادیوس در متغیر جدا (--bk-search-radius)
   نگه داشته شد تا اگر بعداً خواستید به کپسولی برگردید، فقط یک مقدار عوض شود.

   نکته اصلاح مهم: نسخه قبلی این بخش را با سلکتور #dgwt-wcas-search-input-1
   (یک ID با شماره ثابت) هدف قرار داده بود. پلاگین جستجوی dgwt این عدد را
   بسته به تعداد instance در صفحه پویا تولید می‌کند، پس در HTML واقعی شما این
   ID دقیقاً همین نبود و در نتیجه هیچ‌کدام از قوانین اعمال نشد. حالا فقط روی
   کلاس‌های ثابت پلاگین (.dgwt-wcas-search-input) تکیه شده و برای اطمینان از
   غلبه بر CSS پیش‌فرض پلاگین، !important روی مقادیر کلیدی گذاشته شده است. --- */
.header-search-form-wrapper,
#header .search-form {
  width: var(--bk-search-width);
  max-width: 100%;
}

.dgwt-wcas-search-input,
.searchform input,
.search-form input {
  height: 52px !important;
  border: 1px solid var(--bk-border) !important;
  border-radius: var(--bk-search-radius) !important; /* گوشه‌تیز طبق موک تأییدشده — نه 999px */
  /* دکمه در سمت چپ فرم است؛ بنابراین فضای خالی input باید در چپ باشد. */
  font-size: var(--bk-fs-small) !important;
  font-family: var(--bk-font-fa) !important;
  color: var(--bk-text-primary) !important;
  background-color: var(--bk-bg) !important;
  transition: border-color var(--bk-motion-hover) ease, box-shadow var(--bk-motion-hover) ease;
}

.dgwt-wcas-om-bar {
  margin: 10px;
  padding-left: 15px;
}

/* --- ۱.۶ آیکون‌های سبد خرید / ویش‌لیست / حساب کاربری / Compare — هرکدام 24px (۵.۱) --- */
.header-nav-main .icon-shopping-cart,
.header-nav-main .icon-heart,
.header-nav-main .icon-user,
.header-nav-main .icon-compare,
.header-icon svg {
  width: var(--bk-header-icon-size);
  height: var(--bk-header-icon-size);
  font-size: var(--bk-header-icon-size);
  color: var(--bk-text-primary);
  transition: color var(--bk-motion-hover) ease, transform var(--bk-motion-hover) ease;
}

.header-cart-link:hover .icon-shopping-cart,
.wishlist-link:hover .icon-heart,
.nav-top-link:hover .icon-user,
.header-compare-link:hover .icon-compare {
  color: var(--bk-primary);
  transform: translateY(-1px);
}

/* Badge شمارنده روی سبد/ویش‌لیست/Compare — سند ۵.۱: Badge سبد 18px دایره */
.header-nav-main [data-icon-label]::after,
.header-compare-link .compare-count {
  content: attr(data-icon-label);
  position: absolute;
  top: -6px;
  left: -8px; /* در RTL سمت چپ آیکون */
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--bk-radius-badge);
  background-color: var(--bk-secondary);
  color: var(--bk-surface);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.header-nav-main [data-icon-label="0"]::after {
  display: none; /* Badge صفر نمایش داده نشود */
}

.cart-item.has-icon,
.header-wishlist-icon,
.account-item.has-icon,
.header-compare-icon {
  position: relative;
}

.header-cart-title .cart-price .woocommerce-Price-amount {
  color: var(--bk-text-primary);
  font-size: var(--bk-fs-small);
  font-weight: 600;
}

/* --- ۱.۷ آیکون Compare — فاز ۲ (تصمیم پذیرفته‌شده، طبق ۵.۱۴) —
   placeholder آماده کنار Wishlist؛ افزودن آیکون واقعی نیازمند افزونه/کد است. --- */
.header-compare-icon {
  display: inline-flex;
  align-items: center;
}

.header-compare-icon .icon-compare {
  font-size: var(--bk-header-icon-size);
}

/* --- ۱.۸ جداکننده‌های هدر --- */
.header-main .header-divider,
.header-bottom .header-divider {
  border-color: var(--bk-border);
  opacity: 1;
}

/* --- ۱.۹ منوی دسته‌بندی عمودی — ۳.۵ / ۵.۲
   نکته اصلاح: این المنت طبق موک داخل نوار پایین هدر (Wide Nav) قرار دارد،
   نه هدر اصلی؛ قبلاً به‌اشتباه با ارتفاع هدر اصلی (80px) هماهنگ شده بود که
   باعث می‌شد از نوار اطرافش (56px) بلندتر بزند بیرون. --- */
.header-vertical-menu__opener {
  height: var(--bk-widenav-height);
  padding: 0 var(--bk-space-md);
  background-color: var(--bk-primary);
  color: var(--bk-surface);
  font-size: var(--bk-fs-small);
  font-weight: 600;
  transition: background-color var(--bk-motion-hover) ease;
}

.header-vertical-menu__opener:hover,
.header-vertical-menu__opener[aria-expanded=true] {
  background-color: var(--bk-primary-hover);
}

.header-vertical-menu__opener .icon-menu,
.header-vertical-menu__opener .icon-angle-down {
  color: var(--bk-surface);
}

.header-vertical-menu__fly-out {
  border-radius: 0 0 var(--bk-radius-card) var(--bk-radius-card);
  box-shadow: var(--bk-shadow-2);
  border: 1px solid var(--bk-border);
  overflow: hidden;
}

#menu-product-menu.ux-nav-vertical-menu > li > a.nav-top-link {
  font-size: var(--bk-fs-body);
  color: var(--bk-text-primary);
  padding: var(--bk-space-sm) var(--bk-space-md);
  transition: background-color var(--bk-motion-hover) ease;
}

#menu-product-menu.ux-nav-vertical-menu > li:hover > a.nav-top-link {
  background-color: var(--bk-bg);
  color: var(--bk-primary);
}

#menu-product-menu .sub-menu.nav-dropdown a {
  font-size: var(--bk-fs-small);
  color: var(--bk-text-secondary);
  padding: var(--bk-space-xs) var(--bk-space-md);
  transition: color var(--bk-motion-hover) ease;
}

#menu-product-menu .sub-menu.nav-dropdown a:hover {
  color: var(--bk-primary);
}

/* آیکون Chevron باز/بسته — جهت‌دار، آینه در RTL طبق ۶.۴ */
.header-vertical-menu__opener .icon-angle-down,
.menu-item-has-children > a.nav-top-link .icon-angle-down {
  transform: scaleX(-1);
}

/* --- ۱.۱۰ نوار پایین هدر (Wide Nav) — بدون بنر تبلیغاتی طبق ۳.۳ --- */
#wide-nav.header-bottom {
  height: 56px;
  background-color: var(--bk-surface);
  border-top: 1px solid var(--bk-border);
  border-bottom: 1px solid var(--bk-border);
}

#wide-nav .header-bottom-nav > li > a.nav-top-link {
  font-size: var(--bk-fs-small);
  font-weight: 500;
  color: var(--bk-text-primary);
  text-transform: none;
  padding: 0 var(--bk-space-sm);
  transition: color var(--bk-motion-hover) ease;
}

#wide-nav .header-bottom-nav > li > a.nav-top-link:hover,
#wide-nav .header-bottom-nav > li.current-menu-item > a.nav-top-link {
  color: var(--bk-primary);
}

#wide-nav .header-bottom-nav > li.current-menu-item > a.nav-top-link {
  font-weight: 600;
}

#wide-nav .sub-menu.nav-dropdown {
  border-radius: var(--bk-radius-card);
  box-shadow: var(--bk-shadow-2);
  border: 1px solid var(--bk-border);
  overflow: hidden;
  margin-top: var(--bk-space-xs);
}

#wide-nav .sub-menu.nav-dropdown a {
  font-size: var(--bk-fs-small);
  color: var(--bk-text-primary);
  padding: var(--bk-space-sm) var(--bk-space-md);
}

#wide-nav .sub-menu.nav-dropdown a:hover {
  background-color: var(--bk-bg);
  color: var(--bk-primary);
}

#wide-nav .menu-item-has-children > a.nav-top-link .icon-angle-down {
  transform: scaleX(-1);
  margin-right: 4px;
}

/* --- ۱.۱۱ سبد خرید Dropdown / حالت خالی --- */
.nav-dropdown.nav-dropdown-default {
  border-radius: var(--bk-radius-card);
  box-shadow: var(--bk-shadow-2);
  border: 1px solid var(--bk-border);
}

.ux-mini-cart-empty .woocommerce-mini-cart__empty-message {
  color: var(--bk-text-secondary);
  font-size: var(--bk-fs-small);
}

.ux-mini-cart-empty .button.primary.wc-backward {
  height: 48px;
  line-height: 48px;
  padding: 0 var(--bk-space-md);
  border-radius: var(--bk-radius-button);
  background-color: var(--bk-primary);
  color: var(--bk-surface);
  font-size: var(--bk-fs-body);
  font-weight: 600;
  transition: background-color var(--bk-motion-hover) ease;
}

.ux-mini-cart-empty .button.primary.wc-backward:hover {
  background-color: var(--bk-primary-hover);
}

/* --- ۱.۱۲ دسترس‌پذیری هدر — ۵.۲۲ --- */
.header-wrapper a:focus-visible,
.header-wrapper button:focus-visible,
.header-wrapper input:focus-visible {
  outline: 2px solid var(--bk-primary);
  outline-offset: 2px;
}

.header-nav-main li.has-icon > a {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- ۱.۱۳ واکنش‌گرا هدر --- */
@media (max-width: 549px) {
  :root {
    --bk-header-height: 64px;
  }
  #top-bar .html_top_right_text,
  #top-bar .html_topbar_left {
    display: none; /* حفظ خلوتی هدر طبق ۱.۱۷ در موبایل */
  }
  #logo.flex-col.logo {
    width: 120px;
    max-width: 120px;
  }
}
@media (min-width: 550px) and (max-width: 992px) {
  .header-search-form-wrapper {
    width: 100%;
  }
}
/* ==========================================================================
   بخش ۲ — دکمه‌ها — ۵.۱۳: دو Variant رسمی (استاندارد 48px / CTA تراکنشی 52px)
   ========================================================================== */
.button.primary:not(.is-outline) {
  background-color: var(--bk-primary);
  border-radius: var(--bk-radius-button);
  min-height: 48px;
  font-weight: 600;
  font-size: var(--bk-fs-body);
  padding: 0 var(--bk-space-md);
  transition: background-color var(--bk-motion-hover) ease;
}

.button.primary:not(.is-outline):hover {
  background-color: var(--bk-primary-hover);
}

/* دکمه CTA تراکنشی 52px — کلاس bk-cta را در تنظیمات دکمه UX Builder (CSS Class) اضافه کنید */
.button.bk-cta {
  min-height: 52px;
  background-color: var(--bk-secondary);
  border-radius: var(--bk-radius-button);
}

.button.bk-cta:hover {
  background-color: var(--bk-secondary-hover);
}

/* ==========================================================================
   بخش ۳ — فرم‌ها و ورودی‌ها — ۵.۱۵: ارتفاع 48px، Radius 12px
   ========================================================================== */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
select,
textarea {
  min-height: 48px;
  border-radius: var(--bk-radius-input);
  border: 1px solid var(--bk-border);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--bk-primary);
}

/* ==========================================================================
   بخش ۴ — کارت محصول عمومی (سراسری سایت) — ۵.۷
   ----------------------------------------------------------------------
   این فایل استایل کارت محصول را برای هر جایی از سایت که یک گرید محصول
   Flatsome/WooCommerce (مثلاً ویجت "Featured Products" در صفحه خانه، یا
   هر گرید دیگری که scope اختصاصی خودش را ندارد) نشان داده می‌شود، تعیین
   می‌کند — با همان زبان طراحی‌ای که فروشگاه (shop.scss) و محصولات مرتبط
   (related-products.scss) استفاده می‌کنند: یک کارت سفید با border/shadow،
   بج تخفیف مستطیل‌گوشه‌گرد بالا-چپ، آیکون علاقه‌مندی دایره‌ای بالا-راست،
   و چیدمان قیمت هم‌ردیف.

   عمداً بدون پیشوند صفحه (#main .products یا #main .related...) نوشته
   شده تا هرجا این مارک‌آپ ظاهر شود اعمال گردد؛ در صفحات فروشگاه و
   محصولات مرتبط، همان دو فایل با selector مشخص‌تر/دیرتر بارگذاری‌شده
   جای این را می‌گیرند، پس تغییری در آن دو صفحه ایجاد نمی‌شود.
   ========================================================================== */
/* --------------------------------------------------------------------------
   ۱. کارت بیرونی — .col-inner
   -------------------------------------------------------------------------- */
.product-small.col > .col-inner {
  position: relative;
  height: 100%;
  min-height: 100%;
  margin: 0 !important;
  padding: 0;
  background: #fff;
  border: 1px solid #E6EAF0;
  border-radius: 16px; /* سند ۵.۷: Radius 16px */
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(20, 38, 76, 0.045);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; /* سند ۵.۷: مدت 180ms */
}

.product-small.col > .col-inner {
  min-height: 430px; /* سند ۵.۷: حداقل‌ارتفاع، نه ثابت */
}

.product-small.col > .col-inner:hover {
  border-color: #D9E1E8;
  box-shadow: 0 8px 24px rgba(20, 38, 76, 0.09);
  transform: translateY(-4px); /* سند ۵.۷: Card TranslateY(-4px) */
}

/* --------------------------------------------------------------------------
   ۲. پوسته داخلی — .product-small.box فقط محتوا، بدون کارت دوم
   -------------------------------------------------------------------------- */
.product-small.col > .col-inner > .product-small.box {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   ۳. ناحیه تصویر — سند ۵.۷: ارتفاع ثابت 220px (نه مربع)، تصویر با object-fit:contain
   -------------------------------------------------------------------------- */
.product-small.col > .col-inner > .product-small.box .box-image {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.product-small.col > .col-inner > .product-small.box .box-image .image-fade_in_back > a {
  display: block;
  position: relative;
  width: 100%;
  height: 220px; /* سند ۵.۷: ارتفاع تصویر 220px (مقدار ثابت، نه مربع) */
  overflow: hidden;
}

.product-small.col > .col-inner > .product-small.box .box-image .image-fade_in_back > a > img:first-child {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  object-fit: contain;
  transform: none;
  transition: transform 0.18s ease; /* سند ۵.۷: مدت 180ms */
}

.product-small.col > .col-inner > .product-small.box .box-image .image-fade_in_back > a > img.back-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  transform: none;
}

@media (hover: hover) {
  .product-small.col > .col-inner:hover .box-image .image-fade_in_back > a > img:first-child {
    transform: scale(1.03); /* سند ۵.۷: Scale تصویر 1.03 */
  }
}
/* --------------------------------------------------------------------------
   ۴. پنل شناور «مشاهده سریع / افزودن به سبد» — فقط روی hover تصویر
   -------------------------------------------------------------------------- */
.product-small.col > .col-inner > .product-small.box .image-tools.grid-tools {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  width: auto;
  height: 44px; /* سند ۵.۷: ارتفاع دکمه 44px */
  z-index: 25;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  background: transparent;
  transition: opacity var(--bk-shop-transition, 0.2s ease), visibility var(--bk-shop-transition, 0.2s ease), transform var(--bk-shop-transition, 0.2s ease);
}

.product-small.col > .col-inner .box-image:hover .image-tools.grid-tools {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.product-small.col > .col-inner .image-tools.grid-tools .quick-view {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 15px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--bk-shop-primary, #0F4C81);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 76, 129, 0.1);
  transition: background-color var(--bk-shop-transition, 0.2s ease), border-color var(--bk-shop-transition, 0.2s ease), color var(--bk-shop-transition, 0.2s ease), transform var(--bk-shop-transition, 0.2s ease), box-shadow var(--bk-shop-transition, 0.2s ease);
}

.product-small.col > .col-inner .image-tools.grid-tools .quick-view:hover {
  background: var(--bk-shop-primary, #0F4C81);
  border-color: var(--bk-shop-primary, #0F4C81);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(15, 76, 129, 0.16);
}

.product-small.col > .col-inner .image-tools.grid-tools .add-to-cart-grid {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--bk-shop-accent, #FF8A00);
  color: #fff;
  box-shadow: 0 5px 14px rgba(255, 138, 0, 0.18);
  transition: background-color var(--bk-shop-transition, 0.2s ease), transform var(--bk-shop-transition, 0.2s ease), box-shadow var(--bk-shop-transition, 0.2s ease);
}

.product-small.col > .col-inner .image-tools.grid-tools .add-to-cart-grid:hover {
  background: #E97800;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(255, 138, 0, 0.26);
}

.product-small.col > .col-inner .image-tools.grid-tools .cart-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #fff;
}

.product-small.col > .col-inner .image-tools.grid-tools .cart-icon strong {
  display: block;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}

.product-small.col > .col-inner .image-tools.grid-tools .tooltip::before,
.product-small.col > .col-inner .image-tools.grid-tools .tooltip::after {
  display: none;
}

/* --------------------------------------------------------------------------
   ۵. تایپوگرافی — دسته / عنوان / قیمت
   -------------------------------------------------------------------------- */
.product-small.col > .col-inner > .product-small.box .box-text.box-text-products {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px 20px 20px; /* سند ۵.۷: Padding 20px */
  background: #fff;
  direction: rtl;
  text-align: right;
}

.product-small.col > .col-inner > .product-small.box .box-text.box-text-products .title-wrapper {
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.product-small.col > .col-inner .box-text.box-text-products .product-cat {
  display: block;
  width: 100%;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  margin: 0 0 5px;
  padding: 0;
  overflow: hidden;
  color: var(--bk-shop-text-muted, #667085);
  font-family: inherit;
  font-size: 14px; /* سند ۵.۷: فونت برند 14px */
  font-weight: 500;
  line-height: 22px;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0;
}

.product-small.col > .col-inner .box-text.box-text-products .product-title,
.product-small.col > .col-inner .box-text.box-text-products .product-title a {
  display: -webkit-box;
  width: 100%;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--bk-shop-text, #172033);
  font-family: inherit;
  font-size: 16px; /* سند ۵.۷: فونت عنوان 16px */
  font-weight: 600;
  line-height: 24px;
  text-align: right;
  text-decoration: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-small.col > .col-inner .box-text.box-text-products .product-title a:hover {
  color: var(--bk-shop-primary, #0F4C81);
}

.product-small.col > .col-inner .box-text.box-text-products .price-wrapper {
  width: 100%;
  height: auto;
  min-height: 40px;
  display: flex;
  align-items: flex-end;
  margin-top: auto;
  margin-bottom: 0;
  padding: 12px 0 0;
}

.product-small.col > .col-inner .box-text.box-text-products .price-wrapper:empty {
  display: none;
  min-height: 0;
  padding: 0;
}

.product-small.col > .col-inner .box-text.box-text-products .price {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: var(--bk-shop-primary, #0F4C81);
  font-family: inherit;
  font-size: 22px; /* سند ۵.۷: فونت قیمت 22px */
  font-weight: 800;
  line-height: 1.3;
  text-align: right;
  direction: rtl;
}

.product-small.col > .col-inner .box-text.box-text-products .woocommerce-Price-amount {
  font-weight: 800;
}

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

.product-small.col > .col-inner .box-text.box-text-products del {
  order: 1;
  color: #9CA3AF;
  font-size: 13px;
  font-weight: 500;
}

.product-small.col > .col-inner .box-text.box-text-products ins {
  order: 2;
  color: var(--bk-shop-danger, #D32F2F);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   ۶. واکنش‌گرا
   -------------------------------------------------------------------------- */
@media (min-width: 850px) and (max-width: 1199px) {
  .product-small.col > .col-inner .box-text.box-text-products {
    padding: 14px 16px 16px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .product-cat {
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    font-size: 13px;
    line-height: 20px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .product-title,
  .product-small.col > .col-inner .box-text.box-text-products .product-title a {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    font-size: 14.5px;
    line-height: 22px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .price {
    font-size: 19px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .woocommerce-Price-currencySymbol {
    font-size: 11px;
  }
}
@media (max-width: 849px) {
  .product-small.col > .col-inner .image-tools.grid-tools {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .product-small.col > .col-inner {
    min-height: 300px; /* تصویر/فونت موبایل کوچک‌تر شده؛ کف ۴۳۰px دسکتاپ فضای خالی اضافه می‌ساخت */
  }
  .product-small.col > .col-inner > .product-small.box .box-image .image-fade_in_back > a {
    height: 170px; /* روی موبایل، عرض کارت باریک‌تر می‌شود؛ ۲۲۰px ثابت کشیده به‌نظر می‌رسد */
  }
  .product-small.col > .col-inner .box-text.box-text-products {
    padding: 12px 14px 14px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .product-cat {
    height: 19px;
    min-height: 19px;
    max-height: 19px;
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 19px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .product-title,
  .product-small.col > .col-inner .box-text.box-text-products .product-title a {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    font-size: 13px;
    line-height: 20px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .price-wrapper {
    min-height: 27px;
    padding-top: 8px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .price {
    font-size: 16px;
    line-height: 1.4;
  }
  .product-small.col > .col-inner .box-text.box-text-products .woocommerce-Price-currencySymbol {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .product-small.col > .col-inner {
    min-height: 280px;
  }
  .product-small.col > .col-inner > .product-small.box .box-image .image-fade_in_back > a {
    height: 150px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .product-cat {
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    font-size: 11px;
    line-height: 18px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .product-title,
  .product-small.col > .col-inner .box-text.box-text-products .product-title a {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    font-size: 12.5px;
    line-height: 20px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .price {
    font-size: 15px;
  }
  .product-small.col > .col-inner .box-text.box-text-products .woocommerce-Price-currencySymbol {
    font-size: 9px;
  }
}
/* ==========================================================================
   بخش ۵ — بج تخفیف کارت محصول عمومی (سراسری سایت) — ۵.۱۶ و ۳.۱۴
   ----------------------------------------------------------------------
   با همان شکل/رنگ بج فروشگاه و محصولات مرتبط: مستطیل گوشه‌گرد نارنجی،
   گوشه بالا-چپ کارت (نه بیضی/دایره‌ای شناور مثل نسخه قبلی این فایل).
   بدون پیشوند صفحه، تا هرجا این مارک‌آپ ظاهر شود اعمال گردد؛ در فروشگاه
   و محصولات مرتبط، فایل‌های اختصاصی همان صفحات (با selector مبتنی بر
   #main) اولویت دارند و چیزی تغییر نمی‌کند.
   ========================================================================== */
.product-small.col > .col-inner > .badge-container {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  z-index: 30;
}

.product-small.col > .col-inner > .badge-container .badge {
  display: inline-flex;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

.product-small.col > .col-inner > .badge-container .badge-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 42px;
  min-height: 28px; /* سند ۵.۱۶: ارتفاع 28px */
  padding: 0 12px; /* سند ۵.۱۶: Padding 12px */
  border: 0;
  border-radius: 999px; /* سند ۵.۱۶: Radius 999px (کپسولی) */
  background: var(--bk-secondary, #FF8A00);
  color: #fff;
  font-family: inherit;
  font-size: 12px; /* سند ۵.۱۶ */
  font-weight: 600; /* سند ۵.۱۶ */
  line-height: 1.2;
  box-shadow: 0 3px 8px rgba(255, 138, 0, 0.18);
}

/* وضعیت موجودی (بدون تغییر نسبت به قبل) */
.stock.in-stock {
  border-radius: var(--bk-radius-badge);
  font-size: var(--bk-fs-caption);
  font-weight: 600;
  padding: 4px 12px;
  color: var(--bk-success);
}

.stock.out-of-stock {
  border-radius: var(--bk-radius-badge);
  font-size: var(--bk-fs-caption);
  font-weight: 600;
  padding: 4px 12px;
  color: var(--bk-danger);
}

/* ============================================================================
   آیکون علاقه‌مندی روی کارت محصول عمومی (سراسری سایت)
   Flatsome + YITH WooCommerce Wishlist

   با همان طراحی دکمه دایره‌ای فروشگاه/محصولات مرتبط: همیشه نمایان (نه
   فقط hover)، ۳۶px، پس‌زمینه سفید با سایه، آیکون قلب توپر Flatsome.
   بدون پیشوند صفحه؛ در فروشگاه/محصولات مرتبط فایل اختصاصی همان صفحات
   (مبتنی بر #main) اولویت دارد.
   ============================================================================ */
.product-small.col .image-tools.is-small.top.right {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  bottom: auto;
  z-index: 40;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.product-small.col .wishlist-icon {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
}

.product-small.col .image-tools.is-small.top.right .wishlist-button,
.product-small.col .wishlist-icon .wishlist-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid #E2E8F0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #475569;
  box-shadow: 0 3px 9px rgba(15, 76, 129, 0.08);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.product-small.col .image-tools.is-small.top.right .wishlist-button:hover,
.product-small.col .wishlist-icon .wishlist-button:hover {
  color: #E5484D;
  border-color: #F1CBCD;
  transform: translateY(-1px);
}

.product-small.col .wishlist-button i,
.product-small.col .wishlist-button .icon-heart {
  display: inline-block;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 15px;
  line-height: 1;
}

.product-small.col .wishlist-icon .yith-wcwl-icon-svg {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  color: currentColor;
  stroke: currentColor;
}

.product-small.col .wishlist-icon .yith-wcwl-add-button a {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.product-small.col .wishlist-icon .yith-wcwl-add-button > span {
  display: none;
}

/* حذف تولتیپ/پاپ‌آپ پیش‌فرض YITH روی این آیکون */
.product-small.col .wishlist-popup {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.product-small.col .wishlist-popup::before,
.product-small.col .wishlist-popup::after,
.product-small.col .wishlist-icon .tooltip::before,
.product-small.col .wishlist-icon .tooltip::after {
  display: none;
  content: none;
}

.product-small.col .wishlist-icon .tooltip,
.product-small.col .wishlist-icon [role=tooltip] {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================================
   واکنش‌گرا
   ============================================================================ */
@media (min-width: 850px) and (max-width: 1199px) {
  .product-small.col .image-tools.is-small.top.right,
  .product-small.col .image-tools.is-small.top.right .wishlist-icon,
  .product-small.col .image-tools.is-small.top.right .wishlist-button,
  .product-small.col .wishlist-icon .wishlist-button {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }
  .product-small.col .wishlist-icon .yith-wcwl-add-button a {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }
  .product-small.col .wishlist-icon .yith-wcwl-icon-svg {
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 849px) {
  .product-small.col .image-tools.is-small.top.right {
    top: 7px;
    right: 7px;
    width: 32px;
    height: 32px;
  }
  .product-small.col .image-tools.is-small.top.right .wishlist-icon,
  .product-small.col .image-tools.is-small.top.right .wishlist-button,
  .product-small.col .wishlist-icon .wishlist-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  .product-small.col .wishlist-icon .yith-wcwl-add-button a {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  .product-small.col .wishlist-button i,
  .product-small.col .wishlist-button .icon-heart {
    font-size: 14px;
  }
  .product-small.col .wishlist-icon .yith-wcwl-icon-svg {
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 480px) {
  .product-small.col .image-tools.is-small.top.right {
    top: 6px;
    right: 6px;
  }
}
@media (max-width: 360px) {
  .product-small.col .image-tools.is-small.top.right {
    top: 5px;
    right: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-small.col .wishlist-button {
    transition: none;
  }
}
/* ==========================================================================
   بخش ۶ — صفحه محصول: بردکرامب / تب‌ها / جدول مشخصات / نظرات — ۵.۱۱، ۵.۱۲، ۵.۱۷
   ========================================================================== */
.woocommerce-breadcrumb {
  font-size: var(--bk-fs-small);
  min-height: 48px;
  display: flex;
  align-items: center;
}

.woocommerce-tabs ul.tabs li {
  font-size: 15px;
}

.woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--bk-primary);
}

table.shop_attributes tr:nth-child(even) {
  background-color: #FAFAFA;
}

table.shop_attributes th,
table.shop_attributes td {
  padding: var(--bk-space-sm);
}

#reviews img.avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--bk-radius-badge);
}

/* ==========================================================================
   بخش ۷ — ردیف اعتماد / نمادها / درگاه پرداخت
   ========================================================================== */
/* بلوک «نماد اعتماد الکترونیکی / درگاه پرداخت / اتحادیه» — طبق موک باید
   همیشه در یک ردیف واحد و کنار هم بمانند. نکته اصلاح: قبلاً فقط
   display:flex تعریف شده بود، اما فرزندان (.col.medium-4.large-4) کلاس‌های
   گرید استاندارد Flatsome با عرض درصدی ثابت دارند که با flex-wrap پیش‌فرض
   در عرض کم به دو ردیف می‌شکستند. اینجا nowrap اجباری شد و به هر ستون اجازه
   داده شد به‌جای تکیه بر عرض درصدی، منعطف کوچک/بزرگ شود. */
.bk-footer-trust-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--bk-space-lg);
  padding-top: 20px;
  padding-bottom: 20px;
}

.bk-footer-trust-row > .col {
  flex: 1 1 0;
  max-width: none; /* غلبه بر عرض درصدی ثابت medium-4/large-4 گرید Flatsome */
  width: auto;
}

@media (max-width: 549px) {
  /* در موبایل، فضای کافی برای سه ستون هم‌عرض نیست؛ به‌جای شکستن نامرتب گرید،
     عمداً استک عمودی و منظم می‌کنیم (طبق اصل «هدر/بلوک‌های خلوت» ۱.۱۷). */
  .bk-footer-trust-row {
    flex-wrap: wrap;
  }
  .bk-footer-trust-row > .col {
    flex: 1 1 100%;
  }
}
/* ==========================================================================
   بخش ۱۱ — Tooltip عمومی سایت (سراسری)
   ----------------------------------------------------------------------
   فلت‌سام برای هر عنصری با کلاس "tooltip" (مثلاً آیکون‌های شبکه اجتماعی
   در هدر/فوتر، دکمه زوم گالری تصویر محصول، و...) یک حباب راهنما با
   ::before/::after خودش می‌سازد. تا امروز هیچ‌جای این پروژه ظاهر آن
   بازطراحی نشده بود، برای همین این حباب‌ها ساده/عمومی و ناهماهنگ با
   بقیه سایت به‌نظر می‌رسیدند.

   عمداً فقط ظاهر (پس‌زمینه/رنگ/فونت/radius/سایه) بازنویسی می‌شود، نه
   content، موقعیت‌دهی، یا منطق نمایش/مخفی‌شدن (hover/focus) — چون آن
   بخش‌ها را خودِ فلت‌سام مدیریت می‌کند و دستکاری‌شان بدون دیدن رفتار
   زنده سایت ریسک شکستن تولتیپ را دارد. فلش کوچک (::after) هم عمداً
   دست‌نخورده می‌ماند تا رنگش با جهت واقعی نمایش (بالا/پایین) ناهماهنگ
   نشود.
   ========================================================================== */
.tooltip::before {
  background: var(--bk-primary-dark) !important;
  color: #fff !important;
  font-family: var(--bk-font-fa) !important;
  font-size: var(--bk-fs-caption) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  padding: 6px 12px !important;
  border-radius: var(--bk-radius-sm) !important;
  box-shadow: var(--bk-shadow-2) !important;
  white-space: nowrap !important;
  direction: rtl !important;
  z-index: 999 !important;
}

/* داخل کارت محصول (که خودش z-index/overflow دارد)، مطمئن شویم حباب
   تولتیپ زیر بج تخفیف یا گوشه‌های کارت بریده/پنهان نشود. */
.product-small .tooltip::before,
.wishlist-icon .tooltip::before {
  z-index: 1000 !important;
}

/* ==========================================================================
   بخش ۸ — پنل حساب کاربری — ۵.۱۹
   ========================================================================== */
.woocommerce-MyAccount-navigation {
  width: 260px;
}

/* ==========================================================================
   بخش ۹ — بخش «چرا باجت‌کالا؟» — معادل کارت خدمات ۵.۶
   ========================================================================== */
.why-bajetkala-section {
  padding: var(--bk-space-section) 0;
  background-color: var(--bk-bg);
}

.why-bajetkala-title {
  text-align: center;
  font-size: var(--bk-fs-h2);
  font-weight: 700;
  line-height: var(--bk-line-height);
  color: var(--bk-text-primary);
  margin-bottom: var(--bk-space-xs);
}

.why-bajetkala-subtitle {
  text-align: center;
  font-size: var(--bk-fs-body);
  line-height: var(--bk-line-height);
  color: var(--bk-text-secondary);
  margin-bottom: var(--bk-space-xl);
}

.why-bajetkala-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-space-md);
  justify-content: center;
}

.why-bajetkala-item {
  display: flex;
  align-items: center;
  gap: var(--bk-space-md);
  flex: 1 1 calc(33.333% - 16px);
  min-height: 96px;
  padding: var(--bk-space-md);
  background-color: var(--bk-surface);
  border-radius: var(--bk-radius-card);
  box-shadow: var(--bk-shadow-1);
  transition: box-shadow var(--bk-motion-card) ease;
}

.why-bajetkala-item:hover {
  box-shadow: var(--bk-shadow-2);
}

.why-bajetkala-item .row {
  align-items: center;
}

.why-bajetkala-item img,
.why-bajetkala-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}

.why-bajetkala-item h4,
.why-bajetkala-item-title {
  margin: 0 0 4px 0;
  font-size: var(--bk-fs-body);
  font-weight: 700;
  line-height: var(--bk-line-height);
  color: var(--bk-text-primary);
}

.why-bajetkala-item-desc {
  font-size: var(--bk-fs-small);
  line-height: var(--bk-line-height);
  color: var(--bk-text-secondary);
  margin: 0;
}

@media (max-width: 1024px) {
  .why-bajetkala-item {
    flex: 1 1 calc(50% - 12px); /* دو ستون در Tablet */
  }
}
@media (max-width: 767px) {
  .why-bajetkala-section {
    padding: var(--bk-space-xl) 0;
  }
  .why-bajetkala-title {
    font-size: var(--bk-fs-h4);
  }
  .why-bajetkala-item {
    flex: 1 1 100%; /* یک ستون در موبایل */
  }
}
/* ============================================================================
   BajetKala — Homepage V4
   Implements: Homepage Final Frontend UI / CSS Implementation Specification V4
   Scope: body.home only. Desktop + Mobile (Tablet inherits fluidly, no
   bespoke tablet rules — out of spec scope). Footer is not touched anywhere
   in this file.

   VISUAL GRAMMAR MAP (spec requires ≥5; this file ships 9 distinct ones so
   no two adjacent sections are ever structurally the same):
     1. Hero               — dark commercial gradient, 1 dominant + 2 satellites
     2. Trust               — quiet single-row icon/text bridge
     3. Categories          — horizontal icon-tile browse rail
     4. Offers               — bold 4-up commercial product grid
     5. Campaign             — light editorial single-photo composition
     6. Best Sellers         — dense 5-up compact merchandising grid
     7. Why BajetKala        — asymmetric image + proof-list story
     8. Brands               — quiet wordmark identity tiles
     9. Purchase Journey     — numbered 3-step process

   WIDTH TIERS (spec: WIDE 1320 / STANDARD 1200 / NARROW 1080 / EDGE = bg only)
   Assigned per section below — see "WIDTH TIER ASSIGNMENT".

   ON !important — used ONLY where a rule must defeat something CSS
   authorship can't reach: (a) UX Builder's per-section inline
   `<style>#section_XXXX{padding:...}</style>` tags (ID selector), and
   (b) native Flatsome/WooCommerce grid + card classes of unknown/likely-!important
   specificity that this file must reliably out-rank on every install.
   Everywhere else (this file's own components: buttons, headers, badges,
   proof list, brand tiles, journey steps, etc.) specificity + source order
   is enough, because pages/home is @use'd after product-card-base /
   product-badge-base / product-global in site.scss — so no !important
   is used there.
   ============================================================================ */
body.home {
  /* ------------------------------------------------------------------------
     HOME TOKENS
     ------------------------------------------------------------------------ */
  /* --bk-home-edge is the live half-gutter: redeclared (not the formulas
     below) at each responsive tier, so the three width tiers automatically
     recompute — CSS custom properties resolve var() against the cascaded
     value at compute time, not at author time. */
  --bk-home-edge: 32px;
  --bk-home-wide: min(1320px, calc(100vw - (var(--bk-home-edge) * 2)));
  --bk-home-standard: min(1200px, calc(100vw - (var(--bk-home-edge) * 2)));
  --bk-home-narrow: min(1080px, calc(100vw - (var(--bk-home-edge) * 2)));
  --bk-home-ink: #172033;
  --bk-home-muted: #667085;
  --bk-home-line: #e7ebf0;
  --bk-home-line-strong: #d8e0e8;
  --bk-home-canvas: #f6f8fa;
  --bk-home-surface: #ffffff;
  --bk-home-surface-soft: #f2f6fa;
  --bk-home-navy: #0b3156;
  --bk-home-navy-2: #0f4c81;
  /* Editorial palette — Campaign only; deliberately warm/light so it can
     never be mistaken for a second Hero. */
  --bk-home-editorial-bg: #f6efe3;
  --bk-home-editorial-bg-2: #ece0cb;
  --bk-home-editorial-line: #e3d3b3;
  --bk-home-editorial-shadow: rgba(120, 92, 45, .18);
  --bk-home-success: #1c8a52;
  --bk-home-section-space: clamp(54px, 6vw, 84px);
  --bk-home-section-space-sm: clamp(38px, 5vw, 64px);
  --bk-home-r-sm: 10px;
  --bk-home-r-md: 16px;
  --bk-home-r-lg: 24px;
  --bk-home-r-xl: 30px;
  --bk-home-shadow-card: 0 3px 14px rgba(15, 76, 129, .055);
  --bk-home-shadow-card-hover: 0 14px 34px rgba(15, 76, 129, .11);
  --bk-home-shadow-float: 0 20px 52px rgba(10, 42, 74, .18);
  --bk-home-ease: cubic-bezier(.2, .7, .2, 1);
  /* ------------------------------------------------------------------------
     GLOBAL CANVAS + CONTAINER SYSTEM
     ------------------------------------------------------------------------ */
}
body.home #main {
  background: var(--bk-home-canvas);
}
body.home {
  /* Defeats Flatsome's inline/ID-based page-wrapper box model — structural,
     required on every install regardless of card/section content. */
}
body.home #content.page-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}
body.home #content.page-wrapper > .row-main,
body.home #content.page-wrapper > .row-main > .large-12,
body.home #content.page-wrapper > .row-main > .large-12 > .col-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
}
body.home .bk-commercial-hero,
body.home .bk-home-section {
  position: relative;
  width: 100%;
  margin: 0 !important;
  isolation: isolate;
}
body.home {
  /* EDGE: the section background (.section-bg) is free to bleed full width.
     Content always sits inside one of the three width tiers — STANDARD by
     default, overridden per section right below. */
}
body.home .bk-commercial-hero > .section-content,
body.home .bk-home-section > .section-content {
  width: min(100%, var(--bk-home-standard));
  max-width: var(--bk-home-standard);
  margin-inline: auto;
  padding-inline: 0;
}
body.home .bk-home-section > .section-bg,
body.home .bk-commercial-hero > .section-bg {
  z-index: -1;
}
body.home {
  /* CRITICAL — single width authority per section.
     Flatsome's parent theme gives every .row its own max-width + auto
     margins (that rule lives in the compiled parent CSS, not in this repo,
     which is why it isn't visible anywhere in these SCSS files). The result
     was two competing width systems inside one section: the header markup
     IS a .row, so it got clamped to the parent's narrower max-width, while
     the category rail and the product grids are NOT wrapped in a .row and
     filled .section-content instead. Visually the heading sat inset while
     the content below bled wider — the misalignment reported on the live
     site.

     Fix: .section-content (above) is the ONLY thing that sets the width
     tier; every .row inside simply fills it. Flickity rows keep their own
     negative gutter margins, so they are exempted from the margin reset
     below via :not() rather than being handed a blanket margin:0. */
}
body.home .bk-commercial-hero > .section-content > .row,
body.home .bk-home-section > .section-content > .row {
  width: 100% !important;
  max-width: 100% !important;
}
body.home .bk-commercial-hero > .section-content > .row:not(.bk-native-products),
body.home .bk-home-section > .section-content > .row:not(.bk-native-products) {
  margin-inline: 0 !important;
}
body.home {
  /* Content that is NOT inside a .row (the category rail, the brand list)
     also fills the same tier, so both systems now resolve to one width. */
}
body.home .bk-home-categories > .section-content > .popular-categories {
  width: 100%;
  max-width: 100%;
}
body.home {
  /* ---- WIDTH TIER ASSIGNMENT ------------------------------------------- */
  /* WIDE 1320 — sections that benefit from extra room: a browse rail and
     the two product grids. */
}
body.home .bk-trust-strip > .section-content,
body.home .bk-home-categories > .section-content,
body.home .bk-home-offers > .section-content,
body.home .bk-home-best > .section-content {
  width: min(100%, var(--bk-home-wide));
  max-width: var(--bk-home-wide);
}
body.home {
  /* NARROW 1080 — editorial / quiet / single-CTA sections read more
     intentional with a tighter measure. */
}
body.home .bk-commercial-banner > .section-content,
body.home .bk-brands > .section-content,
body.home .bk-purchase-journey > .section-content {
  width: min(100%, var(--bk-home-narrow));
  max-width: var(--bk-home-narrow);
}
body.home {
  /* STANDARD 1200 (default above) — Hero and Why BajetKala keep the
     balanced middle tier. */
  /* Remove UX Builder's repeated 30px inline section spacing on home
     (fights the per-section inline <style>#section_XXXX{...}</style> the
     page builder injects — ID selector, only defeatable with !important). */
}
body.home .bk-commercial-hero,
body.home .bk-home-categories,
body.home .bk-home-offers,
body.home .bk-commercial-banner,
body.home .bk-home-best,
body.home .bk-why-brand,
body.home .bk-brands,
body.home .bk-purchase-journey {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.home {
  /* ------------------------------------------------------------------------
     TYPOGRAPHY PRIMITIVES
     ------------------------------------------------------------------------ */
}
body.home .bk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  color: var(--bk-primary);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.025em;
}
body.home .bk-eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--bk-secondary);
}
body.home .bk-eyebrow--inverse {
  color: rgba(255, 255, 255, 0.78);
}
body.home .bk-eyebrow--inverse::before {
  background: var(--bk-secondary);
}
body.home .bk-section-subtitle {
  margin: 7px 0 0;
  color: var(--bk-home-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
}
body.home h2 {
  margin: 0;
  color: var(--bk-home-ink);
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 850;
  line-height: 1.34;
  letter-spacing: -0.02em;
}
body.home .bk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding-inline: 18px;
  border: 1px solid transparent;
  border-radius: var(--bk-radius-button);
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s var(--bk-home-ease), background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
body.home .bk-button:hover,
body.home .bk-button:focus-visible {
  transform: translateY(-2px);
}
body.home .bk-button--primary {
  color: #fff;
  background: var(--bk-secondary);
  box-shadow: 0 8px 20px rgba(255, 138, 0, 0.2);
}
body.home .bk-button--primary:hover,
body.home .bk-button--primary:focus-visible {
  color: #fff;
  background: var(--bk-secondary-hover);
  box-shadow: 0 11px 24px rgba(255, 138, 0, 0.25);
}
body.home .bk-button--ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.25);
}
body.home .bk-button--ghost:hover,
body.home .bk-button--ghost:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
}
body.home {
  /* Campaign sits on a light editorial surface, so its primary CTA needs a
     dark ink outline instead of the white hairline used on dark sections. */
}
body.home .bk-commercial-banner__copy .bk-button--primary {
  box-shadow: 0 10px 22px rgba(120, 92, 45, 0.22);
}
body.home {
  /* ------------------------------------------------------------------------
     SECTION HEADERS — shared by Categories / Offers / Best Sellers.
     A self-wrapping flex pair (text column + link column): on any viewport
     where both don't comfortably fit, the link naturally drops to its own
     line — no brittle percentage split, so nothing can overlap regardless
     of heading length or viewport width.
     ------------------------------------------------------------------------ */
}
body.home .bk-section-header:not(.bk-section-header--center) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 24px;
  margin: 0 0 26px;
  padding: 0;
}
body.home .bk-section-header:not(.bk-section-header--center) > .col:first-child {
  flex: 1 1 300px;
  min-width: 0;
  padding-bottom: 0;
  /* Flatsome gives .col a horizontal gutter; zeroing it makes the heading
     text start exactly where the rail/grid below starts, instead of being
     inset by the gutter width. */
  padding-inline: 0;
}
body.home .bk-section-header:not(.bk-section-header--center) > .col:last-child {
  flex: 0 0 auto;
  margin-inline-start: auto;
  padding-bottom: 0;
  padding-inline: 0;
}
body.home .bk-section-header--center > .col {
  padding-inline: 0;
}
body.home {
  /* Real-site screenshots showed this rendering as a solid filled pill with
     invisible text — Flatsome's own .button.primary styling winning outright,
     the same class of problem as the product-card fixes above. Hardened for
     the same reason: #main for specificity, !important because something
     here is not losing on specificity alone. */
}
body.home #main .bk-section-header .bk-section-link,
body.home #main .bk-section-header .button.bk-section-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  min-height: 40px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--bk-home-line-strong) !important;
  border-radius: 999px !important;
  color: var(--bk-primary) !important;
  background: #fff !important;
  background-image: none !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  white-space: nowrap;
}
body.home #main .bk-section-header .bk-section-link:hover,
body.home #main .bk-section-header .button.bk-section-link:hover,
body.home #main .bk-section-header .bk-section-link:focus-visible,
body.home #main .bk-section-header .button.bk-section-link:focus-visible {
  color: #fff !important;
  background: var(--bk-primary) !important;
  border-color: var(--bk-primary) !important;
}
body.home {
  /* ------------------------------------------------------------------------
     GRAMMAR 1 / HERO — dark commercial gradient. One dominant object, one
     mid satellite, and one small tucked-in cluster (still only two distinct
     satellite *positions*), plus a single decorative ring.
     ------------------------------------------------------------------------ */
}
body.home .bk-commercial-hero {
  min-height: clamp(400px, 31vw, 468px);
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 76% 60%, rgba(45, 127, 192, 0.3), transparent 32%), linear-gradient(132deg, #0b3156 0%, #0f4c81 68%, #0d436f 100%);
}
body.home .bk-commercial-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to right, transparent, black 22%, black 80%, transparent);
  opacity: 0.18;
}
body.home .bk-commercial-hero__inner {
  min-height: inherit;
  display: flex;
  align-items: center;
  margin: 0;
  padding-block: 28px;
}
body.home .bk-commercial-hero__copy-col,
body.home .bk-commercial-hero__visual-col {
  display: flex;
  align-items: center;
  align-self: stretch;
}
body.home .bk-commercial-hero__copy-col {
  order: 2;
  justify-content: flex-start;
}
body.home .bk-commercial-hero__visual-col {
  order: 1;
  justify-content: center;
}
body.home .bk-commercial-hero__copy {
  width: min(100%, 620px);
  margin-inline-start: auto;
  text-align: right;
}
body.home #bk-hero-title {
  max-width: 620px;
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 3.6vw, 49px);
  font-weight: 760;
  line-height: 1.22;
  letter-spacing: -0.03em;
}
body.home #bk-hero-title strong {
  font-weight: 900;
}
body.home .bk-commercial-hero__lead {
  max-width: 555px;
  margin: 17px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 2;
}
body.home .bk-commercial-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
body.home .bk-commercial-hero__visual {
  position: relative;
  width: min(100%, 530px);
  height: clamp(320px, 28vw, 392px);
}
body.home .bk-hero-product {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--bk-home-shadow-float);
}
body.home .bk-hero-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.home {
  /* Dominant object — clearly the largest, highest, most forward. */
}
body.home .bk-hero-product--1 {
  z-index: 4;
  width: clamp(168px, 15.5vw, 214px);
  height: clamp(168px, 15.5vw, 214px);
  top: 0;
  right: 19%;
}
body.home {
  /* Satellite A — a clear second-tier object, mid-left. */
}
body.home .bk-hero-product--2 {
  z-index: 3;
  width: clamp(112px, 10.5vw, 142px);
  height: clamp(112px, 10.5vw, 142px);
  top: 42%;
  left: 6%;
}
body.home {
  /* Satellite B — figures 3 + 4 are deliberately tucked into one tight,
     overlapping cluster (small offset, opposite rotation) so they read as
     a single secondary grouping rather than two competing objects. */
}
body.home .bk-hero-product--3 {
  z-index: 2;
  width: clamp(94px, 9vw, 118px);
  height: clamp(94px, 9vw, 118px);
  right: 8%;
  bottom: 15%;
  transform: rotate(-7deg);
  opacity: 0.96;
}
body.home .bk-hero-product--4 {
  z-index: 3;
  width: clamp(82px, 7.6vw, 100px);
  height: clamp(82px, 7.6vw, 100px);
  right: 1%;
  bottom: 0;
  transform: rotate(6deg);
  opacity: 0.94;
}
body.home {
  /* One subtle decorative layer (spec: "one subtle decorative layer" — the
     second concentric ring from the previous version is intentionally
     retired, not just visually faded). */
}
body.home .bk-hero-orbit--1 {
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 300px;
  top: -4%;
  right: 6%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  pointer-events: none;
}
body.home .bk-hero-orbit--2 {
  display: none;
}
body.home {
  /* ------------------------------------------------------------------------
     GRAMMAR 2 / TRUST — quiet single-row bridge. Plain icon + two lines of
     text, hairline dividers, no card treatment.
     ------------------------------------------------------------------------ */
}
body.home .bk-trust-strip {
  padding-block: 0 !important;
  background: #fff;
  border-bottom: 1px solid var(--bk-home-line);
}
body.home .bk-trust-strip__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0 !important;
}
body.home .bk-trust-strip .bk-trust-item {
  flex: 1 1 0;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}
body.home .bk-trust-strip .bk-trust-item:not(:last-child) .col-inner {
  border-inline-end: 1px solid var(--bk-home-line);
}
body.home .bk-trust-strip .bk-trust-item .col-inner {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px !important;
}
body.home .bk-trust-item__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  direction: rtl;
  text-align: right;
}
body.home .bk-trust-item__content strong,
body.home .bk-trust-item__content > div > span {
  display: block;
}
body.home .bk-trust-item__content strong {
  color: var(--bk-home-ink);
  font-size: 12.5px;
  font-weight: 850;
  line-height: 1.6;
}
body.home .bk-trust-item__content > div > span {
  margin-top: 2px;
  color: var(--bk-home-muted);
  font-size: 11px;
  line-height: 1.65;
}
body.home .bk-trust-item__icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce7f0;
  border-radius: 50%;
  color: var(--bk-primary);
  background: var(--bk-home-surface-soft);
}
body.home .bk-trust-item__icon svg {
  width: 25px;
  height: 25px;
  display: block;
}
body.home {
  /* ------------------------------------------------------------------------
     GRAMMAR 3 / CATEGORIES — horizontal icon-tile browse rail.

     DOM note: this markup ships two headings for the same content — the
     standard .bk-section-header (eyebrow + h2 + subtitle + link, the same
     component Offers/Best Sellers use) AND the popular-categories
     component's own internal header (its own <h2>, its own view-all link).
     Per spec ("one DOM source of truth for each section heading") only one
     may be visible. We keep the standard header, because (a) it is the one
     every other section already uses — keeping it is what actually gives
     Categories a shared rhythm with the rest of the page, and (b) hiding
     the *other* one with display:none removes it from the accessibility
     tree too, so screen-reader users no longer hear the title twice. This
     single swap is also what fixes the mobile heading collision: the
     internal header's three children (label / title / link) had no wrap
     rule and fought each other for space in one row; the standard header
     below wraps safely at any width.
     ------------------------------------------------------------------------ */
}
body.home .bk-home-categories {
  padding-block: var(--bk-home-section-space-sm) !important;
  background: var(--bk-home-canvas);
}
body.home .bk-home-categories .popular-categories__header {
  display: none;
}
body.home .bk-home-categories .popular-categories,
body.home .bk-home-categories .popular-categories__container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body.home .bk-home-categories .popular-categories__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.home .bk-home-categories .popular-categories__track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
body.home .bk-home-categories .popular-categories__track::-webkit-scrollbar {
  display: none;
}
body.home .bk-home-categories .popular-categories__card {
  flex: 0 0 130px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 9px;
  border: 1px solid var(--bk-home-line);
  border-radius: var(--bk-home-r-md);
  color: var(--bk-home-ink);
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 76, 129, 0.02);
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 0.18s var(--bk-home-ease), border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
body.home .bk-home-categories .popular-categories__card:hover,
body.home .bk-home-categories .popular-categories__card:focus-visible {
  color: var(--bk-primary);
  border-color: #cddbe7;
  box-shadow: 0 10px 24px rgba(15, 76, 129, 0.08);
  transform: translateY(-3px);
}
body.home .bk-home-categories .popular-categories__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--bk-primary);
  background: var(--bk-home-surface-soft);
}
body.home .bk-home-categories .popular-categories__icon svg {
  width: 27px;
  height: 27px;
}
body.home .bk-home-categories .popular-categories__card-title {
  color: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
  text-align: center;
}
body.home .bk-home-categories .popular-categories__nav {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--bk-home-line);
  border-radius: 50%;
  color: var(--bk-primary);
  background: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
}
body.home .bk-home-categories .popular-categories__nav:hover:not(:disabled) {
  color: #fff;
  border-color: var(--bk-primary);
  background: var(--bk-primary);
}
body.home .bk-home-categories .popular-categories__nav:disabled {
  opacity: 0.35;
}
body.home {
  /* ------------------------------------------------------------------------
     GRAMMAR 4 + 6 / PRODUCT MERCHANDISING — Offers and Best Sellers share a
     card *shell* (so they still feel like one site) but are deliberately
     different rails: Offers is the bold 4-up commercial grid; Best Sellers
     is the dense 5-up compact one. Both rows carry identical Flatsome grid
     classes (large-columns-5 medium-columns-3 small-columns-2) in the
     markup, so the column count is intentionally keyed off the section
     wrapper (.bk-home-offers / .bk-home-best), not the shared grid class —
     that's what makes the two rails genuinely distinct instead of clones.

     Flickity note: this file does not touch the slider's own inline
     position/transform (JS-managed) or the offscreen-slide inert/
     aria-hidden state Flickity applies — overriding those with !important
     would visually force a grid while leaving non-current slides
     non-interactive and hidden from assistive tech. Only true layout
     causes (container/track width, and card width per section) are fixed
     here, which is what actually caused the empty gap in the old build.
     ------------------------------------------------------------------------ */
}
body.home .bk-home-products {
  padding-block: var(--bk-home-section-space) !important;
}
body.home .bk-home-products .section-content {
  overflow: visible;
}
body.home .bk-home-products .bk-native-products {
  margin: 0 !important;
}
body.home .bk-home-products .bk-native-products .flickity-viewport,
body.home .bk-home-products .bk-native-products .flickity-slider {
  width: 100%;
}
body.home .bk-home-products .bk-native-products .flickity-viewport {
  overflow: hidden;
  padding-block: 4px 18px;
}
body.home {
  /* Column counts are gated by explicit media queries here, not by
     assuming .large-columns-5 / .medium-columns-3 / .small-columns-2
     self-restrict to a breakpoint the way their names suggest — verified
     by rendering this file that they do not: all three matched at every
     viewport simultaneously, so whichever rule was last in source order
     (25%) silently won even on a 390px viewport. Explicit min/max-width
     is what actually makes the column count viewport-dependent. */
}
@media (min-width: 1200px) {
  body.home #main .bk-home-offers .product-small {
    width: 25% !important;
  }
  body.home #main .bk-home-best .product-small {
    width: 20% !important;
  }
}
@media (min-width: 850px) and (max-width: 1199px) {
  body.home #main .bk-home-products .product-small {
    width: 33.333333% !important;
  }
}
body.home {
  /* ---- shared card shell ----
     A real production build (screenshots, not this sandbox) showed images
     rendering tiny/uncontained, titles truncating to ~5 characters, and the
     section-link button filling solid with invisible text — i.e. several
     properties below were losing outright, not just to a specificity fight
     I could out-rank. That only happens against an inline style or a
     parent-theme rule that itself uses !important, and this repo's own
     product-card-base.scss (checked directly, see earlier reasoning in this
     file) does neither for these properties — so the conflict is coming
     from something outside this child theme's SCSS: Flatsome's compiled
     parent-theme CSS, or an inline style WordPress/WooCommerce adds to
     <img> for layout-shift reservation. Either way !important is the only
     lever that reaches it, so sizing/color-critical declarations below are
     intentionally hardened, unlike most of the rest of this file. */
}
body.home #main .bk-home-products .product-small.col {
  margin-bottom: 0;
}
body.home #main .bk-home-products .product-small > .col-inner {
  min-height: 0;
}
body.home #main .bk-home-products .col-inner:has(> .product-small.box),
body.home #main .bk-home-products .col-inner:has(> .product-small.box) > .product-small.box {
  min-height: 0;
}
body.home #main .bk-home-products .col-inner:has(> .product-small.box) {
  height: auto;
  border-radius: var(--bk-home-r-md);
  border-color: var(--bk-home-line);
  box-shadow: var(--bk-home-shadow-card);
  overflow: hidden;
  transform: none;
}
body.home #main .bk-home-products .col-inner:has(> .product-small.box):hover {
  border-color: #d3dee8;
  box-shadow: var(--bk-home-shadow-card-hover);
  transform: translateY(-4px);
}
body.home #main .bk-home-products .product-small.box {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 0;
  height: auto;
  background: #fff;
}
body.home {
  /* Image zone: force it to actually fill the height each section sets
     below, regardless of what's fighting it. */
}
body.home #main .bk-home-products .product-small .box-image {
  width: 100% !important;
}
body.home #main .bk-home-products .product-small .box-image .image-fade_in_back {
  width: 100% !important;
  height: 100% !important;
}
body.home #main .bk-home-products .product-small .box-image .image-fade_in_back > a {
  display: block !important;
  width: 100% !important;
}
body.home #main .bk-home-products .product-small .box-image .image-fade_in_back > a > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
body.home {
  /* Text zone: force it to span the full card width — a narrow fallback
     width here is what was truncating titles to ~5 characters. */
}
body.home #main .bk-home-products .product-small .box-text.box-text-products {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 0;
}
body.home #main .bk-home-products .product-small .box-text.box-text-products .title-wrapper {
  width: 100% !important;
  margin-bottom: 7px;
}
body.home #main .bk-home-products .product-small .name.product-title,
body.home #main .bk-home-products .product-small .product-title a {
  display: -webkit-box !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
}
body.home #main .bk-home-products .product-small .price-wrapper,
body.home #main .bk-home-products .product-small .price {
  margin-top: auto;
}
body.home #main .bk-home-products .product-small .badge-container {
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 30;
}
body.home #main .bk-home-products .product-small .badge-inner,
body.home #main .bk-home-products .product-small .badge-circle .badge-inner {
  min-width: 0;
  border: 0;
  border-radius: 7px;
  background: var(--bk-secondary) !important;
  color: #fff !important;
  box-shadow: 0 4px 11px rgba(255, 138, 0, 0.16);
  font-weight: 850;
}
body.home #main .bk-home-products .product-small .onsale {
  margin: 0;
  padding: 0;
  color: #fff !important;
  font-size: inherit;
  line-height: 1;
}
body.home #main .bk-home-products .product-small .image-tools.grid-tools {
  right: 10px;
  bottom: 10px;
  left: 10px;
}
body.home {
  /* Native product carousel controls — shared visual language. */
}
body.home .bk-home-products .bk-native-products .flickity-button {
  width: 38px;
  height: 38px;
  top: 44%;
  border: 1px solid var(--bk-home-line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 18px rgba(16, 24, 40, 0.08);
  transition: all 0.18s ease;
}
body.home .bk-home-products .bk-native-products .flickity-button:hover {
  border-color: var(--bk-primary);
  background: var(--bk-primary);
}
body.home .bk-home-products .bk-native-products .flickity-button-icon {
  width: 15px;
  height: 15px;
  fill: var(--bk-primary);
}
body.home .bk-home-products .bk-native-products .flickity-button:hover .flickity-button-icon {
  fill: #fff;
}
body.home {
  /* ---- OFFERS — commercial-A: 4-up, bold, spacious, price-forward ---- */
}
body.home .bk-home-offers {
  background: #fff;
}
body.home {
  /* Column width for this section is set in the desktop media query above,
     next to Best Sellers' — keeping both in one place is what makes the
     4-up vs 5-up split easy to verify at a glance instead of buried here. */
}
body.home #main .bk-home-offers .product-small .box-image {
  border-bottom: 1px solid #f0f3f6;
  background: #fff;
}
body.home #main .bk-home-offers .product-small .box-image .image-fade_in_back > a {
  height: 232px !important;
}
body.home #main .bk-home-offers .product-small .image-fade_in_back > a > img.attachment-woocommerce_thumbnail {
  max-width: calc(100% - 36px) !important;
  max-height: calc(100% - 36px) !important;
}
body.home #main .bk-home-offers .product-small .image-fade_in_back > a > img.back-image {
  padding: 18px;
}
body.home #main .bk-home-offers .product-small .box-text.box-text-products {
  padding: 15px 16px 16px !important;
}
body.home #main .bk-home-offers .product-small .name.product-title,
body.home #main .bk-home-offers .product-small .product-title a {
  color: var(--bk-home-ink) !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  line-height: 1.7 !important;
}
body.home #main .bk-home-offers .product-small .price-wrapper {
  padding-top: 8px;
}
body.home #main .bk-home-offers .product-small .price,
body.home #main .bk-home-offers .product-small .woocommerce-Price-amount {
  font-size: 19px !important;
  line-height: 1.4;
}
body.home {
  /* product-card-base sets the currency-symbol suffix as small as 9–10px at
     its own mobile tiers; on the home page specifically we keep it ≥11px. */
}
body.home #main .bk-home-offers .product-small .woocommerce-Price-currencySymbol {
  font-size: 11px !important;
}
body.home #main .bk-home-offers .product-small .badge-inner {
  height: 25px;
  min-height: 25px;
  padding-inline: 9px;
  font-size: 11px;
}
body.home {
  /* ---- BEST SELLERS — commercial-B: 5-up, dense, compact merchandising ---- */
}
body.home .bk-home-best {
  background: var(--bk-home-canvas);
}
body.home {
  /* No injected ::after label here (an earlier draft had one): the section's
     own real h2 ("پرفروش‌های باجت‌کالا") and subtitle already give it a
     distinct, DOM-sourced identity from Offers — adding fabricated text via
     CSS content would be a fresh instance of exactly the DOM-truth problem
     the spec calls out for Categories elsewhere on this page. Density,
     image size and background tone (below) carry the rest of the
     distinction, as the spec asks for. */
  /* Column width (20% / 5-up) is set in the desktop media query near the
     top of the products block, alongside Offers' 25%. */
}
body.home #main .bk-home-best .product-small .box-image {
  border-bottom: 1px solid #edf1f4;
  background: #fff;
}
body.home #main .bk-home-best .product-small .box-image .image-fade_in_back > a {
  height: 184px !important;
}
body.home #main .bk-home-best .product-small .image-fade_in_back > a > img.attachment-woocommerce_thumbnail {
  max-width: calc(100% - 26px) !important;
  max-height: calc(100% - 26px) !important;
}
body.home #main .bk-home-best .product-small .image-fade_in_back > a > img.back-image {
  padding: 13px;
}
body.home #main .bk-home-best .product-small .box-text.box-text-products {
  padding: 11px 12px 13px !important;
}
body.home #main .bk-home-best .product-small .name.product-title,
body.home #main .bk-home-best .product-small .product-title a {
  color: var(--bk-home-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
}
body.home #main .bk-home-best .product-small .price-wrapper {
  padding-top: 6px;
}
body.home #main .bk-home-best .product-small .price,
body.home #main .bk-home-best .product-small .woocommerce-Price-amount {
  font-size: 15.5px !important;
  line-height: 1.4;
}
body.home #main .bk-home-best .product-small .woocommerce-Price-currencySymbol {
  font-size: 11px !important;
}
body.home #main .bk-home-best .product-small .badge-inner {
  height: 21px;
  min-height: 21px;
  padding-inline: 7px;
  font-size: 11px;
}
body.home {
  /* ------------------------------------------------------------------------
     GRAMMAR 5 / CAMPAIGN — light editorial composition. Deliberately the
     tonal inverse of Hero (warm/light vs. saturated/dark), with one
     dominant framed photograph instead of evenly-weighted floating
     satellites, so it reads as a curated feature — not a second Hero.

     The markup already points this way: unlike Hero's
     <p class="bk-eyebrow bk-eyebrow--inverse">, Campaign's eyebrow has no
     --inverse modifier, i.e. it was authored for a light surface — the
     previous dark-navy build was fighting its own DOM.
     ------------------------------------------------------------------------ */
}
body.home .bk-commercial-banner {
  padding-block: clamp(50px, 6vw, 76px) !important;
  overflow: hidden;
  background: radial-gradient(circle at 14% 18%, rgba(255, 138, 0, 0.1), transparent 30%), linear-gradient(155deg, var(--bk-home-editorial-bg) 0%, var(--bk-home-editorial-bg-2) 100%);
}
body.home .bk-commercial-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid var(--bk-home-editorial-line);
}
body.home .bk-commercial-banner__inner {
  min-height: 300px;
  display: flex;
  align-items: center;
  margin: 0;
}
body.home .bk-commercial-banner__copy {
  width: min(100%, 480px);
  padding-block: 5px;
}
body.home .bk-commercial-banner__copy h2 {
  max-width: 460px;
  color: var(--bk-home-ink);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.4;
}
body.home .bk-commercial-banner__copy h2 strong {
  font-weight: 900;
}
body.home .bk-commercial-banner__copy > p:not(.bk-eyebrow) {
  max-width: 460px;
  margin: 13px 0 0;
  color: var(--bk-home-muted);
  font-size: 14px;
  line-height: 1.95;
}
body.home .bk-commercial-banner__copy .bk-button {
  margin-top: 20px;
}
body.home {
  /* One dominant framed photo + a small tilted duo tucked at its opposite
     corner — an editorial "photo essay" cluster, not orbiting satellites. */
}
body.home .bk-commercial-banner__visual {
  position: relative;
  width: min(100%, 460px);
  height: 300px;
  margin-inline: auto;
}
body.home .bk-campaign-product {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #fff;
  border: 1px solid var(--bk-home-editorial-line);
  box-shadow: 0 18px 40px var(--bk-home-editorial-shadow);
}
body.home .bk-campaign-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.home .bk-campaign-product--1 {
  z-index: 2;
  width: min(74%, 292px);
  height: 260px;
  top: 0;
  right: 0;
  padding: 22px;
  border-radius: var(--bk-home-r-lg);
}
body.home .bk-campaign-product--2 {
  z-index: 3;
  width: 116px;
  height: 116px;
  left: 0;
  bottom: 28px;
  padding: 12px;
  border-radius: var(--bk-home-r-md);
  transform: rotate(-6deg);
}
body.home .bk-campaign-product--3 {
  z-index: 4;
  width: 100px;
  height: 100px;
  left: 54px;
  bottom: 0;
  padding: 11px;
  border-radius: var(--bk-home-r-md);
  transform: rotate(5deg);
}
body.home {
  /* ------------------------------------------------------------------------
     GRAMMAR 7 / WHY BAJETKALA — asymmetric story: one large figure, one
     confident proof list. The proof-list checkmarks are deliberately plain
     (bold glyph, no circular badge) rather than reusing Trust's circular
     icon language — spec calls for removing repeated pill/badge patterns.
     ------------------------------------------------------------------------ */
}
body.home .bk-why-brand {
  padding-block: var(--bk-home-section-space) !important;
  background: #fff;
}
body.home .bk-why-brand__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  margin: 0;
}
body.home .bk-why-brand__inner > .col:has(.bk-why-brand__copy) {
  order: 2;
  flex: 1 1 420px;
  min-width: 0;
}
body.home .bk-why-brand__inner > .col:has(.bk-why-brand-visual) {
  order: 1;
  flex: 0 0 auto;
  width: min(100%, 400px);
}
body.home .bk-why-brand__copy h2 {
  max-width: 480px;
}
body.home .bk-why-brand__lead {
  max-width: 470px;
  margin: 14px 0 0;
  color: var(--bk-home-muted);
  font-size: 14px;
  line-height: 1.95;
}
body.home .bk-proof-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
body.home .bk-proof-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--bk-home-ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.65;
}
body.home .bk-proof-list li > span {
  flex: none;
  display: inline-flex;
  margin-top: 1px;
  color: var(--bk-home-success);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
}
body.home {
  /* The figure drives the height here. An earlier version gave this
     wrapper `aspect-ratio: 1/1` and sized the figure to 78% with an 11%
     top margin — on mobile the full-width square grew very tall while the
     figure stayed proportionally small, leaving the large dead band above
     it seen on the live site. Now the wrapper hugs its content and the
     decorative circle is drawn as a positioned layer behind it, so there
     is no empty square to fill. */
}
body.home .bk-why-brand-visual {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  padding: 9% 0 11%;
}
body.home .bk-why-brand-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 92%;
  aspect-ratio: 1/1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--bk-home-surface-soft);
}
body.home .bk-why-brand-visual__figure {
  position: relative;
  z-index: 2;
  width: 84%;
  aspect-ratio: 1/1;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: var(--bk-home-r-lg);
  background: #fff;
  box-shadow: var(--bk-home-shadow-float);
}
body.home .bk-why-brand-visual__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.home .bk-why-brand-visual::after {
  content: "۲ سال ضمانت + ۳ روز تست";
  position: absolute;
  z-index: 3;
  bottom: 2%;
  left: 2%;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--bk-home-ink);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--bk-home-shadow-card-hover);
}
body.home {
  /* ------------------------------------------------------------------------
     GRAMMAR 8 / BRANDS — quiet wordmark identity tiles. Rectangular,
     minimal border, no capsule/pill shape (spec: "not filter chips").
     ------------------------------------------------------------------------ */
}
body.home .bk-brands {
  padding-block: var(--bk-home-section-space-sm) !important;
  background: var(--bk-home-canvas);
}
body.home .bk-brands .bk-section-header--center {
  max-width: 480px;
  margin: 0 auto 30px;
  text-align: center;
}
body.home .bk-brands .bk-section-header--center .bk-eyebrow {
  justify-content: center;
}
body.home .bk-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.home .bk-brand-row span[role=listitem] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding-inline: 22px;
  border: 1px solid var(--bk-home-line);
  border-radius: var(--bk-home-r-sm);
  color: var(--bk-home-ink);
  background: #fff;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.01em;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s var(--bk-home-ease);
}
body.home .bk-brand-row span[role=listitem]:hover {
  border-color: #c9d6e0;
  box-shadow: 0 8px 18px rgba(15, 76, 129, 0.07);
  transform: translateY(-2px);
}
body.home {
  /* ------------------------------------------------------------------------
     GRAMMAR 9 / PURCHASE JOURNEY — numbered 3-step process. Composition
     preserved per spec; connector and CTA polished only.
     ------------------------------------------------------------------------ */
}
body.home .bk-purchase-journey {
  padding-block: var(--bk-home-section-space) !important;
  background: #fff;
  text-align: center;
}
body.home .bk-purchase-journey__intro {
  max-width: 560px;
  margin-inline: auto;
}
body.home .bk-purchase-journey__intro .bk-eyebrow {
  justify-content: center;
}
body.home .bk-purchase-journey__intro .bk-section-subtitle {
  margin: 12px 0 0;
}
body.home .bk-journey-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 800px;
  margin: 52px auto 0;
  padding: 0;
  list-style: none;
}
body.home .bk-journey-steps::before {
  content: "";
  position: absolute;
  top: 26px;
  right: 13%;
  left: 13%;
  height: 0;
  border-top: 2px dashed var(--bk-home-line-strong);
}
body.home .bk-journey-step {
  position: relative;
  flex: 1 1 0;
  max-width: 230px;
}
body.home .bk-journey-step__number {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--bk-home-line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--bk-primary);
  font-size: 15px;
  font-weight: 850;
  box-shadow: 0 6px 18px rgba(15, 76, 129, 0.07);
}
body.home .bk-journey-step > div > strong {
  display: block;
  margin: 0 0 6px;
  color: var(--bk-home-ink);
  font-size: 15px;
  font-weight: 800;
}
body.home .bk-journey-step > div > span {
  display: block;
  color: var(--bk-home-muted);
  font-size: 12.5px;
  line-height: 1.8;
}
body.home .bk-purchase-journey__action {
  margin-top: 40px;
}
body.home {
  /* ==========================================================================
     RESPONSIVE — MOBILE RECOMPOSITION (≤849)
     Tablet (850–1199) is out of spec scope and needs no bespoke rules here:
     every width/size value above already uses min()/clamp()/percentages, so
     it degrades fluidly on its own between desktop and this breakpoint.
     ========================================================================== */
}
@media (max-width: 849px) {
  body.home {
    --bk-home-edge: 20px;
  }
  body.home h2 {
    font-size: 22px;
  }
  body.home .bk-section-subtitle {
    font-size: 12.5px;
  }
  body.home {
    /* ---- section header: fully stacked, nothing competes for width ----
       Live mobile screenshots showed eyebrow/title/subtitle/button packed
       tight against each other with no rhythm, because Flatsome's .col
       padding collapses on small screens and the header's own gap was only
       10px. Spacing is set explicitly per element here instead of relying
       on the flex gap alone. */
  }
  body.home .bk-section-header:not(.bk-section-header--center) {
    align-items: flex-start;
    gap: 0;
    margin-bottom: 22px;
  }
  body.home .bk-section-header:not(.bk-section-header--center) > .col:first-child,
  body.home .bk-section-header:not(.bk-section-header--center) > .col:last-child {
    flex: 1 1 100%;
    margin-inline-start: 0;
    padding-inline: 0 !important;
  }
  body.home .bk-section-header:not(.bk-section-header--center) > .col:last-child {
    margin-top: 14px;
  }
  body.home .bk-section-header:not(.bk-section-header--center) > .col:last-child .col-inner {
    text-align: right !important; /* overrides Flatsome's .text-left utility */
  }
  body.home .bk-section-header .bk-eyebrow {
    margin-bottom: 7px;
  }
  body.home .bk-section-header h2 {
    line-height: 1.45;
  }
  body.home .bk-section-header .bk-section-subtitle {
    margin-top: 9px;
    line-height: 1.85;
  }
  body.home .bk-section-header--center {
    margin-bottom: 24px;
  }
  body.home #main .bk-section-header .bk-section-link,
  body.home #main .bk-section-header .button.bk-section-link {
    min-height: 36px !important;
    font-size: 11.5px !important;
  }
  body.home {
    /* ---- Hero ---- */
  }
  body.home .bk-commercial-hero {
    min-height: 0;
  }
  body.home .bk-commercial-hero__inner {
    flex-direction: column;
    padding-block: 28px 22px;
    gap: 16px;
  }
  body.home .bk-commercial-hero__copy-col,
  body.home .bk-commercial-hero__visual-col {
    width: 100%;
  }
  body.home .bk-commercial-hero__copy-col {
    order: 1;
  }
  body.home .bk-commercial-hero__visual-col {
    order: 2;
  }
  body.home .bk-commercial-hero__copy {
    width: 100%;
    margin-inline: 0;
    text-align: center;
  }
  body.home #bk-hero-title {
    max-width: none;
  }
  body.home .bk-commercial-hero__lead {
    max-width: 460px;
    margin: 13px auto 0;
  }
  body.home .bk-commercial-hero__actions {
    justify-content: center;
    margin-top: 17px;
  }
  body.home .bk-commercial-hero__visual {
    width: min(100%, 340px);
    height: 180px;
    margin: 0 auto;
  }
  body.home .bk-hero-product {
    padding: 8px;
    border-radius: 16px;
  }
  body.home .bk-hero-product--1 {
    width: 104px;
    height: 104px;
    top: 0;
    right: 18%;
  }
  body.home .bk-hero-product--2 {
    width: 72px;
    height: 72px;
    top: 43%;
    left: 5%;
  }
  body.home .bk-hero-product--3 {
    width: 62px;
    height: 62px;
    right: 7%;
    bottom: 4%;
  }
  body.home .bk-hero-product--4 {
    display: none;
  }
  body.home .bk-hero-orbit--1 {
    width: 165px;
    height: 165px;
    top: -2%;
    right: 11%;
  }
  body.home {
    /* ---- Trust: 2×2 ---- */
  }
  body.home .bk-trust-strip__grid {
    flex-wrap: wrap;
  }
  body.home .bk-trust-strip .bk-trust-item {
    flex: 0 0 50%;
    width: 50% !important;
  }
  body.home .bk-trust-strip .bk-trust-item:nth-child(odd) .col-inner {
    border-inline-end: 1px solid var(--bk-home-line);
  }
  body.home .bk-trust-strip .bk-trust-item:nth-child(even) .col-inner {
    border-inline-end: 0;
  }
  body.home .bk-trust-strip .bk-trust-item:nth-child(-n+2) .col-inner {
    border-bottom: 1px solid var(--bk-home-line);
  }
  body.home .bk-trust-strip .bk-trust-item .col-inner {
    min-height: 76px;
    padding-inline: 10px !important;
  }
  body.home .bk-trust-item__icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  body.home .bk-trust-item__icon svg {
    width: 21px;
    height: 21px;
  }
  body.home .bk-trust-item__content strong {
    font-size: 11.5px;
  }
  body.home .bk-trust-item__content > div > span {
    font-size: 11px;
  }
  body.home {
    /* ---- Categories: touch-scroll, buttons out of the way ---- */
  }
  body.home .bk-home-categories .popular-categories__card {
    flex-basis: 108px;
    min-height: 100px;
  }
  body.home .bk-home-categories .popular-categories__icon {
    width: 38px;
    height: 38px;
  }
  body.home .bk-home-categories .popular-categories__icon svg {
    width: 24px;
    height: 24px;
  }
  body.home .bk-home-categories .popular-categories__card-title {
    font-size: 11.5px;
  }
  body.home .bk-home-categories .popular-categories__nav {
    display: none;
  }
  body.home {
    /* ---- Offers / Best Sellers ---- */
  }
  body.home .bk-home-products {
    padding-block: var(--bk-home-section-space-sm) !important;
  }
  body.home #main .bk-home-products .product-small {
    width: 50% !important;
  }
  body.home #main .bk-home-offers .product-small .box-image .image-fade_in_back > a {
    height: 168px !important;
  }
  body.home #main .bk-home-offers .product-small .box-text.box-text-products {
    padding: 12px 13px 13px !important;
  }
  body.home #main .bk-home-offers .product-small .name.product-title,
  body.home #main .bk-home-offers .product-small .product-title a {
    font-size: 12px !important;
  }
  body.home #main .bk-home-offers .product-small .price,
  body.home #main .bk-home-offers .product-small .woocommerce-Price-amount {
    font-size: 16px !important;
  }
  body.home #main .bk-home-best .product-small .box-image .image-fade_in_back > a {
    height: 150px !important;
  }
  body.home #main .bk-home-best .product-small .box-text.box-text-products {
    padding: 10px 11px 11px !important;
  }
  body.home #main .bk-home-best .product-small .name.product-title,
  body.home #main .bk-home-best .product-small .product-title a {
    font-size: 11px !important;
  }
  body.home #main .bk-home-best .product-small .price,
  body.home #main .bk-home-best .product-small .woocommerce-Price-amount {
    font-size: 14px !important;
  }
  body.home {
    /* ---- Campaign ---- */
  }
  body.home .bk-commercial-banner__inner {
    flex-direction: column;
    gap: 30px;
  }
  body.home .bk-commercial-banner__copy {
    width: 100%;
    text-align: center;
  }
  body.home .bk-commercial-banner__copy h2,
  body.home .bk-commercial-banner__copy > p:not(.bk-eyebrow) {
    margin-inline: auto;
  }
  body.home .bk-commercial-banner .bk-eyebrow {
    justify-content: center;
  }
  body.home .bk-commercial-banner__copy .bk-button {
    margin-inline: auto;
  }
  body.home .bk-commercial-banner__visual {
    width: min(100%, 320px);
    height: 240px;
  }
  body.home .bk-campaign-product--1 {
    width: min(76%, 220px);
    height: 200px;
  }
  body.home .bk-campaign-product--2 {
    width: 92px;
    height: 92px;
    bottom: 20px;
  }
  body.home .bk-campaign-product--3 {
    width: 80px;
    height: 80px;
    left: 44px;
  }
  body.home {
    /* ---- Why BajetKala: copy first, figure follows ---- */
  }
  body.home .bk-why-brand__inner {
    flex-direction: column;
  }
  body.home .bk-why-brand__inner > .col:has(.bk-why-brand__copy) {
    order: 1;
    text-align: center;
  }
  body.home .bk-why-brand__inner > .col:has(.bk-why-brand-visual) {
    order: 2;
    width: 100%;
  }
  body.home .bk-why-brand__copy h2,
  body.home .bk-why-brand__lead {
    margin-inline: auto;
  }
  body.home .bk-why-brand .bk-eyebrow {
    justify-content: center;
  }
  body.home .bk-proof-list {
    max-width: 380px;
    margin: 24px auto 0;
  }
  body.home {
    /* ---- Brands ---- */
  }
  body.home .bk-brand-row span[role=listitem] {
    min-height: 40px;
    padding-inline: 16px;
    font-size: 11px;
  }
  body.home {
    /* ---- Purchase Journey: stacked, vertical connector ---- */
  }
  body.home .bk-journey-steps {
    flex-direction: column;
    align-items: center;
    gap: 34px;
    margin-top: 36px;
  }
  body.home .bk-journey-steps::before {
    content: none;
  }
  body.home .bk-journey-step {
    max-width: 300px;
  }
  body.home .bk-journey-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -34px;
    right: 50%;
    height: 34px;
    border-inline-end: 2px dashed var(--bk-home-line-strong);
  }
}
body.home {
  /* ==========================================================================
     RESPONSIVE — SMALL MOBILE (≤480)
     Spec: remove low-priority content before shrinking text further. No text
     size drops below the mobile tier above.
     ========================================================================== */
}
@media (max-width: 480px) {
  body.home {
    --bk-home-edge: 16px;
  }
  body.home .bk-hero-product--4 {
    display: none;
  }
  body.home .bk-hero-product--3 {
    right: 4%;
    bottom: 6%;
  }
  body.home .bk-commercial-hero__visual {
    height: 165px;
  }
  body.home .bk-campaign-product--3 {
    display: none;
  }
  body.home .bk-commercial-banner__visual {
    height: 220px;
  }
  body.home .bk-campaign-product--2 {
    bottom: 10px;
  }
}
body.home {
  /* ==========================================================================
     RESPONSIVE — VERY SMALL MOBILE (≤360)
     Spec: 12px page gutter, still no microtext — spacing only below.
     ========================================================================== */
}
@media (max-width: 360px) {
  body.home {
    --bk-home-edge: 12px;
  }
  body.home .bk-commercial-hero__visual {
    width: min(100%, 280px);
    height: 150px;
  }
  body.home .bk-hero-product--1 {
    width: 94px;
    height: 94px;
  }
  body.home .bk-hero-product--2 {
    width: 66px;
    height: 66px;
  }
  body.home .bk-hero-product--3 {
    width: 58px;
    height: 58px;
  }
  body.home .bk-home-categories .popular-categories__card {
    flex-basis: 104px;
  }
  body.home .bk-commercial-banner__visual {
    width: min(100%, 260px);
    height: 200px;
  }
  body.home .bk-campaign-product--1 {
    width: min(76%, 190px);
    height: 170px;
  }
}

/* ==========================================================================
   بخش ۱۰ — فوتر — ۵.۲۰: Padding بالا 72px/پایین 48px، چهار ستون
   ========================================================================== */
#footer .footer-widgets {
  padding-top: 72px;
  padding-bottom: 48px;
}

.bk-footer-main {
  background: #0E2D52;
  color: #fff;
  padding: 60px 0;
}

.bk-footer-copy {
  background: #082240;
  color: #fff;
  text-align: center;
  padding: 18px 0;
  font-size: var(--bk-fs-small);
}

.bk-footer-row {
  align-items: flex-start;
}

.bk-footer-main a {
  color: #D7E3F1;
  transition: color 0.25s ease, padding-right 0.25s ease;
}

.bk-footer-main a:hover {
  color: #fff;
  padding-right: 6px;
}

.dark .section-title-normal {
  border-color: hsla(0, 0%, 100%, 0);
}

.ux-menu-link {
  margin-bottom: 11px;
  line-height: 1.6;
  font-size: var(--bk-fs-small);
}

/* --- ستون‌ها و جداکننده‌های عمودی بین ستون‌ها
   ترتیب واقعی ستون‌ها روی صفحه (راست→چپ در RTL): تماس | دسته‌بندی‌ها | دسترسی سریع | برند
   قاعده: هر مرز فقط یک‌بار توسط یکی از دو ستون همسایه کشیده می‌شود، نه هر دو،
   وگرنه دو خط کنار هم دیده می‌شود (باگ نسخه قبل بین برند و دسترسی‌سریع).
   قاعده انتخابی: border-right روی ستون سمت چپ هر مرز کشیده می‌شود. --- */
.bk-footer-brand {
  padding-left: 30px;
  text-align: center;
  /* بدون border — مرز بین برند و دسترسی‌سریع توسط bk-footer-links کشیده می‌شود */
}

.bk-footer-links {
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}

.bk-footer-links.col,
.col.bk-footer-links {
  border-right: 1px solid rgba(255, 255, 255, 0.15); /* مرز بین دسترسی‌سریع و برند */
}

.bk-footer-cats {
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}

/* نکته اصلاح: دسته‌بندی‌ها بین دو ستون دیگر (دسترسی‌سریع در چپش، تماس در
   راستش) نشسته، پس باید هر دو مرز را خودش بکشد؛ border-right قبلی فقط مرز
   با دسترسی‌سریع را می‌ساخت و مرز با تماس (سمت راست خودش) جا افتاده بود. */
.bk-footer-cats.col,
.col.bk-footer-cats {
  border-right: 1px solid rgba(255, 255, 255, 0.15); /* مرز بین دسته‌بندی‌ها و دسترسی‌سریع (چپ) */
  border-left: 1px solid rgba(255, 255, 255, 0.15); /* مرز بین دسته‌بندی‌ها و تماس (راست) */
}

.bk-footer-contact {
  padding-left: 30px;
  padding-right: 30px;
  /* بدون border — مرز با دسته‌بندی‌ها را همسایه‌اش (bk-footer-cats، بالا) کشید */
}

.bk-footer-contact li {
  margin-bottom: 18px;
}

/* --- عنوان‌ها (h4) — کاملاً وسط‌چین ---
   نکته هماهنگ‌سازی: مقادیر padding-bottom/font-size اینجا عمداً با نسخه
   فشرده‌ای که قبلاً فقط در صفحه محصول (single-product-ux-overrides) وجود
   داشت یکی شده‌اند؛ همان‌جا این مقادیر حذف شدند تا یک منبع واحد بمانیم.

   width:100% (به‌جای inline-block قبلی) عمدی است: با inline-block، این
   نوار رنگی فقط به‌اندازه عرض متن کوتاه بود و روی خط جداکننده تمام‌عرض
   زیرش به‌شکل «یک نوار کوتاه روی یک خط بلند» دیده می‌شد. با تمام‌عرض
   کردنش، این دو خط دقیقاً روی هم می‌افتند و یک خط واحد به‌نظر می‌رسند،
   نه دو خط جدا. */
.bk-footer-main h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0;
  padding-bottom: 9px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  display: block;
  width: 100%;
  text-align: center;
}

.bk-footer-main .section-title-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

/* --- دسترسی سریع و دسته‌بندی‌ها: بلوک وسط ستون، متن راست‌چین --- */
.bk-footer-links,
.bk-footer-cats {
  text-align: center;
}

.bk-footer-links .ux-menu,
.bk-footer-cats .ux-menu {
  display: inline-block; /* عرض به‌اندازه محتوا */
  text-align: right;
}

.bk-footer-links .ux-menu-link,
.bk-footer-cats .ux-menu-link {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  direction: rtl;
}

/* --- ستون برند --- */
.bk-footer-brand .text {
  display: inline-block;
  text-align: right;
  direction: rtl;
}

/* --- ستون تماس --- */
.bk-footer-contact {
  text-align: center !important;
}

.bk-footer-contact .text {
  display: inline-block;
  text-align: right !important; /* غلبه بر inline style احتمالی روی #text-xxxx */
  direction: rtl;
}

.bk-footer-contact .text p {
  text-align: right !important;
  margin: 0;
}

/* --- شبکه‌های اجتماعی فوتر --- */
.bk-footer-main .social-icons {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.bk-footer-main .social-icons .icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
}

/* --- واکنش‌گرای فوتر: روی موبایل (استک عمودی)، جداکننده و پدینگ حذف شود --- */
@media (max-width: 849px) {
  .bk-footer-links,
  .bk-footer-cats,
  .col.bk-footer-links,
  .col.bk-footer-cats {
    border-right: none;
    border-left: none;
    padding: 0;
    text-align: center;
  }
  .bk-footer-contact {
    padding: 0;
    text-align: center;
  }
  .bk-footer-brand {
    padding: 0;
  }
  .bk-footer-main {
    text-align: center;
  }
  .bk-footer-main a:hover {
    padding-right: 0;
  }
  .bk-footer-main h4 {
    font-size: 14px;
    padding-bottom: 7px;
  }
  .bk-footer-main .section-title-container {
    margin-bottom: 7px;
  }
}
/* =========================================
   BajetKala - FiboSearch final fix
   -----------------------------------------------------------------------
   توجه: ظاهر اصلی جعبه جست‌وجو (عرض، ارتفاع، border، radius، رنگ متن) از
   قبل و به‌طور کامل در layout/_header.scss ساخته شده — همراه با یک تصمیم
   مستند و آگاهانه (طبق موک preview.webp: گوشه‌تیز، نه کپسولی طبق سند ۵.۳).
   اینجا فقط چیزی که واقعاً بی‌استایل بود اضافه می‌شود: دکمه جست‌وجو
   (طبق همان یادداشت در header.scss: «دکمه جستجو مربعی با پس‌زمینه نارنجی
   پررنگ») و پنل پیشنهادهای زنده که تا امروز هیچ‌جا تعریف نشده بودند.
   ========================================= */
.dgwt-wcas-search-submit {
  position: absolute;
  top: 50%;
  left: 4px; /* دکمه در سمت چپ فرم (طبق یادداشت header.scss) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--bk-search-radius);
  background: var(--bk-secondary);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--bk-motion-hover) ease;
}

.dgwt-wcas-search-submit:hover {
  background: var(--bk-secondary-hover);
}

.dgwt-wcas-search-submit svg,
.dgwt-wcas-ico-magnifier {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* پنل پیشنهادها (نتایج زنده) — هماهنگ با زبان کارت سایت؛ قبلاً استایل نداشت */
.dgwt-wcas-suggestions-wrapp {
  margin-top: 8px !important;
  border: 1px solid var(--bk-border) !important;
  border-radius: 14px !important;
  background: var(--bk-surface) !important;
  box-shadow: var(--bk-shadow-2) !important;
  overflow: hidden !important;
}

.dgwt-wcas-suggestion {
  font-family: var(--bk-font-fa) !important;
}

.dgwt-wcas-suggestion-title {
  color: var(--bk-text-primary) !important;
}

.dgwt-wcas-suggestion-price {
  color: var(--bk-primary) !important;
  font-weight: 700 !important;
}

@media (max-width: 849px) {
  .dgwt-wcas-search-submit {
    width: 40px;
    height: 40px;
  }
}