/* =====================================================================
   سازه آزمون فولاد — sts-weld.com
   پوسته سایت. توکن های رنگ در :root پایین تعریف می شوند و روی
   main.css و site-base.css می نشینند.
   ===================================================================== */
/* =====================================================================
   سازه آزمون فولاد — لایه اختصاصی سایت
   بعد از main.css بارگذاری می شود و سه کار می کند:
     ۱. فونت IRANYekanX را واقعاً تعریف می کند
     ۲. سیستم اندازه فونت (Type Scale) را یکدست می کند
     ۳. اجزای اختصاصی این سایت را می سازد
   رنگ ها و طرح کلی main.css دست نخورده می ماند.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ۱ — فونت
   فایل های IRANYekanX در پوشه /fonts موجود بودند و layout هم preload
   می کرد، ولی هیچ جا @font-face نداشت؛ یعنی مرورگر فونت را دانلود
   می کرد و بعد دور می ریخت و سایت با فونت سیستمی رندر می شد.
   font-display: swap تا متن در بارگذاری اول نامرئی نماند.
--------------------------------------------------------------------- */
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Light.woff2') format('woff2'),
       url('/fonts/IRANYekanX-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Regular.woff2') format('woff2'),
       url('/fonts/IRANYekanX-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-DemiBold.woff2') format('woff2'),
       url('/fonts/IRANYekanX-DemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Bold.woff2') format('woff2'),
       url('/fonts/IRANYekanX-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-ExtraBold.woff2') format('woff2'),
       url('/fonts/IRANYekanX-ExtraBold.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------
   ۲ — سیستم اندازه فونت
   یک منبع حقیقت. هر اندازه با clamp() بین موبایل و دسکتاپ سیال است، پس
   نه به بریک پوینت وابسته ایم و نه در تبلت پرش داریم.
   نقاط لنگر: ۳۶۰px (موبایل) تا ۱۲۸۰px (دسکتاپ).

   ┌────────────┬─────────┬────────┬──────────┐
   │ │ موبایل │ تبلت │ دسکتاپ │
   ├────────────┼─────────┼────────┼──────────┤
   │ H1 │ ۲۶ │ ۳۰ │ ۳۶ │
   │ H2 │ ۲۲ │ ۲۴ │ ۲۸ │
   │ H3 │ ۱۹ │ ۲۰ │ ۲۲ │
   │ H4 │ ۱۷ │ ۱۸ │ ۱۹ │
   │ متن اصلی │ ۱۶٫۵ │ ۱۷ │ ۱۸ │
   │ لید │ ۱۸ │ ۱۹ │ ۲۰ │
   │ منو/دکمه │ ۱۵–۱۶ │ ۱۶ │ ۱۶–۱۷ │
   │ فرم │ ۱۶ │ ۱۶ │ ۱۶ │
   │ ریز │ ۱۴ │ ۱۴٫۵ │ ۱۵ │
   └────────────┴─────────┴────────┴──────────┘

   ورودی فرم هیچ وقت زیر ۱۶px نمی رود: سافاری موبایل روی هر ورودیِ
   کوچک تر خودکار زوم می کند و کاربر از صفحه پرت می شود بیرون.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   پالت رنگ
   site-base.css توکن های رنگ را روی فیروزه ای می گذارد؛ سایت قدیم تهران
   ایمن آبی/سرمه ای بود (‎#0033CC‎ عنوان ها، ‎#6D7EDC‎ هدر، ‎#4a0bb4‎ فوتر).
   اینجا فقط همان خانواده رنگی برمی گردد — چیدمان و طرح دست نمی خورد.
   کنتراست هر جفت روی سفید دست کم ۴٫۵:۱ است.
--------------------------------------------------------------------- */
:root {
  /* ---------------------------------------------------------------
     هویت رنگی سازه آزمون فولاد — آبی + قرمز
     همان رنگ های سایت قدیم است. سه رنگ که کنتراستشان زیر حد خوانایی
     بود کمی تیره تر شده اند و بس؛ رنگ پایه دست نخورده مانده:

       #2450ab  نوار بالا و تب های منو   ۷٫۵:۱  ✔ بدون تغییر
       #003399  جعبه عنوان صفحه          ۱۰٫۹:۱ ✔ بدون تغییر
       #000066  رنگ لینک                 ۱۷٫۶:۱ ✔ بدون تغییر
       #E72727  نوار قرمز                ۴٫۵:۱  ✔ فقط پس زمینه، نه متن
       #fe0001  نوار کپی رایت            ۴٫۰:۱  ✖ → #C81E1E (۵٫۷:۱)
       #797979  فوتر                     ۴٫۴:۱  ✖ → #5C5C5C (۷٫۰:۱)
       #eb4d4c  منوی موبایل              ۳٫۷:۱  ✖ → #D93A39 (۴٫۹:۱)

     متن قرمز هرگز #E72727 نیست؛ برای متن از --red-text استفاده کنید.
     --------------------------------------------------------------- */
  --brand-blue: #2450ab;
  --brand-blue-mid: #2450ab;
  --brand-blue-dark: #003399;
  --brand-teal: #2450ab;
  --brand-teal-mid: #2450ab;
  --brand-teal-dark: #003399;
  --brand-teal-deep: #000066;
  --brand-teal-pale: #EEF2FB;
  --brand-teal-border: #C3D0EA;
  --brand-navy: #000066;
  --brand-navy-soft: #003399;

  --action-blue: #2450ab;
  --action-blue-dark: #003399;
  --action-blue-deep: #000066;

  --accent: #2450ab;
  --accent-dark: #003399;
  --accent-rgb: 36, 80, 171;
  --blue: #2450ab;
  --blue-dark: #003399;
  --blue-light: #EEF2FB;
  --blue-border: #C3D0EA;

  /* قرمز تاکیدی — نوار، نشان، حاشیه. متن روی قرمز همیشه سفید است. */
  --red: #E72727;
  --red-text: #C81E1E;   /* ۵٫۷:۱ — تنها قرمزی که برای متن مجاز است */
  --red-dark: #C81E1E;
  --red-pale: #FDECEC;
  --red-border: #F5C2C2;
  --red-mobile: #D93A39;

  /* نام های قدیمیِ توکن طلایی به قرمز نگاشته می شوند تا اجزای موجود
     (نشان ها، زیرخط پرسش و پاسخ، حاشیه ها) بدون بازنویسی کار کنند. */
  --gold: #E72727;
  --gold-dark: #C81E1E;
  --gold-pale: #FDECEC;
  --gold-border: #F5C2C2;
  --brand-yellow: #E72727;
  --amber: #E72727;
  --amber-dark: #C81E1E;

  --footer-from: #5C5C5C;
  --footer-to: #6E6E6E;
  --footer-link: #E4E4E4;   /* #CCCCCC قدیمی روی این خاکستری ۳٫۹:۱ بود */
  --copyright-bg: #C81E1E;
  --faq-underline: #E72727;
  --bar-breadcrumb: #ececec;
  --section-alt: #F0F0F0;

  --font: 'IRANYekanX', 'Dana', Tahoma, system-ui, sans-serif;

  --fs-h1: clamp(1.625rem, 1.381rem + 1.087vw, 2.250rem); /* 26 → 36 */
  --fs-h2: clamp(1.375rem, 1.228rem + 0.652vw, 1.750rem); /* 22 → 28 */
  --fs-h3: clamp(1.188rem, 1.114rem + 0.326vw, 1.375rem); /* 19 → 22 */
  --fs-h4: clamp(1.063rem, 1.014rem + 0.217vw, 1.188rem); /* 17 → 19 */
  --fs-body: clamp(1.031rem, 0.995rem + 0.163vw, 1.125rem); /* 16.5 → 18 */
  --fs-lead: clamp(1.125rem, 1.076rem + 0.217vw, 1.250rem); /* 18 → 20 */
  --fs-ui: clamp(0.938rem, 0.913rem + 0.109vw, 1.000rem); /* 15 → 16 */
  --fs-btn: clamp(1.000rem, 0.976rem + 0.109vw, 1.063rem); /* 16 → 17 */
  --fs-small: clamp(0.875rem, 0.851rem + 0.109vw, 0.938rem); /* 14 → 15 */
  --fs-tiny: clamp(0.813rem, 0.801rem + 0.054vw, 0.875rem); /* 13 → 14 */
  --fs-form: 1rem; /* ثابت ۱۶ */

  --lh-h1: 1.35;
  --lh-h2: 1.45;
  --lh-h3: 1.5;
  --lh-body: 1.95; /* متن فنی طولانی است؛ کمی بازتر از پیش فرض */
  --lh-lead: 1.85;
  --lh-ui: 1.6;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 3.5rem;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* رقم فارسی و لاتین در یک خط هم ارتفاع می شوند */
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- تیترها ------------------------------------------------------- */
.page-h1,
.error-page h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 800;
  /* بدون letter-spacing: خط فارسی متصل است و فاصله منفی، اتصال حرف ها
     را باز می کند. روی لاتین بی ضرر بود، روی فارسی نه. */
  margin: 0 0 var(--sp-3);
}
.page-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-light);
  font-weight: 400;
  margin: 0 0 var(--sp-4);
}
.page-head { margin-bottom: var(--sp-5); }
.page-meta {
  font-size: var(--fs-small);
  color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin: 0;
}
.page-meta i { margin-inline-end: 4px; }

/* h2 داخل متن و عنوان بخش ها یک سطح بصری اند و باید یک اندازه باشند.
   قبلاً ۲۲px و ۱۸px بودند و همان اختلافی را می ساختند که در صفحه
   به چشم می آمد: دو تیتر هم رتبه با دو اندازه متفاوت. */
.page-content h2,
.page-section .section-title,
.section-title,
.comments-title,
.related-title,
.home-section-title,
.hs-title,
.repair-cta h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  margin: var(--sp-7) 0 var(--sp-3);
  /* letter-spacing حذف شد — همه این تیترها فارسی اند و فاصله منفی
     اتصال حروف را باز می کند. روی شماره تلفن (rt-tel، hero-phone) که
     رقم لاتین است نگه داشته شده، چون آنجا خوانایی را بهتر می کند. */
}
.page-content h2:first-child,
.page-head + .page-content h2 { margin-top: 0; }

.page-content h3,
.child-card-title,
.news-item-title,
.product-card-title,
.hs-card-title,
.hs-news-title,
.service-card-body h3,
.related-card-body h3,
.article-card h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  margin: var(--sp-5) 0 var(--sp-2);
}
.child-card-title, .news-item-title, .product-card-title,
.hs-card-title, .hs-news-title, .service-card-body h3,
.related-card-body h3, .article-card h3 { margin: 0 0 var(--sp-2); }

.page-content h4 {
  font-size: var(--fs-h4);
  line-height: 1.55;
  font-weight: 600;
  margin: var(--sp-4) 0 var(--sp-2);
}

/* --- متن ---------------------------------------------------------- */
.page-content,
.page-content-intro,
.section-text .section-content,
.home-about-text,
.faq2-a-inner,
.faq-answer-inner,
.comment-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.page-content p,
.page-content-intro p,
.section-text .section-content p { margin: 0 0 var(--sp-4); }
.page-content li,
.section-text .section-content li { margin-bottom: var(--sp-2); }
.page-content ul, .page-content ol { padding-inline-start: 1.5em; margin-bottom: var(--sp-5); }

/* ---------------------------------------------------------------------
   عرض ستون متن
   نسخه قبلی روی تک تک پاراگراف ها max-width می گذاشت. نتیجه این بود که
   پاراگراف ۷۸۰ پیکسل می شد ولی تصویر و جدول و کارت ها ۱۱۴۵ پیکسل، و یک
   ستون خالیِ ۳۶۵ پیکسلی کنار متن می ماند که شبیه خرابی بود.
   حالا عرض روی خودِ ستون کنترل می شود (چیدمان دوستونی پایین تر) و همه
   اجزای صفحه یک لبه دارند.
--------------------------------------------------------------------- */

