/* ============================================================
   کادومون — قالب سراسری ریدیزاین (هدر + فوتر + کامپوننت‌های مشترک)
   بر اساس پروتوتایپ: پالت مرجانی، فونت وزیرمتن، مدرن و شاد
   ============================================================ */

:root {
  --kj-primary: #F0426E;
  --kj-primary-dark: #D42A57;
  --kj-primary-soft: #FFE9F0;
  /* رنگ برند وقتی «متن» است: #F0426E روی سفید فقط ۳٫۶۸ کنتراست دارد.
     برای پس‌زمینه و حاشیه همان رنگ روشن برند می‌ماند (هویت برند حفظ شود)
     ولی هر جا متن باشد از این استفاده می‌شود — ۴٫۹۲. */
  --kj-primary-text: var(--kj-primary-dark);
  --kj-accent: #FFAF2E;
  --kj-accent-soft: #FFF4DE;
  /* سبز-آبی تیره شد: سفید روی رنگ قبلی (#1FB9A5) کنتراست ۲٫۴۶ داشت
     که خیلی پایین‌تر از حداقل ۴٫۵ بود. مقدار جدید ۴٫۹۰ می‌دهد. */
  --kj-teal: #0F7F70;
  --kj-ink: #2A2038;
  /* متن کم‌رنگ کمی تیره‌تر شد: روی پس‌زمینه کرم سایت ۴٫۴۲ بود (مرزی) → ۵٫۵۲ */
  --kj-muted: #6B6279;
  --kj-line: #F0E7EA;
  /* حاشیه فیلدهای فرم باید ۳:۱ کنتراست داشته باشد (‎--kj-line‎ فقط ۱٫۲۱ است
     و برای جداکننده‌های تزئینی می‌ماند) */
  --kj-field-line: #968892;
  --kj-bg: #FFF9F6;
  --kj-radius: 20px;
  --kj-shadow: 0 6px 24px rgba(42, 32, 56, .08);
  --kj-shadow-hover: 0 14px 36px rgba(42, 32, 56, .14);
  /* گرادیان دکمه‌ها تیره‌تر شد: انتهای نارنجی قبلی (#FF7A59) با متن سفید
     فقط ۲٫۵۷ کنتراست داشت. حالا هر دو سر ۴٫۷۵ و ۴٫۹۲ هستند. */
  --kj-grad-end: #C64A2F;
  --kj-grad: linear-gradient(135deg, var(--kj-primary-dark), var(--kj-grad-end));
  /* رنگ‌های زیر از پنل مدیریت (طراحی ← رنگ‌های سایت) قابل تغییرند */
  --kj-topbar-bg: #2A2038;
  --kj-header-bg: #FFFFFF;
  --kj-footer-bg: #241B31;
  --kj-footer-text: #B5ADC4;
  --kj-duo-1: #F2F3F5;
  --kj-duo-2: #E4E6EA;
  --kj-org-1: #F0426E;
  --kj-org-2: #D42A57;
}

body { font-family: "Vazirmatn", web_Yekan, Tahoma, sans-serif !important; background: var(--kj-bg); color: var(--kj-ink); }

/* چیدمان صفحه: فوتر همیشه پایین + خنثی‌سازی float قدیمی #content */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page > * { flex-shrink: 0; }
.kj-footer { margin-top: auto !important; }
.kjc #content, .kjs #content, .kja #content, .kjk #content, .kjq #content,
.kj-home #content, .kjp #content.seller-detail { float: none !important; width: 100% !important; }
.kjc::after, .kjk::after, .kja::after, .kjq::after {
  content: ""; display: block; clear: both;
}
.kj-header *, .kj-footer *, .kj-drawer *, .kj-modal-wrap * { box-sizing: border-box; font-family: inherit; }
.kj-container { max-width: 1240px; margin-inline: auto; padding-inline: 20px; }

