/* ==========================================================================
   JM UNIFIED STYLES v1.3 — کلینیک ساختمان جوانمردی
   ==========================================================================
   این فایل تمام استایل‌های اختصاصی سایت را یکجا نگه می‌دارد.
   قبلاً این استایل‌ها به‌صورت inline در هر صفحه تکرار می‌شدند
   (هدر و فوتر در هر ۶ صفحه!). حالا یک فایل واحد است که مرورگر
   یک‌بار دانلود و برای همه صفحات کش می‌کند.

   فهرست:
   01. HEADER   (.jmdh-*)  — همه صفحات
   02. FOOTER   (.jmf-*)   — همه صفحات
   03. INNER    (.jmp-*)   — درباره ما / تماس با ما
   04. HERO     (.arta-*)  — صفحه اصلی
   05. ABOUT    (.jm-about-*) — صفحه اصلی
   06. REVIEWS  (.jm-review*) — صفحه اصلی
   07. JOURNAL  (.jm-journal-*) — صفحه اصلی
   08. SHOP     (.jmshop-*) — فروشگاه
   09. PRODUCT  (.jmsp-*)  — تک‌محصول
   10. BLOG     (.jmblog-*) — وبلاگ
   ========================================================================== */

/* ==========================================================================
   00. DESIGN TOKENS — متغیرهای سراسری (نسخه 1.2)
   یک‌دست‌سازی فونت، عرض کانتینر و گاتر در همه سکشن‌ها
   ========================================================================== */

:root {
  --jm-font: Anjoman, YekanBakh, IRANSansX, Tahoma, sans-serif; /* فونت اصلی فارسی */
  --jm-font-num: Arial, sans-serif;                              /* اعداد و کدهای لاتین */
  --jm-container: 1380px;                                        /* عرض واحد همه شل‌ها */
  --jm-gutter: 20px;                                             /* فاصله لبه در دسکتاپ */
  --jm-gutter-m: 12px;                                           /* فاصله لبه در موبایل */
}



/* ==========================================================================
   01. HEADER — سربرگ سایت
   کلاس‌ها: .jmdh-*  |  استفاده در: همه صفحات
   ========================================================================== */

.jmdh-header {
  padding: 0 var(--jm-gutter);
  --jmdh-black: #121212;
  --jmdh-dark: #1a1a1a;
  --jmdh-charcoal: #252525;
  --jmdh-gray: #5f5f5f;
  --jmdh-muted: #8a8a8a;
  --jmdh-silver: #c6c6c6;
  --jmdh-border: #d9d9d9;
  --jmdh-soft: #f7f7f5;
  --jmdh-white: #ffffff;

  width: 100%;
  position: sticky;
  top: 0;
  z-index: 99990;
  direction: rtl;
  background: transparent;
  font-family: var(--jm-font);
}

.jmdh-header,
.jmdh-header * {
  box-sizing: border-box;
}

.jmdh-header a {
  text-decoration: none;
}

.jmdh-header button {
  font-family: inherit;
}

.jmdh-header svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jmdh-shell {
  width: 100%;
  max-width: var(--jm-container);
  margin: 0 auto;
  padding: 10px 0 0;
  transition: padding .3s ease;
}

/* نوار بالا */

.jmdh-topbar {
  min-height: 39px;
  padding: 0 15px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  border-radius: 17px 17px 7px 7px;
  color: var(--jmdh-white);
  background:
  radial-gradient(circle at 10% 0%, rgba(255,255,255,.12), transparent 28%),
  var(--jmdh-black);
  transition:
  max-height .35s ease,
  min-height .35s ease,
  opacity .25s ease,
  transform .35s ease,
  margin .35s ease;
}

.jmdh-top-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #c8c8c8;
  font-size: 9px;
}

.jmdh-status {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  position: relative;
  border-radius: 50%;
  background: var(--jmdh-white);
}

.jmdh-status::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: inherit;
  animation: jmdhPulse 2s infinite;
}

.jmdh-top-copy i {
  width: 1px;
  height: 13px;
  background: rgba(255,255,255,.15);
}

.jmdh-top-note {
  color: #777;
}

.jmdh-top-phone {
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--jmdh-white);
  font-size: 9px;
}

.jmdh-top-phone:hover {
  color: var(--jmdh-white);
}

.jmdh-top-phone strong {
  direction: ltr;
  color: var(--jmdh-white);
  font-family: var(--jm-font-num);
  font-size: 11px;
  letter-spacing: .5px;
}

.jmdh-top-phone svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 7px;
  color: var(--jmdh-black);
  background: var(--jmdh-soft);
}

/* نوار اصلی */

.jmdh-mainbar {
  min-height: 88px;
  margin-top: 7px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 18px;
  position: relative;
  border-radius: 23px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(18,18,18,.08);
  box-shadow:
  0 18px 50px rgba(18,18,18,.09),
  inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter: blur(18px);
  transition:
  min-height .3s ease,
  border-radius .3s ease,
  box-shadow .3s ease;
}

.jmdh-mainbar::before {
  content: "";
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: .38;
  background-image:
  linear-gradient(rgba(18,18,18,.023) 1px, transparent 1px),
  linear-gradient(90deg, rgba(18,18,18,.023) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* منوی داینامیک دسکتاپ */

.jmdh-desktop-nav {
  min-width: 0;
  position: relative;
  z-index: 3;
}

.jmdh-desktop-menu,
.jmdh-desktop-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jmdh-desktop-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px,1.4vw,24px);
}

.jmdh-desktop-menu > li {
  position: relative;
}

.jmdh-desktop-menu > li > a {
  padding: 15px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  color: var(--jmdh-gray);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .22s ease, transform .22s ease;
}

.jmdh-desktop-menu > li > a::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  right: 50%;
  bottom: 7px;
  border-radius: 1px;
  opacity: 0;
  background: var(--jmdh-black);
  transform: translateX(50%) rotate(45deg) scale(0);
  transition: opacity .22s ease, transform .22s ease;
}

.jmdh-desktop-menu > li:hover > a,
.jmdh-desktop-menu > .current-menu-item > a,
.jmdh-desktop-menu > .current-menu-ancestor > a {
  color: var(--jmdh-black);
  transform: translateY(-2px);
}

.jmdh-desktop-menu > li:hover > a::before,
.jmdh-desktop-menu > .current-menu-item > a::before,
.jmdh-desktop-menu > .current-menu-ancestor > a::before {
  opacity: 1;
  transform: translateX(50%) rotate(45deg) scale(1);
}

.jmdh-desktop-menu .menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

.jmdh-desktop-menu .sub-menu {
  width: 220px;
  padding: 9px;
  position: absolute;
  top: calc(100% + 6px);
  right: -15px;
  opacity: 0;
  visibility: hidden;
  border-radius: 15px;
  background: var(--jmdh-white);
  border: 1px solid rgba(18,18,18,.09);
  box-shadow: 0 20px 45px rgba(18,18,18,.14);
  transform: translateY(-8px);
  transition: opacity .23s ease, visibility .23s ease, transform .23s ease;
}

.jmdh-desktop-menu li:hover > .sub-menu,
.jmdh-desktop-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.jmdh-desktop-menu .sub-menu .sub-menu {
  top: 0;
  right: calc(100% + 8px);
}

.jmdh-desktop-menu .sub-menu a {
  min-height: 41px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 9px;
  color: var(--jmdh-gray);
  font-size: 10px;
  font-weight: 650;
  transition: color .2s ease, background-color .2s ease, padding .2s ease;
}

.jmdh-desktop-menu .sub-menu a:hover,
.jmdh-desktop-menu .sub-menu .current-menu-item > a {
  padding-right: 14px;
  color: var(--jmdh-black);
  background: var(--jmdh-soft);
}

/* برند */

.jmdh-brand {
  min-width: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  position: relative;
  z-index: 4;
  color: var(--jmdh-black);
}

.jmdh-brand::before,
.jmdh-brand::after {
  content: "";
  width: 23px;
  height: 1px;
  opacity: .45;
  background: var(--jmdh-border);
}

.jmdh-logo-box {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  color: var(--jmdh-white);
  background:
  radial-gradient(circle at 18% 10%, rgba(255,255,255,.18), transparent 35%),
  var(--jmdh-black);
  box-shadow: 0 13px 25px rgba(18,18,18,.17);
  transform: rotate(-3deg);
  transition: transform .35s ease;
}

.jmdh-brand:hover .jmdh-logo-box {
  transform: rotate(0) translateY(-3px);
}

.jmdh-logo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.jmdh-logo-fallback {
  width: 48px;
  height: 48px;
  stroke-width: 1.45;
}

.jmdh-brand-copy {
  text-align: right;
}

.jmdh-brand-copy small {
  display: block;
  margin-bottom: -2px;
  color: var(--jmdh-gray);
  font-size: 9px;
  font-weight: 650;
}

.jmdh-brand-copy strong {
  display: block;
  color: var(--jmdh-black);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.7px;
}

.jmdh-brand-copy i {
  direction: ltr;
  display: block;
  margin-top: 4px;
  color: #a8a8a8;
  font-family: var(--jm-font-num);
  font-size: 5.8px;
  font-style: normal;
  letter-spacing: .8px;
}

/* فقط یک دکمه مشاوره در سمت چپ */

.jmdh-action {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 3;
}

.jmdh-consult {
  min-height: 54px;
  padding: 6px 8px 6px 15px;
  display: grid;
  grid-template-columns: 40px minmax(0,auto) 18px;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  color: var(--jmdh-white);
  background: var(--jmdh-black);
  box-shadow: 0 12px 28px rgba(18,18,18,.14);
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.jmdh-consult:hover {
  color: var(--jmdh-white);
  background: var(--jmdh-charcoal);
  box-shadow: 0 16px 34px rgba(18,18,18,.2);
  transform: translateY(-3px);
}

.jmdh-consult-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--jmdh-black);
  background: var(--jmdh-white);
}

.jmdh-consult-icon svg {
  width: 19px;
  height: 19px;
}

.jmdh-consult-copy small {
  display: block;
  margin-bottom: 2px;
  color: #8d8d8d;
  font-size: 7px;
}

.jmdh-consult-copy strong {
  display: block;
  color: var(--jmdh-white);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.jmdh-consult-arrow {
  width: 17px;
  height: 17px;
  color: var(--jmdh-silver);
}

/* لبه متریال */

.jmdh-material-edge {
  height: 5px;
  margin: 0 30px;
  display: grid;
  grid-template-columns: 1.25fr .7fr 1fr .55fr 1.5fr;
  gap: 4px;
  position: relative;
  z-index: 2;
}

.jmdh-material-edge span {
  display: block;
  border-radius: 0 0 5px 5px;
}

.jmdh-material-edge span:nth-child(1) { background: #121212; }
.jmdh-material-edge span:nth-child(2) { background: #9b9b9b; }
.jmdh-material-edge span:nth-child(3) {
  background: linear-gradient(110deg,#dedede,#fff 48%,#c6c6c6);
}
.jmdh-material-edge span:nth-child(4) { background: #3a3a3a; }
.jmdh-material-edge span:nth-child(5) { background: #d6d6d2; }

/* حالت اسکرول */

.jmdh-header.is-scrolled .jmdh-shell {
  padding-top: 6px;
}

.jmdh-header.is-scrolled .jmdh-topbar {
  min-height: 0;
  max-height: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(-15px);
}

.jmdh-header.is-scrolled .jmdh-mainbar {
  min-height: 70px;
  margin-top: 0;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(18,18,18,.13);
}

.jmdh-header.is-scrolled .jmdh-logo-box {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  border-radius: 14px;
}

.jmdh-header.is-scrolled .jmdh-logo-fallback {
  width: 39px;
  height: 39px;
}

.jmdh-header.is-scrolled .jmdh-brand-copy strong {
  font-size: 20px;
}

/* موبایل */

.jmdh-mobile-controls {
  display: none;
}

.jmdh-menu-toggle,
.jmdh-mobile-consult {
  min-height: 43px;
  border-radius: 12px;
}

.jmdh-menu-toggle {
  width: 43px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--jmdh-white);
  background: var(--jmdh-black);
  border: 0;
  box-shadow: none;
}

.jmdh-menu-toggle span {
  width: 18px;
  height: 1.7px;
  display: block;
  flex: 0 0 auto;
  border-radius: 99px;
  background: currentColor;
  transform: none;
  transition: width .22s ease, transform .22s ease, opacity .22s ease;
}

.jmdh-menu-toggle span:nth-child(2) {
  width: 13px;
}

.jmdh-menu-toggle:hover span:nth-child(2) {
  width: 18px;
}

.jmdh-mobile-consult {
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--jmdh-white);
  background: var(--jmdh-black);
  border: 1px solid var(--jmdh-black);
  font-size: 9px;
  font-weight: 800;
}

.jmdh-mobile-consult:hover {
  color: var(--jmdh-white);
}

.jmdh-mobile-consult svg {
  width: 17px;
  height: 17px;
}

/* کشوی موبایل */

.jmdh-mobile-layer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  visibility: hidden;
  pointer-events: none;
  transition: visibility .35s;
}

.jmdh-header.is-menu-open .jmdh-mobile-layer {
  visibility: visible;
  pointer-events: auto;
}

.jmdh-mobile-overlay {
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  background: rgba(10,10,10,.68);
  border: 0;
  backdrop-filter: blur(5px);
  transition: opacity .35s ease;
}

.jmdh-header.is-menu-open .jmdh-mobile-overlay {
  opacity: 1;
}

.jmdh-mobile-drawer {
  width: min(90vw,410px);
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  overflow-y: auto;
  color: var(--jmdh-white);
  background:
  radial-gradient(circle at 10% 0%,rgba(255,255,255,.1),transparent 28%),
  linear-gradient(145deg,#0a0a0a,#202020 70%,#111);
  box-shadow: -20px 0 55px rgba(0,0,0,.28);
  transform: translateX(105%);
  transition: transform .4s cubic-bezier(.22,.8,.25,1);
}

.jmdh-header.is-menu-open .jmdh-mobile-drawer {
  transform: translateX(0);
}

.jmdh-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.jmdh-drawer-brand span {
  display: block;
  color: #8b8b8b;
  font-size: 9px;
}

.jmdh-drawer-brand strong {
  display: block;
  margin-top: 3px;
  color: var(--jmdh-white);
  font-size: 27px;
  font-weight: 900;
}

.jmdh-drawer-close {
  width: 43px;
  height: 43px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  cursor: pointer;
  color: var(--jmdh-black);
  background: var(--jmdh-soft);
  border: 0;
}

.jmdh-drawer-close svg {
  width: 19px;
  height: 19px;
}

.jmdh-mobile-nav,
.jmdh-mobile-nav ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.jmdh-mobile-nav {
  margin-top: 24px;
}

.jmdh-mobile-nav > .jmdh-mobile-menu {
  display: grid;
  gap: 8px;
  counter-reset: jmdhMenu;
}

.jmdh-mobile-nav > .jmdh-mobile-menu > li {
  counter-increment: jmdhMenu;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.085);
  transition:
  background-color .22s ease,
  border-color .22s ease,
  transform .22s ease;
}

.jmdh-mobile-nav > .jmdh-mobile-menu > li:hover {
  transform: translateX(-3px);
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.14);
}

.jmdh-mobile-nav > .jmdh-mobile-menu > li > a {
  min-height: 58px;
  padding: 0 52px 0 48px;
  display: flex;
  align-items: center;
  position: relative;
  color: #c2c2c2;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
  transition: color .22s ease, padding .22s ease;
}

.jmdh-mobile-nav > .jmdh-mobile-menu > li > a::before {
  content: counter(jmdhMenu, decimal-leading-zero);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  position: absolute;
  right: 13px;
  top: 50%;
  border-radius: 8px;
  color: #8a8a8a;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  font-family: var(--jm-font-num);
  font-size: 8px;
  font-weight: 700;
  transform: translateY(-50%);
}

.jmdh-mobile-nav > .jmdh-mobile-menu > li:not(.menu-item-has-children) > a::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  left: 18px;
  top: 50%;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .55;
  transform: translateY(-50%) rotate(45deg);
}

.jmdh-mobile-nav > .jmdh-mobile-menu > li > a:hover {
  padding-right: 56px;
  color: var(--jmdh-white);
}

.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-item,
.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-ancestor {
  background: var(--jmdh-soft);
  border-color: var(--jmdh-soft);
}

.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-item > a,
.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-ancestor > a {
  color: var(--jmdh-black);
}

.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-item > a::before,
.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-ancestor > a::before {
  color: var(--jmdh-white);
  background: var(--jmdh-black);
  border-color: var(--jmdh-black);
}

.jmdh-mobile-nav .sub-menu {
  max-height: 0;
  margin: 0 11px !important;
  overflow: hidden;
  opacity: 0;
  border-top: 0 solid rgba(255,255,255,.08);
  transition:
  max-height .35s ease,
  opacity .25s ease,
  padding .25s ease,
  border-width .25s ease;
}

.jmdh-mobile-nav li.is-submenu-open > .sub-menu {
  max-height: 600px;
  padding: 8px 0 10px !important;
  opacity: 1;
  border-top-width: 1px;
}

.jmdh-mobile-nav .sub-menu li {
  position: relative;
}

.jmdh-mobile-nav .sub-menu li::before {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  right: 7px;
  top: 50%;
  border-radius: 1px;
  background: #6f6f6f;
  transform: translateY(-50%) rotate(45deg);
}

.jmdh-mobile-nav .sub-menu a {
  min-height: 40px;
  padding: 0 21px 0 8px;
  display: flex;
  align-items: center;
  color: #8b8b8b;
  font-size: 10px;
  font-weight: 650;
}

.jmdh-mobile-nav .sub-menu .current-menu-item > a,
.jmdh-mobile-nav .sub-menu a:hover {
  color: var(--jmdh-white);
}

.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-ancestor .sub-menu {
  border-top-color: rgba(18,18,18,.1);
}

.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-ancestor .sub-menu a {
  color: #5f5f5f;
}

.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-ancestor .sub-menu a:hover,
.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-ancestor .sub-menu .current-menu-item > a {
  color: var(--jmdh-black);
}

.jmdh-submenu-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  position: absolute;
  top: 12px;
  left: 11px;
  z-index: 3;
  cursor: pointer;
  border-radius: 9px;
  color: #9a9a9a;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.085);
  box-shadow: none;
}

.jmdh-mobile-nav > .jmdh-mobile-menu > .current-menu-ancestor > .jmdh-submenu-toggle {
  color: var(--jmdh-white);
  background: var(--jmdh-black);
  border-color: var(--jmdh-black);
}

.jmdh-submenu-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform .25s ease;
}

.jmdh-mobile-nav li.is-submenu-open > .jmdh-submenu-toggle svg {
  transform: rotate(180deg);
}

.jmdh-drawer-footer {
  margin-top: auto;
  padding: 19px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}

.jmdh-drawer-footer small {
  display: block;
  margin-bottom: 7px;
  color: #777;
  font-size: 8px;
}

.jmdh-drawer-footer a {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--jmdh-white);
}

.jmdh-drawer-footer strong {
  font-family: var(--jm-font-num);
  font-size: 21px;
}

.jmdh-drawer-footer svg {
  width: 23px;
  height: 23px;
}

body.jmdh-menu-lock {
  overflow: hidden;
}

/* لپ‌تاپ */

@media (max-width: 1250px) {
  .jmdh-mainbar {
    padding-right: 15px;
    padding-left: 15px;
    gap: 12px;
  }

.jmdh-desktop-menu {
  gap: 13px;
}

.jmdh-desktop-menu > li > a {
  font-size: 10px;
}

.jmdh-brand {
  min-width: 205px;
}

.jmdh-brand::before,
.jmdh-brand::after {
  width: 12px;
}
}

@media (max-width: 1050px) {
  .jmdh-consult-copy small {
    display: none;
  }

.jmdh-consult {
  padding-left: 11px;
  grid-template-columns: 36px auto;
}

.jmdh-consult-icon {
  width: 36px;
  height: 36px;
}

.jmdh-consult-arrow {
  display: none;
}

.jmdh-brand {
  min-width: 185px;
}

.jmdh-brand-copy strong {
  font-size: 21px;
}
}

/* تبلت و موبایل */