.page-content strong { font-weight: 700; }
.page-content a { text-underline-offset: .25em; }

/* --- اجزای رابط --------------------------------------------------- */
.ni-link, .dd-link, .drawer-call, .drawer-search input,
.children-list a, .hs-simple-list a, .toc-list li a {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}
.dd-sub li a, .footer-links a, .footer-contact li,
.footer-text, .footer-desc, .ti-links-col ul a {
  font-size: var(--fs-small);
  line-height: 1.85;
}
.footer-title, .footer-col-title, .ti-links-col h3, .ti-clinic-item h3 {
  font-size: var(--fs-h4);
  font-weight: 700;
}
.breadcrumb ol { font-size: var(--fs-tiny); }
.toc-title { font-size: var(--fs-h4); font-weight: 700; }

.cta-btn, .btn, .btn-form-submit, .form-submit-btn,
.home-about-btn, .hs-more-btn, .pg {
  font-size: var(--fs-btn);
  line-height: 1.4;
  font-weight: 600;
}

/* --- فرم ها ------------------------------------------------------- */
.front-form label, .form-field label {
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--sp-2);
  display: block;
}
.front-form input, .front-form select, .front-form textarea,
.form-field input, .form-field select, .form-field textarea,
.search-input-wrapper input, .captcha2-input {
  font-family: var(--font);
  font-size: var(--fs-form);
  line-height: 1.7;
}
.front-form input, .front-form select, .front-form textarea {
  padding: .7em .9em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  background: var(--white);
}
.front-form input:focus, .front-form select:focus, .front-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.front-form .form-group { margin-bottom: var(--sp-4); }
.front-form .required { color: var(--red); margin-inline-start: 3px; }

/* تله ربات — از دید کاربر پنهان، ولی برای ربات پرشدنی.
   جابه جایی عمدی است نه افقی: در صفحه راست به چپ، left منفی سمت
   inline-end است و یک اسکرول افقی می سازد. */
.hp-field {
  position: absolute !important;
  top: -9999px; inset-inline-start: 0;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ‏overflow-x: hidden روی html یک scroll-container می سازد و
   position: sticky هدر را از کار می اندازد. clip همان محافظت را بدون
   آن عارضه می دهد. */
html, body { overflow-x: clip; max-width: 100%; }

.form-success-msg {
  background: var(--green-light);
  border: 1px solid var(--green);
  color: #14532d;
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  font-size: var(--fs-body);
}
.form-success-msg .fs-title { font-weight: 700; margin: 0 0 var(--sp-2); }
.form-success-msg .fs-track { margin: 0; font-size: var(--fs-small); }
.form-success-msg strong { font-size: var(--fs-h3); letter-spacing: .08em; }
.form-error-msg {
  background: var(--red-light);
  border: 1px solid var(--red);
  color: #7f1d1d;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  margin-top: var(--sp-3);
}

/* --- ریز متن ها ---------------------------------------------------- */
.child-card-excerpt, .news-item-excerpt, .hs-card-excerpt,
.search-result-excerpt, .gallery-caption, .page-content figcaption,
.comment-date, .news-item-date, .hs-card-date, .share-label,
.download-size, .product-note, .price-box-note {
  font-size: var(--fs-small);
  line-height: 1.75;
}
.comment-badge, .footer-bottom, .ti-bottom { font-size: var(--fs-tiny); }

/* جدول ها: ۱۳px برای عدد و مشخصات فنی کوچک بود */
.page-content table, .section-table td, .section-table th,
.page-content thead th, .page-content td {
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* ---------------------------------------------------------------------
   ۲.۵ — چیدمان صفحه: ستون متن + ساید بار چسبان
   ظرف ۱۱۶۰ پیکسل است. یک ستون متنِ تمام عرض یعنی خط های ۱۱۰ نویسه ای که
   چشم موقع برگشت به سر خط بعدی گم می شود. تقسیمش به ۷۷۰ + ۳۰۰ هم
   خوانایی را درست می کند و هم آن فضا را با چیزی مفید پر می کند.
--------------------------------------------------------------------- */
.page-article.has-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6) 40px;
  align-items: start;
}
.page-main { min-width: 0; }
.page-aside { min-width: 0; position: sticky; top: 90px; }

/* فاصله عمودی اجزا حالا داخل ستون اصلی تنظیم می شود، نه روی article */
.page-article.has-aside > .page-main > * + * { margin-block-start: var(--sp-6); }
.page-article.has-aside > .page-main > .children-section,
.page-article.has-aside > .page-main > .repair-cta,
.page-article.has-aside > .page-main > .tcar { margin-block-start: var(--sp-7); }

.aside-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.aside-card > h2 {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--accent);
}
.aside-card ul { list-style: none; margin: 0; padding: 0; }
.aside-card li { margin-bottom: var(--sp-2); }
.aside-card li:last-child { margin-bottom: 0; }
.aside-card a { font-size: var(--fs-small); line-height: 1.9; color: var(--text); }
.aside-card a:hover { color: var(--accent); }

/* فهرست مطالب داخل ساید بار — بلندش را اسکرول می کنیم تا کارت های
   بعدی از پایین صفحه بیرون نزنند */
.aside-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.aside-toc li { counter-increment: toc; display: flex; gap: 8px; }
.aside-toc li::before {
  content: counter(toc);
  flex-shrink: 0;
  min-width: 1.6em; height: 1.6em;
  display: grid; place-items: center;
  background: var(--blue-light); color: var(--accent-dark);
  border-radius: 5px;
  font-size: var(--fs-tiny); font-weight: 700;
  margin-top: .3em;
}
.aside-toc .aside-toc-scroll { max-height: 46vh; overflow-y: auto; }

.aside-contact { background: var(--blue-light); border-color: var(--blue-border); }
.aside-contact .ac-phone {
  display: flex; align-items: center; gap: .5em;
  font-size: var(--fs-h4); font-weight: 800; direction: ltr;
  color: var(--accent-dark);
  padding: var(--sp-2) 0;
}
.aside-contact .ac-note { font-size: var(--fs-tiny); color: var(--text-light); margin: 0 0 var(--sp-3); }
.aside-contact .btn { width: 100%; justify-content: center; margin-top: var(--sp-2); }

/* روی تبلت و موبایل یک ستونه؛ ساید بار بعد از متن می آید و چسبان نیست */
@media (max-width: 1024px) {
  /* ‏minmax(0,1fr) و نه 1fr خالی. «1fr» یعنی minmax(auto,1fr) و آن
     auto اجازه نمی دهد ستون از اندازه min-content محتوایش باریک تر
     شود — یعنی یک تصویر پهن یا جدولی با min-width، ستون را از عرض
     صفحه بیرون می برد. قاعده دسکتاپ همین محافظ را داشت و اینجا،
     دقیقا جایی که بیشترین نیاز به آن است، افتاده بود. */
  .page-article.has-aside { grid-template-columns: minmax(0, 1fr); }
  .page-aside { position: static; margin-top: var(--sp-6); }
  .aside-toc .aside-toc-scroll { max-height: none; }
  .page-aside .aside-card { max-width: none; }
  /* یک ستونه شد، پس عرض متن دوباره باید مهار شود — وگرنه روی تبلت
     خط ها ۹۵ نویسه می شوند. حاشیه قرینه، نه ستون خالی در یک طرف. */
  .page-article.has-aside > .page-main { max-width: 80ch; margin-inline: auto; }
}
@media (max-width: 720px) {
  .page-article.has-aside > .page-main { max-width: none; }
}

/* بلوک های متنی صفحه اصلی و صفحات فهرست ساید بار ندارند، پس عرضشان
   خودشان محدود و وسط چین می شود — حاشیه قرینه عمدی به نظر می رسد،
   برخلاف یک ستون خالی در یک طرف. */
.hs-html-body,
.page-type-hub > .page-content,
.page-type-hub > .page-content-intro,
.page-type-product > .page-content {
  max-width: 80ch;
  margin-inline: auto;
}

/* --- نشان برند --------------------------------------------------------
   وقتی لوگو هست، نشان متنی فقط برای صفحه خوان می ماند. اگر فایل لوگو
   ۴۰۴ بدهد، اسکریپت کلاس brand-has-logo را برمی دارد و همین نشان متنی
   دیده می شود. سقف عرض هم هست تا هیچ وقت ردیف هدر را نشکند. */
.brand-has-logo .brand-fallback {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
.site-logo, .drawer-logo { max-inline-size: 300px; overflow: hidden; }
.site-logo img, .drawer-logo img { max-width: 100%; object-fit: contain; }
.brand-name {
  display: block; font-weight: 800; line-height: 1.35;
  font-size: var(--fs-h4); white-space: nowrap;
}
.brand-tag {
  display: block; font-size: var(--fs-tiny); color: var(--text-light);
  line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- جعبه هزینه تعمیر -------------------------------------------- */
.price-box {
  background: var(--blue-light);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.price-box-label {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: var(--sp-2);
}
.price-box-range {
  font-size: var(--fs-lead);
  line-height: 1.7;
}
.price-box-range strong { font-weight: 800; color: var(--accent-dark); }
.price-box-note { color: var(--text-light); margin: var(--sp-2) 0 0; }

/* --- فراخوان تماس -------------------------------------------------- */
.repair-cta {
  margin: var(--sp-7) 0 0;
  padding: var(--sp-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.repair-cta h2 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-h3); }
.repair-cta p { margin: 0; color: rgba(255,255,255,.9); font-size: var(--fs-small); }
.repair-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* نسخه بالای صفحه — فشرده تر، تا متن اصلی را عقب نراند */
.repair-cta-top {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-5);
}
.repair-cta-top h2 { font-size: var(--fs-h4); }

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .75em 1.4em;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-call {
  background: #fff; color: #1e3a8a; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.btn-call:hover { color: #1e3a8a; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.btn-call-alt { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-call-alt:hover { color: #fff; background: rgba(255,255,255,.24); }
.btn-request {
  background: #f59e0b; color: #1f2937; font-weight: 800;
  box-shadow: 0 4px 14px rgba(245,158,11,.35);
}
.btn-request:hover { color: #1f2937; background: #fbbf24; }

/* ---------------------------------------------------------------------
   صفحه محصول (PDP)
   دو ستون: تصویر با نوار بندانگشتی، و اطلاعات خرید. همان چیدمانی که
   کاربر ایرانی از فروشگاه های بزرگ انتظار دارد.
--------------------------------------------------------------------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  margin-bottom: var(--sp-6);
}
.pdp-media { min-width: 0; }
.pdp-info { min-width: 0; }
.pdp-stage {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
  padding: var(--sp-4);
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pdp-stage img { width: 100%; height: 100%; object-fit: contain; }
.pdp-noimg { color: var(--text-muted); font-size: var(--fs-small); background: var(--bg-light); }

.pdp-thumbs {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.pdp-thumb {
  width: 72px; height: 72px; padding: 4px;
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--white); cursor: pointer;
  transition: border-color .15s;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb:hover { border-color: var(--blue-border); }
.pdp-thumb.is-active { border-color: var(--accent); }

.pdp-facts { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.pdp-facts li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px dashed var(--border);
  font-size: var(--fs-body);
}
.pdp-facts span { color: var(--text-light); font-size: var(--fs-small); }
.pdp-facts strong { font-weight: 700; }
.pdp-facts .is-in { color: var(--green); }
.pdp-facts .is-out { color: var(--red); }

.pdp-models h2 { font-size: var(--fs-h3); margin: 0 0 var(--sp-3); }
.pdp-model-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.pdp-model-list li {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-body);
  background: var(--white);
}
.pdp-model-list .pm-name { font-weight: 700; flex: 1 1 auto; }
.pdp-model-list .pm-price { color: var(--accent-dark); font-weight: 600; }
.pdp-model-list .pm-stock { font-size: var(--fs-small); }
.pdp-model-list .is-in .pm-stock { color: var(--green); }
.pdp-model-list .is-out { opacity: .65; }
.pdp-model-list .is-out .pm-stock { color: var(--red); }

.pdp-buy {
  border: 1px solid var(--blue-border); background: var(--blue-light);
  border-radius: var(--radius-xl); padding: var(--sp-5);
}
.pdp-note { color: var(--text-light); margin: 0 0 var(--sp-4); }
.pdp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pdp-actions .btn-call { background: var(--accent); color: #fff; }
.pdp-actions .btn-call:hover { background: var(--accent-dark); color: #fff; }
.pdp-actions .btn-call-alt {
  background: var(--white); color: var(--accent); border-color: var(--accent);
}
.pdp-actions .btn-call-alt:hover { color: var(--accent-dark); background: #fff; }
.pdp-wa {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: var(--sp-3); font-size: var(--fs-small); font-weight: 600;
  color: #128c7e;
}

/* --- جدول مشخصات و ویژگی ها ----------------------------------------- */
.pdp-spec { margin: var(--sp-7) 0; }
.pdp-spec-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5); align-items: start;
}
.pdp-spec-table { width: 100%; border-collapse: collapse; }
.pdp-spec-table th,
.pdp-spec-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small); line-height: 1.8; text-align: start;
}
.pdp-spec-table th {
  width: 38%; color: var(--text-light); font-weight: 600;
  background: var(--bg-light);
}
.pdp-spec-table tr:last-child th,
.pdp-spec-table tr:last-child td { border-bottom: 0; }
.pdp-spec-table { border: 1px solid var(--border); border-radius: var(--radius-lg);
                  overflow: hidden; }

