/* ============================================================
   کادومون — صفحه اصلی (نسخه پروتوتایپ) — استایل اختصاصی
   ============================================================ */

.kj-home { background: var(--kj-bg); overflow-x: hidden; }
.kj-home * { box-sizing: border-box; }
.kj-home img { max-width: 100%; }
.kj-home a { text-decoration: none !important; }
.kj-home h1, .kj-home h2, .kj-home h3, .kj-home p { margin: 0; }

/* ---------- هیرو ---------- */
.kj-hero {
  background:
    radial-gradient(600px 300px at 85% 20%, rgba(255, 175, 46, .18), transparent 60%),
    radial-gradient(700px 400px at 10% 80%, rgba(240, 66, 110, .12), transparent 60%),
    linear-gradient(180deg, #FFF4EC, var(--kj-bg));
  overflow: hidden;
}
.kj-hero-inner {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px;
  align-items: center; padding-block: 52px 58px;
}
.kj-hero-badge {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 2px solid var(--kj-accent-soft); padding: 7px 18px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--kj-primary-dark);
  box-shadow: var(--kj-shadow); margin-bottom: 18px;
}
.kj-hero h1 {
  font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; line-height: 1.6;
  margin-bottom: 14px; color: var(--kj-ink);
}
.kj-hero .kj-mark {
  background: var(--kj-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kj-hero p { color: var(--kj-muted); font-size: 15px; max-width: 460px; margin-bottom: 26px; line-height: 2; }
.kj-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.kj-hero-stats { display: flex; gap: 26px; }
.kj-hero-stats b { font-size: 19px; font-weight: 800; display: block; color: var(--kj-ink); }
.kj-hero-stats span { font-size: 12px; color: var(--kj-muted); }

.kj-hero-visual { position: relative; justify-self: center; }
.kj-hero-imgwrap {
  width: min(400px, 82vw); border-radius: 28px; overflow: hidden;
  box-shadow: var(--kj-shadow-hover); border: 6px solid #fff;
  animation: kjFloat 5s ease-in-out infinite;
}
.kj-hero-imgwrap img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.kj-float-tag {
  position: absolute; background: #fff; border-radius: 999px; padding: 8px 16px;
  font-size: 12px; font-weight: 700; box-shadow: var(--kj-shadow-hover);
  animation: kjFloat 4s ease-in-out infinite; z-index: 2; white-space: nowrap;
}
.kj-float-tag.t1 { top: -10px; left: -6px; color: var(--kj-teal); animation-delay: .8s; }
.kj-float-tag.t2 { bottom: 16px; right: -12px; color: var(--kj-primary-text); animation-delay: 1.6s; }
@keyframes kjFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- شمارش معکوس مناسبت ---------- */
.kj-countdown-sec { padding-top: 18px; }
.kj-countdown {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, #2b1230, #521022 55%, #7a0c20);
  border-radius: 18px; padding: 14px 22px; color: #fff !important;
  text-decoration: none !important; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px rgba(122, 12, 32, .25);
}
.kj-countdown::before {
  content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 20px 20px;
}
.kj-cd-emoji { font-size: 30px; position: relative; z-index: 2; animation: kjCdPulse 2s ease-in-out infinite; }
@keyframes kjCdPulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.15); } }
.kj-cd-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.kj-cd-text b { font-size: 15.5px; font-weight: 800; color: #fff; }
.kj-cd-text small { font-size: 12px; color: var(--kj-accent); font-weight: 600; }
.kj-cd-timer { display: flex; gap: 8px; position: relative; z-index: 2; margin-inline-start: auto; }
.kj-cd-box {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px; padding: 6px 10px; min-width: 52px; text-align: center;
  display: flex; flex-direction: column; gap: 1px; backdrop-filter: blur(4px);
}
.kj-cd-box b { font-size: 19px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.kj-cd-box i { font-size: 10px; color: rgba(255,255,255,.75); font-style: normal; }
.kj-cd-cta {
  position: relative; z-index: 2; background: #fff; color: var(--kj-primary-text) !important;
  font-size: 13px; font-weight: 800; padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  transition: transform .2s;
}
.kj-countdown:hover .kj-cd-cta { transform: translateX(-3px); }

@media (max-width: 768px) {
  .kj-countdown { gap: 10px 14px; padding: 14px 16px; justify-content: center; text-align: center; }
  .kj-cd-text { align-items: center; flex-basis: 100%; order: 1; }
  .kj-cd-emoji { order: 0; }
  .kj-cd-timer { margin-inline-start: 0; order: 2; flex-basis: 100%; justify-content: center; }
  .kj-cd-cta { order: 3; }
  .kj-cd-box { min-width: 46px; padding: 5px 8px; }
  .kj-cd-box b { font-size: 17px; }
}

/* ---------- چیپ‌های بودجه ---------- */
.kj-budget { padding-block: 6px 34px; }
.kj-budget-row { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
.kj-budget-label { font-weight: 800; font-size: 14px; }
.kj-chip {
  padding: 9px 20px; border-radius: 999px; background: #fff;
  border: 2px solid var(--kj-line); font-size: 13px; font-weight: 600;
  color: var(--kj-ink) !important; transition: all .2s; display: inline-block;
}
.kj-chip:hover { border-color: var(--kj-primary); color: var(--kj-primary-text) !important; transform: translateY(-2px); box-shadow: var(--kj-shadow); }

/* ---------- نوار خدمات: مینیمال و وسط‌چین ---------- */
.kj-features { padding-block: 4px 44px; }
.kj-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kj-feature {
  background: #fff; border: 1px solid var(--kj-line); border-radius: var(--kj-radius);
  padding: 26px 18px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 4px; transition: transform .25s, box-shadow .25s;
}
.kj-feature:hover { transform: translateY(-4px); box-shadow: var(--kj-shadow); }
.kj-feature-icon {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 8px;
  background: var(--kj-bg); border: 1px solid var(--kj-line); color: var(--kj-ink);
  display: flex; align-items: center; justify-content: center;
}
.kj-feature-icon svg { width: 24px; height: 24px; }
.kj-feature b { font-size: 14px; color: var(--kj-ink); }
.kj-feature span { font-size: 12px; color: var(--kj-muted); }

/* ---------- عنوان بخش ---------- */
.kj-section { padding-block: 26px; }
.kj-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.kj-sec-head.kj-center { justify-content: center; }
.kj-sec-title { font-size: clamp(19px, 2.5vw, 25px); font-weight: 800; display: flex; align-items: center; gap: 11px; color: var(--kj-ink); }
.kj-sec-title .kj-bar { width: 6px; height: 27px; border-radius: 4px; background: var(--kj-grad); display: inline-block; }
.kj-sec-link { font-size: 13px; font-weight: 700; color: var(--kj-primary-text) !important; display: inline-flex; align-items: center; gap: 4px; }
.kj-sec-link svg { width: 15px; height: 15px; }

/* ---------- اسکرولر ---------- */
.kj-scroller-wrap { position: relative; }
.kj-scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: 225px; gap: 15px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 5px 2px 16px;
  scrollbar-width: none;
}
.kj-scroller::-webkit-scrollbar { display: none; }
.kj-scroller > * { scroll-snap-align: start; }
.kj-scroll-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: var(--kj-shadow-hover); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.kj-scroll-arrow:hover { background: var(--kj-primary); color: #fff; }
.kj-scroll-arrow.kj-prev { right: -12px; }
.kj-scroll-arrow.kj-next { left: -12px; }
.kj-scroll-arrow svg { width: 19px; height: 19px; }

/* ---------- بنر دوتایی ---------- */
.kj-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kj-duo-banner {
  border-radius: 24px; padding: 34px 30px; min-height: 215px; position: relative;
  overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  transition: transform .25s, box-shadow .25s;
}
.kj-duo-banner:hover { transform: translateY(-4px); box-shadow: var(--kj-shadow-hover); }
.kj-duo-banner.kj-her { background: linear-gradient(120deg, #FFE3EC, #FFC3D4); }
.kj-duo-banner.kj-him { background: linear-gradient(120deg, #E3EEFF, #C3D6F5); }
.kj-duo-banner h3 { font-size: 21px; font-weight: 800; color: var(--kj-ink); position: relative; z-index: 2; }
.kj-duo-banner p { font-size: 13px; color: #5A4E6B; max-width: 250px; position: relative; z-index: 2; line-height: 1.9; }
.kj-duo-banner .kj-btn { margin-top: 12px; align-self: flex-start; position: relative; z-index: 2; padding: 9px 22px; font-size: 13px; }
.kj-duo-img {
  position: absolute; left: -10px; bottom: -10px; width: 200px; height: 200px;
  border-radius: 22px; transform: rotate(-8deg); overflow: hidden;
  box-shadow: var(--kj-shadow-hover); transition: transform .3s; display: block;
}
.kj-duo-img img { width: 100%; height: 100%; object-fit: cover; }
.kj-duo-banner:hover .kj-duo-img { transform: rotate(-4deg) scale(1.04); }

/* ---------- بنر سازمانی ---------- */
.kj-org-banner {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: center;
  background:
    radial-gradient(400px 240px at 15% 120%, rgba(240, 66, 110, .35), transparent 65%),
    radial-gradient(300px 200px at 85% -20%, rgba(255, 175, 46, .28), transparent 65%),
    var(--kj-ink);
  border-radius: 28px; padding: 40px 44px; overflow: hidden; position: relative;
  transition: transform .25s, box-shadow .25s; cursor: pointer;
}
.kj-org-banner:hover { transform: translateY(-4px); box-shadow: var(--kj-shadow-hover); }
.kj-org-badge {
  display: inline-block; background: rgba(255, 255, 255, .12); color: var(--kj-accent);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  padding: 6px 16px; font-size: 12px; font-weight: 700; margin-bottom: 14px;
}
.kj-org-banner h3 { font-size: clamp(20px, 2.8vw, 27px); font-weight: 800; color: #fff; margin-bottom: 10px; }
.kj-org-banner p { color: #C9C2D6; font-size: 13.5px; max-width: 480px; line-height: 2; margin-bottom: 20px; }
/* تصویر بنر هدایای سازمانی هم مثل بنر هیرو دایره شد.
   نسبت تصویر از قبل ۱:۱ است (aspect-ratio پایین‌تر). */
.kj-org-img {
  border-radius: 50%; overflow: hidden; border: 4px solid rgba(255, 255, 255, .15);
  transform: rotate(3deg); box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  max-width: 280px; justify-self: center;
}
.kj-org-img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- مارکی لوگوی مشتریان ---------- */
.kj-clients-marquee {
  overflow: hidden; position: relative; background: #fff;
  border: 1px solid var(--kj-line); border-radius: var(--kj-radius); padding-block: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kj-clients-track {
  display: flex; align-items: center; gap: 46px; width: max-content;
  animation: kjMarquee 40s linear infinite;
}
.kj-clients-marquee:hover .kj-clients-track { animation-play-state: paused; }
/* لوگوهای مشتریان رنگی نمایش داده می‌شوند */
.kj-clients-track img {
  height: 54px; width: auto; object-fit: contain;
  filter: none; opacity: 1; transition: transform .25s;
}
.kj-clients-track img:hover { transform: scale(1.06); }
@keyframes kjMarquee { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- گرید دسته‌بندی ---------- */
.kj-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.kj-cat-card {
  background: #fff; border-radius: var(--kj-radius); padding: 20px; text-align: center;
  border: 1px solid var(--kj-line); transition: transform .25s, box-shadow .25s; display: block;
}
.kj-cat-card:hover { transform: translateY(-5px); box-shadow: var(--kj-shadow-hover); }
.kj-cat-card img {
  width: 104px; height: 104px; object-fit: cover; border-radius: 50%;
  margin: 0 auto 13px; border: 4px solid var(--kj-primary-soft); transition: border-color .25s;
  display: block;
}
.kj-cat-card:hover img { border-color: var(--kj-accent); }
.kj-cat-card b { font-size: 14px; display: block; color: var(--kj-ink); }
.kj-cat-card span { font-size: 11.5px; color: var(--kj-muted); }

/* ---------- بلاگ ---------- */
.kj-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kj-blog-card {
  background: #fff; border-radius: var(--kj-radius); overflow: hidden;
  border: 1px solid var(--kj-line); display: block;
  transition: transform .25s, box-shadow .25s;
}
.kj-blog-card:hover { transform: translateY(-5px); box-shadow: var(--kj-shadow-hover); }
.kj-blog-cover { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 42px; overflow: hidden; }
.kj-blog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.kj-blog-card:hover .kj-blog-cover img { transform: scale(1.05); }
.kj-blog-body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kj-blog-cover.c1 { background: linear-gradient(135deg, #FFE9F0, #FFD9E5); }
.kj-blog-cover.c2 { background: linear-gradient(135deg, #FFF4DE, #FFE9C0); }
.kj-blog-cover.c3 { background: linear-gradient(135deg, #E2F7F4, #C9EFE9); }
.kj-blog-body { padding: 16px 18px 20px; display: block; }
.kj-blog-body b { font-size: 14px; font-weight: 700; line-height: 1.8; color: var(--kj-ink); display: block; margin-bottom: 6px; }
.kj-blog-card:hover .kj-blog-body b { color: var(--kj-primary-text); }
.kj-blog-body span { font-size: 12px; color: var(--kj-muted); display: block; }

/* ---------- متن سئو ---------- */
.kj-seo {
  background: #fff; border: 1px solid var(--kj-line); border-radius: var(--kj-radius);
  padding: 24px 28px; margin-block: 30px 20px; color: var(--kj-muted);
  font-size: 12.5px; line-height: 2.2;
}
.kj-seo h2 { font-size: 15.5px; color: var(--kj-ink); margin: 0 0 10px; font-weight: 800; }
.kj-seo p { margin: 0 0 10px; }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 768px) {
  /* خرید بر اساس بودجه: تک‌خط با اسکرول افقی */
  .kj-budget-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .kj-budget-row::-webkit-scrollbar { display: none; }
  .kj-budget-label, .kj-budget-row .kj-chip {
    flex-shrink: 0; white-space: nowrap; scroll-snap-align: start;
  }
}

@media (max-width: 991px) {
  .kj-hero-inner { grid-template-columns: 1fr; padding-block: 38px 46px; }
  .kj-hero-visual { display: none; }
  /* چهار مزیت در موبایل: یک ردیف افقی قابل کشیدن (پایین فایل تعریف شده) */
  .kj-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .kj-duo { grid-template-columns: 1fr; }
  .kj-org-banner { grid-template-columns: 1fr; padding: 30px 26px; }
  .kj-org-img { display: none; }
}
@media (max-width: 560px) {

  .kj-feature { padding: 18px 12px; }
  .kj-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .kj-blog-grid { grid-template-columns: 1fr; }
  .kj-scroller { grid-auto-columns: 165px; }
  .kj-cat-card img { width: 80px; height: 80px; }
  .kj-scroll-arrow { display: none; }
  .kj-clients-track { gap: 30px; }
  .kj-clients-track img { height: 42px; }
}

/* ==================================================================
   کادومون — چهار مزیت در موبایل
   قبلاً ۲×۲ می‌شد و ارتفاع زیادی می‌گرفت. حالا مثل دسکتاپ در یک
   ردیف است، فقط قابل کشیدن افقی.
   ================================================================== */
@media (max-width: 991px) {
  .kj-features-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .kj-features-grid::-webkit-scrollbar { display: none; }

  .kj-feature {
    flex: 0 0 auto;
    width: 150px;
    scroll-snap-align: start;
    padding: 16px 12px;
    gap: 2px;
  }
  .kj-feature-icon { width: 42px; height: 42px; margin-bottom: 6px; }
  .kj-feature-icon svg { width: 20px; height: 20px; }
  .kj-feature b { font-size: 13px; }
  .kj-feature span { font-size: 11.5px; line-height: 1.8; }
  /* روی لمس، بالا آمدن کارت لازم نیست */
  .kj-feature:hover { transform: none; box-shadow: none; }
}
@media (max-width: 380px) {
  .kj-feature { width: 138px; }
}

/* ==================================================================
   کادومون — اصلاحات صفحه اصلی (مرداد ۱۴۰۵)
   ================================================================== */

/* --- ۱) بنر خانم‌ها / آقایان: پس‌زمینه طوسی --- */
.kj-duo-banner.kj-her,
.kj-duo-banner.kj-him {
  background: linear-gradient(120deg, var(--kj-duo-1), var(--kj-duo-2));
}
.kj-duo-banner p { color: #5A5E66; }

/* --- ۲) بنر سازمانی: قرمز هم‌رنگ لوگو، دکمه سفید با متن مشکی --- */
.kj-org-banner {
  background:
    radial-gradient(420px 260px at 12% 118%, rgba(255, 255, 255, .14), transparent 62%),
    radial-gradient(320px 210px at 88% -18%, rgba(255, 175, 46, .22), transparent 62%),
    linear-gradient(125deg, var(--kj-org-1), var(--kj-org-2)) !important;
}
.kj-org-banner p { color: rgba(255, 255, 255, .88); }
.kj-org-badge {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
}
.kj-org-banner .kj-btn.kj-btn-primary {
  background: #fff !important;
  background-image: none !important;
  color: #1A1A1A !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
.kj-org-banner:hover .kj-btn.kj-btn-primary { background: #F7F7F8 !important; }
.kj-org-img { border-color: rgba(255, 255, 255, .28); }

/* --- ۳) راهنمای خرید کادو: در موبایل یک ردیف افقی قابل کشیدن --- */
@media (max-width: 991px) {
  .kj-blog-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .kj-blog-grid::-webkit-scrollbar { display: none; }
  .kj-blog-card {
    flex: 0 0 auto;
    width: 250px;
    scroll-snap-align: start;
  }
  .kj-blog-card:hover { transform: none; box-shadow: none; }
  .kj-blog-cover { height: 132px; }
}
@media (max-width: 380px) {
  .kj-blog-card { width: 228px; }
}

/* ---------- بج تخفیف و قیمت خط‌خورده در لیست محصولات صفحه اصلی ---------- */
.kj-home .kjp-off-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--kj-accent); color: var(--kj-ink);
  font-size: 11px; font-weight: 800; padding: 3px 11px; border-radius: 999px;
}
.kj-home .kjc-old {
  text-decoration: line-through; opacity: .55;
  font-size: 11.5px; font-weight: 500; margin-inline-start: 5px; color: var(--kj-muted);
}

/* --- بنر دوتایی در موبایل: تصویر کوچک‌تر تا روی متن نیفتد --- */
@media (max-width: 767px) {
  .kj-duo-banner { padding: 26px 22px; min-height: 175px; }
  .kj-duo-img { width: 132px; height: 132px; left: -12px; bottom: -12px; border-radius: 18px; }
  .kj-duo-banner h3,
  .kj-duo-banner p { max-width: calc(100% - 122px); }
}

/* ==================================================================
   بنر بالای صفحه — تصویر دایره‌ای و پس‌زمینه تصویری
   (متن‌ها و تصویرها از پنل ← تنظیمات صفحه اصلی)
   ================================================================== */

/* تصویر بنر: مربع ← دایره */
.kj-hero-imgwrap {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  width: min(380px, 78vw);
  border-width: 8px;
}
.kj-hero-imgwrap img { width: 100%; height: 100%; object-fit: cover; }

/* برچسب‌های شناور را کمی تو می‌بریم چون گوشه‌های دایره خالی است */
.kj-hero-imgwrap + .kj-float-tag.t1,
.kj-hero-visual .kj-float-tag.t1 { top: 4px; left: -18px; }
.kj-hero-visual .kj-float-tag.t2 { bottom: 26px; right: -18px; }

/* وقتی ادمین تصویر پس‌زمینه گذاشته باشد */
.kj-hero-hasbg {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
}
/* لایه روشن روی عکس تا متن تیره خوانا بماند */
.kj-hero-hasbg::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to left, rgba(255,255,255,.30), rgba(255,255,255,.86) 62%);
}
.kj-hero-hasbg .kj-hero-inner { position: relative; z-index: 1; }

@media (max-width: 991px) {
  /* در موبایل ستون تصویر مخفی است، پس پوشش باید یکنواخت‌تر باشد */
  .kj-hero-hasbg::before { background: rgba(255, 255, 255, .84); }
}

/* تصویر گرد بنر در موبایل هم دیده شود.
   قبلاً کل ستون تصویر زیر ۹۹۲px مخفی می‌شد و کاربر موبایل هیچ تصویری
   از بنر نمی‌دید؛ حالا زیر متن، وسط‌چین و کوچک‌تر نمایش داده می‌شود. */
@media (max-width: 991px) {
  .kj-hero-visual { display: block !important; justify-self: center; margin-top: 26px; }
  .kj-hero-imgwrap { width: min(230px, 62vw); border-width: 6px; }
  .kj-hero-inner { padding-block: 34px 40px; }
  .kj-float-tag { font-size: 11px; padding: 6px 13px; }
  .kj-hero-visual .kj-float-tag.t1 { top: 0; left: -10px; }
  .kj-hero-visual .kj-float-tag.t2 { bottom: 18px; right: -10px; }
}
@media (max-width: 380px) {
  .kj-hero-imgwrap { width: 190px; }
}

/* --- قیمت تخفیف‌دار در لیست‌های صفحه اصلی: قدیمی بالا، جدید پایین --- */
.kj-home .kj-price {
  display: flex; flex-direction: column-reverse;
  align-items: flex-start; gap: 1px; min-width: 0;
}
.kj-home .kjc-old {
  margin-inline-start: 0; white-space: nowrap;
  font-size: 11px; opacity: .5; line-height: 1.5;
}
.kj-home .kj-pfoot { min-height: 40px; align-items: flex-end; }
/* بج تخفیف در لیست‌های خانه هم فقط عدد است */
.kj-home .kjp-off-badge { padding: 3px 9px; font-size: 11.5px; direction: ltr; line-height: 1.7; }

/* --- فاصله نام تا قیمت در لیست‌های صفحه اصلی (مثل دسته‌بندی) --- */
.kj-home .kj-pbody { gap: 6px; padding: 12px 14px 14px; }
/* min-height برداشته شد — نام یک‌خطی است و جای اضافه لازم ندارد */
.kj-home .kj-pname { font-size: 13px; line-height: 1.7; min-height: 0; }
.kj-home .kj-pfoot { min-height: 0; margin-top: 0; align-items: flex-start; }
.kj-home .kj-price { font-size: 14.5px; }

/* ==================================================================
   کادومون — یکسان‌سازی فاصله‌های صفحه اصلی (مرداد ۱۴۰۵)

   مشکل: فاصله‌ها روی هیچ مقیاسی نبودند (۱۱، ۱۴، ۱۵، ۱۸، ۲۲، ۲۶،
   ۳۴، ۴۴، ۵۲، ۵۸) و مهم‌تر اینکه موبایل و دسکتاپ دقیقاً یک مقدار
   می‌گرفتند؛ یعنی فاصله‌ای که روی موبایل درست است روی دسکتاپ خفه
   به نظر می‌رسد و برعکس.

   راه‌حل: یک مقیاس ۸ پیکسلی با دو پله (موبایل / دسکتاپ).
   ================================================================== */

.kj-home {
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --sec-y:  20px;   /* padding عمودی هر بخش → فاصله‌ی ۴۰px بین بخش‌ها */
  --band-y: 28px;   /* فاصله‌ی نوار بودجه از بنر هیرو */
  --gap:    16px;   /* فاصله‌ی داخل گریدها و ردیف‌ها */
}

@media (min-width: 768px) {
  .kj-home {
    --sec-y:  32px;   /* → فاصله‌ی ۶۴px بین بخش‌ها */
    --band-y: 48px;   /* بنر هیرو ← نوار بودجه */
    --gap:    24px;
  }
}

/* ---------- ریتم عمودی بخش‌ها ---------- */
.kj-home > .kj-section { padding-block: var(--sec-y); }

/* نوار بودجه: بالا فاصله‌ی بیشتر از بنر، پایین هم‌ریتم بقیه */
.kj-home > .kj-budget   { padding-block: var(--band-y) var(--sec-y); }
.kj-home > .kj-features { padding-block: var(--sec-y); }

/* ---------- هیرو ---------- */
.kj-home .kj-hero-inner { padding-block: 40px 48px; gap: var(--sp-6); }
@media (min-width: 768px) {
  .kj-home .kj-hero-inner { padding-block: 56px 64px; gap: 40px; }
}

/* ---------- سرتیتر بخش‌ها ---------- */
.kj-home .kj-sec-head { margin-bottom: var(--sp-4); gap: var(--sp-4); }
@media (min-width: 768px) {
  .kj-home .kj-sec-head { margin-bottom: var(--sp-5); }
}

/* ---------- گریدها و ردیف‌ها روی مقیاس ---------- */
.kj-home .kj-budget-row    { gap: var(--sp-3); }
.kj-home .kj-features-grid { gap: var(--gap); }
.kj-home .kj-cat-grid      { gap: var(--gap); }
.kj-home .kj-duo           { gap: var(--gap); }
.kj-home .kj-blog-grid     { gap: var(--gap); }

/* اسکرولر افقی: پایینش فقط جای سایه کارت‌ها را می‌خواهد، نه فاصله‌ی بخش */
.kj-home .kj-scroller { gap: var(--gap); padding: 4px 2px 8px; }

/* ---------- بنرها ---------- */
.kj-home .kj-org-banner {
  gap: var(--sp-5); padding: var(--sp-6) var(--sp-5);
}
@media (min-width: 768px) {
  .kj-home .kj-org-banner { gap: var(--sp-6); padding: 40px 44px; }
}
.kj-home .kj-org-banner p { margin-bottom: var(--sp-4); }

.kj-home .kj-clients-marquee { padding-block: var(--sp-5); }

/* ==================================================================
   نوار خدمات — یک باکس یکپارچه با جداکننده بین بخش‌ها
   قبلاً چهار کارت جدا با کادر و سایه‌ی مستقل بود.
   ================================================================== */

.kj-home .kj-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                                   /* جداکننده جای فاصله را می‌گیرد */
  background: #fff;
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-radius);
  overflow: hidden;
}

.kj-home .kj-feature {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px 16px;
  gap: 4px;
}

/* جداکننده‌ی عمودی بین بخش‌ها (در RTL، سمت شروعِ هر آیتم به‌جز اولی) */
.kj-home .kj-feature + .kj-feature {
  border-inline-start: 1px solid var(--kj-line);
}

/* کل باکس یکپارچه است، پس بالا آمدن تک‌کارت معنا ندارد */
.kj-home .kj-feature:hover {
  transform: none;
  box-shadow: none;
  background: var(--kj-bg);
}

/* ---------- موبایل و تبلت: دو در دو داخل همان باکس ---------- */
@media (max-width: 991px) {
  .kj-home .kj-features-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  .kj-home .kj-feature {
    width: auto !important;
    flex: none !important;
    padding: 18px 12px;
  }
  /* در چیدمان دو ستونه، جداکننده‌ها شبکه‌ای می‌شوند */
  .kj-home .kj-feature + .kj-feature { border-inline-start: 0; }
  .kj-home .kj-feature:nth-child(2n) { border-inline-start: 1px solid var(--kj-line); }
  .kj-home .kj-feature:nth-child(n+3) { border-top: 1px solid var(--kj-line); }
}

/* ==================================================================
   یکسان‌سازی فاصله‌های داخلیِ صفحه اصلی روی دسکتاپ
   مقادیر خارج از مقیاس ۸: ۶، ۹، ۱۰، ۱۱، ۱۲، ۱۴، ۱۸، ۳۰، ۳۴، ۴۶
   ================================================================== */

/* سرتیتر بخش: فاصله‌ی نوار رنگی تا متن */
.kj-home .kj-sec-title { gap: 12px; }

/* کارت محصول: پدینگ نامتقارن ۱۲/۱۴/۱۴ و فاصله‌ی ۶ */
.kj-home .kj-pbody { padding: 16px; gap: 8px; }

/* بنر سازمانی */
.kj-home .kj-org-banner h3 { margin-bottom: 12px; }

/* بنر دوتایی: ۳۴ عمودی و ۳۰ افقی */
.kj-home .kj-duo-banner { padding: 32px; gap: 8px; }
.kj-home .kj-duo-banner .kj-btn { margin-top: 16px; }

/* کارت بلاگ: ۱۶ بالا، ۱۸ کناره، ۲۰ پایین */
.kj-home .kj-blog-body { padding: 20px; }

/* چیپ بودجه */
.kj-home .kj-chip { padding: 8px 20px; }

/* نوار لوگوی مشتریان */
.kj-home .kj-clients-track { gap: 48px; }

/* کارت دسته‌بندی */
.kj-home .kj-cat-card { padding: 20px; }

@media (min-width: 992px) {
  .kj-home .kj-cat-card { padding: 24px; }
}

/* ==================================================================
   نوار خدمات — اصلاح دوم
   روی موبایل چهارتایی می‌ماند (بدون اسکرول) و اندازه‌ها کوچک می‌شوند.
   باکس داخل .kj-container قرار گرفته تا مثل بقیه‌ی بخش‌ها
   همان ۲۰px تورفتگی از چپ و راست را داشته باشد.
   ================================================================== */

/* روی همه‌ی اندازه‌ها چهار ستون، هیچ اسکرولی */
.kj-home .kj-features-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
}

.kj-home .kj-feature {
  width: auto !important;
  flex: none !important;
  min-width: 0;                 /* تا متن بلند ستون را پهن نکند */
}

/* جداکننده‌ها دوباره فقط عمودی — چیدمان دو‌در‌دو حذف شد */
.kj-home .kj-feature + .kj-feature {
  border-inline-start: 1px solid var(--kj-line) !important;
  border-top: 0 !important;
}
.kj-home .kj-feature:nth-child(n+3) { border-top: 0 !important; }

/* ---------- تبلت ---------- */
@media (max-width: 991px) {
  .kj-home .kj-feature { padding: 16px 8px; gap: 3px; }
  .kj-home .kj-feature-icon { width: 40px; height: 40px; margin-bottom: 6px; }
  .kj-home .kj-feature-icon svg { width: 19px; height: 19px; }
  .kj-home .kj-feature b { font-size: 12px; }
  .kj-home .kj-feature span { font-size: 10.5px; line-height: 1.7; }
}

/* ---------- موبایل: چهار ستون در ~۳۳۵px ---------- */
@media (max-width: 767px) {
  .kj-home .kj-feature { padding: 12px 4px; gap: 2px; }
  .kj-home .kj-feature-icon { width: 32px; height: 32px; margin-bottom: 5px; }
  .kj-home .kj-feature-icon svg { width: 16px; height: 16px; }
  .kj-home .kj-feature b {
    font-size: 10.5px; line-height: 1.45;
    /* شکستن کلمه‌های بلند فارسی تا از ستون بیرون نزند */
    word-break: break-word; overflow-wrap: anywhere;
  }
  .kj-home .kj-feature span { font-size: 9px; line-height: 1.5; }
}

@media (max-width: 380px) {
  .kj-home .kj-feature { padding: 10px 3px; width: auto !important; }
  .kj-home .kj-feature-icon { width: 28px; height: 28px; margin-bottom: 4px; }
  .kj-home .kj-feature-icon svg { width: 14px; height: 14px; }
  .kj-home .kj-feature b { font-size: 9.5px; }
  .kj-home .kj-feature span { font-size: 8.5px; }
}

/* ---------- جداکننده‌های نوار خدمات ----------
   قبلاً border-inline-start بود و تمام ارتفاع آیتم را می‌گرفت.
   حالا خط با شبه‌المان کشیده می‌شود تا ۷۰٪ ارتفاع باشد و
   از بالا و پایین ۱۵٪ فاصله بگیرد. */
.kj-home .kj-feature + .kj-feature {
  border-inline-start: 0 !important;
}
.kj-home .kj-feature { position: relative; }
.kj-home .kj-feature + .kj-feature::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--kj-line);
}

/* ==================================================================
   اصلاح موارد ۷، ۸ و ۱۰ گزارش — مخصوص صفحه اصلی

   این قواعد عمداً در kdm-home2.css اند نه kdm-theme.css: قاعده‌های
   پایه‌ی هیرو و چیپ و مارکی در همین فایل‌اند و چون home2 بعد از تم
   لود می‌شود، هم‌وزنشان در تم بازنده می‌شد.
   ================================================================== */

/* ---------- ۷) ارتفاع هیرو روی موبایل ----------
   قبلاً ۶۸۸px بود = ۸۵٪ صفحه‌نمایش ۸۱۲px؛ هیچ نشانه‌ای از ادامه‌ی
   صفحه دیده نمی‌شد و اولین محصول واقعی در ۱۰۸۹px بود.
   هدف: زیر ۷۰٪ تا لبه‌ی بخش بعدی پیدا باشد و اسکرول دعوت‌کننده شود. */
@media (max-width: 767px) {
  .kj-home .kj-hero-inner,
  .kj-hero-inner  { padding-block: 24px 28px; }   /* .kj-home لازم است: قاعده‌ی پایه وزن (۰،۲،۰) دارد */
  .kj-hero-badge  { margin-bottom: 10px; }
  .kj-hero h1     { margin-bottom: 10px; font-size: clamp(21px, 6.4vw, 27px); }
  .kj-hero p      { margin-bottom: 14px; line-height: 1.85; font-size: 14px; }
  .kj-hero-ctas   { margin-bottom: 14px; gap: 10px; }
  .kj-hero-visual { max-width: 168px; margin-inline: auto; }
}

/* ---------- ۸) مکث نوار لوگوی مشتریان ----------
   مکث با هاور از قبل بود و درست کار می‌کرد؛ ولی روی موبایل هاور
   وجود ندارد و کاربر لمسی راهی برای متوقف کردنش نداشت. */
.kj-clients-marquee:active .kj-clients-track,
.kj-clients-marquee:focus-within .kj-clients-track,
.kj-clients-marquee.kj-marquee-paused .kj-clients-track {
  animation-play-state: paused;
}
.kj-clients-marquee.kj-marquee-paused::after {
  content: 'متوقف شد — دوباره بزنید';
  position: absolute; inset-block-end: 6px; inset-inline-end: 12px;
  font-size: 10.5px; font-weight: 600; color: var(--kj-muted);
  background: rgba(255, 255, 255, .92); padding: 2px 8px; border-radius: 999px;
}

/* ---------- ۱۰) ناحیه‌ی لمسی مخصوص صفحه اصلی ---------- */
.kj-chip { min-height: 44px; display: inline-flex; align-items: center; }
.kj-sec-link { display: inline-flex; align-items: center; min-height: 44px; }
.kj-sec-head { align-items: center; }

/* ---------- تصویر هیرو روی موبایل حذف شد ----------
   با نبودِ تصویر و دو برچسب شناورش، بنر از ۶۰۹px به حدود نیمی از
   صفحه‌نمایش می‌رسد و اولین محصول خیلی زودتر دیده می‌شود.
   روی دسکتاپ تصویر سر جایش است. */
@media (max-width: 767px) {
  /* !important لازم است: قاعده‌ی قبلی در همین فایل
     «.kj-hero-visual { display: block !important }» زیر ۹۹۱px دارد و
     بدون !important بازنده می‌شویم. برچسب‌های شناور هم داخل همین
     عنصرند، پس با آن پنهان می‌شوند. */
  .kj-hero-visual { display: none !important; }
}


/* ==================================================================
   «خرید بر اساس بودجه» روی موبایل — کلمه‌ی «خرید» ناقص دیده می‌شد

   دو ایراد روی هم افتاده بودند:

   ۱) ماسک محوکننده‌ی نوار `90deg, #000 92%, transparent` بود، یعنی
      سمت *راست* را محو می‌کرد. در RTL شروع نوار همان سمت راست است،
      پس ماسک دقیقاً روی برچسب می‌افتاد و اولین کلمه کم‌رنگ می‌شد.
      جهتش برعکس شد: محو در سمت چپ، جایی که محتوا ادامه دارد.

   ۲) برچسب `scroll-snap-align: start` داشت و snap لبه‌ی آیتم را به
      لبه‌ی کانتینر می‌چسباند و پدینگ ۲۰px را نادیده می‌گرفت
      (اندازه‌گیری: scrollLeft روی ‎-20 گیر کرده بود و لبه‌ی برچسب
      روی ۳۷۵ یعنی دقیقاً لبه‌ی صفحه). برچسب اصلاً نباید نقطه‌ی
      توقف باشد — فقط چیپ‌ها. scroll-padding هم اضافه شد تا اگر
      روزی snap برگشت، فاصله رعایت شود.
   ================================================================== */
@media (max-width: 768px) {
  .kj-budget-row {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%);
    mask-image: linear-gradient(90deg, transparent, #000 8%);
    scroll-padding-inline-start: 20px;
  }
  .kj-budget-label { scroll-snap-align: none; }
}

/* ==================================================================
   بنر هیرو — ریتم فاصله‌ها (شهریور ۱۴۰۵)

   اندازه‌گیری قبل از اصلاح (موبایل):
       بج → عنوان      ۱۰px
       عنوان → متن     ۱۰px
       متن → دکمه‌ها     ۰px   ← متن به دکمه‌ها چسبیده بود
       ارتفاع دکمه‌ها   ۴۸px و ۵۲px (نابرابر)

   چرا صفر بود: template.css قاعده‌ی سراسری
       p { margin-bottom: 0 !important }
   دارد. !important روی سلکتور تگ، هر قاعده‌ی بدون !important را
   شکست می‌دهد — هر چقدر هم مشخص‌تر باشد. پس اینجا هم !important
   لازم است.

   ریتم انتخاب‌شده: فاصله‌های داخل یک گروه (بج/عنوان/متن) کوچک و
   برابر، و یک پله‌ی بزرگ‌تر تا دکمه‌ها که گروه کنش جداست.
   ================================================================== */
.kj-hero .kj-hero-badge { margin-bottom: 14px; }
.kj-hero h1             { margin-bottom: 14px; }
.kj-hero p              { margin-bottom: 24px !important; }
.kj-hero .kj-hero-ctas  { gap: 12px; margin-bottom: 0; }

/* دکمه‌ها هم‌ارتفاع شوند.
   دکمه‌ی دوم (kj-btn-ghost) حاشیه‌ی ۲px دارد و همان ۴px اختلاف
   ارتفاع را می‌ساخت (۴۸ در برابر ۵۲). min-height کف می‌گذارد نه سقف،
   پس مشکل را حل نمی‌کرد؛ به‌جایش پدینگ عمودی همان دکمه به اندازه‌ی
   حاشیه‌اش کم می‌شود تا جمعشان یکی شود. */
.kj-hero .kj-hero-ctas > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 12px;
}
.kj-hero .kj-hero-ctas > .kj-btn-ghost { padding-block: 10px; }

@media (max-width: 767px) {
  .kj-hero .kj-hero-badge { margin-bottom: 12px; }
  .kj-hero h1             { margin-bottom: 12px; }
  .kj-hero p              { margin-bottom: 20px !important; }
  .kj-hero .kj-hero-ctas  { gap: 10px; }
}

/* ==================================================================
   نوار خدمات — تصویر دلخواه و تعداد ستون پویا  (شهریور ۱۴۰۵)

   متن و تصویر هر مورد از پنل مدیریت می‌آید، پس تعداد موردها هم
   می‌تواند کمتر یا بیشتر از چهار باشد. عدد از قالب داخل --kj-feat-n
   می‌آید و پیش‌فرضش ۴ است تا اگر متغیر نیامد چیزی نشکند.
   ================================================================== */
.kj-features-grid { grid-template-columns: repeat(var(--kj-feat-n, 4), 1fr); }

/* تصویر انتخابی مدیر جای آیکون توکار می‌نشیند و باید هم‌اندازه‌ی
   همان باشد، وگرنه ارتفاع کارت‌ها با هم فرق می‌کند. */
.kj-feature-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

@media (max-width: 991px) {
  /* اینجا گرید به فلکس افقی تبدیل شده، پس تعداد ستون بی‌معناست و
     دست‌نخورده می‌ماند. */
  .kj-feature-icon img { width: 26px; height: 26px; }
}


/* ==================================================================
   بازطراحی سه بخش صفحه اصلی — شهریور ۱۴۰۵
   (نوار خدمات · بنر سازمانی · کارت‌های دسته‌بندی)

   منبع: پیش‌نمایش بازطراحی. داده‌ها همان‌جایی می‌مانند که بودند —
   این‌ها فقط چیدمان و ظاهرند و هیچ فیلدی از پنل عوض نشده.
   ================================================================== */

/* ------------------------------------------------------------------
   ۱) نوار خدمات

   ⚠ دو بلوک قدیمی بالاتر در همین فایل هستند که باید خنثی شوند:
       «یک باکس یکپارچه با جداکننده» — چهار بخش داخل یک کادر
       «اصلاح دوم» — چهار ستون روی همه‌ی اندازه‌ها با !important
   دومی چون بعدتر می‌آید برنده بود و روی موبایل هر کارت را به ۸۳
   پیکسل می‌رساند. اینجا هر دو با همان وزن (‎.kj-home‎ + important)
   کنار گذاشته می‌شوند.

   طرح تازه: چهار کارتِ جدا، چپ‌چین، با آیکون داخل مربعِ گردِ
   صورتیِ کم‌رنگ. وسط‌چین بودن باعث می‌شد چشم برای هر کارت دوباره
   مرکز را پیدا کند؛ حالا هر چهار عنوان روی یک محور می‌افتند.
   ------------------------------------------------------------------ */
.kj-home .kj-features-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}
.kj-home .kj-feature {
  background: #fff !important;
  border: 1px solid var(--kj-line) !important;
  border-radius: var(--kj-radius) !important;
  padding: 20px 18px !important;
  text-align: start;
  align-items: flex-start;
  gap: 2px;
  transition: transform .25s, box-shadow .25s;
}
/* جداکننده‌های باکس یکپارچه دیگر لازم نیستند */
.kj-home .kj-feature + .kj-feature { border-inline-start: 1px solid var(--kj-line) !important; }
.kj-home .kj-feature:nth-child(2n),
.kj-home .kj-feature:nth-child(n+3) { border-top: 1px solid var(--kj-line) !important; }
.kj-home .kj-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--kj-shadow);
  background: #fff !important;
}
.kj-home .kj-feature-icon {
  width: 38px !important; height: 38px !important;
  border-radius: 12px !important; margin-bottom: 11px !important;
  background: var(--kj-primary-soft) !important; border: 0 !important;
  color: var(--kj-primary-text) !important;
}
.kj-home .kj-feature-icon svg { width: 19px !important; height: 19px !important; }
.kj-home .kj-feature-icon img { width: 21px; height: 21px; }
.kj-home .kj-feature b { font-size: 14px !important; font-weight: 700; }
.kj-home .kj-feature span { font-size: 12.5px !important; color: var(--kj-muted); line-height: 1.85 !important; }

@media (max-width: 991px) {
  .kj-home .kj-features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .kj-home .kj-feature { padding: 16px 14px !important; }
}
/* تک‌ستونی فقط روی گوشی‌های خیلی باریک. روی ۳۷۵px دو ستون
   (هرکدام ~۱۶۲px) جا می‌شود و خواناست. */
@media (max-width: 359px) {
  .kj-home .kj-features-grid { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   ۲) بنر سازمانی — تصویر تزئینی جایش را به چهار عدد واقعی داد
   ------------------------------------------------------------------ */
/* این چهار مورد فهرست امکانات‌اند، نه دکمه. قبلاً کادر گرد و خط دور
   داشتند و درست بالای دکمه‌ی واقعیِ بنر می‌نشستند، پس کاربر فکر
   می‌کرد کلیک‌شدنی‌اند. حالا کادر و خط دور کامل برداشته شده و به‌جایش
   یک تیک طلایی کنار هر متن می‌آید — شکل استانداردِ «فهرست امکانات».
   تیک با SVG درون‌خطی است نه کاراکتر ✓، تا در هر فونتی یکسان بیاید. */
.kj-org-banner .kj-org-pts {
  display: flex; flex-wrap: wrap;
  gap: 6px 20px; margin-bottom: 18px;
}
.kj-org-banner .kj-org-pts span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: #EFE7F0;
  background: none; border: 0; border-radius: 0; padding: 0;
}
.kj-org-banner .kj-org-pts span::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background: no-repeat center/14px 14px
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFAF2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.kj-org-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255, 255, 255, .15);
  border-radius: 18px; overflow: hidden;
}
.kj-org-stats > span { background: var(--kj-ink); padding: 20px 14px; text-align: center; display: block; }
.kj-org-stats b {
  display: block; font-size: 26px; font-weight: 800; line-height: 1.25;
  color: var(--kj-accent); font-variant-numeric: tabular-nums;
}
.kj-org-stats i { font-style: normal; font-size: 11.5px; color: #C9C2D6; line-height: 1.7; }

/* ------------------------------------------------------------------
   ۳) کارت‌های دسته‌بندی — کاشیِ تمام‌تصویر، کارت اول دو برابر

   ⚠ نشانه‌گذاری قالب دست‌نخورده است: همان img و b و span مستقیم
   داخل لینک، فقط جایگذاری‌شان عوض شده. پس داده‌های پنل و ترتیبی
   که مدیر تعیین می‌کند سرِ جایشان می‌مانند — هرچه اول باشد بزرگ
   می‌شود.
   ------------------------------------------------------------------ */
.kj-cat-mosaic { grid-auto-rows: 148px; }
.kj-home .kj-cat-mosaic .kj-cat-card {
  position: relative; padding: 0 !important; overflow: hidden;
  border: 1px solid var(--kj-line);
}
.kj-cat-mosaic .kj-cat-big { grid-column: span 2; grid-row: span 2; }
.kj-home .kj-cat-mosaic .kj-cat-card img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  object-fit: cover; transition: transform .5s;
}
.kj-cat-mosaic .kj-cat-card:hover img { transform: scale(1.06); }
.kj-cat-mosaic .kj-cat-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(28, 12, 22, .86) 0%, rgba(28, 12, 22, .2) 58%, rgba(28, 12, 22, 0) 100%);
}
.kj-home .kj-cat-mosaic .kj-cat-card b,
.kj-home .kj-cat-mosaic .kj-cat-card span {
  position: absolute; z-index: 2; inset-inline: 15px;
  color: #fff !important; text-align: start; display: block;
}
.kj-home .kj-cat-mosaic .kj-cat-card b { bottom: 30px; font-size: 14.5px; font-weight: 700; }
.kj-home .kj-cat-mosaic .kj-cat-card span { bottom: 12px; font-size: 11.5px; color: rgba(255, 255, 255, .8) !important; }
.kj-home .kj-cat-mosaic .kj-cat-big b { bottom: 36px; font-size: 18px; }
.kj-home .kj-cat-mosaic .kj-cat-big span { bottom: 15px; font-size: 12.5px; }
/* کاشی‌ها به هم چسبیده‌اند، پس بالا رفتن تک‌کارت معنا ندارد */
.kj-cat-mosaic .kj-cat-card:hover { transform: none; box-shadow: var(--kj-shadow); }

@media (max-width: 860px) {
  .kj-cat-mosaic { grid-auto-rows: 118px; }
  .kj-cat-mosaic .kj-cat-big { grid-row: span 1; }
  .kj-home .kj-cat-mosaic .kj-cat-big b { font-size: 15px; }
}

/* ==================================================================
   بنر سازمانی روی موبایل — کم کردن، نه کوچک کردن
   (شهریور ۱۴۰۵)

   اندازه‌گیری پیش از اصلاح روی ۳۷۵px:
       ارتفاع بنر            ۵۸۴px  (۷۲٪ ارتفاع صفحه)
       پاراگراف              ۸۱px / سه خط
       چیپ‌ها                ۴ تا، شکسته به ۳+۱
       آمار                  ۲×۲ در دو ردیف
       دکمه                  وسط بنر، نه آخرش

   سه ایراد ساختاری:
   ۱) پاراگراف و چیپ‌ها یک حرف را دو بار می‌زنند («حک لوگو»،
      «فاکتور رسمی»، «بدون محدودیت تعداد» در هر دو هست).
   ۲) دکمه آخرین عنصر نبود؛ آمار بعد از آن می‌آمد و اقدام اصلی
      وسط بنر گم می‌شد.
   ۳) چیپ چهارم تنها در خط دوم می‌افتاد.

   ⚠ ترتیب با display:contents عوض شده، نه با تغییر قالب: فرزندان
   .kj-org-text مستقیم آیتم فلکس می‌شوند تا بشود دکمه را با order
   به آخر برد. این‌طور نشانه‌گذاری و داده‌های پنل دست‌نخورده می‌ماند.
   ================================================================== */
@media (max-width: 767px) {
  .kj-org-banner {
    display: flex; flex-direction: column;
    gap: 14px; padding: 22px 18px;
  }
  .kj-org-text { display: contents; }

  .kj-org-badge  { order: 1; margin-bottom: 0; align-self: flex-start; }
  .kj-org-banner h3 { order: 2; margin-bottom: 0; }
  .kj-org-banner p  { order: 3; margin-bottom: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .kj-org-stats  { order: 4; }
  .kj-org-banner .kj-btn { order: 5; width: 100%; text-align: center; }

  /* چیپ‌ها حذف — محتوایشان همان چیزی است که در پاراگراف آمده */
  .kj-org-banner .kj-org-pts { display: none; }

  /* دو عدد قوی‌تر کنار هم، به‌جای چهار عدد در دو ردیف */
  .kj-org-stats { grid-template-columns: 1fr 1fr; }
  .kj-org-stats > span:nth-child(n+3) { display: none; }
  .kj-org-stats > span { padding: 14px 10px; }
  .kj-org-stats b { font-size: 22px; }
  .kj-org-stats i { font-size: 11px; }
}

/* ==================================================================
   کارت تخفیف‌دار صفحه اصلی — همان راه‌حل دسته‌بندی (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   قالب home.tpl برای محصول تخفیف‌دار <small class="kjc-old"> می‌سازد و
   .kj-home .kj-price همان column-reverse را داشت، پس اگر محصولی با
   تخفیف در لیست‌های صفحه اصلی بیفتد، بلوک قیمتش دوخطی و کارت ۱۷px
   بلندتر از همسایه‌هایش می‌شد. الان چنین محصولی در لیست‌ها نیست، اما
   با اولین تخفیف بروز می‌کرد. چیدمان با دسته‌بندی یکسان شد.
   عرض بدنه‌ی کارت خانه روی دسکتاپ ۱۹۱px است و پهن‌ترین جفت قیمت ۱۶۳px،
   پس یک خط جا می‌شود؛ روی موبایل جا نمی‌شود و دوخطیِ رزروشده می‌ماند.
   ================================================================== */
.kj-home .kj-price {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
}
.kj-home .kjc-old {
  margin-inline-start: 0;
  white-space: nowrap;
  font-size: 11px;
  opacity: .5;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .kj-home .kj-price {
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1px;
  }
  .kj-home .kjc-old { font-size: 10.5px; }
  /* فقط ردیفی که محصول تخفیف‌دار دارد جای خط دوم را رزرو کند. رزروِ
     بی‌قید باعث می‌شد در ردیف‌های بدون تخفیف (که الان همه‌شان همین‌اند)
     فاصله‌ی نام تا قیمت از ۶px به ۲۶px برسد و کارت نامتوازن شود. */
  .kj-home .kj-scroller:has(.kjc-old) .kj-pfoot,
  .kj-home .kj-pgrid:has(.kjc-old) .kj-pfoot { min-height: 40px; align-items: flex-end; }
}

/* ==================================================================
   «پرفروش‌ترین محصولات» — ردیف رتبه‌بندی‌شده (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   این ردیف قبلاً دقیقاً شبیه «جدیدترین محصولات» بود و هیچ نشانه‌ای
   نداشت که محتوایش یک رتبه‌بندی است. حالا شماره‌ی رتبه روی تصویر
   می‌آید — عددی که واقعاً اطلاعات دارد، نه تزئین.

   عدد پایینِ تصویر می‌نشیند تا با بج تخفیف و ستاره‌ها (هر دو بالای
   کارت) برخورد نکند. یک محو تیره هم زیرش گذاشته شده تا روی عکس روشن
   هم خوانا بماند؛ بدون آن، عدد سفید روی پس‌زمینه‌ی سفید گم می‌شد.
   ================================================================== */
.kj-home .kj-ranked .kj-pimg { position: relative; }

.kj-home .kj-ranked .kj-pimg::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(26, 17, 31, .58), rgba(26, 17, 31, 0));
  pointer-events: none;
}

.kj-home .kj-ranked .kj-rank {
  position: absolute; bottom: 4px; inset-inline-start: 12px; z-index: 2;
  font-size: 40px; font-weight: 800; line-height: 1;
  color: #fff; letter-spacing: -1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  pointer-events: none;
}

/* کارت موبایل ۱۶۵px است و عدد ۴۰px روی آن سنگینی می‌کند */
@media (max-width: 768px) {
  .kj-home .kj-ranked .kj-rank { font-size: 29px; bottom: 3px; inset-inline-start: 9px; }
  .kj-home .kj-ranked .kj-pimg::after { height: 40%; }
}

/* ==================================================================
   بنر بالای صفحه — حالت ۲: اسلایدر تصویری (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   اسکرول‌اسنپ بومی مرورگر به‌جای کتابخانه: کشیدن با انگشت را خود
   مرورگر انجام می‌دهد، پس روی موبایل نرم است و هیچ فایل جاوااسکریپت
   اضافه‌ای لود نمی‌شود. جاوااسکریپت فقط دایره‌ها را همگام می‌کند.

   نسبت تصویر پله‌پله عوض می‌شود: بنر ۱۶۰۰×۵۶۰ روی موبایل اگر همان
   نسبت را نگه دارد فقط ۱۳۱px ارتفاع می‌گیرد و خوانا نیست، پس آنجا
   کادر بلندتر می‌شود و دو طرف تصویر با cover بریده می‌شود. برای همین
   در پنل نوشته شده متن مهم را وسط تصویر بگذارید.
   ================================================================== */
.kj-hslider {
  max-width: 1240px; margin: 0 auto 34px;
  padding-inline: 20px; position: relative;
}

.kj-hslides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--kj-radius);
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* روی iOS بدون این، اسنپ در انتهای حرکت گاهی نصفه می‌ماند */
  -webkit-overflow-scrolling: touch;
}
.kj-hslides::-webkit-scrollbar { display: none; }