@media (max-width: 900px) {
  .jmdh-header {
    padding: 0 var(--jm-gutter-m);
  }

  .jmdh-shell {
    padding: 8px 0 0;
  }

.jmdh-topbar,
.jmdh-desktop-nav,
.jmdh-action {
  display: none;
}

.jmdh-mainbar {
  min-height: 70px;
  margin-top: 0;
  padding: 0 10px;
  grid-template-columns: 1fr auto 1fr;
  border-radius: 18px;
}

.jmdh-brand {
  min-width: 0;
  display: block;
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}

.jmdh-brand::before,
.jmdh-brand::after,
.jmdh-brand-copy i,
.jmdh-logo-box {
  display: none;
}

.jmdh-brand-copy {
  display: block;
  text-align: center;
}

.jmdh-brand-copy small {
  margin: 0 0 2px;
  font-size: 7px;
  line-height: 1.3;
}

.jmdh-brand-copy strong {
  font-size: 20px;
  line-height: 1.15;
}

.jmdh-mobile-controls {
  grid-column: 1/-1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.jmdh-mobile-controls > * {
  pointer-events: auto;
}

.jmdh-material-edge {
  margin: 0 18px;
}

.jmdh-header.is-scrolled .jmdh-mainbar {
  min-height: 62px;
}

.jmdh-header.is-scrolled .jmdh-brand-copy strong {
  font-size: 18px;
}
}

@media (max-width: 480px) {
  .jmdh-mainbar {
    grid-template-columns: minmax(43px,1fr) auto minmax(93px,1fr);
  }

.jmdh-brand-copy strong {
  font-size: 18px;
}

.jmdh-brand-copy small {
  font-size: 6.5px;
}

.jmdh-menu-toggle {
  width: 40px;
  height: 40px;
}

.jmdh-mobile-consult {
  min-height: 40px;
  padding: 0 10px;
  font-size: 8px;
}

.jmdh-mobile-drawer {
  width: 93vw;
  padding: 21px;
}
}

@media (min-width: 783px) {
  body.admin-bar .jmdh-header {
    top: 32px;
  }
}

@media (max-width: 782px) {
  body.admin-bar .jmdh-header {
    top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jmdh-header *,
  .jmdh-header *::before,
  .jmdh-header *::after {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes jmdhPulse {
  0% {
    opacity: .7;
    transform: scale(.75);
  }

70%,
100% {
  opacity: 0;
  transform: scale(1.6);
}
}


/* ==========================================================================
   02. FOOTER — پابرگ سایت
   کلاس‌ها: .jmf-*  |  استفاده در: همه صفحات
   ========================================================================== */

.jmf-footer {
  --jmf-black:#121212;
  --jmf-dark:#181818;
  --jmf-card:#222222;
  --jmf-text:#a0a0a0;
  --jmf-muted:#747474;
  --jmf-silver:#c6c6c6;
  --jmf-soft:#f7f7f5;
  --jmf-white:#ffffff;
  --jmf-line:rgba(255,255,255,.10);

  width:100%;
  padding: 14px var(--jm-gutter) 0;
  direction:rtl;
  background:transparent;
  color:var(--jmf-white);
  font-family: var(--jm-font);
}

.jmf-footer,
.jmf-footer * {
  box-sizing:border-box;
}

.jmf-footer a {
  text-decoration:none;
}

.jmf-shell {
  width:100%;
  max-width: var(--jm-container);
  margin:0 auto;
  overflow:hidden;
  border-radius:26px 26px 0 0;
  background:linear-gradient(145deg,#0d0d0d,var(--jmf-dark));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 -14px 45px rgba(18,18,18,.10);
}

/* اطلاعات تماس در ابتدای فوتر */
.jmf-contact-strip {
  padding:14px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  background:rgba(255,255,255,.018);
  border-bottom:1px solid var(--jmf-line);
}

.jmf-contact-item {
  min-width:0;
  min-height:68px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--jmf-line);
}

.jmf-contact-icon {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--jmf-black);
  background:var(--jmf-soft);
}

.jmf-contact-icon svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.jmf-contact-copy {
  min-width:0;
}

.jmf-contact-copy small {
  display:block;
  margin-bottom:3px;
  color:var(--jmf-muted);
  font-size:8px;
}

.jmf-contact-copy strong,
.jmf-contact-copy a {
  display:block;
  overflow:hidden;
  color:var(--jmf-white);
  font-size:11px;
  font-weight:650;
  line-height:1.7;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.jmf-contact-copy a {
  direction:ltr;
  text-align:right;
}

/* بدنه فوتر */
.jmf-main {
  padding:28px 32px 24px;
  display:grid;
  grid-template-columns:1.35fr .75fr .85fr .8fr;
  gap:30px;
}

.jmf-brand-head {
  display:flex;
  align-items:center;
  gap:12px;
}

.jmf-logo-wrap {
  width:62px;
  height:62px;
  flex:0 0 62px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:15px;
  color:var(--jmf-black);
  background:var(--jmf-soft);
}

.jmf-logo-img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.jmf-logo-fallback {
  width:38px;
  height:38px;
}

.jmf-brand-title strong {
  display:block;
  color:var(--jmf-white);
  font-size:18px;
  font-weight:900;
  line-height:1.5;
}

.jmf-brand-title small {
  display:block;
  margin-top:2px;
  color:var(--jmf-silver);
  font-size:9px;
}

.jmf-description {
  max-width:360px;
  margin:15px 0 0;
  color:var(--jmf-text);
  font-size:10px;
  line-height:2;
}

.jmf-column-title {
  width:100%;
  margin:0 0 14px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:right;
  color:var(--jmf-white);
  background:transparent;
  border:0;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
}

.jmf-column-title svg {
  display:none;
}

.jmf-menu,
.jmf-products {
  margin:0;
  padding:0;
  display:grid;
  gap:9px;
  list-style:none;
}

.jmf-menu li {
  margin:0;
  padding:0;
}

.jmf-menu a,
.jmf-products a {
  color:var(--jmf-text);
  font-size:10px;
  transition:color .2s ease,transform .2s ease;
}

.jmf-menu a {
  width:fit-content;
  display:flex;
  align-items:center;
  gap:7px;
}

.jmf-menu a::before {
  content:"";
  width:4px;
  height:4px;
  border:1px solid var(--jmf-silver);
  transform:rotate(45deg);
}

.jmf-menu a:hover,
.jmf-menu .current-menu-item>a,
.jmf-products a:hover {
  color:var(--jmf-white);
}

.jmf-menu a:hover {
  transform:translateX(-3px);
}

.jmf-products a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.jmf-products a span:last-child {
  color:#606060;
  font-family: var(--jm-font-num);
  font-size:8px;
}

.jmf-action-card {
  padding:16px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--jmf-line);
}

.jmf-action-card small {
  display:block;
  color:var(--jmf-muted);
  font-size:8px;
}

.jmf-action-card strong {
  display:block;
  margin-top:5px;
  color:var(--jmf-white);
  font-size:12px;
  line-height:1.7;
}

.jmf-action-button {
  width:100%;
  min-height:42px;
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:10px;
  color:var(--jmf-black);
  background:var(--jmf-soft);
  font-size:10px;
  font-weight:800;
  transition:transform .2s ease;
}

.jmf-action-button:hover {
  color:var(--jmf-black);
  transform:translateY(-2px);
}

.jmf-action-button svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.jmf-socials {
  margin-top:10px;
  display:flex;
  gap:7px;
}

.jmf-socials a {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--jmf-white);
  background:rgba(255,255,255,.035);
  border:1px solid var(--jmf-line);
  transition:.2s ease;
}

.jmf-socials a:hover {
  color:var(--jmf-black);
  background:var(--jmf-soft);
  transform:translateY(-2px);
}

.jmf-socials svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.jmf-bottom {
  min-height:52px;
  padding:12px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid var(--jmf-line);
}

.jmf-copyright {
  margin:0;
  color:#656565;
  font-size:8px;
}

.jmf-bottom-side {
  display:flex;
  align-items:center;
  gap:12px;
}

.jmf-bottom-links {
  display:flex;
  align-items:center;
  gap:12px;
}

.jmf-bottom-links a {
  color:#707070;
  font-size:8px;
}

.jmf-bottom-links a:hover {
  color:var(--jmf-white);
}

.jmf-back-top {
  width:36px;
  height:36px;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  border:1px solid var(--jmf-line);
  border-radius:10px;
  color:var(--jmf-white);
  background:rgba(255,255,255,.04);
  box-shadow:none;
  transition:background-color .2s ease,transform .2s ease;
}

.jmf-back-top:hover {
  color:var(--jmf-black);
  background:var(--jmf-soft);
  transform:translateY(-2px);
}

.jmf-back-top svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:1100px) {
  .jmf-main {
    grid-template-columns:1.25fr .8fr .9fr;
  }

.jmf-actions-column {
  grid-column:1/-1;
}

.jmf-action-card {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:15px;
}

.jmf-action-button {
  width:auto;
  min-width:160px;
  margin-top:0;
}
}

@media (max-width:850px) {
  .jmf-contact-strip {
    grid-template-columns:1fr;
  }

.jmf-main {
  grid-template-columns:1fr 1fr;
}

.jmf-brand,
.jmf-actions-column {
  grid-column:1/-1;
}
}

@media (max-width:767px) {
  .jmf-footer {
    padding: 10px var(--jm-gutter-m) 0;
  }

.jmf-shell {
  border-radius:21px 21px 0 0;
}

.jmf-contact-strip {
  padding:10px;
}

.jmf-contact-item {
  min-height:62px;
}

.jmf-main {
  padding:25px 19px 20px;
  grid-template-columns:1fr;
  gap:17px;
}

.jmf-brand,
.jmf-actions-column {
  grid-column:auto;
}

.jmf-column {
  padding-top:13px;
  border-top:1px solid var(--jmf-line);
}

.jmf-column-title {
  margin:0;
  cursor:pointer;
}

.jmf-column-title svg {
  width:16px;
  height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  transition:transform .25s ease;
}

.jmf-column.is-open .jmf-column-title svg {
  transform:rotate(180deg);
}

.jmf-collapsible {
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .35s ease,opacity .25s ease,padding-top .25s ease;
}

.jmf-column.is-open .jmf-collapsible {
  max-height:420px;
  padding-top:14px;
  opacity:1;
}

.jmf-action-card {
  display:block;
}

.jmf-action-button {
  width:100%;
  min-width:0;
  margin-top:12px;
}

.jmf-bottom {
  padding:15px 19px 18px;
  align-items:flex-start;
  flex-direction:column;
}

.jmf-bottom-side {
  width:100%;
  justify-content:space-between;
}
}

@media (prefers-reduced-motion:reduce) {
  .jmf-footer *,
  .jmf-footer *::before,
  .jmf-footer *::after {
    transition:none!important;
  }
}


/* ==========================================================================
   03. INNER PAGES — صفحات درباره ما و تماس با ما
   کلاس‌ها: .jmp-*  |  استفاده در: about, contact
   ========================================================================== */

.jmp-page {
  --jmp-black: #121212;
  --jmp-dark: #1a1a1a;
  --jmp-card: #232323;
  --jmp-secondary: #3a3a3a;
  --jmp-text: #5f5f5f;
  --jmp-muted: #8a8a8a;
  --jmp-silver: #c6c6c6;
  --jmp-border: #d9d9d9;
  --jmp-soft: #f7f7f5;
  --jmp-white: #ffffff;

  width: 100%;
  padding: 28px var(--jm-gutter) 76px;
  direction: rtl;
  color: var(--jmp-black);
  background: transparent;
  font-family: var(--jm-font);
}

.jmp-page,
.jmp-page * {
  box-sizing: border-box;
}

.jmp-page a {
  text-decoration: none;
}

.jmp-page button,
.jmp-page input,
.jmp-page textarea,
.jmp-page select {
  font-family: inherit;
}

.jmp-shell {
  width: 100%;
  max-width: var(--jm-container);
  margin: 0 auto;
}

.jmp-section {
  margin-top: 18px;
}

.jmp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--jmp-muted);
  font-size: 11px;
  font-weight: 700;
}

.jmp-eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
}

.jmp-section-head {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.jmp-section-head > div {
  max-width: 760px;
}

.jmp-section-head h2 {
  margin: 9px 0 0;
  color: var(--jmp-black) !important;
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 850;
  line-height: 1.45;
  letter-spacing: -0.8px;
}

.jmp-section-head p {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--jmp-text);
  font-size: 13px;
  line-height: 2;
}

.jmp-button {
  min-height: 50px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.jmp-button:hover {
  transform: translateY(-3px);
}

.jmp-button-dark {
  color: var(--jmp-white);
  background: var(--jmp-black);
  border: 1px solid var(--jmp-black);
}

.jmp-button-dark:hover {
  color: var(--jmp-white);
  background: var(--jmp-secondary);
  border-color: var(--jmp-secondary);
}

.jmp-button-light {
  color: var(--jmp-black);
  background: var(--jmp-white);
  border: 1px solid var(--jmp-border);
}

.jmp-button-light:hover {
  color: var(--jmp-black);
  background: var(--jmp-soft);
}

.jmp-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* About Hero */

.jmp-about-hero {
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(480px, 1.1fr) minmax(420px, .9fr);
  overflow: hidden;
  border-radius: 30px;
  background: var(--jmp-white);
  border: 1px solid rgba(18,18,18,.08);
  box-shadow: 0 25px 70px rgba(18,18,18,.08);
}

.jmp-about-copy {
  padding: clamp(42px, 5vw, 74px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.jmp-about-copy h1 {
  max-width: 760px;
  margin: 22px 0 20px;
  color: var(--jmp-black) !important;
  font-size: clamp(48px, 5.7vw, 82px);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -1.5px;
}

.jmp-about-copy h1 span {
  display: block;
  color: var(--jmp-muted);
  font-weight: 500;
}

.jmp-about-copy > p {
  max-width: 700px;
  margin: 0;
  color: var(--jmp-text);
  font-size: 14px;
  line-height: 2.2;
}

.jmp-about-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jmp-about-visual {
  min-height: 610px;
  position: relative;
  overflow: hidden;
  background:
  radial-gradient(circle at 20% 10%, rgba(255,255,255,.12), transparent 28%),
  linear-gradient(145deg, #0b0b0b, #242424 72%, #111111);
}

.jmp-about-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
  linear-gradient(135deg, transparent 46%, rgba(255,255,255,.2) 47%, transparent 49%);
  background-size: 90px 90px;
}

.jmp-about-monogram {
  position: absolute;
  top: 42px;
  left: 42px;
  color: rgba(255,255,255,.06);
  font-size: 170px;
  font-weight: 900;
  line-height: 1;
}

.jmp-material-stack {
  position: absolute;
  right: 50%;
  top: 50%;
  width: 310px;
  height: 390px;
  transform: translate(50%, -48%);
}

.jmp-material-slab {
  position: absolute;
  width: 210px;
  height: 320px;
  bottom: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 28px 55px rgba(0,0,0,.35);
  transition: transform .35s ease;
}

.jmp-material-slab:hover {
  z-index: 10;
  transform: translateY(-10px) rotate(0deg) !important;
}

.jmp-material-slab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 42%, rgba(255,255,255,.18) 43%, transparent 45%);
}

.jmp-material-slab span {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
}

.jmp-slab-one {
  right: 0;
  z-index: 3;
  color: #222;
  transform: rotate(5deg);
  background: linear-gradient(145deg, #fff, #d8d8d8 56%, #f7f7f5);
}

.jmp-slab-two {
  right: 54px;
  z-index: 2;
  color: #fff;
  transform: rotate(-3deg);
  background: linear-gradient(145deg, #777, #b5b5b5 45%, #575757);
}

.jmp-slab-three {
  right: 108px;
  z-index: 1;
  color: #fff;
  transform: rotate(7deg);
  background: linear-gradient(145deg, #080808, #3a3a3a 52%, #101010);
}

.jmp-visual-caption {
  position: absolute;
  right: 34px;
  left: 34px;
  bottom: 30px;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--jmp-white);
  border-top: 1px solid rgba(255,255,255,.13);
}

.jmp-visual-caption strong {
  display: block;
  font-size: 13px;
}

.jmp-visual-caption small {
  display: block;
  margin-top: 4px;
  color: #8d8d8d;
  font-size: 9px;
}

.jmp-visual-caption i {
  color: rgba(255,255,255,.28);
  font-family: var(--jm-font-num);
  font-size: 28px;
  font-style: normal;
}

.jmp-about-principles {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  background: var(--jmp-black);
  border-radius: 0 0 24px 24px;
}

.jmp-about-principle {
  min-height: 82px;
  padding: 14px 15px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 11px;
  border-radius: 13px;
  color: var(--jmp-white);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
}

.jmp-principle-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--jmp-black);
  background: var(--jmp-soft);
}

.jmp-principle-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jmp-about-principle strong {
  display: block;
  font-size: 11px;
}

.jmp-about-principle small {
  display: block;
  margin-top: 4px;
  color: #858585;
  font-size: 8px;
}

/* Story */

.jmp-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 18px;
}

.jmp-story-main,
.jmp-story-side {
  border-radius: 26px;
  border: 1px solid rgba(18,18,18,.08);
}

.jmp-story-main {
  padding: clamp(34px, 4vw, 55px);
  background: var(--jmp-white);
}

.jmp-story-main h2 {
  margin: 13px 0 19px;
  color: var(--jmp-black) !important;
  font-size: clamp(30px, 3.4vw, 49px);
  font-weight: 850;
  line-height: 1.45;
}

.jmp-story-main p {
  margin: 0 0 13px;
  color: var(--jmp-text);
  font-size: 13px;
  line-height: 2.15;
}

.jmp-story-main p:last-child {
  margin-bottom: 0;
}

.jmp-story-side {
  padding: 32px;
  position: relative;
  overflow: hidden;
  color: var(--jmp-white);
  background: linear-gradient(145deg, #0d0d0d, #242424);
}

.jmp-story-side::before {
  content: "«";
  position: absolute;
  left: 24px;
  top: 5px;
  color: rgba(255,255,255,.06);
  font-size: 150px;
  font-family: Georgia, serif;
  line-height: 1;
}

.jmp-story-side blockquote {
  margin: 0 0 27px;
  position: relative;
  z-index: 2;
  color: var(--jmp-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
}

.jmp-story-values {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
}

.jmp-story-value {
  padding: 12px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
}

.jmp-story-value strong {
  font-size: 11px;
}

.jmp-story-value span {
  color: #777;
  font-family: var(--jm-font-num);
  font-size: 9px;
}

/* Process */

.jmp-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.jmp-process-card {
  min-height: 225px;
  padding: 23px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--jmp-white);
  border: 1px solid rgba(18,18,18,.09);
  transition: transform .25s ease, box-shadow .25s ease;
}

.jmp-process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(18,18,18,.08);
}

.jmp-process-card::after {
  content: attr(data-step);
  position: absolute;
  left: 14px;
  bottom: 3px;
  color: rgba(18,18,18,.035);
  font-family: var(--jm-font-num);
  font-size: 74px;
  font-weight: 800;
}

.jmp-process-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--jmp-white);
  background: var(--jmp-black);
}

.jmp-process-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jmp-process-card h3 {
  margin: 21px 0 9px;
  color: var(--jmp-black) !important;
  font-size: 15px;
  font-weight: 800;
}

.jmp-process-card p {
  margin: 0;
  color: var(--jmp-text);
  font-size: 11px;
  line-height: 2;
}

/* Branches */

.jmp-branches-panel {
  padding: 22px;
  border-radius: 28px;
  background: var(--jmp-black);
  box-shadow: 0 24px 60px rgba(18,18,18,.12);
}

.jmp-branches-panel .jmp-section-head {
  padding: 12px 10px 0;
}

.jmp-branches-panel .jmp-eyebrow,
.jmp-branches-panel .jmp-section-head p {
  color: #8f8f8f;
}

.jmp-branches-panel .jmp-section-head h2 {
  color: var(--jmp-white) !important;
}

.jmp-branches-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 9px;
}

.jmp-branch-card {
  min-height: 275px;
  padding: 21px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  color: var(--jmp-white);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  transition: background-color .25s ease, transform .25s ease;
}

.jmp-branch-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.075);
}

.jmp-branch-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  left: -90px;
  top: -90px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.11);
}

.jmp-branch-number {
  color: rgba(255,255,255,.24);
  font-family: var(--jm-font-num);
  font-size: 38px;
  font-weight: 800;
}

.jmp-branch-card h3 {
  margin: 24px 0 9px;
  color: var(--jmp-white) !important;
  font-size: 17px;
  font-weight: 850;
}

.jmp-branch-city {
  color: var(--jmp-silver);
  font-size: 9px;
  font-weight: 700;
}

.jmp-branch-card p {
  margin: 16px 0 22px;
  color: #8f8f8f;
  font-size: 10px;
  line-height: 2;
}

.jmp-branch-meta {
  margin-top: auto;
  padding-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #777;
  font-size: 8px;
}

.jmp-branch-meta span:last-child {
  direction: ltr;
}

/* About CTA */

.jmp-about-cta {
  padding: 34px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-radius: 24px;
  background: var(--jmp-white);
  border: 1px solid rgba(18,18,18,.08);
}

.jmp-about-cta h2 {
  margin: 0;
  color: var(--jmp-black) !important;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 850;
  line-height: 1.5;
}

.jmp-about-cta p {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--jmp-text);
  font-size: 12px;
  line-height: 2;
}

/* Contact Hero */

.jmp-contact-hero {
  min-height: 350px;
  padding: clamp(38px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 35px;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  color: var(--jmp-white);
  background:
  radial-gradient(circle at 10% 0%, rgba(255,255,255,.09), transparent 28%),
  linear-gradient(145deg, #0b0b0b, #242424 70%, #111111);
}

.jmp-contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
  linear-gradient(135deg, transparent 46%, rgba(255,255,255,.2) 47%, transparent 49%);
  background-size: 88px 88px;
}

.jmp-contact-hero > * {
  position: relative;
  z-index: 2;
}

.jmp-contact-hero .jmp-eyebrow {
  color: var(--jmp-silver);
}

.jmp-contact-hero h1 {
  max-width: 850px;
  margin: 18px 0 13px;
  color: var(--jmp-white) !important;
  font-size: clamp(45px, 5.5vw, 78px);
  font-weight: 900;
  line-height: 1.32;
}

.jmp-contact-hero h1 span {
  color: var(--jmp-silver);
  font-weight: 500;
}

.jmp-contact-hero p {
  max-width: 720px;
  margin: 0;
  color: #a3a3a3;
  font-size: 13px;
  line-height: 2.1;
}

.jmp-contact-badge {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--jmp-black);
  background: var(--jmp-soft);
  box-shadow: 0 18px 38px rgba(0,0,0,.25);
}

.jmp-contact-badge-inner {
  text-align: center;
}

.jmp-contact-badge strong {
  display: block;
  font-size: 28px;
  font-weight: 900;
}

.jmp-contact-badge small {
  display: block;
  margin-top: 3px;
  color: var(--jmp-muted);
  font-size: 8px;
}

/* Contact Strip */

.jmp-contact-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}

.jmp-contact-card {
  min-height: 116px;
  padding: 16px;
  display: grid;
  grid-template-columns: 45px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  color: var(--jmp-black);
  background: var(--jmp-white);
  border: 1px solid rgba(18,18,18,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.jmp-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(18,18,18,.08);
}

.jmp-contact-card-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--jmp-white);
  background: var(--jmp-black);
}

.jmp-contact-card-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jmp-contact-card small {
  display: block;
  margin-bottom: 4px;
  color: var(--jmp-muted);
  font-size: 8px;
}