.pdp-features { list-style: none; margin: 0; padding: 0; }
.pdp-features li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) 0; font-size: var(--fs-small); line-height: 1.85;
}
.pdp-features i {
  flex-shrink: 0; margin-top: .45em;
  color: var(--green); font-size: .8em;
}

/* --- کارت محصول در فهرست دسته --------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-5) 0 var(--sp-6);
}
.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.product-card:hover {
  box-shadow: var(--shadow); transform: translateY(-3px);
  border-color: var(--blue-border);
}
.pc-media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1; padding: var(--sp-4);
  background: var(--bg-light);
}
.pc-media img { width: 100%; height: 100%; object-fit: contain; }
.pc-noimg { color: var(--text-muted); font-size: 2rem; }
.pc-brand {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px;
  background: var(--accent); color: #fff;
  font-size: var(--fs-tiny); font-weight: 600;
  padding: .15em .7em; border-radius: 999px;
}
.pc-body {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4); flex: 1 1 auto;
}
.product-card-title { margin: 0; }
.product-card-title a { color: var(--text); }
.product-card-title a:hover { color: var(--accent); }
.pc-models { color: var(--text-light); font-size: var(--fs-tiny); margin: 0; }
.pc-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2);
}
.product-card-price { color: var(--accent-dark); font-weight: 700; font-size: var(--fs-small); }
.product-card-stock { font-size: var(--fs-tiny); font-weight: 600; }
.product-card-stock.is-in { color: var(--green); }
.product-card-stock.is-out { color: var(--red); }
.pc-cta {
  display: block; text-align: center;
  padding: .65em 1em; margin-top: var(--sp-2);
  border: 1px solid var(--accent); border-radius: var(--radius);
  color: var(--accent); font-size: var(--fs-small); font-weight: 600;
}
.pc-cta:hover { background: var(--accent); color: #fff; }

/* --- تماس ---------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.contact-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  background: var(--bg-light);
}
.contact-card h2 { margin-top: 0; }
.contact-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.contact-list li {
  display: flex; gap: var(--sp-3); justify-content: space-between;
  padding: var(--sp-3) 0; border-bottom: 1px dashed var(--border);
  font-size: var(--fs-body);
}
.contact-list li > span:first-child { color: var(--text-light); font-size: var(--fs-small); }
.contact-map iframe {
  width: 100%; min-height: 320px; height: 100%;
  border: 0; border-radius: var(--radius-xl);
}

/* ---------------------------------------------------------------------
   کروسل افقی — مطالب مرتبط، خدمات مرتبط، محصولات مشابه
   با scroll-snap بومی؛ بدون جاوااسکریپت هم با انگشت اسکرول می شود.
--------------------------------------------------------------------- */
.tcar { margin: var(--sp-7) 0 0; }
.tcar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-4);
}
.tcar-head .section-title { margin: 0; }
.tcar-head-side { display: flex; align-items: center; gap: var(--sp-3); }
.tcar-more { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.tcar-nav { display: flex; gap: var(--sp-2); }
.tcar-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--white); color: var(--text); cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
}
.tcar-btn:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.tcar-btn:disabled { opacity: .35; cursor: default; }

.tcar-track {
  list-style: none; margin: 0; padding: 4px 0 var(--sp-3);
  display: flex; gap: var(--sp-4);
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tcar-track::-webkit-scrollbar { display: none; }
.tcar-item { flex: 0 0 auto; width: 250px; scroll-snap-align: start; }
.tcar-compact .tcar-item { width: 210px; }

.tcar-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden; color: inherit;
  transition: box-shadow .18s, transform .18s;
}
.tcar-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); color: inherit; }
.tcar-img { position: relative; display: block; background: var(--bg-light); }
.tcar-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tcar-compact .tcar-img img { aspect-ratio: 1 / 1; object-fit: contain; padding: 10px; }
.tcar-badge {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px;
  background: var(--accent); color: #fff; font-size: var(--fs-tiny);
  padding: .15em .7em; border-radius: 999px;
}
.tcar-body { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4); }
.tcar-title {
  font-size: var(--fs-h4); font-weight: 700; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tcar-meta { font-size: var(--fs-tiny); color: var(--text-light); }

/* --- تصویر شاخص صفحه ------------------------------------------------ */
.page-hero { margin: 0 0 var(--sp-6); }
.page-hero img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-xl);
  aspect-ratio: 16 / 9; object-fit: cover;
}
.page-type-hub .page-hero img,
.page-type-page .page-hero img { aspect-ratio: 21 / 9; }

/* --- جعبه خدمت داخل مقاله ------------------------------------------ */
.inline-service {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  margin: var(--sp-7) 0 0;
  padding: var(--sp-5);
  border: 1px solid var(--blue-border); background: var(--blue-light);
  border-radius: var(--radius-xl);
}
.inline-service h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-h3); }
.inline-service p { margin: 0; font-size: var(--fs-small); color: var(--text-light); }

/* --- ویدیوی صفحه ---------------------------------------------------- */
.page-video { margin: 0 0 var(--sp-6); }
.page-video video {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  background: #000;
  aspect-ratio: 16 / 9;
}

/* --- ظرف های ساده (فقط ریتم عمودی) --------------------------------- */
.repair-cta-text { flex: 1 1 260px; }
.product-box-info { min-width: 0; }
.related-services,
.related-articles { margin-top: var(--sp-7); }
.page-content-bottom { margin-top: var(--sp-6); }
.pg-prev, .pg-next { min-width: 5em; }

/* --- خدمات مرتبط و مقالات مرتبط ------------------------------------ */
.related-list { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-3); }
.related-list a {
  display: block; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: var(--fs-small); font-weight: 600;
}
.related-list a:hover { background: var(--blue-light); border-color: var(--blue-border); }

.article-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-5);
}
.article-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white); color: inherit;
}
.article-card:hover { box-shadow: var(--shadow); color: inherit; }
.article-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-card h3 { padding: var(--sp-3) var(--sp-4); margin: 0; }

/* --- صفحه بندی ----------------------------------------------------- */
.pagination {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center; margin: var(--sp-6) 0 0;
}
.pg {
  min-width: 2.6em; padding: .5em .8em; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--text);
}
.pg:hover { border-color: var(--accent); color: var(--accent); }
.pg-cur { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- کارت زیرصفحه ها ----------------------------------------------- */
.children-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-5); margin: var(--sp-5) 0;
}
.child-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white); color: inherit;
  transition: box-shadow .18s, transform .18s;
}
.child-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); color: inherit; }
.child-card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.child-card-body { padding: var(--sp-4); }
.child-card-excerpt { color: var(--text-light); margin: 0; }
.child-card-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--sp-3); font-size: var(--fs-tiny);
  color: var(--accent-dark); background: var(--blue-light);
  border-radius: 999px; padding: .25em .8em;
}

/* --- سوالات متداول -------------------------------------------------- */
.faq2-q {
  font-family: var(--font);
  font-size: var(--fs-h4);
  font-weight: 700;
  padding: 1em 1.1em;
  line-height: 1.6;
}
.faq2-a-inner { padding: 1.1em; }

/* ---------------------------------------------------------------------
   ۴ — فوتر
--------------------------------------------------------------------- */
.ti-footer { background: #0f172a; color: #cbd5e1; margin-top: var(--sp-8); }
.ti-cta {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  padding: var(--sp-6) 0;
}
.ti-cta-inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  align-items: center; justify-content: space-between;
}
.ti-cta h2 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-h2); }
.ti-cta p { color: rgba(255,255,255,.9); margin: 0; font-size: var(--fs-small); }
.ti-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ستون های فوتر با ارتفاع برابر.
   قبلاً auto-fit بود و هر ستون ارتفاع محتوای خودش را می گرفت؛ با ۲۱
   برند در یکی از ستون ها، کل فوتر نامیزان می شد. حالا برندها ردیف
   جداگانه دارند و این سه ستون هم ارتفاع اند. */
.ti-info {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5); padding: var(--sp-6) 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  align-items: stretch;
}
.ti-info-item {
  padding: var(--sp-4);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
}
.ti-info-item { display: flex; gap: var(--sp-3); }
.ti-info-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(37,99,235,.18); color: #93c5fd; font-size: var(--fs-h4);
}
.ti-info-item h3 { color: #fff; margin: 0 0 var(--sp-1); font-size: var(--fs-h4); }
.ti-info-item p, .ti-info-item li { margin: 0; font-size: var(--fs-small); line-height: 1.9; }
.ti-contact { list-style: none; padding: 0; margin: 0; }
.ti-contact li {
  display: flex; gap: var(--sp-3); justify-content: space-between;
  align-items: baseline;
}
.ti-contact > li > span:first-child { color: #94a3b8; flex-shrink: 0; }
.ti-contact a { color: #e2e8f0; }
.ti-contact a:hover { color: #fff; }
/* هر دو شماره ثابت زیر یک برچسب، پشت سر هم */
.ti-tels { display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); justify-content: flex-end; }
.ti-areas { color: #94a3b8; font-size: var(--fs-tiny) !important; margin-top: var(--sp-2) !important; }

/* --- نشانی روی نقشه، بالای نوار پایانی ------------------------------ */
.ti-map {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-5); align-items: stretch;
  padding: var(--sp-5) 0 var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.08);
}
.ti-map-text h3 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-h4); }
.ti-map-text p { margin: 0 0 var(--sp-2); font-size: var(--fs-small); line-height: 1.9; }
.ti-map-hours { color: #94a3b8; }
.ti-map-text .btn-call { margin-top: var(--sp-2); }
.ti-map-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  min-height: 240px;
}
.ti-map-frame iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; }

