/* ==========================================================================
   tamirbosch.css — قالب سایت تعمیر بوش  «روزنامه ای / Broadsheet»
   --------------------------------------------------------------------------
   بعد از tehranbosch.css لود می شود.
   tehranbosch.css فقط اسکلت اجزاست و تقریبا کامل توکنی است؛ این فایل
   توکن ها را بازنویسی می کند و روی اجزای اصلی، ظاهر روزنامه ای می نشاند:
   کاغذ گرم، خط کش های مویی، گوشه های تیز، بدون سایه، حروف سریف.

   قاعده کلی: همه چیز با پیشوند .tb-site نوشته شده تا از قواعد فایل پایه
   قوی تر باشد و لازم نباشد جایی !important بگذاریم.
   ========================================================================== */

/* ==========================================================================
   ۱) توکن ها
   ========================================================================== */
:root {
  /* کاغذ و مرکب */
  --tb-paper:        #F3F2F2;
  --tb-paper-2:      #EAE9E9;
  --tb-paper-3:      #F8F4F4;
  --tb-white:        #FFFFFF;
  --tb-ink:          #201E1D;
  --tb-ink-2:        #444141;
  --tb-muted:        #605D5D;
  --tb-muted-2:      #7D7979;
  --tb-faint:        #9B9797;

  /* خط کش ها */
  --tb-rule:         #D7D3D3;
  --tb-rule-2:       #BAB6B6;
  --tb-rule-3:       #DEDBDB;

  /* رنگ اصلی — آبی چاپ */
  --tb-cyan:         #0088B0;
  --tb-cyan-dark:    #006786;
  --tb-cyan-mid:     #1186AC;
  --tb-cyan-light:   #62C5EE;
  --tb-cyan-wash:    #CBEEFF;
  --tb-cyan-wash-2:  #99E0FF;

  /* رنگ تاکید — سرخابی چاپ */
  --tb-hot:          #D6006C;

  --tb-radius:       2px;
  --tb-wrap:         1180px;
  --tb-gap:          20px;

  /* یک خانواده برای همه چیز — IRANYekanX هم فارسی دارد هم لاتین و
     هم رقم، پس دیگر لازم نیست فونت جدا برای اعداد بگذاریم. */
  --font-fa:  'IRANYekanX', 'Peyda', 'Dana', Tahoma, sans-serif;
  --font-lat: 'IRANYekanX', 'Peyda', Tahoma, sans-serif;

  /* ---- بازنویسی توکن های فایل پایه ---- */
  --tbs-red:         var(--tb-cyan);
  --tbs-red-dark:    var(--tb-cyan-dark);
  --tbs-red-soft:    var(--tb-cyan-wash);
  --tbs-charcoal:    var(--tb-ink);
  --tbs-charcoal-2:  #2B2827;
  --tbs-steel:       var(--tb-paper-2);
  --tbs-offwhite:    var(--tb-paper);
  --tbs-white:       var(--tb-white);
  --tbs-accent:      var(--tb-cyan-dark);
  --tbs-accent-soft: var(--tb-cyan-wash);
  --tbs-text:        var(--tb-ink);
  --tbs-text-muted:  var(--tb-muted);
  --tbs-border:      var(--tb-rule);
  --tbs-radius:      2px;
  --tbs-radius-md:   2px;
  --tbs-shadow-soft: none;
  --tbs-header-h:    64px;
  --tbs-container:   var(--tb-wrap);
  --tbs-transition:  .18s ease;
  --tbs-pattern-red:  rgba(0, 136, 176, .05);
  --tbs-pattern-line: rgba(32, 30, 29, .07);

  --font-display: var(--font-fa);
  --font-body:    var(--font-fa);

  --brand:      var(--tb-cyan);
  --brand-dark: var(--tb-cyan-dark);
  --accent:     var(--tb-cyan);
  --accent-dark:var(--tb-cyan-dark);
  --text:       var(--tb-ink);
  --text-muted: var(--tb-muted);
  --border:     var(--tb-rule);
  --bg:         var(--tb-white);
  --bg-alt:     var(--tb-paper);
  --container:  var(--tb-wrap);
  --font:       var(--font-fa);
}

/* ==========================================================================
   ۲) پایه
   ========================================================================== */
body.tb-site {
  background: var(--tb-paper);
  color: var(--tb-ink);
  font-family: var(--font-fa);
  font-size: 16px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
}
body.tb-site ::selection { background: var(--tb-cyan-wash); color: var(--tb-ink); }
body.tb-site :focus-visible { outline: 2px solid var(--tb-cyan); outline-offset: 2px; }

body.tb-site a { color: var(--tb-cyan-dark); text-decoration: none; transition: color .15s ease; }
body.tb-site a:hover { color: var(--tb-hot); }

/* عدد ها همیشه لاتین سریف و چپ چین */
/* اعداد و شماره تلفن: خوانایی بر سبک مقدم است — سریف برای رقم های فارسی
   روی صفحه کوچک سخت خوانده می شود، پس رقم ها با همان فونت رابط سایت
   ولی با فاصله و وزن بیشتر چاپ می شوند. */
body.tb-site .tk-num,
body.tb-site .tb-num,
body.tb-site .tk-side-tel,
body.tb-site .tbs-svc-cta-tel span {
  font-family: var(--font-fa);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.06em;
  letter-spacing: .045em;
  direction: ltr;
  unicode-bidi: isolate;
}

body.tb-site h1, body.tb-site h2, body.tb-site h3,
body.tb-site h4, body.tb-site h5, body.tb-site h6 {
  font-family: var(--font-fa);
  font-weight: 700;
  color: var(--tb-ink);
  line-height: 1.75;
  letter-spacing: 0;
}

/* گوشه تیز و بدون سایه در کل سایت */
body.tb-site .tk-btn,
body.tb-site .tbs-card,
body.tb-site .card,
body.tb-site input,
body.tb-site select,
body.tb-site textarea,
body.tb-site button,
body.tb-site .toc-box,
body.tb-site .page-section,
body.tb-site img { border-radius: var(--tb-radius); }
body.tb-site * { box-shadow: none; }

.tb-site .tk-wrap,
.tb-site .container { max-width: var(--tb-wrap); margin-inline: auto; padding-inline: 18px; }

/* ابزارک تیتر روزنامه ای: کیکر کوچک بالای هر بخش */
.tb-kicker {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--tb-cyan-dark);
  border-bottom: 1px solid var(--tb-cyan);
  padding-bottom: 3px;
  margin-bottom: 10px;
}
.tb-rule      { border: 0; border-top: 1px solid var(--tb-rule); margin: 28px 0; }
.tb-rule-thick{ border: 0; border-top: 3px double var(--tb-rule-2); margin: 32px 0; }

/* ==========================================================================
   ۳) دکمه ها
   ========================================================================== */
.tb-site .tk-btn,
.tb-site .tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  font-family: var(--font-fa); font-size: .95rem; font-weight: 600;
  border: 1px solid var(--tb-ink);
  background: transparent; color: var(--tb-ink);
  border-radius: var(--tb-radius);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tb-site .tk-btn:hover,
.tb-site .tb-btn:hover { background: var(--tb-ink); color: var(--tb-paper); }

.tb-site .tk-btn-primary,
.tb-site .tb-btn-primary {
  background: var(--tb-cyan-dark); border-color: var(--tb-cyan-dark); color: #fff;
}
.tb-site .tk-btn-primary:hover,
.tb-site .tb-btn-primary:hover { background: var(--tb-ink); border-color: var(--tb-ink); color: #fff; }

.tb-site .tk-btn-call,
.tb-site .tb-btn-ghost { background: var(--tb-white); border-color: var(--tb-rule-2); color: var(--tb-ink); }
.tb-site .tk-btn-call:hover,
.tb-site .tb-btn-ghost:hover { border-color: var(--tb-ink); background: var(--tb-white); color: var(--tb-hot); }

/* ==========================================================================
   ۴) سربرگ — «سردر روزنامه»
   ========================================================================== */
.tb-site .tk-hdr-brand {
  background: var(--tb-paper);
  border-bottom: 1px solid var(--tb-rule);
}
.tb-site .tk-hdr-brand-in {
  display: flex; align-items: center; gap: 22px;
  min-height: 96px; padding-block: 14px;
}
.tb-site .tk-logo { display: flex; align-items: center; gap: 10px; }
.tb-site .tk-logo img { max-height: 54px; width: auto; }
.tb-site .tk-logo-txt {
  display: block; font-size: 1.7rem; font-weight: 700; color: var(--tb-ink);
  letter-spacing: -.01em; line-height: 1.3;
}
.tb-site .tk-logo-sub {
  display: block; font-size: .76rem; font-weight: 400; color: var(--tb-muted);
  letter-spacing: .08em; margin-top: 2px;
}

.tb-site .tk-search { flex: 1; display: flex; align-items: center; position: relative; max-width: 460px; }
.tb-site .tk-search input {
  width: 100%; padding: 10px 38px 10px 96px;
  background: var(--tb-white); border: 1px solid var(--tb-rule-2);
  font-family: var(--font-fa); font-size: .92rem; color: var(--tb-ink);
}
.tb-site .tk-search input::placeholder { color: var(--tb-faint); }
.tb-site .tk-search input:focus { border-color: var(--tb-cyan); outline: none; }
.tb-site .tk-search-ico { position: absolute; inset-inline-start: 12px; color: var(--tb-faint); font-size: .9rem; }
.tb-site .tk-search button {
  position: absolute; inset-inline-end: 4px; top: 4px; bottom: 4px;
  padding-inline: 16px; background: var(--tb-ink); color: var(--tb-paper);
  border: 0; font-family: var(--font-fa); font-size: .85rem; font-weight: 600; cursor: pointer;
}
.tb-site .tk-search button:hover { background: var(--tb-cyan-dark); }

.tb-site .tk-hdr-side { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
.tb-site .tk-header-tel { display: flex; flex-direction: column; line-height: 1.5; text-align: start; }
.tb-site .tk-header-tel span { font-size: .72rem; color: var(--tb-muted); letter-spacing: .1em; }
.tb-site .tk-header-tel strong { font-size: 1.18rem; color: var(--tb-ink); }
.tb-site .tk-header-tel:hover strong { color: var(--tb-hot); }

/* نوار چسبان منو */
.tb-site .tk-hdr-nav {
  position: sticky; top: 0; z-index: 90;
  background: var(--tb-ink);
  border-bottom: 3px solid var(--tb-cyan);
}
.tb-site .tk-hdr-nav-in { display: flex; align-items: center; gap: 8px; min-height: var(--tbs-header-h); flex-wrap: nowrap; }
.tb-site .tk-nav { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; min-width: 0; overflow: visible; }
.tb-site .tk-nav > li { position: relative; }
.tb-site .tk-nav > li > a {
  display: flex; align-items: center; gap: 5px;
  padding: 0 11px; height: var(--tbs-header-h);
  color: #E8E5E4; font-size: .92rem; font-weight: 500; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
}
.tb-site .tk-nav > li > a:hover { color: #fff; border-bottom-color: var(--tb-cyan-light); background: rgba(255,255,255,.04); }
.tb-site .tk-nav-arr { font-size: .68rem; opacity: .7; }

.tb-site .tk-sub {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 20;
  display: none; grid-template-columns: repeat(var(--cols, 1), minmax(190px, 1fr));
  gap: 0 18px; min-width: 230px; padding: 14px 18px; margin: 0; list-style: none;
  background: var(--tb-white); border: 1px solid var(--tb-rule-2); border-top: 3px solid var(--tb-cyan);
}
.tb-site .tk-nav > li:hover .tk-sub,
.tb-site .tk-nav > li:focus-within .tk-sub { display: grid; }
.tb-site .tk-sub a {
  display: block; padding: 6px 0; font-size: .9rem; color: var(--tb-ink-2);
  border-bottom: 1px dotted var(--tb-rule);
}
.tb-site .tk-sub a:hover { color: var(--tb-hot); }

.tb-site .tk-nav-side { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex: 0 0 auto; flex-wrap: nowrap; }
.tb-site .tk-iconbtn {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255,255,255,.22); color: #EDEBEA; cursor: pointer;
}
.tb-site .tk-iconbtn:hover { border-color: var(--tb-cyan-light); color: #fff; }
.tb-site .tk-nav-cta { background: var(--tb-cyan); border-color: var(--tb-cyan); color: #fff; padding: 9px 16px; white-space: nowrap; line-height: 1.2; }
.tb-site .tk-hdr-cta { white-space: nowrap; line-height: 1.2; }
.tb-site .tk-logo-mini img { max-height: 34px; width: auto; }
@media (max-width: 1180px) {
  .tb-site .tk-nav > li > a { padding: 0 8px; font-size: .87rem; }
  .tb-site .tk-nav-cta { padding: 8px 12px; font-size: .87rem; }
}
.tb-site .tk-nav-cta:hover { background: #fff; border-color: #fff; color: var(--tb-ink); }

.tb-site .tk-logo-mini { display: none; }
.tb-site .tk-logo-mini .tk-logo-txt { font-size: 1.05rem; color: #fff; }
.tb-site .tk-logo-mini .tk-logo-sub { display: none; }
.tb-site.tk-stuck .tk-logo-mini { display: flex; }

.tb-site .tk-hdr-searchdrop { display: none; background: var(--tb-white); border-bottom: 1px solid var(--tb-rule); padding: 14px 18px; }
.tb-site.tk-search-open .tk-hdr-searchdrop { display: block; }
/* نسخه بازشدنی چیدمان جدا دارد: input و دکمه کنار هم، بدون position مطلق */
.tb-site .tk-search-drop {
  position: relative; display: flex; align-items: stretch; gap: 8px;
  max-width: 640px; margin-inline: auto; padding: 0;
}
.tb-site .tk-search-drop .tk-search-ico {
  position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  color: var(--tb-faint); pointer-events: none;
}
.tb-site .tk-search-drop input {
  flex: 1 1 auto; min-width: 0; padding: 11px 38px 11px 12px;
  border: 1px solid var(--tb-rule-2); background: var(--tb-white);
}
.tb-site .tk-search-drop input:focus { border-color: var(--tb-cyan); }
.tb-site .tk-search-drop button {
  position: static; inset: auto; flex: 0 0 auto;
  padding: 0 22px; background: var(--tb-ink); color: var(--tb-paper);
  border: 1px solid var(--tb-ink); font-size: .9rem; font-weight: 600; cursor: pointer;
}
.tb-site .tk-search-drop button:hover { background: var(--tb-cyan-dark); border-color: var(--tb-cyan-dark); }

/* کشوی موبایل */
.tb-site .tk-burger { display: none; width: 40px; height: 40px; background: transparent; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }
.tb-site .tk-burger-bars,
.tb-site .tk-burger-bars::before,
.tb-site .tk-burger-bars::after { display: block; width: 18px; height: 2px; background: #fff; margin-inline: auto; position: relative; }
.tb-site .tk-burger-bars::before { content: ''; position: absolute; top: -6px; }
.tb-site .tk-burger-bars::after  { content: ''; position: absolute; top: 6px; }

.tb-site .tk-drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 200; width: min(88vw, 340px);
  background: var(--tb-paper); border-inline-start: 3px solid var(--tb-cyan);
  overflow-y: auto; padding: 18px;
}
.tb-site .tk-drawer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--tb-rule); }
.tb-site .tk-drawer-close { background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: var(--tb-ink); }
.tb-site .tk-drawer ul { list-style: none; margin: 0; padding: 0; }
.tb-site .tk-drawer > ul > li > a { display: block; padding: 11px 0; font-weight: 600; border-bottom: 1px solid var(--tb-rule); }
.tb-site .tk-drawer ul ul a { display: block; padding: 7px 0 7px 14px; font-size: .9rem; color: var(--tb-muted); border-bottom: 1px dotted var(--tb-rule); }
.tb-site .tk-drawer-search { display: flex; gap: 6px; margin: 14px 0; }
.tb-site .tk-drawer-search input { flex: 1; padding: 9px 10px; border: 1px solid var(--tb-rule-2); background: #fff; font-family: var(--font-fa); }
.tb-site .tk-drawer-search button { padding-inline: 14px; background: var(--tb-ink); color: #fff; border: 0; cursor: pointer; }
.tb-site .tk-drawer-foot { display: grid; gap: 8px; margin-top: 18px; }
.tb-site .tk-drawer-veil { position: fixed; inset: 0; z-index: 190; background: rgba(32,30,29,.5); }
.tb-site .tk-skip-link { position: absolute; inset-inline-start: -9999px; }
.tb-site .tk-skip-link:focus { inset-inline-start: 10px; top: 10px; z-index: 999; background: #fff; padding: 8px 14px; border: 2px solid var(--tb-cyan); }
.tb-site .tk-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ==========================================================================
   ۵) صفحه اول
   ========================================================================== */

/* ---- سردر خبری: تاریخ و شعار، مثل بالای صفحه اول روزنامه ---- */
.tb-dateline {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 0; font-size: .76rem; color: var(--tb-muted);
  border-bottom: 1px solid var(--tb-rule); letter-spacing: .06em;
}
.tb-dateline .tb-dateline-hot { color: var(--tb-hot); font-weight: 600; }

/* ---- هیرو ---- */
.tb-hero { padding: 34px 0 30px; border-bottom: 3px double var(--tb-rule-2); }
.tb-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: start; }
.tb-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.55; margin: 0 0 14px;
  color: var(--tb-ink);
}
.tb-hero h1 em { font-style: normal; color: var(--tb-cyan-dark); border-bottom: 3px solid var(--tb-cyan-wash-2); }
.tb-hero-lead { font-size: 1.06rem; color: var(--tb-ink-2); margin: 0 0 20px; max-width: 60ch; }
.tb-hero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.tb-hero-acts .tb-btn { padding: 13px 24px; font-size: 1rem; }

.tb-hero-facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--tb-rule); padding-top: 14px; }
.tb-hero-facts div {
  flex: 1 1 140px; padding-inline: 14px; border-inline-start: 1px solid var(--tb-rule);
}
.tb-hero-facts div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.tb-hero-facts b { display: block; font-size: 1.5rem; color: var(--tb-cyan-dark); font-family: var(--font-lat); }
.tb-hero-facts span { font-size: .82rem; color: var(--tb-muted); }

/* کارت فرم سریع کنار هیرو */
.tb-hero-card { background: var(--tb-white); border: 1px solid var(--tb-rule-2); border-top: 4px solid var(--tb-cyan); padding: 22px; }
.tb-hero-card h2 { font-size: 1.2rem; margin: 0 0 4px; }
.tb-hero-card p  { font-size: .86rem; color: var(--tb-muted); margin: 0 0 16px; }

/* ---- گرید دستگاه ها ---- */
.tb-sec { padding: 38px 0; border-bottom: 1px solid var(--tb-rule); }
.tb-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.tb-sec-head h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 0; }
.tb-sec-head a  { font-size: .88rem; white-space: nowrap; }

.tb-devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 0; border-top: 1px solid var(--tb-rule); border-inline-start: 1px solid var(--tb-rule); }
.tb-device {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 18px; background: var(--tb-white);
  border-bottom: 1px solid var(--tb-rule); border-inline-end: 1px solid var(--tb-rule);
  transition: background .15s ease;
}
.tb-device:hover { background: var(--tb-cyan-wash); }
.tb-device i { font-size: 1.5rem; color: var(--tb-cyan-dark); }
.tb-device b { font-size: 1rem; color: var(--tb-ink); font-weight: 600; }
.tb-device span { font-size: .82rem; color: var(--tb-muted); line-height: 1.85; }
.tb-device-brands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tb-device-brands a { font-size: .76rem; color: var(--tb-muted); border: 1px solid var(--tb-rule); padding: 1px 7px; }
.tb-device-brands a:hover { border-color: var(--tb-cyan); color: var(--tb-cyan-dark); }