.jmp-contact-card strong,
.jmp-contact-card a {
  display: block;
  color: var(--jmp-black);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.8;
}

.jmp-contact-card a {
  direction: ltr;
  text-align: right;
}

/* Contact Main */

.jmp-contact-main {
  display: grid;
  grid-template-columns: minmax(360px, .78fr) minmax(540px, 1.22fr);
  gap: 18px;
}

.jmp-contact-copy-panel,
.jmp-contact-form-panel {
  border-radius: 26px;
  border: 1px solid rgba(18,18,18,.08);
}

.jmp-contact-copy-panel {
  padding: clamp(32px, 4vw, 50px);
  position: relative;
  overflow: hidden;
  color: var(--jmp-white);
  background: linear-gradient(145deg, #0c0c0c, #242424);
}

.jmp-contact-copy-panel::after {
  content: "JM";
  position: absolute;
  left: 20px;
  bottom: -12px;
  color: rgba(255,255,255,.035);
  font-family: var(--jm-font-num);
  font-size: 120px;
  font-weight: 900;
}

.jmp-contact-copy-panel .jmp-eyebrow {
  color: var(--jmp-silver);
}

.jmp-contact-copy-panel h2 {
  margin: 16px 0 15px;
  color: var(--jmp-white) !important;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 850;
  line-height: 1.5;
}

.jmp-contact-copy-panel > p {
  margin: 0;
  color: #969696;
  font-size: 12px;
  line-height: 2.1;
}

.jmp-contact-notes {
  margin-top: 27px;
  display: grid;
  gap: 8px;
}

.jmp-contact-note {
  padding: 13px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
}

.jmp-contact-note span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--jmp-black);
  background: var(--jmp-soft);
  font-family: var(--jm-font-num);
  font-size: 9px;
  font-weight: 800;
}

.jmp-contact-note strong {
  display: block;
  color: var(--jmp-white);
  font-size: 10px;
}

.jmp-contact-note small {
  display: block;
  margin-top: 3px;
  color: #777;
  font-size: 8px;
  line-height: 1.7;
}

.jmp-contact-direct {
  margin-top: 25px;
  padding-top: 20px;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.1);
}

.jmp-contact-direct small {
  display: block;
  margin-bottom: 5px;
  color: #777;
  font-size: 8px;
}

.jmp-contact-direct a {
  direction: ltr;
  display: inline-block;
  color: var(--jmp-white);
  font-size: 22px;
  font-weight: 850;
}

.jmp-contact-form-panel {
  padding: clamp(28px, 4vw, 48px);
  background: var(--jmp-white);
}

.jmp-contact-form-head {
  margin-bottom: 23px;
}

.jmp-contact-form-head h2 {
  margin: 10px 0 8px;
  color: var(--jmp-black) !important;
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 850;
  line-height: 1.5;
}

.jmp-contact-form-head p {
  margin: 0;
  color: var(--jmp-text);
  font-size: 11px;
  line-height: 2;
}

.jmp-contact-form .wpforms-container {
  margin: 0 !important;
}

.jmp-contact-form .wpforms-field {
  padding: 0 0 14px !important;
}

.jmp-contact-form .wpforms-field-label {
  margin-bottom: 7px !important;
  color: var(--jmp-black) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.jmp-contact-form .wpforms-field-sublabel {
  margin-top: 6px !important;
  color: var(--jmp-muted) !important;
  font-size: 8px !important;
}

.jmp-contact-form input[type="text"],
.jmp-contact-form input[type="email"],
.jmp-contact-form input[type="tel"],
.jmp-contact-form textarea,
.jmp-contact-form select {
  width: 100% !important;
  max-width: none !important;
  min-height: 50px !important;
  padding: 12px 14px !important;
  color: var(--jmp-black) !important;
  background: var(--jmp-soft) !important;
  border: 1px solid #e2e2df !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 11px !important;
  transition: border-color .2s ease, background-color .2s ease !important;
}

.jmp-contact-form textarea {
  min-height: 145px !important;
  resize: vertical;
}

.jmp-contact-form input:focus,
.jmp-contact-form textarea:focus,
.jmp-contact-form select:focus {
  outline: none !important;
  background: var(--jmp-white) !important;
  border-color: var(--jmp-black) !important;
  box-shadow: 0 0 0 3px rgba(18,18,18,.06) !important;
}

.jmp-contact-form .wpforms-submit-container {
  margin-top: 3px !important;
}

.jmp-contact-form button[type="submit"],
.jmp-contact-form .wpforms-submit {
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 11px !important;
  color: var(--jmp-white) !important;
  background: var(--jmp-black) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transition: transform .25s ease, background-color .25s ease !important;
}

.jmp-contact-form button[type="submit"]:hover,
.jmp-contact-form .wpforms-submit:hover {
  transform: translateY(-2px);
  background: var(--jmp-secondary) !important;
}

.jmp-contact-form .wpforms-error,
.jmp-contact-form label.wpforms-error {
  color: #b42318 !important;
  font-size: 9px !important;
}

.jmp-contact-form .wpforms-confirmation-container-full {
  margin: 0 !important;
  padding: 17px !important;
  border: 1px solid #d9e6d9 !important;
  border-radius: 11px !important;
  color: #254725 !important;
  background: #f5faf5 !important;
}

.jmp-form-fallback {
  padding: 24px;
  text-align: center;
  border-radius: 14px;
  color: var(--jmp-text);
  background: var(--jmp-soft);
  border: 1px solid var(--jmp-border);
  font-size: 12px;
  line-height: 2;
}

/* Responsive */

@media (max-width: 1100px) {
  .jmp-about-hero {
    grid-template-columns: minmax(420px,1fr) minmax(350px,.8fr);
  }

.jmp-about-copy {
  padding: 48px 38px;
}

.jmp-process-grid,
.jmp-branches-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.jmp-contact-strip {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.jmp-contact-main {
  grid-template-columns: minmax(320px,.8fr) minmax(450px,1.2fr);
}
}

@media (max-width: 900px) {
  .jmp-about-hero,
  .jmp-story-grid,
  .jmp-contact-main {
    grid-template-columns: 1fr;
  }

.jmp-about-visual {
  min-height: 520px;
}

.jmp-about-principles {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.jmp-contact-hero {
  grid-template-columns: 1fr;
  align-items: start;
}

.jmp-contact-badge {
  width: 118px;
  height: 118px;
}
}

@media (max-width: 767px) {
  .jmp-page {
    padding: 14px var(--jm-gutter-m) 48px;
  }

.jmp-section {
  margin-top: 12px;
}

.jmp-section-head {
  margin-bottom: 18px;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}

.jmp-about-hero,
.jmp-contact-hero {
  border-radius: 22px;
}

.jmp-about-copy {
  padding: 33px 22px;
}

.jmp-about-copy h1 {
  font-size: clamp(39px, 12vw, 55px);
}

.jmp-about-copy > p {
  font-size: 12px;
}

.jmp-about-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.jmp-button {
  width: 100%;
}

.jmp-about-visual {
  min-height: 450px;
}

.jmp-material-stack {
  transform: translate(50%, -46%) scale(.82);
}

.jmp-about-principles {
  grid-template-columns: 1fr;
  border-radius: 0 0 18px 18px;
}

.jmp-story-main,
.jmp-story-side,
.jmp-branches-panel,
.jmp-about-cta,
.jmp-contact-copy-panel,
.jmp-contact-form-panel {
  border-radius: 20px;
}

.jmp-story-main,
.jmp-story-side {
  padding: 28px 21px;
}

.jmp-process-grid,
.jmp-branches-grid,
.jmp-contact-strip {
  grid-template-columns: 1fr;
}

.jmp-process-card {
  min-height: 190px;
}

.jmp-branches-panel {
  padding: 14px;
}

.jmp-branch-card {
  min-height: 235px;
}

.jmp-about-cta {
  padding: 28px 22px;
  align-items: flex-start;
  flex-direction: column;
}

.jmp-contact-hero {
  min-height: 390px;
  padding: 34px 22px;
}

.jmp-contact-hero h1 {
  font-size: clamp(40px, 12vw, 56px);
}

.jmp-contact-badge {
  width: 105px;
  height: 105px;
}

.jmp-contact-main {
  gap: 12px;
}

.jmp-contact-copy-panel,
.jmp-contact-form-panel {
  padding: 29px 21px;
}

.jmp-contact-direct a {
  font-size: 18px;
}
}

@media (prefers-reduced-motion: reduce) {
  .jmp-page *,
  .jmp-page *::before,
  .jmp-page *::after {
    transition: none !important;
  }
}

/* ==========================================================================
   ABOUT PAGE — Branch Image Placeholders
   ========================================================================== */

.jmp-branch-image {
	width: 100%;
	height: 135px;
	margin-top: 14px;
	position: relative;
	overflow: hidden;
	border-radius: 13px;
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.055),
			rgba(255, 255, 255, 0.018)
		);
	border: 1px dashed rgba(255, 255, 255, 0.15);
}

.jmp-branch-image::before,
.jmp-branch-image::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.jmp-branch-image::before {
	width: 75px;
	height: 75px;
	top: 50%;
	left: 50%;
	border: 1px solid rgba(255, 255, 255, 0.07);
	transform: translate(-50%, -50%) rotate(45deg);
}

.jmp-branch-image::after {
	width: 115%;
	height: 1px;
	top: 50%;
	left: -7%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.07),
		transparent
	);
	transform: rotate(-10deg);
}

.jmp-branch-card h3 {
	margin-top: 18px;
}

.jmp-branch-card p {
	min-height: 80px;
}


/* تبلت */

@media (max-width: 1100px) {

	.jmp-branch-image {
		height: 150px;
	}
}


/* موبایل */

@media (max-width: 767px) {

	.jmp-branch-image {
		height: 165px;
		margin-top: 12px;
	}

	.jmp-branch-card p {
		min-height: 0;
	}
}
.jmp-branch-image img {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	z-index: 2;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s ease;
}

.jmp-branch-card:hover .jmp-branch-image img {
	transform: scale(1.045);
}
/* ==========================================================================
   04. HOME HERO — هیرو صفحه اصلی
   کلاس‌ها: .arta-*  |  استفاده در: home
   ========================================================================== */

.arta-premium-hero {
  --arta-black: #121212;
  --arta-dark: #191919;
  --arta-charcoal: #242424;
  --arta-gray: #5f5f5f;
  --arta-muted: #9a9a9a;
  --arta-border: rgba(18, 18, 18, 0.12);
  --arta-white: #ffffff;

  width: 100%;
  direction: rtl;
  font-family: inherit;
  background: transparent;
  padding: 22px var(--jm-gutter) 30px;
}

.arta-premium-hero,
.arta-premium-hero * {
  box-sizing: border-box;
}

.arta-premium-hero a {
  text-decoration: none;
}

.arta-premium-hero button,
.arta-premium-hero a {
  font-family: inherit;
}

.arta-premium-hero svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arta-hero-grid {
  max-width: var(--jm-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns:
  minmax(430px, 1.28fr)
  minmax(330px, 0.92fr)
  minmax(250px, 0.7fr);
  grid-template-areas: "content slider sidebar";
  gap: 16px;
  align-items: stretch;
}

/* بخش محتوای اصلی */

.arta-hero-content {
  grid-area: content;
  min-height: 690px;
  padding: clamp(34px, 4vw, 62px);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  color: var(--arta-white);
  background:
  radial-gradient(
  circle at 12% 0%,
  rgba(255, 255, 255, 0.1),
  transparent 31%
  ),
  radial-gradient(
  circle at 85% 100%,
  rgba(255, 255, 255, 0.06),
  transparent 33%
  ),
  linear-gradient(145deg, #0c0c0c, #1b1b1b 65%, #111111);
  box-shadow: 0 22px 65px rgba(18, 18, 18, 0.15);
}

.arta-hero-content::before,
.arta-hero-content::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.2;
}

.arta-hero-content::before {
  width: 400px;
  height: 1px;
  top: 80px;
  left: -60px;
  transform: rotate(-26deg);
  background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.65),
  transparent
  );
}

.arta-hero-content::after {
  width: 330px;
  height: 330px;
  left: -170px;
  bottom: -170px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.arta-hero-content > * {
  position: relative;
  z-index: 2;
}

.arta-eyebrow {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  color: #d8d8d8;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 13px;
}

.arta-spark {
  color: #ffffff;
  font-size: 13px;
}

.arta-hero-title {
  max-width: 650px;
  margin: 30px 0 20px;
  color: #ffffff !important;
  font-size: clamp(48px, 5.25vw, 82px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -1.5px;
}

.arta-hero-title span {
  display: block;
  color: #d7d7d7;
}

.arta-hero-description {
  max-width: 620px;
  margin: 0 0 30px;
  color: #bdbdbd;
  font-size: 16px;
  font-weight: 400;
  line-height: 2.15;
}

.arta-hero-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.arta-button {
  min-height: 54px;
  padding: 0 22px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  transition:
  transform 0.25s ease,
  background-color 0.25s ease,
  border-color 0.25s ease;
}

.arta-button:hover {
  transform: translateY(-3px);
}

.arta-button-light {
  min-width: 190px;
  color: #121212;
  background: #ffffff;
  border: 1px solid #ffffff;
}

.arta-button-light:hover {
  color: #121212;
  background: #eeeeec;
}

.arta-button-outline {
  min-width: 175px;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.arta-button-outline:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.07);
}

.arta-phone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 23px;
}

.arta-phone-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.arta-phone-icon svg {
  width: 20px;
  height: 20px;
}

.arta-phone-row small {
  display: block;
  margin-bottom: 2px;
  color: #9e9e9e;
  font-size: 11px;
}

.arta-phone-row a {
  direction: ltr;
  display: inline-block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.arta-material-panel {
  margin-top: 32px;
  padding: 18px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(8px);
}

.arta-material-heading {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.arta-material-heading strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
}

.arta-material-heading span {
  color: #909090;
  font-size: 11px;
}

.arta-material-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.arta-material-tabs button {
  min-width: 54px;
  height: 36px;
  padding: 0 13px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.045);
  color: #c3c3c3;
  font-size: 12px;
  cursor: pointer;
  box-shadow: none;
  transition: 0.25s ease;
}

.arta-material-tabs button:hover,
.arta-material-tabs button.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: #121212;
}

.arta-material-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.arta-material {
  min-width: 0;
  background: rgba(0, 0, 0, 0.18);
  color: #d3d3d3;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  transition: 0.25s ease;
}

.arta-material:last-child {
  border-left: 0;
}

.arta-material:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.arta-material-sample {
  display: block;
  width: 100%;
  height: 68px;
  background-size: cover;
}

.arta-material > span:last-child {
  display: block;
  padding: 10px 4px;
  font-size: 11px;
}

.sample-white {
  background:
  linear-gradient(120deg, transparent 40%, rgba(110, 110, 110, 0.25) 41%, transparent 43%),
  linear-gradient(150deg, #ffffff, #dedede 55%, #f7f7f5);
}

.sample-gray {
  background:
  linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, 0.2) 46%, transparent 48%),
  linear-gradient(145deg, #777777, #b1b1b1, #676767);
}

.sample-black {
  background:
  linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.22) 41%, transparent 42%),
  linear-gradient(145deg, #080808, #363636 60%, #111111);
}

.sample-silver {
  background:
  linear-gradient(130deg, transparent 39%, rgba(110, 110, 110, 0.18) 40%, transparent 42%),
  linear-gradient(145deg, #e7e7e5, #bdbdbd, #f1f1ef);
}

/* اسلایدر */

.arta-slider {
  grid-area: slider;
  min-height: 690px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 22px 65px rgba(18, 18, 18, 0.14);
}

.arta-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
  linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0.26),
  transparent 30%,
  transparent 58%,
  rgba(0, 0, 0, 0.58)
  );
}

.arta-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition:
  opacity 0.65s ease,
  transform 1.4s ease;
}

.arta-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.arta-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.arta-slider-top,
.arta-slider-bottom {
  position: absolute;
  right: 22px;
  left: 22px;
  z-index: 4;
}

.arta-slider-top {
  top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.arta-slider-top > span {
  padding: 8px 13px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.17);
  backdrop-filter: blur(10px);
  font-size: 11px;
}

.arta-fullscreen-button {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  color: #121212;
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  cursor: pointer;
}

.arta-fullscreen-button:hover {
  color: #121212;
  background: #ffffff;
}

.arta-fullscreen-button svg {
  width: 20px;
  height: 20px;
}

.arta-slider-bottom {
  bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.arta-slide-counter {
  color: #ffffff;
}

.arta-current-slide {
  font-size: 21px;
  font-weight: 700;
}

.arta-slide-counter small {
  margin-right: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.arta-progress {
  width: 115px;
  height: 2px;
  margin-top: 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.28);
}

.arta-progress span {
  display: block;
  width: 33.333%;
  height: 100%;
  border-radius: inherit;
  background: #ffffff;
  transition: width 0.4s ease;
}

.arta-slider-arrows {
  display: flex;
  gap: 9px;
}

.arta-slider-arrows button {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  color: #121212;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: none;
  cursor: pointer;
  transition:
  transform 0.25s ease,
  background-color 0.25s ease;
}

.arta-slider-arrows button:hover {
  color: #121212;
  background: #ffffff;
  transform: scale(1.06);
}

.arta-slider-arrows svg {
  width: 19px;
  height: 19px;
}

/* کارت‌های کناری */

.arta-side-column {
  grid-area: sidebar;
  display: grid;
  grid-template-rows: 1.15fr 1fr auto;
  gap: 14px;
}

.arta-side-card {
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(18, 18, 18, 0.1);
}

.arta-project-card {
  min-height: 278px;
  color: #ffffff;
}

.arta-project-card > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.arta-project-card:hover > img {
  transform: scale(1.05);
}

.arta-card-overlay {
  position: absolute;
  inset: 0;
  background:
  linear-gradient(
  to top,
  rgba(0, 0, 0, 0.84),
  rgba(0, 0, 0, 0.18) 72%
  );
}

.arta-card-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 24px;
}

.arta-card-label {
  display: inline-block;
  margin-bottom: 11px;
  color: #a8a8a8;
  font-size: 11px;
}

.arta-card-content h3,
.arta-consultation-card h3 {
  margin: 0;
  color: #ffffff !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.65;
}

.arta-card-link {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}

.arta-card-link svg {
  width: 17px;
  height: 17px;
}

.arta-consultation-card {
  min-height: 250px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #121212, #272727);
}

.arta-consultation-text {
  min-width: 0;
}

.arta-consultation-card h3 {
  font-size: 18px;
}

.arta-consultation-card p {
  margin: 9px 0 15px;
  color: #ababab;
  font-size: 12px;
  line-height: 1.9;
}

.arta-consultation-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
}

.arta-consultation-card a svg {
  width: 16px;
  height: 16px;
}

.arta-consultation-image {
  height: 132px;
  align-self: center;
  overflow: hidden;
  border-radius: 46px 46px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.arta-consultation-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arta-mini-features {
  padding: 17px;
  display: grid;
  gap: 13px;
  border-radius: 19px;
  background: #ffffff;
  border: 1px solid var(--arta-border);
  box-shadow: 0 16px 35px rgba(18, 18, 18, 0.06);
}

.arta-mini-features > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.arta-feature-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #ffffff;
  background: #191919;
}

.arta-feature-icon svg {
  width: 19px;
  height: 19px;
}

.arta-mini-features strong {
  display: block;
  color: #181818;
  font-size: 12px;
}

.arta-mini-features small {
  display: block;
  margin-top: 2px;
  color: #888888;
  font-size: 10px;
}

/* ویژگی‌های پایین */

.arta-bottom-features {
  max-width: var(--jm-container);
  min-height: 94px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, #111111, #292929);
  box-shadow: 0 20px 50px rgba(18, 18, 18, 0.12);
}

.arta-bottom-item {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.arta-bottom-item:last-child {
  border-left: 0;
}

.arta-bottom-item > span {
  color: rgba(255, 255, 255, 0.24);
  font-size: 29px;
  font-weight: 800;
}

.arta-bottom-item strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
}

.arta-bottom-item small {
  display: block;
  margin-top: 5px;
  color: #9f9f9f;
  font-size: 11px;
}

/* لپ‌تاپ */

@media (max-width: 1280px) {
  .arta-premium-hero {
    padding-right: 14px;
    padding-left: 14px;
  }

.arta-hero-grid {
  grid-template-columns:
  minmax(390px, 1.2fr)
  minmax(300px, 0.88fr)
  minmax(230px, 0.67fr);
  gap: 12px;
}

.arta-hero-content,
.arta-slider {
  min-height: 635px;
}

.arta-hero-content {
  padding: 38px;
}

.arta-hero-title {
  font-size: clamp(45px, 5vw, 66px);
}

.arta-hero-description {
  font-size: 14px;
}

.arta-material-panel {
  margin-top: 24px;
}

.arta-material-heading {
  align-items: flex-start;
  flex-direction: column;
}

.arta-material-sample {
  height: 58px;
}

.arta-consultation-card {
  grid-template-columns: 1fr 75px;
  padding: 19px;
}
}

/* تبلت و نمایشگر کوچک */

@media (max-width: 1050px) {
  .arta-hero-grid {
    grid-template-columns: minmax(380px, 1fr) minmax(330px, 0.88fr);
    grid-template-areas:
    "content slider"
    "sidebar sidebar";
  }

.arta-side-column {
  grid-template-columns: 1.2fr 1fr 0.8fr;
  grid-template-rows: none;
}

.arta-project-card,
.arta-consultation-card {
  min-height: 250px;
}

.arta-mini-features {
  align-content: center;
}
}

/* موبایل */