/* ---------- دکمه‌های مشترک ---------- */
.kj-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 14px;
  border: 0; cursor: pointer; transition: transform .2s, box-shadow .2s; line-height: 1.7;
  text-decoration: none !important;
}
.kj-btn:hover { transform: translateY(-2px); }
.kj-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.kj-btn-primary { background: var(--kj-grad); color: #fff !important; box-shadow: 0 8px 20px rgba(240, 66, 110, .35); }
.kj-btn-primary:hover { color: #fff !important; box-shadow: 0 12px 26px rgba(240, 66, 110, .45); }
.kj-btn-ghost { background: #fff; color: var(--kj-primary-text) !important; border: 2px solid var(--kj-primary-soft); }
.kj-btn-ghost:hover { border-color: var(--kj-primary); }
.kj-btn-dark { background: var(--kj-ink); color: #fff !important; }
.kj-btn-wa { background: #1eb954; color: #fff !important; box-shadow: 0 8px 20px rgba(30,185,84,.3); }
.kj-btn-wa:hover { color: #fff !important; }

/* ============================================================
   هدر
   ============================================================ */
.kj-topbar { background: var(--kj-topbar-bg); color: #fff; font-size: 12.5px; }
.kj-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; }
.kj-topbar .kj-hl { color: var(--kj-accent); font-weight: 700; }
.kj-topbar-links { display: flex; gap: 18px; }
.kj-topbar-links a { color: #fff !important; opacity: .85; text-decoration: none !important; }
.kj-topbar-links a:hover { opacity: 1; }

.kj-header {
  background: var(--kj-header-bg); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 990; border-bottom: 1px solid var(--kj-line);
}
.kj-header-main { display: flex; align-items: center; gap: 20px; padding-block: 13px; }
.kj-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none !important; }
.kj-logo-img {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 5px 14px rgba(214, 1, 9, .28);
}
.kj-logo-text b { font-size: 21px; font-weight: 800; display: block; line-height: 1.3; color: var(--kj-ink); }
.kj-logo-text span { font-size: 10.5px; color: var(--kj-muted); display: block; }

.kj-search { flex: 1; max-width: 560px; position: relative; }
.kj-search input {
  width: 100%; padding: 12px 46px 12px 20px; border: 2px solid var(--kj-line);
  border-radius: 999px; background: var(--kj-bg); font-size: 13.5px; outline: none;
  transition: border-color .2s; font-family: inherit; height: auto; line-height: 1.7;
}
/* حالت فوکوس حذف شد — .kj-search input:focus */
.kj-search button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; background: var(--kj-grad);
  border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.kj-search button svg { width: 17px; height: 17px; stroke: #fff; }

/* جستجوی زنده */
.kj-search-result {
  display: none; position: absolute; top: calc(100% + 8px); inset-inline: 0;
  background: #fff; border: 1px solid var(--kj-line); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(42, 32, 56, .22); z-index: 1050;
  max-height: 420px; overflow-y: auto; padding: 8px;
}
.kj-search-result.kj-sr-show { display: block; }
.kj-sr-title {
  font-size: 11px; font-weight: 800; color: var(--kj-muted);
  padding: 8px 12px 4px; letter-spacing: .3px;
}
.kj-sr-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px;
  border-radius: 12px; font-size: 13px; font-weight: 600;
  color: var(--kj-ink) !important; text-decoration: none !important; transition: background .15s;
}
.kj-sr-item:hover { background: var(--kj-primary-soft); color: var(--kj-primary-text) !important; }
.kj-sr-item img {
  width: 42px; height: 42px; border-radius: 10px; object-fit: cover;
  flex-shrink: 0; border: 1px solid var(--kj-line); background: #FAF6F3;
}
.kj-sr-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-sr-cat { font-size: 12.5px; color: var(--kj-muted) !important; }
.kj-sr-all {
  display: block; text-align: center; padding: 10px; margin-top: 4px;
  border-top: 1px dashed var(--kj-line); font-size: 12.5px; font-weight: 800;
  color: var(--kj-primary-text) !important; text-decoration: none !important;
}
.kj-sr-none { text-align: center; padding: 18px; font-size: 13px; color: var(--kj-muted); }

.kj-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.kj-action {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border-radius: 999px; border: 2px solid var(--kj-line); font-weight: 600;
  font-size: 12.5px; color: var(--kj-ink) !important; transition: all .2s;
  position: relative; text-decoration: none !important; background: #fff; cursor: pointer;
}
.kj-action:hover { border-color: var(--kj-primary); color: var(--kj-primary-text) !important; }
.kj-action svg { width: 19px; height: 19px; }
.kj-action-icon { padding: 10px; }
@media (max-width: 991px) { .kj-action-deskonly { display: none; } }
.kj-cart-badge {
  position: absolute; top: -7px; left: -7px; min-width: 19px; height: 19px;
  padding-inline: 5px; border-radius: 999px; background: var(--kj-accent);
  color: var(--kj-ink); font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.kj-cart-badge-empty { display: none; }

/* ---------- مینی‌سبد (هاور روی آیکون سبد) ---------- */
.kj-cart { position: relative; display: inline-block; }
.kj-cart .kj-cart-btn { cursor: pointer; }
.kj-minicart {
  position: absolute; top: calc(100% + 10px); left: 0; width: 330px;
  background: #fff; border: 1px solid var(--kj-line); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(42, 32, 56, .22); z-index: 1060; padding: 14px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .22s ease;
}
.kj-cart:hover .kj-minicart, .kj-minicart:hover {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.kj-minicart::before {
  content: ""; position: absolute; top: -10px; inset-inline: 0; height: 12px;
}
.kj-minicart-items { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.kj-minicart-item {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 12px; transition: background .15s; position: relative;
}
.kj-minicart-item:hover { background: var(--kj-bg); }
.kj-minicart-img {
  width: 52px; height: 52px; border-radius: 11px; overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--kj-line); display: block; background: #FAF6F3;
}
.kj-minicart-img img { width: 100%; height: 100%; object-fit: cover; }
.kj-minicart-info { flex: 1; min-width: 0; }
/* نام تا دو خط ادامه پیدا می‌کند. قبلاً یک خط بود با سه‌نقطه و
   نام‌های بلند نصفه دیده می‌شدند. */
.kj-minicart-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 12px; font-weight: 600; color: var(--kj-ink) !important;
  line-height: 1.7; overflow: hidden;
  text-decoration: none !important;
}
.kj-minicart-name:hover { color: var(--kj-primary-text) !important; }
.kj-minicart-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.kj-minicart-meta b { font-size: 12px; color: var(--kj-primary-text); font-weight: 800; white-space: nowrap; }
.kj-minicart-qty { font-size: 11px; color: var(--kj-muted); }
/* رنگ قبلی ‎#C7BCC9‎ روی سفید کنتراست ۱٫۸۳ داشت (حداقل لازم ۴٫۵) و
   عملاً دیده نمی‌شد. رنگ خاموشِ خودِ سایت ۵٫۷۶ می‌دهد.
   اندازه هم ۲۲×۲۰ بود؛ حداقل استاندارد ناحیه‌ی کلیک ۲۴×۲۴ است. */
.kj-minicart-del {
  border: 0; background: none; cursor: pointer; color: var(--kj-muted, #6B6279);
  min-width: 28px; min-height: 28px; padding: 0; border-radius: 8px;
  flex-shrink: 0; transition: all .15s; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.kj-minicart-del svg { width: 14px; height: 14px; }
.kj-minicart-del:hover, .kj-minicart-del:focus-visible { color: #B01D1D; background: #FDE3E3; }
.kj-minicart-del[disabled] { opacity: .45; cursor: default; }

/* گزینه‌های محصول زیر نام */
.kj-minicart-opts {
  display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px;
}
.kj-minicart-opts span {
  font-size: 10.5px; line-height: 1.6; color: var(--kj-muted, #6B6279);
  background: var(--kj-bg, #FAF6F3); border-radius: 6px; padding: 1px 6px;
}

/* ---------- نشانه‌ی ادامه‌ی فهرست ----------
   کلاس kj-mc-more را جاوااسکریپت وقتی می‌گذارد که واقعاً چیزی برای
   پایین رفتن مانده باشد؛ CSS خودش نمی‌تواند این را بفهمد. */
.kj-minicart-scroll { position: relative; }
.kj-minicart-scroll::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 30px;
  background: linear-gradient(to top, #fff 12%, rgba(255, 255, 255, 0));
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
.kj-minicart-scroll.kj-mc-more::after { opacity: 1; }

/* ---------- پیام موقت حذف با «بازگرداندن» ----------
   بیرون از ناحیه‌ی #cart زندگی می‌کند تا بازتازه‌سازی مینی‌سبد
   نابودش نکند. */
.kj-mc-toast {
  position: fixed; z-index: 2000; inset-inline: 0; bottom: 22px;
  margin-inline: auto; width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 14px;
  background: #2A2038; color: #fff; border-radius: 14px;
  padding: 11px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 18px 40px rgba(42, 32, 56, .32);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.kj-mc-toast.kj-mc-on { opacity: 1; visibility: visible; transform: translateY(0); }
.kj-mc-undo {
  border: 0; background: none; cursor: pointer; padding: 4px 6px;
  color: #FFC9CD; font-weight: 800; font-size: 13px; font-family: inherit;
  border-radius: 8px; min-height: 28px;
}
.kj-mc-undo:hover, .kj-mc-undo:focus-visible { background: rgba(255, 255, 255, .14); }
@media (max-width: 767px) {
  .kj-mc-toast { bottom: 84px; }   /* بالای نوار چسبان موبایل */
}
.kj-minicart-totals { border-top: 1px dashed var(--kj-line); margin-top: 10px; padding-top: 8px; }
.kj-minicart-trow {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--kj-muted); padding-block: 3px;
}
.kj-minicart-trow b { color: var(--kj-ink); font-weight: 700; }
.kj-minicart-trow:last-child { font-size: 13px; }
.kj-minicart-trow:last-child b { color: var(--kj-primary-text); font-weight: 800; }
.kj-minicart-actions { display: flex; gap: 8px; margin-top: 12px; }
.kj-minicart-btn { flex: 1; padding: 9px 10px !important; font-size: 12px !important; }
.kj-minicart-empty {
  text-align: center; padding: 22px 10px; font-size: 12.5px; color: var(--kj-muted);
}
.kj-minicart-empty span { display: block; font-size: 30px; margin-bottom: 6px; }
/* سازگاری با بارگذاری مجدد ای‌جکسی (#cart تو در تو) */
#cart #cart.kj-cart { position: static; display: block; }
@media (max-width: 991px) {
  .kj-minicart { display: none !important; }
}

/* ناوبری */
.kj-nav { border-top: 1px solid var(--kj-line); background: #fff; }
.kj-nav-inner { display: flex; align-items: center; gap: 2px; }
.kj-nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 15px;
  font-size: 13.5px; font-weight: 600; color: var(--kj-ink) !important;
  text-decoration: none !important; transition: color .2s;
}
.kj-nav-link:hover { color: var(--kj-primary-text) !important; }
.kj-nav-link.kj-hot { color: var(--kj-primary-text) !important; }
.kj-nav-link svg { width: 14px; height: 14px; }

.kj-has-mega { position: static; }
.kj-mega {
  position: absolute; inset-inline: 0; top: 100%; background: #fff;
  border-radius: 0 0 22px 22px; box-shadow: 0 30px 60px rgba(42, 32, 56, .18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .25s ease; z-index: 989;
}
/* بدون جاوااسکریپت همان رفتار قبلی می‌ماند (باز شدن با هاور). */
.kj-has-mega:hover .kj-mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==================================================================
   باز و بسته شدن با تأخیر — شهریور ۱۴۰۵

   منو با ‎:hover‎ خالص کار می‌کرد: اندازه‌گیری نشان داد در ۱۶ms باز
   می‌شود و با یک پیکسل بیرون رفتن موس فوراً می‌بندد. چون دو دکمه‌ی
   منو فقط ۲px از هم فاصله دارند، رد شدن ساده‌ی موس از هدر یک پنل
   تمام‌عرض را باز و بسته می‌کرد.

   وقتی JS فعال باشد کلاس kj-mega-js روی body می‌نشیند، این قاعده
   خنثی می‌شود و کنترل به kj-open می‌رسد که با تأخیر گذاشته و
   برداشته می‌شود.
   ================================================================== */
body.kj-mega-js .kj-has-mega:hover .kj-mega {
  opacity: 0; visibility: hidden; transform: translateY(8px);
}
body.kj-mega-js .kj-has-mega.kj-open .kj-mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* ---------- اتصال دیداری پنل به دکمه‌اش ----------
   پنل تمام‌عرض است ولی دکمه گوشه‌ی راست؛ هیچ نشانه‌ای آن دو را به هم
   وصل نمی‌کرد. این مثلث کوچک زیر خودِ دکمه می‌نشیند.
   .kj-nav-link را relative می‌کنیم — پنل خواهرِ آن است نه فرزندش،
   پس جایگذاری تمام‌عرضِ پنل دست‌نخورده می‌ماند. */
.kj-has-mega .kj-nav-link { position: relative; }
.kj-has-mega .kj-nav-link::after {
  content: ""; position: absolute; bottom: -1px; inset-inline-start: 50%;
  width: 0; height: 0; margin-inline-start: -8px;
  border-inline: 8px solid transparent;
  border-bottom: 8px solid #fff;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.kj-has-mega:hover .kj-nav-link::after { opacity: 1; }
body.kj-mega-js .kj-has-mega:hover .kj-nav-link::after { opacity: 0; }
body.kj-mega-js .kj-has-mega.kj-open .kj-nav-link::after { opacity: 1; }
/* align-items: start تا ستون کوتاه‌تر کشیده نشود و کف منو فضای
   مرده نسازد (پیش از این ۶۰px زیر آخرین لینک خالی می‌ماند). */
.kj-mega-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 26px; padding: 26px 36px 30px; align-items: start;
}
.kj-mega-h {
  font-size: 13.5px; font-weight: 800; margin: 0 0 10px; color: var(--kj-primary-text);
  display: flex; align-items: center; gap: 8px;
}
.kj-mega-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--kj-accent); display: inline-block; flex: none; }
/* عنوان ستون خودش لینک دسته‌ی مادر است و باید هم‌رنگ سرتیتر بماند */
.kj-mega-h a {
  color: inherit !important; font: inherit; text-decoration: none !important; padding: 0;
}
.kj-mega-h a:hover { text-decoration: underline !important; padding-inline-start: 0; }
.kj-mega-links a {
  display: block; padding: 5px 0; font-size: 13px; color: var(--kj-muted) !important;
  text-decoration: none !important; transition: all .2s;
}
/* قبلاً هاور با padding متن را ۵px هل می‌داد؛ در فهرست بلند این
   تکان پیاپی آزاردهنده بود و گاهی موس از روی لینک می‌افتاد.
   حالا جای عنصر ثابت است و فقط رنگ و پس‌زمینه عوض می‌شود. */
.kj-mega-links a {
  padding-inline: 8px; border-radius: 8px; margin-inline: -8px;
}
.kj-mega-links a:hover,
.kj-mega-links a:focus-visible {
  color: var(--kj-primary-text) !important;
  background: var(--kj-bg, #FAF6F3);
}


/* ستون‌هایی که زیردسته‌ی زیاد دارند (مثل مناسبت‌ها) دو واحد عرض می‌گیرند
   و لینک‌هایشان در دو ستون می‌چیند تا منو بلند و کشیده نشود */
/* ستون‌های چندتایی: شبکه‌ی صریح به‌جای CSS columns.
   grid-auto-flow: column با تعداد ردیفِ مشخص (که قالب می‌دهد) یعنی
   آیتم‌ها ستون‌به‌ستون و دقیقاً ۵ تایی پر می‌شوند؛ نه پخش‌شدنِ
   خودکاری که ترتیبش قابل حدس نبود. */
.kj-mega-links { display: grid; grid-auto-flow: column; column-gap: 18px; }
.kj-mega-col-wide .kj-mega-links { column-gap: 26px; }

/* روی دسکتاپ‌های باریک‌تر، فاصله‌ها کم می‌شود تا متن لینک‌ها جا شود.
   با مقادیر قبلی در عرض ۱۰۲۴ دو لینک به خط دوم می‌رفتند و ارتفاع
   ستون‌ها ۳۸px با هم فرق می‌کرد. */
@media (max-width: 1200px) {
  .kj-mega-grid { gap: 16px; padding-inline: 24px; }
  .kj-mega-links { column-gap: 12px; }
  .kj-mega-col-wide .kj-mega-links { column-gap: 16px; }
}

/* منوی موبایل */
.kj-menu-toggle {
  display: none; width: 42px; height: 42px; border-radius: 12px;
  border: 2px solid var(--kj-line); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.kj-menu-toggle svg { width: 21px; height: 21px; }
.kj-drawer {
  position: fixed; inset-block: 0; right: 0; width: min(310px, 85vw);
  background: #fff; z-index: 1200; padding: 22px; overflow-y: auto;
  transform: translateX(100%); transition: transform .3s ease;
}
.kj-drawer.kj-open { transform: translateX(0); }
.kj-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.kj-drawer-head b { font-size: 16px; }
.kj-drawer-close { width: 36px; height: 36px; border-radius: 50%; background: var(--kj-primary-soft); border: 0; cursor: pointer; font-size: 15px; }
.kj-drawer nav a {
  display: block; padding: 11px 13px; border-radius: 12px; font-weight: 600;
  font-size: 14px; color: var(--kj-ink) !important; text-decoration: none !important; margin-bottom: 3px;
}
.kj-drawer nav a:hover { background: var(--kj-primary-soft); color: var(--kj-primary-text) !important; }
.kj-drawer .kj-dr-h { margin: 12px 8px 5px; font-size: 11.5px; color: var(--kj-muted); font-weight: 700; }
.kj-drawer .kj-sub { padding-inline-start: 18px; font-size: 13px; color: var(--kj-muted) !important; font-weight: 500; }
.kj-overlay {
  position: fixed; inset: 0; background: rgba(42, 32, 56, .55); z-index: 1100;
  opacity: 0; visibility: hidden; transition: opacity .3s;
}
.kj-overlay.kj-show { opacity: 1; visibility: visible; }

/* ============================================================
   مودال مشاوره
   ============================================================ */
.kj-modal-wrap {
  position: fixed; inset: 0; z-index: 1300; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.kj-modal-wrap.kj-show { display: flex; }
.kj-modal-back { position: absolute; inset: 0; background: rgba(42, 32, 56, .6); backdrop-filter: blur(3px); }
.kj-modal {
  position: relative; background: #fff; border-radius: 24px; width: min(520px, 94vw);
  max-height: 92vh; overflow-y: auto; padding: 30px 28px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .35); animation: kjPop .3s ease;
}
@keyframes kjPop { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.kj-modal .kj-modal-title { font-size: 19px; font-weight: 800; margin: 0 0 6px; color: var(--kj-ink); }
.kj-modal p.kj-modal-sub { font-size: 13px; color: var(--kj-muted); margin: 0 0 18px; line-height: 1.9; }
.kj-modal-close {
  position: absolute; top: 16px; left: 16px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--kj-primary-soft); border: 0; cursor: pointer;
  font-size: 14px; color: var(--kj-primary-text);
}
.kj-form { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
/* حاشیه از ۲px به ۱px آمد تا با فیلدهای صفحه‌ی تسویه یکی شود
   (معیار: kdm-onepage.css). بقیه‌ی مقادیر از قبل مطابق بودند. */
.kj-form input, .kj-form select {
  width: 100%; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--kj-line);
  background: var(--kj-bg); font-size: 13px; color: var(--kj-ink); font-family: inherit;
  outline: none; height: auto; line-height: 1.7; transition: border-color .2s;
}
/* حالت فوکوس حذف شد — .kj-form input:focus */
.kj-form .kj-full { grid-column: 1 / -1; }
.kj-form .kj-btn { width: 100%; }
.kj-form-note { grid-column: 1 / -1; font-size: 11px; color: var(--kj-muted); margin: 0; text-align: center; }

/* ============================================================
   فوتر
   ============================================================ */
.kj-footer { background: var(--kj-footer-bg); color: #fff; margin-top: 60px; font-size: 13px; }
.kj-footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; padding-block: 44px; }
/* عنوان ستون‌های فوتر زردِ --kj-accent بود؛ زرد در بقیه‌ی صفحه فقط
   روی بج تخفیف و تیک‌های بنر سازمانی به‌کار می‌رود و اینجا با پالت
   صفحه‌ی اصلی نمی‌خواند. سفید خالص هم با متن لینک‌ها یکی می‌شد، پس
   سفیدِ کامل برای عنوان و لینک‌ها همان خاکستری روشنِ فعلی می‌ماند —
   تفاوت با وزن و روشنایی ساخته می‌شود نه با رنگِ متضاد. */
.kj-footer h4 { font-size: 14.5px; font-weight: 800; margin: 0 0 14px; color: #FFFFFF; }
.kj-footer p, .kj-footer li, .kj-footer a { font-size: 12.5px; color: var(--kj-footer-text); }
.kj-footer ul { list-style: none; margin: 0; padding: 0; }
.kj-footer li { margin-bottom: 8px; }
.kj-footer a { text-decoration: none !important; }
.kj-footer a:hover { color: #fff; }
.kj-footer-brand p { margin-top: 12px; line-height: 2; }
.kj-footer-contact li { display: flex; gap: 9px; align-items: flex-start; }
.kj-footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--kj-primary-text); }
.kj-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08); padding-block: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 12px; color: #8F86A0;
}
.kj-socials { display: flex; gap: 9px; }
.kj-socials a {
  width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .07);
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.kj-socials a:hover { background: var(--kj-primary); }
.kj-socials svg { width: 16px; height: 16px; color: #fff; }

/* دکمه شناور واتساپ */
.kj-wa-float {
  position: fixed; bottom: 22px; left: 22px; z-index: 900;
  width: 54px; height: 54px; border-radius: 50%; background: #1eb954;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(30, 185, 84, .45); transition: transform .2s;
}
.kj-wa-float:hover { transform: scale(1.08); }
.kj-wa-float svg { width: 27px; height: 27px; color: #fff; }

/* ---------- کارت محصول مشترک ---------- */
.kj-pcard {
  background: #fff; border-radius: var(--kj-radius); overflow: hidden;
  border: 1px solid var(--kj-line); display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s; position: relative;
}
.kj-pcard:hover { transform: translateY(-6px); box-shadow: var(--kj-shadow-hover); }
.kj-pimg { display: block; aspect-ratio: 1; overflow: hidden; background: #FAF6F3; }
.kj-pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kj-pcard:hover .kj-pimg img { transform: scale(1.05); }
.kj-pbody { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* نام محصول در یک خط می‌ماند و ادامه‌اش با «…» می‌آید.
   قبلاً دو خط بود و min-height جای هر دو خط را رزرو می‌کرد؛ چون
   عملاً همه‌ی نام‌ها یک‌خطی‌اند، زیر هر نام یک فاصله‌ی خالی
   می‌ماند و قیمت دور می‌افتاد.
   با یک خط، هم آن فاصله می‌رود و هم ارتفاع کارت‌ها بدون رزرو
   کردن جا، خودبه‌خود یکسان می‌ماند. */
.kj-pname {
  font-size: 13px; font-weight: 600; line-height: 1.8; margin: 0; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.kj-pname a { color: var(--kj-ink) !important; text-decoration: none !important; }
.kj-pname a:hover { color: var(--kj-primary-text) !important; }
.kj-pfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kj-price { font-size: 14.5px; font-weight: 800; color: var(--kj-ink); }
.kj-price small { font-size: 10px; font-weight: 500; color: var(--kj-muted); margin-right: 3px; }
.kj-badge-new {
  position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--kj-teal);
  color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 999px;
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 991px) {
  .kj-nav, .kj-topbar-links { display: none; }
  .kj-menu-toggle { display: flex; }
  .kj-search { order: 3; max-width: none; flex-basis: 100%; }
  .kj-header-main { flex-wrap: wrap; gap: 10px; }
  .kj-action .kj-lbl { display: none; }
  .kj-action { padding: 9px 11px; }
  .kj-footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kj-footer-main { grid-template-columns: 1fr; gap: 24px; }
  .kj-form { grid-template-columns: 1fr; }
  .kj-footer-bottom { flex-direction: column; }
}

/* نماد اعتماد در فوتر */
.kj-trust { display: flex; align-items: center; }
.kj-trust img { border-radius: 10px; background: #fff; padding: 4px; }
@media (max-width: 640px) { .kj-footer-bottom { flex-wrap: wrap; gap: 14px; justify-content: center; text-align: center; } }

/* ============================================================
   منوی «انواع محصولات» — درخت دسته‌بندی داینامیک
   ============================================================ */
.kj-mega-cats { padding: 0 !important; }
.kj-cats-wrap {
  display: grid; grid-template-columns: 232px 1fr; gap: 0;
  min-height: 322px; align-items: stretch;
}

/* ستون دسته‌های اصلی */
.kj-cats-tabs {
  list-style: none; margin: 0; padding: 12px 0;
  background: #FAF6F3; border-inline-end: 1px solid var(--kj-line);
}
.kj-cats-tabs li { margin: 0; }
.kj-cats-tabs .kj-cat-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 20px; font-size: 13.5px; font-weight: 600; color: var(--kj-ink) !important;
  border-inline-start: 3px solid transparent; transition: background .16s, color .16s, border-color .16s;
}
.kj-cats-tabs .kj-cat-tab:hover,
.kj-cats-tabs .kj-cat-tab.kj-on {
  background: #fff; color: var(--kj-primary-text) !important;
  border-inline-start-color: var(--kj-primary);
}
.kj-cat-arrow { font-style: normal; font-size: 17px; line-height: 1; color: var(--kj-muted); opacity: 0; transition: opacity .16s; }
.kj-cats-tabs .kj-cat-tab.kj-on .kj-cat-arrow { opacity: 1; color: var(--kj-primary-text); }

/* پنل زیردسته‌ها */
.kj-cats-panels { position: relative; padding: 22px 26px; }
.kj-cats-panel { display: none; }
.kj-cats-panel.kj-on { display: block; animation: kjCatsIn .18s ease-out; }
@keyframes kjCatsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* زیرمجموعه‌ها در یک ستون جمع می‌شوند: خواندنشان از بالا به پایین
   ساده‌تر از دنبال کردن چهار ستون است، مخصوصاً وقتی هر دسته فقط
   چند مورد دارد (دکوراتیو ۶، بقیه ۲ تا ۴). */
/* عرض ستون محدود می‌شود: طولانی‌ترین عنوان ۱۳۸px است و ستونِ
   تمام‌عرض (۹۱۶px) ردیف‌هایی می‌ساخت شش برابر پهن‌تر از متنشان. */
.kj-cats-grid {
  display: grid; grid-template-columns: minmax(0, 260px);
  gap: 2px; justify-content: start;
}
.kj-cats-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* سلسله‌مراتب وزن متن در این منو:
       تب فعال            ۸۰۰
       تب عادی            ۶۰۰
       زیرمجموعه          ۵۰۰   ← این
       زیرمجموعه سطح دو   ۴۰۰
   پیش از این زیرمجموعه هم ۸۰۰ بود، یعنی هم‌وزنِ تبِ فعال؛ چشم
   نمی‌فهمید کدام عنوانِ بالادست است و کدام زیرمجموعه. */
.kj-cats-h {
  font-size: 13px; font-weight: 500; color: var(--kj-ink) !important;
  padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1px solid var(--kj-line);
}
.kj-cats-h:hover { color: var(--kj-primary-text) !important; }
.kj-cats-sub { font-size: 12.5px; color: var(--kj-muted) !important; padding: 3px 0; line-height: 1.9; }
/* مثل لینک‌های منوی اول، هاور متن را جابه‌جا نمی‌کند */
.kj-cats-sub:hover { color: var(--kj-primary-text) !important; transition: color .15s; }

.kj-cats-all {
  display: inline-block; margin-top: 18px; font-size: 12.5px; font-weight: 700;
  color: var(--kj-primary-text) !important;
}
.kj-cats-all:hover { text-decoration: underline !important; }
.kj-cats-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0; }
.kj-cats-empty p { font-size: 13px; color: var(--kj-muted); margin: 0; }

@media (max-width: 900px) { .kj-cats-wrap { grid-template-columns: 200px 1fr; } }

/* ===== آکاردئون دسته‌ها در منوی موبایل ===== */
.kj-drawer .kj-dr-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  padding: 11px 0; font-size: 14px; font-weight: 600; color: var(--kj-ink); text-align: start;
  border-bottom: 1px solid var(--kj-line);
}
.kj-drawer .kj-dr-acc i { font-style: normal; font-size: 17px; color: var(--kj-primary-text); line-height: 1; }
.kj-drawer .kj-dr-acc.kj-open { color: var(--kj-primary-text); }
.kj-drawer .kj-dr-panel { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.kj-drawer .kj-dr-panel .kj-sub { padding-inline-start: 12px; }

/* ============================================================
   باشگاه مشتریان — نوار امتیاز در صفحه محصول و سبد خرید
   ============================================================ */
.kdm-club {
  display: flex; align-items: flex-start; gap: 11px;
  background: linear-gradient(135deg, #FFF8E7, #FDF0D5);
  border: 1px solid #F0D9A0; border-radius: 14px;
  padding: 13px 15px; margin: 14px 0;
}
.kdm-club-ic {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  background: #F7C948; display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}
.kdm-club-txt { font-size: 13.5px; color: #6B4E12; line-height: 1.95; min-width: 0; }
.kdm-club-txt b { font-weight: 800; color: #92650B; font-size: 15px; }
.kdm-club-txt small { display: block; font-size: 11.5px; color: #96805A; margin-top: 3px; line-height: 1.85; }
.kdm-club-txt a { color: #92650B !important; font-weight: 700; text-decoration: underline !important; }
.kdm-club-txt a:hover { color: #6B4E12 !important; }

@media (max-width: 560px) {
  .kdm-club { padding: 11px 12px; gap: 9px; }
  .kdm-club-txt { font-size: 12.5px; }
  .kdm-club-txt b { font-size: 14px; }
}

/* ==================================================================
   کادومون — منوی کشویی موبایل (مرداد ۱۴۰۵)
   دسته‌هایی که زیردسته ندارند قبلاً با کلاس kj-sub رندر می‌شدند و
   کوچک و تورفته بودند، انگار خودشان زیردسته‌اند. حالا هم‌اندازه و
   هم‌ردیف بقیه سردسته‌ها هستند، فقط بدون دکمه باز/بسته.
   ================================================================== */
.kj-drawer a.kj-dr-solo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 11px 0 !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--kj-ink) !important;
  border-bottom: 1px solid var(--kj-line);
  border-radius: 0 !important; background: none !important;
}
.kj-drawer a.kj-dr-solo:hover { color: var(--kj-primary-text) !important; background: none !important; }
.kj-drawer a.kj-dr-solo::after {
  content: '‹'; font-size: 17px; color: var(--kj-line); line-height: 1;
}
.kj-drawer a.kj-dr-solo:hover::after { color: var(--kj-primary-text); }

/* سردسته‌ها کمی از هم جدا شوند تا سلسله‌مراتب واضح‌تر باشد */
.kj-drawer .kj-dr-acc span { flex: 1; min-width: 0; }
.kj-drawer .kj-dr-panel .kj-sub:first-child {
  font-weight: 700; color: var(--kj-ink) !important;
}
.kj-drawer .kj-dr-panel .kj-sub {
  position: relative; padding-inline-start: 20px !important;
}
.kj-drawer .kj-dr-panel .kj-sub::before {
  content: ''; position: absolute; inset-inline-start: 7px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: var(--kj-line);
}
.kj-drawer .kj-dr-panel .kj-sub:hover::before { background: var(--kj-primary); }

/* اگر کاربر «کاهش حرکت» را روشن کرده باشد، ترنزیشن اجرا نمی‌شود و
   آکاردئون باز نمی‌شد؛ در آن حالت بدون انیمیشن باز/بسته می‌شود. */
@media (prefers-reduced-motion: reduce) {
  .kj-drawer .kj-dr-panel { transition: none !important; }
}

/* ==================================================================
   ۱۲) هدر موبایل — سه دکمه کنار لوگو
   قبلاً دکمه‌ها یک ردیف جدا زیر لوگو می‌گرفتند و هدر ۱۸۲px بلند بود.
   دکمه «باشگاه مشتریان» از هدر برداشته شد (از منوی کشویی در دسترس است)
   و سه دکمه باقی‌مانده در همان ردیف لوگو جا می‌شوند.
   ================================================================== */
@media (max-width: 991px) {
  .kj-header-main { gap: 8px; padding-block: 10px; }

  .kj-menu-toggle { order: 1; width: 38px; height: 38px; flex: none; }
  .kj-logo        { order: 2; gap: 8px; min-width: 0; }
  .kj-actions     { order: 3; gap: 7px; margin-inline-start: auto; flex: none; }
  .kj-search      { order: 4; flex-basis: 100%; }

  .kj-logo-img { width: 38px; height: 38px; }
  .kj-logo-text b { font-size: 17px; line-height: 1.2; }
  .kj-logo-text span { display: none; }   /* زیرعنوان لوگو در موبایل جا نمی‌شود */

  .kj-actions .kj-action-icon { padding: 8px; border-width: 1px; }
  .kj-actions .kj-action-icon svg { width: 18px; height: 18px; }
  .kj-actions .kj-cart-badge { top: -6px; left: -6px; }
}

/* صفحه‌های خیلی باریک: عنوان لوگو هم کوچک‌تر */
@media (max-width: 360px) {
  .kj-logo-text b { font-size: 15px; }
  .kj-actions { gap: 5px; }
  .kj-actions .kj-action-icon { padding: 7px; }
}

/* ==================================================================
   دسترس‌پذیری و لمس — شهریور ۱۴۰۵
   ================================================================== */

/* --- ۱) حلقه فوکوس صفحه‌کلید ---
   قبلاً هیچ قاعده :focus-visible نبود و ۱۵ جا outline حذف شده بود؛
   کاربری که با Tab حرکت می‌کند هیچ نشانه‌ای نمی‌دید.
   :focus-visible فقط با صفحه‌کلید فعال می‌شود و با کلیک موس دیده نمی‌شود.

   input / select / textarea عمداً از این فهرست بیرون‌اند: طبق خواست
   کارفرما فیلدها هنگام فوکوس هیچ تغییر ظاهری نباید داشته باشند.
   لینک‌ها و دکمه‌ها همچنان حلقه‌ی صفحه‌کلید را دارند. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kj-primary-dark) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
/* روی پس‌زمینه‌های تیره (نوار بالا و فوتر) حلقه سفید بهتر دیده می‌شود */
.kj-topbar a:focus-visible,
.kj-footer a:focus-visible,
.kj-footer button:focus-visible {
  outline-color: #fff !important;
}

/* --- ۲) لینک «پرش به محتوا» برای کاربران صفحه‌کلید و صفحه‌خوان --- */
.kj-skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 2000;
  background: var(--kj-ink); color: #fff !important;
  padding: 11px 20px; border-radius: 0 0 12px 12px;
  font-size: 13px; font-weight: 700; text-decoration: none !important;
  transition: top .18s;
}
.kj-skip:focus { top: 0; }

/* --- ۳) حاشیه فیلدهای فرم با کنتراست کافی ---
   ‎--kj-line‎ روی سفید فقط ۱٫۲۱ است و مرز فیلد عملاً دیده نمی‌شد. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
input[type="date"], select, textarea {
  border-color: var(--kj-field-line);
}

/* --- ۴) اندازه ناحیه لمسی روی دستگاه‌های لمسی ---
   حداقل ۴۴×۴۴ پیکسل. فقط روی ورودی لمسی اعمال می‌شود تا ظاهر دسکتاپ
   با موس دست‌نخورده بماند. */
@media (pointer: coarse) {
  .kj-chip            { padding-block: 12px; }
  .kjc-filter-btn     { padding-block: 12px; }
  .kjc-clamp-btn      { padding-block: 12px; }
  .kj-scroll-arrow    { width: 44px; height: 44px; }
  .kjc-sort-mobile    { min-height: 44px; }
  .kj-pagination a,
  .kjc-main .pagination li a,
  .kjc-main .pagination li span { min-width: 44px; min-height: 44px; }
}

/* --- ۵) فیلدهای ورودی در موبایل ۱۶px ---
   iOS هر فیلدی با فونت کوچک‌تر از ۱۶px را هنگام تمرکز زوم می‌کند و
   کاربر بعدش باید دستی صفحه را برگرداند. */
@media (max-width: 991px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="date"], select, textarea {
    font-size: 16px !important;
  }
  /* دکمه‌های آیکونی هدر و همبرگر به ۴۴px می‌رسند */
  .kj-actions .kj-action-icon { padding: 12px; }
  .kj-menu-toggle { width: 44px; height: 44px; }
}

/* --- ۶) احترام به «کاهش حرکت» سیستم‌عامل ---
   پنج انیمیشن بی‌نهایت در سایت داریم (تصویر شناور، نوار لوگوها، تپش
   روزشمار) که برای بعضی کاربران آزاردهنده یا سرگیجه‌آور است. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .kj-clients-track, .kdm-clients-logos { animation: none !important; }
  .kj-btn:hover, .kj-chip:hover, .kj-pcard:hover { transform: none !important; }
}

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

/* --- ۲) آیکون جستجو: ساده و طوسی، بدون پس‌زمینه --- */
.kj-search button {
  background: none !important;
  width: 40px; height: 40px; border-radius: 0;
  color: var(--kj-muted);
  transition: color .18s;
}
.kj-search button:hover { color: var(--kj-ink); }
.kj-search button svg { width: 19px; height: 19px; stroke: currentColor !important; }
/* چون آیکون دیگر پس‌زمینه ندارد، فضای سمت راست ورودی کمی کم می‌شود */
.kj-search input { padding-inline-end: 44px; }

/* ==================================================================
   فیلدهای متنی: حاشیه خنثی، بدون رنگ برند
   حلقه فوکوس صفحه‌کلید (:focus-visible) سر جایش می‌ماند، فقط رنگ
   حاشیه‌ی خود کادر دیگر صورتی نمی‌شود.
   ================================================================== */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
input[type="date"], input[type="url"], select, textarea {
  border-color: var(--kj-field-line) !important;
}
/* حالت فوکوس حذف شد — input[type="date"]:focus, input[type="url"]:focus, select:focus, textarea:focus */
/* کادر جستجوی هدر هم همین‌طور */
.kj-search input { border-color: var(--kj-field-line) !important; }
/* حالت فوکوس حذف شد — .kj-search input:focus */

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

.kj-drawer {
  --dr-cream: #FBF7F1;          /* کرم/آف‌وایت */
  --dr-line:  #EBE3D8;
  --dr-teal:  #0F7F70;          /* «مشاهده‌ی همه» */

  width: min(420px, 86vw);      /* ۸۰–۸۵٪ عرض صفحه روی موبایل */
  background: var(--dr-cream);
  padding: 0;
  font-family: IRANSans, IRANSansX, "Vazirmatn", web_Yekan, Tahoma, sans-serif;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 28px rgba(42, 32, 56, .10);
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}

/* ---------- هدر: ضربدر راست، لوگو چپ ---------- */
.kj-drawer .kj-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0; padding: 14px 16px;
  border-bottom: 1px solid var(--dr-line);
  flex: none;
}
.kj-drawer .kj-drawer-close {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--dr-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--kj-ink); cursor: pointer; flex: none; padding: 0;
}
.kj-drawer .kj-drawer-close svg { width: 18px; height: 18px; }
.kj-drawer .kj-drawer-close:active { background: var(--dr-line); }

.kj-drawer .kj-drawer-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none !important; padding: 0 !important;
  background: none !important; margin: 0 !important;
}
.kj-drawer .kj-drawer-logo img { width: 32px; height: 32px; object-fit: contain; }
.kj-drawer .kj-drawer-logo span {
  font-size: 15px; font-weight: 800; color: var(--kj-ink) !important;
}

/* ---------- بدنه‌ی اسکرول‌شونده ---------- */
.kj-drawer .kj-dr-nav {
  flex: 1 1 auto; overflow-y: auto;
  padding: 8px 16px 28px;
  -webkit-overflow-scrolling: touch;
}

/* ---------- عنوان گروه ---------- */
.kj-drawer .kj-dr-h {
  margin: 16px 0 4px; padding: 0;
  font-size: 11.5px; font-weight: 800; letter-spacing: .2px;
  color: #A0937F; text-transform: none;
}

/* ---------- لینک‌های تک‌خطی ساده ---------- */
.kj-drawer a.kj-dr-solo {
  display: block; width: 100%;
  padding: 13px 0 !important; margin: 0 !important;
  font-size: 14.5px !important; font-weight: 600 !important;
  color: var(--kj-ink) !important;
  background: none !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--dr-line);
  text-decoration: none !important;
}
.kj-drawer a.kj-dr-solo::after { content: none !important; }
.kj-drawer a.kj-dr-solo:active { color: var(--kj-primary-text) !important; }
.kj-drawer a.kj-dr-hot { color: var(--kj-primary-text) !important; font-weight: 800 !important; }

/* جداکننده‌ی قبل از لینک‌های ساده‌ی انتهایی */
.kj-drawer .kj-dr-sep {
  height: 1px; background: var(--dr-line);
  margin: 18px 0 2px;
}

/* ---------- آکاردئون ---------- */
.kj-drawer .kj-dr-item { border-bottom: 1px solid var(--dr-line); }

.kj-drawer .kj-dr-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 13px 0; margin: 0;
  background: none; border: 0; border-bottom: 0;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--kj-ink); text-align: start; cursor: pointer;
  text-decoration: none !important;
}
.kj-drawer .kj-dr-acc span { flex: 1; min-width: 0; }
.kj-drawer .kj-dr-acc.kj-open { color: var(--kj-primary-text); }

/* شورون سمت چپ عنوان — بسته: رو به پایین، باز: رو به بالا */
.kj-drawer .kj-dr-chev {
  width: 18px; height: 18px; flex: none;
  color: #B9AB97; transition: transform .28s ease, color .2s;
}
.kj-drawer .kj-dr-acc.kj-open .kj-dr-chev {
  transform: rotate(180deg); color: var(--kj-primary-text);
}

/* دسته‌ی بدون زیرمجموعه — مثل سردسته ولی بدون شورون */
.kj-drawer a.kj-dr-plain {
  border-bottom: 1px solid var(--dr-line);
  color: var(--kj-ink) !important;
}
.kj-drawer a.kj-dr-plain::after { content: none !important; }

/* ---------- زیرمجموعه‌ها ---------- */
.kj-drawer .kj-dr-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
}
.kj-drawer .kj-dr-panel .kj-sub {
  display: block;
  padding: 10px 0 10px 0 !important;
  padding-inline-start: 18px !important;   /* تورفتگی بیشتر */
  font-size: 13.5px !important;
  font-weight: 400 !important;             /* سبک‌تر از سردسته */
  color: #6B6259 !important;
  background: none !important; border-radius: 0 !important;
  border-bottom: 0; margin: 0 !important;
  text-decoration: none !important;
}
.kj-drawer .kj-dr-panel .kj-sub::before { content: none !important; }
.kj-drawer .kj-dr-panel .kj-sub:active { color: var(--kj-primary-text) !important; }
.kj-drawer .kj-dr-panel .kj-sub:last-child { padding-bottom: 14px !important; }

/* «مشاهده‌ی همه» — رنگ متفاوت.
   انتخابگر عمداً دو کلاسه است: قاعده‌ی قدیمی
   «.kj-dr-panel .kj-sub:first-child { color: … !important }»
   ویژگی بالاتری داشت و رنگ را پس می‌گرفت. */
.kj-drawer .kj-dr-panel .kj-sub.kj-sub-all {
  color: var(--dr-teal) !important;
  font-weight: 700 !important;
}

/* ---------- پوشش تیره ---------- */
.kj-overlay { background: rgba(30, 22, 40, .5); backdrop-filter: blur(1.5px); }

/* ---------- لمس راحت‌تر روی صفحه‌های کوچک ---------- */
@media (pointer: coarse) {
  .kj-drawer .kj-dr-acc,
  .kj-drawer a.kj-dr-solo,
  .kj-drawer a.kj-dr-plain { min-height: 48px; }
  .kj-drawer .kj-dr-panel .kj-sub { min-height: 42px; display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .kj-drawer, .kj-drawer .kj-dr-panel, .kj-drawer .kj-dr-chev { transition: none !important; }
}

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

/* ---------- هدر: لوگو راست، ضربدر چپ ---------- */
.kj-drawer .kj-drawer-logo img {
  /* PNG لوگو مربعی است و گوشه‌هایش سفید؛ چون نشان دایره‌ای است
     با گرد کردن کامل، پس‌زمینه‌ی سفید دیده نمی‌شود. */
  border-radius: 50%;
  background: transparent !important;
}
.kj-drawer .kj-drawer-logo span {
  font-size: 13.5px; font-weight: 800; line-height: 1.4;
}

/* ---------- بدون خط بین آیتم‌ها، فقط فاصله ---------- */
.kj-drawer .kj-dr-item { border-bottom: 0; }
.kj-drawer .kj-dr-nav > .kj-dr-item + .kj-dr-item { margin-top: 2px; }

.kj-drawer .kj-dr-acc {
  border-bottom: 0;
  padding: 14px 0;
  border-radius: 10px;
}
.kj-drawer .kj-dr-acc.kj-open { background: rgba(255, 255, 255, .55); padding-inline: 10px; }

/* لینک‌های تک‌خطیِ بالای منو هم بدون خط، فقط فاصله */
.kj-drawer .kj-dr-nav > a.kj-dr-solo { border-bottom: 0; padding: 14px 0 !important; }

/* لینک‌های پایین منو (بعد از جداکننده) هم بدون خط */
.kj-drawer .kj-dr-sep ~ a.kj-dr-solo { border-bottom: 0; }

/* ---------- تنها جداکننده‌ی بدنه ---------- */
.kj-drawer .kj-dr-sep { margin: 14px 0 6px; }

/* ---------- سطح دوم: دسته‌های داخل «انواع محصولات» ---------- */
.kj-drawer .kj-dr-panel .kj-dr-item2 { margin: 0; }

.kj-drawer .kj-dr-acc2 {
  padding: 11px 0 !important;
  padding-inline-start: 18px !important;   /* هم‌تراز با بقیه‌ی زیرمجموعه‌ها */
  font-size: 13.5px !important;
  font-weight: 500 !important;             /* سبک‌تر از سردسته‌ی اصلی */
  color: #4C4540 !important;
  background: none !important;
  border-radius: 0 !important;
}
.kj-drawer .kj-dr-acc2.kj-open {
  color: var(--kj-primary-text) !important;
  background: none !important;
  padding-inline: 0 !important;
  padding-inline-start: 18px !important;
}
.kj-drawer .kj-dr-acc2 .kj-dr-chev { width: 15px; height: 15px; }

/* سطح سوم: زیرمجموعه‌ی دسته — تورفتگی بیشتر و فونت سبک‌تر */
.kj-drawer .kj-dr-panel2 .kj-sub {
  padding-inline-start: 34px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #7B736B !important;
}
.kj-drawer .kj-dr-panel2 .kj-sub.kj-sub-all {
  color: var(--dr-teal) !important; font-weight: 700 !important;
}

/* دسته‌های بدون زیرمجموعه داخل «انواع محصولات».
   :not لازم است — پنل سطح دوم خودش کلاس kj-dr-panel هم دارد و
   بدون آن، این قاعده روی زیرمجموعه‌های سطح سوم هم می‌افتاد. */
.kj-drawer .kj-dr-nav > .kj-dr-item > .kj-dr-panel > .kj-sub:not(.kj-sub-all) {
  font-weight: 500 !important;
  color: #4C4540 !important;
}
.kj-drawer .kj-dr-nav > .kj-dr-item > .kj-dr-panel > .kj-sub.kj-sub-all {
  font-weight: 700 !important;
}

/* دکمه‌ی منو: رنگ صریح.
   بدون این، سافاری iOS رنگ پیش‌فرض دکمه (آبی سیستمی) را روی
   currentColor آیکون می‌نشاند و همبرگر آبی دیده می‌شود. */
.kj-menu-toggle { color: #000 !important; -webkit-text-fill-color: #000; }
.kj-menu-toggle svg { color: #000; stroke: #000; }

/* ==================================================================
   هدر — یکسان‌سازی حاشیه‌ی آیکون‌ها و کادر جستجو (مرداد ۱۴۰۵)

   قبلاً هر کدام فرق داشتند:
     منو            ۴۴×۴۴، گردی ۱۲px، حاشیه ۲px
     سبد خرید       ۴۵×۴۱، گردی ۹۹۹px، حاشیه ۲px
     حساب کاربری    اندازه‌ی آزاد، حاشیه ۱px
     جستجو          حاشیه ۲px به رنگ خاکستری #968892

   حالا هر سه دایره‌ی ۴۴×۴۴ با حاشیه‌ی یکسان، و رنگ حاشیه‌ها
   از رنگ خودِ لوگو (#ED1B24) با شفافیت ۵۰٪ گرفته شده.
   ================================================================== */

:root {
  --kj-logo: #ED1B24;                      /* رنگ نشان کادومون */
  --kj-logo-50: rgba(237, 27, 36, .5);     /* همان با شفافیت ۵۰٪ */
}

.kj-header .kj-menu-toggle,
.kj-header .kj-action,
.kj-header .kj-action.kj-cart-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--kj-logo-50);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}

/* روی دسکتاپ برچسب متنی («سبد خرید»، «حساب کاربری») دیده می‌شود و
   دکمه باید کشیده باشد. روی موبایل برچسب display:none است، پس همان
   دایره‌ی ۴۴px می‌ماند — به همین دلیل این استثنا فقط ≥۹۹۲px است. */
@media (min-width: 992px) {
  .kj-header .kj-action:has(.kj-lbl) {
    width: auto;
    height: 40px;
    border-radius: 999px;
    padding-inline: 14px;
  }
}

@media (max-width: 991px) {
  .kj-header .kj-action { padding: 0 !important; }

  /* قاعده‌ی بالا display را ست می‌کند و همین باعث شد دکمه‌های
     «فقط دسکتاپ» (یادآور مناسبت‌ها و باشگاه مشتریان) که باید روی
     موبایل مخفی باشند، دوباره ظاهر شوند. اینجا برشان می‌گردانیم. */
  .kj-header .kj-action.kj-action-deskonly { display: none !important; }
}

/* کادر جستجو */
.kj-search input[type="text"] {
  border: 1.5px solid var(--kj-logo-50) !important;
}
/* قاعده‌ی فوکوس این کادر حذف شد — فیلدها هنگام فوکوس تغییری نمی‌کنند.
   (ضخامت حاشیه الان صفر است و رنگ دیده نمی‌شد، ولی مقدار محاسبه‌شده
   عوض می‌شد و اگر روزی حاشیه برگردد، دوباره پیدا می‌شد.) */

/* ==================================================================
   اصلاحات مرداد ۱۴۰۵ — هدر، جداکننده‌ها و رنگ متن
   ================================================================== */

/* ---------- ۱) آیکون منو فقط روی موبایل ----------
   قاعده‌ی یکسان‌سازی آیکون‌ها display را ست می‌کرد و همبرگر را
   روی دسکتاپ هم برمی‌گرداند. اینجا دوباره مخفی می‌شود. */
@media (min-width: 992px) {
  .kj-header .kj-menu-toggle { display: none !important; }
}

/* ---------- ۲) رنگ متن‌های تأکیدی ----------
   از #D42A57 به رنگ خود لوگو. همه‌ی کاربردهای این متغیر
   در تم فقط color هستند، پس چیزی جز رنگ متن عوض نمی‌شود.

   شهریور ۱۴۰۵ — تیره‌تر شد: رنگ نشان (#ED1B24) روی سفید فقط ۴٫۳۹ و
   روی زمینه‌ی کرم سایت ۴٫۲۱ کنتراست می‌داد، هر دو زیر حداقل ۴٫۵.
   این متغیر رنگِ همه‌ی قیمت‌ها، جمع‌ها و لینک‌های تأکیدی سایت است،
   پس ایراد در هر صفحه‌ای تکرار می‌شد.

   مقدار تازه روی سفید ۶٫۰۶ و روی کرم ۵٫۸۱ می‌دهد. صفحه‌ی
   دسته‌بندی‌ها قبلاً همین مقدار را به‌صورت موضعی روی .kjc گذاشته بود؛
   آن بازنویسی حالا حذف شده چون تکراری است.

   ⚠ خودِ نشان کادومون (--kj-logo) و رنگ برند (--kj-primary) عمداً
   دست‌نخورده‌اند — فقط رنگی که «متن» می‌شود عوض شده.

   بررسی شد که هر ۹۷ کاربرد این متغیر در تم فقط color است و هیچ‌جا
   background یا border نیست، پس جایی نیست که تیره‌ترشدن کنتراست را
   خراب کند — به‌جز زمینه‌های تیره، که پایین‌تر جدا شده. */
:root {
  --kj-primary-text: #C4141B;
}

/* ---------- استثنای زمینه‌ی تیره ----------
   آیکون‌های تماس فوتر تنها جایی هستند که این متغیر روی زمینه‌ی تیره
   می‌نشیند (#241B31). آنجا قاعده برعکس است: تیره‌تر شدن بدتر است.
   با مقدار سراسری کنتراست‌شان از ۳٫۷۵ به ۲٫۷۱ می‌افتاد و از حداقل
   ۳:۱ عناصر غیرمتنی هم رد می‌شد.

   پس فوتر نسخه‌ی روشن‌تر همان قرمز را می‌گیرد: ۶٫۵۴ روی زمینه‌ی خودش. */
.kj-footer { --kj-primary-text: #FF7A80; }

/* ---------- ۳) حذف نوار مسیر (بردکرامب) از نمای سایت ----------
   markup و اسکیمای BreadcrumbList عمداً باقی می‌مانند؛ فقط دیده نمی‌شوند.
   سه کلاس در ۶۰ قالب استفاده شده بود. */
.kjc-breadcrumb,
.kjp-breadcrumb,
.kjk-breadcrumb,
.kjp .breadcrumb,
.kjc .breadcrumb,
#content > .breadcrumb,
.container > .breadcrumb { display: none !important; }

/* ==================================================================
   بازطراحی کادر جستجوی هدر (مرداد ۱۴۰۵)

   قبلاً: حاشیه‌ی ۱٫۵px به رنگ لوگو، آیکون سمت راست، پدینگ عمودی ۱۲px.
   حالا: کپسولی، بدون حاشیه، زمینه‌ی خاکستری خیلی روشن، آیکون سمت چپ.

   این بلوک عمداً آخر فایل است تا قواعد قبلی (از جمله حاشیه‌ی رنگ لوگو
   و قاعده‌ی سراسری فیلدهای متنی که !important دارد) را بازنویسی کند.
   ================================================================== */

:root {
  --kj-search-bg:          #F5F5F5;   /* زمینه‌ی عادی */
  --kj-search-icon:        #8A8A8A;   /* خاکستری متوسط */
  --kj-search-placeholder: #8A8A8A;
}

.kj-search { flex: 1; max-width: 560px; position: relative; }

.kj-search input[type="text"] {
  width: 100%;
  /* جای آیکون در سمت چپ (در RTL یعنی inline-end) باز می‌شود */
  padding-block: 15px;
  padding-inline-start: 20px;
  padding-inline-end: 48px;

  border: 0 !important;
  border-radius: 9999px;
  background: var(--kj-search-bg) !important;
  box-shadow: none !important;

  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--kj-ink);
  text-align: right;
  height: auto;
  outline: none;
  transition: background-color .18s, box-shadow .18s;
}

.kj-search input[type="text"]::placeholder {
  color: var(--kj-search-placeholder);
  opacity: 1;                 /* فایرفاکس پیش‌فرض کم‌رنگش می‌کند */
  font-size: 13.5px;
}

/* فوکوس: هیچ قاعده‌ای ندارد و عمداً هم نباید داشته باشد.
   نسخه‌ی قبلی اینجا مقدارها را «برمی‌گرداند» (border:0، زمینه‌ی خاکستری)
   که روی همه‌ی صفحه‌ها درست بود جز صفحه‌ی تسویه‌حساب: آنجا استایل‌شیت
   onepage به همین کادر حاشیه‌ی ۲px می‌دهد، و آن بازگردانی حاشیه را
   هنگام فوکوس پاک می‌کرد و ارتفاع کادر ۴px می‌پرید.
   با نبودِ قاعده، هر مقدار پایه‌ای که هست دست‌نخورده می‌ماند. */

/* ---------- آیکون ذره‌بین: سمت چپ ---------- */
.kj-search button {
  position: absolute;
  inset-inline-end: 6px;      /* در RTL یعنی سمت چپ کادر */
  inset-inline-start: auto;
  right: auto;                /* خنثی‌کردن right:6px قاعده‌ی قدیمی */
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: none !important;
  color: var(--kj-search-icon);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: color .18s;
}
.kj-search button:hover { color: var(--kj-ink); }
.kj-search button svg {
  width: 19px; height: 19px;
  stroke: currentColor !important;
  stroke-width: 2;            /* ضخامت متوسط */
  fill: none;
}

/* ---------- موبایل: تمام عرض کانتینر ---------- */
@media (max-width: 991px) {
  .kj-search { max-width: none; flex-basis: 100%; width: 100%; }
  .kj-search input[type="text"] { padding-block: 14px; font-size: 15px; }
}

/* ==================================================================
   موبایل — دکمه‌های منو / حساب کاربری / سبد خرید به شکل
   دکمه‌ی شناور (Floating Action Button)   ‌— مرداد ۱۴۰۵

   قبلاً: دایره‌ی ۴۴px، زمینه سفید، حاشیه‌ی رنگ لوگو، بدون سایه.
   حالا: همان دایره ولی بزرگ‌تر و با سایه‌ی نرم و پخش‌شده، تا حس
   شناور بودن روی محتوا را بدهد.

   آیکون داخل دکمه‌ها عمداً دست‌نخورده مانده (اندازه، ضخامت خط، رنگ).
   فقط روی موبایل اعمال می‌شود؛ دسکتاپ همان حالت قبلی را دارد.
   ================================================================== */

:root {
  /* اندازه‌ی دکمه — تنها متغیری که برای تغییر سایز باید عوض شود.
     بقیه‌ی مقادیر (جای برچسب سبد خرید) از روی همین حساب می‌شوند. */
  /* ۵۳٫۶px = ارتفاع دقیق فیلد جستجو روی موبایل
     (padding-block ۱۴px × ۲ + ارتفاع خط ۲۵٫۶px).
     عمداً کسری است تا دکمه‌ها و نوار جستجو دقیقاً هم‌ارتفاع باشند. */
  --kj-fab-size:   53.6px;
  --kj-fab-gap:    10px;
  /* اندازه‌ی آیکون داخل دکمه‌های هدر — جای برچسب سبد خرید از روی
     همین حساب می‌شود، پس با تغییر این عدد جابه‌جا نمی‌شود. */
  --kj-hdr-icon:   24px;
  --kj-fab-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

@media (max-width: 991px) {

  .kj-header .kj-menu-toggle,
  .kj-header .kj-action,
  .kj-header .kj-action.kj-cart-btn {
    width:  var(--kj-fab-size);
    height: var(--kj-fab-size);
    /* همان مقدار فیلد جستجو — روی عنصر مربع به نصف ضلع بریده می‌شود */
    border-radius: 9999px;
    background: #fff;
    border: 0;
    /* حلقه‌ی دور دکمه‌ها برداشته شد: خودِ border از قبل صفر بود، آنچه
       دیده می‌شد این سایه بود. حالا هر سه آیکون هدر یک‌دست‌اند. */
    box-shadow: none;

    position: relative;
    z-index: 2;
  }

  /* هاور/فوکوس هم حاشیه برنگرداند (قاعده‌ی .kj-action:hover رنگ حاشیه می‌داد) */
  .kj-header .kj-action:hover,
  .kj-header .kj-action:focus,
  .kj-header .kj-menu-toggle:hover,
  .kj-header .kj-menu-toggle:focus { border: 0; }

  /* ---------- حالت فشرده‌شدن سبد خرید و حساب کاربری ----------
     روی دسکتاپ این دو دکمه با هاور رنگ آیکون‌شان به رنگ برند
     می‌شود. روی موبایل هاور معنا ندارد، پس همان اثر با :active
     (لحظه‌ی لمس/کلیک) و :focus (بعد از رها کردن) ساخته می‌شود.

     رنگ از var(--kj-primary-text) می‌آید — همان مقداری که قاعده‌ی
     دسکتاپ استفاده می‌کند — تا اگر روزی رنگ برند عوض شد، هر دو
     نسخه با هم عوض شوند.

     دکمه‌ی منو عمداً بیرون است؛ خواسته فقط این دو دکمه بود. */
  .kj-header .kj-action {
    transition: color .15s ease, background-color .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;   /* مستطیل خاکستری پیش‌فرض اندروید */
  }
  .kj-header .kj-action:active,
  .kj-header .kj-action:focus,
  .kj-header .kj-action:focus-visible {
    color: var(--kj-primary-text) !important;
    background-color: var(--kj-primary-soft, #FDEEF2);
  }
  /* svg رنگ را از currentColor می‌گیرد، ولی چند قاعده‌ی قدیمی
     stroke را صریح ست کرده‌اند؛ اینجا دوباره به رنگ متن برمی‌گردد. */
  .kj-header .kj-action:active svg,
  .kj-header .kj-action:focus svg,
  .kj-header .kj-action:focus-visible svg { stroke: currentColor !important; }

  /* فشار کوچک، تا لمس حس بازخورد بدهد */
  .kj-header .kj-action:active { transform: scale(.93); }

  /* ---------- دکمه‌ی منو: فقط آیکون ----------
     نه زمینه، نه سایه، نه حاشیه. اندازه‌ی ۵۶px عمداً می‌ماند چون
     ناحیه‌ی لمسی است، ولی چیزی از آن دیده نمی‌شود. */
  .kj-header .kj-menu-toggle,
  .kj-header .kj-menu-toggle:hover,
  .kj-header .kj-menu-toggle:focus {
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }

  /* آیکون منو از ۲۱px به ۲۴px — اندازه‌ی متعارف آیکون هدر در
     متریال و بیشتر کتابخانه‌های آیکون. ناحیه‌ی لمسی همان ۵۴px
     می‌ماند، فقط خودِ خط‌ها درشت‌تر می‌شوند. */
  .kj-header .kj-menu-toggle svg,
  .kj-header .kj-action svg {
    width:  var(--kj-hdr-icon);
    height: var(--kj-hdr-icon);
  }

  /* آیکون منو خطوط ضخیم‌تری دارد (stroke ۲ در برابر ۱٫۸). در اندازه‌ی
     یکسان این اختلاف دیده می‌شود، پس هر سه یکی می‌شوند. */
  .kj-header .kj-menu-toggle svg,
  .kj-header .kj-action svg { stroke-width: 1.9; }

  .kj-actions { gap: var(--kj-fab-gap); }

  /* ---------- برچسب تعداد سبد خرید ----------
     مرجع جایگذاری، خودِ آیکون است نه کادر دکمه. آیکون وسط‌چین است،
     پس گوشه‌ی بالا-راستش به اندازه‌ی
         (اندازه دکمه − اندازه آیکون) ÷ ۲
     از لبه‌ی کادر تو رفته است (با مقادیر فعلی: ۱۴٫۸px).

     ۱۱٫۵px از آن کم می‌شود = نصف عرض برچسب (۹٫۵) + ۲px بیرون‌زدگی،
     یعنی برچسب تقریباً روی همان گوشه می‌نشیند و فقط حدود ۷٫۵px با
     آیکون هم‌پوشانی دارد — همان گوشه‌ای که نقش آیکون سبد خالی است.

     قبلاً مرجع، کمانِ خودِ دایره بود و برچسب ۱۶px دورتر از آیکون
     می‌افتاد و معلق دیده می‌شد.

     سایت RTL است، پس right همان سمتِ بالا-راست است. left صریحاً
     auto می‌شود تا قاعده‌ی قدیمی (left: -6px) خنثی شود. */
  .kj-header .kj-cart-btn .kj-cart-badge {
    top:   calc((var(--kj-fab-size) - var(--kj-hdr-icon)) / 2 - 11.5px);
    right: calc((var(--kj-fab-size) - var(--kj-hdr-icon)) / 2 - 11.5px);
    left:  auto;
  }
}

/* ==================================================================
   دسکتاپ — حذف حاشیه‌ی هر چهار دکمه‌ی هدر
   (باشگاه مشتریان، یادآور مناسبت‌ها، حساب کاربری، سبد خرید)

   hover هم اینجا خنثی می‌شود، وگرنه قاعده‌ی .kj-action:hover رنگ
   حاشیه را ست می‌کند و با border صفر بی‌اثر است ولی اگر بعداً
   ضخامتی برگردد دوباره ظاهر می‌شود.
   ================================================================== */
@media (min-width: 992px) {
  .kj-header .kj-action,
  .kj-header .kj-action.kj-cart-btn,
  .kj-header .kj-action:hover,
  .kj-header .kj-action:focus,
  .kj-header .kj-action.kj-cart-btn:hover {
    border: 0;
  }
}

/* ---------- گوشی‌های باریک ----------
   با ۵۶px مجموع دکمه‌ها + لوگو از عرض ۳۲۰px بیرون می‌زند. */
@media (max-width: 360px) {
  :root {
    --kj-fab-size: 50px;
    --kj-fab-gap:  8px;
  }
}

/* ==================================================================
   فوکوس فیلدها — بدون هیچ تغییر ظاهری (شهریور ۱۴۰۵)

   خواست کارفرما: کلیک روی هر فیلد نباید ظاهرش را عوض کند.

   روش اصلی، حذف خودِ قاعده‌های :focus از استایل‌شیت‌های خودمان بود
   (نه بازنویسی‌شان)، چون آن‌طور مقدار پایه‌ی هر فیلد دست‌نخورده
   می‌ماند — و پایه‌ها یکسان نیستند: حاشیه‌ی #968892 یا #F0E7EA،
   زمینه‌ی #FFF9F6 یا #fff یا #F5F5F5. هر «بازگردانی» با یک مقدار
   ثابت، بعضی فیلدها را خراب می‌کرد.

   این بلوک فقط شبکه‌ی ایمنی است برای قاعده‌هایی که مالکشان نیستیم
   (بوت‌استرپ .form-control:focus و حلقه‌ی پیش‌فرض مرورگر). تنها دو
   ویژگی را صفر می‌کند که مقدار پایه‌شان روی همه‌ی فیلدهای سایت
   none است، پس چیزی را برنمی‌گرداند که نبوده.
   ================================================================== */

input:focus,            input:focus-visible,
textarea:focus,         textarea:focus-visible,
select:focus,           select:focus-visible,
.form-control:focus,    .form-control:focus-visible,
[contenteditable]:focus,[contenteditable]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

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

/* ---------- ۱۰) ناحیه‌های لمسی زیر ۴۴×۴۴ ----------
   اندازه‌ها فقط با پدینگ/min-height بزرگ می‌شوند، نه با تغییر فونت،
   پس ظاهر متن‌ها عوض نمی‌شود. */
.kj-footer li a,
.kj-footer-col li a {
  display: flex; align-items: center;
  min-height: 44px; line-height: 1.5;
}
.kj-footer li + li { margin-top: 0; }

.kj-socials a { width: 44px; height: 44px; }

.kj-search button { width: 44px; height: 44px; }

.kj-logo { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- ۶) دکمه‌ی بازگشت به بالا ----------
   صفحه اصلی روی موبایل ۶٫۷ صفحه‌نمایش است و هیچ راه برگشتی نداشت. */
.kj-totop {
  position: fixed;
  /* عمداً right فیزیکی: سایت RTL است و inset-inline-end به «چپ» ترجمه
     می‌شد — دقیقاً همان‌جایی که دکمه‌ی شناور واتساپ نشسته و چون
     z-index آن بالاتر است، دکمه‌ی بازگشت زیرش گم می‌شد. */
  right: 22px;
  left: auto;
  bottom: 22px;
  z-index: 890;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--kj-ink);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .16);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .22s, transform .22s, visibility .22s;
  -webkit-tap-highlight-color: transparent;
}
.kj-totop.kj-totop-on { opacity: 1; visibility: visible; transform: translateY(0); }
.kj-totop svg { width: 20px; height: 20px; }
.kj-totop:active { transform: scale(.92); color: var(--kj-primary-text); }

/* روی صفحه محصول، نوار خرید چسبان پایین را می‌گیرد */
body.kjp-has-stickybuy .kj-totop { bottom: 90px; }

@media (prefers-reduced-motion: reduce) { .kj-totop { transition: none; } }

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

   اندازه‌گیری: هیچ قاعده‌ی :hover یا :focus روی این نوار وجود ندارد
   (شبیه‌سازی هر سه حالت روی همه‌ی عناصرش صفر تغییر داد). آنچه دیده
   می‌شود «انتخاب شدن متن» است — با کلیک‌وکشیدن یا لمس، متن
   های‌لایت آبی می‌گیرد — و روی اندروید مستطیل پیش‌فرض لمس.

   این نوار محتوای خواندنی است نه دکمه، پس هیچ‌کدام لازم نیست.
   عمداً قاعده‌ی خنثی‌کننده‌ی سراسری ننوشتم: چون حالتی وجود ندارد،
   چنین قاعده‌ای فقط ریسک خراب‌کردن ظاهر عادی را داشت.
   ================================================================== */
.kj-features, .kj-features *,
.kjp-trust,  .kjp-trust * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* ==================================================================
   نوار لوگوی مشتریان — قاب دایره‌ای، دو ردیف خلاف جهت
   (شهریور ۱۴۰۵ — الگو برگرفته از arahonar.com)

   در هر دو جا استفاده می‌شود: صفحه اصلی و صفحه هدایای سازمانی.
   عمداً اینجاست (نه در kdm-home.css یا kdm-home2.css) تا یک نسخه
   بیشتر نگه‌داری نشود؛ این فایل در همه‌ی صفحات لود می‌شود.

   اندازه‌ها از روی همان صفحه اندازه‌گیری شد:
       دسکتاپ  قاب ۱۲۰px · گام ۱۹۵px (یعنی ۷۵px فاصله)
       موبایل   قاب ۱۰۰px · گام ۱۰۸px (یعنی ۸px فاصله)
   ================================================================== */

.kdm-cl-row {
  overflow: hidden;
  margin-bottom: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kdm-cl-row:last-child { margin-bottom: 0; }

/* ⚠ فاصله با margin هر قاب است، نه gap فلکس.
   با gap، نصفِ عرض track برابر «n قاب + (n-٠٫۵) فاصله» می‌شود ولی یک
   چرخه‌ی کامل به «n قاب + n فاصله» نیاز دارد؛ همان نیم‌فاصله هر دور
   یک پرش کوچک می‌ساخت. با margin، دو نسخه دقیقاً دو برابر یک نسخه
   است و ۵۰٪ کاملاً بی‌درز می‌شود. */
/* انیمیشن فقط بعد از اینکه kdm-marquee.js تعداد تکرار لازم را ساخت
   روشن می‌شود. بدون آن، ردیف ساکن ولی سالم است — نه فضای خالی و نه
   پرش. جابه‌جایی هم دقیقاً یک «مجموعه» است (--kdm-shift که همان
   اسکریپت پر می‌کند)، نه درصدی از کل نوار. */
.kdm-cl-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.kdm-cl-track.kdm-cl-on {
  animation-name: kdmMarq2;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.kdm-cl-row.kdm-cl-rev .kdm-cl-track.kdm-cl-on { animation-direction: reverse; }
.kdm-cl-row:hover .kdm-cl-track { animation-play-state: paused; }
/* ⚠ جهت جابه‌جایی در RTL مثبت است، نه منفی.
   نوار با width:max-content در صفحه‌ی راست‌به‌چپ، لبه‌ی راستش روی
   لبه‌ی راست ظرف می‌نشیند و بقیه‌اش به سمت چپ بیرون می‌زند. پس
   حرکت به چپ (منفی) کل نوار را از ظرف بیرون می‌برد و ردیف خالی
   می‌شود — همان فضای خالی‌ای که دیده می‌شد.
   (اندازه‌گیری: ظرف ۳۵۳..۱۵۵۳ ولی نوار ‎-۶۹۹۹..-۱۱۴۹‎ یعنی هیچ
    محتوایی داخل ظرف نبود.)
   با مقدار مثبت، محتوای سمت چپ به داخل دید می‌آید و حلقه بسته
   می‌ماند. */
@keyframes kdmMarq2 {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--kdm-shift, 0px)); }
}

/* ---------- قاب دایره‌ای ----------
   لوگوهای فعلی رنگی روی زمینه‌ی سفیدند، پس قاب روشن است نه سرمه‌ای؛
   با فایل‌های سفیدِ پس‌زمینه‌شفاف کافی است همین دو مقدار عوض شود. */
.kdm-cl-item {
  flex: none;
  width: 120px;
  height: 120px;
  margin-inline-end: 75px;
  border-radius: 50%;
  background: var(--kdm-cl-bg, #fff);
  border: 1px solid var(--kj-line, #F0E7EA);
  box-shadow: 0 2px 10px rgba(36, 27, 49, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  /* فضای امن داخل دایره ۱۲۰px (با box-sizing: border-box):
     پهنا ۸۸ و بلندا ۵۴ می‌ماند. نصف قطر گوشه‌ی این کادر
     √(۴۴² + ۲۷²) ≈ ۵۱٫۶ است و شعاع دایره ۶۰، پس دست‌کم
     ۸ پیکسل تا خط دور فاصله می‌ماند و هیچ لوگویی به آن نمی‌چسبد.
     کادر عمداً پهن‌تر از بلند است تا لوگوهای کشیده هم جا شوند. */
  padding: 32px 15px;
}
.kdm-cl-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(36, 27, 49, .12);
}
/* هر لوگو دقیقاً همان کادر امن را می‌گیرد و contain نسبتش را حفظ
   می‌کند؛ پس همه در یک چارچوب یکسان دیده می‌شوند.
   نسبت فایل‌ها از ۰٫۶۶ تا ۴٫۱۲ فرق دارد: با کادر مربع، لوگوی
   مربعی ۸۷×۸۷ و لوگوی کشیده ۸۷×۲۱ درمی‌آمد — اختلاف زیاد.
   با کادر ۸۸×۵۴ لوگوی مربعی به ۵۴×۵۴ محدود می‌شود و وزن
   دیداری‌شان به هم نزدیک می‌ماند. */
.kdm-cl-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .kdm-cl-track { animation: none; }
}

@media (max-width: 767px) {
  .kdm-cl-row { margin-bottom: 10px; }
  /* دایره‌ی ۱۰۰px: کادر امن ۷۴×۴۶، فاصله تا خط دور ≈ ۶ پیکسل */
  .kdm-cl-item { width: 100px; height: 100px; margin-inline-end: 8px; padding: 26px 12px; }
}

/* ==================================================================
   دسکتاپ — برچسب تعداد سبد، چسبیده به خودِ آیکون
   (شهریور ۱۴۰۵)

   روی دسکتاپ دکمه‌ی سبد برچسب متنی «سبد خرید» هم دارد، پس عرضش
   ۱۰۳px است نه ۴۴px. قاعده‌ی قدیمیِ قالب:

       .count-sale { right: -9px; top: -9px !important; }

   برچسب را به گوشه‌ی کادرِ دکمه می‌چسباند، نه به آیکون. چون آیکون
   در انتهای دکمه است، برچسب ۹px بیرونِ کادر و حدود ۲۳px دورتر از
   آیکون معلق می‌ماند.

   مرجع درست، خودِ آیکون است — همان کاری که نسخه‌ی موبایل می‌کند:
       فاصله‌ی افقی آیکون تا لبه‌ی دکمه = padding-inline = ۱۴px
       فاصله‌ی عمودی  = (ارتفاع دکمه ۴۰ − آیکون ۱۹) ÷ ۲ = ۱۰٫۵px
   و ۱۱٫۵px از هر دو کم می‌شود = نصف عرض برچسب (۹٫۵) + ۲px بیرون‌زدگی،
   تا برچسب روی گوشه‌ی بالا-راست آیکون بنشیند.

   سایت RTL است پس right همان سمت راست است. top به !important نیاز
   دارد چون قاعده‌ی قالب هم !important دارد.
   ================================================================== */
@media (min-width: 992px) {
  .kj-header .kj-cart-btn .kj-cart-badge {
    top:   calc((40px - 19px) / 2 - 11.5px) !important;   /* ‎-1px‎ */
    right: calc(14px - 11.5px);                            /* ‎2.5px‎ */
    left:  auto;
  }
}

/* ==================================================================
   منوی «انواع محصولات» — جدا کردن تب‌ها از پیوندهای ساده
   (شهریور ۱۴۰۵)

   دسته‌هایی که زیرمجموعه ندارند دیگر تب نیستند: قبلاً با هاورشان یک
   پنل ۳۶۲ پیکسلی برای ۱۹ پیکسل محتوا باز می‌شد (۹۵٪ خالی). حالا زیر
   یک جداکننده به‌صورت پیوند ساده می‌آیند و مستقیم به دسته می‌روند.
   ================================================================== */
.kj-cats-tabs .kj-cats-sep {
  height: 1px; margin: 8px 14px; background: var(--kj-line, #F0E7EA);
  list-style: none;
}
/* پیوند ساده: نه فلش دارد نه حالت «انتخاب‌شده» می‌گیرد، تا معلوم
   باشد پنلی باز نمی‌کند و مستقیم می‌برد. */
.kj-cats-tabs .kj-cat-plain { color: var(--kj-muted, #6B6279); }
.kj-cats-tabs .kj-cat-plain:hover {
  color: var(--kj-primary-text) !important;
  background: var(--kj-bg, #FAF6F3);
  border-inline-start-color: transparent;
}

/* تبِ فعال باید صریح‌تر از حالت hover دیده شود، وگرنه معلوم نیست
   محتوای کنار مالِ کدام تب است. */
.kj-cats-tabs .kj-cat-tab.kj-on { font-weight: 800; }

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

   مرجع: body.checkout-onepagecheckout .checkout-checkout input
   در kdm-onepage.css —
       border: 1px solid var(--kj-line)
       border-radius: 12px
       background: var(--kj-bg)
       font-size: 13px
       padding: 10px 14px

   اندازه‌گیری پیش از اصلاح روی صفحه‌ی جستجو:
       کادر جستجو، دسته‌بندی و مرتب‌سازی → حاشیه ۲px رنگ #968892،
       گردی ۱۳px، و پس‌زمینه‌ی دو تای آخر شفاف بود.

   ⚠ اسکوپ عمداً «#content» است تا کادر جستجوی هدر (که همین صفحه هم
   دارد) دست‌نخورده بماند — همان تله‌ای که در صفحه‌ی تسویه هم بود.
   !important لازم است چون قاعده‌ی سراسری بالاتر در همین فایل
   رنگ حاشیه را با !important قفل کرده. */
body.product-search #content input[type="text"],
body.product-search #content input[type="search"],
body.product-search #content select,
body.product-search #content textarea {
  border: 1px solid var(--kj-line) !important;
  border-radius: 12px !important;
  background: var(--kj-bg) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--kj-ink) !important;
  padding: 10px 14px !important;
  height: auto !important;
  line-height: 1.8 !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s;
}
/* برچسب‌ها هم مثل تسویه؛ template.css قاعده‌ی
   «label { font-size: 12px !important }» دارد و بدون important
   نادیده گرفته می‌شود. */
body.product-search #content label,
body.product-search #content .control-label {
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--kj-ink) !important; font-family: inherit !important;
}

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

   حاشیه و گردی از قبل درست بودند؛ فقط اندازه‌ی متن ۱۴px و زمینه
   سفید بود به‌جای ۱۳px و کرم.

   ⚠ اسکوپ «#content» است تا کادر جستجوی هدر دست‌نخورده بماند.
   !important لازم است چون قاعده‌ی سراسری بالاتر در همین فایل رنگ
   حاشیه را با !important قفل کرده و template.css هم روی label
   قاعده‌ی !important دارد. */
body.information-contact .kji input[type="text"],
body.information-contact .kji input[type="email"],
body.information-contact .kji input[type="tel"],
body.information-contact .kji select,
body.information-contact .kji textarea {
  border: 1px solid var(--kj-line) !important;
  border-radius: 12px !important;
  background: var(--kj-bg) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--kj-ink) !important;
  padding: 10px 14px !important;
  height: auto !important;
  line-height: 1.8 !important;
  box-shadow: none !important;
}
body.information-contact .kji label,
body.information-contact .kji .control-label {
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--kj-ink) !important; font-family: inherit !important;
}

/* ==================================================================
   نوار ناوبری دسکتاپ — جداکننده و سلسله‌مراتب رنگ
   (شهریور ۱۴۰۵)
   ================================================================== */
@media (min-width: 992px) {

  /* ---------- خط عمودی بین «دسته‌بندی هدایا» و «انواع محصولات» ----------
     در صفحه‌ی راست‌به‌چپ، «دسته‌بندی هدایا» سمت راست است و «انواع
     محصولات» سمت چپش؛ پس خط روی لبه‌ی inline-start (یعنی راستِ)
     «انواع محصولات» می‌نشیند.

     ⚠ خودِ .kj-has-mega عمداً position: static است تا پنل مگامنو
     تمام‌عرض باز شود؛ پس خط را روی لینک داخلش می‌گذاریم که از قبل
     relative شده (برای مثلث اتصال پنل). */
  .kj-has-cats .kj-nav-link::before {
    content: "";
    position: absolute;
    inset-inline-start: -1px;
    top: 25%;
    height: 50%;              /* نصف ارتفاع نوار */
    width: 1px;
    background: var(--kj-line);
    pointer-events: none;
  }

  /* ---------- سلسله‌مراتب رنگ ----------
     «دسته‌بندی هدایا» ورودی اصلی فروشگاه است و پررنگ می‌ماند؛ بقیه
     با رنگ خاموشِ استاندارد سایت (--kj-muted) عقب می‌نشینند.
     کنتراست ۵٫۷۶ روی سفید است، یعنی بالای حد لازم ۴٫۵. */
  .kj-nav-inner > .kj-nav-link,
  .kj-has-cats .kj-nav-link {
    color: var(--kj-muted) !important;
    font-weight: 500;
  }
  .kj-nav-inner > .kj-nav-link:hover,
  .kj-has-cats:hover .kj-nav-link {
    color: var(--kj-ink) !important;
  }

  /* «حراج و تخفیف‌ها» هم مثل بقیه کم‌رنگ شد (درخواست کارفرما).
     قاعده‌ی «.kj-nav-link.kj-hot» رنگ برند را با !important ست
     می‌کند؛ این سلکتور وزن بیشتری دارد (۰،۳،۰ در برابر ۰،۲،۰) پس
     برنده می‌شود.
     با هاور مثل بقیه پررنگ می‌شود. */
  .kj-nav-inner > .kj-nav-link.kj-nav-sale {
    color: var(--kj-muted) !important;
    font-weight: 500;
  }
  .kj-nav-inner > .kj-nav-link.kj-nav-sale:hover {
    color: var(--kj-ink) !important;
  }
}

/* ==================================================================
   کارت محصول روی دستگاه لمسی — بدون جابه‌جایی (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   .kj-pcard:hover کارت را ۶px بالا می‌برد و تصویرش را ۵٪ بزرگ می‌کند.
   روی موس این یک بازخورد درست است، اما روی صفحه‌ی لمسی مرورگر پس از
   لمس، حالت hover را روی همان کارت نگه می‌دارد؛ کارت بالا می‌پرد و تا
   لمسِ جای دیگر همان‌جا می‌ماند. کاربر این را «فوکوسِ گیرکرده» می‌بیند.
   پس روی دستگاهی که موس واقعی ندارد، هر دو افکت خنثی می‌شود.
   (hover: none) دستگاه‌های صرفاً لمسی و (pointer: coarse) لمسی‌هایی که
   hover را شبیه‌سازی می‌کنند، هر دو را می‌گیرد.
   ================================================================== */
@media (hover: none), (pointer: coarse) {
  .kj-pcard:hover { transform: none; box-shadow: none; }
  .kj-pcard:hover .kj-pimg img { transform: none; }

  /* دکمه‌ها هم بعد از لمس ۲px بالا می‌ماندند. فقط جابه‌جایی خنثی
     می‌شود؛ تغییر رنگ و حاشیه‌ی hover بازخورد بی‌ضرری است. */
  .kj-btn:hover { transform: none; }

  /* لوگوی مشتریان: هم بالاپریدن، هم سایه‌ی پررنگ‌تر برمی‌گردد به
     حالت پایه (سایه‌ی پایه‌ی خودِ .kdm-cl-item). */
  .kdm-cl-item:hover {
    transform: none;
    box-shadow: 0 2px 10px rgba(36, 27, 49, .06);
  }

  /* مهم‌تر از همه: نوار مشتریان روی hover متوقف می‌شود. روی صفحه‌ی
     لمسی یک بار دست‌زدن یا کشیدن، حرکت را برای همیشه قفل می‌کرد،
     چون hover تا لمسِ جای دیگر باقی می‌ماند. */
  .kdm-cl-row:hover .kdm-cl-track { animation-play-state: running; }
}

/* ==================================================================
   هدر شناور روی موبایل (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   .kj-header از قبل position:sticky; top:0 داشت ولی هرگز کار نمی‌کرد،
   چون template.css روی .page مقدار overflow:hidden می‌گذارد و هر
   والدی با overflow غیر از visible خودش «ظرفِ چسبندگی» می‌شود؛ آن ظرف
   اسکرول ندارد، پس هدر هیچ‌وقت نمی‌چسبد.

   overflow-x: clip همان بریدنِ افقی را نگه می‌دارد (که برای نوار
   لوگوی مشتریان و بنرهای پهن لازم است) اما بر خلاف hidden، محور عمودی
   را visible می‌گذارد و sticky زنده می‌شود.
   ================================================================== */
.page { overflow-x: clip; overflow-y: visible; }

/* دسکتاپ عمداً مثل قبل می‌ماند (کارفرما فقط موبایل را خواست).
   relative همان z-index و همان لایه‌بندیِ sticky را می‌دهد، پس
   مگامنو دقیقاً مثل قبل روی محتوا می‌نشیند، فقط هدر نمی‌چسبد. */
@media (min-width: 992px) {
  .kj-header { position: relative; }
}

/* موبایل: هدر (ردیف منو + ردیف جست‌وجو) بالای صفحه می‌ماند.
   نوار اعلان بالایی عمداً بیرون از هدر است و با اسکرول می‌رود.
   scroll-padding-top باعث می‌شود پرش به لنگرها زیر هدر پنهان نشود. */
@media (max-width: 991px) {
  html { scroll-padding-top: 150px; }
  .kj-header { position: sticky; top: 0; z-index: 990; }
}

/* ==================================================================
   نشانه‌ی «وارد حساب شده‌اید» روی دکمه‌ی حساب کاربری (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   تا حالا دکمه‌ی حساب در هر دو حالت — وارد شده و نشده — دقیقاً یک
   شکل داشت، پس کاربر راهی نداشت بفهمد لاگین هست یا نه مگر با کلیک.
   حالا در حالت ورود، همان دکمه رنگ برند می‌گیرد: زمینه‌ی صورتیِ
   کم‌رنگ، حاشیه و متن به رنگ برند. رنگ‌ها همه از توکن‌های موجود
   می‌آیند، پس با «رنگ‌های سایت» در پنل هم هماهنگ می‌ماند.
   ================================================================== */
.kj-action.kj-action-in {
  border-color: var(--kj-primary);
  background: var(--kj-primary-soft);
  color: var(--kj-primary-text) !important;
}
.kj-action.kj-action-in svg { color: var(--kj-primary-text); }

/* هاور نباید حالت ورود را کم‌رنگ‌تر کند */
.kj-action.kj-action-in:hover {
  border-color: var(--kj-primary);
  background: #fff;
}

/* ==================================================================
   صفحه‌بندی — حذف لکه‌ی قرمزِ قالب قدیمی (سراسری، شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   template.css روی خودِ <li> صفحه‌بندی زمینه‌ی #B70028 و
   border-radius:100% می‌گذارد (۳۰×۳۰). چون <a> داخلش بزرگ‌تر است
   (۳۸ یا ۴۰ پیکسل)، یک هلال قرمز تیره از پشت دکمه بیرون می‌زند.

   قبلاً این خنثی‌سازی فقط با سلکتور «.kjc-main .pagination li» نوشته
   شده بود، پس صفحه‌های دسته‌بندی و جستجو درست بودند ولی صفحه‌ی بلاگ —
   که داخل .kjc-main نیست — همچنان لکه داشت. حالا بدون قید صفحه در
   kdm-theme.css نشسته که روی همه‌ی صفحه‌ها لود می‌شود.

   حالت فعال هم اینجا روی خودِ <a> می‌آید، چون با برداشتن زمینه‌ی li
   صفحه‌ی جاری هیچ نشانه‌ای نمی‌داشت. صفحه‌هایی که قاعده‌ی خودشان را
   دارند (دسته‌بندی) چون CSSشان بعد از این فایل لود می‌شود، دست‌نخورده
   می‌مانند.
   ================================================================== */
.pagination > li,
.pagination > li.active {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
}

.pagination > li.active > a,
.pagination > li.active > span {
  background: var(--kj-primary) !important;
  border-color: var(--kj-primary) !important;
  color: #fff !important;
}