/* ---- چهار قدم ---- */
.tb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: tbstep; }
.tb-step {
  position: relative; padding: 22px 20px; background: var(--tb-white);
  border: 1px solid var(--tb-rule); border-inline-start: 0;
}
.tb-step:first-child { border-inline-start: 1px solid var(--tb-rule); }
.tb-step::before {
  counter-increment: tbstep; content: '0' counter(tbstep);
  display: block; font-family: var(--font-lat); font-size: 1.5rem; color: var(--tb-cyan-light); margin-bottom: 6px;
}
.tb-step h3 { font-size: 1.02rem; margin: 0 0 6px; }
.tb-step p  { font-size: .87rem; color: var(--tb-muted); margin: 0; }

/* ---- چرا ما ---- */
.tb-why { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 26px; }
.tb-why div { padding-inline-start: 14px; border-inline-start: 3px solid var(--tb-cyan-wash-2); }
.tb-why h3 { font-size: .99rem; margin: 0 0 4px; }
.tb-why p  { font-size: .86rem; color: var(--tb-muted); margin: 0; }

/* ---- جدول بازه هزینه ---- */
.tb-price-table { width: 100%; border-collapse: collapse; background: var(--tb-white); }
.tb-price-table th, .tb-price-table td { padding: 12px 14px; border-bottom: 1px solid var(--tb-rule); text-align: start; font-size: .92rem; }
.tb-price-table thead th { background: var(--tb-paper-2); font-size: .84rem; letter-spacing: .04em; color: var(--tb-ink-2); border-bottom: 2px solid var(--tb-rule-2); }
.tb-price-table tbody tr:hover { background: var(--tb-paper-3); }
.tb-price-note { font-size: .82rem; color: var(--tb-muted); margin-top: 10px; }

/* ---- محله ها ---- */
.tb-districts { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-districts a {
  font-size: .87rem; padding: 5px 12px; background: var(--tb-white);
  border: 1px solid var(--tb-rule); color: var(--tb-ink-2);
}
.tb-districts a:hover { border-color: var(--tb-cyan); color: var(--tb-cyan-dark); background: var(--tb-cyan-wash); }

/* ---- نظر مشتری ---- */
.tb-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; }
.tb-quote { padding: 22px; background: var(--tb-white); border: 1px solid var(--tb-rule); border-inline-start: 0; }
.tb-quote:first-child { border-inline-start: 1px solid var(--tb-rule); }
.tb-quote p { margin: 0 0 12px; font-size: .95rem; color: var(--tb-ink-2); }
.tb-quote p::before { content: '«'; color: var(--tb-cyan-light); font-size: 1.5rem; margin-inline-end: 4px; }
.tb-quote footer { font-size: .82rem; color: var(--tb-muted); border-top: 1px dotted var(--tb-rule); padding-top: 8px; }

/* ---- مقالات ---- */
.tb-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.tb-post { display: block; }
.tb-post figure { margin: 0 0 10px; overflow: hidden; background: var(--tb-paper-2); }
.tb-post img { width: 100%; height: 178px; object-fit: cover; display: block; filter: grayscale(.25) contrast(1.05); transition: filter .2s ease, transform .3s ease; }
.tb-post:hover img { filter: none; transform: scale(1.02); }
.tb-post h3 { font-size: 1.04rem; margin: 0 0 6px; color: var(--tb-ink); }
.tb-post:hover h3 { color: var(--tb-hot); }
.tb-post p { font-size: .86rem; color: var(--tb-muted); margin: 0; }
.tb-post time { display: block; font-size: .76rem; color: var(--tb-faint); margin-top: 6px; font-family: var(--font-lat); }

/* ---- نوار پایانی دعوت به اقدام ---- */
.tb-endcta { background: var(--tb-ink); color: var(--tb-paper); padding: 38px 0; }
.tb-endcta-in { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.tb-endcta h2 { color: #fff; font-size: clamp(1.3rem, 2.3vw, 1.8rem); margin: 0 0 6px; }
.tb-endcta p  { color: #C9C5C4; margin: 0; font-size: .95rem; }
.tb-endcta .tb-btn { border-color: #fff; color: #fff; }
.tb-endcta .tb-btn:hover { background: #fff; color: var(--tb-ink); }
.tb-endcta .tb-btn-primary { background: var(--tb-cyan); border-color: var(--tb-cyan); }
.tb-endcta .tb-btn-primary:hover { background: #fff; border-color: #fff; color: var(--tb-ink); }

/* ==========================================================================
   ۶) صفحات داخلی
   ========================================================================== */
.tb-site .breadcrumb { background: var(--tb-paper); border-bottom: 1px solid var(--tb-rule); padding: 10px 0; }
.tb-site .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--tb-muted); }
.tb-site .breadcrumb a { color: var(--tb-muted); }
.tb-site .breadcrumb a:hover { color: var(--tb-cyan-dark); }
.tb-site .breadcrumb .separator { color: var(--tb-faint); margin-inline: 4px; }

.tb-site .tk-layout {
  max-width: var(--tb-wrap); margin-inline: auto; padding: 30px 18px 50px;
  display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 38px; align-items: start;
}
.tb-site .page-article { min-width: 0; background: transparent; padding: 0; border: 0; }

.tb-site .page-h1 {
  font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.6; margin: 0 0 8px;
  padding-bottom: 14px; border-bottom: 3px double var(--tb-rule-2);
}

/* CTA بالای صفحات خدمات */
.tb-site .tbs-svc-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--tb-white); border: 1px solid var(--tb-rule-2); border-inline-start: 4px solid var(--tb-cyan);
  padding: 16px 18px; margin: 18px 0 24px;
}
.tb-site .tbs-svc-cta-text strong { display: block; font-size: 1rem; }
.tb-site .tbs-svc-cta-note { display: block; font-size: .82rem; color: var(--tb-muted); margin-top: 3px; }
.tb-site .tbs-svc-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tb-site .tbs-svc-cta-tel {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 1px solid var(--tb-rule-2); font-family: var(--font-lat); font-size: 1rem; color: var(--tb-ink);
}
.tb-site .tbs-svc-cta-tel:hover { border-color: var(--tb-ink); color: var(--tb-hot); }
.tb-site .tbs-svc-cta-btn {
  padding: 10px 18px; background: var(--tb-cyan-dark); color: #fff; border: 1px solid var(--tb-cyan-dark);
  font-family: var(--font-fa); font-size: .92rem; font-weight: 600; cursor: pointer;
}
.tb-site .tbs-svc-cta-btn:hover { background: var(--tb-ink); border-color: var(--tb-ink); }

/* فهرست مطالب — تک ستونه و کم نقش. جای این بلوک، نسخه نهایی در
   انتهای فایل است (بخش ۱۷) که باید بر فایل پایه غلبه کند. */

/* متن اصلی */
.tb-site .page-content { font-size: 1.02rem; line-height: 2.15; color: var(--tb-ink-2); }
.tb-site .page-content p { margin: 0 0 1.15em; }
.tb-site .page-content h2 {
  font-size: 1.4rem; margin: 1.7em 0 .6em; padding-bottom: 8px;
  border-bottom: 1px solid var(--tb-rule);
}
.tb-site .page-content h3 { font-size: 1.14rem; margin: 1.4em 0 .5em; color: var(--tb-cyan-dark); }
.tb-site .page-content a { border-bottom: 1px solid var(--tb-cyan-wash-2); }
.tb-site .page-content a:hover { border-bottom-color: var(--tb-hot); }
.tb-site .page-content img { max-width: 100%; height: auto; display: block; margin: 22px auto; border: 1px solid var(--tb-rule); }
.tb-site .page-content ul, .tb-site .page-content ol { padding-inline-start: 22px; margin: 0 0 1.15em; }
.tb-site .page-content li { margin-bottom: .4em; }
.tb-site .page-content blockquote {
  margin: 22px 0; padding: 14px 20px; background: var(--tb-white);
  border-inline-start: 4px solid var(--tb-cyan-light); color: var(--tb-ink-2);
}
.tb-site .page-content table { width: 100%; border-collapse: collapse; margin: 22px 0; background: var(--tb-white); }
.tb-site .page-content th, .tb-site .page-content td { border: 1px solid var(--tb-rule); padding: 10px 12px; font-size: .92rem; }
.tb-site .page-content th { background: var(--tb-paper-2); font-weight: 600; }
.tb-site .page-content .more-link { margin-top: 14px; font-size: .9rem; }
.tb-site .page-content .more-link a::after { content: ' ←'; color: var(--tb-cyan); }

/* بخش های صفحه */
.tb-site .page-section { margin: 30px 0; padding: 0; background: transparent; border: 0; }
.tb-site .page-section + .page-section { border-top: 1px solid var(--tb-rule); padding-top: 26px; }
.tb-site .section-title {
  font-size: 1.32rem; margin: 0 0 12px; padding-inline-start: 12px;
  border-inline-start: 4px solid var(--tb-cyan);
}
.tb-site .section-content { font-size: 1.01rem; line-height: 2.15; color: var(--tb-ink-2); }
.tb-site .section-content p { margin: 0 0 1.1em; }
.tb-site .section-content img { max-width: 100%; height: auto; border: 1px solid var(--tb-rule); }

/* سوالات متداول */
.tb-site .tk-faq { border-top: 1px solid var(--tb-rule); }
.tb-site .tk-faq-item { border-bottom: 1px solid var(--tb-rule); background: var(--tb-white); }
.tb-site .tk-faq-h { margin: 0; }
.tb-site .tk-faq-q {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: start;
  padding: 15px 16px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-fa); font-size: 1rem; font-weight: 600; color: var(--tb-ink);
}
.tb-site .tk-faq-q:hover { background: var(--tb-paper-3); color: var(--tb-cyan-dark); }
.tb-site .tk-faq-n { font-family: var(--font-lat); font-size: .84rem; color: var(--tb-cyan); min-width: 22px; }
.tb-site .tk-faq-t { flex: 1; }
.tb-site .tk-faq-i { width: 12px; height: 12px; position: relative; }
.tb-site .tk-faq-i::before,
.tb-site .tk-faq-i::after { content: ''; position: absolute; background: var(--tb-cyan-dark); transition: transform .18s ease; }
.tb-site .tk-faq-i::before { inset-inline: 0; top: 5px; height: 2px; }
.tb-site .tk-faq-i::after  { inset-block: 0; inset-inline-start: 5px; width: 2px; }
.tb-site .tk-faq-q[aria-expanded="true"] .tk-faq-i::after { transform: scaleY(0); }
/* اصلاح — جاوااسکریپت این بخش ارتفاع را با max-height کنترل می کند
   (`ans.style.maxHeight = ...`). من روی همین عنصر `height: 0` گذاشته بودم و
   آن مقدار، مستقل از max-height، پاسخ را برای همیشه بسته نگه می داشت.
   یعنی همان خطی که برای انیمیشن گذاشته بودم، باز شدن سوالات را از کار
   انداخته بود. حالا فقط max-height کنترل می کند. */
.tb-site .tk-faq-a { overflow: hidden; max-height: 0; height: auto; transition: max-height .25s ease; }
.tb-site .tk-faq-a-in { padding: 0 16px 16px; font-size: .94rem; color: var(--tb-ink-2); }

/* لیست زیرصفحه ها */
.tb-site .children-section { margin-top: 34px; padding-top: 22px; border-top: 3px double var(--tb-rule-2); }
.tb-site .children-section .card,
.tb-site .children-section .tbs-card,
.tb-site .children-section li {
  background: var(--tb-white); border: 1px solid var(--tb-rule);
}
.tb-site .children-section a:hover { color: var(--tb-hot); }

/* «سایر خدمات» و «مقالات مرتبط» */
.tb-site .tbs-other-services,
.tb-site .tbs-related { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--tb-rule); }
.tb-site .tbs-other-services h2,
.tb-site .tbs-related h2 { font-size: 1.22rem; margin: 0 0 14px; }

/* بلوک های لینک داخلی که در انتقال ساخته می شوند */
.tb-site .content-banner {
  display: block; margin: 22px 0; padding: 14px 18px;
  background: var(--tb-cyan-wash); border-inline-start: 4px solid var(--tb-cyan);
  font-weight: 600; color: var(--tb-cyan-dark);
}
.tb-site .content-banner:hover { background: var(--tb-cyan-wash-2); color: var(--tb-ink); }

/* ستون کناری — کلاس واقعی پارشال .tk-side است */
.tb-site .tk-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.tb-site .tk-side > * { min-width: 0; }
.tb-site .tk-side ul { list-style: none; margin: 0; padding: 0; }
.tb-site .tk-side img { max-width: 100%; height: auto; }

/* جعبه دعوت به اقدام */
.tb-site .tk-side-cta {
  background: var(--tb-white); border: 1px solid var(--tb-rule-2); border-top: 4px solid var(--tb-cyan);
  padding: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  position: sticky; top: calc(var(--tbs-header-h) + 16px); z-index: 2;
}
.tb-site .tk-side-cta b { font-size: 1.05rem; }
.tb-site .tk-side-cta p { margin: 0; font-size: .86rem; color: var(--tb-muted); }
.tb-site .tk-side-cta .tk-btn { width: 100%; }
.tb-site .tk-side-tel {
  display: block; text-align: center; padding: 9px 12px;
  border: 1px solid var(--tb-rule-2); font-size: 1.12rem; color: var(--tb-ink);
}
.tb-site .tk-side-tel:hover { border-color: var(--tb-ink); color: var(--tb-hot); }
.tb-site .tk-side-warranty {
  display: block; text-align: center; font-size: .8rem; color: var(--tb-muted);
  padding-top: 4px; border-top: 1px dotted var(--tb-rule);
}

/* جعبه های ستون کناری */
.tb-site .tk-side-box { background: var(--tb-white); border: 1px solid var(--tb-rule); border-top: 3px solid var(--tb-ink); padding: 16px 18px; }
.tb-site .tk-side-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--tb-rule);
}
.tb-site .tk-side-h i { color: var(--tb-cyan); font-size: .95rem; }

.tb-site .tk-side-links li { padding: 6px 0; border-bottom: 1px dotted var(--tb-rule); }
.tb-site .tk-side-links li:last-child { border-bottom: 0; }
.tb-site .tk-side-links a { font-size: .89rem; color: var(--tb-ink-2); line-height: 1.9; display: block; }
.tb-site .tk-side-links a:hover { color: var(--tb-hot); }