@media (max-width: 767px) {
  .arta-premium-hero {
    padding: 12px var(--jm-gutter-m) 22px;
  }

.arta-hero-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.arta-hero-content {
  order: 1;
  min-height: auto;
  padding: 30px 22px 24px;
  border-radius: 20px;
}

.arta-slider {
  order: 2;
  width: 100%;
  min-height: 0;
  height: 510px;
  border-radius: 20px;
}

.arta-side-column {
  order: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.arta-eyebrow {
  padding: 8px 12px;
  font-size: 11px;
}

.arta-hero-title {
  margin-top: 22px;
  font-size: clamp(39px, 12vw, 54px);
  line-height: 1.32;
}

.arta-hero-description {
  margin-bottom: 23px;
  font-size: 13px;
  line-height: 2;
}

.arta-hero-buttons {
  display: grid;
  grid-template-columns: 1fr;
}

.arta-button {
  width: 100%;
  min-width: 0;
}

.arta-phone-row {
  margin-top: 19px;
}

.arta-material-heading {
  align-items: flex-start;
  flex-direction: column;
}

.arta-material-tabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.arta-material-tabs button {
  width: 100%;
  min-width: 0;
  padding: 0 5px;
  font-size: 10px;
}

.arta-material-list {
  grid-template-columns: repeat(2, 1fr);
}

.arta-material {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.arta-material-sample {
  height: 68px;
}

.arta-project-card {
  height: 300px;
}

.arta-consultation-card {
  min-height: 230px;
  grid-template-columns: 1fr 92px;
  padding: 22px;
}

.arta-mini-features {
  grid-template-columns: repeat(2, 1fr);
}

.arta-bottom-features {
  grid-template-columns: repeat(2, 1fr);
  border-radius: 18px;
}

.arta-bottom-item {
  min-height: 95px;
  padding: 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.arta-bottom-item > span {
  font-size: 24px;
}
}

@media (max-width: 430px) {
  .arta-slider {
    height: 445px;
  }

.arta-hero-title {
  font-size: 40px;
}

.arta-consultation-card {
  grid-template-columns: 1fr 78px;
}

.arta-consultation-image {
  height: 118px;
}

.arta-bottom-features {
  grid-template-columns: 1fr;
}

.arta-bottom-item {
  border-left: 0;
}
}


/* ==========================================================================
   05. HOME ABOUT — سکشن درباره ما در صفحه اصلی
   کلاس‌ها: .jm-about-*  |  استفاده در: home
   ========================================================================== */

.jm-about-section {
  --jm-black: #121212;
  --jm-dark: #1a1a1a;
  --jm-charcoal: #232323;
  --jm-secondary: #3a3a3a;
  --jm-text: #5f5f5f;
  --jm-muted: #8a8a8a;
  --jm-silver: #c6c6c6;
  --jm-border: #d9d9d9;
  --jm-soft: #f7f7f5;
  --jm-white: #ffffff;

  width: 100%;
  padding: 70px var(--jm-gutter);
  background: transparent;
  direction: rtl;
  font-family: var(--jm-font);
}

.jm-about-section,
.jm-about-section * {
  box-sizing: border-box;
}

.jm-about-section a {
  text-decoration: none;
}

.jm-about-section svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jm-about-shell {
  width: 100%;
  max-width: var(--jm-container);
  min-height: 670px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(500px, 1.1fr);
  gap: 18px;
}

/* بخش تصویر */

.jm-about-visual {
  min-width: 0;
  position: relative;
  min-height: 670px;
  padding: 18px;
  overflow: hidden;
  border-radius: 28px;
  background:
  linear-gradient(
  135deg,
  rgba(18, 18, 18, 0.03),
  rgba(198, 198, 198, 0.2)
  ),
  var(--jm-white);
  border: 1px solid rgba(18, 18, 18, 0.08);
  box-shadow: 0 25px 70px rgba(18, 18, 18, 0.08);
}

.jm-about-visual::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  top: -180px;
  right: -150px;
  border-radius: 50%;
  border: 1px solid rgba(18, 18, 18, 0.08);
}

.jm-about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
  linear-gradient(
  135deg,
  transparent 47%,
  rgba(18, 18, 18, 0.035) 48%,
  transparent 49%
  );
  background-size: 80px 80px;
}

.jm-about-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 505px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--jm-charcoal);
}

.jm-about-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.jm-about-visual:hover .jm-about-image img {
  transform: scale(1.035);
}

.jm-image-shade {
  position: absolute;
  inset: 0;
  background:
  linear-gradient(
  to top,
  rgba(0, 0, 0, 0.72),
  transparent 48%
  );
}

.jm-image-label {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--jm-white);
}

.jm-label-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: var(--jm-white);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.13);
}

.jm-image-label small {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
}

.jm-image-label strong {
  display: block;
  color: var(--jm-white);
  font-size: 16px;
  font-weight: 700;
}

.jm-material-showcase {
  position: absolute;
  z-index: 4;
  left: 40px;
  bottom: 60px;
  width: 205px;
  height: 150px;
}

.jm-material-tile {
  position: absolute;
  width: 100px;
  height: 132px;
  bottom: 0;
  overflow: hidden;
  border-radius: 9px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 16px 35px rgba(18, 18, 18, 0.22);
}

.jm-material-tile span {
  position: absolute;
  right: 8px;
  bottom: 7px;
  font-size: 10px;
  font-weight: 700;
}

.jm-tile-black {
  left: 0;
  z-index: 1;
  transform: rotate(-7deg);
  color: rgba(255, 255, 255, 0.65);
  background:
  linear-gradient(
  125deg,
  transparent 42%,
  rgba(255, 255, 255, 0.24) 43%,
  transparent 44%
  ),
  linear-gradient(145deg, #080808, #353535, #111111);
}

.jm-tile-gray {
  left: 49px;
  z-index: 2;
  transform: rotate(-1deg);
  color: rgba(255, 255, 255, 0.7);
  background:
  linear-gradient(
  125deg,
  transparent 45%,
  rgba(255, 255, 255, 0.2) 46%,
  transparent 47%
  ),
  linear-gradient(145deg, #777777, #b6b6b6, #626262);
}

.jm-tile-white {
  left: 97px;
  z-index: 3;
  transform: rotate(6deg);
  color: rgba(18, 18, 18, 0.5);
  background:
  linear-gradient(
  125deg,
  transparent 44%,
  rgba(90, 90, 90, 0.25) 45%,
  transparent 47%
  ),
  linear-gradient(145deg, #ffffff, #dedede, #f7f7f5);
}

.jm-visual-note {
  position: absolute;
  z-index: 5;
  right: 38px;
  bottom: 40px;
  max-width: 245px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(18, 18, 18, 0.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 35px rgba(18, 18, 18, 0.1);
}

.jm-note-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--jm-white);
  background: var(--jm-black);
}

.jm-note-icon svg {
  width: 20px;
  height: 20px;
}

.jm-visual-note strong {
  display: block;
  color: var(--jm-black);
  font-size: 12px;
}

.jm-visual-note small {
  display: block;
  margin-top: 3px;
  color: var(--jm-muted);
  font-size: 10px;
}

/* بخش محتوا */

.jm-about-content {
  min-width: 0;
  min-height: 670px;
  padding: clamp(38px, 5vw, 72px);
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  color: var(--jm-white);
  background:
  radial-gradient(
  circle at 10% 0%,
  rgba(255, 255, 255, 0.09),
  transparent 30%
  ),
  linear-gradient(145deg, #0b0b0b, #1c1c1c 66%, #121212);
  box-shadow: 0 25px 70px rgba(18, 18, 18, 0.15);
}

.jm-about-content::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  left: -250px;
  bottom: -260px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.jm-about-content::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 1px;
  top: 105px;
  left: -45px;
  transform: rotate(-28deg);
  background:
  linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.25),
  transparent
  );
}

.jm-about-content > * {
  position: relative;
  z-index: 2;
}

.jm-about-eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--jm-silver);
  font-size: 12px;
  font-weight: 600;
}

.jm-about-eyebrow i {
  width: 52px;
  height: 1px;
  display: block;
  background:
  linear-gradient(
  90deg,
  var(--jm-silver),
  transparent
  );
}

.jm-about-title {
  max-width: 660px;
  margin: 25px 0 22px;
  color: var(--jm-white) !important;
  font-size: clamp(40px, 4.2vw, 66px);
  font-weight: 800;
  line-height: 1.38;
  letter-spacing: -1px;
}

.jm-about-title span {
  display: block;
  color: var(--jm-silver);
}

.jm-about-lead {
  max-width: 670px;
  margin: 0 0 14px;
  color: #eeeeee;
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
}

.jm-about-description {
  max-width: 700px;
  margin: 0;
  color: #a9a9a9;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.15;
}

.jm-about-services {
  margin-top: 28px;
  display: grid;
  gap: 2px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.jm-service-item {
  min-height: 76px;
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 13px;
  background: rgba(255, 255, 255, 0.038);
  transition: background-color 0.25s ease;
}

.jm-service-item:hover {
  background: rgba(255, 255, 255, 0.075);
}

.jm-service-number {
  color: rgba(255, 255, 255, 0.28);
  font-size: 19px;
  font-weight: 800;
}

.jm-service-item strong {
  display: block;
  color: var(--jm-white);
  font-size: 13px;
}

.jm-service-item p {
  margin: 4px 0 0;
  color: #929292;
  font-size: 11px;
  line-height: 1.7;
}

.jm-about-actions {
  margin-top: 27px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
}

.jm-button {
  min-height: 52px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  transition:
  transform 0.25s ease,
  background-color 0.25s ease,
  border-color 0.25s ease;
}

.jm-button:hover {
  transform: translateY(-3px);
}

.jm-button-primary {
  min-width: 174px;
  color: var(--jm-black);
  background: var(--jm-white);
  border: 1px solid var(--jm-white);
}

.jm-button-primary:hover {
  color: var(--jm-black);
  background: #ececea;
}

.jm-button-secondary {
  min-width: 165px;
  color: var(--jm-white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.jm-button-secondary:hover {
  color: var(--jm-white);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.45);
}

.jm-about-contact {
  margin-top: 28px;
  padding-top: 23px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.jm-contact-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--jm-black);
  background: var(--jm-silver);
}

.jm-contact-icon svg {
  width: 19px;
  height: 19px;
}

.jm-about-contact small {
  display: block;
  margin-bottom: 3px;
  color: #858585;
  font-size: 10px;
}

.jm-about-contact a {
  direction: ltr;
  display: inline-block;
  color: var(--jm-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.jm-contact-line {
  width: 1px;
  height: 35px;
  margin: 0 5px;
  background: rgba(255, 255, 255, 0.13);
}

.jm-about-contact p {
  max-width: 260px;
  margin: 0;
  color: #898989;
  font-size: 10px;
  line-height: 1.8;
}

/* لپ‌تاپ */

@media (max-width: 1200px) {
  .jm-about-section {
    padding-right: 14px;
    padding-left: 14px;
  }

.jm-about-shell {
  grid-template-columns:
  minmax(360px, 0.9fr)
  minmax(460px, 1.1fr);
}

.jm-about-content {
  padding: 45px 38px;
}

.jm-about-title {
  font-size: clamp(40px, 4.5vw, 56px);
}

.jm-material-showcase {
  transform: scale(0.9);
  transform-origin: bottom left;
}

.jm-visual-note {
  max-width: 220px;
}
}

/* تبلت */

@media (max-width: 950px) {
  .jm-about-shell {
    grid-template-columns: 1fr;
  }

.jm-about-visual {
  min-height: 570px;
  order: 2;
}

.jm-about-content {
  min-height: auto;
  order: 1;
}
}

/* موبایل */

@media (max-width: 767px) {
  .jm-about-section {
    padding: 40px var(--jm-gutter-m);
  }

.jm-about-shell {
  gap: 12px;
}

.jm-about-content,
.jm-about-visual {
  border-radius: 21px;
}

.jm-about-content {
  padding: 32px 22px;
}

.jm-about-title {
  margin-top: 20px;
  font-size: clamp(36px, 11vw, 47px);
  line-height: 1.42;
}

.jm-about-lead {
  font-size: 14px;
}

.jm-about-description {
  font-size: 12px;
  line-height: 2;
}

.jm-service-item {
  grid-template-columns: 34px 1fr;
  padding: 14px;
}

.jm-about-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.jm-button {
  width: 100%;
  min-width: 0;
}

.jm-about-contact {
  align-items: flex-start;
  flex-wrap: wrap;
}

.jm-contact-line {
  display: none;
}

.jm-about-contact p {
  width: 100%;
  max-width: none;
  margin-top: 6px;
}

.jm-about-visual {
  min-height: 510px;
  padding: 12px;
}

.jm-about-image {
  height: 380px;
  border-radius: 17px;
}

.jm-image-label {
  right: 17px;
  bottom: 17px;
  left: 17px;
}

.jm-material-showcase {
  left: 15px;
  bottom: 28px;
  transform: scale(0.72);
  transform-origin: bottom left;
}

.jm-visual-note {
  right: 20px;
  bottom: 22px;
  max-width: 210px;
  padding: 12px;
}
}

@media (max-width: 430px) {
  .jm-about-visual {
    min-height: 490px;
  }

.jm-about-image {
  height: 350px;
}

.jm-material-showcase {
  display: none;
}

.jm-visual-note {
  right: 18px;
  left: 18px;
  max-width: none;
}

.jm-image-label strong {
  font-size: 14px;
}
}


/* ویدئوی اصلی انبار */

.jm-about-video-wrap {
	position: relative;
}

.jm-about-video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	background: #121212;
	transform: scale(1.001);
	transition: transform 0.9s ease;
}

.jm-about-visual:hover .jm-about-video {
	transform: scale(1.035);
}


/* دکمه مشاهده ویدئو */

.jm-about-video-link {
	min-height: 43px;
	padding: 6px 13px 6px 7px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 6;
	border-radius: 999px;
	color: #121212;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.65);
	box-shadow: 0 12px 28px rgba(18, 18, 18, 0.16);
	backdrop-filter: blur(12px);
	font-size: 10px;
	font-weight: 800;
	transition:
		transform 0.25s ease,
		background-color 0.25s ease;
}

.jm-about-video-link:hover {
	color: #121212;
	background: #ffffff;
	transform: translateY(-3px);
}

.jm-about-video-link-icon {
	width: 31px;
	height: 31px;
	flex: 0 0 31px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #ffffff;
	background: #121212;
}

.jm-about-video-link-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke: none;
}


/* لوگوی شناور مجموعه */

.jm-about-brand-mark {
	min-height: 72px;
	padding: 8px 9px 8px 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	position: absolute;
	top: 38px;
	right: 38px;
	z-index: 7;
	border-radius: 17px;
	color: #121212;
	background: rgba(255, 255, 255, 0.93);
	border: 1px solid rgba(18, 18, 18, 0.08);
	box-shadow: 0 15px 35px rgba(18, 18, 18, 0.14);
	backdrop-filter: blur(15px);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.jm-about-brand-mark:hover {
	color: #121212;
	transform: translateY(-4px);
	box-shadow: 0 20px 42px rgba(18, 18, 18, 0.18);
}

.jm-about-brand-logo {
	width: 55px;
	height: 55px;
	flex: 0 0 55px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 13px;
	background: #f7f7f5;
	border: 1px solid rgba(18, 18, 18, 0.08);
}

.jm-about-brand-logo img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center;
}

.jm-about-brand-copy {
	min-width: 0;
}

.jm-about-brand-copy small {
	display: block;
	margin-bottom: 2px;
	color: #777777;
	font-size: 8px;
	font-weight: 700;
	white-space: nowrap;
}

.jm-about-brand-copy strong {
	display: block;
	color: #121212;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.4;
}


/* کارت سابقه فعالیت */

.jm-about-experience {
	margin-top: 22px;
	padding: 14px;
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) 1px minmax(145px, 0.55fr);
	align-items: center;
	gap: 14px;
	overflow: hidden;
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.11);
}

.jm-about-experience-year {
	width: 68px;
	height: 68px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	color: #121212;
	background: #ffffff;
	font-family: var(--jm-font-num);
	font-size: 20px;
	font-weight: 900;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.jm-about-experience-copy,
.jm-about-experience-meta {
	min-width: 0;
}

.jm-about-experience small {
	display: block;
	margin-bottom: 4px;
	color: #858585;
	font-size: 8px;
}

.jm-about-experience strong {
	display: block;
	color: #ffffff;
	font-size: 11px;
	font-weight: 750;
	line-height: 1.8;
}

.jm-about-experience-line {
	width: 1px;
	height: 42px;
	display: block;
	background: rgba(255, 255, 255, 0.13);
}

.jm-about-experience-meta strong {
	color: #c6c6c6;
	font-size: 10px;
}


/* لپ‌تاپ */

@media (max-width: 1200px) {

	.jm-about-brand-mark {
		top: 32px;
		right: 32px;
	}

	.jm-about-experience {
		grid-template-columns: 62px minmax(0, 1fr);
	}

	.jm-about-experience-year {
		width: 62px;
		height: 62px;
	}

	.jm-about-experience-line,
	.jm-about-experience-meta {
		display: none;
	}
}


/* موبایل و تبلت */

@media (max-width: 767px) {

	.jm-about-video-link {
		min-height: 39px;
		top: 14px;
		left: 14px;
		padding-right: 10px;
		font-size: 8px;
	}

	.jm-about-video-link-icon {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}

	.jm-about-brand-mark {
		min-height: 58px;
		top: 26px;
		right: 26px;
		padding: 6px 7px 6px 11px;
		border-radius: 14px;
	}

	.jm-about-brand-logo {
		width: 44px;
		height: 44px;
		flex-basis: 44px;
		border-radius: 10px;
	}

	.jm-about-brand-copy small {
		font-size: 6.5px;
	}

	.jm-about-brand-copy strong {
		font-size: 13px;
	}

	.jm-about-experience {
		margin-top: 18px;
		padding: 11px;
		grid-template-columns: 57px minmax(0, 1fr);
		gap: 11px;
		border-radius: 13px;
	}

	.jm-about-experience-year {
		width: 57px;
		height: 57px;
		font-size: 17px;
	}

	.jm-about-experience strong {
		font-size: 10px;
	}
}


/* موبایل کوچک */

@media (max-width: 430px) {

	.jm-about-brand-mark {
		top: 22px;
		right: 22px;
	}

	.jm-about-brand-copy {
		display: none;
	}

	.jm-about-brand-mark {
		padding: 6px;
	}

	.jm-about-video-link > span:last-child {
		display: none;
	}

	.jm-about-video-link {
		width: 39px;
		padding: 5px;
		justify-content: center;
	}

	.jm-about-video-link-icon {
		width: 29px;
		height: 29px;
		flex-basis: 29px;
	}
}


/* کاهش حرکت برای کاربران حساس به انیمیشن */

@media (prefers-reduced-motion: reduce) {

	.jm-about-video,
	.jm-about-video-link,
	.jm-about-brand-mark {
		transition: none !important;
	}
}
/* ==========================================================================
   06. HOME REVIEWS — نظرات مشتریان
   کلاس‌ها: .jm-review*  |  استفاده در: home
   ========================================================================== */

.jm-customer-reviews {
  --jm-black: #121212;
  --jm-dark: #1a1a1a;
  --jm-charcoal: #2b2b2b;
  --jm-text: #5f5f5f;
  --jm-muted: #8a8a8a;
  --jm-silver: #c6c6c6;
  --jm-border: #d9d9d9;
  --jm-soft: #f7f7f5;
  --jm-white: #ffffff;

  width: 100%;
  padding: 74px var(--jm-gutter);
  direction: rtl;
  background: transparent;
  font-family: var(--jm-font);
}

.jm-customer-reviews,
.jm-customer-reviews * {
  box-sizing: border-box;
}

.jm-customer-reviews button {
  font-family: inherit;
}

.jm-reviews-shell {
  width: 100%;
  max-width: var(--jm-container);
  margin: 0 auto;
}

/* Header */

.jm-reviews-header {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
}

.jm-reviews-heading {
  max-width: 800px;
}

.jm-reviews-kicker {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--jm-muted);
  font-size: 11px;
  font-weight: 600;
}

.jm-reviews-kicker span {
  width: 32px;
  height: 1px;
  background: var(--jm-black);
}

.jm-reviews-heading h2 {
  margin: 0;
  color: var(--jm-black) !important;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1px;
}

.jm-reviews-heading h2 strong {
  display: block;
  color: var(--jm-black);
  font-weight: 900;
}

.jm-reviews-heading p {
  max-width: 690px;
  margin: 13px 0 0;
  color: var(--jm-text);
  font-size: 13px;
  line-height: 2;
}

.jm-reviews-counter {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 10px;
}

.jm-reviews-counter strong {
  color: var(--jm-black);
  font-family: var(--jm-font-num);
  font-size: 28px;
}

.jm-reviews-counter i {
  width: 45px;
  height: 1px;
  background: var(--jm-border);
}

.jm-reviews-counter span {
  color: var(--jm-muted);
  font-family: var(--jm-font-num);
  font-size: 12px;
}

/* Review Stage */

.jm-reviews-stage {
  min-height: 430px;
  position: relative;
}

.jm-review-item {
  position: absolute;
  inset: 0;
  min-height: 430px;
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  background: var(--jm-white);
  border: 1px solid rgba(18, 18, 18, 0.09);
  box-shadow: 0 24px 65px rgba(18, 18, 18, 0.08);
  transition:
  opacity 0.45s ease,
  transform 0.45s ease,
  visibility 0.45s;
}

.jm-review-item.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Black side */

.jm-review-side {
  min-height: 430px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  color: var(--jm-white);
  background:
  radial-gradient(
  circle at 20% 0%,
  rgba(255, 255, 255, 0.11),
  transparent 35%
  ),
  linear-gradient(
  145deg,
  #0b0b0b,
  #242424
  );
}

.jm-review-side::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -170px;
  bottom: -160px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.jm-review-side::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.13;
  background-image:
  linear-gradient(
  135deg,
  transparent 47%,
  rgba(255, 255, 255, 0.25) 48%,
  transparent 49%
  );
  background-size: 70px 70px;
}

