/* ============================================================
   کادومون — صفحات ورود (kja) و سبد خرید (kjk)
   ============================================================ */

.kja, .kjk { background: var(--kj-bg); padding-block: 4px 46px; }
.kja *, .kjk * { box-sizing: border-box; }
.kja img, .kjk img { max-width: 100%; }
.kja a, .kjk a { text-decoration: none !important; }
.kja h1, .kja p, .kjk h1, .kjk h3, .kjk p { margin: 0; }

/* ---------- بردکرامب و خالی (مشترک) ---------- */
.kjc-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--kj-muted); padding-block: 16px 6px;
}
.kjc-breadcrumb a { color: var(--kj-muted) !important; }
.kjc-breadcrumb a:hover { color: var(--kj-primary-text) !important; }
.kjc-sep { opacity: .5; }
.kjc-empty {
  text-align: center; padding: 70px 20px; color: var(--kj-muted);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.kjc-empty-emoji { font-size: 52px; }
.kjc-empty b { font-size: 17px; color: var(--kj-ink); }

/* ---------- پیام‌ها ---------- */
.kja-alert {
  border-radius: 14px; padding: 12px 18px; font-size: 13px; font-weight: 600;
  margin-block: 10px; border: 1px solid transparent;
}
.kja-alert-ok { background: #E2F7F4; color: #0E8A7A; border-color: #bfe9e2; }
.kja-alert-err { background: #FDE3E3; color: #C22525; border-color: #f5c6c6; }
.kja-alert-info { background: #E8F0FE; color: #2B5BB8; border-color: #cddcf8; }

/* ============================================================
   صفحه ورود
   ============================================================ */
.kja-wrap {
  display: grid; grid-template-columns: minmax(0, 460px) 300px;
  gap: 26px; justify-content: center; align-items: start; padding-block: 40px 20px;
}
.kja-card {
  background: #fff; border: 1px solid var(--kj-line); border-radius: 26px;
  padding: 36px 34px; box-shadow: var(--kj-shadow);
}
.kja-head { text-align: center; margin-bottom: 22px; }
.kja-logo { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; box-shadow: 0 8px 20px rgba(214, 1, 9, .25); display: block; }
.kja-head h1 { font-size: 21px; font-weight: 800; color: var(--kj-ink); margin-bottom: 6px; }
.kja-head p { font-size: 12.5px; color: var(--kj-muted); }

.kja-form { display: grid; gap: 13px; margin-top: 6px; }
.kja-field { position: relative; }
/* ---------- هم‌شکل شدن با فیلدهای صفحه‌ی تسویه ----------
   مرجع: 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
       line-height: 1.8

   فاصله‌ی افقی اینجا بیشتر می‌ماند چون این فیلدها دو آیکون دارند:
   آیکون راهنما سمت راست و دکمه‌ی نمایش رمز سمت چپ.
   روی موبایل قاعده‌ی سراسری kdm-theme.css اندازه را ۱۶px نگه
   می‌دارد تا سافاری هنگام تمرکز زوم نکند. */
.kja-field input {
  width: 100%; padding: 10px 46px 10px 44px; border: 1px solid var(--kj-line);
  border-radius: 12px; background: var(--kj-bg); font-size: 13px; outline: none;
  transition: border-color .2s, background .2s; font-family: inherit; color: var(--kj-ink);
  height: auto; line-height: 1.8;
}
/* حالت فوکوس حذف شد — .kja-field input:focus */
.kja-ficon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--kj-muted); pointer-events: none;
}
.kja-ficon svg { width: 19px; height: 19px; display: block; }
.kja-peek {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; color: #B9AEBF; padding: 6px;
}
.kja-peek svg { width: 19px; height: 19px; display: block; }
.kja-peek.kja-peek-on { color: var(--kj-primary-text); }
.kja-submit { width: 100%; padding-block: 13px; font-size: 15px; margin-top: 4px; }

.kja-hint { text-align: center; font-size: 11.5px; color: var(--kj-muted); margin: 10px 0 0; }

/* ورود با کد پیامکی */
/* کادر کد یکبارمصرف عمداً بزرگ می‌ماند — خواندن و تایپ پنج رقم با
   فونت ۱۳px سخت می‌شود. فقط حاشیه و گردی‌اش با بقیه یکی است. */
.kja-code-input {
  text-align: center !important; direction: ltr; font-size: 24px !important;
  font-weight: 800; letter-spacing: 10px; padding: 11px 16px !important;
}
.kja-sent-to {
  font-size: 13px; color: var(--kj-muted); text-align: center; margin: 0 0 4px;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.kja-sent-to b { color: var(--kj-ink); direction: ltr; }
.kja-edit-phone {
  border: 0; background: var(--kj-primary-soft); color: var(--kj-primary-text);
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px;
  cursor: pointer; font-family: inherit;
}
.kja-resend { text-align: center; font-size: 12.5px; color: var(--kj-muted); margin: 4px 0 0; }
.kja-resend b { color: var(--kj-primary-text); }
.kja-resend button {
  border: 0; background: none; color: var(--kj-primary-text); font-weight: 800;
  cursor: pointer; font-family: inherit; font-size: 12.5px;
}
.kja-resend button:hover { text-decoration: underline; }

.kja-forgot {
  display: block; text-align: center; font-size: 12.5px; color: var(--kj-muted) !important;
  margin-top: 16px;
}
.kja-forgot:hover { color: var(--kj-primary-text) !important; }
.kja-register {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--kj-line);
  text-align: center; font-size: 13px; color: var(--kj-muted);
  display: flex; gap: 8px; justify-content: center; align-items: center;
}
.kja-register a {
  color: var(--kj-primary-text) !important; font-weight: 800;
  background: var(--kj-primary-soft); border-radius: 999px; padding: 6px 18px;
  transition: all .2s; display: inline-block;
}
.kja-register a:hover { background: var(--kj-primary); color: #fff !important; }

.kja-side-note {
  background: linear-gradient(150deg, var(--kj-primary-soft), var(--kj-accent-soft));
  border-radius: 22px; padding: 26px 24px; font-size: 13px; color: #6B5E7E;
  position: sticky; top: 140px;
}
.kja-side-note span { font-size: 34px; display: block; margin-bottom: 8px; }
.kja-side-note b { display: block; font-size: 15px; color: var(--kj-ink); margin-bottom: 6px; }
.kja-side-note p { line-height: 2; margin: 0; }

/* ============================================================
   سبد خرید
   ============================================================ */
.kjk-title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; color: var(--kj-ink); margin-block: 8px 20px; }
.kjk-layout { display: grid; grid-template-columns: 1fr 330px; gap: 22px; align-items: start; }

.kjk-items { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kjk-item {
  background: #fff; border: 1px solid var(--kj-line); border-radius: var(--kj-radius);
  padding: 16px; display: flex; gap: 16px; align-items: center;
}
.kjk-img {
  width: 92px; height: 92px; border-radius: 14px; overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--kj-line); display: block; background: #FAF6F3;
}
.kjk-img img { width: 100%; height: 100%; object-fit: cover; }
.kjk-info { flex: 1; min-width: 0; }
.kjk-name { font-size: 14px; font-weight: 700; color: var(--kj-ink) !important; line-height: 1.8; display: block; }
.kjk-name:hover { color: var(--kj-primary-text) !important; }
.kjk-nostock { font-size: 11px; color: #C22525; font-weight: 600; }
.kjk-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.kjk-opts span {
  font-size: 11px; color: var(--kj-muted); background: var(--kj-bg);
  border: 1px solid var(--kj-line); border-radius: 999px; padding: 2px 10px;
}
.kjk-reward { display: block; font-size: 11px; color: var(--kj-muted); margin-top: 3px; }
.kjk-unit { font-size: 12px; color: var(--kj-muted); margin-top: 6px; }
.kjk-unit span { font-size: 10.5px; opacity: .8; }

.kjk-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex-shrink: 0; }
.kjk-qty {
  display: flex; align-items: center; gap: 2px;
  border: 2px solid var(--kj-line); border-radius: 999px; padding: 3px; background: #fff;
}
.kjk-qty-btn {
  width: 30px; height: 30px; border-radius: 50%; font-size: 15px; font-weight: 700;
  border: 0; background: none; cursor: pointer; color: var(--kj-ink);
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.kjk-qty-btn:hover { background: var(--kj-primary-soft); color: var(--kj-primary-text); }
.kjk-qty-val {
  width: 38px; text-align: center; font-weight: 800; font-size: 14px;
  border: 0; background: none; outline: none; font-family: inherit; color: var(--kj-ink);
}
.kjk-subtotal { font-size: 15px; font-weight: 800; color: var(--kj-primary-text); white-space: nowrap; }
.kjk-remove {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--kj-muted); border: 0; background: none; cursor: pointer;
  font-family: inherit; padding: 4px 6px; border-radius: 8px; transition: all .2s;
}
.kjk-remove svg { width: 15px; height: 15px; }
.kjk-remove:hover { color: #C22525; background: #FDE3E3; }

.kjk-update-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 6px;
}
.kjk-continue { font-size: 13px; font-weight: 700; color: var(--kj-primary-text) !important; }

/* خلاصه سفارش */
.kjk-summary { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 14px; }
.kjk-sum-card {
  background: #fff; border: 1px solid var(--kj-line); border-radius: var(--kj-radius);
  padding: 22px; box-shadow: var(--kj-shadow);
}
.kjk-sum-card h3 { font-size: 15.5px; font-weight: 800; color: var(--kj-ink); margin-bottom: 14px; }
.kjk-totals { width: 100%; border-collapse: collapse; font-size: 13px; }
.kjk-totals td { padding-block: 8px; border-bottom: 1px dashed var(--kj-line); color: var(--kj-muted); }
.kjk-totals td:last-child { text-align: left; font-weight: 700; color: var(--kj-ink); }
.kjk-totals tr:last-child td { border-bottom: 0; font-size: 14.5px; padding-top: 12px; }
.kjk-totals tr:last-child td:last-child { color: var(--kj-primary-text); font-weight: 800; }
.kjk-checkout { width: 100%; margin-top: 14px; padding-block: 13px; font-size: 15px; }
.kjk-trust-mini {
  display: flex; justify-content: space-between; gap: 6px; margin-top: 14px;
  font-size: 10.5px; color: var(--kj-muted); flex-wrap: wrap;
}

/* کوپن / امتیاز (ماژول‌های موجود) */
.kjk-coupon {
  background: #fff; border: 1px solid var(--kj-line); border-radius: var(--kj-radius);
  padding: 16px 18px; font-size: 13px;
}
.kjk-coupon h4, .kjk-coupon .panel-title, .kjk-coupon label {
  font-size: 13px !important; font-weight: 700 !important; color: var(--kj-ink) !important;
  font-family: inherit !important;
}
.kjk-coupon .panel { border: 0 !important; box-shadow: none !important; margin: 0 !important; background: transparent !important; }
.kjk-coupon .panel-heading { background: transparent !important; border: 0 !important; padding: 0 !important; }
.kjk-coupon .panel-body { padding: 10px 0 0 !important; border: 0 !important; }
/* ⚠ این قاعده از .kjk-coupon-input مشخص‌تر است (۰،۲،۱ در برابر
   ۰،۱،۰) و هر دو !important دارند، پس مقدار نهایی از اینجا می‌آید.
   با معیار صفحه‌ی تسویه یکی شد: حاشیه ۱px و متن ۱۳px. */
.kjk-coupon input[type="text"] {
  border: 1px solid var(--kj-line) !important; border-radius: 12px !important;
  background: var(--kj-bg, #FFF9F6) !important;
  font-family: inherit !important; font-size: 13px !important; padding: 10px 14px !important;
  height: auto !important; box-shadow: none !important;
}
/* حالت فوکوس حذف شد — .kjk-coupon input[type="text"]:focus */
.kjk-coupon .btn, .kjk-coupon input[type="button"], .kjk-coupon button {
  background: var(--kj-ink) !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; font-family: inherit !important; font-weight: 700 !important;
  font-size: 12.5px !important; padding: 9px 20px !important;
}

/* ============================================================
   باشگاه مشتریان (kjpc)
   ============================================================ */
.kjp-club { padding-block: 4px 46px; }
.kjpc-code {
  background: #FFF6DE !important; color: #8a6a12 !important; border: 1px dashed var(--kj-accent) !important;
  font-size: 14px !important; font-weight: 700; line-height: 2;
}
.kjpc-hero {
  position: relative; border-radius: 24px; overflow: hidden; margin-block: 8px 18px;
  background: linear-gradient(120deg, #2b1230, #521022 55%, #7a0c20); color: #fff;
  padding: 28px 32px;
}
.kjpc-hero-bg {
  position: absolute; inset: 0; opacity: .08;
  background-image: radial-gradient(#fff 1.5px, transparent 1.5px); background-size: 22px 22px;
}
.kjpc-hero-in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.kjpc-balance { display: flex; align-items: center; gap: 16px; }
.kjpc-star { font-size: 46px; animation: kjCdPulse 2.5s ease-in-out infinite; }
.kjpc-balance small { font-size: 12.5px; color: rgba(255,255,255,.75); display: block; }
.kjpc-balance b { font-size: 32px; font-weight: 800; color: #fff; display: block; line-height: 1.2; }
.kjpc-balance b i { font-size: 15px; font-weight: 600; font-style: normal; color: var(--kj-accent); }
.kjpc-worth { font-size: 12px; color: var(--kj-accent); }
.kjpc-hero-note {
  max-width: 340px; font-size: 12.5px; line-height: 2; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 12px 16px;
}
.kjpc-hero-note b { color: var(--kj-accent); }

.kjpc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 16px; }
.kjpc-box {
  background: #fff; border: 1px solid var(--kj-line); border-radius: var(--kj-radius); padding: 22px 24px;
}
.kjpc-box h3 { font-size: 15.5px; font-weight: 800; color: var(--kj-ink); margin: 0 0 6px; }
.kjpc-hint { font-size: 12px; color: var(--kj-muted); margin: 0 0 16px; }
.kjpc-form label { font-size: 12.5px; font-weight: 700; color: var(--kj-ink); display: block; margin-bottom: 8px; }
.kjpc-input-row { display: flex; gap: 10px; }
.kjpc-input-row input {
  flex: 1; padding: 12px 15px; border: 2px solid var(--kj-line); border-radius: 13px;
  background: var(--kj-bg); font-size: 14px; font-weight: 700; outline: none; font-family: inherit;
  color: var(--kj-ink); direction: ltr; text-align: right; min-width: 0;
}
/* حالت فوکوس حذف شد — .kjpc-input-row input:focus */
.kjpc-input-row .kj-btn { white-space: nowrap; }
.kjpc-quick { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.kjpc-quick button {
  border: 1.5px solid var(--kj-line); background: #fff; color: var(--kj-muted);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .2s;
}
.kjpc-quick button:hover { border-color: var(--kj-primary); color: var(--kj-primary-text); }
.kjpc-locked { text-align: center; padding: 10px 0; }
.kjpc-locked span { font-size: 34px; display: block; margin-bottom: 8px; }
.kjpc-locked p { font-size: 13px; color: var(--kj-muted); line-height: 2; margin: 0 0 14px; }
.kjpc-locked b { color: var(--kj-primary-text); }

.kjpc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kjpc-steps li {
  display: flex; align-items: flex-start; gap: 11px; font-size: 13px; color: #4E4460; line-height: 1.8;
}
.kjpc-steps li span {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--kj-primary-soft); color: var(--kj-primary-text);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.kjpc-steps b { color: var(--kj-primary-text); }

.kjpc-history { margin-bottom: 0; }
.kjpc-table { width: 100%; border-collapse: collapse; }
.kjpc-table td { padding: 12px 8px; border-bottom: 1px solid var(--kj-line); font-size: 13px; vertical-align: middle; }
.kjpc-table tr:last-child td { border-bottom: 0; }
.kjpc-desc { color: var(--kj-ink); font-weight: 600; }
.kjpc-date { color: var(--kj-muted); font-size: 12px; white-space: nowrap; direction: ltr; text-align: left; width: 90px; }
.kjpc-pts { font-weight: 800; text-align: left; white-space: nowrap; direction: ltr; width: 100px; font-variant-numeric: tabular-nums; }
.kjpc-plus { color: #0E8A7A; }
.kjpc-minus { color: #C22525; }
.kjpc-empty-hist { text-align: center; color: var(--kj-muted); font-size: 13px; padding: 24px; }

@media (max-width: 768px) {
  .kjpc-grid { grid-template-columns: 1fr; }
  .kjpc-hero-note { max-width: none; }
}

/* ============================================================
   یادآور مناسبت‌ها (kjr)
   ============================================================ */
.kjr-hero {
  position: relative; border-radius: 24px; overflow: hidden; margin-block: 8px 18px;
  background: linear-gradient(120deg, #1FB9A5, #0E8A7A); color: #fff; padding: 26px 30px;
}
.kjr-hero-bg { position: absolute; inset: 0; opacity: .08; background-image: radial-gradient(#fff 1.5px, transparent 1.5px); background-size: 22px 22px; }
.kjr-hero-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; }
.kjr-bell { font-size: 44px; animation: kjCdPulse 2.5s ease-in-out infinite; }
.kjr-hero h1 { font-size: clamp(19px, 2.5vw, 24px); font-weight: 800; color: #fff; margin: 0 0 6px; }
.kjr-hero p { font-size: 12.5px; color: rgba(255,255,255,.9); line-height: 2; margin: 0; }

.kjr-form { display: flex; flex-direction: column; gap: 10px; }
.kjr-form label { font-size: 12px; font-weight: 700; color: var(--kj-ink); }
.kjr-form input, .kjr-form select {
  width: 100%; padding: 11px 14px; border: 2px solid var(--kj-line); border-radius: 12px;
  background: var(--kj-bg); font-size: 13px; outline: none; font-family: inherit; color: var(--kj-ink);
  height: auto; line-height: 1.7;
}
/* حالت فوکوس حذف شد — .kjr-form input:focus */
.kjr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kjr-date { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.kjr-form .kj-btn { margin-top: 4px; }

.kjr-public { display: flex; flex-direction: column; gap: 8px; }
.kjr-pub-item { margin: 0; }
.kjr-pub-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--kj-bg); border: 1.5px solid var(--kj-line); border-radius: 13px;
  padding: 10px 14px; font-family: inherit; transition: all .2s; text-align: right;
}
.kjr-pub-btn:hover { border-color: var(--kj-teal); background: #fff; }
.kjr-pub-emoji { font-size: 20px; }
.kjr-pub-name { font-size: 13px; font-weight: 700; color: var(--kj-ink); flex: 1; }
.kjr-pub-add { font-size: 11.5px; font-weight: 800; color: var(--kj-teal); white-space: nowrap; }

.kjr-list-box { margin-bottom: 0; }
.kjr-list { display: flex; flex-direction: column; gap: 8px; }
.kjr-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--kj-line); border-radius: 14px; background: #fff;
}
.kjr-item-emoji { font-size: 24px; flex-shrink: 0; }
.kjr-item-info { flex: 1; min-width: 0; }
.kjr-item-info b { display: block; font-size: 14px; color: var(--kj-ink); }
.kjr-item-info span { font-size: 12px; color: var(--kj-muted); }
.kjr-soon { color: var(--kj-teal) !important; font-weight: 700; }
.kjr-del {
  width: 32px; height: 32px; border-radius: 50%; background: var(--kj-bg); color: #C7BCC9;
  display: flex; align-items: center; justify-content: center; text-decoration: none !important;
  font-size: 13px; flex-shrink: 0; transition: all .2s;
}
.kjr-del:hover { background: #FDE3E3; color: #C22525 !important; }

@media (max-width: 560px) { .kjr-row2 { grid-template-columns: 1fr; } }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 991px) {
  .kja-wrap { grid-template-columns: minmax(0, 460px); }
  .kja-side-note { display: none; }
  .kjk-layout { grid-template-columns: 1fr; }
  .kjk-summary { position: static; }
}
@media (max-width: 640px) {
  .kjk-item { flex-wrap: wrap; }
  .kjk-info { flex-basis: calc(100% - 108px); }
  .kjk-actions { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
  .kja-card { padding: 26px 20px; }
}

/* ============================================================
   ناحیه حساب کاربری (kjac) — داشبورد، سفارش‌ها، آدرس‌ها، ویرایش
   ============================================================ */
.kjac { background: var(--kj-bg); padding-block: 4px 46px; }
.kjac *, .kjac *::before, .kjac *::after { box-sizing: border-box; }
.kjac a { text-decoration: none !important; }
.kjac h1, .kjac h2, .kjac h3, .kjac h4, .kjac p { margin: 0; }
.kjac img { max-width: 100%; }

.kjac-layout { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }

/* ---------- سایدبار ---------- */
.kjac-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.kjac-profile {
  background: linear-gradient(135deg, #F5426C, #ff7d9f); color: #fff;
  border-radius: 18px; padding: 20px 18px; text-align: center;
  box-shadow: 0 10px 26px rgba(245, 66, 108, .22);
}
.kjac-avatar {
  width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
}
.kjac-pname { font-size: 15.5px; font-weight: 800; line-height: 1.7; word-break: break-word; }
.kjac-pphone { font-size: 12.5px; opacity: .9; direction: ltr; margin-top: 2px; }

.kjac-nav { background: #fff; border: 1px solid var(--kj-line); border-radius: 18px; padding: 8px; }
.kjac-nav a {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px;
  color: var(--kj-ink); font-size: 14px; font-weight: 600; transition: background .18s, color .18s;
}
.kjac-nav a svg { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.kjac-nav a:hover { background: #fdeef2; color: var(--kj-primary-text); }
.kjac-nav a.active { background: var(--kj-primary); color: #fff; }
.kjac-nav a.kjac-exit { color: #b4304c; }
.kjac-nav a.kjac-exit:hover { background: #fdeef2; }
.kjac-nav-sep { height: 1px; background: var(--kj-line); margin: 6px 10px; }

/* ---------- محتوا ---------- */
.kjac-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.kjac-card { background: #fff; border: 1px solid var(--kj-line); border-radius: 18px; padding: 22px; }
.kjac-title { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; color: var(--kj-ink); margin-bottom: 18px !important; }
.kjac-title .kjac-bar { width: 5px; height: 21px; border-radius: 4px; background: linear-gradient(#F5426C, #ff7d9f); display: inline-block; }
.kjac-sub { font-size: 13px; color: var(--kj-muted); line-height: 2; }

/* کارت‌های میان‌بر داشبورد */
.kjac-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kjac-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1px solid var(--kj-line); border-radius: 16px; padding: 20px 12px;
  text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.kjac-tile:hover { transform: translateY(-4px); border-color: #f5b6c8; box-shadow: 0 10px 24px rgba(245, 66, 108, .12); }
.kjac-tile-ic {
  width: 46px; height: 46px; border-radius: 14px; background: #fdeef2; color: var(--kj-primary-text);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.kjac-tile b { font-size: 14px; font-weight: 700; color: var(--kj-ink); }
.kjac-tile span { font-size: 11.5px; color: var(--kj-muted); }

/* آمار */
.kjac-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kjac-stat { background: #FAF6F3; border-radius: 14px; padding: 15px; text-align: center; }
.kjac-stat b { display: block; font-size: 20px; font-weight: 800; color: var(--kj-primary-text); font-variant-numeric: tabular-nums; }
.kjac-stat span { font-size: 12px; color: var(--kj-muted); }

/* ---------- جدول‌ها (سفارش‌ها) ---------- */
.kjac-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kjac-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.kjac-table th {
  background: #FAF6F3; color: var(--kj-muted); font-weight: 700; font-size: 12.5px;
  padding: 12px 10px; text-align: right; white-space: nowrap;
}
.kjac-table th:first-child { border-radius: 0 12px 12px 0; }
.kjac-table th:last-child { border-radius: 12px 0 0 12px; }
.kjac-table td { padding: 14px 10px; border-bottom: 1px solid var(--kj-line); color: var(--kj-ink); vertical-align: middle; }
.kjac-table tr:last-child td { border-bottom: 0; }
.kjac-table tr:hover td { background: #fffafb; }
.kjac-oid { font-weight: 800; color: var(--kj-primary-text); font-variant-numeric: tabular-nums; }
.kjac-price { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

.kjac-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #eef1f6; color: #55607a;
}
.kjac-badge.ok { background: #e6f7ee; color: #17794a; }
.kjac-badge.wait { background: #fff4e0; color: #a76a08; }
.kjac-badge.no { background: #fdeaea; color: #b32d2d; }

.kjac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  border: 0; cursor: pointer; font-family: inherit; transition: all .2s; white-space: nowrap;
}
.kjac-btn-primary { background: var(--kj-primary); color: #fff !important; }
.kjac-btn-primary:hover { filter: brightness(1.07); box-shadow: 0 8px 20px rgba(245, 66, 108, .3); }
.kjac-btn-ghost { background: #fff; color: var(--kj-ink) !important; border: 1px solid var(--kj-line); }
.kjac-btn-ghost:hover { border-color: var(--kj-primary); color: var(--kj-primary-text) !important; }
.kjac-btn-sm { padding: 7px 14px; font-size: 12.5px; }
.kjac-btn-danger { background: #fdeaea; color: #b32d2d !important; }
.kjac-btn-danger:hover { background: #b32d2d; color: #fff !important; }
.kjac-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- فرم‌ها ---------- */
.kjac-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.kjac-fld { display: flex; flex-direction: column; gap: 7px; }
.kjac-fld.full { grid-column: 1 / -1; }
.kjac-fld label { font-size: 13px; font-weight: 700; color: var(--kj-ink); }
.kjac-fld label .req { color: var(--kj-primary-text); }
.kjac-fld input[type="text"], .kjac-fld input[type="tel"], .kjac-fld input[type="email"],
.kjac-fld input[type="password"], .kjac-fld select, .kjac-fld textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--kj-line); border-radius: 12px;
  font-family: inherit; font-size: 14px; color: var(--kj-ink); background: #fff; transition: border-color .2s, box-shadow .2s;
}
/* حالت فوکوس حذف شد — .kjac-fld input:focus, .kjac-fld select:focus, .kjac-fld textarea:focus */
.kjac-fld input[readonly], .kjac-fld input:disabled { background: #f6f6f8; color: var(--kj-muted); cursor: not-allowed; }
.kjac-fld textarea { min-height: 90px; resize: vertical; }
.kjac-err { font-size: 12px; color: #b32d2d; }
.kjac-fld input.err, .kjac-fld select.err { border-color: #e35d5d; }

/* ---------- هشدارها ---------- */
.kjac-alert {
  display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-radius: 13px;
  font-size: 13.5px; font-weight: 600; line-height: 1.9;
}
.kjac-alert.ok { background: #e6f7ee; color: #17794a; }
.kjac-alert.err { background: #fdeaea; color: #b32d2d; }
.kjac-alert.info { background: #eef4ff; color: #2a5299; }

/* ---------- خالی ---------- */
.kjac-empty { text-align: center; padding: 40px 20px; }
.kjac-empty-emoji { font-size: 42px; display: block; margin-bottom: 12px; }
.kjac-empty b { display: block; font-size: 16px; color: var(--kj-ink); margin-bottom: 6px; }
.kjac-empty p { font-size: 13px; color: var(--kj-muted); margin-bottom: 16px !important; }

/* ---------- آدرس‌ها ---------- */
.kjac-addr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kjac-addr { border: 1.5px solid var(--kj-line); border-radius: 15px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.kjac-addr-body { font-size: 13.5px; color: var(--kj-ink); line-height: 2.1; flex: 1; }
.kjac-addr-acts { display: flex; gap: 8px; }

/* ---------- جزئیات سفارش ---------- */
.kjac-oinfo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kjac-obox { background: #FAF6F3; border-radius: 14px; padding: 15px; }
.kjac-obox h4 { font-size: 13px; font-weight: 800; color: var(--kj-primary-text); margin-bottom: 8px !important; }
.kjac-obox div, .kjac-obox p { font-size: 13px; color: var(--kj-ink); line-height: 2.1; }
.kjac-totals td { padding: 9px 10px; font-size: 13.5px; }
.kjac-pname-cell a { color: var(--kj-ink); font-weight: 600; }
.kjac-pname-cell a:hover { color: var(--kj-primary-text); }
.kjac-pname-cell small { display: block; color: var(--kj-muted); font-size: 11.5px; margin-top: 3px; }

/* ---------- صفحه‌بندی ---------- */
.kjac-pagi { display: flex; justify-content: center; margin-top: 6px; }
.kjac-pagi .pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.kjac-pagi .pagination > li > a, .kjac-pagi .pagination > li > span {
  display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 10px; border-radius: 11px; border: 1px solid var(--kj-line);
  background: #fff; color: var(--kj-ink); font-size: 13.5px; font-weight: 600;
}
.kjac-pagi .pagination > li > a:hover { border-color: var(--kj-primary); color: var(--kj-primary-text); }
.kjac-pagi .pagination > li.active > span { background: var(--kj-primary); border-color: var(--kj-primary); color: #fff; }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 900px) {
  .kjac-layout { grid-template-columns: 1fr; }
  .kjac-side { position: static; }
  .kjac-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .kjac-nav-sep { display: none; }
  .kjac-oinfo, .kjac-addr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kjac-tiles { grid-template-columns: repeat(2, 1fr); }
  .kjac-form { grid-template-columns: 1fr; }
  .kjac-card { padding: 17px 15px; }
  .kjac-nav { grid-template-columns: 1fr; }
  .kjac-stats { grid-template-columns: 1fr; }
}

/* ---------- فرم ثبت‌نام ---------- */
.kja-fielderr {
  font-size: 11.5px; color: #B32D2D; margin: 5px 4px 0; line-height: 1.9;
}
.kja-field input[aria-invalid="true"] { border-color: #B32D2D; }
.kjr-agree {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; color: var(--kj-muted); line-height: 2; margin: 2px 0 0; cursor: pointer;
}
.kjr-agree input { accent-color: var(--kj-primary); width: 17px; height: 17px; margin-top: 5px; flex: none; }
.kjr-agree a { color: var(--kj-primary-text) !important; font-weight: 700; }
.kja-hint a { color: var(--kj-primary-text) !important; font-weight: 700; }

/* حالت انتظار هنگام به‌روزرسانی زنده‌ی سبد — جای عدد خالی می‌ماند
   ولی ارتفاع حفظ می‌شود تا چیدمان نپرد */
.kjk-subtotal.kjk-wait,
.kjk-totals td.kjk-wait { opacity: 0; }
.kjk-item.kjk-busy { pointer-events: none; }
.kjk-item.kjk-busy .kjk-qty { pointer-events: auto; }
.kjk-qty-note { font-size: 11.5px; color: var(--kj-primary-text, #ED1B24); margin-top: 6px; }

/* باکس جدای کد تخفیف، بالای خلاصه سفارش */
.kjk-coupon-card { margin-bottom: 16px; }
.kjk-coupon-card h3 { margin-bottom: 12px; }
.kjk-coupon-card .kjk-coupon { margin: 0; }

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

   مورد علاقه‌ها / باشگاه مشتریان / معرفی دوست / یادآور مناسبت‌ها
   حالا داخل .kjac-main رندر می‌شوند، پس ستون محتوا از ۱۱۴۰px به
   ۸۶۸px کم شده و گریدهایی که برای عرض کامل تنظیم شده بودند
   باید یک ستون کمتر شوند.
   ================================================================== */

/* گرید مورد علاقه‌ها: ۴ ستون در ۸۶۸px یعنی کارت ۲۰۶px — خیلی فشرده */
@media (min-width: 992px) {
  .kjac-main .products_container { grid-template-columns: repeat(3, 1fr) !important; }
}

/* این صفحه‌ها هدر خودشان را دارند؛ فاصله‌ی بالای اولین بلوک تکراری می‌شد */
.kjac-main > .kjc-hero:first-child,
.kjac-main > .kjr-hero:first-child,
.kjac-main > .kjrf-hero:first-child,
.kjac-main > .kjpc-hero:first-child { margin-top: 0; }

/* ---------- سرریز افقی صفحه‌ی باشگاه مشتریان روی موبایل ----------
   ایراد از قبل وجود داشت: ستون گرید مقدار min خودکار (min-content)
   می‌گیرد و ردیف «تبدیل امتیاز» که flex بدون wrap است، عرض کمینه‌ی
   ۴۵۸px تحمیل می‌کرد. با minmax(0,1fr) ستون اجازه‌ی کوچک‌شدن پیدا
   می‌کند و ردیف هم می‌شکند. */
@media (max-width: 768px) {
  .kjpc-grid { grid-template-columns: minmax(0, 1fr); }
  .kjpc-box  { min-width: 0; }
  .kjpc-input-row { flex-wrap: wrap; }
  .kjpc-input-row > * { min-width: 0; }
  .kjpc-input-row input { flex: 1 1 100%; width: 100%; }
}

/* ---------- حد پایین/بالای تعداد در سبد خرید (شهریور ۱۴۰۵) ----------
   همان رفتار صفحه‌ی محصول. pointer-events عمداً خاموش نمی‌شود تا
   کلیک روی دکمه‌ی کم‌رنگ، پیام دلیل را نشان بدهد. */
.kjk-qty-btn.kjk-qty-off {
  opacity: .35;
  cursor: not-allowed;
}
.kjk-qty-note {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--kj-primary-text, #ED1B24);
  margin-top: 6px;
  line-height: 1.7;
}

/* یادداشت حد تعداد داخل .kjk-actions است که یک ردیف flex افقی است؛
   بدون این، متن به عرض ۳۸px فشرده می‌شد و از کارت بیرون می‌زد
   (اندازه‌گیری: لبه‌ی چپ یادداشت روی ۰ در برابر ۲۰ برای خود ردیف). */
.kjk-actions { flex-wrap: wrap; }
.kjk-qty-note {
  flex: 1 0 100%;
  width: 100%;
  text-align: start;
}

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

/* ---------- کد تخفیف ----------
   markup ماژول اپن‌کارت (input-group بوت‌استرپ) با markup خودمان
   جایگزین شد؛ این قاعده‌ها همان قاب قبلی را می‌سازند ولی فاصله‌ی
   بین فیلد و دکمه واقعی است، نه چسبیده‌ی input-group. */
.kjk-coupon {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
}
/* گردی و زمینه و اندازه‌ی متن با معیار تسویه یکی شد
   (--kj-radius برابر ۲۰px است، نه ۱۲px). */
.kjk-coupon-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--kj-line) !important;
  border-radius: 12px;
  background: var(--kj-bg, #FFF9F6);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 13px;
  color: var(--kj-ink);
  height: auto;
  box-shadow: none;
}
.kjk-coupon-input[readonly] { background: var(--kj-bg, #FFF9F6); color: var(--kj-muted); }
.kjk-coupon #kjkCouponBtn,
.kjk-coupon button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
/* حالت «حذف تخفیف» — خنثی، چون کنش برگشتی است نه اصلی */
.kjk-coupon .kjk-coupon-off {
  background: var(--kj-bg, #FFF9F6);
  color: var(--kj-primary-text);
  border: 1px solid var(--kj-line);
}
.kjk-coupon-msg { margin-top: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.8; }
.kjk-coupon-msg.ok  { color: var(--kj-teal, #128C7E); }
.kjk-coupon-msg.err { color: var(--kj-primary-text); }
.kjk-coupon-msg:empty { margin-top: 0; }

@media (max-width: 480px) {
  /* روی صفحه‌ی باریک، دکمه زیر فیلد می‌رود تا هیچ‌کدام له نشوند */
  .kjk-coupon { flex-wrap: wrap; }
  .kjk-coupon-input { flex: 1 1 100%; }
  .kjk-coupon #kjkCouponBtn { flex: 1 1 100%; }
}

/* ---------- فاصله‌ی عنوان «سبد خرید» ----------
   استاندارد بقیه‌ی سایت: تیتر بخش ۲۴px با محتوای زیرش فاصله دارد
   (‎.kj-sec-head) و کانتینر ۲۰px تورفتگی افقی دارد. عنوان سبد
   margin-block: 8px 20px داشت و بالایش به بردکرامبِ حذف‌شده چسبیده
   بود. */
/* ‎.kjk-title تنها وزن (۰،۱،۰) دارد و ریست «.kjk h1 { margin: 0 }»
   با وزن (۰،۱،۱) برنده می‌شد — همان تله‌ای که در صفحه محصول هم بود.
   با پیشوند .kjk وزن به (۰،۲،۰) می‌رسد. */
.kjk .kjk-title { margin-block: 24px 24px; }
@media (max-width: 767px) {
  .kjk .kjk-title { margin-block: 18px 18px; font-size: 20px; }
}

/* ---------- مکمل‌ها: فاصله‌ها ----------
   قاعده‌های اینلاین قالب padding: 20px 18px و فاصله‌ی ۴px بین دو متن
   داشتند که با بقیه‌ی کارت‌های سایت (۲۲px و ۶px) نمی‌خواند. */
.kjk-addons { padding: 22px !important; margin-top: 24px !important; }
.kjk-addons h3 { margin: 0 0 6px !important; font-size: 15.5px !important; }
.kjk-addons-sub { margin: 0 0 20px !important; line-height: 1.9 !important; }
@media (max-width: 767px) {
  .kjk-addons { padding: 18px 16px !important; margin-top: 18px !important; }
  .kjk-addons-sub { margin-bottom: 16px !important; }
}

/* ==================================================================
   سبد خرید — بازگرداندن کالای حذف‌شده، کادر ارسال، نوار چسبان موبایل
   (شهریور ۱۴۰۵ — موارد ۱، ۲ و ۳ بررسی UI/UX سبد)
   ================================================================== */

/* ---------- ۱) پیام موقت «حذف شد / بازگرداندن» ---------- */
.kjk-toast {
  position: fixed;
  right: 16px; left: 16px; bottom: 18px;
  /* بالای نوار چسبان (۹۸۰) ولی زیر کشوی منو (۹۹۰ به بالا) */
  z-index: 988;
  margin: 0 auto;
  max-width: 460px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 14px;
  border-radius: 14px;
  background: #241820;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font-size: 13px; line-height: 1.9;
  /* visibility هم لازم است: بدون آن، پیامِ پنهان همچنان کلیک‌ها را
     می‌گیرد و روی موبایل جلوی دکمه‌ی تسویه را می‌بندد. */
  transform: translateY(150%);
  opacity: 0;
  visibility: hidden;
  transition: transform .25s ease, opacity .25s ease, visibility .25s;
}
.kjk-toast.kjk-toast-on { transform: translateY(0); opacity: 1; visibility: visible; }
.kjk-toast-txt { flex: 1; min-width: 0; }
.kjk-toast-undo {
  flex: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 800;
  color: #FF9DB6;
  /* ناحیه‌ی لمسی ۴۴px، بدون اینکه دکمه درشت دیده شود */
  min-height: 44px; padding-inline: 12px; border-radius: 10px;
}
.kjk-toast-undo:hover { background: rgba(255, 255, 255, .13); color: #FFC2D2; }
.kjk-toast-undo[disabled] { opacity: .55; cursor: default; }
.kjk-toast-x {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, .7); font-size: 13px;
  width: 44px; height: 44px; border-radius: 10px;
}
.kjk-toast-x:hover { background: rgba(255, 255, 255, .13); color: #fff; }

/* ---------- ۲) کادر ارسال در خلاصه‌ی سفارش ---------- */
.kjk-ship {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--kj-line);
}
.kjk-ship-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.kjk-ship-head svg { width: 17px; height: 17px; color: var(--kj-primary-text); flex: none; }
.kjk-ship-head b { font-size: 13px; font-weight: 800; color: var(--kj-ink); }
/* قاعده‌ی سراسری «p { margin-bottom: 0 !important }» در template.css
   هر مقدار غیر‌important را می‌خورد — همان تله‌ی بنر هیرو. */
.kjk-ship-note {
  font-size: 12px; color: var(--kj-muted); line-height: 2;
  margin: 0 0 10px !important;
}
.kjk-ship-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kjk-ship-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--kj-muted); }
.kjk-ship-list li b { color: var(--kj-ink); font-weight: 700; white-space: nowrap; }
.kjk-ship-list li i { font-style: normal; opacity: .75; font-size: 11px; }
.kjk-ship-list li.kjk-ship-free {
  display: block; color: var(--kj-teal, #128C7E); font-weight: 700; font-size: 11.5px;
  margin-top: -2px;
}

/* ---------- ۳) نوار چسبان موبایل ---------- */
.kjk-stickybar {
  position: fixed; inset-inline: 0; bottom: 0;
  z-index: 980;                       /* زیر کشوی منو (۹۹۰) */
  display: none;
  align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid var(--kj-line);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
  transform: translateY(100%);
  transition: transform .22s ease;
}
.kjk-sb-total { flex: 0 0 auto; line-height: 1.5; }
.kjk-sb-total small { display: block; font-size: 10.5px; color: var(--kj-muted); font-weight: 600; }
.kjk-sb-total b { font-size: 16px; font-weight: 800; color: var(--kj-primary-text); white-space: nowrap; }
.kjk-sb-btn {
  flex: 1; min-height: 46px; border-radius: 999px; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

@media (max-width: 991px) {
  .kjk-stickybar { display: flex; }
  .kjk-stickybar.kjk-sb-on { transform: translateY(0); }
  body.kjk-has-sticky { padding-bottom: 76px; }
  /* دکمه‌ی شناور واتساپ (bottom: 22px، z-index: 900) درست زیر نوار
     می‌افتاد و نوار رویش را می‌پوشاند — همان چیزی که در صفحه‌ی محصول
     هم پیش آمد. */
  body.kjk-has-sticky .kj-wa-float { bottom: 92px; transition: bottom .22s ease; }
  body.kjk-has-sticky [class*="goftino"],
  body.kjk-has-sticky #goftino_w { bottom: 92px !important; }
  /* پیام موقت باید بالای نوار بنشیند، نه پشتش */
  body.kjk-has-sticky .kjk-toast { bottom: 84px; }
}

/* ==================================================================
   سبد خرید — اندازه‌ی ناحیه‌ی لمسی  (مورد ۵ بررسی UI/UX)

   ⚠ فقط موبایل. نسخه‌ی دسکتاپ عمداً دست‌نخورده مانده و همان
   اندازه‌های قبلی فایل پایه را دارد (دکمه‌های ۳۰px، کادر تعداد ۳۸px،
   حذف ۵۶×۲۵). دلیلش سلیقه‌ی صاحب سایت بود: با ۴۴px، ستون کنترل‌ها
   روی دسکتاپ درشت و ناهماهنگ می‌شد. روی دسکتاپ ماوس دقت بالایی
   دارد و حداقل ۴۴px عملاً یک الزام لمسی است، پس هزینه‌ی این
   استثنا پایین است.

   روی موبایل حداقل ۴۴×۴۴ رعایت می‌شود، چون آنجا واقعاً با انگشت
   کار می‌کنند و دکمه‌های ۳۰px خطای لمس می‌دادند.
   ================================================================== */

@media (max-width: 640px) {

  /* ---------- کنترل تعداد ----------
     ۴۴px روی خودِ دکمه، نه روی کادر دربرگیرنده: چیزی که ضربه را
     می‌گیرد همین دکمه است. padding کادر از ۳ به ۲ کم شد تا ارتفاع
     نهایی پیل ۵۲px بماند و در ردیف جا شود. */
  .kjk-qty-btn { width: 44px; height: 44px; font-size: 17px; }
  .kjk-qty-val { width: 36px; min-height: 44px; padding-block: 0; }
  .kjk-qty { padding: 2px 3px; }

  /* ---------- دکمه‌ی حذف ---------- */
  .kjk-remove { min-height: 44px; padding: 4px 6px; }

  /* ---------- کد تخفیف و افزودن پیشنهادها ---------- */
  .kjk-coupon-input { min-height: 44px; }
  .kjk-coupon #kjkCouponBtn,
  .kjk-coupon button { min-height: 44px; }
  .kjkAddonAdd, .kjk-addon-btn { min-height: 44px; }
  .kjk-addon-name { min-height: 44px; }

  /* ---------- پیوندهای متنی: ناحیه‌ی لمسی بدون تغییر ظاهر ----------
     padding و margin عمداً هم‌اندازه و قرینه‌اند، پس جعبه‌ی عنصر ۲۰px
     بزرگ‌تر می‌شود ولی فضایی که اشغال می‌کند دقیقاً همان قبلی می‌ماند
     و هیچ‌چیز جابه‌جا نمی‌شود. */
  .kjk-name {
    padding-block: 10px;
    margin-block: -10px;
    /* بدون این، ناحیه‌ی گسترده‌شده تا انتهای ردیف کشیده می‌شد و روی
       دکمه‌های کناری می‌افتاد. */
    width: fit-content;
    max-width: 100%;
  }
  .kjk-continue {
    display: inline-flex; align-items: center;
    padding-block: 13px;
    margin-block: -13px;
  }

  /* ---------- تعداد، مبلغ و حذف در یک ردیف ----------
     عرض قابل استفاده‌ی ردیف روی گوشی ۳۷۵px حدود ۳۰۱px است:

         پیل تعداد   ۴۴ + ۳۶ + ۴۴ + ۴ فاصله + ۶ padding + ۴ border = ۱۳۸
         حذف                                                        =  ۵۶
         دو فاصله‌ی ۸                                                =  ۱۶
         ────────────────────────────────────────────────────────────────
         باقی‌مانده برای مبلغ                                        =  ۹۱

     مبلغ تنها چیزی است که طولش متغیر است، پس همان تنها چیزی است که
     اجازه‌ی جمع‌شدن دارد.

     flex-basis صفر، نه auto — نکته‌ی اصلی همین است. با flex-wrap: wrap
     مرورگر اول بر اساس اندازه‌ی طبیعی هر آیتم تصمیم می‌گیرد خط کجا
     بشکند و *بعد* داخل هر خط آیتم‌ها را جمع می‌کند. پس آیتمی که خودش
     پهن است اصلاً جمع نمی‌شود؛ به خط بعد پرتاب می‌شود. با basis صفر،
     اندازه‌ی طبیعی مبلغ صفر حساب می‌شود، هیچ‌وقت باعث شکستن خط
     نمی‌شود، و مبلغ‌های خیلی بلند داخل ستون خودشان دو خطی می‌شوند.

     (اندازه‌گیری: با flex: 0 1 auto ردیف روی ۴۵,۰۰۰,۰۰۰ تومان
      می‌شکست؛ با این مقدار تا ۱,۲۳۴,۵۶۷,۸۹۰ تومان هم یک ردیف می‌ماند.) */
  .kjk-actions { gap: 8px; }
  .kjk-subtotal {
    font-size: 13.5px;
    white-space: normal;
    min-width: 0;
    flex: 1 1 0;
    text-align: center;
  }
}

/* ==================================================================
   سبد خرید — کنتراست، بستن پیام‌ها، ترتیب عنوان‌ها
   (موارد ۷، ۸ و ۱۰ بررسی UI/UX)
   ================================================================== */

/* ---------- ۷) کنتراست متن‌های قرمز ----------
   بازنویسی موضعی این صفحه حذف شد: مقدار ‎#C4141B‎ حالا به‌صورت
   سراسری روی ‎:root‎ در kdm-theme.css نشسته، پس سبد خرید هم مثل بقیه‌ی
   سایت خودبه‌خود همان را می‌گیرد و لازم نیست دو جا نگه‌داری شود.

   دو اصلاح دیگرِ همین بند (رنگ دکمه‌ی «+ افزودن» و قیمت مکمل‌ها)
   داخل بلوک style خودِ cart.tpl هستند، چون قاعده‌های اصلی‌شان هم
   آنجا بودند. */

/* ---------- ۸) نوارهای پیام: دکمه‌ی بستن ---------- */
.kja-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: opacity .2s ease, transform .2s ease;
}
.kja-alert > span { flex: 1; min-width: 0; }
.kja-alert-x {
  flex: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: .6;
  font-size: 13px;
  line-height: 1;
  /* ناحیه‌ی لمسی ۴۴px مثل بقیه‌ی کنترل‌های صفحه؛ margin منفی تا
     ارتفاع خودِ نوار را زورکی بالا نبرد. */
  width: 44px;
  height: 44px;
  margin: -11px -10px -11px 0;
  border-radius: 10px;
}
.kja-alert-x:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.kja-alert.kja-alert-out { opacity: 0; transform: translateY(-6px); }

/* ---------- ۱۰) ترتیب عنوان‌ها ----------
   صفحه از h1 مستقیم به h3 می‌پرید و h2 نداشت. سه عنوان به h2 تبدیل
   شدند، پس قاعده‌های استایلشان هم باید h2 را بگیرند.

   ترتیب این دو بلوک مهم است: ریست ‎.kjk h2‎ وزن (۰،۱،۱) دارد و
   ‎.kjk-sum-card h2‎ هم (۰،۱،۱) — پس ریست باید *اول* بیاید وگرنه
   margin-bottom‌ها را پاک می‌کند. همان تله‌ای که در ‎.kjp h2‎ بود. */
.kjk h2 { margin: 0; }

.kjk-sum-card h2 {
  font-size: 15.5px; font-weight: 800; color: var(--kj-ink); margin-bottom: 14px;
}
.kjk-coupon-card h2 { margin-bottom: 12px; }
.kjk-addons h2 { margin: 0 0 6px !important; font-size: 15.5px !important; }

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

/* ---------- عنوان «سبد خرید» مثل تیترهای صفحه اصلی ----------
   تیتر بخش‌های صفحه اصلی (.kj-sec-title) یک نوار گرادیانی ۶×۲۷ کنار
   متن دارد. اینجا به‌جای دست‌زدن به markup، همان نوار با ::before
   ساخته می‌شود تا قالب دست‌نخورده بماند.

   اندازه هم دقیقاً همان clamp تیترهای صفحه اصلی است. */
.kjk .kjk-title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(19px, 2.5vw, 25px);
  font-weight: 800;
  color: var(--kj-ink);
}
.kjk .kjk-title::before {
  content: '';
  flex: none;
  width: 6px;
  height: 27px;
  border-radius: 4px;
  background: var(--kj-grad, linear-gradient(135deg, #D42A57, #C64A2F));
}

/* ---------- ضخامت حاشیه‌ی کنترل تعداد ----------
   ۱px = همان ضخامت فیلدهای گزینه در صفحه محصول (input.kjp-input).
   قبلاً ۲px بود و کنار فیلدهای نازک، درشت و ناهماهنگ دیده می‌شد. */
.kjk-qty { border-width: 1px; }

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

/* --- ۱) عنوان با استاندارد سایت ---
   ۱۸px با نوار ۵×۲۱ بود؛ عنوان بخش در بقیه‌ی سایت
   clamp(19px…25px) با نوار ۶×۲۷ است. */
.kjac-title { font-size: clamp(19px, 2.5vw, 25px); gap: 11px; }
.kjac-title .kjac-bar { width: 6px; height: 27px; }

/* --- ۲) کارت: گردی و padding روی مقیاس سایت ---
   گردی ۱۸px بود (استاندارد ۲۰px) و padding ۲۲px که در مقیاس ۸
   نمی‌گنجید. */
.kjac-card { border-radius: var(--kj-radius, 20px); padding: 24px; }

/* --- ۳) دکمه‌ها هم‌اندازه‌ی استاندارد ---
   سه اندازه‌ی مختلف روی یک صفحه بود: ۳۵px/۱۲٫۵ و ۴۰px/۱۳٫۵ در برابر
   استاندارد ۱۴px با padding 12/26. */
.kjac-btn { padding: 12px 26px; font-size: 14px; }
.kjac-btn-sm { padding: 9px 18px; font-size: 13px; }

/* --- ۴) صفحه‌بندی: لکه‌ی قرمزِ li قدیمی ---
   قالب قدیمی روی خودِ <li> زمینه‌ی #B70028 و گردی ۱۰۰٪ می‌گذاشت
   (۳۰×۳۰) در حالی که <a> داخلش ۳۸×۳۸ سفید بود؛ li نُه پیکسل از
   کنار بیرون می‌زد و یک هلال قرمز از پشت دکمه پیدا بود. */
.kjac-pagi .pagination > li {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
  text-align: initial !important;
}
.kjac-pagi .pagination > li > a,
.kjac-pagi .pagination > li > span {
  min-width: 40px; height: 40px; border-radius: 12px;
}
/* حالت فعال قبلاً فقط برای <span> نوشته شده بود، ولی در خروجی واقعی
   یک <a> است، پس هیچ‌وقت اعمال نمی‌شد. */
.kjac-pagi .pagination > li.active > a,
.kjac-pagi .pagination > li.active > span {
  background: var(--kj-primary) !important;
  border-color: var(--kj-primary) !important;
  color: #fff !important;
}

/* --- ۵) شناسه سفارش: حالا واقعاً لینک است ---
   قبلاً یک span با رنگ قرمزِ لینک بود که کلیک نمی‌شد. */
/* شماره‌ی سفارش دیگر لینک نیست، پس نباید شبیه لینک هم باشد:
   رنگ برند و زیرخطِ هاور برداشته شد و رنگ متن عادی گرفت. */
.kjac-oid {
  color: var(--kj-ink) !important;
  font-weight: 800; text-decoration: none !important;
  direction: ltr; display: inline-block;
}

/* تعداد اقلام، زیر شماره‌ی سفارش */
.kjac-items {
  display: block; font-size: 11.5px; color: var(--kj-muted);
  margin-top: 3px;
}

/* تاریخ و ساعت، دو سطر */
.kjac-date { display: block; }
.kjac-time { display: block; font-size: 11.5px; color: var(--kj-muted); margin-top: 3px; direction: ltr; }

/* --- ۶) کل ردیف کلیک‌پذیر (کشو را باز می‌کند) --- */
.kjac-table tbody tr.kjac-row { cursor: pointer; }

/* --- ۷) بج «حمل شده» ---
   کلاس ok از قبل سبز بود ولی «حمل شده» در قالب به آن نمی‌رسید؛
   اصلاحش در order_list.tpl انجام شد. */

/* ==================================================================
   --- ۸) موبایل: جدول به کارت تبدیل می‌شود ---
   جدول ۶۰۴px بود داخل ظرف ۳۰۳px، یعنی «جمع» و دکمه‌ی «مشاهده» —
   دو سلول مهم صفحه — بیرون از دید می‌ماندند و هیچ نشانه‌ای هم نبود
   که جدول کشویی است. حالا هر سفارش یک کارت است و همه‌چیزش دیده
   می‌شود.
   ================================================================== */
@media (max-width: 767px) {
  .kjac-table-wrap { overflow: visible; }
  .kjac-table { min-width: 0; display: block; }
  .kjac-table thead { display: none; }
  .kjac-table tbody { display: block; }

  .kjac-table tbody tr {
    display: block;
    background: #fff;
    border: 1px solid var(--kj-line);
    border-radius: 14px;
    padding: 14px 15px;
    margin-bottom: 10px;
  }
  .kjac-table tbody tr:hover td { background: none; }

  /* هر سلول یک سطرِ «برچسب … مقدار».
     اول با display:contents نوشته بودم تا برچسب و مقدار مستقیم خانه‌های
     گرید شوند، ولی سلولی که دو فرزند دارد (شماره + تعداد اقلام، یا
     تاریخ + ساعت) سه خانه اشغال می‌کرد و ریتم دو ستونی را می‌شکست —
     روی صفحه دیده شد که «۷ قلم» به سطر بعد می‌افتاد. حالا مقدارها
     داخل .kjac-v جمع شده‌اند و سلول یک فلکسِ ساده است. */
  .kjac-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border: 0 !important;
    padding: 5px 0 !important;
  }
  .kjac-table td[data-label]::before {
    content: attr(data-label) ":";
    font-size: 12px;
    color: var(--kj-muted);
    white-space: nowrap;
    flex: none;
  }
  .kjac-table .kjac-v { text-align: end; min-width: 0; }

  /* دکمه: تمام‌عرض، ته کارت */
  .kjac-table td.kjac-td-act { display: block; margin-top: 9px; padding: 0 !important; }
  .kjac-table td.kjac-td-act .kjac-btn { width: 100%; }

  /* در نمای کارتی، تعداد اقلام و ساعت کنار مقدار می‌نشینند نه زیرش */
  .kjac-items { display: inline; margin: 0 0 0 7px; }
  .kjac-time { display: inline; margin: 0 0 0 7px; }
}

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

/* --- تاریخ و ساعت با خط تیره کنار هم ---
   قبلاً ساعت زیر تاریخ می‌رفت. حالا «۱۴۰۵/۰۴/۳۰ - ۲۱:۵۵».
   جداکننده با ::before گذاشته شده تا در قالب تکرار نشود و اگر ساعتی
   نبود، خط تیره‌ی سرگردان هم نماند. */
.kjac-date { display: inline; }
.kjac-time { display: inline; margin: 0; }
.kjac-time::before { content: " - "; color: var(--kj-muted); }

/* --- فاصله بعد از دونقطه‌ی برچسب‌ها ---
   در جعبه‌های «اطلاعات سفارش»، «پرداخت و ارسال» و … برچسب و مقدار
   بدون هیچ فاصله‌ای به هم چسبیده بودند:
   «تاریخ ثبت سفارش:۱۴۰۵/۰۴/۳۰». */
.kjac-obox div b,
.kjac-obox p b { margin-inline-end: 6px; }

/* بج وضعیت داخل جعبه‌ی اطلاعات، هم‌تراز متنِ کنارش بنشیند */
.kjac-obox .kjac-badge { vertical-align: middle; }

/* ==================================================================
   صفحه یادآور مناسبت‌ها — رفع ایرادهای گزارش (شهریور ۱۴۰۵)
   ================================================================== */

/* --- ۷) فیلدها با استاندارد فیلدهای سایت ---
   هر چهار فیلد حاشیه‌ی ۲px داشتند (استاندارد ۱px) و ارتفاعشان ۵۳px
   می‌شد؛ فیلدهای تسویه‌حساب ۵۲px‌اند. padding عمودی یک پیکسل کم شد
   تا با آن‌ها یکی شود. */
/* مقادیر مو‌به‌مو از فیلد صفحه‌ی تسویه‌حساب: padding 13/15 با
   line-height 1.5 دقیقاً ارتفاع ۵۲px می‌دهد. با ۱۲px و line-height
   ارثی ۱٫۷ ارتفاع ۵۳px می‌شد که یک پیکسل با معیار فرق داشت. */
.kjr-form input,
.kjr-form select {
  border-width: 1px;
  padding: 13px 15px;
  line-height: 1.5;
}
/* select ارتفاعش را از line-height نمی‌گیرد و با همان padding سه
   پیکسل بلندتر از input درمی‌آمد (۵۵ در برابر ۵۲). ارتفاع صریح
   می‌گیرد تا چهار فیلد فرم دقیقاً هم‌قد باشند. */
.kjr-form select { height: 52px; padding-block: 0; }

/* --- ۸) گردی هدر روی مقیاس سایت ---
   ۲۴px بود، یعنی سومین عدد متفاوت در سه صفحه‌ی حساب کاربری
   (۲۰ سفارش‌ها / ۲۲ علاقه‌مندی‌ها / ۲۴ یادآور). */
.kjr-hero { border-radius: var(--kj-radius); }

/* --- ۹) عنوان‌ها با نوار رنگی ---
   «یادآور شخصی جدید»، «مناسبت‌های پیش رو» و «یادآورهای من» هر سه
   بدون نوار بودند، در حالی که عنوان‌های صفحه‌ی سفارش‌ها نوار دارند. */
.kjpc-box h3 {
  display: flex; align-items: center; gap: 10px;
}
.kjpc-box h3::before {
  content: ""; flex: none;
  width: 6px; height: 22px; border-radius: 4px;
  background: var(--kj-grad, linear-gradient(#F5426C, #ff7d9f));
}
/* هدر سبزِ صفحه هم نوار می‌گیرد، ولی سفید تا روی زمینه‌ی سبز دیده شود */
.kjr-hero h1 { display: flex; align-items: center; gap: 11px; }
.kjr-hero h1::before {
  content: ""; flex: none;
  width: 6px; height: 27px; border-radius: 4px; background: #fff;
}

/* --- ۱۰) دکمه‌ها هم‌شکل ---
   «ثبت یادآور» قرص ۴۸px بود و «+ یادم بنداز» مستطیلِ گرد ۴۲px با
   گردی ۱۳px — نه اندازه یکی بود نه شکل. هر دو قرص می‌شوند و ارتفاع
   دکمه‌ی کوچک روی ۴۰px استاندارد می‌نشیند. */
.kjr-pub-btn {
  border-radius: 999px;
  border-width: 1px;
  padding: 9px 16px;
}
/* دکمه‌ی ثبت دست‌نخورده روی ۴۸px می‌ماند: دکمه‌ی اصلی فرم است و
   بزرگ‌تر بودنش از چیپِ «یادم بنداز» سلسله‌مراتب درستی است. آنچه
   ایراد داشت شکلشان بود که هر دو حالا قرص‌اند. */

/* ==================================================================
   کشوی سفارش در فهرست «سفارش‌های من»  (شهریور ۱۴۰۵)
   ------------------------------------------------------------------
   «مشاهده» به‌جای رفتن به صفحه‌ی دیگر، زیر همان ردیف باز می‌شود.
   ردیف کشو یک <tr> واقعی است با colspan، پس ساختار جدول نمی‌شکند و
   در نمای کارتیِ موبایل هم درست پایینِ کارت می‌نشیند.
   ================================================================== */

/* --- دکمه‌ی مشاهده / بستن --- */
.kjac-toggle { gap: 6px; }
.kjac-toggle-ic { width: 15px; height: 15px; transition: transform .22s; }
.kjac-toggle.is-open {
  border-color: var(--kj-primary);
  color: var(--kj-primary-text) !important;
}
.kjac-toggle.is-open .kjac-toggle-ic { transform: rotate(180deg); }

/* --- ردیف کشو --- */
.kjac-drawer > td {
  padding: 0 !important;
  border-bottom: 1px solid var(--kj-line);
  background: var(--kj-bg, #FFF9F6);
}
.kjac-dr-wrap { padding: 16px 14px 18px; }

/* باز شدن نرم، بدون پرش */
.kjac-dr-in {
  display: flex; flex-direction: column; gap: 14px;
  animation: kjacDrIn .22s ease;
}
@keyframes kjacDrIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kjac-dr-in { animation: none; }
  .kjac-toggle-ic { transition: none; }
}

.kjac-dr-msg { font-size: 13px; color: var(--kj-muted); margin: 0; padding: 8px 2px; }

/* --- بلوک مشخصات --- */
.kjac-dr-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px; font-size: 13px; color: var(--kj-ink); line-height: 2;
}
.kjac-dr-meta b { color: var(--kj-muted); font-weight: 600; margin-inline-end: 6px; }
.kjac-dr-meta .kjac-badge { vertical-align: middle; }
/* نشانی معمولاً بلند است، پس تمام عرض را می‌گیرد */
.kjac-dr-addr { grid-column: 1 / -1; display: flex; gap: 6px; align-items: flex-start; }
.kjac-dr-addr b { flex: none; }

/* --- عنوان بخش داخل کشو ---
   متن وسط با یک خط مو در دو طرف، تا «اقلام سفارش» از مشخصات پایین‌تر
   جدا دیده شود. رنگ خط و متن از توکن‌های خود سایت می‌آید. */
.kjac-dr-block { display: flex; flex-direction: column; gap: 10px; }
.kjac-dr-head {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 800; color: var(--kj-primary-text);
}
.kjac-dr-head::before,
.kjac-dr-head::after {
  content: ""; flex: 1; height: 1px; background: var(--kj-line);
}
.kjac-dr-head span { flex: none; }

/* --- اقلام: هر کالا یک کارت جدا ---
   قبلاً یک جدول یکپارچه بود؛ حالا هر قلم کارت مستقل دارد تا مثل
   فاکتور خوانده شود و تصویر کالا هم جا بگیرد. */
.kjac-dr-items { display: flex; flex-direction: column; gap: 9px; }

.kjac-dr-item {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--kj-line); border-radius: 12px;
  padding: 10px 12px; font-size: 13px;
}

.kjac-dr-thumb {
  width: 58px; height: 58px; border-radius: 10px; overflow: hidden;
  background: var(--kj-bg, #FFF9F6); border: 1px solid var(--kj-line);
  display: flex; align-items: center; justify-content: center;
}
.kjac-dr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kjac-dr-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kjac-dr-name { font-weight: 600; color: var(--kj-ink); line-height: 1.8; }
.kjac-dr-name a { color: var(--kj-ink) !important; text-decoration: none !important; }
.kjac-dr-name a:hover { color: var(--kj-primary-text) !important; }
.kjac-dr-opt {
  font-size: 11.5px; font-weight: 400; color: var(--kj-muted); line-height: 1.8;
}
.kjac-dr-qty { font-size: 12px; color: var(--kj-muted); }
.kjac-dr-price {
  font-weight: 800; color: var(--kj-primary-text);
  white-space: nowrap; font-size: 13.5px;
}

/* --- جمع‌ها --- */
.kjac-dr-totals { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.kjac-dr-totals > div { display: flex; justify-content: space-between; gap: 12px; color: var(--kj-muted); }
.kjac-dr-totals .kjac-dr-final {
  font-size: 14.5px; font-weight: 800; color: var(--kj-ink);
  border-top: 1px solid var(--kj-line); padding-top: 8px; margin-top: 3px;
}
.kjac-dr-totals .kjac-dr-final span:last-child { color: var(--kj-primary-text); }



@media (max-width: 767px) {
  /* در نمای کارتی، ردیف کشو هم باید کارت‌وار باشد نه یک نوار لخت */
  .kjac-table tbody tr.kjac-drawer {
    display: block; background: none; border: 0;
    padding: 0; margin: -6px 0 10px;
  }
  .kjac-drawer > td {
    display: block; background: var(--kj-bg, #FFF9F6);
    border: 1px solid var(--kj-line); border-radius: 14px;
  }
  .kjac-dr-wrap { padding: 14px; }
  .kjac-dr-meta { grid-template-columns: 1fr; gap: 4px; }
  /* روی گوشی تصویر کوچک‌تر می‌شود ولی همان سه ستون می‌ماند؛
     شکستن کارت به دو ردیف، قیمت را از نام دور می‌کرد. */
  .kjac-dr-item { grid-template-columns: 48px 1fr auto; gap: 10px; }
  .kjac-dr-thumb { width: 48px; height: 48px; }
  .kjac-dr-price { font-size: 12.5px; }

}