.kj-hslide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  /* scroll-snap-stop: always عمداً گذاشته نشده. با آن، مرورگر اجازه
     نمی‌دهد یک حرکت از روی چند اسلاید رد شود؛ نتیجه این بود که کلیک
     روی دایره‌ی چهارم فقط یک اسلاید جلو می‌رفت (اندازه‌گیری شد:
     goTo(3) روی اسلاید ۱ می‌ایستاد). بدون آن، پرش با دایره درست کار
     می‌کند و کشیدن با انگشت هم مثل هر اسلایدر دیگری رفتار می‌کند. */
  display: block;
  aspect-ratio: 1600 / 560;
  background: var(--kj-primary-soft, #FCEDF2);
}
.kj-hslide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: var(--kj-radius);
}

/* ---------- نوار دایره‌ای: روی خود بنر ----------
   قبلاً زیر بنر و بیرون از آن بود و یک نوار ۱۴px به ارتفاع بخش اضافه
   می‌کرد. حالا روی تصویر می‌نشیند با فاصله‌ی استاندارد ۲۰px از کف بنر
   (۱۶px روی موبایل، هم‌اندازه‌ی پدینگ کناری صفحه).

   قرصِ تیره‌ی پشت دایره‌ها برداشته شد: روی بنرهای روشن مثل یک لکه‌ی
   طوسی دیده می‌شد. حالا خودِ دایره‌ها سایه‌ی نرم دارند، پس بدون هیچ
   کادری روی زمینه‌ی روشن و تیره خوانا می‌مانند. */