.tb-site .tk-side-comments li { padding: 10px 0; border-bottom: 1px dotted var(--tb-rule); }
.tb-site .tk-side-comments li:last-child { border-bottom: 0; }
.tb-site .tk-side-comments p { margin: 0 0 5px; font-size: .85rem; color: var(--tb-ink-2); line-height: 1.9; }
.tb-site .tk-side-comments a { font-size: .78rem; color: var(--tb-muted); }
.tb-site .tk-side-cname { font-weight: 600; color: var(--tb-cyan-dark); }

.tb-site .tk-side-posts li { padding: 10px 0; border-bottom: 1px dotted var(--tb-rule); }
.tb-site .tk-side-posts li:last-child { border-bottom: 0; }
.tb-site .tk-side-posts a { display: flex; align-items: flex-start; gap: 10px; }
.tb-site .tk-side-thumb {
  flex: 0 0 68px; width: 68px; height: 52px; overflow: hidden;
  background: var(--tb-paper-2); border: 1px solid var(--tb-rule); display: block;
}
.tb-site .tk-side-thumb img { width: 68px; height: 52px; object-fit: cover; display: block; filter: grayscale(.3); }
.tb-site .tk-side-posts a:hover .tk-side-thumb img { filter: none; }
.tb-site .tk-side-ptitle { flex: 1; font-size: .87rem; line-height: 1.8; color: var(--tb-ink-2); }
.tb-site .tk-side-posts a:hover .tk-side-ptitle { color: var(--tb-hot); }

/* ==========================================================================
   ۷) فرم ها و مدال
   ========================================================================== */
.tb-site input[type="text"], .tb-site input[type="tel"], .tb-site input[type="email"],
.tb-site input[type="search"], .tb-site input[type="number"], .tb-site select, .tb-site textarea {
  width: 100%; padding: 11px 12px; background: var(--tb-white);
  border: 1px solid var(--tb-rule-2); font-family: var(--font-fa); font-size: .95rem; color: var(--tb-ink);
}
.tb-site textarea { min-height: 110px; resize: vertical; }
.tb-site input:focus, .tb-site select:focus, .tb-site textarea:focus { border-color: var(--tb-cyan); outline: none; background: #fff; }
.tb-site label { display: block; font-size: .86rem; font-weight: 600; color: var(--tb-ink-2); margin-bottom: 5px; }
.tb-site .form-row, .tb-site .tk-form-row { margin-bottom: 14px; }
.tb-site .form-note { font-size: .8rem; color: var(--tb-muted); }

.tb-site .tk-modal, .tb-site .tk-request-modal { background: rgba(32,30,29,.6); }
.tb-site .tk-modal-box, .tb-site .tk-request-box {
  background: var(--tb-paper); border: 1px solid var(--tb-rule-2); border-top: 4px solid var(--tb-cyan);
  border-radius: var(--tb-radius);
}

/* ==========================================================================
   ۸) پاورقی
   ========================================================================== */
.tb-site .tk-footer { background: var(--tb-ink); color: #C9C5C4; margin-top: 0; border-top: 4px solid var(--tb-cyan); }
.tb-site .tk-footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 34px;
  padding: 40px 0 30px;
}
.tb-site .tk-footer h3 {
  color: #fff; font-size: 1.02rem; margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.16); letter-spacing: .04em;
}
.tb-site .tk-footer p { font-size: .89rem; line-height: 2.05; color: #B4B0AF; margin: 0; }
.tb-site .tk-footer ul { list-style: none; margin: 0; padding: 0; }
.tb-site .tk-footer li { font-size: .89rem; padding: 5px 0; color: #B4B0AF; }
.tb-site .tk-footer a { color: #D9D5D4; }
.tb-site .tk-footer a:hover { color: var(--tb-cyan-light); }
.tb-site .tk-social { display: flex; gap: 8px; margin-top: 14px; }
.tb-site .tk-social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); color: #D9D5D4;
}
.tb-site .tk-social a:hover { border-color: var(--tb-cyan); color: #fff; background: rgba(0,136,176,.2); }
.tb-site .tk-badges { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); }
.tb-site .tk-badges img { background: #fff; padding: 6px; height: 78px; width: auto; }
.tb-site .tk-footer-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  padding: 14px 0 20px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem; color: #918D8C;
}

/* ==========================================================================
   ۹) نوار پایین موبایل
   ========================================================================== */
.tb-site .tk-mobilebar { display: none; }
@media (max-width: 860px) {
  .tb-site .tk-mobilebar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 120;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--tb-ink); border-top: 3px solid var(--tb-cyan);
  }
  .tb-site .tk-mobilebar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 6px; color: #fff; font-size: .92rem; font-weight: 600;
  }
  .tb-site .tk-mb-form { background: var(--tb-cyan); }
  .tb-site .tk-mobilebar a:hover { color: #fff; }
  body.tb-site { padding-bottom: 54px; }
}

/* ==========================================================================
   ۱۰) واکنش گرا
   ========================================================================== */
@media (max-width: 1080px) {
  .tb-site .tk-layout { grid-template-columns: minmax(0, 1fr); }
  .tb-site .tk-sidebar { position: static; }
  .tb-hero-grid { grid-template-columns: 1fr; }
  .tb-steps { grid-template-columns: repeat(2, 1fr); }
  .tb-steps .tb-step:nth-child(odd) { border-inline-start: 1px solid var(--tb-rule); }
}
@media (max-width: 860px) {
  .tb-site .tk-hdr-brand { display: none; }
  .tb-site .tk-burger { display: block; }
  .tb-site .tk-nav { display: none; }
  .tb-site .tk-logo-mini { display: flex; }
  .tb-site .tk-nav-cta { display: none; }
  .tb-site .tk-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .tb-site .toc-list { columns: 1; }
  .tb-quotes, .tb-devices { grid-template-columns: 1fr; }
  .tb-hero { padding-top: 24px; }
  .tb-endcta-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  body.tb-site { font-size: 15px; }
  .tb-steps { grid-template-columns: 1fr; }
  .tb-steps .tb-step { border-inline-start: 1px solid var(--tb-rule); }
  .tb-hero-facts div { flex-basis: 50%; border-inline-start: 0; padding-inline: 0; }
  .tb-site .tbs-svc-cta { flex-direction: column; align-items: stretch; }
  .tb-site .tbs-svc-cta-actions { flex-direction: column; }
  .tb-dateline { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ==========================================================================
   ۱۱) چاپ
   ========================================================================== */
@media print {
  .tb-site .tk-hdr-nav, .tb-site .tk-hdr-brand, .tb-site .tk-mobilebar,
  .tb-site .tk-sidebar, .tb-site .tbs-svc-cta, .tb-site .tk-footer,
  .tb-endcta, .tb-site .tk-drawer, .tb-site .tk-drawer-veil { display: none; }
  body.tb-site { background: #fff; }
  .tb-site .tk-layout { display: block; padding: 0; }
}

/* ==========================================================================
   ۱۲) آکاردئون سوالات صفحه اول — با <details> بومی، بدون جاوااسکریپت
   ========================================================================== */
.tb-site details.tk-faq-item { background: var(--tb-white); border-bottom: 1px solid var(--tb-rule); }
.tb-site details.tk-faq-item > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; cursor: pointer; list-style: none;
  font-family: var(--font-fa); font-size: 1rem; font-weight: 600; color: var(--tb-ink);
}
.tb-site details.tk-faq-item > summary::-webkit-details-marker { display: none; }
.tb-site details.tk-faq-item > summary::after {
  content: '+'; margin-inline-start: auto;
  font-family: var(--font-lat); font-size: 1.3rem; line-height: 1; color: var(--tb-cyan-dark);
}
.tb-site details.tk-faq-item[open] > summary::after { content: '−'; }
.tb-site details.tk-faq-item > summary:hover { background: var(--tb-paper-3); color: var(--tb-cyan-dark); }
.tb-site details.tk-faq-item[open] > summary { border-bottom: 1px dotted var(--tb-rule); }
.tb-site details.tk-faq-item .tk-faq-a-in { height: auto; padding: 14px 16px 18px; }

/* فرم داخل کارت هیرو و بخش درخواست */
.tb-site .tb-hero-card .tk-formwrap { margin: 0; }
.tb-site .tb-hero-card .tk-formwrap button[type="submit"],
.tb-site .tb-hero-card .tk-form-submit {
  width: 100%; padding: 12px 18px; background: var(--tb-cyan-dark); color: #fff;
  border: 1px solid var(--tb-cyan-dark); font-family: var(--font-fa); font-weight: 600; cursor: pointer;
}
.tb-site .tb-hero-card .tk-formwrap button[type="submit"]:hover { background: var(--tb-ink); border-color: var(--tb-ink); }

/* عنوان دستگاه داخل کاشی */
.tb-site .tb-device a b { color: var(--tb-ink); }
.tb-site .tb-device a:hover b { color: var(--tb-hot); }

/* صفحه جستجو و ۴۰۴ */
.tb-site .search-page, .tb-site .error-page { max-width: var(--tb-wrap); margin-inline: auto; padding: 40px 18px 60px; }
.tb-site .search-page h1, .tb-site .error-page h1 { border-bottom: 3px double var(--tb-rule-2); padding-bottom: 12px; }

/* ==========================================================================
   ۱۳) اجزایی که استایلشان در tamirkar24.css بود و اینجا بازنویسی شده اند
   --------------------------------------------------------------------------
   با حذف tamirkar24.css این اجزا بی استایل مانده بودند:
   فرم درخواست، مدال، لیست زیرصفحه ها، دکمه های اشتراک گذاری.
   ========================================================================== */

/* ---------- فرم درخواست ---------- */
.tb-site .tk-formwrap { display: block; }
.tb-site .tk-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.tb-site .tk-quick     { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tb-site .tk-field { display: flex; flex-direction: column; min-width: 0; }
.tb-site .tk-field-full { grid-column: 1 / -1; }
.tb-site .tk-field label { font-size: .84rem; font-weight: 600; color: var(--tb-ink-2); margin-bottom: 5px; }
.tb-site .tk-field input,
.tb-site .tk-field textarea { width: 100%; }
.tb-site .tk-quick .tk-btn { width: 100%; margin-top: 2px; }

.tb-site .tk-form-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tb-rule);
}
.tb-site .tk-form-actions .tk-btn-primary { min-width: 170px; }
.tb-site .tk-form-note { font-size: .8rem; color: var(--tb-muted); }

.tb-site .tk-cap-row { display: flex; align-items: center; gap: 8px; }
.tb-site .tk-cap-row span { font-size: 1.05rem; color: var(--tb-ink-2); }
.tb-site .tk-cap-row input { width: 84px; text-align: center; }
.tb-site .tk-cap-new {
  width: 38px; height: 38px; background: var(--tb-paper-2); border: 1px solid var(--tb-rule-2);
  color: var(--tb-ink); cursor: pointer; font-size: 1.05rem;
}
.tb-site .tk-cap-new:hover { background: var(--tb-cyan-wash); }

.tb-site .tk-form-ok {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--tb-cyan-wash); border: 1px solid var(--tb-cyan); padding: 16px 18px;
}
.tb-site .tk-form-ok[hidden] { display: none; }
.tb-site .tk-form-ok-mark {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  background: var(--tb-cyan-dark); color: #fff; font-size: 1rem;
}
.tb-site .tk-form-ok b { display: block; font-size: 1rem; }
.tb-site .tk-form-ok p { margin: 4px 0 0; font-size: .87rem; color: var(--tb-ink-2); }

.tb-site .tk-form-err {
  margin-top: 12px; padding: 11px 14px; font-size: .87rem;
  background: #FDE7EF; border: 1px solid var(--tb-hot); color: #8A0045;
}
.tb-site .tk-form-err[hidden] { display: none; }
.tb-site .tk-form-err ul { margin: 0; padding-inline-start: 18px; }

/* ---------- مدال درخواست ---------- */
.tb-site .tk-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.tb-site .tk-modal[hidden] { display: none; }
.tb-site .tk-modal-veil { position: absolute; inset: 0; background: rgba(32, 30, 29, .62); }
.tb-site .tk-modal-box {
  position: relative; z-index: 1; width: min(620px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--tb-paper); border: 1px solid var(--tb-rule-2); border-top: 4px solid var(--tb-cyan);
}
.tb-site .tk-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--tb-rule); background: var(--tb-white);
}
.tb-site .tk-modal-eyebrow {
  display: block; font-size: .72rem; letter-spacing: .14em; color: var(--tb-cyan-dark);
  margin-bottom: 3px;
}
.tb-site .tk-modal-head b { font-size: 1.2rem; }
.tb-site .tk-modal-close {
  width: 34px; height: 34px; flex: 0 0 34px; background: transparent;
  border: 1px solid var(--tb-rule-2); color: var(--tb-ink); font-size: 1rem; cursor: pointer;
}
.tb-site .tk-modal-close:hover { background: var(--tb-ink); color: #fff; border-color: var(--tb-ink); }
.tb-site .tk-modal-body { padding: 18px 20px 22px; }
.tb-site .tk-modal-lead { margin: 0 0 16px; font-size: .9rem; color: var(--tb-muted); }

/* ---------- لیست زیرصفحه ها: کاشی متنی ---------- */
.tb-site .tk-childlist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0; border-top: 1px solid var(--tb-rule); border-inline-start: 1px solid var(--tb-rule);
}
.tb-site .tk-childtile {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--tb-white);
  border-bottom: 1px solid var(--tb-rule); border-inline-end: 1px solid var(--tb-rule);
  font-size: .9rem; color: var(--tb-ink-2);
}
.tb-site .tk-childtile:hover { background: var(--tb-cyan-wash); color: var(--tb-cyan-dark); }
.tb-site .tk-childtile-ico { flex: 0 0 auto; color: var(--tb-cyan); font-size: .9rem; }
.tb-site .tk-childtile-t { flex: 1; line-height: 1.85; }
.tb-site .tk-childtile-go { flex: 0 0 auto; color: var(--tb-faint); }
.tb-site .tk-childtile:hover .tk-childtile-go { color: var(--tb-hot); }

/* ---------- لیست زیرصفحه ها: کارت تصویری ---------- */
.tb-site .tk-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.tb-site .tk-card { background: transparent; border: 0; padding: 0; }
.tb-site .tk-card-img { display: block; overflow: hidden; background: var(--tb-paper-2); border: 1px solid var(--tb-rule); }
.tb-site .tk-card-img img { width: 100%; height: 158px; object-fit: cover; display: block; filter: grayscale(.25) contrast(1.05); transition: filter .2s ease; }
.tb-site .tk-card:hover .tk-card-img img { filter: none; }
.tb-site .tk-card-noimg { display: grid; place-items: center; height: 158px; color: var(--tb-faint); font-size: 1.5rem; }
.tb-site .tk-card-b { padding-top: 10px; }
.tb-site .tk-card-date { display: block; font-family: var(--font-lat); font-size: .74rem; color: var(--tb-faint); margin-bottom: 4px; }
.tb-site .tk-card-t { font-size: .98rem; margin: 0; line-height: 1.85; }
.tb-site .tk-card-t a { color: var(--tb-ink); }
.tb-site .tk-card-t a:hover { color: var(--tb-hot); }

/* card.php — نسخه قدیمی تر */
.tb-site .children-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.tb-site .child-card { background: var(--tb-white); border: 1px solid var(--tb-rule); }
.tb-site .child-card-img img { width: 100%; height: 158px; object-fit: cover; display: block; }
.tb-site .child-card-body { padding: 12px 14px; }
.tb-site .child-card-title { font-size: .98rem; margin: 0 0 6px; }
.tb-site .child-card-excerpt { font-size: .84rem; color: var(--tb-muted); margin: 0; }