.jm-review-side > * {
  position: relative;
  z-index: 2;
}

.jm-review-index {
  color: rgba(255, 255, 255, 0.24);
  font-family: var(--jm-font-num);
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
}

.jm-review-side-bottom span {
  display: block;
  margin-bottom: 7px;
  color: #8f8f8f;
  font-size: 9px;
}

.jm-review-side-bottom strong {
  display: block;
  color: var(--jm-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.jm-review-side-bottom small {
  display: block;
  margin-top: 8px;
  color: var(--jm-silver);
  font-size: 10px;
}

/* Review content */

.jm-review-content {
  min-width: 0;
  min-height: 430px;
  padding: clamp(32px, 4vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
  linear-gradient(
  rgba(18, 18, 18, 0.022) 1px,
  transparent 1px
  ),
  var(--jm-white);
  background-size: 100% 42px;
}

.jm-review-content-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.jm-review-demo {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--jm-muted);
  background: var(--jm-soft);
  border: 1px solid var(--jm-border);
  font-size: 8px;
  font-weight: 600;
}

.jm-review-quote {
  color: var(--jm-black);
}

.jm-review-quote svg {
  width: 58px;
  height: auto;
  fill: currentColor;
}

.jm-review-content blockquote {
  max-width: 870px;
  margin: 24px 0 35px;
  color: var(--jm-charcoal);
  font-size: clamp(17px, 1.65vw, 22px);
  font-weight: 500;
  line-height: 2.2;
}

.jm-review-person {
  padding-top: 21px;
  display: grid;
  grid-template-columns: 55px 1fr auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--jm-border);
}

.jm-review-avatar {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--jm-white);
  background: var(--jm-black);
  font-size: 14px;
  font-weight: 800;
}

.jm-review-person-info small {
  display: block;
  margin-bottom: 2px;
  color: var(--jm-muted);
  font-size: 8px;
}

.jm-review-person-info strong {
  display: block;
  color: var(--jm-black);
  font-size: 17px;
  font-weight: 900;
}

.jm-review-person-info span {
  display: block;
  margin-top: 4px;
  color: var(--jm-muted);
  font-size: 9px;
}

.jm-review-rating {
  direction: ltr;
  text-align: left;
}

.jm-review-rating span {
  display: block;
  color: var(--jm-black);
  font-family: var(--jm-font-num);
  font-size: 15px;
  letter-spacing: 3px;
}

.jm-review-rating small {
  display: block;
  margin-top: 5px;
  color: var(--jm-muted);
  font-size: 8px;
}

/* Navigation */

.jm-review-navigation {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
}

.jm-review-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.jm-review-tab {
  min-width: 0;
  min-height: 68px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: right;
  cursor: pointer;
  color: var(--jm-text);
  background: var(--jm-white);
  border: 1px solid var(--jm-border);
  border-radius: 14px;
  box-shadow: none;
  transition:
  background-color 0.25s ease,
  color 0.25s ease,
  transform 0.25s ease;
}

.jm-review-tab:hover {
  transform: translateY(-3px);
}

.jm-review-tab.is-active {
  color: var(--jm-white);
  background: var(--jm-black);
  border-color: var(--jm-black);
}

.jm-tab-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--jm-white);
  background: var(--jm-black);
  border: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 10px;
  font-weight: 800;
}

.jm-review-tab.is-active .jm-tab-avatar {
  color: var(--jm-black);
  background: var(--jm-white);
}

.jm-tab-info {
  min-width: 0;
}

.jm-tab-info strong {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jm-tab-info small {
  display: block;
  margin-top: 3px;
  color: var(--jm-muted);
  font-size: 8px;
}

.jm-review-tab.is-active .jm-tab-info small {
  color: var(--jm-silver);
}

.jm-review-tab i {
  color: #b0b0b0;
  font-family: var(--jm-font-num);
  font-size: 9px;
  font-style: normal;
}

.jm-review-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jm-review-controls button {
  min-height: 45px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: none;
  font-size: 9px;
  font-weight: 700;
  transition:
  transform 0.25s ease,
  background-color 0.25s ease;
}

.jm-review-controls button:hover {
  transform: translateY(-2px);
}

.jm-review-prev {
  color: var(--jm-black);
  background: var(--jm-white);
  border: 1px solid var(--jm-border);
}

.jm-review-next {
  color: var(--jm-white);
  background: var(--jm-black);
  border: 1px solid var(--jm-black);
}

.jm-review-prev:hover {
  color: var(--jm-black);
  background: var(--jm-soft);
}

.jm-review-next:hover {
  color: var(--jm-white);
  background: var(--jm-charcoal);
}

.jm-review-controls svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jm-review-progress {
  width: 65px;
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--jm-border);
}

.jm-review-progress span {
  width: 33.333%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--jm-black);
  transition: width 0.35s ease;
}

/* Laptop */

@media (max-width: 1180px) {

  .jm-customer-reviews {
    padding-right: 14px;
    padding-left: 14px;
  }

.jm-review-item {
  grid-template-columns: 205px minmax(0, 1fr);
}

.jm-review-side {
  padding: 25px;
}

.jm-review-content {
  padding: 38px;
}

.jm-review-content blockquote {
  font-size: 17px;
}

.jm-review-tab {
  grid-template-columns: 38px minmax(0, 1fr);
}

.jm-review-tab i {
  display: none;
}

.jm-tab-avatar {
  width: 38px;
  height: 38px;
}
}

/* Tablet */

@media (max-width: 900px) {

  .jm-review-navigation {
    grid-template-columns: 1fr;
  }

.jm-review-controls {
  justify-content: flex-end;
}

.jm-review-item {
  grid-template-columns: 175px minmax(0, 1fr);
}

.jm-review-side {
  min-height: 450px;
}

.jm-review-content {
  min-height: 450px;
}
}

/* Mobile */

@media (max-width: 767px) {

  .jm-customer-reviews {
    padding: 46px var(--jm-gutter-m);
  }

.jm-reviews-header {
  margin-bottom: 21px;
  align-items: flex-start;
  flex-direction: column;
}

.jm-reviews-heading h2 {
  font-size: clamp(33px, 10vw, 44px);
}

.jm-reviews-heading p {
  font-size: 12px;
}

.jm-reviews-counter {
  display: none;
}

.jm-reviews-stage {
  min-height: 570px;
}

.jm-review-item {
  min-height: 570px;
  grid-template-columns: 1fr;
  grid-template-rows: 125px 1fr;
  border-radius: 21px;
}

.jm-review-side {
  min-height: 125px;
  padding: 20px;
  flex-direction: row;
  align-items: center;
}

.jm-review-index {
  font-size: 47px;
}

.jm-review-side-bottom {
  text-align: left;
}

.jm-review-side-bottom strong {
  font-size: 12px;
}

.jm-review-content {
  min-height: 445px;
  padding: 25px 21px;
}

.jm-review-quote svg {
  width: 43px;
}

.jm-review-content blockquote {
  margin: 22px 0 28px;
  font-size: 14px;
  line-height: 2.1;
}

.jm-review-person {
  grid-template-columns: 47px 1fr;
}

.jm-review-avatar {
  width: 47px;
  height: 47px;
}

.jm-review-rating {
  grid-column: 1 / -1;
  padding-top: 13px;
  text-align: right;
  border-top: 1px solid var(--jm-border);
}

.jm-review-rating span,
.jm-review-rating small {
  display: inline-block;
}

.jm-review-tabs {
  grid-template-columns: 1fr;
}

.jm-review-tab {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.jm-review-tab i {
  display: block;
}

.jm-review-controls {
  width: 100%;
  justify-content: space-between;
}
}

@media (max-width: 430px) {

  .jm-reviews-stage {
    min-height: 610px;
  }

.jm-review-item {
  min-height: 610px;
}

.jm-review-content {
  min-height: 485px;
}

.jm-review-controls button span {
  display: none;
}

.jm-review-controls button {
  width: 44px;
  padding: 0;
  justify-content: center;
}
}

@media (prefers-reduced-motion: reduce) {

  .jm-review-item,
  .jm-review-tab,
  .jm-review-controls button,
  .jm-review-progress span {
    transition: none;
  }
}


/* ==========================================================================
   07. HOME JOURNAL — ژورنال/مقالات صفحه اصلی
   کلاس‌ها: .jm-journal-*  |  استفاده در: home
   ========================================================================== */

.jm-journal-section {
  --jm-black: #121212;
  --jm-charcoal: #242424;
  --jm-secondary: #3a3a3a;
  --jm-text: #5f5f5f;
  --jm-muted: #8a8a8a;
  --jm-silver: #c6c6c6;
  --jm-border: #d9d9d9;
  --jm-soft: #f7f7f5;
  --jm-white: #ffffff;

  width: 100%;
  padding: 76px var(--jm-gutter);
  background: transparent;
  direction: rtl;
  font-family: var(--jm-font);
}

.jm-journal-section,
.jm-journal-section * {
  box-sizing: border-box;
}

.jm-journal-section a {
  text-decoration: none;
}

.jm-journal-section img {
  max-width: 100%;
}

.jm-journal-shell {
  width: 100%;
  max-width: var(--jm-container);
  margin: 0 auto;
}

/* Header */

.jm-journal-header {
  margin-bottom: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.jm-journal-heading {
  max-width: 720px;
}

.jm-journal-kicker {
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--jm-muted);
  font-size: 11px;
  font-weight: 600;
}

.jm-journal-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--jm-black);
}

.jm-journal-title {
  margin: 0;
  color: var(--jm-black) !important;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -1px;
}

.jm-journal-title span {
  color: var(--jm-muted);
  font-weight: 500;
}

.jm-journal-description {
  max-width: 650px;
  margin: 13px 0 0;
  color: var(--jm-text);
  font-size: 13px;
  line-height: 2;
}

.jm-journal-archive {
  min-height: 50px;
  padding: 0 19px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 999px;
  color: var(--jm-white);
  background: var(--jm-black);
  border: 1px solid var(--jm-black);
  font-size: 12px;
  font-weight: 700;
  transition:
  transform 0.25s ease,
  background-color 0.25s ease;
}

.jm-journal-archive:hover {
  color: var(--jm-white);
  background: var(--jm-secondary);
  transform: translateY(-3px);
}

.jm-journal-archive svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Main editorial layout */

.jm-journal-layout {
  display: grid;
  grid-template-columns:
  minmax(500px, 1.35fr)
  minmax(350px, 0.65fr);
  gap: 18px;
}

/* Featured article */

.jm-featured-article {
  min-width: 0;
  min-height: 590px;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--jm-charcoal);
  box-shadow:
  0 25px 65px rgba(18, 18, 18, 0.13);
}

.jm-featured-media {
  position: absolute;
  inset: 0;
  display: block;
}

.jm-featured-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.jm-featured-article:hover
.jm-featured-media img {
  transform: scale(1.045);
}

.jm-article-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.12);
  background:
  linear-gradient(
  135deg,
  #111111,
  #333333
  );
  font-family: var(--jm-font-num);
  font-size: 82px;
  font-weight: 800;
}

.jm-article-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
  linear-gradient(
  135deg,
  transparent 46%,
  #ffffff 47%,
  transparent 49%
  );
  background-size: 90px 90px;
}

.jm-featured-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
  linear-gradient(
  to top,
  rgba(0, 0, 0, 0.92),
  rgba(0, 0, 0, 0.18) 68%
  );
}

.jm-featured-label {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 2;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--jm-black);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 700;
}

.jm-featured-number {
  position: absolute;
  top: 18px;
  left: 25px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--jm-font-num);
  font-size: 42px;
  font-weight: 700;
}

.jm-featured-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: clamp(28px, 4vw, 52px);
}

.jm-article-meta {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
}

.jm-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.jm-featured-title {
  max-width: 760px;
  margin: 0;
  color: var(--jm-white) !important;
  font-size: clamp(29px, 3vw, 47px);
  font-weight: 800;
  line-height: 1.55;
}

.jm-featured-title a {
  color: inherit;
}

.jm-featured-excerpt {
  max-width: 700px;
  margin: 17px 0 24px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 2;
}

.jm-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--jm-white);
  font-size: 12px;
  font-weight: 700;
}

.jm-featured-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.jm-featured-link:hover {
  color: var(--jm-white);
}

.jm-featured-link:hover svg {
  transform: translateX(-5px);
}

/* Secondary editorial list */

.jm-journal-list {
  min-width: 0;
  padding: 25px;
  border-radius: 28px;
  background: var(--jm-white);
  border: 1px solid rgba(18, 18, 18, 0.09);
  box-shadow:
  0 25px 65px rgba(18, 18, 18, 0.065);
}

.jm-journal-list-header {
  margin-bottom: 8px;
  padding-bottom: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--jm-border);
}

.jm-journal-list-header span {
  color: var(--jm-muted);
  font-size: 10px;
}

.jm-journal-list-header strong {
  color: var(--jm-black);
  font-size: 15px;
  font-weight: 800;
}

.jm-journal-list-count {
  direction: ltr;
  color: var(--jm-silver) !important;
  font-family: var(--jm-font-num);
  font-size: 25px !important;
  font-weight: 700;
}

.jm-journal-item {
  padding: 19px 0;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--jm-border);
}

.jm-journal-item:last-child {
  border-bottom: 0;
}

.jm-journal-thumb {
  width: 118px;
  height: 126px;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background: var(--jm-charcoal);
}

.jm-journal-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.jm-journal-item:hover
.jm-journal-thumb img {
  transform: scale(1.07);
}

.jm-journal-thumb
.jm-article-placeholder {
  font-size: 30px;
}

.jm-journal-index {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--jm-black);
  background: rgba(255, 255, 255, 0.9);
  font-family: var(--jm-font-num);
  font-size: 8px;
  font-weight: 700;
}

.jm-journal-item-content {
  min-width: 0;
}

.jm-journal-item-meta {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--jm-muted);
  font-size: 8px;
}

.jm-journal-item-meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--jm-silver);
}

.jm-journal-item-title {
  margin: 0;
  color: var(--jm-black) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.85;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jm-journal-item-title a {
  color: inherit;
  transition: color 0.2s ease;
}

.jm-journal-item:hover
.jm-journal-item-title a {
  color: var(--jm-text);
}

.jm-journal-mini-link {
  margin-top: 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--jm-muted);
  font-size: 9px;
  font-weight: 600;
}

.jm-journal-mini-link::after {
  content: "";
  width: 25px;
  height: 1px;
  background: var(--jm-border);
  transition:
  width 0.25s ease,
  background-color 0.25s ease;
}

.jm-journal-item:hover
.jm-journal-mini-link::after {
  width: 40px;
  background: var(--jm-black);
}

.jm-journal-empty {
  padding: 35px;
  border-radius: 18px;
  text-align: center;
  color: #5f5f5f;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  font-family: var(--jm-font);
}

/* Laptop */

@media (max-width: 1180px) {

  .jm-journal-section {
    padding-right: 14px;
    padding-left: 14px;
  }

.jm-journal-layout {
  grid-template-columns:
  minmax(430px, 1.2fr)
  minmax(320px, 0.8fr);
}

.jm-featured-article {
  min-height: 540px;
}

.jm-journal-list {
  padding: 21px;
}

.jm-journal-item {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 13px;
}

.jm-journal-thumb {
  width: 100px;
  height: 118px;
}

.jm-journal-item-title {
  font-size: 13px;
}
}

/* Tablet */

@media (max-width: 900px) {

  .jm-journal-layout {
    grid-template-columns: 1fr;
  }

.jm-featured-article {
  min-height: 540px;
}

.jm-journal-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.jm-journal-list-header {
  grid-column: 1 / -1;
}

.jm-journal-item {
  padding: 0;
  display: block;
  overflow: hidden;
  border: 1px solid var(--jm-border);
  border-radius: 17px;
}

.jm-journal-item:last-child {
  border-bottom: 1px solid var(--jm-border);
}

.jm-journal-thumb {
  width: 100%;
  height: 170px;
  border-radius: 0;
}

.jm-journal-item-content {
  padding: 16px;
}
}

/* Mobile */

@media (max-width: 767px) {

  .jm-journal-section {
    padding: 48px var(--jm-gutter-m);
  }

.jm-journal-header {
  margin-bottom: 22px;
  align-items: flex-start;
  flex-direction: column;
  gap: 19px;
}

.jm-journal-title {
  font-size: clamp(32px, 10vw, 43px);
}

.jm-journal-description {
  font-size: 12px;
}

.jm-journal-archive {
  min-height: 46px;
}

.jm-featured-article {
  min-height: 490px;
  border-radius: 21px;
}

.jm-featured-number {
  font-size: 31px;
}

.jm-featured-content {
  padding: 24px 21px;
}

.jm-featured-title {
  font-size: 27px;
}

.jm-featured-excerpt {
  font-size: 12px;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jm-journal-list {
  padding: 17px;
  grid-template-columns: 1fr;
  border-radius: 21px;
}

.jm-journal-item {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  border: 0;
  border-bottom: 1px solid var(--jm-border);
  border-radius: 0;
}

.jm-journal-item:last-child {
  border: 0;
}

.jm-journal-thumb {
  width: 108px;
  height: 118px;
  border-radius: 13px;
}

.jm-journal-item-content {
  padding: 0;
}
}

@media (max-width: 430px) {

  .jm-featured-article {
    min-height: 455px;
  }

.jm-featured-title {
  font-size: 24px;
}

.jm-journal-item {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
}

.jm-journal-thumb {
  width: 92px;
  height: 108px;
}

.jm-journal-item-title {
  font-size: 12px;
}
}

@media (prefers-reduced-motion: reduce) {

  .jm-featured-media img,
  .jm-journal-thumb img,
  .jm-journal-archive,
  .jm-featured-link svg {
    transition: none;
  }
}


/* ==========================================================================
   08. SHOP — صفحه فروشگاه
   کلاس‌ها: .jmshop-*  |  استفاده در: shop
   ========================================================================== */

.jmshop-page {
  --jmshop-black: #121212;
  --jmshop-dark: #1a1a1a;
  --jmshop-card: #232323;
  --jmshop-graphite: #3a3a3a;
  --jmshop-text: #5f5f5f;
  --jmshop-muted: #8a8a8a;
  --jmshop-silver: #c6c6c6;
  --jmshop-border: #d9d9d9;
  --jmshop-soft: #f7f7f5;
  --jmshop-white: #ffffff;

  width: 100%;
  padding: 18px var(--jm-gutter) 78px;
  direction: rtl;
  color: var(--jmshop-black);
  background: transparent;
  font-family: var(--jm-font);
}

.jmshop-page,
.jmshop-page * {
  box-sizing: border-box;
}

.jmshop-page a {
  text-decoration: none;
}

.jmshop-page button,
.jmshop-page input,
.jmshop-page select {
  font-family: inherit;
}

.jmshop-page svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jmshop-shell {
  width: 100%;
  max-width: var(--jm-container);
  margin: 0 auto;
}

/* معرفی فروشگاه */

.jmshop-hero {
  min-height: 280px;
  padding: clamp(28px, 4.5vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, .43fr);
  align-items: stretch;
  gap: 12px;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  color: var(--jmshop-white);
  background:
  radial-gradient(circle at 8% 0%, rgba(255,255,255,.11), transparent 29%),
  linear-gradient(145deg, #090909, #232323 72%, #111);
  box-shadow: 0 28px 70px rgba(18,18,18,.14);
}

.jmshop-hero::before,
.jmshop-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.07);
  transform: rotate(45deg);
}

.jmshop-hero::before {
  width: 210px;
  height: 210px;
  left: -85px;
  top: -100px;
}

.jmshop-hero::after {
  width: 320px;
  height: 320px;
  right: 38%;
  bottom: -255px;
}

.jmshop-hero-copy,
.jmshop-consult-card {
  position: relative;
  z-index: 2;
}

.jmshop-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--jmshop-silver);
  font-size: 9px;
  font-weight: 700;
}

.jmshop-kicker::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
}

.jmshop-hero h1 {
  max-width: 770px;
  margin: 15px 0 12px;
  color: var(--jmshop-white) !important;
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -1.5px;
}

.jmshop-hero-copy > p {
  max-width: 710px;
  margin: 0;
  color: #939393;
  font-size: 12px;
  line-height: 2.1;
}

.jmshop-hero-metrics {
  margin-top: 25px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.jmshop-metric {
  min-height: 47px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 12px;
  color: #c8c8c8;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 9px;
}

.jmshop-metric svg {
  width: 17px;
  height: 17px;
}

.jmshop-consult-card {
  min-height: 100%;
  padding: 23px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(12px);
}

.jmshop-consult-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--jmshop-black);
  background: var(--jmshop-soft);
}

.jmshop-consult-icon svg {
  width: 21px;
  height: 21px;
}

.jmshop-consult-card small {
  display: block;
  margin-top: 24px;
  color: #777;
  font-size: 8px;
}

.jmshop-consult-card strong {
  display: block;
  margin-top: 6px;
  color: var(--jmshop-white);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.6;
}

.jmshop-consult-card p {
  margin: 7px 0 17px;
  color: #858585;
  font-size: 9px;
  line-height: 1.9;
}

.jmshop-consult-card a {
  min-height: 49px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 11px;
  color: var(--jmshop-black);
  background: var(--jmshop-soft);
  font-size: 10px;
  font-weight: 850;
  transition: transform .22s ease, background-color .22s ease;
}

.jmshop-consult-card a:hover {
  color: var(--jmshop-black);
  background: var(--jmshop-white);
  transform: translateY(-3px);
}

.jmshop-consult-card a svg {
  width: 18px;
  height: 18px;
}

/* ابزار جستجو و فیلتر */

.jmshop-controls {
  margin-top: 12px;
  padding: 12px;
  position: relative;
  z-index: 4;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(18,18,18,.08);
  box-shadow: 0 20px 55px rgba(18,18,18,.07);
  backdrop-filter: blur(15px);
}