/* لینک تلفن داخل متن — از linkify_phones */
.tel-link { font-weight: 700; white-space: nowrap; }
.ti-brand-desc .tel-link { color: #93c5fd; }

.ti-links {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6); padding: var(--sp-6) 0;
  align-items: start;
}

/* --- ردیف برندها ----------------------------------------------------
   ۲۱ برند به شکل چیپ می چینند، نه ستون. هر برند تازه ای اضافه شود فقط
   پهنا را پر می کند و ارتفاع فوتر ثابت می ماند. */
.ti-brands {
  padding: var(--sp-5) 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ti-brands h3 {
  color: #fff; margin: 0 0 var(--sp-3);
  font-size: var(--fs-h4); font-weight: 700;
}
.ti-brands ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.ti-brands a {
  display: inline-block;
  padding: .35em 1em;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #cbd5e1;
  font-size: var(--fs-small);
  line-height: 1.9;
  white-space: nowrap;
}
.ti-brands a:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.ti-brand { display: flex; align-items: center; gap: var(--sp-3); color: #fff; }
.ti-brand img { width: 56px; height: auto; background: #fff; border-radius: var(--radius); padding: 4px; }
.ti-brand strong { display: block; font-size: var(--fs-h4); font-weight: 800; }
.ti-brand em { font-style: normal; font-size: var(--fs-small); color: #94a3b8; }
.ti-brand-desc { font-size: var(--fs-small); line-height: 1.95; margin: var(--sp-4) 0 0; }
.ti-links-col h3 { color: #fff; margin: 0 0 var(--sp-3); }
.ti-links-col ul { list-style: none; padding: 0; margin: 0; }
.ti-links-col li { margin-bottom: var(--sp-2); }
.ti-links-col a { color: #cbd5e1; }
.ti-links-col a:hover { color: #fff; }

.ti-socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.ti-social {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-h4);
  background: rgba(255,255,255,.08); color: #e2e8f0;
}
.ti-social:hover { background: rgba(255,255,255,.16); color: #fff; }

.ti-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-4) 0; }
.ti-bottom-inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
}
.ti-bottom p { margin: 0; color: #94a3b8; }
.ti-bottom a { color: #cbd5e1; }

/* نوار چسبان موبایل */
.ti-mobilebar { display: none; }
@media (max-width: 860px) {
  .ti-mobilebar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 900;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0,0,0,.10);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ti-mb-item {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    padding: .5rem .25rem;
    font-size: var(--fs-tiny); color: var(--text-light);
    text-align: center;
  }
  .ti-mb-item i { font-size: 1.1rem; }
  /* شماره تلفن باید خوانا باشد، نه یک برچسب ریز */
  .ti-mb-phone { color: var(--accent-dark); }
  .ti-mb-phone span { font-size: var(--fs-small); font-weight: 800; }
  .ti-mb-cta { color: #fff; background: var(--accent); }
  .ti-mb-cta:hover { color: #fff; }
  body { padding-bottom: 68px; }
}

/* ---------------------------------------------------------------------
   ۵ — اصلاح های واکنش گرا
--------------------------------------------------------------------- */
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-stage { aspect-ratio: 4 / 3; }
}

@media (max-width: 860px) {
  .ti-info { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .ti-links { grid-template-columns: 1fr 1fr; }
  .ti-map { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .container { padding-inline: 16px; }
  .ti-links { grid-template-columns: 1fr; gap: var(--sp-5); }
  .ti-brands ul { gap: 6px; }
  .ti-brands a { font-size: var(--fs-tiny); padding: .3em .8em; }
  .tcar-item { width: 76vw; max-width: 280px; }
  .tcar-compact .tcar-item { width: 58vw; max-width: 220px; }
  .tcar-head { flex-wrap: wrap; }
  .inline-service { text-align: center; justify-content: center; }
  .pdp-spec-cols { grid-template-columns: 1fr; }
  .repair-cta { padding: var(--sp-5); text-align: center; justify-content: center; }
  .repair-cta-actions { width: 100%; justify-content: center; }
  .btn { flex: 1 1 auto; justify-content: center; }
  /* جدول های عریض داخل متن، به جای شکستن صفحه، خودشان اسکرول می شوند */
  .page-content .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .pdp-model-list li { flex-direction: column; gap: var(--sp-1); align-items: stretch; }
  .ti-contact li { flex-direction: column; gap: 0; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .pc-body { padding: var(--sp-3); }
  .pdp-spec-table th { width: 45%; }
}

/* چاپ: متن مشکی روی سفید و بدون عناصر تعاملی */
@media print {
  .site-header, .ti-footer, .ti-mobilebar, .repair-cta,
  .share-box, .comments-section, .toc-box { display: none !important; }
  body { font-size: 12pt; line-height: 1.7; color: #000; }
  .page-h1 { font-size: 20pt; }
  .page-content h2 { font-size: 15pt; }
}

/* ==========================================================================
   دور akhekojamiri1 — دکمه هدر، مودال درخواست، و بخش های تازه صفحه اصلی
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hs-lead {
  max-width: 68ch;
  margin: 0 auto var(--sp-5, 24px);
  text-align: center;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: #475569;
}

/* --------------------------------------------------------------------------
   ۱) دکمه «ثبت درخواست تعمیر» در نوار بالای هدر
   از منو بیرون آمد تا ردیف منو کوتاه شود و مهم ترین اقدام سایت یکی از
   هفت لینک هم وزن نباشد.
   -------------------------------------------------------------------------- */
.topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.16);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.topbar-cta:hover,
.topbar-cta:focus-visible {
  background: #fff;
  color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.topbar-cta i { font-size: .9em; }

/* در موبایل نوار بالا پنهان است؛ همان کار را دکمه آچار در ردیف هدر
   و نوار چسبان پایین انجام می دهند، پس اینجا چیزی تکرار نمی شود. */

/* --------------------------------------------------------------------------
   ۲) نقطه شکست منو
   منو از ۱۰ آیتم به ۷ آیتم رسید، ولی عنوان های فارسی بلندند
   («مشاوره حقوقی ملکی»، «وکیل ملکی در مناطق»…). شکست از ۱۲۰۰ به ۱۲۸۰
   می آید تا در لپ تاپ ۱۳۶۶ پیکسلی هم ردیف جا داشته باشد و هیچ وقت
   روی لوگو نیفتد.
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .hdr-ham { display: flex; }
  .hdr-mobile-actions { display: flex; }
  .hdr-actions { display: none; }
}
/* سپر آخر: حتی اگر روزی آیتمی اضافه شود، لوگو کوچک نمی شود و منو
   روی آن نمی رود — نوار منو خودش کوتاه می آید. */
@media (min-width: 1281px) {
  .hdr-inner { flex-wrap: nowrap; }
  .site-logo { flex: 0 0 auto; }
  .hdr-nav { flex: 1 1 auto; min-width: 0; }
  .nav-list { flex-wrap: nowrap; min-width: 0; }
  .ni-link { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   ۳) مودال درخواست تعمیر
   روی دسکتاپ جعبه وسط، روی موبایل ورقه پایین کشیدنی. dvh استفاده شده
   نه vh: با بالا آمدن نوار آدرس سافاری، vh کوچک نمی شود و ته فرم زیر
   لبه صفحه گیر می کند.
   -------------------------------------------------------------------------- */
/* موقعیت صریح نوشته شده و به شیوه نامه پیش فرض مرورگر تکیه نمی کند:
   ‏<dialog> در حالت عادی absolute است و در حالت modal به لایه رویی
   می رود؛ اتکا به این تفاوت یعنی جعبه در یک مرورگر وسط بیفتد و در
   دیگری بالای صفحه. */
.rq-modal {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.rq-modal::backdrop {
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(2px);
}

.rq-modal .rq-panel {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%); /* راست چین: نصف عرض به راست */
  width: min(560px, calc(100vw - 32px));
  max-height: min(88dvh, 780px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.32);
  overflow: hidden;
  outline: none;
  animation: rqIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes rqIn {
  from { opacity: 0; transform: translate(50%, calc(-50% + 14px)); }
  to { opacity: 1; transform: translate(50%, -50%); }
}

.rq-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #E2E8F0;
  background: linear-gradient(180deg, var(--blue-light), #fff);
}
.rq-head-text { flex: 1 1 auto; min-width: 0; }
.rq-title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--brand-blue);
  font-weight: 800;
}
.rq-sub {
  margin: 4px 0 0;
  font-size: var(--fs-small);
  color: #64748B;
  line-height: 1.6;
}
.rq-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #E2E8F0;
  border-radius: 11px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rq-close:hover { background: #F1F5F9; color: var(--brand-navy); }

.rq-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px;
}
.rq-body .form-group { margin-bottom: 14px; }
.rq-body .front-form { margin: 0; }
.rq-body .form-actions { margin-top: 4px; }
.rq-body .btn-form-submit { width: 100%; }

.rq-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 12px 20px;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
  font-size: var(--fs-small);
  color: #64748B;
}
.rq-tel {
  font-weight: 800;
  color: var(--accent-dark);
  text-decoration: none;
  letter-spacing: .3px;
}
.rq-tel:hover { text-decoration: underline; }

/* بدنه صفحه هنگام باز بودن مودال. position:fixed تنها راهی است که
   روی iOS جلوی اسکرول پس زمینه را می گیرد؛ top منفی را جاوااسکریپت
   می گذارد تا صفحه به بالا نپرد. */
body.rq-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  /* ‏scroll و نه hidden: جای اسکرول بار خالی می ماند و صفحه پشت مودال
     به اندازه عرض اسکرول بار جابه جا نمی شود. جبران با padding کار
     نمی کرد چون در چیدمان راست چین، اسکرول بار بین مرورگرها گاهی چپ
     است و گاهی راست. */
  overflow-y: scroll;
}

@media (max-width: 640px) {
  .rq-modal .rq-panel {
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline-start: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    animation: rqUp .26s cubic-bezier(.16,1,.3,1);
  }
  @keyframes rqUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  /* دستگیره ورقه — نشانه بصری اینکه این یک لایه رویی است */
  .rq-head::before {
    content: '';
    position: absolute;
    inset-block-start: 7px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: #CBD5E1;
  }
  .rq-head { position: relative; padding-block-start: 20px; }
  .rq-body { padding: 16px; }
  .rq-title { font-size: var(--fs-h4); }
}

@media (prefers-reduced-motion: reduce) {
  .rq-modal .rq-panel { animation: none; }
}

/* --------------------------------------------------------------------------
   ۴) نوار اطمینان
   -------------------------------------------------------------------------- */
.hs-trust { padding-block: clamp(20px, 3vw, 30px); }
.trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--blue-border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, var(--blue-light));
}
.trust-ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
}
.trust-text { display: flex; flex-direction: column; min-width: 0; }
.trust-t {
  font-size: var(--fs-ui);
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1.5;
}
.trust-s {
  font-size: var(--fs-small);
  color: #64748B;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   ۵) سه گام
   -------------------------------------------------------------------------- */
.steps-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
}
.step-num {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-ui);
}
.step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step-t {
  font-size: var(--fs-h4);
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1.5;
}
.step-s {
  font-size: var(--fs-ui);
  color: #475569;
  line-height: 1.75;
}
.steps-cta { text-align: center; }

/* --------------------------------------------------------------------------
   ۶) کارت های علائم خرابی
   -------------------------------------------------------------------------- */
.symp-grid {
  display: grid;
  /* auto-fit و نه auto-fill: با ۱۶ کارت، auto-fill در عرض های میانی
     یک ستون خالی می سازد و ردیف آخر کج به نظر می رسد. */
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.symp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* ارتفاع یکسان برای همه، چه عنوان یک خط باشد چه دو خط. بدون این،
     کارت های یک خطی کوتاه تر می مانند و ردیف دندانه دار می شود. */
  min-height: 58px;
  padding: 11px 13px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #fff;
  color: var(--brand-navy);
  font-size: var(--fs-small);
  line-height: 1.55;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.symp-card:hover,
a.symp-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), .13);
  transform: translateY(-2px);
}
.symp-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #FEF3C7;
  color: #B45309;
}
.symp-t { flex: 1 1 auto; min-width: 0; }
.symp-arr { flex: 0 0 auto; color: var(--accent); }

.symp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 18px;
  border: 1px dashed var(--blue-border);
  border-radius: 14px;
  background: var(--blue-light);
}
.symp-cta-note {
  font-size: var(--fs-ui);
  color: #475569;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   ۷) هزینه
   -------------------------------------------------------------------------- */
.price-range {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.price-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.price-cell.price-avg {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), .12);
}
.price-lbl { font-size: var(--fs-small); color: #64748B; }
.price-val {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  font-weight: 800;
  color: var(--brand-blue);
}
.price-cur { font-size: var(--fs-tiny); color: #64748B; }

.price-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.price-table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  font-size: var(--fs-ui);
}
.price-table th,
.price-table td {
  padding: 12px 14px;
  text-align: start;
  border-bottom: 1px solid #F1F5F9;
  line-height: 1.7;
}
.price-table thead th {
  background: var(--brand-blue);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-small);
}
.price-table tbody th { font-weight: 600; color: var(--brand-navy); }
.price-table tbody td { color: var(--accent-dark); font-weight: 700; white-space: nowrap; }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:nth-child(even) { background: #F8FAFC; }

.price-foot {
  font-size: var(--fs-small);
  color: #64748B;
  line-height: 1.8;
  margin: 0 0 16px;
}
.price-cta { text-align: center; }

@media (max-width: 560px) {
  .price-range { grid-template-columns: 1fr; gap: 8px; }
  .price-cell {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    text-align: start;
    padding: 12px 14px;
  }
}

/* --------------------------------------------------------------------------
   ۸) چیپ های برند
   -------------------------------------------------------------------------- */
.brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-chip {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--blue-border);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-blue);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
a.brand-chip:hover,
a.brand-chip:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.brand-chip.is-plain { color: #64748B; }

/* --------------------------------------------------------------------------
   ۹) نوار پایانی
   -------------------------------------------------------------------------- */
.hs-cta { padding-block: clamp(26px, 4vw, 42px); }
.hcta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 24px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand-blue), var(--accent));
  color: #fff;
}
.hcta-text { flex: 1 1 320px; min-width: 0; }
.hcta-title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.4;
  font-weight: 800;
  color: #fff;
}
.hcta-sub {
  margin: 8px 0 0;
  font-size: var(--fs-ui);
  line-height: 1.8;
  color: rgba(255,255,255,.9);
}
.hcta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.hcta-box .cta-btn.hcta-main {
  background: #fff;
  color: var(--accent-dark);
  border-color: #fff;
}
.hcta-box .cta-btn.hcta-main:hover { background: #F1F5F9; color: var(--accent-dark); }
.hcta-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-btn);
  text-decoration: none;
  transition: background .15s;
}
.hcta-tel:hover { background: rgba(255,255,255,.14); color: #fff; }
.hcta-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--fs-small);
  color: #64748B;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   ۱۰) کارت خدمت در کروسل
   -------------------------------------------------------------------------- */