.kj-hdots {
  position: absolute;
  inset-inline: 0;
  bottom: 20px;
  display: flex; justify-content: center; align-items: center;
  gap: 8px;
  pointer-events: none;   /* فضای خالی دو طرف، کلیک روی بنر را نگیرد */
}
.kj-hdot {
  position: relative; z-index: 1;
  pointer-events: auto;
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  /* سایه جای آن قرص طوسی را می‌گیرد و دایره را از تصویر جدا می‌کند */
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.kj-hdot.on {
  /* دایره‌ی فعال کشیده می‌شود تا هم جای فعلی و هم تعداد کل پیدا باشد */
  width: 26px;
  background: #fff;
}
.kj-hdot:focus-visible {
  outline: 2px solid var(--kj-primary, #D9295F);
  outline-offset: 3px;
}

/* نسبت تبلت از ۲.۰ به ۲.۴ رفت. با ۲.۰ بنر در عرض ۹۹۱px ارتفاع ۴۷۶px
   می‌گرفت، یعنی روی تبلت بلندتر از دسکتاپ (۴۲۰px) می‌شد که بی‌معنی بود.
   با ۲.۴ ارتفاعش ۳۹۶px می‌شود و پله‌ی بین دسکتاپ و تبلت یکنواخت است. */
@media (max-width: 991px) {
  .kj-hslide { aspect-ratio: 2.4 / 1; }
}
@media (max-width: 600px) {
  .kj-hslider { padding-inline: 16px; margin-bottom: 26px; }
  .kj-hslide { aspect-ratio: 3 / 2; }
  /* اسلایدی که تصویر مخصوص موبایل دارد، نسبتش دقیقاً همان ۹۰۰×۶۰۰
     است، پس هیچ بریدگی‌ای پیش نمی‌آید */
  .kj-hslide.has-m { aspect-ratio: 900 / 600; }
  .kj-hdots { bottom: 16px; gap: 7px; }
  .kj-hdot { width: 7px; height: 7px; }
  .kj-hdot.on { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .kj-hslides { scroll-behavior: auto; }
  .kj-hdot { transition: none; }
}

/* picture شفاف شود تا img مستقیم بچه‌ی اسلاید بماند و ۱۰۰٪ پر کند */
.kj-hslide picture { display: contents; }

/* ==================================================================
   بخش شگفت‌انگیز (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   ردیف تخفیف عمداً شبیه لیست‌های دیگر نیست: زمینه‌ی قرمزِ تمام‌عرض
   آن را از جریان سفید صفحه جدا می‌کند و کارت سفید روی قرمز، خودش
   بیشترین کنتراست ممکن را می‌سازد.

   کارت اینجا افقی‌تر و کوتاه‌تر از کارت محصول است تا حتی اگر کنار
   لیست‌های دیگر بیفتد هم با یک نگاه فرق کند.
   ================================================================== */
.kj-deals {
  background: linear-gradient(135deg, #B01234 0%, #D9295F 55%, #E8455C 100%);
  padding: 26px 0 10px;
  margin-bottom: 34px;
}

.kj-deals-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.kj-deals-head h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0; color: #fff;
  font-size: 20px; font-weight: 800;
}
.kj-deals-head h2 svg {
  width: 22px; height: 22px; flex: none;
  fill: var(--kj-accent, #FFAF2E); stroke: var(--kj-accent, #FFAF2E);
}
.kj-deals-all {
  display: inline-flex; align-items: center; gap: 5px;
  color: #fff !important; text-decoration: none !important;
  font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 6px 14px;
  transition: background .2s;
  white-space: nowrap;
}
.kj-deals-all:hover { background: rgba(255, 255, 255, .28); }
.kj-deals-all svg { width: 15px; height: 15px; flex: none; }

/* فلش‌ها روی زمینه‌ی قرمز باید سفید باشند */
.kj-deals-wrap .kj-scroll-arrow {
  background: #fff; color: var(--kj-primary, #D9295F);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* ---------- کارت ---------- */
.kj-deal {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(80, 4, 24, .18);
  transition: transform .25s, box-shadow .25s;
}
.kj-deal-img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.kj-deal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kj-deal-off {
  position: absolute; top: 8px; inset-inline-end: 8px;
  background: var(--kj-primary, #D9295F); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1.7;
  padding: 2px 9px; border-radius: 999px;
  direction: ltr;              /* «۲۵٪» درست بچسبد */
}

.kj-deal-body {
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px 13px 14px;
}
.kj-deal-name {
  font-size: 13px; font-weight: 600; line-height: 1.8;
  color: var(--kj-ink, #2A2038);
  /* یک خط، مثل بقیه‌ی کارت‌های سایت */
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kj-deal-prices {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap; min-width: 0;
}
.kj-deal-prices s {
  font-size: 11px; font-weight: 500; opacity: .5;
  color: var(--kj-muted, #6B6279); white-space: nowrap;
}
.kj-deal-prices b {
  font-size: 14.5px; font-weight: 800;
  color: var(--kj-primary, #D9295F);
}

@media (hover: hover) and (pointer: fine) {
  .kj-deal:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(80, 4, 24, .3); }
}

@media (max-width: 768px) {
  .kj-deals { padding: 20px 0 6px; margin-bottom: 26px; }
  .kj-deals-head { margin-bottom: 12px; }
  .kj-deals-head h2 { font-size: 17px; }
  .kj-deals-head h2 svg { width: 19px; height: 19px; }
  .kj-deals-all { font-size: 12px; padding: 5px 11px; }
  .kj-deal-body { padding: 10px 11px 12px; gap: 6px; }
  .kj-deal-prices b { font-size: 13.5px; }
}

/* ==================================================================
   کارت مقاله — هم‌ترازی درون کارت (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   سه ایراد روی هم افتاده بود:

   ۱) عنوان -webkit-line-clamp: 2 داشت ولی چند خط پایین‌تر
      display: block روی همان سلکتور نوشته شده بود. line-clamp فقط با
      display:-webkit-box کار می‌کند، پس clamp عملاً خنثی بود و عنوان
      بلند می‌توانست سه خط هم بشود.
   ۲) ارتفاع عنوان رزرو نشده بود: روی دو کارت ۲۵px (یک خط) و روی یکی
      ۵۰px (دو خط). برای همین خلاصه در دو کارت از ۱۸۴px و در سومی از
      ۲۰۹px شروع می‌شد — ۲۵px ناهم‌ترازی در یک ردیف.
   ۳) خلاصه‌ی مقاله هیچ clamp نداشت، پس با یک متن بلندتر ارتفاعش
      هر چقدر می‌خواست می‌شد.

   حالا عنوان دقیقاً دو خط و خلاصه دقیقاً سه خط جا می‌گیرد، پس همه‌ی
   کارت‌های یک ردیف ساختار درونی یکسان دارند.
   ================================================================== */
.kj-blog-body b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* font-size:14px × line-height:1.8 × ۲ خط */
  min-height: calc(14px * 1.8 * 2);
}
.kj-blog-body span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  /* font-size:12px × line-height:1.5 × ۳ خط */
  min-height: calc(12px * 1.5 * 3);
}

/* ------------------------------------------------------------------
   شگفت‌انگیز با کارت کم
   ------------------------------------------------------------------
   .kj-scroller یک گرید با ستون‌های ثابت ۲۲۵px است، پس با یک یا دو
   کارت بقیه‌ی عرض خالی می‌ماند و ردیف نصفه به نظر می‌رسد. با کمتر از
   پنج کارت (بیشترین تعدادی که در عرض ۱۲۰۰px جا می‌شود) چیدمان به
   فلکسِ وسط‌چین عوض می‌شود و فلش‌های بی‌کار هم پنهان می‌شوند.
   ------------------------------------------------------------------ */
/* فلش فقط در حالتی پنهان می‌شود که هیچ عرضی نمی‌تواند سرریز کند
   (یک یا دو کارت = حداکثر ۴۶۵px، از باریک‌ترین ظرف دسکتاپ هم کمتر).
   با سه یا چهار کارت ممکن است در پنجره‌ی باریک سرریز شود، پس آنجا
   فلش‌ها می‌مانند تا راه حرکت بسته نشود. */
.kj-deals-wrap.kj-n1 .kj-scroll-arrow,
.kj-deals-wrap.kj-n2 .kj-scroll-arrow { display: none; }

/* وسط‌چین با fit-content + margin:auto انجام می‌شود، نه
   justify-content:center. علتش اندازه‌گیری شد: با center، اگر ردیف از
   ظرف پهن‌تر شود مرورگر آن را از دو طرف بیرون می‌زند و ابتدای ردیف
   دیگر با اسکرول هم قابل دسترسی نیست (در عرض ۷۰۹px با ۴ کارت دیدم).
   با این روش، جا که باشد وسط می‌نشیند و جا که نباشد از ابتدا شروع
   می‌شود و مثل قبل کشویی می‌ماند. */
.kj-deals .kj-scroller.kj-few {
  display: flex;
  gap: 15px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.kj-deals .kj-scroller.kj-few > * { flex: 0 0 225px; }

@media (max-width: 600px) {
  /* روی گوشی با دو کارت یا بیشتر، دقیقاً مثل هر ردیف دیگر سایت رفتار
     می‌کند: همان ۱۶۵px که grid-auto-columns موبایل استفاده می‌کند.
     (اول با calc(50vw - 27.5px) نوشته بودم تا دو کارت کامل جا شود،
     ولی ۴px سرریز می‌کرد و به‌هرحال با بقیه‌ی ردیف‌ها ناهماهنگ بود.) */
  .kj-deals .kj-scroller.kj-few { width: auto; margin-inline: 0; }
  .kj-deals .kj-scroller.kj-few > * { flex: 0 0 165px; }

  .kj-deals .kj-scroller.kj-n1 { width: fit-content; margin-inline: auto; }
  .kj-deals .kj-scroller.kj-n1 > * { flex: 0 0 min(260px, 72vw); }
}

/* ==================================================================
   اصلاحات صفحه اصلی — دسته‌ی شهریور ۱۴۰۵ (بخش دوم)
   ================================================================== */

/* --- ۱) فاصله‌ی «شگفت‌انگیز» از بنر بالای صفحه ---
   نوار قرمز مستقیم به کف بنر چسبیده بود (اندازه‌گیری: ۰px). چون
   زمینه‌ی رنگی دارد، فاصله باید margin باشد نه padding، وگرنه خودِ
   نوار قرمز تا لبه‌ی بنر بالا می‌آید. هم‌اندازه‌ی margin پایینش شد. */
.kj-deals { margin-top: 34px; }

/* --- ۲) دکمه‌های روی بنرها ---
   معیار، دکمه‌ی «مشاهده پک‌های سازمانی» است: قرص سفید با متن تیره.
   دکمه‌های بنر بالای صفحه گرادیان صورتی و حاشیه‌ی رنگی داشتند و روی
   عکسِ بنر با هم یکدست نبودند. */
.kj-home .kj-hero .kj-btn,
.kj-home .kj-duo-banner .kj-btn,
.kj-home .kj-org-banner .kj-btn {
  background: #fff !important;
  color: #1A1A1A !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
@media (hover: hover) and (pointer: fine) {
  .kj-home .kj-hero .kj-btn:hover,
  .kj-home .kj-duo-banner .kj-btn:hover,
  .kj-home .kj-org-banner .kj-btn:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  }
}

/* --- ۳) بج «ویژه شرکت‌ها و سازمان‌ها» ---
   قرص با حاشیه بود و درست بالای دکمه‌ی واقعی می‌نشست، پس دکمه به نظر
   می‌رسید. حالا یک برچسب ساده است: بدون کادر، با یک خط کوتاه رنگی
   کنارش که نقشِ «این یک عنوان بالادستی است» را می‌رساند. */
.kj-org-banner .kj-org-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; border-radius: 0; padding: 0;
  color: var(--kj-accent, #FFAF2E);
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  margin-bottom: 14px;
}
.kj-org-banner .kj-org-badge::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; flex: none;
}

/* --- ۴) بنر سازمانی دیگر لینک نیست ---
   تگش از <a> به <div> رفت، پس مکان‌نما باید عادی شود و فقط دکمه
   دست نشان بدهد. */
.kj-org-banner { cursor: default; }
.kj-org-banner .kj-btn { cursor: pointer; }

/* --- ۵) عنوان بخش بدون نوار ---
   نوار قرمز از قالب برداشته شد؛ gap فلکس بدون فرزندِ اول، فاصله‌ی
   اضافه نمی‌سازد، ولی برای عنوان‌های بدون نوار صراحتاً صفر می‌شود. */
.kj-sec-title:not(:has(.kj-bar)) { gap: 0; }

@media (max-width: 768px) {
  /* بج روی موبایل وسط‌چین شود */
  .kj-org-banner .kj-org-badge {
    display: flex; justify-content: center;
    width: 100%; margin-inline: auto;
  }
}

/* ------------------------------------------------------------------
   متن روی بنرها انتخاب‌شدنی نباشد
   ------------------------------------------------------------------
   کشیدن انگشت روی بنر برای اسکرول یا رد کردن اسلاید، متن را هایلایت
   می‌کرد و گاهی منوی «کپی» را بالا می‌آورد. متن این بنرها خواندنی است
   نه کپی‌کردنی، پس انتخاب روی همه‌شان خاموش می‌شود.

   دکمه‌ها و لینک‌ها دست‌نخورده کار می‌کنند — user-select فقط انتخابِ
   متن را می‌گیرد، نه کلیک را.
   ------------------------------------------------------------------ */
.kj-home .kj-hero,
.kj-home .kj-hslider,
.kj-home .kj-org-banner,
.kj-home .kj-duo-banner {
  -webkit-user-select: none;
  user-select: none;
}

/* تصویرِ اسلایدها هم با کشیدن، «درگ» نشود */
.kj-hslide img { -webkit-user-drag: none; user-drag: none; }

/* ==================================================================
   نوار خدمات صفحه اصلی = نوار خدمات صفحه محصول (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   تا حالا این نوار چهار کارتِ جدا با کادر مستقل، چپ‌چین و آیکون در
   مربع صورتی بود، در حالی که نوار اعتماد صفحه‌ی محصول (.kjp-trust)
   یک باکس یکپارچه با جداکننده‌ی عمودی، وسط‌چین و آیکون در دایره است.
   دو نوارِ هم‌کار روی دو صفحه، دو شکل مختلف داشتند.

   مقادیر مو‌به‌مو از .kjp-trust برداشته شده تا واقعاً یکی شوند:
       ظرف   → یک کارت سفید، حاشیه ۱px، گردی ۲۰px، gap صفر
       آیتم  → بدون کادر، ستونی، وسط‌چین، padding 16/10، gap 7
       خط    → ::before با ارتفاع ۷۰٪ و فاصله ۱۵٪ از بالا
       آیکون → svg 20px داخل دایره‌ی ۴۴px با زمینه‌ی کرم
   ================================================================== */
.kj-home .kj-features-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--kj-feat-n, 4), 1fr) !important;
  gap: 0 !important;
  background: #fff !important;
  border: 1px solid var(--kj-line) !important;
  border-radius: var(--kj-radius, 20px) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.kj-home .kj-feature {
  position: relative;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 10px !important;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-start;
  text-align: center !important;
  gap: 7px !important;
  min-width: 0;                 /* تا متن بلند ستون را پهن نکند */
}

/* جداکننده‌ی عمودی — همان ۷۰٪ ارتفاعِ صفحه‌ی محصول.
   قواعد قبلی border-inline-start و border-top را خنثی می‌کنیم چون
   در باکس یکپارچه، خط کامل تا لبه می‌رسید. */
.kj-home .kj-feature + .kj-feature {
  border-inline-start: 0 !important;
}
.kj-home .kj-feature:nth-child(2n),
.kj-home .kj-feature:nth-child(n+3) {
  border-top: 0 !important;
}
.kj-home .kj-feature + .kj-feature::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--kj-line);
}

/* باکس یکپارچه است، پس بالا آمدن تک‌کارت معنا ندارد */
.kj-home .kj-feature:hover {
  transform: none !important;
  box-shadow: none !important;
  background: none !important;
}

.kj-home .kj-feature-icon {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  margin-bottom: 0 !important;
  background: var(--kj-bg) !important;
  border: 1px solid var(--kj-line) !important;
  color: var(--kj-ink) !important;
  flex: none;
}
.kj-home .kj-feature-icon svg { width: 20px !important; height: 20px !important; }
.kj-home .kj-feature-icon img { width: 22px !important; height: 22px !important; }

.kj-home .kj-feature b {
  font-size: 11.5px !important; font-weight: 600 !important;
  color: var(--kj-ink) !important; line-height: 1.7 !important;
}
/* «b + span» عمداً به‌جای «span» — چون خودِ .kj-feature-icon هم یک
   span است و سلکتور عام، آیکون را هم می‌گرفت. */
.kj-home .kj-feature b + span {
  font-size: 11px !important; color: var(--kj-muted) !important;
  line-height: 1.7 !important;
}

@media (max-width: 767px) {
  /* چهار ستون می‌ماند، فقط ریزتر — دقیقاً مثل نوار صفحه محصول */
  .kj-home .kj-features-grid { grid-template-columns: repeat(var(--kj-feat-n, 4), 1fr) !important; gap: 0 !important; }
  .kj-home .kj-feature { padding: 12px 4px !important; gap: 5px !important; }
  .kj-home .kj-feature-icon { width: 31px !important; height: 31px !important; }
  .kj-home .kj-feature-icon svg { width: 15px !important; height: 15px !important; }
  .kj-home .kj-feature-icon img { width: 16px !important; height: 16px !important; }
  .kj-home .kj-feature b { font-size: 9.5px !important; line-height: 1.5 !important; }
  /* زیرعنوان روی ستونِ ~۸۵ پیکسلی خوانا نیست و نوار صفحه‌ی محصول هم
     تک‌خطی است، پس اینجا کنار می‌رود. روی دسکتاپ سر جایش می‌ماند.
     سلکتور حتماً «b + span» باشد: .kj-feature-icon خودش span است و
     با سلکتور عام، آیکون هم display:none می‌گرفت (اندازه‌گیری شد:
     آیکون ۰×۰ و کل نوار ۴۰px ارتفاع). */
  .kj-home .kj-feature b + span { display: none !important; }
}