.jmshop-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 9px;
}

.jmshop-search {
  min-height: 56px;
  padding: 6px 7px 6px 13px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-radius: 14px;
  background: var(--jmshop-soft);
  border: 1px solid #e4e4e0;
}

.jmshop-search-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--jmshop-white);
  background: var(--jmshop-black);
}

.jmshop-search-icon svg {
  width: 18px;
  height: 18px;
}

.jmshop-search input {
  width: 100%;
  height: 42px;
  padding: 0 7px;
  outline: none;
  color: var(--jmshop-black);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 10px;
}

.jmshop-search input::placeholder {
  color: #999;
}

.jmshop-search button {
  min-height: 42px;
  padding: 0 16px;
  cursor: pointer;
  border-radius: 10px;
  color: var(--jmshop-white);
  background: var(--jmshop-black);
  border: 0;
  font-size: 9px;
  font-weight: 800;
  transition: transform .2s ease, background-color .2s ease;
}

.jmshop-search button:hover {
  background: var(--jmshop-graphite);
  transform: translateY(-2px);
}

.jmshop-sort-wrap {
  min-height: 56px;
  padding: 6px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  background: var(--jmshop-soft);
  border: 1px solid #e4e4e0;
}

.jmshop-sort-wrap svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--jmshop-black);
}

.jmshop-sort-wrap select {
  width: 100%;
  height: 42px;
  padding: 0;
  outline: none;
  cursor: pointer;
  color: var(--jmshop-black);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 9px;
  font-weight: 700;
}

.jmshop-category-row {
  margin-top: 9px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  border-top: 1px solid #ecece8;
  scrollbar-width: none;
}

.jmshop-category-row::-webkit-scrollbar {
  display: none;
}

.jmshop-category-chip {
  min-height: 39px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border-radius: 11px;
  color: var(--jmshop-text);
  background: var(--jmshop-soft);
  border: 1px solid #e5e5e1;
  font-size: 8px;
  font-weight: 700;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.jmshop-category-chip:hover,
.jmshop-category-chip.is-active {
  color: var(--jmshop-white);
  background: var(--jmshop-black);
  border-color: var(--jmshop-black);
  transform: translateY(-2px);
}

.jmshop-category-chip span {
  direction: ltr;
  opacity: .55;
  font-family: var(--jm-font-num);
  font-size: 8px;
}

/* نتیجه و شبکه */

.jmshop-results-head {
  margin: 24px 0 13px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.jmshop-results-title small {
  display: block;
  color: var(--jmshop-muted);
  font-size: 8px;
}

.jmshop-results-title h2 {
  margin: 6px 0 0;
  color: var(--jmshop-black) !important;
  font-size: clamp(25px, 3.2vw, 42px);
  font-weight: 850;
  line-height: 1.45;
}

.jmshop-result-count {
  min-height: 42px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 11px;
  color: var(--jmshop-text);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(18,18,18,.08);
  font-size: 8px;
}

.jmshop-result-count strong {
  color: var(--jmshop-black);
  font-family: var(--jm-font-num);
  font-size: 11px;
}

.jmshop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* کارت محصول */

.jmshop-card {
  min-width: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--jmshop-white);
  border: 1px solid rgba(18,18,18,.08);
  box-shadow: 0 14px 38px rgba(18,18,18,.055);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.jmshop-card:hover {
  border-color: rgba(18,18,18,.16);
  box-shadow: 0 23px 52px rgba(18,18,18,.1);
  transform: translateY(-6px);
}

.jmshop-media {
  aspect-ratio: 1 / 1.04;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  background:
  linear-gradient(145deg, #efefec, #fafafa);
}

.jmshop-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 56%, rgba(0,0,0,.16));
  opacity: 0;
  transition: opacity .3s ease;
}

.jmshop-card:hover .jmshop-media::after {
  opacity: 1;
}

.jmshop-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.jmshop-card:hover .jmshop-media img {
  transform: scale(1.055);
}

.jmshop-badges {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.jmshop-badge {
  min-height: 29px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  color: var(--jmshop-white);
  background: rgba(18,18,18,.9);
  border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(10px);
  font-size: 7px;
  font-weight: 750;
}

.jmshop-badge.is-sale {
  color: var(--jmshop-black);
  background: rgba(247,247,245,.94);
}

.jmshop-image-action {
  min-height: 37px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: absolute;
  right: 10px;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  border-radius: 10px;
  opacity: 0;
  color: var(--jmshop-black);
  background: rgba(247,247,245,.94);
  font-size: 8px;
  font-weight: 750;
  backdrop-filter: blur(12px);
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}

.jmshop-card:hover .jmshop-image-action {
  opacity: 1;
  transform: translateY(0);
}

.jmshop-image-action svg {
  width: 15px;
  height: 15px;
}

.jmshop-card-body {
  padding: 15px 7px 7px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.jmshop-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--jmshop-muted);
  font-size: 7px;
}

.jmshop-card-code {
  direction: ltr;
  font-family: var(--jm-font-num);
  letter-spacing: .5px;
}

.jmshop-card-title {
  margin: 8px 0 12px;
  min-height: 49px;
  color: var(--jmshop-black) !important;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.75;
}

.jmshop-card-title a {
  color: inherit;
}

.jmshop-card-title a:hover {
  color: var(--jmshop-graphite);
}

.jmshop-attributes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.jmshop-attribute {
  min-width: 0;
  min-height: 48px;
  padding: 8px 9px;
  border-radius: 10px;
  background: var(--jmshop-soft);
  border: 1px solid #e8e8e4;
}

.jmshop-attribute small,
.jmshop-attribute strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jmshop-attribute small {
  color: var(--jmshop-muted);
  font-size: 6.5px;
}

.jmshop-attribute strong {
  margin-top: 4px;
  color: var(--jmshop-black);
  font-size: 8px;
  font-weight: 700;
}

.jmshop-price-row {
  min-height: 45px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.jmshop-price-row .price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--jmshop-black);
  font-size: 11px;
  font-weight: 800;
}

.jmshop-price-row .price del {
  color: #a6a6a6;
  font-size: 8px;
  font-weight: 600;
}

.jmshop-price-row .price ins {
  color: var(--jmshop-black);
  text-decoration: none;
}

.jmshop-price-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--jmshop-text);
  font-size: 8px;
}

.jmshop-price-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jmshop-black);
  box-shadow: 0 0 0 4px #ecece8;
}

.jmshop-stock {
  color: var(--jmshop-muted);
  font-size: 7px;
}

.jmshop-card-actions {
  margin-top: auto;
  padding-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 47px;
  gap: 7px;
}

.jmshop-inquiry,
.jmshop-details {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
  font-size: 9px;
  font-weight: 850;
  transition: transform .22s ease, background-color .22s ease, color .22s ease;
}

.jmshop-inquiry {
  color: var(--jmshop-white);
  background: var(--jmshop-black);
}

.jmshop-inquiry:hover {
  color: var(--jmshop-white);
  background: var(--jmshop-graphite);
  transform: translateY(-2px);
}

.jmshop-details {
  color: var(--jmshop-black);
  background: var(--jmshop-soft);
  border: 1px solid #e3e3df;
}

.jmshop-details:hover {
  color: var(--jmshop-white);
  background: var(--jmshop-black);
  border-color: var(--jmshop-black);
  transform: translateY(-2px);
}

.jmshop-inquiry svg,
.jmshop-details svg {
  width: 17px;
  height: 17px;
}

/* نتیجه خالی */

.jmshop-empty {
  padding: 60px 24px;
  text-align: center;
  border-radius: 24px;
  background: var(--jmshop-white);
  border: 1px solid rgba(18,18,18,.08);
}

.jmshop-empty-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 17px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--jmshop-white);
  background: var(--jmshop-black);
}

.jmshop-empty-icon svg {
  width: 26px;
  height: 26px;
}

.jmshop-empty h3 {
  margin: 0;
  color: var(--jmshop-black) !important;
  font-size: 22px;
  font-weight: 850;
}

.jmshop-empty p {
  margin: 8px 0 20px;
  color: var(--jmshop-text);
  font-size: 10px;
  line-height: 2;
}

.jmshop-empty a {
  min-height: 46px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  border-radius: 11px;
  color: var(--jmshop-white);
  background: var(--jmshop-black);
  font-size: 9px;
  font-weight: 800;
}

/* صفحه‌بندی */

.jmshop-pagination {
  margin-top: 26px;
}

.jmshop-pagination .page-numbers {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.jmshop-pagination .page-numbers li {
  margin: 0;
}

.jmshop-pagination a.page-numbers,
.jmshop-pagination span.page-numbers {
  min-width: 43px;
  height: 43px;
  padding: 0 11px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--jmshop-text);
  background: var(--jmshop-white);
  border: 1px solid rgba(18,18,18,.09);
  font-family: var(--jm-font-num);
  font-size: 10px;
  font-weight: 700;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.jmshop-pagination a.page-numbers:hover,
.jmshop-pagination span.page-numbers.current {
  color: var(--jmshop-white);
  background: var(--jmshop-black);
  border-color: var(--jmshop-black);
  transform: translateY(-2px);
}

.jmshop-pagination .prev,
.jmshop-pagination .next {
  font-family: inherit !important;
  font-size: 8px !important;
}

/* CTA انتهایی */

.jmshop-footer-cta {
  margin-top: 12px;
  padding: 27px 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 23px;
  background: var(--jmshop-white);
  border: 1px solid rgba(18,18,18,.08);
}

.jmshop-footer-cta h2 {
  margin: 0;
  color: var(--jmshop-black) !important;
  font-size: clamp(23px, 3vw, 39px);
  font-weight: 850;
  line-height: 1.5;
}

.jmshop-footer-cta p {
  max-width: 650px;
  margin: 7px 0 0;
  color: var(--jmshop-text);
  font-size: 10px;
  line-height: 2;
}

.jmshop-footer-cta a {
  min-height: 52px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 0 0 auto;
  border-radius: 12px;
  color: var(--jmshop-white);
  background: var(--jmshop-black);
  font-size: 10px;
  font-weight: 850;
  transition: transform .22s ease, background-color .22s ease;
}

.jmshop-footer-cta a:hover {
  color: var(--jmshop-white);
  background: var(--jmshop-graphite);
  transform: translateY(-3px);
}

.jmshop-footer-cta svg {
  width: 18px;
  height: 18px;
}

/* تبلت و موبایل */

@media (max-width: 1180px) {
  .jmshop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .jmshop-hero {
    grid-template-columns: 1fr;
  }

.jmshop-consult-card {
  min-height: 210px;
}

.jmshop-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 767px) {
  .jmshop-page {
    padding: 10px var(--jm-gutter-m) 60px;
  }

.jmshop-hero {
  min-height: auto;
  padding: 30px 21px 21px;
  border-radius: 21px;
}

.jmshop-hero h1 {
  font-size: clamp(34px, 11vw, 48px);
}

.jmshop-hero-copy > p {
  font-size: 10px;
}

.jmshop-hero-metrics {
  display: grid;
  grid-template-columns: 1fr;
}

.jmshop-consult-card {
  min-height: auto;
  padding: 19px;
  border-radius: 16px;
}

.jmshop-consult-card small {
  margin-top: 16px;
}

.jmshop-controls {
  padding: 9px;
  border-radius: 17px;
}

.jmshop-toolbar {
  grid-template-columns: 1fr;
}

.jmshop-search {
  grid-template-columns: 39px minmax(0, 1fr) auto;
}

.jmshop-search-icon {
  width: 39px;
  height: 39px;
}

.jmshop-search button {
  padding: 0 12px;
}

.jmshop-category-row {
  margin-right: -2px;
  margin-left: -2px;
}

.jmshop-results-head {
  margin-top: 20px;
  align-items: flex-start;
  flex-direction: column;
}

.jmshop-grid {
  gap: 7px;
}

.jmshop-card {
  padding: 6px;
  border-radius: 16px;
}

.jmshop-media {
  border-radius: 12px;
}

.jmshop-image-action {
  display: none;
}

.jmshop-badges {
  top: 6px;
  right: 6px;
}

.jmshop-badge {
  min-height: 25px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 6px;
}

.jmshop-card-body {
  padding: 11px 4px 4px;
}

.jmshop-card-meta {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.jmshop-card-title {
  min-height: 43px;
  margin: 6px 0 9px;
  font-size: 11px;
  line-height: 1.8;
}

.jmshop-attributes {
  grid-template-columns: 1fr;
}

.jmshop-attribute:nth-child(n+2) {
  display: none;
}

.jmshop-attribute {
  min-height: 43px;
  padding: 7px;
}

.jmshop-price-row {
  min-height: 39px;
  margin-top: 7px;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.jmshop-price-row .price {
  font-size: 9px;
}

.jmshop-card-actions {
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 5px;
}

.jmshop-inquiry,
.jmshop-details {
  min-height: 43px;
  border-radius: 9px;
  font-size: 7.5px;
}

.jmshop-inquiry svg,
.jmshop-details svg {
  width: 15px;
  height: 15px;
}

.jmshop-footer-cta {
  padding: 25px 20px;
  align-items: flex-start;
  flex-direction: column;
  border-radius: 19px;
}

.jmshop-footer-cta a {
  width: 100%;
}
}

@media (max-width: 390px) {
  .jmshop-grid {
    grid-template-columns: 1fr;
  }

.jmshop-card {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: stretch;
}

.jmshop-media {
  aspect-ratio: auto;
  min-height: 215px;
}

.jmshop-card-body {
  padding: 9px 9px 5px 7px;
}

.jmshop-attribute {
  display: none !important;
}

.jmshop-card-title {
  min-height: auto;
  font-size: 12px;
}
}

@media (prefers-reduced-motion: reduce) {
  .jmshop-page *,
  .jmshop-page *::before,
  .jmshop-page *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   09. PRODUCT — صفحه تک‌محصول
   کلاس‌ها: .jmsp-*  |  استفاده در: product
   ========================================================================== */

.jmsp-page {
  --jmsp-black: #121212;
  --jmsp-dark: #1a1a1a;
  --jmsp-card: #232323;
  --jmsp-graphite: #3a3a3a;
  --jmsp-text: #5f5f5f;
  --jmsp-muted: #8a8a8a;
  --jmsp-silver: #c6c6c6;
  --jmsp-border: #d9d9d9;
  --jmsp-soft: #f7f7f5;
  --jmsp-white: #ffffff;

  width: 100%;
  padding: 18px var(--jm-gutter) 76px;
  direction: rtl;
  color: var(--jmsp-black);
  background: transparent;
  font-family: var(--jm-font);
}

.jmsp-page,
.jmsp-page * {
  box-sizing: border-box;
}

.jmsp-page a {
  text-decoration: none;
}

.jmsp-page button {
  font-family: inherit;
}

.jmsp-page svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jmsp-shell {
  width: 100%;
  max-width: var(--jm-container);
  margin: 0 auto;
}

.jmsp-breadcrumbs {
  min-height: 46px;
  margin-bottom: 12px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-radius: 14px;
  color: var(--jmsp-muted);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(18,18,18,.07);
  font-size: 11.5px;
  backdrop-filter: blur(14px);
}

.jmsp-breadcrumbs a {
  color: var(--jmsp-text);
  transition: color .2s ease;
}

.jmsp-breadcrumbs a:hover {
  color: var(--jmsp-black);
}

.jmsp-breadcrumb-separator {
  color: #c0c0c0;
  font-family: var(--jm-font-num);
}

.jmsp-hero {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(410px,.92fr);
  gap: 12px;
}

/* صحنه متریال */

.jmsp-gallery-panel {
  min-height: 690px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background:
  radial-gradient(circle at 12% 8%, rgba(255,255,255,.1), transparent 28%),
  linear-gradient(145deg, #090909, #202020 68%, #111);
  box-shadow: 0 28px 70px rgba(18,18,18,.15);
}

.jmsp-gallery-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
  linear-gradient(135deg, transparent 46%, rgba(255,255,255,.22) 47%, transparent 49%);
  background-size: 92px 92px;
}

.jmsp-gallery-head {
  min-height: 54px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  z-index: 2;
  color: var(--jmsp-white);
}

.jmsp-gallery-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #b9b9b9;
  font-size: 11.5px;
  font-weight: 700;
}

.jmsp-gallery-label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: #747474;
}

.jmsp-gallery-index {
  direction: ltr;
  color: #6e6e6e;
  font-family: var(--jm-font-num);
  font-size: 11.5px;
  letter-spacing: .7px;
}

.jmsp-stage {
  height: 520px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 22px;
  background:
  linear-gradient(135deg, rgba(255,255,255,.08), transparent 46%),
  #161616;
  border: 1px solid rgba(255,255,255,.1);
}

.jmsp-stage::before,
.jmsp-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.jmsp-stage::before {
  width: 74%;
  height: 74%;
  border: 1px solid rgba(255,255,255,.07);
  transform: rotate(-8deg);
}

.jmsp-stage::after {
  width: 46%;
  height: 46%;
  border: 1px solid rgba(255,255,255,.06);
  transform: rotate(13deg);
}

.jmsp-main-image {
  width: calc(100% - 66px);
  height: calc(100% - 66px);
  display: block;
  position: relative;
  z-index: 3;
  object-fit: contain;
  filter: drop-shadow(0 28px 38px rgba(0,0,0,.28));
  transition: opacity .18s ease, transform .35s ease;
}

.jmsp-stage.is-switching .jmsp-main-image {
  opacity: .18;
  transform: scale(.97);
}

.jmsp-zoom {
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 5;
  cursor: pointer;
  border-radius: 13px;
  color: var(--jmsp-black);
  background: var(--jmsp-soft);
  border: 0;
  box-shadow: 0 12px 25px rgba(0,0,0,.2);
  transition: transform .22s ease;
}

.jmsp-zoom:hover {
  transform: translateY(-3px);
}

.jmsp-zoom svg {
  width: 20px;
  height: 20px;
}

.jmsp-stage-badge {
  padding: 8px 11px;
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 5;
  border-radius: 999px;
  color: #d0d0d0;
  background: rgba(10,10,10,.58);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  font-size: 10.5px;
  font-weight: 700;
}

.jmsp-thumbnails {
  height: 78px;
  margin-top: 12px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  position: relative;
  z-index: 3;
  overflow-x: auto;
  scrollbar-width: none;
}

.jmsp-thumbnails::-webkit-scrollbar {
  display: none;
}

.jmsp-thumb {
  width: 75px;
  min-width: 75px;
  height: 75px;
  padding: 5px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}

.jmsp-thumb:hover,
.jmsp-thumb.is-active {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
}

.jmsp-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

.jmsp-thumb-number {
  min-width: 75px;
  height: 75px;
  margin-right: auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #777;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  font-family: var(--jm-font-num);
  font-size: 20px;
  font-weight: 700;
}

/* اطلاعات اصلی */

.jmsp-info-panel {
  min-height: 690px;
  padding: clamp(34px,4vw,58px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: var(--jmsp-white);
  border: 1px solid rgba(18,18,18,.08);
  box-shadow: 0 28px 70px rgba(18,18,18,.08);
}

.jmsp-info-panel::after {
  content: "MATERIAL";
  position: absolute;
  left: 18px;
  bottom: -9px;
  color: rgba(18,18,18,.026);
  font-family: var(--jm-font-num);
  font-size: clamp(65px,7vw,105px);
  font-weight: 900;
  letter-spacing: -4px;
  pointer-events: none;
}

.jmsp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--jmsp-muted);
  font-size: 12px;
  font-weight: 700;
}

.jmsp-eyebrow::before {
  content: "";
  width: 29px;
  height: 1px;
  background: currentColor;
}

.jmsp-category-links {
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: #a4a4a4;
  font-size: 11.5px;
}

.jmsp-category-links a {
  color: var(--jmsp-muted);
}

.jmsp-category-links a:hover {
  color: var(--jmsp-black);
}

.jmsp-title {
  margin: 18px 0 17px;
  color: var(--jmsp-black) !important;
  font-size: clamp(38px,4.25vw,64px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -1.2px;
}

.jmsp-short-description {
  margin: 0;
  color: var(--jmsp-text);
  font-size: 13px;
  line-height: 2.15;
}

.jmsp-short-description p {
  margin: 0;
}

.jmsp-facts {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}

.jmsp-fact {
  min-height: 78px;
  padding: 13px;
  display: grid;
  grid-template-columns: 39px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  border-radius: 13px;
  background: var(--jmsp-soft);
  border: 1px solid #e5e5e1;
}

.jmsp-fact-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--jmsp-white);
  background: var(--jmsp-black);
}

.jmsp-fact-icon svg {
  width: 18px;
  height: 18px;
}

.jmsp-fact small {
  display: block;
  margin-bottom: 4px;
  color: var(--jmsp-muted);
  font-size: 10.5px;
}

.jmsp-fact strong {
  display: block;
  overflow: hidden;
  color: var(--jmsp-black);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.7;
  text-overflow: ellipsis;
}

.jmsp-inquiry {
  margin-top: auto;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 18px;
  color: var(--jmsp-white);
  background:
  radial-gradient(circle at 8% 0%,rgba(255,255,255,.12),transparent 27%),
  var(--jmsp-black);
}

.jmsp-inquiry::after {
  content: "";
  width: 120px;
  height: 120px;
  position: absolute;
  left: -55px;
  top: -65px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}

.jmsp-inquiry-copy {
  position: relative;
  z-index: 2;
}

.jmsp-inquiry-copy small {
  display: block;
  color: #858585;
  font-size: 10.5px;
}