.bc-carousel.is-svc .bc-track > * { flex: 0 0 auto; }
.svc-card {
  display: flex;
  flex-direction: column;
  width: 250px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.svc-card:hover,
.svc-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), .15);
  transform: translateY(-3px);
}
.svc-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--blue-light);
  overflow: hidden;
}
.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-noimg {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--blue-border);
}
.svc-card.no-img .svc-noimg { display: grid; }
.svc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px 15px;
  flex: 1 1 auto;
}
.svc-title {
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.65;
  color: var(--brand-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-go {
  margin-top: auto;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 560px) {
  .svc-card { width: 215px; }
}

/* فرزند شبکه باید خودش کشیده شود تا کارت داخلش height:100% بگیرد و
   کارت های یک ردیف هم قد بمانند. */
.symp-item { display: flex; }

/* نشان تیک بالای پیام موفقیت فرم — داخل مودال اولین چیزی است که
   کاربر بعد از ارسال می بیند. */
.fs-icon {
  display: flex;
  justify-content: center;
  color: #16A34A;
  margin-bottom: 10px;
}

/* فاصله میان نوار پایانی و «سوالات متداول» ۱۰۶ پیکسل می شد (۴۲ پایینِ
   یکی + ۶۴ بالای دیگری) و به شکل یک تکه فضای خالیِ بی دلیل دیده می شد. */
.hs-cta { padding-block-end: 16px; }
.hcta-note { margin-block-end: 0; }
.hs-cta + .hs-faq { padding-block-start: 24px; }

/* ==========================================================================
   دور ohom — هدر موبایل، اندازه لوگوها، h1 صفحه اصلی
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱) هدر موبایل
   ردیف هدر سه دکمه داشت: همبرگر، آچار «ثبت درخواست» و تلفن. هر سه
   تکراری بودند — نوار چسبان پایین صفحه (.ti-mobilebar) همیشه دیده
   می شود و همان تلفن، واتساپ و درخواست تعمیر را دارد. نتیجه یک ردیف
   شلوغ با سه دکمه کوچک چپ و یک لوگوی کوچک راست بود، با یک حفره خالی
   وسطش.

   حالا ردیف موبایل فقط لوگو و همبرگر است: لوگو جا برای نفس کشیدن
   دارد و بزرگ تر می شود، و هیچ کاری از دست نمی رود.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* نوار بالای هدر هم می رود: پیام کوتاه در آن عرض بریده می شد
     («…محل، تمام برندها، گارانتی:») و تلفن و دکمه اش هم در نوار پایین
     هست. حذفش یک نوار درهم را از بالای صفحه برمی دارد. */
  .topbar { display: none; }

  .hdr-inner {
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
  }
  /* دکمه های تکراری */
  .hdr-mobile-actions { display: none !important; }

  .hdr-ham {
    order: -1; /* در راست چین یعنی سمت چپ */
    flex: 0 0 auto;
    inline-size: 44px;
    block-size: 44px;
  }
  .site-logo { flex: 0 1 auto; min-inline-size: 0; }

  /* لوگو ۲۰٪ بزرگ تر: ۴۸ → ۵۸ */
  .brand-logo { block-size: 58px; }
  .brand-mark { inline-size: 58px; block-size: 58px; }

  /* هنگام اسکرول هدر جمع می شود ولی لوگو نباید ریز شود */
  .site-header.is-compact .brand-logo { block-size: 48px; }
  .site-header.is-compact .brand-mark { inline-size: 48px; block-size: 48px; }

  /* نوار چسبان پایین، انتهای صفحه را می پوشاند */
  body { padding-block-end: 68px; }
}

@media (max-width: 560px) {
  /* ۴۰ → ۴۸ */
  .brand-logo { block-size: 48px; }
  .brand-mark { inline-size: 48px; block-size: 48px; }
  .hdr-inner { min-height: 62px; }
}

@media (max-width: 380px) {
  /* ۳۴ → ۴۱ */
  .brand-logo { block-size: 41px; }
  .brand-mark { inline-size: 41px; block-size: 41px; }
}

/* --------------------------------------------------------------------------
   ۲) لوگوی فوتر — ۳۰٪ بزرگ تر (۵۶ → ۷۳)
   -------------------------------------------------------------------------- */
.ti-brand img { width: 73px; }

/* --------------------------------------------------------------------------
   ۳) h1 صفحه اصلی
   عنوان اسلاید اول حالا h1 است. اندازه اش نباید از h2 قبلی فرق کند —
   فقط معنای نشانه گذاری عوض شده، نه طراحی.
   -------------------------------------------------------------------------- */
.swiper-h1 { font-size: inherit; margin: inherit; }

/* اگر روزی اسلایدر خاموش شود، این بلوک جای h1 را پر می کند */
.home-h1-fallback { padding-block: 22px 0; }
.home-h1-fallback h1 {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--brand-blue);
}

/* --------------------------------------------------------------------------
   سپر آخرِ جدول های محتوا
   جدول های مهاجرت شده min-width: 480px دارند تا ستون هایشان له نشوند.
   این عدد فقط وقتی بی خطر است که یک ظرفِ اسکرول شونده بالای سرشان باشد.
   اگر جدولی به هر دلیل بیرون از .table-scroll رندر شود (محتوای کش شده،
   مسیر رندر دیگری)، روی صفحه ۳۶۰ پیکسلی ۴۸۰ پیکسل می شود — و چون
   html/body مقدار overflow-x: clip دارند، بخش بیرون زده نه اسکرول
   می خورد نه دیده می شود؛ فقط بریده می شود.

   قاعده قبلی می خواست خودِ جدول را اسکرول کند (display:block) ولی
   min-width روی همان عنصر بود، پس اسکرولر هیچ وقت باریک تر از ۴۸۰
   نمی شد. آن ترکیب هیچ وقت نمی توانست کار کند.
   -------------------------------------------------------------------------- */
.page-content > table,
.section-content > table {
  display: table;
  min-width: 0;
  overflow-x: visible;
}

/* ==========================================================================
   مهار سرریز افقی — سپر ساختاری
   --------------------------------------------------------------------------
   html/body مقدار overflow-x: clip دارند. یعنی هر عنصری که از عرض صفحه
   پهن تر شود، نه اسکرول بار می سازد و نه دیده می شود — فقط بریده می شود
   و در چیدمان راست چین، بریدگی از سمت چپ است. کاربر می بیند «متن و
   عکس رفته سمت چپ و نیست».

   محتوای مقاله ها از ویرایشگر سایت قدیم آمده و هیچ کلاسی ندارد؛ نمی توان
   تک تک حالت هایش را پیش بینی کرد. پس به جای شکار مورد به مورد، اینجا
   یک سقف عمومی گذاشته می شود: هیچ فرزندی حق ندارد از ظرفش پهن تر شود.
   ========================================================================== */

.page-article,
.page-main,
.page-aside,
.page-content,
.section-content { min-width: 0; max-width: 100%; }

/* فرزندان مستقیمِ محتوا — همان <div dir="rtl"> های ویرایشگر قدیم */
.page-content > *,
.section-content > * { max-width: 100%; }

/* رسانه ها: با !important چون قاعده های قدیمی main.css و site-base.css
   هر کدام width خودشان را می گذارند و ترتیبشان قابل اتکا نیست. */
.page-content img, .page-content video, .page-content iframe,
.page-content embed, .page-content object, .page-content svg,
.section-content img, .section-content video, .section-content iframe {
  max-width: 100% !important;
  height: auto;
}

/* واژه یا آدرس بلندِ بدون فاصله نباید ظرف را باز کند */
.page-content, .section-content { overflow-wrap: anywhere; }

/* pre و code از همه بیشتر مستعد پهن شدن اند */
.page-content pre, .section-content pre { overflow-x: auto; max-width: 100%; }

/* --------------------------------------------------------------------------
   لایه ای که در بسته قبل جا مانده بود
   قبلا فقط .page-content و فرزندانش سقف گرفتند. ولی .page-main فرزندان
   دیگری هم دارد که هیچ کدام سقف نداشتند:

     .page-head .page-content .repair-cta .share-box .tcar
     .comments-section

   و «.tcar» (کروسل مطالب مرتبط) فقط در صفحات مقاله ساخته می شود —
   page_types/article/view.php تنها جایی است که $relatedCarousel را
   می سازد. همین توضیح می دهد چرا مشکل «فقط در صفحات مقالات» دیده
   می شود و بقیه صفحه ها سالم اند.

   ‏breadcrumb هم بیرون از .page-article است و در بسته قبل پوشش نداشت؛
   روی مقاله ها بلندترین حالتش را دارد (سه سطح با عنوان کامل مقاله).
   -------------------------------------------------------------------------- */
