/* =====================================================================
   تهران ایمن — لایه اختصاصی سایت
   بعد از 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 {
  --brand-blue:        #1E3A8A;   /* سرمه ای — تیترها و نوارها */
  --brand-blue-mid:    #2563EB;   /* آبی عملیاتی — لینک و دکمه */
  --brand-blue-dark:   #1D4ED8;
  --brand-teal:        #2563EB;
  --brand-teal-mid:    #2563EB;
  --brand-teal-dark:   #1D4ED8;
  --brand-teal-deep:   #1E3A8A;
  --brand-teal-pale:   #EFF6FF;
  --brand-teal-border: #BFDBFE;
  --brand-navy:        #0F172A;
  --brand-navy-soft:   #1E293B;

  --action-blue:       #2563EB;
  --action-blue-dark:  #1D4ED8;
  --action-blue-deep:  #1E3A8A;

  --accent:            #1D4ED8;   /* ۵٫۹:۱ روی سفید */
  --accent-dark:       #1E3A8A;   /* ۸٫۶:۱ */
  --accent-rgb:        29, 78, 216;
  --blue:              #2563EB;
  --blue-dark:         #1D4ED8;
  --blue-light:        #EFF6FF;
  --blue-border:       #BFDBFE;

  --footer-from:       #0F172A;
  --footer-to:         #1E293B;
  --faq-underline:     #2563EB;

  --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.9;
  --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: -.01em;
  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: -.005em;
}
.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; }
}