.jmsp-inquiry-copy strong {
  display: block;
  margin-top: 4px;
  color: var(--jmsp-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.8;
}

.jmsp-price {
  display: block;
  margin-top: 7px;
  color: var(--jmsp-silver);
  font-size: 12px;
}

.jmsp-price del {
  opacity: .45;
}

.jmsp-price ins {
  color: var(--jmsp-white);
  text-decoration: none;
}

.jmsp-inquiry-button {
  min-height: 54px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: relative;
  z-index: 2;
  border-radius: 12px;
  color: var(--jmsp-black);
  background: var(--jmsp-soft);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  transition: transform .22s ease, background-color .22s ease;
}

.jmsp-inquiry-button:hover {
  color: var(--jmsp-black);
  background: var(--jmsp-white);
  transform: translateY(-3px);
}

.jmsp-inquiry-button svg {
  width: 19px;
  height: 19px;
}

.jmsp-code-row {
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.jmsp-product-code {
  direction: ltr;
  color: var(--jmsp-muted);
  font-family: var(--jm-font-num);
  font-size: 11.5px;
  letter-spacing: .7px;
}

.jmsp-copy-code {
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--jmsp-muted);
  background: transparent;
  border: 0;
  font-size: 10.5px;
}

.jmsp-copy-code:hover {
  color: var(--jmsp-black);
}

.jmsp-copy-code svg {
  width: 15px;
  height: 15px;
}

/* نوار خدمات */

.jmsp-service-strip {
  margin-top: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  border-radius: 20px;
  background: var(--jmsp-black);
}

.jmsp-service-item {
  min-height: 82px;
  padding: 13px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  border-radius: 13px;
  color: var(--jmsp-white);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
}

.jmsp-service-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--jmsp-black);
  background: var(--jmsp-soft);
}

.jmsp-service-icon svg {
  width: 19px;
  height: 19px;
}

.jmsp-service-item strong {
  display: block;
  color: var(--jmsp-white);
  font-size: 12px;
}

.jmsp-service-item small {
  display: block;
  margin-top: 4px;
  color: #797979;
  font-size: 10.5px;
  line-height: 1.7;
}

/* توضیحات */

.jmsp-section {
  margin-top: 12px;
}

.jmsp-story {
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(360px,.82fr);
  gap: 12px;
}

.jmsp-description-card,
.jmsp-usage-card {
  min-height: 360px;
  border-radius: 26px;
  border: 1px solid rgba(18,18,18,.08);
}

.jmsp-description-card {
  padding: clamp(32px,4vw,52px);
  background: var(--jmsp-white);
}

.jmsp-section-title {
  margin: 11px 0 17px;
  color: var(--jmsp-black) !important;
  font-size: clamp(29px,3.5vw,48px);
  font-weight: 850;
  line-height: 1.45;
}

.jmsp-description-content {
  display: flow-root;
  color: var(--jmsp-text);
  font-size: 13px;
  line-height: 2.15;
}

.jmsp-description-content::after {
  content: "";
  display: block;
  clear: both;
}

.jmsp-description-content > * {
  max-width: 100%;
}

.jmsp-description-content > *:first-child {
  margin-top: 0 !important;
}

.jmsp-description-content > *:last-child {
  margin-bottom: 0 !important;
}

.jmsp-description-content p {
  clear: both;
  margin: 0 0 18px;
}

.jmsp-description-content h2,
.jmsp-description-content h3,
.jmsp-description-content h4,
.jmsp-description-content h5 {
  clear: both;
  margin: 28px 0 12px;
  color: var(--jmsp-black) !important;
  font-weight: 850;
  line-height: 1.65;
}

.jmsp-description-content h2 {
  font-size: 24px;
}

.jmsp-description-content h3 {
  font-size: 19px;
}

.jmsp-description-content h4,
.jmsp-description-content h5 {
  font-size: 15px;
}

/*
* تصاویر قدیمی محصول معمولاً کلاس‌های alignleft / alignright دارند.
* این قوانین Float را فقط داخل توضیحات محصول خنثی می‌کنند تا متن دور عکس نپیچد.
*/
.jmsp-description-content img,
.jmsp-description-content figure,
.jmsp-description-content .wp-caption,
.jmsp-description-content .alignleft,
.jmsp-description-content .alignright,
.jmsp-description-content .aligncenter,
.jmsp-description-content .alignnone {
  float: none !important;
  clear: both !important;
  display: block !important;
  max-width: 100% !important;
}

.jmsp-description-content > img,
.jmsp-description-content > figure,
.jmsp-description-content > .wp-caption,
.jmsp-description-content p > img,
.jmsp-description-content p > a > img {
  width: 100% !important;
  height: auto !important;
  margin: 24px auto !important;
  border-radius: 18px;
  object-fit: cover;
  background: var(--jmsp-soft);
  box-shadow: 0 16px 38px rgba(18,18,18,.08);
}

.jmsp-description-content figure,
.jmsp-description-content .wp-caption {
  width: 100% !important;
  margin: 24px 0 !important;
  padding: 8px;
  border-radius: 19px;
  background: var(--jmsp-soft);
  border: 1px solid #e5e5e1;
}

.jmsp-description-content figure img,
.jmsp-description-content .wp-caption img {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 13px;
  box-shadow: none;
}

.jmsp-description-content figcaption,
.jmsp-description-content .wp-caption-text {
  margin: 9px 5px 2px;
  color: var(--jmsp-muted);
  font-size: 11.5px;
  line-height: 1.9;
  text-align: center;
}

/* ویدئوی محصول */

.jmsp-description-content .wp-video,
.jmsp-description-content .mejs-container,
.jmsp-description-content video,
.jmsp-description-content iframe,
.jmsp-description-content .wp-block-video,
.jmsp-description-content .wp-block-embed,
.jmsp-description-content .wp-block-embed__wrapper {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
}

.jmsp-description-content .wp-video,
.jmsp-description-content .wp-block-video,
.jmsp-description-content .wp-block-embed {
  margin: 26px 0 !important;
  padding: 8px;
  overflow: hidden;
  border-radius: 19px;
  background: #111;
  border: 1px solid rgba(18,18,18,.12);
  box-shadow: 0 18px 42px rgba(18,18,18,.13);
}

.jmsp-description-content video,
.jmsp-description-content iframe {
  display: block;
  height: auto !important;
  min-height: 330px;
  margin: 0 !important;
  border: 0;
  border-radius: 13px;
  background: #0b0b0b;
}

.jmsp-description-content .mejs-container,
.jmsp-description-content .mejs-inner,
.jmsp-description-content .mejs-mediaelement,
.jmsp-description-content .mejs-mediaelement video {
  border-radius: 13px;
}

.jmsp-description-content ul,
.jmsp-description-content ol {
  clear: both;
  margin: 18px 0;
  padding-right: 21px;
}

.jmsp-description-content li {
  margin-bottom: 8px;
}

.jmsp-usage-card {
  padding: 29px;
  position: relative;
  overflow: hidden;
  color: var(--jmsp-white);
  background:
  radial-gradient(circle at 12% 10%,rgba(255,255,255,.09),transparent 27%),
  linear-gradient(145deg,#0b0b0b,#252525);
}

.jmsp-usage-card::before {
  content: "JM";
  position: absolute;
  left: 16px;
  bottom: -18px;
  color: rgba(255,255,255,.035);
  font-family: var(--jm-font-num);
  font-size: 130px;
  font-weight: 900;
}

.jmsp-usage-card .jmsp-eyebrow {
  color: var(--jmsp-silver);
}

.jmsp-usage-card h3 {
  margin: 13px 0 10px;
  color: var(--jmsp-white) !important;
  font-size: 25px;
  font-weight: 850;
  line-height: 1.55;
}

.jmsp-usage-card > p {
  margin: 0;
  color: #919191;
  font-size: 11px;
  line-height: 2;
}

.jmsp-usage-list {
  margin: 23px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
  position: relative;
  z-index: 2;
}

.jmsp-usage-list li {
  min-height: 47px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  color: #b5b5b5;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 11.5px;
}

.jmsp-usage-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 1px solid var(--jmsp-silver);
  transform: rotate(45deg);
}

/* شناسنامه متریال */

.jmsp-passport {
  padding: 22px;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--jmsp-black);
  box-shadow: 0 24px 60px rgba(18,18,18,.12);
}

.jmsp-passport::after {
  content: "SPECIFICATION";
  position: absolute;
  left: 18px;
  top: 8px;
  color: rgba(255,255,255,.025);
  font-family: var(--jm-font-num);
  font-size: clamp(48px,8vw,110px);
  font-weight: 900;
  pointer-events: none;
}

.jmsp-passport-head {
  padding: 12px 10px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.jmsp-passport-head .jmsp-eyebrow {
  color: var(--jmsp-silver);
}

.jmsp-passport-head h2 {
  margin: 10px 0 0;
  color: var(--jmsp-white) !important;
  font-size: clamp(30px,3.7vw,49px);
  font-weight: 850;
  line-height: 1.45;
}

.jmsp-passport-head p {
  max-width: 470px;
  margin: 0;
  color: #7f7f7f;
  font-size: 12px;
  line-height: 2;
}

.jmsp-spec-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  position: relative;
  z-index: 2;
}

.jmsp-spec-item {
  min-height: 105px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  transition: transform .23s ease, background-color .23s ease;
}

.jmsp-spec-item:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.07);
}

.jmsp-spec-item small {
  color: #707070;
  font-size: 10.5px;
}

.jmsp-spec-item strong {
  margin-top: 14px;
  color: var(--jmsp-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.85;
}

.jmsp-spec-empty {
  padding: 24px;
  grid-column: 1/-1;
  text-align: center;
  border-radius: 14px;
  color: #888;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
}

/* CTA */

.jmsp-bottom-cta {
  padding: 31px 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 24px;
  background: var(--jmsp-white);
  border: 1px solid rgba(18,18,18,.08);
}

.jmsp-bottom-cta h2 {
  margin: 0;
  color: var(--jmsp-black) !important;
  font-size: clamp(25px,3vw,41px);
  font-weight: 850;
  line-height: 1.5;
}

.jmsp-bottom-cta p {
  max-width: 650px;
  margin: 7px 0 0;
  color: var(--jmsp-text);
  font-size: 11px;
  line-height: 2;
}

.jmsp-bottom-call {
  min-height: 54px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 12px;
  color: var(--jmsp-white);
  background: var(--jmsp-black);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  transition: transform .22s ease, background-color .22s ease;
}

.jmsp-bottom-call:hover {
  color: var(--jmsp-white);
  background: var(--jmsp-graphite);
  transform: translateY(-3px);
}

.jmsp-bottom-call svg {
  width: 19px;
  height: 19px;
}

/* محصولات مرتبط */

.jmsp-related {
  padding: 28px;
  border-radius: 27px;
  background: var(--jmsp-white);
  border: 1px solid rgba(18,18,18,.08);
}

.jmsp-related-head {
  margin-bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.jmsp-related-head h2 {
  margin: 9px 0 0;
  color: var(--jmsp-black) !important;
  font-size: clamp(27px,3.2vw,43px);
  font-weight: 850;
}

.jmsp-related-head p {
  max-width: 440px;
  margin: 0;
  color: var(--jmsp-text);
  font-size: 12px;
  line-height: 2;
}

.jmsp-related-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
}

.jmsp-related-card {
  min-width: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  border-radius: 17px;
  background: var(--jmsp-soft);
  border: 1px solid #e4e4e0;
  transition: transform .25s ease, box-shadow .25s ease;
}

.jmsp-related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 17px 38px rgba(18,18,18,.09);
}

.jmsp-related-image {
  aspect-ratio: 1/1;
  display: block;
  overflow: hidden;
  border-radius: 13px;
  background: #ececea;
}

.jmsp-related-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .4s ease;
}

.jmsp-related-card:hover .jmsp-related-image img {
  transform: scale(1.045);
}

.jmsp-related-body {
  padding: 14px 7px 7px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.jmsp-related-category {
  color: var(--jmsp-muted);
  font-size: 10.5px;
}

.jmsp-related-title {
  margin: 7px 0 14px;
  color: var(--jmsp-black) !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
}

.jmsp-related-link {
  min-height: 42px;
  margin-top: auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 10px;
  color: var(--jmsp-white);
  background: var(--jmsp-black);
  font-size: 11.5px;
  font-weight: 750;
}

.jmsp-related-link:hover {
  color: var(--jmsp-white);
  background: var(--jmsp-graphite);
}

.jmsp-related-link svg {
  width: 16px;
  height: 16px;
}

/* لایت‌باکس */

.jmsp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(8,8,8,.88);
  backdrop-filter: blur(9px);
  transition: opacity .25s ease, visibility .25s ease;
}

.jmsp-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.jmsp-lightbox-frame {
  width: min(92vw,1050px);
  height: min(86vh,820px);
  padding: 18px;
  position: relative;
  border-radius: 24px;
  background: #151515;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.42);
}

.jmsp-lightbox-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.jmsp-lightbox-close {
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  position: absolute;
  left: 15px;
  top: 15px;
  cursor: pointer;
  border-radius: 13px;
  color: var(--jmsp-black);
  background: var(--jmsp-soft);
  border: 0;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.jmsp-lightbox-close svg {
  width: 20px;
  height: 20px;
}

body.jmsp-lightbox-lock {
  overflow: hidden;
}

/* نوار موبایل */

.jmsp-mobile-bar {
  display: none;
}

@media (max-width: 1100px) {
  .jmsp-hero {
    grid-template-columns: minmax(0,1fr) minmax(370px,.82fr);
  }

.jmsp-info-panel {
  padding: 35px 28px;
}

.jmsp-title {
  font-size: clamp(35px,4vw,52px);
}

.jmsp-related-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
}

@media (max-width: 900px) {
  .jmsp-hero,
  .jmsp-story {
    grid-template-columns: 1fr;
  }

.jmsp-gallery-panel,
.jmsp-info-panel {
  min-height: auto;
}

.jmsp-stage {
  height: 550px;
}

.jmsp-info-panel {
  min-height: 610px;
}

.jmsp-spec-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
}

@media (max-width: 767px) {
  .jmsp-page {
    padding: 10px var(--jm-gutter-m) 104px;
  }

.jmsp-breadcrumbs {
  min-height: 42px;
  margin-bottom: 9px;
  padding: 0 13px;
  border-radius: 12px;
  font-size: 10.5px;
}

.jmsp-hero {
  gap: 9px;
}

.jmsp-gallery-panel,
.jmsp-info-panel {
  border-radius: 21px;
}

.jmsp-gallery-panel {
  padding: 10px;
}

.jmsp-gallery-head {
  min-height: 46px;
}

.jmsp-stage {
  height: 390px;
  border-radius: 16px;
}

.jmsp-main-image {
  width: calc(100% - 34px);
  height: calc(100% - 34px);
}

.jmsp-thumbnails {
  height: 66px;
  gap: 6px;
}

.jmsp-thumb,
.jmsp-thumb-number {
  width: 64px;
  min-width: 64px;
  height: 64px;
}

.jmsp-info-panel {
  min-height: auto;
  padding: 31px 21px 22px;
}

.jmsp-title {
  font-size: clamp(34px,10vw,48px);
}

.jmsp-short-description {
  font-size: 12px;
}

.jmsp-facts {
  grid-template-columns: 1fr;
}

.jmsp-inquiry {
  margin-top: 24px;
  grid-template-columns: 1fr;
}

.jmsp-inquiry-button {
  width: 100%;
}

.jmsp-service-strip {
  grid-template-columns: 1fr;
  border-radius: 17px;
}

.jmsp-description-card,
.jmsp-usage-card,
.jmsp-passport,
.jmsp-bottom-cta,
.jmsp-related {
  border-radius: 20px;
}

.jmsp-description-card,
.jmsp-usage-card {
  min-height: auto;
  padding: 28px 21px;
}

.jmsp-description-content video,
.jmsp-description-content iframe {
  min-height: 210px;
}

.jmsp-description-content h2 {
  font-size: 20px;
}

.jmsp-description-content h3 {
  font-size: 17px;
}

.jmsp-passport {
  padding: 13px;
}

.jmsp-passport-head,
.jmsp-related-head {
  align-items: flex-start;
  flex-direction: column;
}

.jmsp-spec-grid,
.jmsp-related-grid {
  grid-template-columns: 1fr;
}

.jmsp-bottom-cta {
  padding: 27px 21px;
  align-items: flex-start;
  flex-direction: column;
}

.jmsp-bottom-call {
  width: 100%;
}

.jmsp-related {
  padding: 20px 13px;
}

.jmsp-related-card {
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
}

.jmsp-related-image {
  aspect-ratio: 1/1.16;
}

.jmsp-mobile-bar {
  height: 70px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  position: fixed;
  right: 10px;
  left: 10px;
  bottom: 10px;
  z-index: 99980;
  border-radius: 17px;
  color: var(--jmsp-white);
  background: rgba(18,18,18,.95);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
}

.jmsp-mobile-bar-copy {
  min-width: 0;
}

.jmsp-mobile-bar-copy small {
  display: block;
  color: #777;
  font-size: 10px;
}

.jmsp-mobile-bar-copy strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--jmsp-white);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jmsp-mobile-call {
  min-height: 50px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  color: var(--jmsp-black);
  background: var(--jmsp-soft);
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
}

.jmsp-mobile-call:hover {
  color: var(--jmsp-black);
}

.jmsp-mobile-call svg {
  width: 18px;
  height: 18px;
}
}

@media (max-width: 420px) {
  .jmsp-stage {
    height: 340px;
  }

.jmsp-related-card {
  grid-template-columns: 104px minmax(0,1fr);
}

.jmsp-mobile-call {
  padding: 0 12px;
}
}

@media (prefers-reduced-motion: reduce) {
  .jmsp-page *,
  .jmsp-page *::before,
  .jmsp-page *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   10. BLOG — صفحه وبلاگ
   کلاس‌ها: .jmblog-*  |  استفاده در: blog
   ========================================================================== */

.jmblog-page {
  --black:#121212;
  --dark:#1a1a1a;
  --graphite:#3a3a3a;
  --text:#5f5f5f;
  --muted:#8a8a8a;
  --silver:#c6c6c6;
  --border:#d9d9d9;
  --soft:#f7f7f5;
  --white:#fff;

  width:100%;
  padding: 18px var(--jm-gutter) 76px;
  direction:rtl;
  color:var(--black);
  background:transparent;
  font-family: var(--jm-font);
}

.jmblog-page,
.jmblog-page *{box-sizing:border-box}

.jmblog-page a{text-decoration:none}
.jmblog-page button,
.jmblog-page input,
.jmblog-page select{font-family:inherit}

.jmblog-page svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.jmblog-shell{
  width:100%;
  max-width: var(--jm-container);
  margin:auto;
}

.jmblog-masthead{
  min-height:270px;
  padding:clamp(32px,4.8vw,66px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 225px;
  align-items:end;
  gap:35px;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  color:#fff;
  background:
  linear-gradient(112deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/74px 74px,
  radial-gradient(circle at 12% 0%,rgba(255,255,255,.12),transparent 28%),
  linear-gradient(145deg,#080808,#242424 74%,#111);
  box-shadow:0 28px 70px rgba(18,18,18,.14);
}

.jmblog-masthead:after{
  content:"J";
  position:absolute;
  left:-25px;
  bottom:-118px;
  color:rgba(255,255,255,.035);
  font:700 350px/1 Georgia,serif;
  pointer-events:none;
}

.jmblog-masthead-copy,
.jmblog-edition{position:relative;z-index:2}

.jmblog-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--silver);
  font-size:9px;
  font-weight:750;
}

.jmblog-eyebrow:before{
  content:"";
  width:31px;
  height:1px;
  background:currentColor;
}

.jmblog-masthead h1{
  max-width:880px;
  margin:15px 0 13px;
  color:#fff!important;
  font-size:clamp(39px,5.3vw,75px);
  font-weight:900;
  line-height:1.25;
  letter-spacing:-1.5px;
}

.jmblog-masthead p{
  max-width:740px;
  margin:0;
  color:#969696;
  font-size:11px;
  line-height:2.15;
}

.jmblog-edition{
  min-height:158px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:18px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(12px);
}

.jmblog-edition small{
  color:#797979;
  font-size:7px;
}

.jmblog-edition strong{
  color:#fff;
  font:700 60px/1 Georgia,serif;
}

.jmblog-edition span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#8c8c8c;
  font-size:7px;
}

.jmblog-edition svg{width:17px;height:17px}

.jmblog-controls{
  margin-top:12px;
  padding:12px;
  border-radius:22px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(18,18,18,.08);
  box-shadow:0 20px 55px rgba(18,18,18,.07);
  backdrop-filter:blur(15px);
}

.jmblog-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(215px,285px);
  gap:9px;
}

.jmblog-search{
  min-height:56px;
  padding:6px 7px 6px 13px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  border-radius:14px;
  background:var(--soft);
  border:1px solid #e4e4e0;
}

.jmblog-search-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:var(--black);
}

.jmblog-search-icon svg{width:18px;height:18px}

.jmblog-search input{
  width:100%;
  height:42px;
  padding:0 7px;
  outline:none;
  border:0;
  box-shadow:none;
  color:var(--black);
  background:transparent;
  font-size:10px;
}