#main-content > *,
.page-article > *,
.page-main > *,
.page-aside > * { max-width: 100%; min-width: 0; }

.breadcrumb, .breadcrumb > ol, .breadcrumb > .container { max-width: 100%; }

/* کروسل: ریل خودش اسکرول می خورد، ولی ظرف و سرش هم نباید پهن شوند */
.tcar, .tcar-head, .tcar-head-side { max-width: 100%; min-width: 0; }
.tcar-track { max-width: 100%; min-width: 0; }
.tcar-head { flex-wrap: wrap; }

/* بخش هایی که ممکن است محتوای پهن داشته باشند */
.repair-cta, .share-box, .comments-section,
.comments-wrapper, .comment-form { max-width: 100%; min-width: 0; }

/* ==========================================================================
   چیدمان موبایل مقاله — گرید کنار گذاشته می شود
   --------------------------------------------------------------------------
   نشانه ای که مالک سایت داد دقیق بود: «در دسکتاپ دو ستون است؛ در موبایل
   ستون سمت راست فیت نمی شود» و «از بالا تا ارسال دیدگاه مشکل هست، بعدش
   نه». در چیدمان راست چین، ستون سمت راست همان ستون اول گرید یعنی
   .page-main است، و دقیقا در «ارسال دیدگاه» تمام می شود. یعنی خودِ ستون
   پهن می ماند، نه یک عنصر تکی داخلش.

   تا اینجا با minmax(0,1fr) و min-width:0 و max-width:100% تلاش شد ستون
   جمع شود و نشد. پس به جای تنظیم کردن گرید، گرید در موبایل **کنار
   گذاشته می شود**: یک جعبه block همیشه دقیقا به اندازه ظرفش است — نه
   fr در کار است، نه کمینه خودکارِ min-content، نه هیچ رفتار ظریف دیگری
   که بشود اشتباه فهمید.

   ‏!important عمدی است. سه شیوه نامه روی هم بار می شوند و بدون مرورگر
   نمی توانم آبشار را قطعی بسنجم؛ اینجا قطعیت مهم تر از ظرافت است.
   ========================================================================== */
@media (max-width: 1024px) {
  .page-article.has-aside { display: block !important; }

  .page-article.has-aside > .page-main,
  .page-article.has-aside > .page-aside {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    float: none !important;
  }
  .page-article.has-aside > .page-aside { margin-block-start: var(--sp-6); }

  .page-article { width: auto !important; max-width: 100% !important; }
}

/* ==========================================================================
   آرشیو مقالات — کارت شاخص + شبکه
   ========================================================================== */

.art-archive { margin-block-start: var(--sp-5); }

/* --- کارت شاخص (تازه ترین مقاله) --------------------------------------- */
.art-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  margin-block-end: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.art-hero:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), .16);
  transform: translateY(-3px);
  color: inherit;
}
.art-hero-media { display: block; overflow: hidden; background: var(--blue-light); }
.art-hero-media img {
  width: 100%; height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.art-hero-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(18px, 2.4vw, 30px);
}
.art-badge {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--accent-dark);
  font-size: var(--fs-tiny);
  font-weight: 700;
}
.art-hero-title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.5;
  font-weight: 800;
  color: var(--brand-blue);
}
.art-hero-excerpt {
  font-size: var(--fs-ui);
  line-height: 1.9;
  color: #475569;
}
.art-go {
  margin-block-start: auto;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent);
}

/* --- شبکه کارت ها ------------------------------------------------------- */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: var(--sp-5);
}
.art-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.art-card:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(var(--accent-rgb), .14);
  transform: translateY(-3px);
  color: inherit;
}
.art-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--blue-light);
  overflow: hidden;
}
.art-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-card-noimg {
  position: absolute; inset: 0;
  display: none; place-items: center;
  color: var(--blue-border);
}
.art-card.no-img .art-card-noimg { display: grid; }

.art-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1 1 auto;
}
.art-card-title {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: 1.6;
  font-weight: 700;
  color: var(--brand-navy);
  /* دو خط ثابت تا کارت های یک ردیف هم قد بمانند */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-card-excerpt {
  font-size: var(--fs-small);
  line-height: 1.85;
  color: #64748B;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-meta {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-block-start: var(--sp-2);
  font-size: var(--fs-tiny);
  color: #94A3B8;
}
.art-meta > span + span::before {
  content: '·';
  margin-inline-end: 12px;
  color: #CBD5E1;
}

@media (max-width: 760px) {
  .art-hero { grid-template-columns: 1fr; }
  .art-hero-media img { aspect-ratio: 16 / 9; }
  .art-hero-title { font-size: var(--fs-h4); }
}
@media (max-width: 460px) {
  .art-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* =====================================================================
   قهرمان صفحه اصلی (views/home_sections/hero.php)
   بدون جاوااسکریپت. موبایل فرست: زیر ۹۰۰ پیکسل تک ستونی می شود و
   تصویر پایین متن می رود، چون ۹۴٪ بازدید این سایت موبایل است.
   ===================================================================== */
.hs-hero{
  background:linear-gradient(135deg,var(--brand-navy) 0%,var(--brand-blue) 100%);
  color:#fff;padding:var(--sp-7) 0;
}
.hs-hero .hero-grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:center;
}
.hero-h1{
  font-size:var(--fs-h1);line-height:var(--lh-h1);margin:0 0 var(--sp-4);
  color:#fff;font-weight:700;
}
.hero-lead{
  font-size:var(--fs-lead);line-height:var(--lh-lead);
  margin:0 0 var(--sp-5);color:#DCE6F3;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.hero-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-lg);
  font-size:var(--fs-btn);font-weight:600;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.hero-btn:hover{transform:translateY(-2px)}
/* طلایی روی سرمه ای: متن سرمه ای روی طلایی، کنتراست ۷٫۴:۱ */
.hero-btn-1{background:var(--gold);color:var(--brand-navy);box-shadow:0 6px 18px rgba(201,162,39,.28)}
.hero-btn-1:hover{background:#D8B23C}
.hero-btn-2{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.hero-btn-2:hover{background:rgba(255,255,255,.2)}
.hero-phone{font-size:var(--fs-ui);color:#C3D3E8;margin:0 0 var(--sp-4)}
.hero-phone a{color:#fff;font-weight:700;text-decoration:none;letter-spacing:.04em}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  list-style:none;margin:0;padding:0;font-size:var(--fs-small);color:#DCE6F3;
}
.hero-badges li{display:flex;align-items:center;gap:.45rem}
.hero-badges i{color:var(--gold)}
.hero-media img{
  display:block;width:100%;height:auto;max-width:100%;
  border-radius:var(--radius-xl);box-shadow:0 18px 44px rgba(0,0,0,.28);
}
@media (min-width:900px){
  .hs-hero{padding:var(--sp-8) 0}
  .hs-hero .hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-7)}
}

/* =====================================================================
   پرسش و پاسخ حقوقی (page_types/qa/view.php)
   ===================================================================== */
.qa-count{
  font-size:var(--fs-ui);color:var(--text-light);
  padding:var(--sp-3) 0 var(--sp-5);border-bottom:1px solid var(--border);
  margin-bottom:var(--sp-5);
}
.qa-item{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-5);margin-bottom:var(--sp-5);background:var(--bg);
}
.qa-item:target{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-pale)}
.qa-head{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:baseline;margin-bottom:var(--sp-2)}
.qa-who{font-weight:700;color:var(--brand-blue);font-size:var(--fs-ui)}
.qa-who-expert{color:var(--gold-dark)}
.qa-when{font-size:var(--fs-tiny);color:var(--text-muted)}
.qa-text{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text)}
.qa-q{padding-bottom:var(--sp-4)}
.qa-a{
  border-top:2px solid var(--gold);background:var(--gold-pale);
  border-radius:var(--radius);padding:var(--sp-4);margin-top:var(--sp-3);
}
.qa-src{
  display:inline-block;margin-top:var(--sp-3);font-size:var(--fs-small);
  color:var(--brand-blue-mid);text-decoration:none;
}
.qa-src:hover{text-decoration:underline}
.qa-pending{font-size:var(--fs-small);color:var(--text-muted);margin-top:var(--sp-3)}
.qa-empty{padding:var(--sp-6) 0;color:var(--text-light)}
.pager{display:flex;gap:var(--sp-4);align-items:center;justify-content:center;padding:var(--sp-6) 0}
.pager a{
  padding:.6rem 1.2rem;border:1px solid var(--brand-teal-border);
  border-radius:var(--radius);color:var(--brand-blue-mid);
  text-decoration:none;font-size:var(--fs-ui);
}
.pager a:hover{background:var(--blue-light)}
.pager-now{font-size:var(--fs-small);color:var(--text-light)}

/* =====================================================================
   کشوی منوی موبایل — بستنِ واقعی، نه فقط بردن به بیرون کادر
   ---------------------------------------------------------------------
   کشو با right:-100% از دید بیرون می رود ولی visibility همچنان visible
   می ماند؛ یعنی لینک هایش در ترتیب Tab و در درخت دسترس پذیری باقی
   می مانند و کاربر کیبورد داخل منوی بسته گم می شود. اندازه گیری روی
   عرض ۳۷۵ پیکسل: پنل ۳۳۰ پیکسلی در left:420 نقاشی می شد.
   (اسکرول افقی رخ نمی داد چون html و body در این پوسته overflow-x:clip
   دارند — سایت های هم خانواده این محافظ را نداشتند و صفحه می لغزید.)

   انتقالِ visibility با تاخیر برابر مدت اسلاید تنظیم شده تا انیمیشن
   بسته شدن دیده شود و بعد کشو واقعا از دسترس خارج شود؛ در باز شدن
   تاخیر صفر است تا اسلاید از همان لحظه دیده شود.
   ===================================================================== */
@media (max-width: 960px) {
  .hdr-nav {
    visibility: hidden;
    transition: right .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
  }
  .hdr-nav.open {
    visibility: visible;
    transition: right .32s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }
}

/* =====================================================================
   کوتاه کردن متن های بلند — پرسش و پاسخ و دیدگاه ها
   ---------------------------------------------------------------------
   متن در DOM می ماند و فقط بریده نمایش داده می شود. عمدا از
   display:none استفاده نشده: این پرسش و پاسخ ها محتوای ایندکس شونده
   سایت اند. line-clamp متن را برای خزنده کامل نگه می دارد.
   ===================================================================== */
.comment-body.is-clamped,
.qa-text.is-clamped{
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.clamp-toggle{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-top:.5rem;padding:.25rem 0;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--fs-small);font-weight:600;
  color:var(--brand-blue-mid);
}
.clamp-toggle::after{content:'‹';display:inline-block;transform:rotate(-90deg);font-size:1.1em;line-height:1}
.clamp-toggle[aria-expanded="true"]::after{transform:rotate(90deg)}
.clamp-toggle:hover{color:var(--brand-blue);text-decoration:underline}
.clamp-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* =====================================================================
   دکمه داخل متن — .page-content a رنگ لینک را روی .btn-primary سوار
   می کرد (وزن ۰٫۱٫۱ در برابر ۰٫۱٫۰) و متن دکمه سرمه ای روی سرمه ای
   می افتاد؛ یعنی نامرئی. این قاعده همان را برمی گرداند.
   ===================================================================== */