/* ---------- اشتراک گذاری ---------- */
.tb-site .share-box {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 26px 0 0; padding: 14px 0; border-top: 1px solid var(--tb-rule); border-bottom: 1px solid var(--tb-rule);
}
.tb-site .share-label { font-size: .86rem; color: var(--tb-muted); }
.tb-site .share-links { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-site .share-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--tb-white); border: 1px solid var(--tb-rule-2); border-radius: var(--tb-radius);
  color: var(--tb-ink-2); font-size: .92rem; cursor: pointer;
}
.tb-site .share-btn:hover { background: var(--tb-ink); border-color: var(--tb-ink); color: #fff; }
.tb-site .share-copied { font-size: .8rem; color: var(--tb-cyan-dark); }

/* ---------- نظرات ---------- */
.tb-site .comments-section { margin-top: 34px; padding-top: 22px; border-top: 3px double var(--tb-rule-2); }
.tb-site .comments-section h2 { font-size: 1.22rem; margin: 0 0 14px; }
.tb-site .comment { background: var(--tb-white); border: 1px solid var(--tb-rule); padding: 14px 16px; margin-bottom: 12px; }

/* ---------- واکنش گرا برای همین بخش ---------- */
@media (max-width: 640px) {
  .tb-site .tk-form-grid { grid-template-columns: 1fr; }
  .tb-site .tk-cardgrid, .tb-site .children-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .tb-site .tk-childlist { grid-template-columns: 1fr; }
  .tb-site .tk-side-cta { position: static; }
  .tb-site .tk-modal { padding: 0; align-items: flex-end; }
  .tb-site .tk-modal-box { width: 100%; max-height: 92vh; }
}

/* ==========================================================================
   ۱۴) جدول ها — یک ظاهر واحد در کل سایت
   --------------------------------------------------------------------------
   جدول های داخل محتوا از ادیتور سایت قدیم آمده اند و روی خودشان
   style و border و bgcolor دارند. برای اینکه همه شان یکدست دیده شوند،
   این چند قاعده عمدا !important دارند — تنها جای فایل که این کار شده.
   ========================================================================== */
.tb-site .page-content table,
.tb-site .section-content table,
.tb-site .table-scroll > table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid var(--tb-rule-2) !important;
  background: var(--tb-white) !important;
  margin: 24px 0 !important;
  font-size: .93rem !important;
  table-layout: auto !important;
}
.tb-site .page-content table th,
.tb-site .page-content table td,
.tb-site .section-content table th,
.tb-site .section-content table td {
  border: 1px solid var(--tb-rule) !important;
  padding: 10px 12px !important;
  text-align: start !important;
  vertical-align: middle !important;
  background-image: none !important;
  color: var(--tb-ink-2) !important;
  line-height: 1.95 !important;
  white-space: normal !important;
  width: auto !important;
  height: auto !important;
}
.tb-site .page-content table th,
.tb-site .section-content table th,
.tb-site .page-content table thead td,
.tb-site .section-content table thead td {
  background: var(--tb-ink) !important;
  color: #F1EFEE !important;
  font-weight: 600 !important;
  border-color: var(--tb-ink) !important;
  letter-spacing: .02em !important;
}
/* ردیف اول اگر thead ندارد ولی سلول هایش پررنگ است، باز هم سرستون حساب شود */
.tb-site .page-content table tr:first-child td strong,
.tb-site .section-content table tr:first-child td strong { color: inherit !important; }

.tb-site .page-content table tbody tr:nth-child(even) td,
.tb-site .section-content table tbody tr:nth-child(even) td { background: var(--tb-paper-3) !important; }
.tb-site .page-content table tbody tr:hover td,
.tb-site .section-content table tbody tr:hover td { background: var(--tb-cyan-wash) !important; }

/* سلول هایی که فقط شماره تلفن دارند */
.tb-site .page-content table td a[href^="tel"],
.tb-site .section-content table td a[href^="tel"] {
  display: inline-block; font-family: var(--font-fa);
  font-weight: 600; letter-spacing: .04em; direction: ltr;
  border-bottom: 1px solid var(--tb-cyan-wash-2);
}

/* اسکرول افقی روی موبایل — main.js خودش جدول ها را در این قاب می پیچد */
.tb-site .table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 24px 0; border-inline-start: 3px solid var(--tb-cyan-wash-2);
}
.tb-site .table-scroll > table { margin: 0 !important; min-width: 480px; }

/* ==========================================================================
   ۱۵) لایه تمایز — چیزهایی که این سایت را از بقیه جدا می کند
   ========================================================================== */

/* بند اول هر صفحه، «لید» روزنامه است: درشت تر، با خط کش کنار */
.tb-site .page-content > p:first-of-type,
.tb-site .page-content-intro > p:first-of-type {
  font-size: 1.12rem; color: var(--tb-ink); line-height: 2.05;
  padding-inline-start: 16px; border-inline-start: 3px solid var(--tb-ink);
}

/* متن ستونی روزنامه: تراز دو طرف */
.tb-site .page-content p,
.tb-site .section-content p { text-align: justify; text-justify: inter-word; }

/* تیترهای داخل متن با خط کش پررهنگ بالای خودشان (بدون شماره) */
.tb-site .page-content h2 { border-top: 2px solid var(--tb-ink); border-bottom: 0; padding: 12px 0 0; }
.tb-site .section-title  { border-inline-start: 0; padding-inline-start: 0; border-top: 2px solid var(--tb-ink); padding-top: 12px; }
.tb-site .page-section + .page-section { border-top: 0; padding-top: 0; }

/* ستون کناری: به جای جعبه های قاب دار، ستون واقعی با خط کش مویی */
@media (min-width: 1081px) {
  .tb-site .tk-layout { gap: 0; }
  .tb-site .tk-side {
    padding-inline-start: 26px; margin-inline-start: 26px;
    border-inline-start: 1px solid var(--tb-rule);
  }
  .tb-site .tk-side-box { border-inline: 0; border-bottom: 0; border-top: 2px solid var(--tb-ink); padding: 14px 0 0; background: transparent; }
}
.tb-site .tk-side-h { letter-spacing: .04em; }

/* مسیر صفحه با اسلش، ریزتر */
.tb-site .breadcrumb ol { font-size: .78rem; letter-spacing: .03em; }
.tb-site .breadcrumb .separator::before { content: '/'; }
.tb-site .breadcrumb .separator { font-size: 0; }
.tb-site .breadcrumb .separator::before { font-size: .78rem; }

/* ==========================================================================
   ۱۶) موبایل — جمع کردن فضاهای خالی
   ========================================================================== */
@media (max-width: 760px) {
  .tb-site .tbs-svc-cta {
    display: block; padding: 14px; margin: 14px 0 20px; min-height: 0;
  }
  .tb-site .tbs-svc-cta-text { margin-bottom: 12px; }
  .tb-site .tbs-svc-cta-text strong { font-size: .98rem; line-height: 1.9; }
  .tb-site .tbs-svc-cta-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
  .tb-site .tbs-svc-cta-tel,
  .tb-site .tbs-svc-cta-btn { width: 100%; justify-content: center; text-align: center; margin: 0; }

  .tb-site .tk-layout { padding: 18px 14px 40px; }
  .tb-site .page-h1 { font-size: 1.42rem; padding-bottom: 10px; }
  .tb-site .page-content > p:first-of-type { font-size: 1.02rem; padding-inline-start: 12px; }
  .tb-site .page-content h2 { font-size: 1.18rem; }
  .tb-site .section-title { font-size: 1.14rem; }
  .tb-site .toc-box { padding: 14px; margin: 16px 0; }
}

/* ---------- فهرست مناطق: فشرده، چند ستونه، حروف اول برجسته ---------- */
.tb-site .tk-childlist-areas { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.tb-site .tk-childlist-areas .tk-childtile { padding: 9px 12px; font-size: .87rem; }
.tb-site .tk-childlist-areas .tk-childtile-ico { color: var(--tb-cyan-light); }
.tb-site .tk-childlist-areas .tk-childtile-go { display: none; }
@media (max-width: 640px) {
  .tb-site .tk-childlist-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-site .tk-childlist-areas .tk-childtile { font-size: .82rem; padding: 9px 8px; }
}

/* ==========================================================================
   ۱۷) بازنویسی قواعد فایل پایه  ← این بخش باید آخر فایل بماند
   --------------------------------------------------------------------------
   tehranbosch.css حدود ۱۳۰ قاعده با پیشوند `body.tbs-site` دارد که
   وزنشان از قواعد تک کلاسی این فایل بیشتر است. مهم ترینشان این بود:

       body.tbs-site .page-article { max-width: 1180px; margin: 0 auto; ... }

   این قاعده صفحه را از ستون خودش پهن تر می کرد، برای همین در صفحات
   داخلی متن روی ستون کناری می افتاد. چون بدنه هر دو کلاس را دارد
   (`tbs-site tb-site`)، اینجا با همان وزن ولی دیرتر نوشته می شود و برنده است.
   ========================================================================== */

body.tb-site #main-content { background: var(--tb-paper); }

body.tb-site .page-article {
  max-width: none; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  min-width: 0;
}

body.tb-site h1, body.tb-site h2, body.tb-site h3, body.tb-site h4 {
  font-family: var(--font-fa); letter-spacing: 0;
}

body.tb-site .page-h1 {
  font-family: var(--font-fa);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 700; line-height: 1.6; color: var(--tb-ink);
  margin: 0 0 8px; padding: 0 0 14px;
  border-bottom: 3px double var(--tb-rule-2);
}

body.tb-site .page-content,
body.tb-site .page-content-intro,
body.tb-site .page-content-sections,
body.tb-site .tbs-page-content {
  font-size: 1.02rem; line-height: 2.15; color: var(--tb-ink-2);
  background: transparent; padding: 0; margin: 0;
}
body.tb-site .page-content p,
body.tb-site .page-content-intro p {
  margin: 0 0 1.15em; padding-right: 0; text-align: justify; line-height: 2.15;
}
body.tb-site .page-content > p:first-of-type,
body.tb-site .page-content-intro > p:first-of-type {
  font-size: 1.12rem; color: var(--tb-ink); line-height: 2.05;
  padding-inline-start: 16px; border-inline-start: 3px solid var(--tb-ink);
}
body.tb-site .page-content h2 {
  font-family: var(--font-fa); font-size: 1.4rem; font-weight: 700; color: var(--tb-ink);
  margin: 1.7em 0 .6em; padding: 12px 0 0;
  border-top: 2px solid var(--tb-ink); border-bottom: 0;
}
body.tb-site .page-content h3 {
  font-family: var(--font-fa); font-size: 1.14rem; color: var(--tb-cyan-dark);
  margin: 1.4em 0 .5em; border: 0; padding: 0;
}
body.tb-site .page-content img {
  max-width: 100%; height: auto; display: block; margin: 22px auto;
  border: 1px solid var(--tb-rule); border-radius: var(--tb-radius);
}
body.tb-site .page-content a { color: var(--tb-cyan-dark); border-bottom: 1px solid var(--tb-cyan-wash-2); }
body.tb-site .page-content a:hover { color: var(--tb-hot); border-bottom-color: var(--tb-hot); }
body.tb-site .page-content ul,
body.tb-site .page-content ol { padding-inline-start: 22px; margin: 0 0 1.15em; }

body.tb-site .section-title {
  font-family: var(--font-fa); font-size: 1.32rem; margin: 0 0 12px;
  padding: 12px 0 0; border-top: 2px solid var(--tb-ink); border-inline-start: 0;
}

/* ---------- فهرست مطالب ----------
   تک ستونه، بدون جعبه، فقط دو خط کش مویی بالا و پایین.
   شماره ها با counter ساخته می شوند تا هم <ol> ساده و هم نسخه ای که
   <span class="toc-num"> دارد یکسان دیده شوند. */
body.tb-site .toc-box {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--tb-rule); border-bottom: 1px solid var(--tb-rule);
  padding: 14px 0; margin: 22px 0;
}
body.tb-site .toc-title {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-fa); font-weight: 600; font-size: .78rem;
  color: var(--tb-muted); letter-spacing: .12em; margin: 0 0 8px;
}
body.tb-site .toc-title svg { width: 14px; height: 14px; fill: var(--tb-cyan); flex: 0 0 auto; }

body.tb-site .toc-list {
  columns: 1; list-style: none; counter-reset: tbtoc;
  padding: 0; margin: 0;
}
body.tb-site .toc-list li {
  counter-increment: tbtoc;
  display: flex; align-items: baseline; gap: 9px;
  font-size: .9rem; line-height: 1.95; padding: 2px 0;
  break-inside: avoid;
}
body.tb-site .toc-list li::before {
  content: counter(tbtoc);
  flex: 0 0 auto; min-width: 16px;
  font-family: var(--font-fa);
  font-size: .76rem; color: var(--tb-cyan); text-align: start;
}
body.tb-site .toc-list .toc-num { display: none; }   /* شماره تکراری قالب پایه */
body.tb-site .toc-list a { color: var(--tb-ink-2); border-bottom: 0; }
body.tb-site .toc-list a:hover { color: var(--tb-hot); }

@media (max-width: 640px) {
  body.tb-site .toc-box { padding: 12px 0; margin: 16px 0; }
  body.tb-site .toc-list li { font-size: .86rem; }
}

body.tb-site .breadcrumb { background: var(--tb-paper); border-bottom: 1px solid var(--tb-rule); }
body.tb-site .breadcrumb a { color: var(--tb-muted); }
body.tb-site .breadcrumb a:hover { color: var(--tb-cyan-dark); }
body.tb-site .breadcrumb span[aria-current="page"] { color: var(--tb-ink); }

body.tb-site .article-meta {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--tb-rule);
  font-size: .8rem; color: var(--tb-muted); background: transparent;
}

/* ---------- نوار «سوال دارید؟» ---------- */
body.tb-site .tk-askbar {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 22px; padding: 12px 16px;
  background: var(--tb-white); border: 1px solid var(--tb-rule-2);
  border-inline-start: 4px solid var(--tb-hot);
  color: var(--tb-ink);
}
body.tb-site .tk-askbar:hover { background: var(--tb-paper-3); color: var(--tb-ink); }
body.tb-site .tk-askbar-ico { flex: 0 0 auto; color: var(--tb-hot); font-size: 1.15rem; }
body.tb-site .tk-askbar-txt { flex: 1; min-width: 0; line-height: 1.85; }
body.tb-site .tk-askbar-txt b { display: block; font-size: .97rem; }
body.tb-site .tk-askbar-txt span { display: block; font-size: .84rem; color: var(--tb-muted); }
body.tb-site .tk-askbar-count {
  flex: 0 0 auto; min-width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--tb-hot); color: #fff; font-size: .8rem; padding: 0 7px;
}
body.tb-site .tk-askbar-go { flex: 0 0 auto; color: var(--tb-faint); }
body.tb-site .tk-askbar:hover .tk-askbar-go { color: var(--tb-hot); }
body.tb-site .tk-ask-glow { outline: 2px solid var(--tb-cyan); outline-offset: 2px; }

@media (max-width: 640px) {
  body.tb-site .tk-askbar { padding: 10px 12px; gap: 9px; }
  body.tb-site .tk-askbar-txt span { display: none; }
  }

/* ==========================================================================
   ۱۸) تایپوگرافی IRANYekanX  ← این بخش باید آخرین بخش فایل بماند
   --------------------------------------------------------------------------
   دو قاعده کلی که همه جای این بخش رعایت شده:

   ۱. روی متن فارسی letter-spacing گذاشته نمی شود. در خط عربی حروف به هم
      می چسبند و فاصله گذاری بین حروف، اتصال ها را می شکند و کلمه از هم
      باز می شود. فاصله گذاری فقط روی رقم ها و متن لاتین مانده.

   ۲. وزن های Thin و UltraLight و Light برای متن فارسی زیر ۲۰ پیکسل به کار
      نمی روند. قلم های نازک و نقطه های فارسی روی نمایشگر معمولی محو
      می شوند. جای متن ریز و کم رنگ، از وزن Regular با رنگ ملایم تر
      استفاده شده.
   ========================================================================== */