.jmblog-search input::placeholder{color:#999}

.jmblog-search button{
  min-height:42px;
  padding:0 16px;
  cursor:pointer;
  border:0;
  border-radius:10px;
  color:#fff;
  background:var(--black);
  font-size:9px;
  font-weight:800;
  transition:.2s ease;
}

.jmblog-search button:hover{
  background:var(--graphite);
  transform:translateY(-2px);
}

.jmblog-sort{
  min-height:56px;
  padding:6px 13px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  background:var(--soft);
  border:1px solid #e4e4e0;
}

.jmblog-sort svg{width:18px;height:18px;flex:0 0 18px}

.jmblog-sort select{
  width:100%;
  height:42px;
  padding:0;
  outline:none;
  cursor:pointer;
  border:0;
  box-shadow:none;
  color:var(--black);
  background:transparent;
  font-size:9px;
  font-weight:700;
}

.jmblog-categories{
  margin-top:9px;
  padding-top:10px;
  display:flex;
  align-items:center;
  gap:7px;
  overflow-x:auto;
  border-top:1px solid #ecece8;
  scrollbar-width:none;
}

.jmblog-categories::-webkit-scrollbar{display:none}

.jmblog-chip{
  min-height:39px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  border-radius:11px;
  color:var(--text);
  background:var(--soft);
  border:1px solid #e5e5e1;
  font-size:8px;
  font-weight:700;
  transition:.2s ease;
}

.jmblog-chip:hover,
.jmblog-chip.is-active{
  color:#fff;
  background:var(--black);
  border-color:var(--black);
  transform:translateY(-2px);
}

.jmblog-chip span{
  direction:ltr;
  opacity:.55;
  font:8px var(--jm-font-num);
}


.jmblog-results-head{
  margin:31px 0 13px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.jmblog-results-head small{
  display:block;
  color:var(--muted);
  font-size:8px;
}

.jmblog-results-head h2{
  margin:6px 0 0;
  color:var(--black)!important;
  font-size:clamp(25px,3.2vw,42px);
  font-weight:850;
  line-height:1.45;
}

.jmblog-result-count{
  min-height:42px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:11px;
  color:var(--text);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(18,18,18,.08);
  font-size:8px;
}

.jmblog-result-count strong{
  color:var(--black);
  font:700 11px var(--jm-font-num);
}

.jmblog-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.jmblog-card{
  min-width:0;
  min-height:235px;
  padding:8px;
  display:grid;
  grid-template-columns:minmax(245px,31%) minmax(0,1fr);
  align-items:stretch;
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(18,18,18,.08);
  box-shadow:0 14px 38px rgba(18,18,18,.05);
  transition:.28s ease;
}

.jmblog-card:hover{
  border-color:rgba(18,18,18,.16);
  box-shadow:0 23px 52px rgba(18,18,18,.1);
  transform:translateY(-6px);
}

.jmblog-card-media{
  width:100%;
  height:100%;
  min-height:219px;
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:15px;
  background:#ecece9;
}

.jmblog-card-media img,
.jmblog-card-media .jmblog-placeholder{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

.jmblog-card:hover .jmblog-card-media img{transform:scale(1.055)}

.jmblog-card-category{
  min-height:29px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  position:absolute;
  top:9px;
  right:9px;
  z-index:3;
  border-radius:9px;
  color:var(--black);
  background:rgba(247,247,245,.94);
  font-size:7px;
  font-weight:750;
  backdrop-filter:blur(10px);
}

.jmblog-card-number{
  position:absolute;
  left:11px;
  bottom:8px;
  z-index:3;
  color:#fff;
  text-shadow:0 3px 14px rgba(0,0,0,.3);
  font:700 31px/1 Georgia,serif;
}

.jmblog-card-body{
  padding:20px 22px 12px;
  display:flex;
  flex:1;
  flex-direction:column;
}

.jmblog-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:7px;
}

.jmblog-card-top span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.jmblog-card-top svg{width:13px;height:13px}

.jmblog-card h3{
  min-height:0;
  margin:10px 0 9px;
  color:var(--black)!important;
  font-size:16px;
  font-weight:850;
  line-height:1.85;
}

.jmblog-card h3 a{color:inherit}

.jmblog-card-excerpt{
  margin:0;
  display:-webkit-box;
  overflow:hidden;
  color:var(--text);
  font-size:9px;
  line-height:2.05;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

.jmblog-card-footer{
  margin-top:auto;
  padding-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #ecece8;
}

.jmblog-author{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.jmblog-author img{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:10px;
  object-fit:cover;
  filter:grayscale(1);
}

.jmblog-author small,
.jmblog-author strong{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.jmblog-author small{
  color:var(--muted);
  font-size:6px;
}

.jmblog-author strong{
  margin-top:3px;
  color:var(--black);
  font-size:7px;
  font-weight:750;
}

.jmblog-card-link{
  width:41px;
  height:41px;
  display:grid;
  place-items:center;
  flex:0 0 41px;
  border-radius:10px;
  color:var(--black);
  background:var(--soft);
  border:1px solid #e3e3df;
  transition:.2s ease;
}

.jmblog-card-link:hover{
  color:#fff;
  background:var(--black);
  border-color:var(--black);
  transform:translateY(-2px);
}

.jmblog-card-link svg{width:16px;height:16px}

.jmblog-placeholder{
  display:flex!important;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  color:#8d8d88;
  background:
  linear-gradient(135deg,rgba(18,18,18,.04) 25%,transparent 25%) 0 0/24px 24px,
  linear-gradient(315deg,rgba(18,18,18,.04) 25%,transparent 25%) 0 0/24px 24px,
  #efefec;
}

.jmblog-placeholder svg{width:46px;height:46px}
.jmblog-placeholder span{font-size:8px;font-weight:750}

.jmblog-empty{
  padding:62px 24px;
  text-align:center;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(18,18,18,.08);
}

.jmblog-empty-icon{
  width:62px;
  height:62px;
  margin:0 auto 17px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  background:var(--black);
}

.jmblog-empty-icon svg{width:26px;height:26px}

.jmblog-empty h2{
  margin:0;
  color:var(--black)!important;
  font-size:22px;
  font-weight:850;
}

.jmblog-empty p{
  margin:8px 0 20px;
  color:var(--text);
  font-size:10px;
  line-height:2;
}

.jmblog-empty a{
  min-height:46px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  border-radius:11px;
  color:#fff;
  background:var(--black);
  font-size:9px;
  font-weight:800;
}

.jmblog-pagination{margin-top:27px}

.jmblog-pagination .page-numbers{
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
}

.jmblog-pagination .page-numbers li{margin:0}

.jmblog-pagination a.page-numbers,
.jmblog-pagination span.page-numbers{
  min-width:43px;
  height:43px;
  padding:0 11px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:var(--text);
  background:#fff;
  border:1px solid rgba(18,18,18,.09);
  font:700 10px var(--jm-font-num);
  transition:.2s ease;
}

.jmblog-pagination a.page-numbers:hover,
.jmblog-pagination span.page-numbers.current{
  color:#fff;
  background:var(--black);
  border-color:var(--black);
  transform:translateY(-2px);
}

.jmblog-pagination .prev,
.jmblog-pagination .next{
  font-family:inherit!important;
  font-size:8px!important;
}

.jmblog-endnote{
  margin-top:12px;
  padding:26px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-radius:23px;
  color:#fff;
  background:var(--black);
}

.jmblog-endnote h2{
  margin:0;
  color:#fff!important;
  font-size:clamp(22px,3vw,37px);
  font-weight:850;
  line-height:1.55;
}

.jmblog-endnote p{
  max-width:680px;
  margin:7px 0 0;
  color:#8f8f8f;
  font-size:9px;
  line-height:2;
}

.jmblog-endnote a{
  min-height:50px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex:0 0 auto;
  border-radius:12px;
  color:var(--black);
  background:var(--soft);
  font-size:9px;
  font-weight:850;
  transition:.22s ease;
}

.jmblog-endnote a:hover{
  color:var(--black);
  background:#fff;
  transform:translateY(-3px);
}

.jmblog-endnote svg{width:17px;height:17px}

@media(max-width:1100px){
  .jmblog-card{grid-template-columns:minmax(220px,34%) minmax(0,1fr)}
}

@media(max-width:900px){
  .jmblog-masthead{grid-template-columns:1fr}
}

@media(max-width:767px){
  .jmblog-page{padding:10px var(--jm-gutter-m) 60px}

  .jmblog-masthead{
    min-height:auto;
    padding:31px 21px 22px;
    gap:22px;
    border-radius:21px;
  }

.jmblog-masthead h1{font-size:clamp(35px,11vw,49px)}
.jmblog-masthead p{font-size:10px}

.jmblog-edition{
  min-height:112px;
  padding:16px;
}

.jmblog-edition strong{font-size:48px}

.jmblog-controls{
  padding:9px;
  border-radius:17px;
}

.jmblog-toolbar{grid-template-columns:1fr}

.jmblog-search{
  grid-template-columns:39px minmax(0,1fr) auto;
}

.jmblog-search-icon{width:39px;height:39px}
.jmblog-search button{padding:0 12px}

.jmblog-results-head{
  margin-top:23px;
  align-items:flex-start;
  flex-direction:column;
}

.jmblog-grid{gap:8px}

.jmblog-card{
  display:grid;
  grid-template-columns:minmax(135px,.78fr) minmax(0,1.22fr);
  align-items:stretch;
  border-radius:17px;
}

.jmblog-card-media{
  height:100%;
  min-height:250px;
  aspect-ratio:auto;
  border-radius:12px;
}

.jmblog-card-body{padding:10px 10px 6px 8px}

.jmblog-card h3{
  min-height:auto;
  margin:7px 0;
  font-size:13px;
}

.jmblog-card-excerpt{
  font-size:8px;
  -webkit-line-clamp:2;
}

.jmblog-card-footer{padding-top:9px}
.jmblog-author img{display:none}

.jmblog-card-link{
  width:37px;
  height:37px;
  flex-basis:37px;
}

.jmblog-endnote{
  padding:25px 20px;
  align-items:flex-start;
  flex-direction:column;
  border-radius:19px;
}

.jmblog-endnote a{width:100%}
}

@media(max-width:430px){
  .jmblog-card{grid-template-columns:118px minmax(0,1fr)}
  .jmblog-card-media{min-height:225px}
  .jmblog-card-excerpt{display:none}
  .jmblog-card-top{align-items:flex-start;flex-direction:column;gap:3px}
  .jmblog-author small{display:none}
}

@media(prefers-reduced-motion:reduce){
  .jmblog-page *,
  .jmblog-page *:before,
  .jmblog-page *:after{
    transition:none!important;
  }
}


/* ==========================================================================
   10b. BLOG — کارت «مقاله برگزیده» (نسخه 1.1)
   کلاس‌ها: .jmblog-feature*  |  استفاده در: بالای لیست وبلاگ (صفحه اول)
   هم‌خانواده با کارت منتخب صفحه اصلی: پس‌زمینه ذغالی، تایپوگرافی درشت
   ========================================================================== */

.jmblog-page .jmblog-feature {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: minmax(300px, 44%) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--dark) 0%, #232323 55%, #2c2c2c 100%);
  border: 1px solid rgba(18, 18, 18, 0.10);
  box-shadow: 0 24px 60px rgba(18, 18, 18, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jmblog-page .jmblog-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(18, 18, 18, 0.18);
}

.jmblog-feature-media {
  position: relative;
  display: block;
  min-height: 300px;
  overflow: hidden;
  background: #1e1e1e;
}

.jmblog-feature-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.jmblog-page .jmblog-feature:hover .jmblog-feature-media img {
  transform: scale(1.04);
}

/* حالت بدون تصویر شاخص — از placeholder خود قالب استفاده می‌شود */
.jmblog-feature-media .jmblog-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #6f6f6f;
  background: #262626;
}

.jmblog-feature-media .jmblog-placeholder svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #565656;
  stroke-width: 2;
}

.jmblog-feature-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--black);
  background: rgba(255, 255, 255, 0.94);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

.jmblog-feature-number {
  position: absolute;
  bottom: 2px;
  left: 14px;
  color: rgba(255, 255, 255, 0.12);
  font: 900 74px/1 var(--jm-font-num);
  letter-spacing: 0.03em;
  pointer-events: none;
}

.jmblog-feature-body {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
}

.jmblog-feature-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: #a9a9a9;
  font-size: 11px;
  font-weight: 700;
}

.jmblog-feature-meta i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5a5a5a;
}

.jmblog-feature-cat {
  padding: 5px 12px;
  border-radius: 999px;
  color: #e8e8e8;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.jmblog-feature-title {
  margin: 0;
}

.jmblog-feature-title a {
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.75;
  text-decoration: none;
  transition: color 0.2s ease;
}

.jmblog-feature-title a:hover {
  color: var(--silver);
}

.jmblog-feature-excerpt {
  margin: 0;
  color: #b9b9b9;
  font-size: 13px;
  line-height: 2.05;
}

.jmblog-feature-footer {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.jmblog-feature-author {
  color: #9d9d9d;
  font-size: 11.5px;
  font-weight: 600;
}

.jmblog-feature-author strong {
  color: #ffffff;
  font-weight: 800;
}

.jmblog-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 13px;
  color: var(--black);
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.jmblog-feature-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jmblog-feature-link:hover {
  transform: translateY(-2px);
  color: #ffffff;
  background: var(--graphite);
}

@media (max-width: 880px) {
  .jmblog-page .jmblog-feature {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .jmblog-feature-media {
    min-height: 225px;
  }

  .jmblog-feature-media .jmblog-placeholder {
    min-height: 225px;
  }

  .jmblog-feature-body {
    padding: 21px 19px 24px;
  }

  .jmblog-feature-title a {
    font-size: 18.5px;
  }

  .jmblog-feature-number {
    font-size: 52px;
  }
}


/* ==========================================================================
   11. HOME PRODUCTS — ویترین محصولات صفحه اصلی (نسخه 1.2)
   کلاس‌ها: .jm-products-* , .jm-promo-* , .jm-product-*
   استفاده در: صفحه اصلی  |  شورت‌کد: [jm_home_products]
   جایگزین ویجت UAEL Woo Products — دکمه سبد خرید → استعلام تلفنی
   ========================================================================== */

.jm-products-section {
  --jmpr-black: #121212;
  --jmpr-dark: #1a1a1a;
  --jmpr-charcoal: #242424;
  --jmpr-text: #5f5f5f;
  --jmpr-muted: #8a8a8a;
  --jmpr-silver: #c6c6c6;
  --jmpr-border: #d9d9d9;
  --jmpr-soft: #f7f7f5;
  --jmpr-white: #ffffff;

  width: 100%;
  padding: 74px var(--jm-gutter);
  direction: rtl;
  color: var(--jmpr-black);
  background: transparent;
  font-family: var(--jm-font);
}

.jm-products-section,
.jm-products-section * {
  box-sizing: border-box;
}

.jm-products-shell {
  max-width: var(--jm-container);
  margin: 0 auto;
}

/* ----- هدر سکشن — هم‌الگو با ژورنال ----- */
.jm-products-header {
  margin-bottom: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.jm-products-kicker {
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--jmpr-charcoal);
  background: var(--jmpr-soft);
  border: 1px solid rgba(18, 18, 18, 0.08);
  font-size: 11px;
  font-weight: 800;
}

.jm-products-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jmpr-black);
}

.jm-products-title {
  margin: 0 0 10px;
  color: var(--jmpr-black);
  font-size: clamp(24px, 3.2vw, 37px);
  font-weight: 900;
  line-height: 1.5;
}

.jm-products-title span {
  color: var(--jmpr-muted);
  font-weight: 700;
}

.jm-products-description {
  max-width: 560px;
  margin: 0;
  color: var(--jmpr-text);
  font-size: 13.5px;
  line-height: 2.05;
}

.jm-products-archive {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 14px;
  color: var(--jmpr-white);
  background: var(--jmpr-black);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease;
}

.jm-products-archive svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jm-products-archive:hover {
  transform: translateY(-2px);
  background: var(--jmpr-charcoal);
}

/* ----- چیدمان: پنل پرومو + اسلایدر ----- */
.jm-products-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* ----- پنل پرومو (بنرهای تصویری) ----- */
.jm-products-promo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jm-promo-main {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 300px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--jmpr-dark), #2b2b2b);
  text-decoration: none;
}

.jm-promo-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.jm-promo-main:hover img {
  transform: scale(1.05);
  opacity: 0.68;
}

.jm-promo-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85) 8%, rgba(10, 10, 10, 0.12) 55%, rgba(10, 10, 10, 0.28));
}

.jm-promo-copy {
  position: absolute;
  right: 20px;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jm-promo-copy > span {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--jmpr-black);
  background: rgba(255, 255, 255, 0.92);
  font-size: 10.5px;
  font-weight: 800;
}

.jm-promo-copy strong {
  color: var(--jmpr-white);
  font-size: 18.5px;
  font-weight: 900;
  line-height: 1.75;
}

.jm-promo-copy i {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--jmpr-silver);
  font-size: 11.5px;
  font-weight: 700;
  font-style: normal;
  transition: color 0.2s ease;
}

.jm-promo-main:hover .jm-promo-copy i {
  color: var(--jmpr-white);
}

.jm-promo-sub {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 10px;
  border-radius: 18px;
  background: var(--jmpr-white);
  border: 1px solid rgba(18, 18, 18, 0.08);
  box-shadow: 0 14px 38px rgba(18, 18, 18, 0.05);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jm-promo-sub:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(18, 18, 18, 0.09);
}

.jm-promo-sub img {
  width: 92px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
}

.jm-promo-sub-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.jm-promo-sub-copy small {
  color: var(--jmpr-muted);
  font-size: 10.5px;
  font-weight: 700;
}

.jm-promo-sub-copy strong {
  color: var(--jmpr-black);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.03em;
  font-family: var(--jm-font-num);
  direction: ltr;
  text-align: right;
}

/* ----- اسلایدر محصولات ----- */
.jm-products-slider {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.jm-products-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.jm-products-nav-label {
  color: var(--jmpr-muted);
  font-size: 11px;
  font-weight: 700;
}

.jm-products-nav-buttons {
  display: flex;
  gap: 8px;
}

.jm-products-nav button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--jmpr-black);
  background: var(--jmpr-white);
  border: 1px solid rgba(18, 18, 18, 0.12);
  cursor: pointer;
  transition: all 0.22s ease;
}

.jm-products-nav button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jm-products-nav button:hover {
  color: var(--jmpr-white);
  background: var(--jmpr-black);
  border-color: var(--jmpr-black);
  transform: translateY(-2px);
}

.jm-products-nav button:disabled {
  opacity: 0.32;
  pointer-events: none;
}

.jm-products-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 42px) / 4);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.jm-products-track::-webkit-scrollbar {
  display: none;
}

/* ----- کارت محصول ----- */
.jm-product-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--jmpr-white);
  border: 1px solid rgba(18, 18, 18, 0.08);
  box-shadow: 0 14px 38px rgba(18, 18, 18, 0.05);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.jm-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px rgba(18, 18, 18, 0.10);
}

.jm-product-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.4;
  margin: 8px 8px 0;
  overflow: hidden;
  border-radius: 14px;
  background: #ecece9;
}

.jm-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.jm-product-card:hover .jm-product-media img {
  transform: scale(1.06);
}

.jm-product-index {
  position: absolute;
  top: 9px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 9px;
  color: var(--jmpr-white);
  background: rgba(18, 18, 18, 0.62);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--jm-font-num);
  backdrop-filter: blur(3px);
}

.jm-product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--jmpr-muted);
  font-size: 11px;
  font-weight: 700;
}

.jm-product-placeholder svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--jmpr-silver);
  stroke-width: 2;
}

.jm-product-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px 15px;
  flex: 1 1 auto;
}

.jm-product-cat {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--jmpr-text);
  background: var(--jmpr-soft);
  border: 1px solid rgba(18, 18, 18, 0.07);
  font-size: 10px;
  font-weight: 800;
}

.jm-product-name {
  margin: 0;
  flex: 1 1 auto;
}

.jm-product-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--jmpr-black);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.85;
  text-decoration: none;
  transition: color 0.2s ease;
}

.jm-product-name a:hover {
  color: var(--jmpr-text);
}

.jm-product-price {
  color: var(--jmpr-charcoal);
  font-size: 12.5px;
  font-weight: 800;
}

.jm-product-actions {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jm-product-inquiry {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 12px;
  color: var(--jmpr-white);
  background: var(--jmpr-black);
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.22s ease, transform 0.22s ease;
}

.jm-product-inquiry svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jm-product-inquiry:hover {
  background: var(--jmpr-charcoal);
  transform: translateY(-2px);
}

.jm-product-view {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--jmpr-black);
  background: var(--jmpr-soft);
  border: 1px solid rgba(18, 18, 18, 0.09);
  text-decoration: none;
  transition: all 0.22s ease;
}

.jm-product-view svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jm-product-view:hover {
  color: var(--jmpr-white);
  background: var(--jmpr-black);
  border-color: var(--jmpr-black);
}


/* ----- گارد رنگ در برابر hover قالب (Astra/Elementor) — دکمه‌ها همیشه خوانا ----- */
.jm-products-section .jm-product-inquiry,
.jm-products-section .jm-product-inquiry:hover,
.jm-products-section .jm-product-inquiry:focus,
.jm-products-section .jm-products-archive,
.jm-products-section .jm-products-archive:hover,
.jm-products-section .jm-products-archive:focus {
  color: var(--jmpr-white) !important;
}

.jm-products-section .jm-product-view {
  color: var(--jmpr-black) !important;
}

.jm-products-section .jm-product-view:hover,
.jm-products-section .jm-product-view:focus {
  color: var(--jmpr-white) !important;
}

.jm-products-section .jm-products-nav button:hover {
  color: var(--jmpr-white) !important;
}

.jm-products-section .jm-promo-copy strong {
  color: var(--jmpr-white) !important;
}

.jm-products-section .jm-product-name a:hover {
  color: var(--jmpr-text) !important;
}

/* ----- ریسپانسیو ----- */
@media (max-width: 1180px) {
  .jm-products-track {
    grid-auto-columns: calc((100% - 28px) / 3);
  }
}

@media (max-width: 1020px) {
  .jm-products-layout {
    grid-template-columns: 1fr;
  }

  .jm-products-promo {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
  }

  .jm-promo-main {
    min-height: 210px;
  }

  .jm-promo-sub {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
  }

  .jm-promo-sub img {
    width: 100%;
    height: 100%;
    min-height: 110px;
  }
}

@media (max-width: 760px) {
  .jm-products-section {
    padding: 56px var(--jm-gutter-m);
  }

  .jm-products-track {
    grid-auto-columns: calc((100% - 14px) / 1.6);
  }

  .jm-products-promo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .jm-products-track {
    grid-auto-columns: 82%;
  }

  .jm-products-archive {
    width: 100%;
    justify-content: center;
  }
}