.page-content a.btn,
.hs-html-body a.btn{text-decoration:none;font-weight:600}
.page-content a.btn-primary,
.hs-html-body a.btn-primary{color:#fff}
.page-content a.btn-primary:hover,
.hs-html-body a.btn-primary:hover{color:#fff}

/* =====================================================================
   بلوک پرسش و پاسخ صفحه اصلی (views/home_sections/qa_teaser.php)
   ===================================================================== */
.hs-qa{background:var(--blue-light);padding:var(--sp-7) 0}
.qa-teaser{
  display:grid;grid-template-columns:1fr;gap:var(--sp-5);align-items:center;
}
.qa-teaser-copy h2{margin:0 0 var(--sp-3);font-size:var(--fs-h2);color:var(--brand-blue)}
.qa-teaser-copy p{margin:0 0 var(--sp-4);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-light)}
.qa-teaser-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.qa-teaser-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.5rem;border-radius:var(--radius-lg);
  font-size:var(--fs-btn);font-weight:700;text-decoration:none;
  background:var(--brand-blue);color:#fff;border:1.5px solid var(--brand-blue);
}
.qa-teaser-btn:hover{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.qa-teaser-btn-alt{background:#fff;color:var(--brand-blue)}
.qa-teaser-btn-alt:hover{background:var(--gold);border-color:var(--gold);color:var(--brand-navy)}
.qa-teaser-stats{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.qa-teaser-stat{text-align:center}
.qa-teaser-stat b{display:block;font-size:2rem;line-height:1.2;color:var(--gold-dark)}
.qa-teaser-stat span{font-size:var(--fs-small);color:var(--text-light)}
@media (min-width:900px){
  .qa-teaser{grid-template-columns:1.6fr 1fr;gap:var(--sp-7)}
}

/* =====================================================================
   صفحه پرسش و پاسخ — فرم بالا، فهرست پایین
   ===================================================================== */
.qa-ask-intro h2{margin:0 0 var(--sp-2);font-size:var(--fs-h3);color:var(--brand-blue)}
.qa-ask-intro p{margin:0 0 var(--sp-4);color:var(--text-light);line-height:var(--lh-body)}
.qa-listbar{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  justify-content:space-between;
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-5);
  border-bottom:2px solid var(--gold);
}
.qa-listbar-title{margin:0;font-size:var(--fs-h3);color:var(--brand-blue)}
.qa-listbar .qa-count{
  display:inline-block;margin-inline-start:.6rem;padding:.15rem .6rem;
  border-radius:999px;background:var(--gold-pale);color:var(--gold-dark);
  font-size:var(--fs-tiny);font-weight:700;border:0;
}
.qa-listbar-ask{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:var(--radius);
  background:var(--brand-blue);color:#fff;text-decoration:none;
  font-size:var(--fs-small);font-weight:600;
}
.qa-listbar-ask:hover{background:var(--brand-navy);color:#fff}

/* =====================================================================
   وکلا — کارت فهرست و پروفایل
   ===================================================================== */
.lawyer-grid{
  display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.lawyer-card{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--bg);transition:box-shadow .2s ease,transform .2s ease;
}
.lawyer-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.lawyer-card-link{display:block;text-decoration:none;color:inherit}
.lawyer-card-photo{
  display:block;width:100%;aspect-ratio:10/11;object-fit:cover;background:var(--blue-light);
}
.lawyer-card-noimg{
  display:grid;place-items:center;font-size:3rem;color:var(--brand-teal-border);
}
.lawyer-card-body{display:block;padding:var(--sp-4)}
.lawyer-card-name{display:block;font-size:var(--fs-h4);font-weight:700;color:var(--brand-blue)}
.lawyer-card-specialty{display:block;margin-top:.35rem;font-size:var(--fs-small);color:var(--text-light);line-height:1.7}
.lawyer-card-meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.6rem;font-size:var(--fs-tiny);color:var(--text-muted)}
.lawyer-card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.lawyer-card-tags span{
  padding:.15rem .55rem;border-radius:999px;
  background:var(--blue-light);color:var(--brand-blue-mid);font-size:var(--fs-tiny);
}
.lawyers-empty{padding:var(--sp-6) 0;color:var(--text-light)}

.lawyer-profile{
  display:grid;grid-template-columns:1fr;gap:var(--sp-5);
  padding:var(--sp-5);margin-bottom:var(--sp-5);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--blue-light) 0%,var(--bg) 100%);
}
.lawyer-photo img{
  display:block;width:100%;max-width:280px;height:auto;
  border-radius:var(--radius-lg);object-fit:cover;
  box-shadow:0 10px 30px rgba(14,36,64,.16);
}
.lawyer-specialty{margin:0 0 var(--sp-4);font-size:var(--fs-lead);color:var(--brand-blue);font-weight:600;line-height:1.7}
.lawyer-facts{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);list-style:none;margin:0 0 var(--sp-4);padding:0}
.lawyer-facts li{display:flex;flex-direction:column;gap:.15rem}
.lawyer-facts span{font-size:var(--fs-tiny);color:var(--text-muted)}
.lawyer-facts b{font-size:var(--fs-body);color:var(--brand-blue)}
.lawyer-practice h2{margin:0 0 var(--sp-2);font-size:var(--fs-h4);color:var(--brand-blue)}
.lawyer-practice ul{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 var(--sp-4);padding:0}
.lawyer-practice li{
  padding:.3rem .75rem;border-radius:999px;
  background:var(--gold-pale);color:var(--gold-dark);
  font-size:var(--fs-small);font-weight:600;border:1px solid var(--gold-border);
}
.lawyer-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.lawyer-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.4rem;border-radius:var(--radius-lg);
  font-size:var(--fs-btn);font-weight:700;text-decoration:none;
}
.lawyer-btn-call{background:var(--gold);color:var(--brand-navy);letter-spacing:.03em}
.lawyer-btn-call:hover{background:#D8B23C;color:var(--brand-navy)}
.lawyer-btn-consult{background:var(--brand-blue);color:#fff}
.lawyer-btn-consult:hover{background:var(--brand-navy);color:#fff}
@media (min-width:760px){
  .lawyer-profile{grid-template-columns:280px 1fr;gap:var(--sp-6);align-items:start}
}

/* =====================================================================
   فاصله گذاری — اصلاح تداخل کلاس کروسل و یکدست کردن پدینگ کارت ها
   ---------------------------------------------------------------------
   ریشه مشکل: کلاس `.tcar-card` در این پوسته دو معنی دارد —
     ۱) نوع اندازه روی خودِ <section> (class="tcar tcar-card")
     ۲) کارت هر آیتم روی <a> (class="tcar-card")
   پس <section> استایل کارت آیتم را به ارث می برد: پس زمینه سفید،
   حاشیه ۱ پیکسل، گردی ۱۰ پیکسل، `flex-direction: column` و
   `height: 100%` — و چون پدینگ ندارد، عنوان «مقالات مرتبط» یک پیکسل
   از گوشه کادر فاصله داشت. اثر جانبی دیگرش این بود که hover روی کل
   کادر، همه بلوک را ۳ پیکسل بالا می برد.

   اینجا ظاهر کادر عمداً و با پدینگ درست تعریف می شود و ارث بری های
   ناخواسته خنثی می شوند. وزن `.tcar.tcar-card` (۰٫۲٫۰) از
   `.tcar-card` (۰٫۱٫۰) بیشتر است، پس بی نیاز از !important برنده است.
   ===================================================================== */
.tcar.tcar-card,
.tcar.tcar-compact{
  display:block; /* لغو flex-direction:column ارث بری شده */
  height:auto;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  margin:var(--sp-7) 0 0;
}
/* کل کادر نباید مثل یک کارت قابل کلیک بالا بپرد */
.tcar.tcar-card:hover,
.tcar.tcar-compact:hover{
  transform:none;
  box-shadow:none;
}
/* عنوان و دکمه ها از لبه کادر نفس بکشند */
.tcar-head{
  margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
}
/* ریل کارت ها تا لبه پدینگ اسکرول می شود، نه بیشتر */
.tcar-track{padding-block:var(--sp-2) var(--sp-3)}

@media (max-width:640px){
  .tcar.tcar-card,
  .tcar.tcar-compact{padding:var(--sp-4)}
  .tcar-head{margin-bottom:var(--sp-4)}
}

/* --------------------------------------------------------------------
   یکدست سازی پدینگ داخلی کارت ها
   مقیاس واحد: کارت بزرگ = --sp-5 (۲۴px) ، کارت کوچک = --sp-4 (۱۶px)
   روی موبایل یک پله پایین تر.
   -------------------------------------------------------------------- */
.lawyer-card-body{padding:var(--sp-5)}
.tcar-body{padding:var(--sp-4);gap:var(--sp-2)}
.qa-a{padding:var(--sp-4) var(--sp-5)}

@media (max-width:640px){
  .lawyer-card-body{padding:var(--sp-4)}
  .qa-item{padding:var(--sp-4)}
  .qa-a{padding:var(--sp-3) var(--sp-4)}
  .lawyer-profile{padding:var(--sp-4)}
}

/* بخش سوالات متداول.
   sections/faq.php کلاس `.section-faq2` را رندر می کند نه `.section-faq`
   (و استایل داخلی خودش را هم دارد)؛ اینجا فقط فاصله بیرونی و عنوان
   تنظیم می شود. */
.section-faq2{margin-block:var(--sp-6) 0}
.section-faq2 .section-title{margin-bottom:var(--sp-4)}
.section-faq2 .faq2-list{gap:var(--sp-3)}

/* ==========================================================================
   دور هشتم — مرز بخش های صفحه اول
   --------------------------------------------------------------------------
   دو ایراد گزارش شد و هر دو یک ریشه داشتند.

   ۱) فضای خالی. سه پدینگ که از وجود هم خبر نداشتند روی هم جمع می شدند:

        پدینگ پایین بخش بالایی   ۶۴ + ۵۴ (ارتفاع موج)  = ۱۱۸px
        پدینگ بالای بخش پایینی                         =  ۵۶px
        مارجین بالای عنوان بخش   (--sp-7 ، خط ۱۹۷)     =  ۴۴px
                                                        ---------
        فاصله کارت ها تا تیتر بعدی                     = ۲۱۸px

      روی نمایشگر ۹۰۰ پیکسلی یعنی نزدیک یک چهارم صفحه بین دو بخش خالی
      می ماند. حالا ۱۲۰px است؛ مرز خوانده می شود ولی صفحه پاره نمی شود.

   ۲) شکل موج. موج قبلی در نوار ۵۴ پیکسلی، ۵۶ واحد از ۶۰ واحدِ viewBox را
      بالا و پایین می رفت — یک S بزرگ و دندانه دار، آن هم بین دو رنگی که
      فقط ۳٪ با هم فرق دارند (‎#EDF5F6‎ و سفید). حالا یک قوس کم عمق و پهن
      است: مرز حس می شود، خودش موضوع صفحه نمی شود.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱) عنوان بخش مارجین بالا نمی گیرد
   --------------------------------------------------------------------------
   قاعده گروهیِ خط ۱۹۷ همین فایل، عنوان بخش را با h2 وسط متن یکی گرفته و به
   هر دو ‎--sp-7‎ مارجین بالا داده. برای h2 وسط مقاله درست است؛ برای عنوانی
   که اولین چیزِ داخل بخش است، دقیقاً پدینگ خودِ بخش را دوباره می سازد.
   (در همه بخش های صفحه اول، عنوان اولین فرزند ظرف است — بررسی شد.)
   -------------------------------------------------------------------------- */

.hs-section .hs-title,
.hs-section .hs-title-row { margin-block-start: 0; }
/* بالا ۴۴ و پایین ۶ بود؛ عنوان از فضای بالای سرش دور و به متن خودش چسبیده
   بود. حالا فاصله زیر عنوان با بقیه بخش ها یکی است. */
.hs-text-image .hs-title { margin-block-end: 16px; }

/* --------------------------------------------------------------------------
   ۲) جداکننده دیگر ارتفاعش را به پدینگ اضافه نمی کند
   --------------------------------------------------------------------------
   دور هفتم برای اینکه موجِ ۵۴ پیکسلی روی کارت ها نیفتد، ارتفاع موج را
   *به علاوهٔ* پدینگ کرده بود. با موجِ کوتاهِ جدید لازم نیست: ۶۴ پیکسل
   پدینگ منهای ۲۴ پیکسل موج، هنوز ۴۰ پیکسل فضای خالی زیر کارت ها می گذارد.

   ‎:not(.hs-slider)‎ لازم است: اسلایدر تمام عرض عمداً پدینگ عمودی ندارد و
   این قاعده نباید به آن پدینگ برگرداند.
   -------------------------------------------------------------------------- */

:root { --sep-h: clamp(14px, 1.8vw, 24px); }

.hs-section.sep-wave:not(.hs-slider),
.hs-section.sep-angle:not(.hs-slider) { padding-block-end: 64px; }

@media (max-width: 768px) {
  .hs-section.sep-wave:not(.hs-slider),
  .hs-section.sep-angle:not(.hs-slider) { padding-block-end: 44px; }
}

/* --------------------------------------------------------------------------
   ۳) شکل موج — یک قوس کم عمق به جای S بزرگ
   --------------------------------------------------------------------------
   قوسِ قبلی در نوار ۵۴ پیکسلی ۲۷ پیکسل بالا و پایین می رفت. این یکی در
   نوار ۲۴ پیکسلی ۸ پیکسل: از ۸px در لبه ها تا ۱۶px در میانه. تک قوس است
   نه S دوتایی و دو لبه اش تقریباً هم ارتفاع اند، پس نه «موجِ کارتونی»
   می شود و نه کج به نظر می رسد.
   -------------------------------------------------------------------------- */

:root {
  --sep-wave-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40C280 16 720 12 1200 36V60H0Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ==========================================================================
   دور نهم — لوگوی هدر و فوتر، ۲۰٪ بزرگ تر
   --------------------------------------------------------------------------
   اندازه لوگو در پنج جای مختلف و در سه فایل نوشته شده بود (main.css با
   ‎.site-logo img‎، و site-base.css در سه دورِ پیاپی). برای اینکه این دور
   هم یک لایه دیگر به آن انبار اضافه نکند، همه اندازه ها یک جا و با همان
   انتخابگرِ برنده (‎.site-logo .brand-logo‎ ، خاص بودگی ۰٬۲٬۰) نوشته شده اند.
   این فایل آخرین فایلِ بارگذاری شده است، پس همین ها ملاک اند.

   ارتفاع hdr-inner هم به همان اندازه ای که لوگو بزرگ شده بالا رفته، وگرنه
   لوگو به لبه بالا و پایین هدر می چسبید:

     عرض        لوگو            hdr-inner
     > ۱۲۰۰     ۶۸ → ۸۲         ۹۰ → ۱۰۴
     ≤ ۱۲۰۰     ۵۶ → ۶۷         ۷۴ → ۸۵
     ≤ ۸۶۰      ۵۶ → ۶۷         ۶۶ → ۷۷
     ≤ ۵۶۰      ۴۴ → ۵۳         ۶۲ → ۷۱
     ≤ ۳۸۰      ۳۸ → ۴۶         ۷۱

   حالت جمع شده (is-compact ، بعد از اسکرول) هم به همان نسبت بزرگ شده،
   وگرنه لوگو موقع اسکرول یک پرش اندازه پیدا می کرد.
   ========================================================================== */

.site-logo .brand-logo,
.drawer-logo .brand-logo { block-size: 82px; height: 82px; }
.site-header.is-compact .site-logo .brand-logo { block-size: 60px; height: 60px; }
.brand.brand-has-logo { max-inline-size: 360px; }
.hdr-inner { min-height: 104px; }
.site-header.is-compact .hdr-inner { min-height: 76px; }

@media (max-width: 1200px) {
  .site-logo .brand-logo,
  .drawer-logo .brand-logo { block-size: 67px; height: 67px; }
  .site-header.is-compact .site-logo .brand-logo { block-size: 53px; height: 53px; }
  .hdr-inner { min-height: 85px; }
  .site-header.is-compact .hdr-inner { min-height: 69px; }
}

@media (max-width: 860px) {
  .hdr-inner { min-height: 77px; }
}

@media (max-width: 560px) {
  .site-logo .brand-logo,
  .drawer-logo .brand-logo { block-size: 53px; height: 53px; }
  .brand.brand-has-logo { max-inline-size: 240px; }
  .hdr-inner { min-height: 71px; }
}

@media (max-width: 380px) {
  .site-logo .brand-logo,
  .drawer-logo .brand-logo { block-size: 46px; height: 46px; }
  .brand.brand-has-logo { max-inline-size: 198px; }
}

/* --------------------------------------------------------------------------
   لوگوی فوتر — ۷۳ → ۸۸
   ارتفاع از روی نسبت خودِ تصویر می آید (height: auto در خط ۱۰۳۰)، پس فقط
   عرض عوض می شود: ۸۳ → ۱۰۰ پیکسل ارتفاع.
   -------------------------------------------------------------------------- */
.ti-brand img { width: 88px; }

/* ==========================================================================
   دور دهم — تصویر بخش معرفی، بدون قاب و پس زمینه
   --------------------------------------------------------------------------
   ‎.ti-image‎ یک «کارت» بود، نه یک تصویر: پس زمینه فیروزه ای کم رنگ، سایه،
   گوشه گرد، ارتفاع کمینه ۲۲۰ پیکسل، و یک قاب فیروزه ای جابه جا شده روی
   ‎::after‎. آن پس زمینه اصلاً برای روزی گذاشته شده بود که پوشه ‎/imgs/‎ هنوز
   از سرور قدیم کپی نشده بود و تصویرها نمی آمدند — یعنی یک داربستِ موقت که
   ماندگار شده بود.

   حالا فقط خودِ تصویر است. اگر PNG با پس زمینه شفاف بگذارید، پس زمینه بخش
   از پشتش دیده می شود، نه یک مستطیل فیروزه ای.

   دامنه: فقط بخش صفحه اول. ‎.ti-image‎ داخل صفحات دیگر قاب خودش را نگه
   می دارد.
   ========================================================================== */

.hs-text-image .ti-image {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  min-block-size: 0;
}
.hs-text-image .ti-image::after { content: none; }
.hs-text-image .ti-image img { border-radius: 0; }

/* =====================================================================
   اجزای اختصاصی سازه آزمون فولاد
   این بخش عمداً در انتهای فایل است: بعد از main.css و site-base.css
   بارگذاری می شود و هر چیزی که بالاتر تعریف شده را بازنویسی می کند.
   ===================================================================== */

/* --- کلید زبان در نوار بالا -----------------------------------------
   سایت قدیم همین لینک را با کلاس .lng در نوار آبی داشت. */
.topbar-lang {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; text-decoration: none;
  font-size: var(--fs-tiny); font-weight: 600;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  line-height: 1.9;
}
.topbar-lang span { letter-spacing: .04em; }   /* لاتین است، مجاز */
@media (hover: hover) {
  .topbar-lang:hover { background: rgba(255, 255, 255, .16); }
}
.topbar-lang:active { background: rgba(255, 255, 255, .24); }

/* --- ویدیوی صفحه اصلی ------------------------------------------------
   ردیف «متن + ویدیو» بالای صفحه اصلی سایت قدیم. */
.ti-image.ti-video { box-shadow: var(--shadow); background: #000; }
.ti-image.ti-video video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.ti-more { margin: var(--sp-4) 0 0; }

/* --- صفحه محصول -----------------------------------------------------
   نام کلاس ها عمداً pd-* است و نه product-*: در site-base.css یک
   ‎.product-card‎ هست که کارتِ فهرست محصولات را می سازد، و استفاده دوباره
   از همان نام، کارت جزئیات را با استایل کارت شبکه ای قاطی می کرد. */
.pd-wrap { margin: 0 0 var(--sp-6); }
.pd-card {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-5);
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.pd-main {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}
.pd-main img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: contain;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.pd-thumb {
  padding: 0; border: 2px solid var(--border);
  border-radius: 8px; overflow: hidden;
  background: #fff; cursor: pointer;
  /* هدف لمسی؛ زیر ۴۴ پیکسل روی موبایل قابل زدن نیست */
  min-height: 56px;
}
.pd-thumb img {
  display: block; width: 100%; height: 56px; object-fit: cover;
}
.pd-thumb.is-active { border-color: var(--accent); }
@media (hover: hover) {
  .pd-thumb:hover { border-color: var(--accent); }
}

.pd-price {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.pd-price-value {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 800;
  color: var(--red-text);       /* قرمز متن، نه #E72727 */
}
.pd-price-unit { font-size: var(--fs-small); color: var(--text-light); }
.pd-price-call { font-size: var(--fs-lead); font-weight: 700; color: var(--accent); }
.pd-stock-out {
  margin: 0 0 var(--sp-4);
  color: var(--red-text); font-weight: 600; font-size: var(--fs-small);
}

.pd-actions {
  /* گرید دو ستونه و نه flex-wrap: با flex، دکمه ها به محض بلندتر شدن
     شماره تلفن به خط بعد می پرند و ردیف نامرتب می شود. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.pd-actions .btn { min-width: 0; justify-content: center; }
.pd-btn-wa { background: #1FA855; color: #fff; }   /* ۳٫۴:۱ — متن درشت */
@media (hover: hover) { .pd-btn-wa:hover { background: #17833F; } }

@media (max-width: 780px) {
  .pd-card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-4); }
}

/* --- صفحات انگلیسی ---------------------------------------------------
   ‏html[dir=ltr] را layout.php می گذارد. متن انگلیسی نه نیم فاصله دارد و
   نه به line-height ۱٫۹۵ فارسی نیاز دارد. */
html[lang="en"] body { line-height: 1.75; }
html[lang="en"] .page-content { text-align: left; }
html[lang="en"] .page-h1,
html[lang="en"] .page-content h2,
html[lang="en"] .section-title { text-align: left; }

/* --- موبایل: حالت hover نباید بچسبد -----------------------------------
   بعد از یک تَپ، حالت hover تا تَپ بعدی روی همان کارت می ماند و کاربر
   فکر می کند آن کارت «انتخاب» شده. */
@media (hover: none) {
  .child-card:hover, .news-item:hover, .product-card:hover,
  .pd-thumb:hover, .topbar-lang:hover {
    background: inherit;
    border-color: inherit;
    transform: none;
    box-shadow: inherit;
  }
}

/* --- خط فارسی متصل است: هیچ letter-spacing منفی ------------------------
   main.css و site-base.css روی هشت انتخابگر letter-spacing منفی دارند.
   روی لاتین بی ضرر است، ولی فارسی خط متصل دارد و فاصله منفی، اتصال
   حروف را می شکند و «می شود» را شبیه «می شود» با درزهای نامرتب می کند.
   دو لایه پایه دست نخورده می مانند (تا به روزرسانی مشترکشان ساده بماند)
   و اینجا خنثی می شوند. شماره تلفن ها که رقم لاتین اند مستثنا هستند. */
.logo-text,
.page-h1,
.page-content h2,
.page-content h3,
.section-title,
.page-section .section-title,
.cta-btn,
.form-submit-btn,
.hs-slider .swiper-h2,
.brand-name,
.hs-title,
.child-card-title,
.news-item-title { letter-spacing: normal; }