body.tb-site {
  font-family: var(--font-fa);
  font-size: 16.5px;
  line-height: 2.05;
  font-weight: 400;
  font-synthesis: none;            /* بولد جعلی ساخته نشود */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- بدون فاصله گذاری روی فارسی ---------- */
body.tb-site,
body.tb-site h1, body.tb-site h2, body.tb-site h3, body.tb-site h4,
body.tb-site .tb-kicker, body.tb-site .tb-dateline, body.tb-site .tk-logo-sub,
body.tb-site .tk-side-h, body.tb-site .toc-title, body.tb-site .tk-modal-eyebrow,
body.tb-site .tk-footer h3, body.tb-site .page-content th,
body.tb-site .section-content th, body.tb-site .breadcrumb ol,
body.tb-site .tk-btn, body.tb-site .tb-btn, body.tb-site .tk-nav > li > a {
  letter-spacing: normal;
}

/* ---------- تیترها ---------- */
body.tb-site h1, body.tb-site h2, body.tb-site h3, body.tb-site h4 {
  font-family: var(--font-fa);
}

body.tb-site .page-h1 {
  font-size: clamp(1.55rem, 2.9vw, 2.25rem);
  font-weight: 800;
  line-height: 1.62;
}
body.tb-site .tb-hero h1 {
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.55;
}
body.tb-site .page-content h2,
body.tb-site .section-title {
  font-size: 1.34rem; font-weight: 700; line-height: 1.75;
}
body.tb-site .page-content h3 { font-size: 1.1rem;  font-weight: 600; line-height: 1.85; }
body.tb-site .page-content h4 { font-size: 1rem;    font-weight: 600; }
body.tb-site .tb-sec-head h2  { font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 700; }
body.tb-site .tb-endcta h2    { font-weight: 700; }

/* ---------- متن ---------- */
body.tb-site .page-content,
body.tb-site .page-content-intro,
body.tb-site .page-content-sections,
body.tb-site .section-content {
  font-size: 1.02rem; font-weight: 400; line-height: 2.1;
}
body.tb-site .page-content > p:first-of-type,
body.tb-site .page-content-intro > p:first-of-type,
body.tb-site .tb-hero-lead {
  font-size: 1.1rem; font-weight: 400; line-height: 2.0;
}
body.tb-site .page-content strong,
body.tb-site .section-content strong,
body.tb-site .page-content b,
body.tb-site .section-content b { font-weight: 600; }   /* 700 داخل متن فارسی سنگین است */

/* ---------- رابط ---------- */
body.tb-site .tk-nav > li > a   { font-size: .93rem; font-weight: 500; }
body.tb-site .tk-sub a          { font-size: .9rem;  font-weight: 400; }
body.tb-site .tk-drawer > ul > li > a { font-weight: 600; }
body.tb-site .tk-btn,
body.tb-site .tb-btn            { font-size: .95rem; font-weight: 600; }
body.tb-site .tk-logo-txt       { font-weight: 800; }
body.tb-site .tk-logo-sub       { font-size: .78rem; font-weight: 400; }
body.tb-site .tb-kicker         { font-size: .78rem; font-weight: 600; }
body.tb-site .tk-modal-eyebrow  { font-size: .76rem; font-weight: 500; }
body.tb-site .tk-side-h,
body.tb-site .tk-footer h3      { font-size: .95rem; font-weight: 600; }
body.tb-site .tk-side-links a   { font-size: .9rem;  font-weight: 400; }
body.tb-site .tk-side-ptitle    { font-size: .88rem; font-weight: 500; }
body.tb-site .toc-title         { font-size: .8rem;  font-weight: 600; }
body.tb-site .toc-list li       { font-size: .91rem; font-weight: 400; }
body.tb-site .tb-device b,
body.tb-site .tb-post h3,
body.tb-site .tk-card-t         { font-size: 1rem;   font-weight: 600; }
body.tb-site .tb-device span,
body.tb-site .tb-post p         { font-size: .87rem; font-weight: 400; }
body.tb-site .tk-childtile      { font-size: .9rem;  font-weight: 400; }
body.tb-site label,
body.tb-site .tk-field label    { font-size: .87rem; font-weight: 500; }
body.tb-site input, body.tb-site select, body.tb-site textarea {
  font-family: var(--font-fa); font-size: .95rem; font-weight: 400;
}
body.tb-site .tk-footer p,
body.tb-site .tk-footer li      { font-size: .89rem; font-weight: 400; }
body.tb-site .tk-footer-bar     { font-size: .82rem; font-weight: 400; }
body.tb-site .breadcrumb ol     { font-size: .82rem; font-weight: 400; }
body.tb-site .tb-dateline       { font-size: .8rem;  font-weight: 400; }
body.tb-site .article-meta,
body.tb-site .form-note,
body.tb-site .tk-form-note,
body.tb-site .tb-price-note     { font-size: .83rem; font-weight: 400; }

/* ---------- رقم ها ----------
   تنها جایی که فاصله گذاری می ماند: رقم چپ چین است و فاصله بیشتر
   خواندن شماره تلفن را واقعا راحت تر می کند. */
body.tb-site .tk-num,
body.tb-site .tb-num,
body.tb-site .tk-side-tel,
body.tb-site .tbs-svc-cta-tel span,
body.tb-site .tk-header-tel strong {
  font-family: var(--font-fa);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  direction: ltr; unicode-bidi: isolate;
}
body.tb-site .tk-header-tel strong { font-size: 1.2rem; }
body.tb-site .tk-side-tel          { font-size: 1.1rem; }
body.tb-site .tb-hero-facts b      { font-size: 1.55rem; font-weight: 700; letter-spacing: 0; }
body.tb-site .tb-step::before,
body.tb-site .toc-list li::before  { font-family: var(--font-fa); font-weight: 600; }

/* ---------- موبایل ----------
   روی صفحه کوچک: یک پله کوچک تر، ارتفاع خط کمی جمع تر (ولی نه کمتر از
   ۱.۹ که برای فارسی کف قابل قبول است) و وزن تیترها یک پله سبک تر تا
   تیتر بلند، دیوار سیاه نشود. */
@media (max-width: 760px) {
  body.tb-site { font-size: 15.5px; line-height: 1.98; }

  body.tb-site .page-h1        { font-size: 1.42rem; font-weight: 700; line-height: 1.68; }
  body.tb-site .tb-hero h1     { font-size: 1.62rem; font-weight: 700; line-height: 1.62; }
  body.tb-site .page-content h2,
  body.tb-site .section-title  { font-size: 1.16rem; font-weight: 700; line-height: 1.8; }
  body.tb-site .page-content h3 { font-size: 1.04rem; }
  body.tb-site .tb-sec-head h2 { font-size: 1.24rem; }

  body.tb-site .page-content,
  body.tb-site .page-content-intro,
  body.tb-site .page-content-sections,
  body.tb-site .section-content { font-size: .99rem; line-height: 2.0; }
  body.tb-site .page-content > p:first-of-type,
  body.tb-site .page-content-intro > p:first-of-type,
  body.tb-site .tb-hero-lead { font-size: 1.02rem; line-height: 1.95; }

  body.tb-site .tk-btn, body.tb-site .tb-btn { font-size: .92rem; }
  body.tb-site .tk-side-h, body.tb-site .tk-footer h3 { font-size: .92rem; }
  body.tb-site .toc-list li { font-size: .88rem; }
  body.tb-site .tk-header-tel strong { font-size: 1.1rem; }
  body.tb-site .tb-hero-facts b { font-size: 1.3rem; }

  /* دکمه ها و لینک های لمسی: کف ۴۴ پیکسل ارتفاع */
  body.tb-site .tk-btn, body.tb-site .tb-btn,
  body.tb-site .tk-mobilebar a { min-height: 44px; }
}

/* صفحه های خیلی باریک */
@media (max-width: 380px) {
  body.tb-site { font-size: 15px; }
  body.tb-site .page-h1 { font-size: 1.3rem; }
}

/* ==========================================================================
   ۱۹) دو اصلاح جزئی
   ========================================================================== */

/* ---------- متن جستجو روی آیکون می افتاد ----------
   قواعد فرم در بخش ۷ روی `input[type="search"]` هم می نشستند و
   padding: 11px 12px را جای padding مخصوص جستجو می گذاشتند، پس جای
   خالی آیکون و دکمه از بین می رفت. اینجا با وزن بالاتر برگردانده شده. */
body.tb-site .tk-search input[type="search"] {
  padding-block: 10px;
  padding-inline-start: 42px;   /* جای آیکون ذره بین */
  padding-inline-end: 100px;    /* جای دکمه «جستجو» */
}
body.tb-site .tk-search-drop input[type="search"] {
  padding-block: 11px;
  padding-inline-start: 42px;
  padding-inline-end: 14px;     /* در این نسخه دکمه بیرون کادر است */
}
body.tb-site .tk-search .tk-search-ico {
  inset-inline-start: 14px;
  top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
body.tb-site .tk-drawer-search input { padding: 10px 12px; }

@media (max-width: 560px) {
  body.tb-site .tk-search input[type="search"] { padding-inline-end: 86px; }
  body.tb-site .tk-search button { padding-inline: 12px; font-size: .84rem; }
}

/* ---------- کشوی منو باید از راست باز شود ----------
   با inset-inline-end در حالت RTL کشو سمت چپ می نشست. سایت همیشه
   راست چین است و دکمه همبرگر هم سمت راست است، پس اینجا عمدا از
   خاصیت های فیزیکی استفاده شده تا جای ابهام نماند. */
body.tb-site .tk-drawer {
  right: 0;
  left: auto;
  border-right: 0;
  border-left: 3px solid var(--tb-cyan);
}
body.tb-site .tk-drawer-top { flex-direction: row; }

/* ==========================================================================
   ۲۰) بخش «چرا ما» — سه ستون و رنگ بندی بوش
   --------------------------------------------------------------------------
   شش رنگ از پترن رنگی بوش گرفته شده (همان نوار رنگی کنار لوگو). رنگ فقط
   در سه جا به کار می رود: نوار کنار کارت، رنگ عنوان، و یک ته رنگ خیلی
   ملایم برای پس زمینه. بقیه چیزها — گوشه تیز، خط کش مویی، بدون سایه —
   همان زبان بقیه سایت می ماند تا رنگی شدن، شلوغ نشود.
   ========================================================================== */
:root {
  --tb-b1: #9E2896;  --tb-b1-w: #F7EBF6;   /* بنفش */
  --tb-b2: #007BC0;  --tb-b2-w: #E7F2FA;   /* آبی */
  --tb-b3: #18837E;  --tb-b3-w: #E5F1F0;   /* فیروزه ای */
  --tb-b4: #00884A;  --tb-b4-w: #E5F2EB;   /* سبز */
  --tb-b5: #ED8B00;  --tb-b5-w: #FDF2E1;   /* نارنجی */
  --tb-b6: #E20015;  --tb-b6-w: #FCE8EA;   /* سرخ */
}

body.tb-site .tb-why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
body.tb-site .tb-why > div {
  min-width: 0;
  padding: 18px 18px 18px 18px;
  padding-inline-start: 16px;
  background: var(--tb-white);
  border: 1px solid var(--tb-rule);
  border-inline-start: 4px solid var(--tb-cyan);
  border-radius: var(--tb-radius);
}
body.tb-site .tb-why h3 {
  font-size: 1rem; font-weight: 600; margin: 0 0 6px; color: var(--tb-ink);
}
body.tb-site .tb-why p {
  font-size: .88rem; margin: 0; color: var(--tb-muted); line-height: 1.95;
}

body.tb-site .tb-why > div:nth-child(6n+1) { border-inline-start-color: var(--tb-b1); background: var(--tb-b1-w); }
body.tb-site .tb-why > div:nth-child(6n+1) h3 { color: var(--tb-b1); }
body.tb-site .tb-why > div:nth-child(6n+2) { border-inline-start-color: var(--tb-b2); background: var(--tb-b2-w); }
body.tb-site .tb-why > div:nth-child(6n+2) h3 { color: var(--tb-b2); }
body.tb-site .tb-why > div:nth-child(6n+3) { border-inline-start-color: var(--tb-b3); background: var(--tb-b3-w); }
body.tb-site .tb-why > div:nth-child(6n+3) h3 { color: var(--tb-b3); }
body.tb-site .tb-why > div:nth-child(6n+4) { border-inline-start-color: var(--tb-b4); background: var(--tb-b4-w); }
body.tb-site .tb-why > div:nth-child(6n+4) h3 { color: var(--tb-b4); }
body.tb-site .tb-why > div:nth-child(6n+5) { border-inline-start-color: var(--tb-b5); background: var(--tb-b5-w); }
body.tb-site .tb-why > div:nth-child(6n+5) h3 { color: var(--tb-b5); }
body.tb-site .tb-why > div:nth-child(6n+6) { border-inline-start-color: var(--tb-b6); background: var(--tb-b6-w); }
body.tb-site .tb-why > div:nth-child(6n+6) h3 { color: var(--tb-b6); }

@media (max-width: 1000px) {
  body.tb-site .tb-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body.tb-site .tb-why { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.tb-site .tb-why > div { padding: 14px; padding-inline-start: 14px; }
}

/* چیپ های منطقه — کوتاه تر شده اند، پس جمع و جورتر بچینند */
body.tb-site .tb-districts a { font-size: .88rem; padding: 6px 13px; }
body.tb-site .tb-device-brands a { font-size: .78rem; }

/* ==========================================================================
   ۲۱) بازطراحی چند جزء
   ========================================================================== */

/* ---------- کال تو اکشن بالای صفحات خدمات ----------
   شماره تلفن باید اولین چیزی باشد که چشم می گیرد، پس با رنگ سرخ بوش و
   کادر ضخیم از بقیه جدا شده. دکمه ثبت درخواست آبی توپر است تا دو مسیر
   (تلفن / فرم) از هم تفکیک شوند و با هم رقابت نکنند. */
body.tb-site .tbs-svc-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  background: var(--tb-white);
  border: 1px solid var(--tb-rule-2);
  border-top: 4px solid var(--tb-cyan);
  border-inline-start: 1px solid var(--tb-rule-2);
  padding: 18px 20px;
  margin: 18px 0 26px;
}
body.tb-site .tbs-svc-cta-text strong {
  display: block; font-size: 1.06rem; font-weight: 600; line-height: 1.85; color: var(--tb-ink);
}
body.tb-site .tbs-svc-cta-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px;
  font-size: .82rem; color: var(--tb-muted);
  border-top: 1px dotted var(--tb-rule);
}
body.tb-site .tbs-svc-cta-actions {
  display: flex; align-items: stretch; gap: 10px; flex: 0 0 auto;
}
body.tb-site .tbs-svc-cta-tel {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  background: #fff;
  border: 2px solid var(--tb-b6);
  color: var(--tb-b6);
  border-radius: var(--tb-radius);
}
body.tb-site .tbs-svc-cta-tel span {
  font-size: 1.3rem; font-weight: 700; color: var(--tb-b6); letter-spacing: .03em;
}
body.tb-site .tbs-svc-cta-tel i { font-size: 1rem; color: var(--tb-b6); }
body.tb-site .tbs-svc-cta-tel:hover { background: var(--tb-b6); color: #fff; }
body.tb-site .tbs-svc-cta-tel:hover span,
body.tb-site .tbs-svc-cta-tel:hover i { color: #fff; }

body.tb-site .tbs-svc-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--tb-cyan-dark); border: 2px solid var(--tb-cyan-dark); color: #fff;
  font-family: var(--font-fa); font-size: .95rem; font-weight: 600;
  border-radius: var(--tb-radius); cursor: pointer;
}
body.tb-site .tbs-svc-cta-btn:hover { background: var(--tb-ink); border-color: var(--tb-ink); }

@media (max-width: 860px) {
  body.tb-site .tbs-svc-cta { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  body.tb-site .tbs-svc-cta-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  body.tb-site .tbs-svc-cta-tel,
  body.tb-site .tbs-svc-cta-btn { justify-content: center; }
  body.tb-site .tbs-svc-cta-tel span { font-size: 1.22rem; }
}

/* ---------- فهرست مطالب ---------- */
body.tb-site .toc-box {
  background: var(--tb-white);
  border: 1px solid var(--tb-rule);
  border-top: 1px solid var(--tb-rule);
  border-bottom: 1px solid var(--tb-rule);
  border-inline-start: 3px solid var(--tb-cyan);
  border-radius: var(--tb-radius);
  padding: 0;
  margin: 24px 0 28px;
  overflow: hidden;
}
body.tb-site .toc-title {
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 12px 16px;
  background: var(--tb-paper-3);
  border-bottom: 1px solid var(--tb-rule);
  font-size: .86rem; font-weight: 600; color: var(--tb-ink);
}
body.tb-site .toc-title svg {
  width: 22px; height: 22px; padding: 4px; flex: 0 0 auto;
  background: var(--tb-cyan); fill: #fff; border-radius: var(--tb-radius);
}
body.tb-site .toc-list { padding: 6px 0; margin: 0; counter-reset: tbtoc; }
body.tb-site .toc-list li {
  counter-increment: tbtoc;
  display: flex; align-items: baseline; gap: 11px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--tb-paper-2);
  transition: background .13s ease;
}
body.tb-site .toc-list li:last-child { border-bottom: 0; }
body.tb-site .toc-list li:hover { background: var(--tb-cyan-wash); }
body.tb-site .toc-list li::before {
  content: counter(tbtoc, decimal-leading-zero);
  flex: 0 0 auto; min-width: 24px; height: 20px;
  display: inline-grid; place-items: center;
  background: var(--tb-paper-2); color: var(--tb-cyan-dark);
  font-size: .72rem; font-weight: 600;
  border-radius: var(--tb-radius);
  transform: translateY(2px);
}
body.tb-site .toc-list li:hover::before { background: var(--tb-cyan); color: #fff; }
body.tb-site .toc-list a { flex: 1; min-width: 0; font-size: .91rem; color: var(--tb-ink-2); }
body.tb-site .toc-list li:hover a { color: var(--tb-cyan-dark); }

@media (max-width: 640px) {
  body.tb-site .toc-title { padding: 10px 12px; }
  body.tb-site .toc-list li { padding: 7px 12px; gap: 9px; }
}

/* ---------- تصاویر داخل محتوا ----------
   محتوای منتقل شده روی تگ img صفت width و height دارد و بعضی جاها
   style="width:100%". برای اینکه همه یکدست وسط و در عرض معقول بنشینند،
   این چند خط !important دارند. */
body.tb-site .page-content img,
body.tb-site .section-content img,
body.tb-site .page-content-intro img {
  display: block !important;
  margin: 26px auto !important;
  max-width: min(100%, 700px) !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid var(--tb-rule);
  border-radius: var(--tb-radius);
  background: #fff;
  padding: 4px;
}
/* بندی که فقط یک تصویر دارد، وسط چین شود */
body.tb-site .page-content p:has(> img),
body.tb-site .section-content p:has(> img) { text-align: center; }
body.tb-site .page-content figure,
body.tb-site .section-content figure { margin: 26px auto; text-align: center; max-width: 700px; }
body.tb-site .page-content figcaption,
body.tb-site .section-content figcaption {
  font-size: .82rem; color: var(--tb-muted); margin-top: 6px;
}
@media (max-width: 760px) {
  body.tb-site .page-content img,
  body.tb-site .section-content img {
    margin: 18px auto !important;
    max-width: 100% !important;
    padding: 3px;
  }
}

/* ---------- دکمه تکراری در نوار چسبان ----------
   وقتی سطر برند بالای صفحه دیده می شود، همان دکمه آنجا هست؛ دکمه نوار
   فقط بعد از اسکرول (وقتی سطر برند رفته) ظاهر می شود. */
@media (min-width: 861px) {
  body.tb-site:not(.tk-stuck) .tk-nav-cta { display: none; }
}

/* ---------- فرم + نقشه ---------- */
body.tb-site .tb-formmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
body.tb-site .tb-formmap > div { min-width: 0; }
body.tb-site .tb-formmap-form {
  background: var(--tb-white); border: 1px solid var(--tb-rule);
  border-top: 3px solid var(--tb-cyan); padding: 18px;
}
body.tb-site .tb-formmap-map {
  position: relative; min-height: 340px;
  background: var(--tb-paper-2); border: 1px solid var(--tb-rule);
  border-top: 3px solid var(--tb-ink); overflow: hidden;
}
body.tb-site .tb-formmap-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(.15);
}
body.tb-site .tb-formmap-addr {
  padding: 12px 14px; font-size: .87rem; color: var(--tb-ink-2);
  background: var(--tb-white); border-top: 1px solid var(--tb-rule);
}
@media (max-width: 900px) {
  body.tb-site .tb-formmap { grid-template-columns: minmax(0, 1fr); }
  body.tb-site .tb-formmap-map { min-height: 260px; }
}

/* ==========================================================================
   ۲۲) مناطق گروه بندی شده
   ========================================================================== */
body.tb-site .tb-dgroup { padding: 16px 0; border-top: 1px solid var(--tb-rule); }
body.tb-site .tb-dgroup:first-child { border-top: 0; padding-top: 0; }
body.tb-site .tb-dgroup-h {
  display: flex; align-items: center; gap: 10px;
  font-size: .98rem; font-weight: 600; color: var(--tb-ink); margin: 0 0 10px;
}
body.tb-site .tb-dgroup-h::before {
  content: ''; flex: 0 0 auto; width: 4px; height: 15px; background: var(--tb-cyan);
}
body.tb-site .tb-dgroup-n {
  font-size: .74rem; font-weight: 400; color: var(--tb-faint);
  padding-inline-start: 8px; border-inline-start: 1px solid var(--tb-rule);
}
body.tb-site .tb-dgroup:nth-child(6n+1) .tb-dgroup-h::before { background: var(--tb-b2); }
body.tb-site .tb-dgroup:nth-child(6n+2) .tb-dgroup-h::before { background: var(--tb-b3); }
body.tb-site .tb-dgroup:nth-child(6n+3) .tb-dgroup-h::before { background: var(--tb-b4); }
body.tb-site .tb-dgroup:nth-child(6n+4) .tb-dgroup-h::before { background: var(--tb-b5); }
body.tb-site .tb-dgroup:nth-child(6n+5) .tb-dgroup-h::before { background: var(--tb-b1); }
body.tb-site .tb-dgroup:nth-child(6n+6) .tb-dgroup-h::before { background: var(--tb-b6); }

body.tb-site .tb-dgroup .tb-districts { gap: 6px; }
body.tb-site .tb-dgroup .tb-districts a {
  font-size: .85rem; padding: 5px 11px; background: var(--tb-white);
}
@media (max-width: 600px) {
  body.tb-site .tb-dgroup { padding: 12px 0; }
  body.tb-site .tb-dgroup .tb-districts a { font-size: .82rem; padding: 5px 9px; }
}

/* ==========================================================================
   ۲۳) کارت نواحی — صفحه اول فقط به پنج ناحیه لینک می دهد
   ========================================================================== */
body.tb-site .tb-regions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--tb-rule);
  border-inline-start: 1px solid var(--tb-rule);
}
body.tb-site .tb-region {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0; padding: 22px 18px 20px;
  background: var(--tb-white);
  border-bottom: 1px solid var(--tb-rule);
  border-inline-end: 1px solid var(--tb-rule);
  transition: background .15s ease;
}
body.tb-site .tb-region::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 4px; background: var(--tb-cyan);
}
body.tb-site .tb-region:nth-child(5n+1)::before { background: var(--tb-b2); }
body.tb-site .tb-region:nth-child(5n+2)::before { background: var(--tb-b3); }
body.tb-site .tb-region:nth-child(5n+3)::before { background: var(--tb-b4); }
body.tb-site .tb-region:nth-child(5n+4)::before { background: var(--tb-b5); }
body.tb-site .tb-region:nth-child(5n+5)::before { background: var(--tb-b1); }

