/* =====================================================================
   تهران ایمن — لایهٔ اختصاصی سایت
   بعد از 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); }

/* خطوط خیلی بلند خواندن را سخت می‌کند؛ ۷۵ نویسه سقف پذیرفته‌شده است. */
.page-content > p,
.page-content > ul,
.page-content > ol,
.section-text .section-content > p { max-width: 78ch; }

.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;
}

/* ---------------------------------------------------------------------
   ۳ — اجزای اختصاصی تهران ایمن
--------------------------------------------------------------------- */

/* --- جعبهٔ هزینهٔ تعمیر -------------------------------------------- */
.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); }

.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); }

.ti-info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-5); padding: var(--sp-6) 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.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; }
.ti-contact span { color: #94a3b8; }
.ti-contact a { color: #e2e8f0; }
.ti-contact a:hover { color: #fff; }

.ti-links {
  display: grid; grid-template-columns: 1.4fr repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-6); padding: var(--sp-6) 0;
}
.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; gap: 3px;
    padding: .55rem .25rem;
    font-size: var(--fs-tiny); color: var(--text-light);
  }
  .ti-mb-item i { font-size: 1.15rem; }
  .ti-mb-cta { color: #fff; background: var(--accent); }
  .ti-mb-cta:hover { color: #fff; }
  body { padding-bottom: 64px; }
}

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

@media (max-width: 720px) {
  .container { padding-inline: 16px; }
  .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) {
  .page-content > p, .page-content > ul, .page-content > ol { max-width: none; }
  .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; }
}