/* ============================================================================
   JM CORE — سیستم طراحی یکپارچه لوازم خانگی جوانمردی
   ----------------------------------------------------------------------------
   این فایل روی «همه صفحات» لود می‌شود و دو کار می‌کند:
   ۱) توکن‌های طراحی (رنگ، گردی گوشه، سایه) را تعریف می‌کند.
      رنگ‌های اصلی مستقیم از «رنگ‌های سیستم المنتور» (Site Settings → Global
      Colors) خوانده می‌شوند؛ یعنی اگر در قالب رنگ را عوض کنید، کل سایت
      خودکار آپدیت می‌شود. مقادیر بعد از ویرگول فقط fallback هستند.
   ۲) کامپوننت‌های مشترک (دکمه‌ها، تیترها، eyebrow) را در همه سکشن‌ها یکدست
      می‌کند.
   ============================================================================ */

body {
  /* ---- رنگ‌های پایه: از Global Colors المنتور خوانده می‌شوند ---- */
  --jm-primary:      var(--e-global-color-primary,   #B88A2E); /* اولیه */
  --jm-dark:         var(--e-global-color-secondary, #111111); /* رنگ دوم */
  --jm-text:         var(--e-global-color-text,      #1A1A1A); /* متن */
  --jm-accent:       var(--e-global-color-accent,    #D4AF37); /* شدت */

  /* ---- رنگ‌های مشتق‌شده (هماهنگ با پالت) ---- */
  --jm-primary-2:     color-mix(in srgb, var(--jm-primary) 78%, var(--jm-accent)); /* طلایی میانی گرادینت */
  --jm-primary-dark:  color-mix(in srgb, var(--jm-primary) 72%, #000);             /* هاور دکمه طلایی */
  --jm-accent-light:  color-mix(in srgb, var(--jm-accent) 62%, #fff);              /* طلایی روشن */
  --jm-dark-soft:     #171411;   /* سطح تیرهٔ گرم (کارت‌های تیره) */
  --jm-on-gold:       #18140F;   /* رنگ متن روی پس‌زمینه طلایی (کنتراست بهتر از سفید) */

  /* ---- خنثی‌ها ---- */
  --jm-white:     #FFFFFF;
  --jm-cream-50:  #FFFCF6;
  --jm-cream-100: #FAF7F1;
  --jm-cream-200: #F6EFE4;
  --jm-cream-300: #EFE4CF;
  --jm-muted:     #6A6155;
  --jm-muted-dark:#40382F;
  --jm-danger:    #A14A43;
  --jm-success:   #2B8A5B;

  /* ---- گرادینت استاندارد طلایی (همهٔ دکمه‌های طلایی سایت) ---- */
  --jm-grad-gold: linear-gradient(135deg, var(--jm-accent-light) 0%, var(--jm-accent) 45%, var(--jm-primary) 100%);

  /* ---- مقیاس گردی گوشه‌ها ---- */
  --jm-radius-xs:   8px;   /* چیپ‌ها و بج‌های کوچک */
  --jm-radius-sm:   12px;  /* دکمه‌های کوچک، اینپوت */
  --jm-radius:      16px;  /* دکمه‌ها، کارت‌های کوچک */
  --jm-radius-lg:   22px;  /* کارت‌ها */
  --jm-radius-xl:   28px;  /* پنل‌ها و سکشن‌های بزرگ */
  --jm-radius-pill: 999px; /* قرصی */

  /* ---- دکمه‌ها ---- */
  --jm-btn-height:    52px;
  --jm-btn-height-sm: 44px;
  --jm-btn-radius:    var(--jm-radius-sm);
  --jm-btn-weight:    800;

  /* ---- سایه‌ها ---- */
  --jm-shadow-sm: 0 6px 16px color-mix(in srgb, var(--jm-dark) 7%, transparent);
  --jm-shadow-md: 0 14px 34px color-mix(in srgb, var(--jm-dark) 10%, transparent);
  --jm-shadow-gold: 0 14px 30px color-mix(in srgb, var(--jm-primary) 26%, transparent);

  /* ---- فاصله برای اسکرول به لنگرها (ارتفاع هدر چسبان) ---- */
  --jm-scroll-offset: 96px;

  /* ---- کانتینر سراسری: هم‌عرض و هم‌لبه با هدر ---- */
  --jm-site-width: 1140px; /* حداکثر عرض محتوا در کل سایت */
  --jm-gutter: 15px;       /* دقیقاً برابر پدینگ .container وودمارت */
}

/* ============================================================
   اسکرول نرم + جای درست ایستادن لنگرها زیر هدر چسبان
   (لینک‌های #jm-products و #jm-brands درست کار کنند)
   ============================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
[id^="jm-"], .jmpp3, .jmsp, .jmshop2 {
  scroll-margin-top: var(--jm-scroll-offset);
}

/* ============================================================
   یکدست‌سازی دکمه‌های اصلی در تمام سکشن‌ها
   (هیرو، چرا جوانمردی، CTA، درباره ما، تماس با ما)
   ============================================================ */
.jm-hero-main__btn,
.jm-why__btn,
.jm-cta-dark__btn,
.jm-btn,
.jm-btn--gold,
.jmpp3__cta,
.jmshop2-product__cta {
  min-height: var(--jm-btn-height);
  border-radius: var(--jm-btn-radius) !important;
  font-weight: var(--jm-btn-weight);
  font-size: 15px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* دکمهٔ طلایی (Primary) — یک گرادینت، یک رنگ متن، همه‌جا */
.jm-hero-main__btn--primary,
.jm-why__btn--primary,
.jm-cta-dark__btn--gold,
.jm-btn-primary,
.jm-btn--gold {
  background: var(--jm-grad-gold) !important;
  color: var(--jm-on-gold) !important;
  border: 0 !important;
  box-shadow: var(--jm-shadow-gold);
}
.jm-hero-main__btn--primary:hover,
.jm-why__btn--primary:hover,
.jm-cta-dark__btn--gold:hover,
.jm-btn-primary:hover,
.jm-btn--gold:hover {
  transform: translateY(-2px);
  filter: saturate(1.05);
}

/* دکمهٔ خرید ووکامرس در صفحه محصول با همان استاندارد */
.jmsp .single_add_to_cart_button {
  min-height: var(--jm-btn-height) !important;
  border-radius: var(--jm-btn-radius) !important;
  background: var(--jm-grad-gold) !important;
  color: var(--jm-on-gold) !important;
  font-weight: var(--jm-btn-weight) !important;
  font-size: 15px !important;
}

/* دکمهٔ کارت محصول فروشگاه: اصلاح فونت ۹px (خیلی ریز و غیرقابل‌خواندن بود) */
.jmshop2-product__cta {
  min-height: var(--jm-btn-height-sm);
  font-size: 13px !important;
  padding: 0 14px;
}

/* ============================================================
   یکدست‌سازی eyebrow (برچسب بالای تیتر سکشن‌ها)
   ============================================================ */
.jm-hero-main__eyebrow,
.jm-why__eyebrow,
.jm-cta-dark__eyebrow,
.jm-brands-dark__eyebrow,
.jm-eyebrow,
.jmpp3__eyebrow,
.jm-home-faq__eyebrow {
  border-radius: var(--jm-radius-pill);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .02em;
}

/* ============================================================
   دسترس‌پذیری: حالت فوکوس یکنواخت برای همه المان‌های تعاملی
   ============================================================ */
.jm-hero-main a:focus-visible,
.jm-why a:focus-visible,
.jm-cta-dark a:focus-visible,
.jm-cats-v2 a:focus-visible,
.jmpp3 a:focus-visible, .jmpp3 button:focus-visible,
.jmsp a:focus-visible, .jmsp button:focus-visible,
.jmshop2 a:focus-visible, .jmshop2 button:focus-visible {
  outline: 2px solid var(--jm-accent);
  outline-offset: 2px;
  border-radius: var(--jm-radius-xs);
}


/* ============================================================================
   سیستم کانتینر واحد — عرض همه سکشن‌ها = ۱۱۴۰ و لبه‌ها دقیقاً هم‌تراز هدر
   ============================================================================ */

/* ۱) هم‌ترازی هدر و فوتر وودمارت با همان عرض
      (پیشنهاد: در تنظیمات وودمارت هم Site width را 1140 بگذارید) */
.whb-header .container,
.whb-sticky-header .container,
.footer-container,
footer .container,
.copyrights-wrapper .container {
  max-width: var(--jm-site-width) !important;
}

/* ۲) رپر داخلی «همه» سکشن‌ها: یک قانون، یک عرض، یک لبه.
      پدینگ ۱۵px همان پدینگ کانتینر وودمارت است تا لبه متن‌ها
      میلی‌متری با لوگو و منوی هدر یکی شود. */
.jm-hero-main__inner,
.jm-cats-v2__wrap,
.jm-brands-dark__wrap,
.jm-why__inner,
.jm-cta-dark__wrap,
.jm-blog-wrap,
.jm-home-faq__wrap,
.jmpp3__wrap,
.jm-about-wrap,
.jmshop2__wrap,
.jmsp__wrap,
.jm-contact-page > section {
  width: 100% !important;
  max-width: var(--jm-site-width) !important;
  margin-inline: auto !important;
  padding-inline: var(--jm-gutter) !important;
  box-sizing: border-box;
}

/* ۳) خود سکشن‌ها (لایه بیرونی با بک‌گراند) تمام‌عرض؛
      حتی اگر داخل کانتینر Boxed المنتور گذاشته شوند، بیرون می‌زنند
      تا پس‌زمینه تا لبه مرورگر برود ولی محتوا ۱۱۴۰ بماند. */
.jm-hero-main,
.jm-cats-v2,
.jm-brands-dark,
.jm-why,
.jm-cta-dark,
.jm-blog-section,
.jm-home-faq,
.jmpp3,
.jm-about-page,
.jm-contact-page,
.jmshop2,
.jmsp {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
}
/* جلوگیری از اسکرول افقیِ ناشی از 100vw */
.main-page-wrapper, .elementor { overflow-x: clip; }

/* ۴) صفر کردن فاصله پیش‌فرض ویجت شورت‌کد المنتور تا سکشن‌ها به هم بچسبند */
.elementor-widget-shortcode { margin-block: 0 !important; }
.elementor-widget-shortcode > .elementor-widget-container { padding: 0 !important; }

/* ============================================================================
   ریسپانسیو سراسری — تبلت و موبایل
   ============================================================================ */

/* هیرو: قد کنترل‌شده به‌جای کل صفحه */
.jm-hero-main {
  min-height: min(88vh, 760px) !important;
  padding-block: 96px 72px !important;
}

/* تبلت */
@media (max-width: 1024px) {
  body { --jm-scroll-offset: 80px; }
  .jm-hero-main { min-height: min(78vh, 640px) !important; padding-block: 80px 56px !important; }
}

/* موبایل */
@media (max-width: 767px) {
  body { --jm-gutter: 15px; --jm-scroll-offset: 68px; }
  .jm-hero-main { min-height: auto !important; padding-block: 72px 48px !important; }
  /* ریتم عمودی یکنواخت سکشن‌ها در موبایل */
  .jm-cats-v2, .jm-brands-dark, .jm-why, .jm-cta-dark,
  .jm-blog-section, .jm-home-faq, .jmpp3 {
    padding-block: 48px !important;
  }
  /* دکمه‌ها در موبایل تمام‌عرض و راحت برای لمس */
  .jm-hero-main__actions, .jm-why__actions, .jm-cta-dark__actions { width: 100%; }
  .jm-hero-main__btn, .jm-why__btn, .jm-cta-dark__btn {
    width: 100%;
    min-height: var(--jm-btn-height);
  }
}