body.tb-site .tb-region-name { font-size: 1.1rem; font-weight: 700; color: var(--tb-ink); line-height: 1.7; }
body.tb-site .tb-region-n    { font-size: .8rem;  color: var(--tb-muted); }
body.tb-site .tb-region-go   { font-size: 1rem; color: var(--tb-faint); margin-top: 4px; }
body.tb-site .tb-region:hover { background: var(--tb-paper-3); }
body.tb-site .tb-region:hover .tb-region-name { color: var(--tb-cyan-dark); }
body.tb-site .tb-region:hover .tb-region-go   { color: var(--tb-hot); }

@media (max-width: 1000px) {
  body.tb-site .tb-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.tb-site .tb-regions { grid-template-columns: minmax(0, 1fr); }
  body.tb-site .tb-region { padding: 16px 14px; flex-direction: row; align-items: center; gap: 10px; }
  body.tb-site .tb-region-name { font-size: 1rem; }
  body.tb-site .tb-region-n { margin-inline-start: auto; }
  body.tb-site .tb-region-go { display: none; }
}

/* ==========================================================================
   ۲۴) دور هشتم اصلاحات
   ========================================================================== */

/* ---------- دکمه تکراری در نوار چسبان: کلا حذف ----------
   سطر بالای صفحه دکمه دارد و روی موبایل هم نوار پایین صفحه همین کار را
   می کند، پس این یکی در هیچ حالتی لازم نیست. */
body.tb-site .tk-nav-cta { display: none !important; }

/* ---------- یک جستجو، نه دو تا ----------
   روی دسکتاپ کادر جستجو در سطر برند هست، پس آیکون ذره بین نوار حذف
   می شود. روی موبایل سطر برند پنهان است و آیکون تنها راه جستجو، پس
   همان جا می ماند. */
@media (min-width: 861px) {
  body.tb-site .tk-searchbtn { display: none !important; }
}

/* ---------- کارت نواحی: سه تا در هر ردیف ---------- */
body.tb-site .tb-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  body.tb-site .tb-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.tb-site .tb-regions { grid-template-columns: minmax(0, 1fr); }
}
/* رنگ نوار بالای کارت با شش رنگ می چرخد */
body.tb-site .tb-region:nth-child(6n+1)::before { background: var(--tb-b2); }
body.tb-site .tb-region:nth-child(6n+2)::before { background: var(--tb-b3); }
body.tb-site .tb-region:nth-child(6n+3)::before { background: var(--tb-b4); }
body.tb-site .tb-region:nth-child(6n+4)::before { background: var(--tb-b5); }
body.tb-site .tb-region:nth-child(6n+5)::before { background: var(--tb-b1); }
body.tb-site .tb-region:nth-child(6n+6)::before { background: var(--tb-b6); }

/* ---------- ارقام شمارنده های CSS هم فارسی ----------
   شماره فهرست مطالب و شماره مراحل با counter ساخته می شوند؛ سبک
   شمارش persian باعث می شود ۰۱ و ۱ لاتین جای خود را به رقم فارسی بدهند. */
body.tb-site .toc-list li::before { content: counter(tbtoc, persian); }
body.tb-site .tb-step::before     { content: counter(tbstep, persian); }

/* ---------- بخش نقشه صفحه اول ---------- */
body.tb-site .tb-mapsec {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--tb-rule);
  border-top: 4px solid var(--tb-cyan);
  background: var(--tb-white);
}
body.tb-site .tb-mapsec-map {
  position: relative; min-height: 380px; background: var(--tb-paper-2);
  border-inline-end: 1px solid var(--tb-rule); overflow: hidden;
}
body.tb-site .tb-mapsec-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(.12);
}
body.tb-site .tb-mapsec-info {
  display: flex; flex-direction: column; gap: 0; padding: 6px 0;
}
body.tb-site .tb-mapsec-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 18px; border-bottom: 1px solid var(--tb-paper-2);
}
body.tb-site .tb-mapsec-row i { flex: 0 0 auto; color: var(--tb-cyan); font-size: .95rem; margin-top: 5px; }
body.tb-site .tb-mapsec-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.tb-site .tb-mapsec-row b { font-size: .78rem; font-weight: 600; color: var(--tb-muted); }
body.tb-site .tb-mapsec-row span { font-size: .9rem; color: var(--tb-ink-2); line-height: 1.9; }
body.tb-site .tb-mapsec-row a { font-size: 1.05rem; color: var(--tb-ink); }
body.tb-site .tb-mapsec-row a:hover { color: var(--tb-hot); }
body.tb-site .tb-mapsec-info > .tb-btn { margin: 14px 18px 16px; }

@media (max-width: 900px) {
  body.tb-site .tb-mapsec { grid-template-columns: minmax(0, 1fr); }
  body.tb-site .tb-mapsec-map { min-height: 260px; border-inline-end: 0; border-bottom: 1px solid var(--tb-rule); }
}

/* بخش نقشه صفحه اول تمام عرض قالب است و ستون کناری ندارد، پس همان
   media query کافی است؛ ولی برای اطمینان، اگر روزی داخل ستون باریکی
   قرار گرفت هم تک ستونه می شود. */
body.tb-site .tb-mapsec { container-type: inline-size; }
@container (max-width: 620px) {
  body.tb-site .tb-mapsec { grid-template-columns: minmax(0, 1fr); }
  body.tb-site .tb-mapsec-map { border-inline-end: 0; border-bottom: 1px solid var(--tb-rule); }
}

/* ==========================================================================
   ۲۵) کارت نظر مشتری — با ستاره، دستگاه و تاریخ
   ========================================================================== */
/* گرید نظرات جای خود را به کاروسل بخش ۲۶ داد */
body.tb-site .tb-quote {
  display: flex; flex-direction: column; min-width: 0;
  padding: 18px 18px 16px; margin: 0; background: var(--tb-white);
  border-bottom: 1px solid var(--tb-rule); border-inline-end: 1px solid var(--tb-rule);
}
body.tb-site .tb-quote-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted var(--tb-rule);
}
body.tb-site .tb-quote-stars { font-size: .95rem; color: var(--tb-b5); letter-spacing: .06em; }
body.tb-site .tb-quote-stars-off { color: var(--tb-rule-2); }
body.tb-site .tb-quote-date { font-size: .76rem; color: var(--tb-faint); }

body.tb-site .tb-quote p {
  flex: 1; margin: 0 0 12px; font-size: .92rem; line-height: 2.0; color: var(--tb-ink-2);
  text-align: justify;
}
body.tb-site .tb-quote p::before { content: none; }   /* گیومه تزیینی نسخه قبل حذف شد */

body.tb-site .tb-quote footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--tb-paper-2); border-bottom: 0;
  font-size: 0;
}
body.tb-site .tb-quote-name { font-size: .88rem; font-weight: 600; color: var(--tb-ink); }
body.tb-site .tb-quote-meta {
  font-size: .78rem; color: var(--tb-muted);
  padding-inline-start: 8px; border-inline-start: 1px solid var(--tb-rule);
}
body.tb-site .tb-quote-dev {
  font-size: .74rem; color: var(--tb-cyan-dark);
  padding: 2px 8px; border: 1px solid var(--tb-cyan-wash-2); background: var(--tb-cyan-wash);
  margin-inline-start: auto;
}

@media (max-width: 1000px) {
  body.tb-site .tb-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body.tb-site .tb-quotes { grid-template-columns: minmax(0, 1fr); }
  body.tb-site .tb-quote { padding: 15px 14px; }
  body.tb-site .tb-quote-dev { margin-inline-start: 0; }
}

/* ==========================================================================
   ۲۶) کاروسل — بدون کتابخانه، با scroll-snap
   --------------------------------------------------------------------------
   Swiper عمدا استفاده نشد: صفحه اول اصلا آن را لود نمی کند و اضافه کردنش
   یعنی حدود ۱۵۰ کیلوبایت جاوااسکریپت و CSS برای یک نوار. اینجا کشیدن
   انگشت روی موبایل کار بومی مرورگر است، دکمه ها فقط scrollIntoView صدا
   می زنند، و اگر جاوااسکریپت هم اجرا نشود نوار با درگ کار می کند.
   ========================================================================== */
body.tb-site .tb-carousel { position: relative; }

body.tb-site .tb-carousel-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  border-top: 1px solid var(--tb-rule);
  border-inline-start: 1px solid var(--tb-rule);
  scrollbar-width: none;              /* فایرفاکس */
  -ms-overflow-style: none;
}
body.tb-site .tb-carousel-track::-webkit-scrollbar { display: none; }
body.tb-site .tb-carousel-track:focus-visible { outline: 2px solid var(--tb-cyan); outline-offset: 2px; }

body.tb-site .tb-carousel-track > * {
  flex: 0 0 calc(100% / 3);
  scroll-snap-align: start;
  min-width: 0;
}

/* دکمه ها و نقطه ها */
body.tb-site .tb-carousel-ctrl {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px;
}
body.tb-site .tb-carousel-btn {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--tb-white); border: 1px solid var(--tb-rule-2);
  color: var(--tb-ink); line-height: 1;
  border-radius: var(--tb-radius); cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

/* ---------- فلش ها ----------
   قبلا از کاراکترهای ‹ و › استفاده کرده بودم. این دو در یونیکد
   Bidi_Mirrored هستند، یعنی مرورگر در متن راست چین خودش آن ها را آینه
   می کند — پس دکمه ای که › گذاشته بودم روی صفحه ‹ دیده می شد و برعکس.
   حالا فلش با border کشیده می شود؛ گلیف نیست، پس آینه هم نمی شود. */
body.tb-site .tb-carousel-btn::before {
  content: '';
  width: 8px; height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;   /* عمدا فیزیکی، نه inline-end */
  display: block;
}
body.tb-site .tb-carousel-btn[data-tb-prev]::before { transform: rotate(45deg)   translate(-1px, 1px); }
body.tb-site .tb-carousel-btn[data-tb-next]::before { transform: rotate(-135deg) translate(-1px, 1px); }
body.tb-site .tb-carousel-btn:hover:not(:disabled) {
  background: var(--tb-ink); border-color: var(--tb-ink); color: #fff;
}
body.tb-site .tb-carousel-btn:disabled { opacity: .35; cursor: default; }

body.tb-site .tb-carousel-dots { display: flex; align-items: center; gap: 6px; }
body.tb-site .tb-carousel-dot {
  width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer;
  background: var(--tb-rule-2); border-radius: 50%;
  transition: background .14s ease, width .14s ease;
}
body.tb-site .tb-carousel-dot.is-on { background: var(--tb-cyan); }
body.tb-site .tb-carousel-dot:hover { background: var(--tb-hot); }

/* اگر همه کارت ها جا شدند، کنترل ها لازم نیست */
body.tb-site .tb-carousel.is-static .tb-carousel-ctrl,
body.tb-site .tb-carousel.is-single .tb-carousel-ctrl { display: none; }

@media (max-width: 1000px) {
  body.tb-site .tb-carousel-track > * { flex-basis: calc(100% / 2); }
}
@media (max-width: 620px) {
  body.tb-site .tb-carousel-track > * { flex-basis: 88%; }   /* لبه کارت بعدی دیده شود */
  body.tb-site .tb-carousel-ctrl { margin-top: 12px; }
}

/* ---------- هم قدی کارت ها ----------
   قبلا روی کارت height: 100% گذاشته بودم. وقتی ارتفاع قاب پدر نامعین
   است این مقدار به auto برمی گردد و بدتر از آن، چون ارتفاع صریح تعریف
   شده، خاصیت stretch فلکس هم از کار می افتد — نتیجه اش همان کارت بلندتر
   وسط بود. حالا فقط به stretch تکیه می کنیم. */
body.tb-site .tb-carousel-track { align-items: stretch; }
body.tb-site .tb-carousel-track > * { height: auto; align-self: stretch; }
body.tb-site .tb-carousel .tb-quote { display: flex; flex-direction: column; }

/* ---------- پاورقی کارت: همیشه دو سطر ----------
   نام دستگاه های بلند («یخچال ساید بای ساید») سطر را می شکستند و ارتفاع
   یک کارت را از بقیه بیشتر می کردند. حالا چیپ دستگاه همیشه سطر خودش را
   دارد، پس ساختار همه کارت ها یکسان است. */
body.tb-site .tb-quote footer {
  display: grid;
  grid-template-columns: auto auto 1fr;
  row-gap: 8px; column-gap: 8px;
  align-items: center;
}
body.tb-site .tb-quote-name { grid-column: 1; grid-row: 1; }
body.tb-site .tb-quote-meta { grid-column: 2; grid-row: 1; }
body.tb-site .tb-quote-dev  {
  grid-column: 1 / -1; grid-row: 2;
  justify-self: start; margin-inline-start: 0;
}

/* ردیف بالا هم قد بماند حتی اگر تاریخ نداشته باشد */
body.tb-site .tb-quote-top { min-height: 26px; }

/* ==========================================================================
   ۲۷) دو خط موازی، و بازطراحی گرید زیرصفحه ها
   ========================================================================== */

/* ---------- خط دوتایی ----------
   `border: 3px double` در مرورگر به شکل دو خط نازک با فاصله رندر می شود.
   زیر H1 یکی بود و بالای بخش زیرصفحه ها یکی دیگر، پس در صفحه فهرست که
   متنی بین شان نبود، چهار خط پشت سر هم دیده می شد. هر دو به یک خط مویی
   ساده تبدیل شدند. */
body.tb-site .page-h1 { border-bottom: 1px solid var(--tb-rule-2); }
body.tb-site .children-section { border-top: 0; padding-top: 6px; margin-top: 26px; }

/* ---------- گرید کارت زیرصفحه ها ----------
   قبلا گرید با gap بود و کارت ها کشیده نمی شدند، پس عنوان یک خطی و دو خطی
   ارتفاع ستون ها را ناهم تراز می کرد. حالا مثل بقیه بلوک های سایت یک
   ماتریس خط کشی شده است: هر خانه قاب دارد، کارت تا کف خانه کشیده می شود و
   تصویر نسبت ثابت دارد — پس هیچ ستونی از ستون کنارش جلو نمی افتد. */
body.tb-site .tk-cardgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--tb-rule);
  border-inline-start: 1px solid var(--tb-rule);
  align-items: stretch;
}
body.tb-site .tk-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--tb-white); padding: 0; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--tb-rule);
  border-inline-end: 1px solid var(--tb-rule);
  transition: background .15s ease;
}
body.tb-site .tk-card:hover { background: var(--tb-paper-3); }

body.tb-site .tk-card-img {
  display: block; position: relative; overflow: hidden;
  margin: 12px 12px 0; border: 1px solid var(--tb-rule); background: var(--tb-paper-2);
}
body.tb-site .tk-card-img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  filter: grayscale(.18) contrast(1.03);
  transition: filter .2s ease, transform .35s ease;
}
body.tb-site .tk-card:hover .tk-card-img img { filter: none; transform: scale(1.03); }
body.tb-site .tk-card-noimg {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  color: var(--tb-faint); font-size: 1.6rem; background: var(--tb-paper-2);
}

body.tb-site .tk-card-b {
  display: flex; align-items: flex-start; gap: 8px;
  flex: 1; padding: 12px 14px 14px;
}
body.tb-site .tk-card-t {
  flex: 1; min-width: 0; margin: 0;
  font-size: .97rem; font-weight: 600; line-height: 1.85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
body.tb-site .tk-card-t a { color: var(--tb-ink); border-bottom: 0; }
body.tb-site .tk-card:hover .tk-card-t a { color: var(--tb-cyan-dark); }

/* فلش با border کشیده می شود، نه کاراکتر — در راست چین آینه نمی شود */
body.tb-site .tk-card-go {
  flex: 0 0 auto; width: 7px; height: 7px; margin-top: 9px;
  border-top: 2px solid var(--tb-rule-2);
  border-right: 2px solid var(--tb-rule-2);
  transform: rotate(-135deg);
  transition: border-color .15s ease, transform .2s ease;
}
body.tb-site .tk-card:hover .tk-card-go {
  border-color: var(--tb-hot);
  transform: rotate(-135deg) translate(2px, -2px);
}

/* نوار رنگی بالای هر خانه، برای تفکیک بصری ردیف ها */
body.tb-site .tk-card { position: relative; }
body.tb-site .tk-card::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: var(--tb-cyan); opacity: 0; transition: opacity .15s ease;
}
body.tb-site .tk-card:hover::before { opacity: 1; }

@media (max-width: 900px) {
  body.tb-site .tk-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  body.tb-site .tk-cardgrid { grid-template-columns: minmax(0, 1fr); }
  body.tb-site .tk-card-img { margin: 10px 10px 0; }
  body.tb-site .tk-card-b { padding: 10px 12px 12px; }
}

/* ==========================================================================
   ۲۸) بنر افقی صفحه اول
   ========================================================================== */
body.tb-site .tb-banner {
  display: block;
  margin: 26px 0 0;
  border: 1px solid var(--tb-rule);
  background: var(--tb-paper-2);
  overflow: hidden;
  border-radius: var(--tb-radius);
}
body.tb-site .tb-banner picture,
body.tb-site .tb-banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
}
/* اگر بنر لینک باشد، بازخورد هاور بدهد */
body.tb-site a.tb-banner { transition: border-color .15s ease; }
body.tb-site a.tb-banner:hover { border-color: var(--tb-cyan); }
body.tb-site a.tb-banner img { transition: opacity .15s ease; }
body.tb-site a.tb-banner:hover img { opacity: .93; }

@media (max-width: 640px) {
  body.tb-site .tb-banner { margin-top: 18px; }
}

/* ==========================================================================
   ۲۹) نوار رنگی بوش (supergraphic) بالا و پایین سایت
   --------------------------------------------------------------------------
   فایل /images/bosch1.svg خودِ سوپرگرافیک کامل بوش است، ۷۲۰ در ۳۰۰ با
   شکل های زاویه دار. اگر آن را با background-size: 100% 100% روی یک نوار
   ۱۰ پیکسلی بکشیم دو مشکل پیش می آید: هم شکل های زاویه دار له می شوند، و
   هم چون preserveAspectRatio داخل فایل روی حالت پیش فرض (meet) است،
   محتوا وسط جا می افتد و دو طرفش سفید می ماند.

   راه حل: به جای فشردن، یک برش افقی از آن نشان می دهیم.
     background-size: 100% auto  → تصویر به عرض کامل کشیده می شود و
                                   ارتفاعش به تناسب بزرگ می ماند
     background-position: center → قاب ۱۰ پیکسلی، نوار میانی را قاب می گیرد
   نتیجه همان نوار رنگی سایت بوش است و در هر عرضی درست می ماند.

   اگر خواستی برش از بالاتر یا پایین تر باشد، فقط --tb-superg-y را عوض کن.
   ========================================================================== */
:root {
  --tb-superg-h: 10px;    /* ضخامت نوار */
  --tb-superg-y: 50%;     /* کدام برش افقی از گرافیک دیده شود */

  /* همان ۲۸ رنگ نوار بالایی فایل بوش، به شکل گرادیان.
     برای قاب بنر و خط بالا و پایین نوار منو از همین استفاده می شود، چون
     border-image با فایل SVG زاویه دار نتیجه تمیزی نمی دهد. */
  --tb-superg-grad: linear-gradient(to right, #952331 0.0%, #921c1d 3.61%, #b02739 8.46%, #ad1f24 12.37%, #c72026 15.09%, #d42027 16.97%, #cc2431 17.58%, #b72b4c 18.88%, #953371 20.74%, #88357f 21.42%, #853681 24.36%, #6f368b 26.38%, #39428f 29.11%, #233d7d 32.42%, #322c6f 41.81%, #2a3885 49.4%, #1d62a1 55.81%, #276ca5 57.02%, #438eb3 61.03%, #55a5bc 63.99%, #5cafbf 65.56%, #56abbd 67.77%, #439fb8 70.58%, #188eaf 73.72%, #038bae 74.26%, #069292 78.98%, #05a14b 88.75%, #03927e 100.0%);
}

body.tb-site .tb-superg {
  display: block;
  width: 100%;
  height: var(--tb-superg-h);
  background-image: url('/images/bosch1.svg');
  background-size: 100% auto;
  background-position: center var(--tb-superg-y);
  background-repeat: no-repeat;
  background-color: var(--tb-ink);   /* تا اگر فایل نبود، نوار خالی نماند */
  flex: 0 0 auto;
}

/* نوار پایین، بعد از پاورقی */
body.tb-site .tb-superg-bottom { margin-top: 0; }

@media (max-width: 640px) {
  :root { --tb-superg-h: 7px; }
}

@media print {
  body.tb-site .tb-superg { display: none; }
}

/* --------------------------------------------------------------------------
   جایگزین بدون فایل — اگر خواستی
   --------------------------------------------------------------------------
   اگر برش SVG را نپسندیدی، یا نخواستی صفحه یک درخواست اضافه برای فایل بزند،
   در layout کلاس tb-superg-css را کنار tb-superg بگذار. رنگ ها عینا از همان
   گرادیان نوار بالایی فایل بوش استخراج شده اند، پس تفاوت چشمی ندارد و در هر
   عرضی دقیق می ماند.
   -------------------------------------------------------------------------- */
body.tb-site .tb-superg.tb-superg-css {
  background-image: var(--tb-superg-grad);
  background-size: auto;
  background-position: 0 0;
}

/* ==========================================================================
   ۳۰) نوار بوش دور بنر و دور نوار منو + رنگ سرخ
   ========================================================================== */

/* ---------- قاب بنر ----------
   با border-image و همان گرادیان: لبه بالا و پایین کل طیف رنگی را نشان
   می دهند و لبه های کناری رنگ دو سر طیف را. هر بنری که در ادمین بگذاری
   خودکار این قاب را می گیرد و کاری لازم نیست. */
body.tb-site .tb-banner {
  border: 4px solid transparent;
  border-image: var(--tb-superg-grad) 1;
  border-radius: 0;
  background-clip: padding-box;
}
body.tb-site a.tb-banner:hover { border-image: var(--tb-superg-grad) 1; }
@media (max-width: 640px) {
  body.tb-site .tb-banner { border-width: 3px; }
}

/* ---------- خط بوش بالا و پایین نوار منو ----------
   به شکل pseudo-element، نه div جدا: نوار منو چسبان است و اگر خط ها
   عنصر جدا بودند با اسکرول از آن جدا می شدند. */
body.tb-site .tk-hdr-nav {
  border-bottom: 0;
  padding-block: 4px;
}
body.tb-site .tk-hdr-nav::before,
body.tb-site .tk-hdr-nav::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 4px;
  background: var(--tb-superg-grad);
  z-index: 2;
}
body.tb-site .tk-hdr-nav::before { top: 0; }
body.tb-site .tk-hdr-nav::after  { bottom: 0; }

/* نشانگر هاور منو داخل خودِ لینک بماند، چون نوار دیگر border ندارد */
body.tb-site .tk-nav > li > a { margin-bottom: 0; }

@media (max-width: 640px) {
  body.tb-site .tk-hdr-nav { padding-block: 3px; }
  body.tb-site .tk-hdr-nav::before,
  body.tb-site .tk-hdr-nav::after { height: 3px; }
}

/* ==========================================================================
   ۳۱) رنگ سرخ
   --------------------------------------------------------------------------
   --tb-red        : همان #FF0000 که دادی — برای پرکردن دکمه ها
   --tb-red-strong : یک پله تیره تر — برای متن سرخ روی سفید و حالت هاور

   دلیل داشتن دو تا: نسبت کنتراست #FF0000 با سفید ۴٫۰ به ۱ است که از حد
   استاندارد ۴٫۵ برای متن معمولی کمتر است. برای پرکردن دکمه چشمگیر است، ولی
   برای متن سرخ روی زمینه سفید و برای لینک، نسخه تیره تر خوانا تر است
   (۵٫۴ به ۱). اگر ترجیح می دهی همه جا همان سرخ خالص باشد، فقط مقدار
   --tb-red-strong را هم #FF0000 کن.
   ========================================================================== */
:root {
  --tb-red:        #FF0000;
  --tb-red-strong: #D80000;
  --tb-red-wash:   #FFECEC;
}

/* دکمه های اصلی */
body.tb-site .tk-btn-primary,
body.tb-site .tb-btn-primary {
  background: var(--tb-red);
  border-color: var(--tb-red);
  color: #fff;
}
body.tb-site .tk-btn-primary:hover,
body.tb-site .tb-btn-primary:hover {
  background: var(--tb-red-strong);
  border-color: var(--tb-red-strong);
  color: #fff;
}

/* دکمه ثبت درخواست بالای صفحات خدمات */
body.tb-site .tbs-svc-cta-btn {
  background: var(--tb-red); border-color: var(--tb-red);
}
body.tb-site .tbs-svc-cta-btn:hover {
  background: var(--tb-red-strong); border-color: var(--tb-red-strong);
}
/* شماره تلفن همان قاب سرخ توخالی می ماند تا از دکمه توپر قابل تفکیک باشد */
body.tb-site .tbs-svc-cta-tel { border-color: var(--tb-red-strong); color: var(--tb-red-strong); }
body.tb-site .tbs-svc-cta-tel span,
body.tb-site .tbs-svc-cta-tel i { color: var(--tb-red-strong); }
body.tb-site .tbs-svc-cta-tel:hover { background: var(--tb-red-strong); }

/* دکمه ارسال فرم ها */
body.tb-site .tb-hero-card .tk-formwrap button[type="submit"],
body.tb-site .tb-hero-card .tk-form-submit,
body.tb-site .form-submit-btn {
  background: var(--tb-red); border-color: var(--tb-red); color: #fff;
}
body.tb-site .tb-hero-card .tk-formwrap button[type="submit"]:hover,
body.tb-site .form-submit-btn:hover {
  background: var(--tb-red-strong); border-color: var(--tb-red-strong);
}

/* نوار پایین موبایل */
body.tb-site .tk-mb-form { background: var(--tb-red); }

/* حالت هاور لینک ها در کل سایت */
:root { --tb-hot: #D80000; }

/* نوار پایانی صفحه اول */
body.tb-site .tb-endcta .tb-btn-primary { background: var(--tb-red); border-color: var(--tb-red); }
body.tb-site .tb-endcta .tb-btn-primary:hover { background: #fff; border-color: #fff; color: var(--tb-ink); }

/* ==========================================================================
   ۳۲) پس زمینه تصویری بالای صفحه اول
   --------------------------------------------------------------------------
   تصویر از ادمین می آید و رویش یک لایه روشن می نشیند تا متن تیره و فرم
   سفید همچنان خوانا بمانند. شدت لایه هم از ادمین قابل تنظیم است.
   ========================================================================== */
body.tb-site .tb-hero.has-bg {
  position: relative;
  background-image: var(--tb-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 0;
}
body.tb-site .tb-hero.has-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(243, 242, 242, var(--tb-hero-ov, .82));
  backdrop-filter: saturate(.9);
}
body.tb-site .tb-hero.has-bg > * { position: relative; z-index: 1; }
/* کارت فرم روی تصویر کمی محکم تر بنشیند */
body.tb-site .tb-hero.has-bg .tb-hero-card {
  background: #fff;
  box-shadow: 0 6px 24px rgba(32, 30, 29, .10);
}
@media (max-width: 760px) {
  body.tb-site .tb-hero.has-bg { background-image: var(--tb-hero-bg-m, var(--tb-hero-bg)); }
}

/* ==========================================================================
   ۳۳) بلوک های لینک داخلی
   ========================================================================== */
body.tb-site .tb-rel {
  display: grid; gap: 0;
  margin-top: 30px;
  border-top: 1px solid var(--tb-rule);
}
body.tb-site .tb-rel-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--tb-rule);
}
body.tb-site .tb-rel-block:last-child { border-bottom: 0; }

body.tb-site .tb-rel-h {
  display: flex; align-items: center; gap: 9px;
  font-size: .98rem; font-weight: 600; color: var(--tb-ink);
  margin: 0 0 11px; padding: 0; border: 0;
}
body.tb-site .tb-rel-h::before { content: none; }
body.tb-site .tb-rel-ico {
  flex: 0 0 auto; width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--tb-cyan-wash); color: var(--tb-cyan-dark);
  font-size: .8rem; border-radius: var(--tb-radius);
}

body.tb-site .tb-rel-chips { display: flex; flex-wrap: wrap; gap: 7px; }
body.tb-site .tb-rel-chips a {
  font-size: .87rem; padding: 6px 12px;
  background: var(--tb-white); border: 1px solid var(--tb-rule);
  color: var(--tb-ink-2); border-radius: var(--tb-radius);
}
body.tb-site .tb-rel-chips a:hover {
  border-color: var(--tb-red-strong); color: var(--tb-red-strong); background: var(--tb-red-wash);
}
/* لینک به صفحه خدمت، پررنگ تر — این مسیر درآمدزاست */
body.tb-site .tb-rel-chips-strong a {
  font-weight: 600; font-size: .92rem; padding: 9px 16px;
  border-color: var(--tb-red-strong); color: var(--tb-red-strong);
}
body.tb-site .tb-rel-chips-strong a:hover { background: var(--tb-red); border-color: var(--tb-red); color: #fff; }

body.tb-site .tb-rel-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
body.tb-site .tb-rel-list li {
  font-size: .89rem; padding: 4px 0; break-inside: avoid;
  border-bottom: 1px dotted var(--tb-rule);
}
body.tb-site .tb-rel-list a { color: var(--tb-ink-2); }
body.tb-site .tb-rel-list a:hover { color: var(--tb-red-strong); }

@media (max-width: 640px) {
  body.tb-site .tb-rel-list { columns: 1; }
  body.tb-site .tb-rel-block { padding: 13px 0; }
  body.tb-site .tb-rel-chips a { font-size: .83rem; padding: 5px 10px; }
}

/* ==========================================================================
   ۳۴) لوگوی فوتر — باکس سفید نرم
   ========================================================================== */
body.tb-site .tk-footer-logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  padding: 12px 18px;
  border-radius: 6px;                     /* کمی نرم تر از بقیه سایت، عمدا */
  margin: 0 0 14px;
  max-width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: box-shadow .15s ease;
}
body.tb-site .tk-footer-logo img {
  display: block;
  max-width: 180px;
  max-height: 62px;
  width: auto; height: auto;
}
body.tb-site .tk-footer-logo:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .26); }

@media (max-width: 860px) {
  body.tb-site .tk-footer-logo { padding: 10px 14px; }
  body.tb-site .tk-footer-logo img { max-width: 150px; max-height: 52px; }
}

/* نام شعبه بالای اطلاعات تماس کنار نقشه */
body.tb-site .tb-mapsec-branch {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; margin: 0;
  background: var(--tb-ink); color: #fff;
  font-size: .95rem; font-weight: 600;
}
body.tb-site .tb-mapsec-branch::before {
  content: ''; flex: 0 0 auto; width: 4px; height: 15px; background: var(--tb-red);
}

/* ==========================================================================
   ۳۵) حذف شماره ها از سوالات متداول و فهرست مطالب
   ========================================================================== */

/* شماره کنار هر سوال */
body.tb-site .tk-faq-n { display: none; }
body.tb-site .tk-faq-a-in { padding-inline: 16px; }

/* شماره فهرست مطالب — جایش یک نقطه ریز آبی */
body.tb-site .toc-list li::before {
  content: '';
  min-width: 0; width: 6px; height: 6px;
  background: var(--tb-cyan); border-radius: 50%;
  transform: translateY(-2px);
  display: inline-block; place-items: initial;
  color: transparent; font-size: 0;
}
body.tb-site .toc-list li:hover::before { background: var(--tb-red); }
body.tb-site .toc-list li { gap: 10px; }

/* ==========================================================================
   ۳۶) مدال «پیام شما رسید» بعد از ارسال دیدگاه
   ========================================================================== */
body.tb-site .tb-thanks {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
body.tb-site .tb-thanks[hidden] { display: none; }
body.tb-site .tb-thanks-veil { position: absolute; inset: 0; background: rgba(32, 30, 29, .62); }
body.tb-site .tb-thanks-box {
  position: relative; z-index: 1; width: min(430px, 100%);
  background: var(--tb-white); border: 1px solid var(--tb-rule-2);
  border-top: 4px solid var(--tb-red);
  padding: 26px 24px 20px; text-align: center;
  border-radius: var(--tb-radius);
}
body.tb-site .tb-thanks-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto 14px;
  background: var(--tb-red); color: #fff; font-size: 1.5rem; border-radius: 50%;
}
body.tb-site .tb-thanks-box b { display: block; font-size: 1.14rem; margin-bottom: 8px; }
body.tb-site .tb-thanks-box p {
  margin: 0 0 18px; font-size: .92rem; line-height: 2; color: var(--tb-ink-2); text-align: justify;
}
body.tb-site .tb-thanks-acts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
body.tb-site .tb-thanks-acts .tk-btn { min-width: 130px; justify-content: center; }
@media (max-width: 480px) {
  body.tb-site .tb-thanks-box { padding: 20px 16px 16px; }
  body.tb-site .tb-thanks-acts .tk-btn { width: 100%; }
}

/* ==========================================================================
   ۳۷) اسلاید «مقالات مشابه» داخل کروسل بدون کتابخانه
   --------------------------------------------------------------------------
   این پارشال از Swiper به کروسل scroll-snap منتقل شد. قواعد قبلی اش در
   tehranbosch.css برای ساختار swiper-slide نوشته شده بود، پس ظاهر کارت
   اینجا صریح تعریف می شود تا به آن ها وابسته نماند.
   ========================================================================== */
body.tb-site .tbs-related-section .tb-carousel-track > .tbs-related-slide {
  display: flex; flex-direction: column; gap: 0;
  background: var(--tb-white);
  border-bottom: 1px solid var(--tb-rule);
  border-inline-end: 1px solid var(--tb-rule);
  padding: 12px;
  transition: background .15s ease;
}
body.tb-site .tbs-related-section .tb-carousel-track > .tbs-related-slide:hover { background: var(--tb-paper-3); }

body.tb-site .tbs-related-slide-img {
  display: block; overflow: hidden;
  border: 1px solid var(--tb-rule); background: var(--tb-paper-2);
  margin-bottom: 10px;
}
body.tb-site .tbs-related-slide-img img {
  display: block !important;
  width: 100% !important; height: auto !important;
  aspect-ratio: 16 / 10; object-fit: cover;
  margin: 0 !important; border: 0; border-radius: 0;
  filter: grayscale(.18); transition: filter .2s ease;
}
body.tb-site .tbs-related-slide:hover .tbs-related-slide-img img { filter: none; }
body.tb-site .tbs-related-slide-fallback {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  color: var(--tb-faint); font-size: 1.5rem;
}
body.tb-site .tbs-related-slide-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .93rem; font-weight: 600; line-height: 1.85; color: var(--tb-ink);
}
body.tb-site .tbs-related-slide:hover .tbs-related-slide-title { color: var(--tb-red-strong); }

body.tb-site .tbs-related-section .tb-carousel-track {
  border-top: 1px solid var(--tb-rule);
  border-inline-start: 1px solid var(--tb-rule);
}
body.tb-site .tbs-related-head h2 { font-size: 1.22rem; margin: 0 0 12px; }

/* ==========================================================================
   ۳۸) نقشه کنار فرم صفحه تماس با ما و درخواست تعمیر
   --------------------------------------------------------------------------
   فرم این دو صفحه از repair-form.php می آید، نه از بخش form. پس نقشه
   اینجا ستون کنار همان قاب فرم می شود و پایینش اطلاعات تماس.
   ========================================================================== */
body.tb-site .tb-formmap-side {
  display: flex; flex-direction: column; gap: 0;
  background: var(--tb-white);
  border: 1px solid var(--tb-rule);
  border-top: 4px solid var(--tb-cyan);
  align-self: start;
  min-width: 0;
}
body.tb-site .tb-formmap-side .tb-formmap-map {
  position: relative; min-height: 280px; flex: 1 1 auto;
  border: 0; border-bottom: 1px solid var(--tb-rule);
  background: var(--tb-paper-2); overflow: hidden;
}
body.tb-site .tb-formmap-side .tb-formmap-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(.12);
}
body.tb-site .tb-formmap-side .tb-mapsec-branch { margin: 0; }
body.tb-site .tb-formmap-side .tb-mapsec-row:last-child { border-bottom: 0; }

/* قاب فرم، ستون اول */
body.tb-site .tb-formmap > .tbs-request-form-wrap { min-width: 0; margin: 0; }

@media (max-width: 900px) {
  body.tb-site .tb-formmap-side .tb-formmap-map { min-height: 240px; }
}

/* ==========================================================================
   ۳۹) اصلاح چیدمان فرم و نقشه
   --------------------------------------------------------------------------
   قاب فرم و نقشه را دو ستونه گذاشته بودم، ولی این بلوک داخل ستون محتوای
   صفحه است که خودش کنار ستون کناری ۳۱۰ پیکسلی نشسته. یعنی عرض واقعی اش
   حدود ۸۳۰ پیکسل است و تقسیمش به دو، هر ستون را به ~۴۰۰ پیکسل می رساند —
   برای فرمی با برچسب فارسی خیلی تنگ است و متن مثل عکسی که فرستادی
   تکه تکه می شکند.

   پس: فرم تمام عرض ستون محتوا، و نقشه زیرش. خودِ نقشه کنار اطلاعات تماس
   دو ستونه می شود، که آن دو در همین عرض جا می گیرند.
   ========================================================================== */
/* ----------------------------------------------------------------------
   ریشه «نصف صفحه خالی» — سه دور دنبال جای اشتباه گشتم
   ----------------------------------------------------------------------
   قاب فرم صفحه تماس با ما داخل این عنصر است:
       <div class="container tbs-request-inner tbs-request-inner--single">
   و در CSS پایه:
       .tbs-request-inner--single { grid-template-columns: 1fr 1fr; }
   یعنی کلاسی به نام «single» یک گرید دو ستونه می سازد. در صفحه درخواست،
   ستون اول بلوک مراحل کار است و ستون دوم فرم. در صفحه تماس با ما بلوک
   مراحل نمایش داده نمی شود، پس ستون دوم خالی می ماند و فرم دقیقا ۵۰٪
   عرض می گیرد — همان نیم صفحه خالی.
   نه گرید من دخیل بود و نه ستون کناری؛ دو دور اشتباه آنجا را دستکاری
   کردم. کلاس --stack به همان div اضافه شد و اینجا تک ستونه می شود.
   ---------------------------------------------------------------------- */
body.tb-site .tbs-request-inner--stack {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  gap: 26px;
}

body.tb-site .tb-formmap {
  display: block;                   /* گرید نباشد تا هیچ ریاضی چیدمانی نماند */
  container-type: inline-size;      /* برای تقسیم نقشه و اطلاعات، پایین */
}
body.tb-site .tb-formmap > .tbs-request-form-wrap {
  width: 100%;
  max-width: none;
  margin: 0 0 22px;
}
body.tb-site .tb-formmap > .tb-formmap-side { width: 100%; }

/* حالت پیش فرض: نقشه بالا، اطلاعات تماس زیرش — همیشه سالم */
body.tb-site .tb-formmap-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-self: stretch;
}
body.tb-site .tb-formmap-side .tb-formmap-map {
  min-height: 260px;
  border: 0;
  border-bottom: 1px solid var(--tb-rule);
}
body.tb-site .tb-formmap-rows {
  display: flex; flex-direction: column; gap: 0; padding: 0;
  background: transparent; border: 0;
}
body.tb-site .tb-formmap-rows .tb-mapsec-row:last-child { border-bottom: 0; }

/* ----------------------------------------------------------------------
   دو ستونه شدن، فقط وقتی خودِ این بلوک جا دارد — نه بر اساس عرض پنجره.
   ----------------------------------------------------------------------
   دو بار با media query اشتباه کردم. عرض پنجره چیزی درباره عرض این بلوک
   نمی گوید: این بلوک داخل ستون محتواست، ستون محتوا کنار ستون کناری
   ۳۱۰ پیکسلی است، و آن ستون کناری در بعضی بازه ها هست و در بعضی نیست.
   پس یک پنجره ۸۰۰ پیکسلی می تواند ستون محتوای ۷۴۰ پیکسلی بدهد یا ۳۷۰
   پیکسلی، و media query هر دو را یکی می بیند.
   container query عرض واقعی خودِ بلوک را می سنجد، پس دیگر حدس در کار
   نیست. مرورگری هم که پشتیبانی نکند، روی همان حالت تک ستونه بالا
   می ماند که همیشه درست است.
   ---------------------------------------------------------------------- */
@container (min-width: 620px) {
  body.tb-site .tb-formmap-side { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  body.tb-site .tb-formmap-side .tb-formmap-map {
    min-height: 300px;
    border-bottom: 0;
    border-inline-end: 1px solid var(--tb-rule);
  }
}

/* ==========================================================================
   ۴۰) نسخه موبایل — بازبینی
   ========================================================================== */

/* ---------- ۱) هاور چسبیده روی لمس ----------
   روی موبایل بعد از هر تپ، حالت :hover روی همان عنصر باقی می ماند تا
   جای دیگری تپ شود. نتیجه اش همان کاشی آبی شده در عکس بود: کاربر یک بار
   رویش زده و رنگ مانده. با media query قابلیت hover، این حالت ها فقط
   جایی اعمال می شوند که موس واقعی هست. */
@media (hover: none) {
  body.tb-site .tb-device:hover,
  body.tb-site .tb-region:hover,
  body.tb-site .tk-card:hover,
  body.tb-site .tb-quote:hover,
  body.tb-site .toc-list li:hover,
  body.tb-site .tbs-related-slide:hover { background: var(--tb-white); }

  body.tb-site .tk-card:hover::before { opacity: 0; }
  body.tb-site .tk-card:hover .tk-card-img img,
  body.tb-site .tbs-related-slide:hover .tbs-related-slide-img img {
    filter: grayscale(.18); transform: none;
  }
  body.tb-site .tb-device-brands a:hover,
  body.tb-site .tb-rel-chips a:hover,
  body.tb-site .tb-districts a:hover {
    border-color: var(--tb-rule); color: var(--tb-muted); background: var(--tb-white);
  }
  body.tb-site .toc-list li:hover::before { background: var(--tb-cyan); }
  /* بازخورد لمس، جای هاور */
  body.tb-site .tb-device:active,
  body.tb-site .tb-region:active,
  body.tb-site .tk-card:active { background: var(--tb-paper-3); }
}

@media (max-width: 860px) {

  /* ---------- ۲) متن تراز دو طرفه، روی عرض کم ----------
     متن فارسی justify شده در ستون باریک، بین کلمه ها رودخانه سفید
     می سازد و خواندنش سخت می شود. روی موبایل راست چین می شود. */
  body.tb-site .page-content,
  body.tb-site .page-content p,
  body.tb-site .section-content,
  body.tb-site .section-content p,
  body.tb-site .tb-hero-lead,
  body.tb-site .tb-quote p,
  body.tb-site .tb-thanks-box p { text-align: start; }

  /* ---------- ۳) نوار آمار هیرو ----------
     چهار عدد روی عکس پس زمینه شناور بودند و خوانده نمی شدند. حالا یک
     جدول دو در دو با زمینه سفید و خط کش، جدا از عکس. */
  body.tb-site .tb-hero-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 18px;
    padding: 0;
    background: var(--tb-white);
    border: 1px solid var(--tb-rule);
    border-top: 3px solid var(--tb-red);
  }
  body.tb-site .tb-hero-facts div {
    flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: 13px 8px;
    border: 0;
    border-bottom: 1px solid var(--tb-rule);
    border-inline-start: 1px solid var(--tb-rule);
    text-align: center;
  }
  body.tb-site .tb-hero-facts div:nth-child(2n+1) { border-inline-start: 0; }
  body.tb-site .tb-hero-facts div:nth-last-child(-n+2) { border-bottom: 0; }
  body.tb-site .tb-hero-facts b {
    font-size: 1.45rem; line-height: 1.3; color: var(--tb-ink);
  }
  body.tb-site .tb-hero-facts span {
    font-size: .76rem; color: var(--tb-ink-2); line-height: 1.6;
  }

  /* پرده روی عکس هیرو کمی غلیظ تر، چون روی صفحه کوچک عکس شلوغ تر دیده می شود */
  body.tb-site .tb-hero.has-bg::before { background: rgba(243, 242, 242, .9); }

  /* ---------- ۴) کاشی دستگاه ها ----------
     آیکون بالای عنوان بود و یک سطر کامل می گرفت، در حالی که نیمه دیگر
     سطر خالی می ماند. حالا آیکون و عنوان یک سطرند و ارتفاع کاشی کم شد. */
  body.tb-site .tb-device {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas: "icon title" ".    chips";
    align-items: center;
    gap: 4px 10px;
    padding: 14px 14px;
  }
  /* توجه: عنوان داخل یک <a> است، پس ناحیه گرید باید روی همان <a> بنشیند
     نه روی <b> — فرزند مستقیم گرید، <a> است. */
  body.tb-site .tb-device > i { grid-area: icon; font-size: 1.25rem; justify-self: center; }
  body.tb-site .tb-device > a {
    grid-area: title;
    display: flex; align-items: center; min-height: 34px;   /* ناحیه لمسی بزرگ تر */
  }
  body.tb-site .tb-device > a b { font-size: .97rem; line-height: 1.6; }
  body.tb-site .tb-device > .tb-device-brands {
    grid-area: chips; margin-top: 4px; gap: 5px;
  }
  body.tb-site .tb-device-brands a { font-size: .74rem; padding: 3px 8px; }

  /* ---------- ۵) اندازه ناحیه لمسی ----------
     کف ۳۶ پیکسل برای چیپ ها و ۴۴ برای لینک های منو و کشو. */
  body.tb-site .tb-districts a,
  body.tb-site .tb-rel-chips a,
  body.tb-site .toc-list a {
    min-height: 36px; display: inline-flex; align-items: center;
  }
  body.tb-site .tk-drawer a,
  body.tb-site .tk-side-links a { min-height: 44px; display: flex; align-items: center; }

  /* ---------- ۶) فاصله بخش ها ----------
     فاصله های دسکتاپ روی موبایل صفحه را بی دلیل طولانی می کند. */
  body.tb-site .tb-sec { padding-block: 26px; }
  body.tb-site .tb-sec-head { margin-bottom: 14px; }
  body.tb-site .tb-hero { padding-block: 24px 26px; }
  body.tb-site .tb-hero-card { padding: 16px; }

  /* ---------- ۷) نوار پایین و ناحیه امن آیفون ----------
     روی آیفون های بدون دکمه، نوار خانه روی نوار پایین سایت می افتد.
     env(safe-area-inset-bottom) همان فاصله را اضافه می کند. */
  body.tb-site .tk-mobilebar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.tb-site { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 420px) {
  body.tb-site .tb-hero-facts b { font-size: 1.3rem; }
  body.tb-site .tb-hero-facts span { font-size: .72rem; }
  body.tb-site .tb-device { padding: 12px; }
}