/* ==========================================================================
   دکتر حسن درتاج — لایه هویت بصری
   --------------------------------------------------------------------------
   این فایل بعد از main.css بارگذاری می شود (views/layout.php) و نقش آن
   بازتعریف متغیرهای ریشه و افزودن اجزای اختصاصی سایت است.
   قواعد: بدون float، بدون !important، ویژگی های منطقی برای راست‌چین.

   پالت از سایت قدیم گرفته شده و برای دسترس‌پذیری تنظیم شده است:
     فیروزه ای #4BA1AA  → دکمه نوبت دهی و شماره تماس هدر
     سرمه ای   #172335  → نوار موبایل و فوتر
     آبی       #000099  → عنوان بخش های صفحه اصلی
     آبی روشن  #207dff  → نوار عنوان صفحات داخلی
   فیروزه ای اصلی روی سفید فقط ۳٫۴:۱ کنتراست دارد، پس متن و دکمه ها از
   نسخهٔ تیره تر (#2C7A84، نسبت ۴٫۹:۱) استفاده می کنند و رنگ روشن تر فقط
   برای پرکردن سطح و حاشیه می ماند.
   ========================================================================== */


/* ==========================================================================
   ۱) فونت — ایران یکان ایکس (خودمیزبان)
   ========================================================================== */

@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Light.woff2') format('woff2'),
       url('/fonts/IRANYekanX-Light.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-ExtraBold.woff2') format('woff2'),
       url('/fonts/IRANYekanX-ExtraBold.woff')  format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Heavy.woff2') format('woff2'),
       url('/fonts/IRANYekanX-Heavy.woff')  format('woff');
  font-weight: 1000;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   ۲) متغیرهای برند — بازنویسی توکن های main.css
   ========================================================================== */

:root {

  /* --- رنگ های اصلی هویت --- */
  --brand-teal:        #4BA1AA;   /* فیروزه ای سایت قدیم — فقط سطح و حاشیه */
  --brand-teal-mid:    #3E97A2;
  --brand-teal-dark:   #2C7A84;   /* متن و دکمه — کنتراست ۴٫۹:۱ روی سفید */
  --brand-teal-deep:   #1F5C64;
  --brand-teal-pale:   #E8F5F6;
  --brand-teal-border: #BEE0E4;

  --brand-navy:        #172335;   /* نوار موبایل و فوتر سایت قدیم */
  --brand-navy-soft:   #24354D;
  --brand-blue:        #10357A;   /* جانشین #000099 عنوان بخش ها */
  --brand-blue-mid:    #2E6FD9;   /* جانشین #207dff نوار عنوان صفحه */
  --brand-blue-dark:   #1F55B0;
  --brand-yellow:      #E0A800;   /* لبه تاکیدی کارت های مرتبط */

  /* --- رنگ عملیاتی (سرتیتر، دکمه، لینک) --- */
  --action-blue:       var(--brand-teal-mid);
  --action-blue-dark:  var(--brand-teal-dark);
  --action-blue-deep:  var(--brand-teal-deep);

  /* --- گرادیان تاکیدی (کارت نوبت و نشان ها) --- */
  --price-from:        #3E97A2;
  --price-to:          #2C7A84;
  --price-edge:        #6FC0C8;
  --price-label:       #E8F5F6;

  /* --- رنگ های وضعیت --- */
  --amber:             #E0A800;
  --amber-dark:        #B98900;
  --sale-green:        #1E7E34;
  --download-green:    #2E7D32;
  --price-red:         #C62828;
  --price-red-dark:    #B71C1C;
  --faq-underline:     var(--brand-teal-mid);

  /* --- سطوح --- */
  --surface-page:      #F4F6F7;   /* پس زمینه بخش ها */
  --surface-crumb:     #ECEFF1;   /* نوار مسیر صفحه */
  --surface-line:      #DCE2E4;

  /* --- گرادیان فوتر (سرمه ای سایت قدیم، بدون بنفش) --- */
  --footer-from:       #0F1B2A;
  --footer-to:         #24354D;

  /* ---------------------------------------------------------------
     بازنویسی توکن های main.css
     --------------------------------------------------------------- */
  --blue:         var(--brand-teal-mid);
  --blue-dark:    var(--brand-teal-dark);
  --blue-light:   var(--brand-teal-pale);
  --blue-border:  var(--brand-teal-border);

  --accent:       var(--brand-teal-dark);
  --accent-dark:  var(--brand-teal-deep);
  --accent-rgb:   44, 122, 132;         /* main.css این را صدا می زند ولی تعریف نکرده */

  --red:          var(--price-red-dark);
  --red-light:    #FDECEC;
  --green:        var(--sale-green);
  --green-light:  #EBF6EE;

  --text:         #22303C;
  --text-light:   #4A5A67;
  --text-muted:   #6B7A87;

  --bg:           #ffffff;
  --bg-light:     #F8FAFA;
  --bg-section:   var(--surface-page);
  --border:       #E1E6E9;

  /* متغیرهایی که views/home.php صدا می زند و در main.css تعریف نشده اند */
  --ink:          var(--brand-navy);
  --bg-alt:       var(--surface-page);
  --gold-pale:    var(--brand-teal-pale);

  /* توکن هایی که main.css و بخش های جدول/کارت با مقدار جانشین صدا می زدند.
     تعریفشان اینجا باعث می شود همه جا از همین پالت پیروی کنند نه از
     رنگ های جانشینِ به‌جامانده از قالب اولیه. */
  --brand:        var(--brand-teal-dark);
  --bg-soft:      #F4F7F8;
  --line:         var(--border);
  --muted:        var(--text-muted);
  --shadow-md:    0 4px 18px rgba(23, 35, 53, .12);
  --tint-white:   #ffffff;

  /* --- گِردی گوشه ها --- */
  --radius-sm:    5px;    /* دکمه های کوچک و نوار سرتیتر */
  --radius:       8px;    /* کارت ها */
  --radius-lg:    10px;   /* پنل ها */
  --radius-xl:    20px;   /* نشان ها */
  --radius-pill:  50px;   /* دکمه های قرصی */

  /* --- سایه ها --- */
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, .07);
  --shadow:       0 2px 8px rgba(0, 0, 0, .1);
  --shadow-lg:    0 8px 20px rgba(0, 0, 0, .15);

  --container:    1200px;
  --font:         'IRANYekanX', 'IRANYekan', 'Vazirmatn', Tahoma, system-ui, sans-serif;

  /* --- حرکت --- */
  --lift:         -5px;
  --zoom:         1.05;
  --t-card:       transform .3s ease, box-shadow .3s ease;
  --t-img:        transform .4s ease;

  /* --- ارتفاع نوارهای چسبان (برای آفست هدر و پدینگ بدنه) --- */
  --topbar-h:     38px;
  --phonebar-h:   60px;
}

/* غیرفعال کردن حرکت برای کاربرانی که آن را کم کرده اند
   (به جای بازنویسی با !important، خودِ توکن ها خنثی می شوند) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --lift:   0px;
    --zoom:   1;
    /* مقدارِ none در فهرست transition نامعتبر می شود، پس زمان را صفر می کنیم */
    --t-card: transform .01ms linear, box-shadow .01ms linear;
    --t-img:  transform .01ms linear;
  }
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   ۳) تایپوگرافی و پایه
   ========================================================================== */

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
  background: var(--bg);
  /* نوار تماس ثابت پایین نباید روی محتوا بیفتد */
  padding-block-end: 0;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font); }

h1, .page-h1 {
  font-size: 24px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--text);
}

h2 {
  font-size: 20px;
  line-height: 1.75;
  font-weight: 800;
  color: var(--text);
}

h3 { font-size: 17px; font-weight: 600; line-height: 1.8; }

a { color: var(--action-blue-dark); }
a:hover { color: var(--action-blue-deep); }

/* بلوک های محتوایی — ارتفاع خط ۲ مطابق نسخه قدیمی (۳۲px روی متن ۱۷px) */
.page-content,
.page-content-intro,
.section-content,
.about-content,
.hcs-content {
  font-size: 17px;
  line-height: 2;
  color: var(--text);
}

.page-content h2,
.section-content h2 { font-size: 20px; font-weight: 800; }
.page-content h3,
.section-content h3 { font-size: 17px; font-weight: 600; }

/* تصاویر داخل محتوا — حاشیه سرمه ای نسخه قدیمی */
.page-content img {
  border: 1px solid var(--brand-navy);
  border-radius: var(--radius);
}


/* ==========================================================================
   ۴) دکمه های پایه (main.css این ها را تعریف نکرده است)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-lg { padding: 13px 26px; font-size: 16px; }

.btn-primary {
  background: var(--action-blue);
  border-color: var(--action-blue);
  color: #fff;
}
.btn-primary:hover {
  background: var(--action-blue-dark);
  border-color: var(--action-blue-dark);
  color: #fff;
}

.btn-outline {
  background: transparent;
  border-color: var(--action-blue);
  color: var(--action-blue-dark);
}
.btn-outline:hover {
  background: var(--action-blue);
  color: #fff;
}

.btn:focus-visible,
.buy-btn:focus-visible,
.download-btn:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}


/* ==========================================================================
   ۵) نوار بالای سایت — .topbar
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--brand-blue);
  color: #fff;
  font-size: 13px;
  line-height: 1.8;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--topbar-h);
}

.topbar-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.topbar-items {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
  transition: transform .45s ease;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: rgba(255, 255, 255, .95);
}
.topbar-item i { font-size: 12px; opacity: .85; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* شماره تماس — قرص سفید سمت راست نوار */
.topbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px;
  background: #fff;
  color: var(--brand-blue);
  font-weight: 600;
  font-size: 13.5px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.topbar-phone:hover {
  background: var(--brand-yellow);
  color: var(--brand-navy);
}

/* سوییچ زبان — قرص های سفید radius 5px */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .16);
}
.lang-switch-ico { display: inline-flex; opacity: .85; }
.lang-switch-ico svg { width: 15px; height: 15px; fill: #fff; display: block; }

.lang-opt {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.lang-opt:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.lang-opt.is-active { background: #fff; color: var(--brand-blue); }

.lang-switch.is-block { display: flex; background: var(--bg-light); }
.lang-switch.is-block .lang-opt { color: var(--text-light); flex: 1; text-align: center; }
.lang-switch.is-block .lang-opt.is-active { background: var(--brand-blue); color: #fff; }

/* هدر زیر نوار چسبان می ماند */
.site-header { top: var(--topbar-h); }


/* ==========================================================================
   ۶) نوار تماس ثابت پایین — .phonebar / .mobile-contact-bar
   ========================================================================== */

/* نسخه ساده و مستقل (در صورت افزودن مارک آپ اختصاصی) */
.phonebar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--phonebar-h);
  padding: 10px 16px;
  background: var(--brand-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
}
.phonebar,
.phonebar:hover { color: #fff; }
.phonebar-num { direction: ltr; letter-spacing: .5px; }

/* نسخه موجود در مارک آپ: nav.mobile-contact-bar.igs-mcb */
.mobile-contact-bar.igs-mcb { display: none; }

@media (max-width: 960px) {

  .phonebar { display: flex; }

  .mobile-contact-bar.igs-mcb {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1200;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--brand-navy);
    border-top: 2px solid var(--brand-blue);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-contact-bar.igs-mcb .igs-mcb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--phonebar-h);
    padding: 8px 4px;
    background: none;
    border: none;
    border-inline-end: 1px solid rgba(255, 255, 255, .15);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-contact-bar.igs-mcb .igs-mcb-item:last-child { border-inline-end: none; }
  .mobile-contact-bar.igs-mcb .igs-mcb-item:active { background: rgba(255, 255, 255, .12); }

  .mobile-contact-bar.igs-mcb .igs-mcb-ico { font-size: 18px; line-height: 1; }
  .mobile-contact-bar.igs-mcb .is-wa    .igs-mcb-ico { color: #25d366; }
  .mobile-contact-bar.igs-mcb .is-ig    .igs-mcb-ico { color: #e1306c; }
  .mobile-contact-bar.igs-mcb .is-quote .igs-mcb-ico { color: var(--brand-yellow); }

  /* فضای امن تا نوار ثابت روی محتوا نیفتد */
  body { padding-block-end: calc(var(--phonebar-h) + env(safe-area-inset-bottom, 0px)); }
}


/* ==========================================================================
   ۷) مسیر صفحه — .breadcrumb
   ========================================================================== */

.breadcrumb {
  background: var(--surface-crumb);
  border-bottom: 1px solid var(--surface-line);
  padding: 9px 0;
  font-size: 13px;
  line-height: 1.9;
}

/* توجه: در مارک آپ، <ol> داخل .container است؛ پس اینجا padding افقی نمی گذاریم */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li { display: flex; align-items: center; gap: 6px; }

/* جداکننده راست‌چین — پیکان رو به چپ، هم‌جهت با خوانش فارسی */
.breadcrumb li + li::before {
  content: '\2039';
  margin: 0;
  color: #9a9a9a;
  font-size: 15px;
  line-height: 1;
}

/* مارک آپ خودش یک «›» چاپ می کند و main.css هم ::before می سازد؛
   جداکننده تکراری مارک آپ پنهان می شود تا یک نشانه بیشتر دیده نشود */
.breadcrumb li > span[aria-hidden="true"] { display: none; }

.breadcrumb a { color: var(--text-muted); font-weight: 400; text-decoration: none; }
.breadcrumb a:hover { color: var(--action-blue-dark); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--text); font-weight: 600; }


/* ==========================================================================
   ۸) کارت قیمت — گرادیان فیروزه ای (امضای بصری برند)
   ========================================================================== */

.price-card,
.igs-pdp-buy {
  background: linear-gradient(135deg, var(--price-from) 0%, var(--price-to) 100%);
  border-radius: var(--radius);
  /* در راست‌چین، لبه چپِ نسخه قدیمی همان inline-end است */
  border-inline-end: 5px solid var(--price-edge);
  box-shadow: 0 4px 12px rgba(0, 180, 216, .2);
  padding: 18px 20px;
  color: #fff;
}

.price-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

/* عدد قیمت — ۳۲px ضخیم سفید با سایه متن */
.price-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .18);
  direction: ltr;
  unicode-bidi: isolate;
}

.price-currency {
  font-size: 14px;
  font-weight: 600;
  color: var(--price-label);
}

/* واحد فروش — قرص سفید */
.price-unit {
  margin-inline-start: auto;
  padding: 5px 14px;
  background: #fff;
  color: var(--price-to);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  border-radius: var(--radius-xl);
  white-space: nowrap;
}

.price-note {
  flex-basis: 100%;
  font-size: 13.5px;
  color: var(--price-label);
}

/* حالت «قیمت به نرخ روز» در صفحه محصول */
.igs-pdp-buy { display: grid; gap: 14px; }

.igs-pdp-price {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}

.igs-pdp-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.igs-pdp-btns .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--price-to);
}
.igs-pdp-btns .btn-primary:hover {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--brand-navy);
}
.igs-pdp-btns .btn-outline {
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}
.igs-pdp-btns .btn-outline:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.igs-pdp-trust {
  list-style: none;
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--price-label);
}
.igs-pdp-trust li { display: flex; align-items: center; gap: 7px; }
.igs-pdp-trust li::before {
  content: '\2713';
  font-weight: 800;
  color: #fff;
}


/* ==========================================================================
   ۹) دکمه خرید (کهربایی) و دکمه دانلود کاتالوگ (سبز)
   ========================================================================== */

.buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 28px;
  background: var(--amber);
  border: 2px solid var(--amber-dark);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--brand-navy);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.buy-btn:hover {
  background: var(--amber-dark);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 152, 0, .35);
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 22px;
  background: var(--download-green);
  border: 1px solid var(--download-green);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.download-btn:hover {
  background: #3d8b40;
  color: #fff;
  box-shadow: 0 4px 12px rgba(76, 175, 80, .32);
}

/* جای آیکن دانلود — چه <i> فونت‌آوسام باشد چه <svg> */
.download-btn i,
.download-btn svg { flex-shrink: 0; font-size: 16px; width: 17px; height: 17px; fill: currentColor; }

/* اگر آیکنی داخل دکمه نبود، پیکان پیش‌فرض گذاشته می شود */
.download-btn:not(:has(i)):not(:has(svg))::before {
  content: '\2193';
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}


/* ==========================================================================
   ۱۰) نوار سرتیتر بخش — .section-head
   ========================================================================== */

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  margin-bottom: 24px;
  background: var(--action-blue);
  border-radius: var(--radius-sm);
}

.section-head .section-title,
.section-head h2 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.7;
  color: #fff;
}
.section-head .section-title::after,
.section-head .section-title::before { content: none; }


/* ==========================================================================
   ۱۱) کارت محصول — .product-card / .igs-prod
   ========================================================================== */

.product-grid,
.igs-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

.igs-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.igs-products-head .section-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-navy);
}

/* حالت اسلایدری */
.igs-car-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.igs-car-track > .igs-prod {
  flex: 0 0 clamp(180px, 46vw, 232px);
  scroll-snap-align: start;
}

.igs-car-nav { display: flex; gap: 8px; }

.igs-car-btn,
.igs-art-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--action-blue-dark);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.igs-car-btn:hover:not(:disabled),
.igs-art-btn:hover:not(:disabled) {
  background: var(--action-blue);
  border-color: var(--action-blue);
  color: #fff;
}
.igs-car-btn:disabled,
.igs-art-btn:disabled { opacity: .35; cursor: default; }

.igs-car-btn::before,
.igs-art-btn::before {
  content: '\203A';
  font-size: 20px;
  line-height: 1;
}
.igs-car-btn[data-dir="next"]::before,
.igs-art-btn[data-dir="next"]::before { content: '\2039'; }

/* --- خود کارت --- */
.product-card,
.igs-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  transition: var(--t-card);
}
.product-card:hover,
.igs-prod:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
}

/* تصویر مربعی */
.product-card-media,
.igs-prod-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-light);
}
.product-card-media img,
.igs-prod-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--t-img);
}
.product-card:hover .product-card-media img,
.igs-prod:hover .igs-prod-media img { transform: scale(var(--zoom)); }

/* جانشین تصویر */
.igs-prod-noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9cfd8;
}
.igs-prod-noimg svg { width: 42px; height: 42px; fill: currentColor; }

/* بدنه */
.product-card-body,
.igs-prod-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  padding: 13px 14px 14px;
}

/* عنوان — دو خط، بقیه با سه‌نقطه */
.product-card-title,
.igs-prod-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.4em;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--brand-navy);
}
.product-card:hover .product-card-title,
.igs-prod:hover .igs-prod-title { color: var(--action-blue-dark); }

.igs-prod-code {
  font-size: 12px;
  color: var(--text-muted);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* قیمت قرمز داخل کارت */
.product-card-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--price-red);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
.product-card-price small { font-size: 12px; font-weight: 400; color: var(--text-muted); }

.product-card-foot,
.igs-prod-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.igs-prod-brand {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* دکمه عملیات آبی */
.product-card-cta,
.igs-prod-cta {
  flex-shrink: 0;
  padding: 5px 12px;
  background: var(--action-blue);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  transition: background-color .2s ease;
}
.product-card:hover .product-card-cta,
.igs-prod:hover .igs-prod-cta { background: var(--action-blue-dark); }

/* نشان سبز «فروش» — گوشه ابتدایی کارت */
.product-card .badge-sale,
.igs-prod .badge-sale {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  padding: 3px 12px;
  background: var(--sale-green);
  border-radius: var(--radius-xl);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
  box-shadow: 0 2px 6px rgba(40, 167, 69, .3);
}


/* ==========================================================================
   ۱۲) بلوک مشخصات فنی — .spec-section / .igs-pdp-spec
   ========================================================================== */

.spec-section,
.igs-pdp-spec {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin: 0;
}

.spec-section > h2,
.spec-section > h3 {
  margin: -16px -18px 14px;
  padding: 10px 18px;
  background: var(--action-blue);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.spec-row,
.igs-pdp-spec-row {
  display: grid;
  grid-template-columns: minmax(90px, 30%) 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14.5px;
}
.spec-row:last-child,
.igs-pdp-spec-row:last-child { border-bottom: none; }

.spec-row dt,
.igs-pdp-spec-row dt {
  font-weight: 600;
  color: var(--text-muted);
}
.spec-row dd,
.igs-pdp-spec-row dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.igs-ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }


/* ==========================================================================
   ۱۳) آکاردئون پرسش و پاسخ — .faq-accordion / .faq2-*
   ========================================================================== */

.faq-accordion { display: flex; flex-direction: column; gap: 10px; }

.faq-accordion .faq-row,
.section-faq2 .faq2-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-accordion .faq-q,
.section-faq2 .faq2-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  background: #fff;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--brand-navy);
  text-align: start;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.faq-accordion .faq-q:hover,
.section-faq2 .faq2-q:hover { background: var(--blue-light); }

.faq-accordion .faq-row.open .faq-q,
.section-faq2 .faq2-item.open .faq2-q {
  background: var(--blue-light);
  color: var(--action-blue-dark);
}

/* خط زیرِ فیروزه ای روی عنوان پرسش */
.faq-accordion .faq-q-text,
.section-faq2 .faq2-q-text {
  flex: 1;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.faq-accordion .faq-row.open .faq-q-text,
.section-faq2 .faq2-item.open .faq2-q-text {
  border-bottom-color: var(--faq-underline);
}

/* آیکن + / − */
.faq-accordion .faq-icon,
.section-faq2 .faq2-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.faq-accordion .faq-icon::before,
.faq-accordion .faq-icon::after,
.section-faq2 .faq2-icon::before,
.section-faq2 .faq2-icon::after {
  content: '';
  position: absolute;
  background: var(--action-blue);
  transition: opacity .25s ease, transform .25s ease;
}
.faq-accordion .faq-icon::before,
.section-faq2 .faq2-icon::before {
  inset-inline: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}
.faq-accordion .faq-icon::after,
.section-faq2 .faq2-icon::after {
  inset-block: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}
.faq-accordion .faq-row.open .faq-icon::after,
.section-faq2 .faq2-item.open .faq2-icon::after { opacity: 0; }

.faq-accordion .faq-a-inner,
.section-faq2 .faq2-a-inner {
  padding: 16px 18px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 2;
  color: var(--text-light);
}


/* ==========================================================================
   ۱۴) فهرست مطالب — .toc / .toc-box
   ========================================================================== */

.toc,
.toc-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 26px 0;
  padding: 0;
}

.toc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--action-blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
  border: none;
}
.toc-title svg { width: 18px; height: 18px; fill: currentColor; }

.toc-list {
  list-style: none;
  margin: 0;
  padding: 8px 18px 14px;
  counter-reset: toc;
}
.toc-list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.toc-list li:last-child { border-bottom: none; }
.toc-list li::before { content: none; }

.toc-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: var(--blue-light);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--action-blue-dark);
}

.toc-list a {
  flex: 1;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--text-light);
  text-decoration: none;
}
.toc-list a:hover { color: var(--action-blue-dark); text-decoration: underline; }

.toc-level-3 { padding-inline-start: 18px; }


/* ==========================================================================
   ۱۵) کارت مقاله — .article-card / .igs-art
   ========================================================================== */

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.igs-art-car { position: relative; }

.igs-art-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
}
.igs-art-track > .igs-art {
  flex: 0 0 clamp(250px, 80vw, 340px);
  scroll-snap-align: start;
}

.article-card,
.igs-art {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: var(--t-card);
}
.article-card:hover,
.igs-art:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
}

.article-card-img,
.igs-art-img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-light);
}
.article-card-img img,
.igs-art-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--t-img);
}
.article-card:hover .article-card-img img,
.igs-art:hover .igs-art-img img { transform: scale(var(--zoom)); }

.article-card-body,
.igs-art-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 15px 16px 16px;
}

/* عنوان سرمه ای ضخیم — مطابق نسخه قدیمی */
.article-card-title,
.igs-art-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.75;
  color: var(--brand-navy);
}
.article-card:hover .article-card-title,
.igs-art:hover .igs-art-title { color: var(--action-blue-dark); }

.article-card-excerpt,
.igs-art-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text-light);
}

.article-card-more,
.igs-art-more {
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--action-blue-dark);
}
.article-card-more::after,
.igs-art-more::after { content: ' \2190'; }


/* ==========================================================================
   ۱۶) کارت مطالب مرتبط — .related-card / .related-item
   ========================================================================== */

.related-pages { margin-top: 44px; }

.related-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.related-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--blue-light);
  border-radius: var(--radius-sm);
}
.related-icon svg { width: 18px; height: 18px; fill: var(--action-blue-dark); }
.related-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--brand-navy); }

.related-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.related-card,
.related-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  /* لبه زردِ نسخه قدیمی روی ضلع آغازین (در RTL سمت راست) */
  border-inline-start: 7px solid var(--brand-yellow);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: var(--t-card);
}
.related-card:hover,
.related-item:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
}

.related-card-img,
.related-item-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-light);
}
.related-card-img img,
.related-item-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--t-img);
}
.related-card:hover .related-card-img img,
.related-item:hover .related-item-img img { transform: scale(var(--zoom)); }

.related-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 5;
  background: var(--bg-light);
}
.related-item-icon svg { width: 26px; height: 26px; fill: #c2c8d2; }

/* بلوک کپشن آبی برند */
.related-card-body,
.related-item-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  padding: 12px 14px;
  background: var(--brand-blue);
}

.related-card-title,
.related-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.75;
  color: #fff;
}
.related-card:hover .related-card-title,
.related-item:hover .related-item-title { color: var(--brand-yellow); }

.related-item-arrow {
  flex-shrink: 0;
  font-size: 17px;
  color: rgba(255, 255, 255, .85);
  transition: transform .3s ease;
}
.related-item:hover .related-item-arrow { transform: translateX(-4px); }


/* ==========================================================================
   ۱۷) نوار فراخوان بالای فوتر — .footer-cta
   ========================================================================== */

.footer-cta {
  background: var(--brand-blue);
  color: #fff;
  padding: 20px 0;
}

.footer-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-cta-text {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-cta-icon { font-size: 30px; color: var(--brand-yellow); flex-shrink: 0; }
.footer-cta-text strong { display: block; font-size: 17px; font-weight: 800; line-height: 1.7; }
.footer-cta-text span { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .82); }

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 26px;
  background: var(--brand-yellow);
  border-radius: var(--radius-pill);
  font-size: 17px;
  font-weight: 800;
  color: var(--brand-navy);
  text-decoration: none;
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.footer-cta-btn:hover {
  background: #fff;
  color: var(--brand-blue);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}


/* ==========================================================================
   ۱۸) فوتر — نوار گرادیانی + نوار حق نشر روشن
   ========================================================================== */

.site-footer.mry-footer {
  background: linear-gradient(135deg, var(--footer-from) 0%, var(--footer-to) 100%);
  color: #fff;
  padding: 46px 0 0;
}

.mry-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(200px, 1fr));
  gap: 34px;
  padding-bottom: 40px;
}

/* --- ستون برند --- */
.mry-footer-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.mry-footer-logo img { height: 52px; width: auto; }
.mry-logo-icon { font-size: 24px; color: var(--brand-yellow); }
.mry-logo-text { font-size: 18px; font-weight: 800; color: #fff; }

.mry-footer-desc {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 2;
  color: rgba(255, 255, 255, .8);
}

.mry-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.mry-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-xl);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.mry-badge i { color: var(--brand-yellow); }

.mry-socials { display: flex; gap: 9px; margin-top: 20px; }
.mry-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  transition: var(--t-card), background-color .25s ease;
}
.mry-social:hover { transform: translateY(-3px); color: #fff; }
.mry-social.ig:hover { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }
.mry-social.tg:hover { background: #0088cc; }
.mry-social.wa:hover { background: #25d366; }

/* --- ستون های لینک و تماس --- */
.mry-footer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, .18);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.mry-footer-title i { color: var(--brand-yellow); font-size: 14px; }

.mry-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mry-footer-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  transition: color .2s ease, padding-inline-start .2s ease;
}
.mry-footer-links a i { font-size: 11px; color: var(--brand-yellow); }
.mry-footer-links a:hover { color: #fff; padding-inline-start: 6px; }

.mry-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mry-contact-list li { display: flex; align-items: flex-start; gap: 11px; }

.mry-contact-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .14);
  color: var(--brand-yellow);
  font-size: 14px;
}
.mry-contact-list small {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
}
.mry-contact-list a,
.mry-contact-list div > span {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  line-height: 1.8;
}
.mry-contact-list a:hover { color: var(--brand-yellow); }

/* --- نوار حق نشر روشن --- */
.mry-footer-bottom {
  background: var(--surface-page);
  color: var(--text-light);
}
.mry-footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 14px;
  font-size: 13px;
}
.mry-footer-credit { color: var(--text-light); text-decoration: none; }
.mry-footer-credit strong { color: var(--action-blue-dark); font-weight: 800; }
.mry-footer-credit:hover strong { color: var(--brand-blue); }


/* ==========================================================================
   ۱۹) اجزای کمکی — جداکننده بخش ها و دکمه شناور واتساپ
   ========================================================================== */

/* جداکننده هایی که views/home.php تولید می کند (بدون تصویر، فقط گرادیان) */
.igs-sep { width: 100%; line-height: 0; }
.igs-sep-fade {
  height: 46px;
  background: linear-gradient(to bottom, var(--sep-from, #fff), var(--sep-to, #fff));
}
.igs-sep-fade.is-mark { height: 26px; }
.igs-sep-curve { height: clamp(48px, 7vw, 90px); }
.igs-sep-curve svg { display: block; width: 100%; height: 100%; }
.igs-sep-line { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; }

.whatsapp-float {
  background: #25d366;
  box-shadow: 0 4px 16px rgba(37, 211, 102, .38);
}


/* ==========================================================================
   ۲۰) واکنش گرایی — ۱۰۲۴ / ۷۶۸ / ۴۸۰
   ========================================================================== */

@media (max-width: 1024px) {

  .mry-footer-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
  .igs-prod-grid   { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
  .article-grid    { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

  .topbar-items { gap: 18px; }
}

@media (max-width: 960px) {
  /* منوی کشویی از عرض ۹۶۰ فعال است؛ هدر دیگر آفست نوار بالا را نمی خواهد */
  .site-header { top: 0; }
  .topbar { position: static; }
}

@media (max-width: 768px) {

  /* نوار بالا: چرخش دوتایی آیتم ها (اسکریپت header.php متغیر --tb-page را می دهد) */
  .topbar { font-size: 12.5px; }
  .topbar-inner { min-height: 34px; }
  .topbar-items {
    gap: 0;
    width: 100%;
    transform: translateX(calc(var(--tb-page, 0) * 100%));
  }
  .topbar-item {
    flex: 0 0 50%;
    justify-content: center;
    padding-inline: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* شماره و سوییچ زبان روی موبایل در هدر و نوار پایین در دسترس اند */
  .topbar-actions { display: none; }

  .breadcrumb ol { padding-inline: 16px; }

  .footer-cta-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .footer-cta-text  { flex-direction: column; gap: 8px; }
  .footer-cta-btn   { justify-content: center; }

  .mry-footer-bottom-inner { flex-direction: column; text-align: center; }

  .price-value { font-size: 28px; }
  .price-unit  { margin-inline-start: 0; }

  .spec-row,
  .igs-pdp-spec-row { grid-template-columns: 1fr; gap: 2px; }

  .related-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 480px) {

  body { font-size: 15.5px; }
  h1, .page-h1 { font-size: 21px; }
  h2 { font-size: 18px; }
  .page-content, .page-content-intro, .section-content { font-size: 16px; }

  .igs-prod-grid  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .article-grid   { grid-template-columns: 1fr; }
  .related-list   { grid-template-columns: 1fr; }
  .mry-footer-grid { grid-template-columns: 1fr; gap: 26px; }

  .section-head { padding: 9px 14px; }
  .section-head .section-title, .section-head h2 { font-size: 17px; }

  .price-card { padding: 15px 16px; }
  .price-value { font-size: 26px; }

  .product-card-title, .igs-prod-title { font-size: 13.5px; min-height: 3.3em; }
  .igs-prod-cta, .product-card-cta { padding: 4px 9px; font-size: 11.5px; }

  .buy-btn, .download-btn { width: 100%; }
}


/* ==========================================================================
   ۲۱) چاپ
   ========================================================================== */

@media print {
  .topbar,
  .phonebar,
  .mobile-contact-bar,
  .whatsapp-float,
  .footer-cta,
  .igs-car-nav,
  .igs-art-btn { display: none; }

  .site-footer.mry-footer { background: none; color: #000; }
}


/* ==========================================================================
   ۲۲) چارچوب بخش های صفحه اول — .hs-section
   --------------------------------------------------------------------------
   صفحه اول از جدول home_sections ساخته می شود و هر بخش یک
   <section class="hs-section ..."> است. رنگ پس زمینه را مدیر به صورت inline
   می دهد، پس اینجا فقط ریتم عمودی و عنوان ها تعریف می شود.
   ========================================================================== */

.hs-section { padding: 46px 0; }

/* بخش هایی که خودشان تمام عرض اند نباید پدینگ عمودی بگیرند */
.hs-section.hs-slider { padding: 0; }
.hs-section.hs-html   { padding-block: 34px; }
/* عنوان اختیاری بالای اسلایدر نباید به لبه تصویر بچسبد */
.hs-section.hs-slider > .container { padding-block: 26px 16px; }

.hs-title {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.7;
  color: var(--brand-navy);
  text-align: center;
}

/* عنوان به همراه دکمه «همه» در یک ردیف */
.hs-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
/* خط تاکیدی آبی زیر عنوان، دقیقا روی خط پایین ردیف می نشیند
   (۱۲px پدینگ + ۲px حاشیه ردیف = ۱۴px جبران منفی) */
.hs-title-row .hs-title {
  margin: 0 0 -14px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--action-blue);
  text-align: start;
}

.hs-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--blue-light);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--action-blue-dark);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.hs-more-btn:hover { background: var(--action-blue); color: #fff; }

/* بلوکِ ساده نگه داشته می شود تا text-align که رندرکننده به صورت inline
   می دهد (راست/چپ/وسط) کار کند؛ دکمه ها خودشان inline-flex اند */
.hs-btns-wrap { display: block; }
.hs-btns-wrap .cta-btn { margin: 6px; }


/* ==========================================================================
   ۲۳) شبکه کارت ها — .hs-card-grid / .hs-card
   شبکه سه تایی دسته ها و چهارتایی «آخرین محصولات» سایت قدیم
   ========================================================================== */

.hs-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 20px;
}

.hs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: var(--t-card);
}
.hs-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
}

.hs-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-light);
}
.hs-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--t-img);
}
.hs-card:hover .hs-card-img img { transform: scale(var(--zoom)); }

.hs-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 15px 16px 16px;
}

.hs-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--brand-navy);
}
.hs-card:hover .hs-card-title { color: var(--action-blue-dark); }

.hs-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text-light);
}

.hs-card-date {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}


/* ==========================================================================
   ۲۴) فهرست خبری — .hs-news-list / .hs-news-item
   کارت مقاله سه تایی سایت قدیم با عنوان سرمه ای ضخیم
   ========================================================================== */

.hs-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.hs-news-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: var(--t-card);
}
.hs-news-item:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
}

.hs-news-item > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: var(--t-img);
}
.hs-news-item:hover > img { transform: scale(var(--zoom)); }

.hs-news-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 15px 16px 16px;
}

.hs-news-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.75;
  color: var(--brand-navy);
}
.hs-news-item:hover .hs-news-title { color: var(--action-blue-dark); }

.hs-news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text-light);
}


/* ==========================================================================
   ۲۵) فهرست ساده — .hs-simple-list
   ========================================================================== */

.hs-simple-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hs-simple-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.hs-simple-list li:last-child { border-bottom: none; }
.hs-simple-list li:hover { background: var(--bg-light); }

.hs-simple-list a {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-navy);
  text-decoration: none;
}
.hs-simple-list a::before {
  content: '\2190';
  margin-inline-end: 8px;
  color: var(--action-blue);
}
.hs-simple-list a:hover { color: var(--action-blue-dark); }


/* ==========================================================================
   ۲۶) بنرها — .hs-banner / .banner-grid / .banner-card
   شمار ستون ها و نسبت تصویر از متغیرهای inline خوانده می شود
   ========================================================================== */

.banner-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--gap, 16px);
}

.banner-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: var(--t-card);
}
.banner-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
}

.banner-card img {
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  object-fit: cover;
  transition: var(--t-img);
}
.banner-card:hover img { transform: scale(var(--zoom)); }

/* کپشن روی بنر با پرده تیره برای خوانایی */
.banner-card-body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 26px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
  color: #fff;
}
.banner-card-title { font-size: 16px; font-weight: 800; line-height: 1.7; color: #fff; }
.banner-card-sub   { font-size: 13px; color: rgba(255, 255, 255, .85); }


/* ==========================================================================
   ۲۷) اسلایدر — .hs-slider
   مکانیک اصلی با swiper-bundle.min.css است؛ اینجا فقط پوسته برند،
   لایه متن روی اسلاید و جای دکمه ها (راست‌چین) تنظیم می شود.
   ========================================================================== */

.hs-slider .swiper {
  /* متغیرهای رسمی سوایپر — به جای جنگیدن با قواعد آن */
  --swiper-theme-color: var(--action-blue);
  --swiper-navigation-color: #ffffff;
  --swiper-navigation-size: 26px;
  --swiper-pagination-color: var(--brand-yellow);
  --swiper-pagination-bullet-inactive-color: #ffffff;
  --swiper-pagination-bullet-inactive-opacity: .55;
  --swiper-pagination-bullet-size: 10px;

  /* ارتفاع از خودِ تصویر می‌آید — تصویر برش نمی‌خورد.
     مقدار ثابت قبلی و max-height عمداً حذف شدند. */
  height: auto;
}

.hs-slider .swiper-slide { position: relative; overflow: hidden; }

.hs-slider .swiper-img,
.hs-slider .swiper-slide picture {
  display: block;
  width: 100%;
  /* نه ارتفاع ۱۰۰٪ و نه object-fit: cover — هر دو باعث برش تصویر
     می‌شدند. تصویر با نسبت واقعی خودش نمایش داده می‌شود. */
  height: auto;
}

/* لایه متن — از ضلع آغازین (در راست‌چین: راست) شروع می شود */
.hs-slider .swiper-content {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  width: min(100%, var(--container));
  margin-inline: auto;
  padding: 0 clamp(20px, 6vw, 72px);
  text-align: start;
  /* پرده از ضلع آغازین تا متن روی هر تصویری خوانا بماند */
  background: linear-gradient(to left, rgba(0, 0, 0, .62), rgba(0, 0, 0, .15) 55%, transparent 78%);
}

.hs-slider .swiper-h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(21px, 3.4vw, 36px);
  font-weight: 800;
  line-height: 1.55;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.hs-slider .swiper-sub {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.95;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

.hs-slider .swiper-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* جای دکمه های ناوبری در راست‌چین: «قبلی» سمت راست، «بعدی» سمت چپ.
   هر دو ضلع صریح تعیین می شود تا قواعد فیزیکی سوایپر بازنویسی شوند. */
.hs-slider .swiper-button-prev {
  inset-inline-start: clamp(8px, 2vw, 22px);
  inset-inline-end: auto;
}
.hs-slider .swiper-button-next {
  inset-inline-end: clamp(8px, 2vw, 22px);
  inset-inline-start: auto;
}

.hs-slider .swiper-button-prev,
.hs-slider .swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  transition: background-color .2s ease;
}
.hs-slider .swiper-button-prev:hover,
.hs-slider .swiper-button-next:hover { background: var(--action-blue); }


/* ==========================================================================
   ۲۸) متن و تصویر — .ti-grid
   عرض ستون تصویر از متغیر inline یعنی --img-size می آید
   ========================================================================== */

.ti-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--img-size, 40%)) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

/* تصویر سمت چپ: ترتیب ستون ها و جای عناصر جابه جا می شود */
.ti-grid.ti-img-left { grid-template-columns: minmax(0, 1fr) minmax(0, var(--img-size, 40%)); }
.ti-grid.ti-img-left .ti-content { order: 1; }
.ti-grid.ti-img-left .ti-image   { order: 2; }

/* وقتی تصویری تعریف نشده، متن تمام عرض را می گیرد */
.ti-grid:not(:has(.ti-image)) { grid-template-columns: minmax(0, 1fr); }

.ti-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ti-image img { display: block; width: 100%; height: auto; }

.ti-content { min-width: 0; }
.ti-content > :first-child { margin-top: 0; }
.ti-content > :last-child  { margin-bottom: 0; }


/* ==========================================================================
   ۲۹) نوار جستجو، شبکه های اجتماعی و بلوک HTML
   ========================================================================== */

.hs-search-bar { background: var(--surface-page); }

.hs-search-form .search-input-wrapper {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.hs-search-form .search-input-wrapper:focus-within { border-color: var(--action-blue); }

.hs-search-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 20px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}
.hs-search-form input:focus { outline: none; }

.hs-search-form button {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  border: none;
  background: var(--action-blue);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.hs-search-form button:hover { background: var(--action-blue-dark); }
.hs-search-form button svg { width: 20px; height: 20px; fill: currentColor; }

.hs-social .social-section-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.hs-social-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--brand-blue);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: var(--t-card), background-color .2s ease;
}
.hs-social-item:hover { transform: translateY(-3px); color: #fff; }
.hs-social-item svg { flex-shrink: 0; width: 20px; height: 20px; fill: currentColor; }

/* حالت «فقط آیکن» — دایره ای */
.hs-social-icons .hs-social-item {
  width: 46px;
  height: 46px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.hs-social-instagram { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }
.hs-social-telegram  { background: #0088cc; }
.hs-social-whatsapp  { background: #25d366; }
.hs-social-linkedin  { background: #0a66c2; }
.hs-social-twitter   { background: #000; }
.hs-social-youtube   { background: #ff0000; }

.hs-html > :first-child { margin-top: 0; }


/* ==========================================================================
   ۳۰) دکمه های فراخوان — اصلاح برند روی پایه main.css
   --------------------------------------------------------------------------
   ‏.cta-btn و .cta-primary و .cta-secondary در main.css خط ۷۰۱ تا ۷۳۷ تعریف
   شده اند و رنگشان از ‎--accent‎ می آید که بازنویسی شده است. اینجا فقط سایه
   آبیِ هاردکدشده و حرکتِ بدون محافظ اصلاح می شود.
   ========================================================================== */

.cta-primary:hover {
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), .32);
  transform: translateY(calc(var(--lift) / 2.5));
}
.cta-secondary:hover { transform: translateY(calc(var(--lift) / 2.5)); }

/* روی اسلاید تیره، دکمه ثانویه باید سفید بماند */
.hs-slider .swiper-btns .cta-secondary {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}
.hs-slider .swiper-btns .cta-secondary:hover { background: #fff; color: var(--action-blue-dark); }


/* ==========================================================================
   ۳۱) صفحه محصول — .ba-pdp
   ========================================================================== */

.ba-pdp { margin-bottom: 34px; }

/* چیپ های دسته بندی — یک محصول می تواند زیر چند دسته باشد */
.ba-pdp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.ba-pdp-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 14px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ba-pdp-tag span { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.ba-pdp-tag:hover {
  background: var(--blue-light);
  border-color: var(--blue-border);
  color: var(--action-blue-dark);
}

/* دسته اصلی پررنگ تر از بقیه */
.ba-pdp-tag.is-primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.ba-pdp-tag.is-primary span { color: rgba(255, 255, 255, .75); }
.ba-pdp-tag.is-primary:hover {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  color: #fff;
}

.ba-pdp-h1 { margin: 0 0 22px; }

/* دو ستون: تصویر ۴۵٪ و اطلاعات ۵۵٪ — همان نسبت pr1/pr2 سایت قدیم */
.ba-pdp-cols {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 26px;
  align-items: start;
}

.ba-pdp-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--brand-navy);
  border-radius: var(--radius);
  overflow: hidden;
}
.ba-pdp-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: var(--t-img);
}

.ba-pdp-media.is-zoomable { cursor: zoom-in; }
.ba-pdp-media.is-zoomable:hover img { transform: scale(var(--zoom)); }
.ba-pdp-media.is-zoomable:focus-visible {
  outline: 3px solid var(--action-blue);
  outline-offset: 3px;
}

/* نشانه بزرگ نمایی تا معلوم شود تصویر باز می شود */
.ba-pdp-media.is-zoomable::after {
  content: '\002B';
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}

.ba-pdp-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: var(--text-muted);
}

.ba-pdp-info { display: flex; flex-direction: column; gap: 14px; }

/* دکمه های ستون اطلاعات تمام عرض اند */
.ba-pdp-info .buy-btn,
.ba-pdp-info .download-btn { width: 100%; flex-wrap: wrap; }

.ba-pdp-trust {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  background: var(--bg-light);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-light);
}
.ba-pdp-trust li { display: flex; align-items: center; gap: 8px; }
.ba-pdp-trust li::before {
  content: '\2713';
  flex-shrink: 0;
  font-weight: 800;
  color: var(--sale-green);
}

.ba-pdp-video {
  margin-top: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ba-pdp-video video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
}


/* ==========================================================================
   ۳۲) لایت باکس تصویر محصول — .ba-lightbox
   ========================================================================== */

.ba-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 48px);
  background: rgba(0, 0, 0, .85);
  opacity: 0;
  transition: opacity .18s ease;
}
.ba-lightbox.is-open { opacity: 1; }

.ba-lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}
.ba-lb-stage img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--radius);
  transform: scale(.96);
  transition: transform .18s ease;
}
.ba-lightbox.is-open .ba-lb-stage img { transform: scale(1); }

/* دکمه بستن — گوشه بالا سمت آغازین (در راست‌چین: بالا-راست) */
.ba-lb-close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
}
.ba-lb-close:hover { background: rgba(255, 255, 255, .34); }
.ba-lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


/* ==========================================================================
   ۳۳) تکمیل کارت قیمت — ساختار تازه مارک آپ
   ========================================================================== */

.price-card-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

/* حالت استعلامی — بدون عدد قیمت، پس گرادیان فیروزه ای جای خود را به یک
   سطح خنثی می دهد تا امضای رنگی فقط برای قیمت واقعی بماند */
.price-card.is-inquiry {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-inline-end: 5px solid var(--brand-blue);
  box-shadow: none;
  color: var(--text);
}
.price-card.is-inquiry .price-note {
  flex-basis: auto;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-navy);
}
.price-card.is-inquiry .price-unit {
  background: var(--brand-blue);
  color: #fff;
}


/* ==========================================================================
   ۳۴) قیمت داخل کارت محصول — .igs-prod-price
   ========================================================================== */

.igs-prod-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--price-red);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

.igs-prod-cur {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  direction: rtl;
  unicode-bidi: isolate;
}

/* کارت دارای قیمت، دکمه عملیاتش کهربایی می شود (خرید، نه استعلام) */
.igs-prod.has-price .igs-prod-cta {
  background: var(--amber);
  color: var(--brand-navy);
}
.igs-prod.has-price:hover .igs-prod-cta {
  background: var(--amber-dark);
  color: #fff;
}


/* ==========================================================================
   ۳۵) واکنش گرایی بخش های تازه — ۱۰۲۴ / ۷۶۸ / ۴۸۰
   ========================================================================== */

@media (max-width: 1024px) {

  /* شمار ستون از --cols به یک شبکه سیال سپرده می شود؛ داخل repeat()
     نمی توان از توابع ریاضی استفاده کرد، پس auto-fit جای آن را می گیرد */
  .hs-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .banner-grid  { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

  .ba-pdp-cols { gap: 20px; }
  .ti-grid, .ti-grid.ti-img-left { gap: 22px; }
}

@media (max-width: 768px) {

  .hs-section { padding: 34px 0; }
  .hs-title { margin-bottom: 18px; font-size: 19px; }
  .hs-title-row { gap: 8px; }

  .hs-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .banner-grid  { grid-template-columns: repeat(var(--cols-mob, 1), minmax(0, 1fr)); }
  .hs-news-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

  /* متن و تصویر: تک ستونی و تصویر همیشه اول */
  .ti-grid,
  .ti-grid.ti-img-left { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ti-grid.ti-img-left .ti-image   { order: 0; }
  .ti-grid.ti-img-left .ti-content { order: 0; }

  /* صفحه محصول تک ستونی */
  .ba-pdp-cols  { grid-template-columns: minmax(0, 1fr); }
  .ba-pdp-media { aspect-ratio: 4 / 3; }

  /* موبایل هم مثل دسکتاپ: ارتفاع خودکار، بدون برش */
  .hs-slider .swiper { height: auto; }
  .hs-slider .swiper-content {
    background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2));
  }
  .hs-slider .swiper-button-prev,
  .hs-slider .swiper-button-next { width: 36px; height: 36px; }
}

@media (max-width: 480px) {

  .hs-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hs-news-list { grid-template-columns: minmax(0, 1fr); }
  .banner-grid  { grid-template-columns: minmax(0, 1fr); }

  .hs-title { font-size: 17.5px; }
  .hs-card-title, .hs-news-title { font-size: 14.5px; }
  .hs-card-excerpt, .hs-news-excerpt {
    font-size: 12.5px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .ba-pdp-h1 { margin-bottom: 16px; }
  .ba-pdp-tag { padding: 4px 11px; font-size: 12px; }

  .hs-social-item { padding: 9px 13px; font-size: 13px; }
  .hs-btns-wrap .cta-btn { width: 100%; justify-content: center; }

  .ba-lb-close {
    inset-block-start: 10px;
    inset-inline-start: 10px;
    width: 38px;
    height: 38px;
  }
}


/* ==========================================================================
   ۳۶) کاهش حرکت برای اجزای تازه
   توکن های ‎--lift‎ و ‎--zoom‎ خودشان محافظت شده اند؛ این بلوک فقط گذارهایی
   را خنثی می کند که مستقیم در همین بخش ها تعریف شده اند.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ba-lightbox { transition: opacity .01ms linear; }
  .ba-lb-stage img,
  .ba-lightbox.is-open .ba-lb-stage img { transform: none; transition: none; }
  .hs-social-item:hover { transform: none; }
}

/* ==========================================================================
   ۳۷) تصاویر داخل محتوا
   بدنهٔ مطلب در دو ظرف رندر می‌شود: .page-content (متن اصلی صفحه) و
   .section-content (بخش‌های آمده از جدول dakheli2 سایت قدیم — که بیشترِ
   متن سایت همان است). main.css فقط برای اولی وسط‌چین دارد، پس تصویرِ
   بخش‌ها چپ‌چین می‌افتاد. سلکتور سوم عمداً هم‌وزنِ قاعدهٔ main.css است
   تا بر آن غلبه کند.
   ========================================================================== */

.page-content img,
.section-content img,
.section-text .section-content img {
  display: block;
  margin-inline: auto;
  margin-block: 26px;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-card, 10px);
  border: 1px solid var(--line, #e6e8ef);
  box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
  background: #fff;
}

/* تصویرِ داخل لینک نباید فاصلهٔ inline اضافه بگیرد */
.page-content a:has(> img),
.section-content a:has(> img) { display: block; }

/* تصاویر خیلی کوچک (آیکون، لوگو) کش نیایند و قاب نگیرند */
.page-content img[width]:not([width="0"]),
.section-content img[width]:not([width="0"]) { width: auto; }

.page-content figure,
.section-content figure {
  margin: 28px auto;
  text-align: center;
  max-width: 100%;
}
.page-content figure img,
.section-content figure img { margin-block: 0 8px; }

.page-content figcaption,
.section-content figcaption {
  font-size: 13px;
  color: var(--muted, #6b7280);
  line-height: 1.9;
}

/* جدول‌های محتوا روی موبایل باید خودشان اسکرول بخورند، نه کل صفحه */
.page-content table,
.section-content table { width: 100%; border-collapse: collapse; }

.page-content > table,
.section-content > table { display: block; overflow-x: auto; }

@media (max-width: 560px) {
  .page-content img,
  .section-content img,
  .section-text .section-content img { margin-block: 18px; }
}

/* ==========================================================================
   ۳۸) فهرست مطالب بدون شماره
   نشانگر عددی حذف شد؛ به جایش یک فلش کوچک راست‌چین می‌نشیند تا ردیف‌ها
   لخت نباشند. .toc-num دیگر در مارک‌آپ نیست و قاعده‌اش بی‌اثر مانده.
   ========================================================================== */

.toc-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-block-start: .62em;
  border-radius: 50%;
  background: var(--action-blue, #007bff);
  opacity: .55;
  display: block;
}
.toc-list li:hover::before { opacity: 1; }

/* ==========================================================================
   ۳۹) زیر دسته ها — .igs-subcats
   قبلاً کاملاً بدون استایل بود و به شکل فهرست گلوله‌ای با عددِ چسبیده به
   عنوان رندر می‌شد. حالا چیپ، و شمارنده داخل بج جدا.
   ========================================================================== */

.igs-subcats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block: 18px 26px;
  padding: 14px 16px;
  background: var(--bg-soft, #f6f8fc);
  border: 1px solid var(--line, #e6e8ef);
  border-radius: var(--r-card, 10px);
}

.igs-subcats-label {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #6b7280);
  padding-inline-end: 4px;
}

.igs-subcats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.igs-subcats li { margin: 0; }
.igs-subcats li::before { content: none; }

.igs-subcats a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--line, #e6e8ef);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-navy, #000066);
  text-decoration: none;
  transition: background var(--t-card, .3s ease), border-color var(--t-card, .3s ease),
              color var(--t-card, .3s ease), transform var(--t-card, .3s ease);
}
.igs-subcats a:hover,
.igs-subcats a:focus-visible {
  background: var(--action-blue, #007bff);
  border-color: var(--action-blue, #007bff);
  color: #fff;
  transform: translateY(var(--lift, -2px));
}
.igs-subcats a.is-parent {
  background: transparent;
  border-style: dashed;
  color: var(--muted, #6b7280);
}

/* شمارندهٔ تعداد محصول — بج جدا، نه عددِ چسبیده به عنوان */
.igs-subcats a > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding-inline: 6px;
  background: var(--bg-soft, #f0f3f9);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #6b7280);
  line-height: 1;
}
.igs-subcats a:hover > span,
.igs-subcats a:focus-visible > span {
  background: rgb(255 255 255 / 26%);
  color: #fff;
}

@media (max-width: 560px) {
  .igs-subcats { padding: 12px; gap: 8px; }
  .igs-subcats-label { flex-basis: 100%; }
  .igs-subcats a { font-size: 13px; padding: 6px 11px; }
}

/* ==========================================================================
   ۴۰) جدول‌های داخل محتوا
   جدول‌های مهاجرت‌شده هیچ کلاسی ندارند، پس مستقیم روی عنصر استایل می‌خورد.
   سرستون آبیِ برند، راه‌راه، و اسکرول افقی روی موبایل.
   ========================================================================== */

.page-content table,
.section-content table {
  width: 100%;
  min-width: 480px;
  border-collapse: separate;
  border-spacing: 0;
  margin-block: 22px;
  font-size: 14.5px;
  line-height: 1.9;
  background: #fff;
  border: 1px solid var(--line, #e6e8ef);
  border-radius: var(--r-card, 10px);
  overflow: hidden;
}

/* ظرفِ اسکرول تا روی موبایل کل صفحه افقی نلغزد */
.page-content .table-scroll,
.section-content .table-scroll {
  overflow-x: auto;
  margin-block: 22px;
  -webkit-overflow-scrolling: touch;
}
.page-content .table-scroll > table,
.section-content .table-scroll > table { margin-block: 0; }

.page-content th, .page-content td,
.section-content th, .section-content td {
  padding: 11px 14px;
  text-align: start;
  vertical-align: middle;
  border-block-end: 1px solid var(--line, #e6e8ef);
  border-inline-end: 1px solid var(--line, #e6e8ef);
}
.page-content th:last-child, .page-content td:last-child,
.section-content th:last-child, .section-content td:last-child { border-inline-end: none; }

.page-content thead th,
.section-content thead th,
.page-content tr:first-child th,
.section-content tr:first-child th {
  background: var(--action-blue, #007bff);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-inline-end-color: rgb(255 255 255 / 22%);
  border-block-end: none;
}

.page-content tbody tr:nth-child(even),
.section-content tbody tr:nth-child(even) { background: var(--bg-soft, #f7f9fc); }

.page-content tbody tr:hover,
.section-content tbody tr:hover { background: var(--tint-ice); }

.page-content tbody tr:last-child td,
.section-content tbody tr:last-child td { border-block-end: none; }

/* ستون اول معمولاً عنوان ردیف است */
.page-content tbody td:first-child,
.section-content tbody td:first-child { font-weight: 600; color: var(--brand-navy, #000066); }

/* اعداد و واحدها چپ‌چین و خوانا */
.page-content td[align="center"], .section-content td[align="center"] { text-align: center; }

@media (max-width: 560px) {
  .page-content table, .section-content table { font-size: 13.5px; }
  .page-content th, .page-content td,
  .section-content th, .section-content td { padding: 9px 10px; }
}


/* ==========================================================================
   ۴۱) موتور اسلایدر ریلی — .bc-carousel / .bc-track
   --------------------------------------------------------------------------
   یک مکانیزم مشترک برای همه اسلایدرهای کارتی سایت: ریل با اسکرول بومی و
   چفت‌شدن (scroll-snap) به جای انیمیشن جاوااسکریپتی. مزیتش لمس روان روی
   موبایل، پیمایش با صفحه‌کلید و نبودِ هزینه راه‌اندازی است.
   ظاهرِ کارت‌ها در بخش‌های بعدی جدا تعریف می‌شود؛ اینجا فقط ریل است.

   شمار کارت در هر نما با متغیر ‎--bc-per‎ کنترل می‌شود (اعشار هم مجاز است،
   مثلاً ۱٫۱۵ یعنی کارت بعدی کمی پیدا باشد تا کاربر بفهمد اسکرول دارد).
   ========================================================================== */

.bc-carousel {
  position: relative;
  --bc-per: 4;
  --bc-gap: 18px;
}

/* سرِ بلوک: عنوان در ابتدا، دکمه «همه» و کلیدهای جهت در انتها */
.bc-head-side {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.bc-nav { display: flex; gap: 8px; }
/* بدون این، display:flex بالا بر [hidden] مرورگر غلبه می‌کند */
.bc-nav[hidden] { display: none; }

.bc-track {
  display: flex;
  gap: var(--bc-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* اسکرول افقی نباید به حرکت «بازگشت» صفحه زنجیر شود */
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  /* overflow-x برشِ عمودی هم می‌آورد؛ این فاصله جا برای بالا آمدن کارت و
     سایه‌اش باز می‌کند و با حاشیه منفی، ریتم عمودی بخش دست نخورده می‌ماند */
  padding-block: 8px 18px;
  margin-block: -8px -12px;
  /* نوار اسکرول پنهان، ولی لمس و صفحه‌کلید سرِ جایشان */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bc-track::-webkit-scrollbar { width: 0; height: 0; }

.bc-track > * {
  flex: 0 0 calc((100% - (var(--bc-per) - 1) * var(--bc-gap)) / var(--bc-per));
  scroll-snap-align: start;
}

/* ریل خودش کانون می‌گیرد تا با کلیدهای جهت هم پیمایش شود */
.bc-track:focus-visible {
  outline: 2px solid var(--action-blue);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* --- کلیدهای جهت --- */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--action-blue-dark);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
/* در راست‌چین «قبلی» فلش راست است و «بعدی» فلش چپ */
.bc-btn::before { content: '\203A'; }
.bc-btn[data-dir="next"]::before { content: '\2039'; }
[dir="ltr"] .bc-btn::before { content: '\2039'; }
[dir="ltr"] .bc-btn[data-dir="next"]::before { content: '\203A'; }

.bc-btn:hover:not(:disabled) {
  background: var(--action-blue);
  border-color: var(--action-blue);
  color: #fff;
}
.bc-btn:disabled { opacity: .3; cursor: default; }
.bc-btn:focus-visible { outline: 2px solid var(--action-blue); outline-offset: 2px; }

/* --- نوار پیشرفت اسکرول (فقط اسلایدر محصولات) --- */
.bc-progress {
  display: block;
  block-size: 3px;
  margin-block-start: 16px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bc-progress[hidden] { display: none; }
.bc-progress > span {
  display: block;
  block-size: 100%;
  /* ‎--bc-p‎ را جاوااسکریپت روی خودِ نوار می‌گذارد */
  inline-size: max(20px, var(--bc-p, 0%));
  background: linear-gradient(to left, var(--price-from), var(--price-to));
  border-radius: var(--radius-pill);
}


/* ==========================================================================
   ۴۲) اسلایدر محصولات — .bc-carousel.is-prod
   --------------------------------------------------------------------------
   کارت‌ها همان .igs-prod صفحه‌های محصول‌اند تا زبان بصری سایت یکی بماند؛
   اینجا فقط عرض ریلی و چند تنظیم کوچک اضافه می‌شود.
   ========================================================================== */

.bc-carousel.is-prod { --bc-per: 4; --bc-gap: 18px; }

/* کارت محصول داخل ریل باید تمام ارتفاع ریل را بگیرد تا پایه‌ها هم‌تراز شوند */
.bc-track > .igs-prod { align-self: stretch; }


/* ==========================================================================
   ۴۳) اسلایدر مقالات — .bc-carousel.is-edit
   --------------------------------------------------------------------------
   عمداً شبیه کارت محصول نیست: کارت پهن ۱۶:۹، تصویر به‌جای پس‌زمینه، پرده
   سرمه‌ای روی آن و عنوان سفید روی تصویر. حرکتِ هاور هم فرق دارد — تصویر
   زوم نمی‌شود، بلکه کل کارت بالا می‌آید و پرده تیره‌تر و خطِ زرد بلندتر می‌شود.
   ========================================================================== */

.bc-carousel.is-edit { --bc-per: 3; --bc-gap: 22px; }

.bc-edit-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  min-block-size: 245px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-navy);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: var(--t-card);
}
.bc-edit-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
}
.bc-edit-card:focus-visible {
  outline: 3px solid var(--brand-yellow);
  outline-offset: 3px;
}
.bc-edit-card.no-img {
  background: linear-gradient(135deg, var(--brand-navy), var(--action-blue-deep));
}

.bc-edit-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* پرده گرادیانی — لایه دوم فقط با هاور باز می‌شود تا گذارِ رنگ روان باشد
   (گرادیان به گرادیان انیمیت نمی‌شود، ولی شفافیت می‌شود) */
.bc-edit-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgb(0 0 102 / 92%) 0%,
              rgb(0 0 102 / 70%) 28%,
              rgb(0 0 102 / 20%) 64%,
              rgb(0 0 102 / 0%)  100%);
}
.bc-edit-scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(to top,
              rgb(0 0 102 / 97%) 0%,
              rgb(0 0 102 / 86%) 34%,
              rgb(0 0 102 / 48%) 72%,
              rgb(0 0 102 / 14%) 100%);
  transition: opacity .3s ease;
}
.bc-edit-card:hover .bc-edit-scrim::after { opacity: 1; }

.bc-edit-body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px 18px;
}

/* خط تاکیدی زرد بالای عنوان — امضای برند، با هاور کشیده می‌شود */
.bc-edit-rule {
  display: block;
  inline-size: 34px;
  block-size: 3px;
  background: var(--brand-yellow);
  border-radius: var(--radius-pill);
  transition: inline-size .3s ease;
}
.bc-edit-card:hover .bc-edit-rule { inline-size: 88px; }

.bc-edit-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.7;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
}

.bc-edit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--price-label);
}
.bc-edit-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bc-edit-meta svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  opacity: .8;
}

.bc-edit-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.9;
  color: rgb(255 255 255 / 84%);
}

/* کلیدهای جهتِ بلوک مقالات سرمه‌ای‌اند تا با محصول اشتباه نشود */
.bc-nav.is-edit .bc-btn {
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}
.bc-nav.is-edit .bc-btn:hover:not(:disabled) {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--brand-yellow);
}


/* ==========================================================================
   ۴۴) اسلایدر مطالب مرتبط — .bc-carousel.is-rel
   --------------------------------------------------------------------------
   کارت‌ها همان .related-item صفحه‌های داخلی‌اند (لبه زرد + کپشن آبی برند)،
   پس این اسلایدر می‌تواند مستقیم جای شبکه .related-list بنشیند.
   ========================================================================== */

/* شمار کارت دسکتاپ را پارشال با ‎--bc-per-lg‎ به‌صورت inline می‌دهد؛ اگر
   مستقیم ‎--bc-per‎ را می‌داد، بر media queryهای زیر غلبه می‌کرد */
.bc-carousel.is-rel { --bc-per: var(--bc-per-lg, 4); --bc-gap: 16px; }

.bc-carousel.is-rel .related-header { margin-bottom: 16px; }
.bc-carousel.is-rel .related-header .bc-nav { margin-inline-start: auto; }

.bc-track > .related-item,
.bc-track > .related-card { align-self: stretch; }


/* ==========================================================================
   ۴۵) هویت رنگی بخش‌های صفحه اول — .hs-tint-*
   --------------------------------------------------------------------------
   پایه صفحه سفید می‌ماند؛ هر بخش یک «ته‌رنگ» بسیار روشن از پالت برند
   می‌گیرد تا مرزها خوانده شوند بدون آنکه صفحه رنگین‌کمان شود.
   همه ته‌رنگ‌ها با متن ‎#333‎ و سرمه‌ای برند بالای نسبت ۷:۱ کنتراست دارند
   (بیش از حداقل AA)، پس هیچ ترکیبی متن را کم‌خوان نمی‌کند.
   ========================================================================== */

:root {
  --tint-white: #ffffff;   /* پایه صفحه */
  --tint-ice:   #EDF5F6;   /* فیروزه‌ای بسیار روشن — خانواده --blue-light */
  --tint-cyan:  #E4F3F5;   /* فیروزه‌ای نرم — خانواده --price-from */
  --tint-mist:  #F2F5F7;   /* خنثای سرد */
  --tint-sand:  #F7F5F1;   /* خنثای گرم */
}

.hs-section {
  position: relative;
  background: var(--tint, var(--tint-white));
  /* رنگِ بخشِ بعدی؛ اگر قاعده :has زیر جواب ندهد، سفیدِ پایه می‌ماند و
     جداکننده باز هم درست به‌نظر می‌رسد */
  --tint-next: var(--tint-white);
}

.hs-tint-white { --tint: var(--tint-white); }
.hs-tint-ice   { --tint: var(--tint-ice); }
.hs-tint-cyan  { --tint: var(--tint-cyan); }
.hs-tint-mist  { --tint: var(--tint-mist); }
.hs-tint-sand  { --tint: var(--tint-sand); }

/* --------------------------------------------------------------------------
   قاعده جفت‌شدن جداکننده با بخش بعدی
   --------------------------------------------------------------------------
   جداکننده روی ::after بخشِ *بالایی* کشیده می‌شود ولی با رنگ بخشِ *پایینی*
   پر می‌شود، تا انگار بخش بعدی به بالا نفوذ کرده است. رنگ بخش بعدی هم به
   صورت خودکار از خواهرِ بلافصل خوانده می‌شود؛ بنابراین اگر مدیر ترتیب
   بخش‌ها را در پنل عوض کند، رنگ جداکننده‌ها خودشان اصلاح می‌شوند و لازم
   نیست کلاسی دست بخورد.
   شرط کار کردنش: بین دو <section class="hs-section"> عنصر دیگری نباشد؛
   به همین دلیل تگ <script> اسلایدرها داخل خودِ section گذاشته شده است.
   -------------------------------------------------------------------------- */

.hs-section:has(+ .hs-tint-white) { --tint-next: var(--tint-white); }
.hs-section:has(+ .hs-tint-ice)   { --tint-next: var(--tint-ice); }
.hs-section:has(+ .hs-tint-cyan)  { --tint-next: var(--tint-cyan); }
.hs-section:has(+ .hs-tint-mist)  { --tint-next: var(--tint-mist); }
.hs-section:has(+ .hs-tint-sand)  { --tint-next: var(--tint-sand); }

/* بازنویسی دستی، وقتی بخش بعدی .hs-section نیست (مثلاً فوتر رنگی) */
.hs-section.sep-to-white { --tint-next: var(--tint-white); }
.hs-section.sep-to-ice   { --tint-next: var(--tint-ice); }
.hs-section.sep-to-cyan  { --tint-next: var(--tint-cyan); }
.hs-section.sep-to-mist  { --tint-next: var(--tint-mist); }
.hs-section.sep-to-sand  { --tint-next: var(--tint-sand); }


/* ==========================================================================
   ۴۶) جداکننده‌های بخش — .sep-wave / .sep-angle / .sep-fade / .sep-rule
   --------------------------------------------------------------------------
   هر جداکننده یک لایه ::after در *داخلِ* پدینگ پایین بخش است، نه برشِ خودِ
   بخش. به همین دلیل برش مورب هرگز متن را نمی‌بُرد، حتی در عرض‌های خیلی کم:
   بلندی لایه از ‎clamp‎ می‌آید و همیشه کمتر از پدینگ ۳۴px موبایل است.
   ========================================================================== */

:root {
  /* موجِ ماسک — کوچک و بدون رنگ؛ رنگ از --tint-next می‌آید */
  --sep-wave-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 28c180 34 380-30 600-6s420 38 600 6V60H0Z' fill='%23000'/%3E%3C/svg%3E");
}

.sep-wave::after,
.sep-angle::after,
.sep-fade::after,
.sep-rule::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  pointer-events: none;
}

/* موج نرم — با ماسک SVG، پس رنگش متغیر است */
.sep-wave::after {
  block-size: clamp(26px, 4vw, 54px);
  background: var(--tint-next);
  -webkit-mask: var(--sep-wave-img) center bottom / 100% 100% no-repeat;
  mask: var(--sep-wave-img) center bottom / 100% 100% no-repeat;
}

/* برش مورب — مثلثی که در راست‌چین از سمت آغازین پایین می‌آید */
.sep-angle::after {
  block-size: clamp(22px, 3.2vw, 46px);
  background: var(--tint-next);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
[dir="rtl"] .sep-angle::after {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* محو تدریجی — نرم‌ترین گزینه، مناسب زیر تصویر اسلایدر */
.sep-fade::after {
  block-size: clamp(28px, 3.6vw, 48px);
  background: linear-gradient(to bottom, rgb(0 0 0 / 0%), var(--tint-next));
}

/* خط تاکیدی نازک — تنها جداکننده‌ای که به ته‌رنگ بخش بعد کاری ندارد،
   پس برای مرزِ دو بخشِ هم‌رنگ مناسب است */
.sep-rule::after {
  inset-inline: auto;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: min(420px, 62%);
  block-size: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to left,
              rgb(0 0 0 / 0%),
              var(--action-blue) 32%,
              var(--price-from) 68%,
              rgb(0 0 0 / 0%));
  opacity: .55;
}

/* اسلایدر پدینگ ندارد؛ جداکننده‌اش روی لبه تصویر می‌نشیند و همان هم مطلوب است */
.hs-section.hs-slider.sep-fade::after { block-size: clamp(34px, 5vw, 70px); }


/* ==========================================================================
   ۴۷) واکنش‌گرایی اسلایدرها — ۱۰۲۴ / ۷۶۸ / ۴۸۰
   ========================================================================== */

@media (max-width: 1024px) {
  .bc-carousel.is-prod { --bc-per: 3; --bc-gap: 14px; }
  .bc-carousel.is-edit { --bc-per: 2; --bc-gap: 18px; }
  .bc-carousel.is-rel  { --bc-per: 3; --bc-gap: 14px; }
}

@media (max-width: 768px) {
  .bc-carousel.is-prod { --bc-per: 2; --bc-gap: 14px; }
  .bc-carousel.is-edit { --bc-per: 2; --bc-gap: 14px; }
  .bc-carousel.is-rel  { --bc-per: 2; --bc-gap: 14px; }

  .bc-edit-card  { min-block-size: 225px; }
  .bc-edit-title { font-size: 15.5px; }
  .bc-edit-body  { padding: 14px 15px 16px; }
}

@media (max-width: 480px) {
  /* یک کارت و کمی از کارت بعدی، تا معلوم باشد ریل ادامه دارد */
  .bc-carousel.is-prod { --bc-per: 1.15; --bc-gap: 12px; }
  .bc-carousel.is-edit { --bc-per: 1.1;  --bc-gap: 12px; }
  .bc-carousel.is-rel  { --bc-per: 1.15; --bc-gap: 12px; }

  .bc-btn { width: 32px; height: 32px; font-size: 19px; }
  .bc-head-side { gap: 8px; }

  .bc-edit-card    { min-block-size: 205px; }
  .bc-edit-title   { font-size: 15px; }
  .bc-edit-excerpt { display: none; }
  .bc-progress     { margin-block-start: 12px; }
}


/* ==========================================================================
   ۴۸) کاهش حرکت برای اسلایدرها
   حرکت خودکار در جاوااسکریپت خاموش می‌شود؛ اینجا فقط گذارهای این بخش‌ها
   خنثی می‌شوند (توکن‌های --lift و --zoom خودشان محافظت شده‌اند).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bc-track { scroll-behavior: auto; }
  .bc-edit-scrim::after,
  .bc-edit-rule { transition: none; }
  .bc-edit-card:hover .bc-edit-rule { inline-size: 34px; }
  .bc-btn { transition: none; }
}

/* ==========================================================================
   ۴۹) بنر لینک داخلی — .link-banner
   ادیتور فقط <div class="link-banner" data-page="N"></div> می‌گذارد و
   عنوان/تصویر/خلاصه سمت سرور از دیتابیس خوانده می‌شود
   (render_link_banners در core/helpers.php)، پس بنر هیچ‌وقت کهنه نمی‌شود.
   ========================================================================== */

.link-banner { margin-block: 26px; }

.link-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--tint-ice, #eef4ff), #fff 62%);
  border: 1px solid var(--line, #e6e8ef);
  border-inline-start: 5px solid var(--brand-yellow, #FFCC00);
  border-radius: var(--r-card, 10px);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-card, .3s ease),
              box-shadow var(--t-card, .3s ease),
              border-color var(--t-card, .3s ease);
}
.link-banner-inner:hover,
.link-banner-inner:focus-visible {
  transform: translateY(var(--lift, -4px));
  box-shadow: 0 10px 26px rgb(0 0 0 / 12%);
  border-inline-start-color: var(--action-blue, #007bff);
}

.link-banner-img {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-soft, #f6f8fc);
}
.link-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  margin: 0; border: 0; box-shadow: none; border-radius: 0; }

.link-banner-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.link-banner-kicker {
  font-size: 12px;
  font-weight: 700;
  color: var(--action-blue, #007bff);
}
.link-banner-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.7;
  color: var(--brand-navy, #000066);
}
.link-banner-desc {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--muted, #6b7280);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-banner-cta {
  flex: 0 0 auto;
  margin-inline-start: auto;
  padding: 8px 15px;
  background: var(--action-blue, #007bff);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .link-banner-inner { flex-wrap: wrap; gap: 11px; padding: 12px; }
  .link-banner-img { width: 56px; height: 56px; }
  .link-banner-cta { margin-inline-start: 0; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .link-banner-inner { transition: none; }
  .link-banner-inner:hover, .link-banner-inner:focus-visible { transform: none; }
}


/* ==========================================================================
   ۵۰) بازطراحی کارت «مطالب مرتبط» — .related-item
   --------------------------------------------------------------------------
   نسخهٔ قبلی یک بندانگشتیِ کوچک بود به‌علاوهٔ بلوکِ توپرِ آبی که تمام کارت را
   می‌گرفت؛ ردیفِ کارت‌ها شبیه ردیفِ دکمه می‌شد و عنوان‌ها داخل همان بلوک
   جا نمی‌شدند. اینجا کارت به یک «کارت محتوا» تبدیل می‌شود:
     • قابِ تصویر با نسبت ثابت ۱۶:۱۰ و object-fit: cover
     • قابِ جانشین با همان نسبت، پس کارتِ بی‌تصویر کوتاه‌تر نمی‌شود
     • عنوان سرمه‌ای روی زمینهٔ سفید، دو خطِ رزروشده (چه یک‌خطی چه دوخطی)
     • خلاصهٔ دو خطی، اگر ردیف excerpt داشته باشد
     • ردیفِ «ادامه مطلب» چسبیده به کف کارت
   لبهٔ زردِ برند می‌ماند ولی پرِ آبی می‌رود. ارتفاعِ برابرِ همهٔ کارت‌های یک
   ردیف از سه چیز می‌آید: کشیده‌شدن آیتم‌ها (بخش ۴۴)، نسبتِ ثابت قاب، و
   min-block-size روی عنوان.

   تمایز از دو کارت دیگرِ همان صفحه:
     .igs-prod  تصویرِ مربع، بدون لبهٔ زرد، پایه‌اش قیمت/دکمه است
     .is-edit   تصویرِ تمام‌کارت با پردهٔ تیره و عنوانِ سفید روی آن
   ========================================================================== */

:root {
  /* در فایل چند جا var(--r-card, 10px) صدا زده شده ولی خودِ توکن تعریف
     نشده بود؛ تعریفش مقدارِ جاافتاده را عوض نمی‌کند، فقط یک‌جا می‌کند */
  --r-card: var(--radius-lg);
}

.related-item {
  background: #fff;
  border: 1px solid var(--border);
  /* لبهٔ تاکیدی برند روی ضلع آغازین — در راست‌چین سمت راست */
  border-inline-start: 5px solid var(--brand-yellow);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  block-size: 100%;
  transition: var(--t-card), border-color .25s ease;
}
.related-item:hover,
.related-item:focus-visible {
  /* توکن --lift زیر prefers-reduced-motion خودش صفر می‌شود (بخش ۲) */
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-lg);
  border-inline-start-color: var(--action-blue);
}
.related-item:focus-visible {
  outline: 2px solid var(--action-blue);
  outline-offset: 3px;
}

/* --- قابِ تصویر --- */
.related-item-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--tint-mist);
}
.related-item-media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: var(--t-img);
}
.related-item:hover .related-item-media img { transform: scale(var(--zoom)); }

/* قابِ جانشین — بسیاری از صفحه‌ها تصویر ندارند */
/* قابِ خالی باید خنثی باشد نه رنگی: ته‌رنگ آبیِ قبلی باعث می‌شد کارتِ
   بی‌تصویر در ردیف چشمگیرتر از بقیه دیده شود و ردیف نامنظم به نظر برسد. */
.related-item-media.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f4f6fa, #fbfcfe 70%);
}
.related-item-media.is-empty svg {
  inline-size: 34px;
  block-size: 34px;
  fill: var(--gray-400, #8b93b0);
  opacity: .5;
}
/* نوارِ نازکِ زرد کفِ قابِ خالی، تا کارتِ بی‌تصویر هم امضای برند را داشته باشد */
.related-item-media.is-empty::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: var(--brand-yellow);
  opacity: .5;
}

/* --- بدنهٔ سفید (به‌جای بلوکِ آبی نسخهٔ قبل) --- */
.related-item-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7px;
  flex: 1;
  padding: 13px 15px 14px;
  background: #fff;
}

.related-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  /* دو خطِ رزروشده: عنوانِ یک‌خطی هم همان ارتفاع را می‌گیرد، پس
     ردیفِ کارت‌ها با هر ترکیبی از عنوان‌ها هم‌تراز می‌ماند */
  min-block-size: calc(2 * 1.8em);
  color: var(--brand-navy);
  transition: color .2s ease;
}
.related-item:hover .related-item-title,
.related-item:focus-visible .related-item-title { color: var(--action-blue-dark); }

.related-item-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.95;
  color: var(--text-muted);
}

/* ردیفِ پایانی به کفِ کارت چسبانده می‌شود تا نبودِ خلاصه ترازِ ردیف را نشکند */
.related-item-more {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: auto;
  padding-block-start: 10px;
  border-block-start: 1px dashed var(--border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--action-blue-dark);
}
.related-item-arrow {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  color: inherit;
  transition: transform .25s ease;
}
.related-item:hover .related-item-arrow,
.related-item:focus-visible .related-item-arrow { transform: translateX(-4px); }

@media (max-width: 480px) {
  .related-item-title   { font-size: 14.5px; }
  .related-item-excerpt { display: none; }
  .related-item-body    { padding: 12px 13px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .related-item,
  .related-item-title,
  .related-item-arrow,
  .related-item-media img { transition: none; }
  .related-item:hover .related-item-arrow,
  .related-item:focus-visible .related-item-arrow { transform: none; }
}


/* ==========================================================================
   ۵۱) بازطراحی فوتر — .mry-footer
   --------------------------------------------------------------------------
   سه ایراد نسخهٔ قبل: گرادیانِ بنفشِ بیرون از هویتِ برند، نشان‌های اعتماد و
   آیکنِ تنهای واتساپ که وسط ستونِ برند شناور بودند، و بلوکِ نشانی که یک
   رشتهٔ ضخیمِ هفت‌خطی بود و کلِ فوتر را می‌بلعید.

   ساختار تازه:
     نوارِ اعتماد (تمام عرض)  →  چهار ستون  →  نوار حق نشر
     ستون‌ها: هویت + شبکه‌های اجتماعی | دسترسی سریع | تماس | نشانی‌ها
   نشانی ستونِ خودش را دارد، پس متنِ بلند در یک عرضِ باریکِ خوانا می‌شکند
   و به بقیهٔ فوتر تنه نمی‌زند. تفکیکِ «انبار» و «دفتر» در PHP انجام می‌شود
   (views/partials/footer.php) چون داده در یک ستون به هم چسبیده است.
   ========================================================================== */

:root {
  /* گرادیانِ فوتر به خانوادهٔ سرمه‌ای/آبیِ برند برمی‌گردد؛ فقط همین دو توکن
     بازتعریف می‌شوند و قاعدهٔ بخش ۱۸ دست‌نخورده باقی می‌ماند */
  --footer-from: var(--brand-navy);
  --footer-to:   var(--brand-blue-dark);
}

.site-footer.mry-footer {
  position: relative;
  overflow: hidden;
  padding-block-start: 0;           /* پدینگِ بالا به نوارِ اعتماد رسید */
  border-block-start: 3px solid var(--brand-yellow);
}

/* هالهٔ نرمِ سفید — عمق می‌دهد بدون آنکه رنگ تازه‌ای به پالت اضافه کند */
.site-footer.mry-footer::before {
  content: '';
  position: absolute;
  inset-block-start: -34%;
  inset-inline-end: -8%;
  inline-size: min(540px, 68%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 8%), rgb(255 255 255 / 0%) 70%);
  pointer-events: none;
}
.site-footer.mry-footer > * { position: relative; }

/* --- نوارِ اعتماد: ریبونِ تمام‌عرضِ بالای فوتر --- */
.mry-trust-strip {
  background: rgb(0 0 0 / 16%);
  border-block-end: 1px solid rgb(255 255 255 / 10%);
}
.mry-trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 30px;
  padding-block: 14px;
}
/* داخلِ ریبون، نشان‌ها قرص نیستند — سطر ویژگی‌اند */
.mry-trust-strip .mry-badge {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 600;
}
.mry-trust-strip .mry-badge i { font-size: 15px; }

/* --- چهار ستون --- */
.mry-footer-grid {
  grid-template-columns:
    minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.35fr);
  gap: 30px 34px;
  padding-block: 40px 36px;
}

.mry-footer-desc {
  max-inline-size: 38ch;
  text-wrap: pretty;
}

/* شبکه‌های اجتماعی برچسب و جداکنندهٔ خودشان را گرفتند */
.mry-follow {
  margin-block-start: 20px;
  padding-block-start: 16px;
  border-block-start: 1px solid rgb(255 255 255 / 14%);
}
.mry-follow-label {
  display: block;
  margin-block-end: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgb(255 255 255 / 62%);
}
.mry-socials { margin-top: 0; }

/* --- سرتیترِ ستون: خطِ زردِ کوتاه به‌جای خطِ کم‌رنگِ تمام‌عرض --- */
.mry-footer-title {
  position: relative;
  margin-block-end: 18px;
  padding-block-end: 12px;
  border-block-end: 1px solid rgb(255 255 255 / 14%);
}
.mry-footer-title::after {
  content: '';
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 42px;
  block-size: 2px;
  background: var(--brand-yellow);
  border-radius: var(--radius-pill);
}

/* --- پیوندهای سریع: هدفِ لمسِ درست‌اندازه --- */
.mry-footer-links { gap: 1px; }
.mry-footer-links a {
  min-block-size: 40px;
  padding-block: 8px;
  border-radius: var(--radius-sm);
}
.mry-footer-links a:hover,
.mry-footer-links a:focus-visible {
  color: #fff;
  background: rgb(255 255 255 / 8%);
  padding-inline-start: 8px;
}

/* --- ستونِ تماس --- */
.mry-contact-list { gap: 4px; }
.mry-contact-list li {
  align-items: center;
  gap: 11px;
  min-block-size: 46px;
  padding-block: 4px;
}
.mry-contact-body { display: block; min-inline-size: 0; }
.mry-contact-body a {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  line-height: 1.7;
  letter-spacing: .3px;
  word-break: break-word;
}
.mry-contact-body a:hover,
.mry-contact-body a:focus-visible { color: var(--brand-yellow); }

/* --- ستونِ نشانی: هر نشانی یک کارتِ جدا --- */
.mry-addr-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mry-addr-list li {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 11px 13px;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-inline-start: 3px solid var(--brand-yellow);
  border-radius: var(--r-card);
}
.mry-addr-list li::before { content: none; }

.mry-addr-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand-yellow);
}
.mry-addr-text {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.95;
  color: rgb(255 255 255 / 86%);
  text-wrap: pretty;
}

/* --- نوارِ حق نشر --- */
.mry-footer-bottom-inner { padding-block: 16px; }

/* --- چیدمانِ موبایل --- */
@media (max-width: 1024px) {
  .mry-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 30px;
  }
  /* ستونِ هویت تمام عرضِ ردیفِ اول را می‌گیرد */
  .mry-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .site-footer.mry-footer { padding-block-start: 0; }
  .mry-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding-block: 30px 0;
  }
  .mry-trust-inner { gap: 8px 20px; padding-block: 12px; }
  .mry-trust-strip .mry-badge { font-size: 12.5px; }
  .mry-footer-desc { max-inline-size: none; }
  .mry-footer-bottom-inner { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mry-social,
  .mry-footer-links a { transition: none; }
  .mry-social:hover { transform: none; }
}


/* ==========================================================================
   ۵۲) ریتم عمودی — مقیاسِ فاصلهٔ بلوک‌ها
   --------------------------------------------------------------------------
   مشکل: هر بلوک حاشیهٔ شخصیِ خودش را داشت (‎.page-section‎ ۳۲px از main.css،
   ‎.toc-box‎ ۲۶px، ‎.igs-subcats‎ ۱۸/۲۶px، ‎.children-section‎ ۴۴px) و
   ‎.igs-products‎ اصلاً حاشیه نداشت. نتیجه‌اش این بود که در صفحهٔ دسته،
   کفِ شبکهٔ محصولات تقریباً به متنِ زیرش می‌چسبید در حالی که مرزهای دیگر
   فاصلهٔ سخاوتمندانه داشتند.

   راه‌حل: سه پله فاصله، و یک قاعدهٔ «جغد» که تنها مرجعِ فاصله بین بلوک‌های
   هم‌سطحِ <article> باشد. بلوک‌ها حاشیهٔ شخصی‌شان را پس می‌دهند تا دو حاشیه
   روی هم جمع (یا در هم فرو) نریزند؛ اولین و آخرین فرزند هم چیزی به لبهٔ
   بیرونیِ مقاله اضافه نمی‌کنند و پدینگِ خودِ <article> تنها مرجعِ لبه می‌ماند.

   نکتهٔ ترتیب: قاعدهٔ صفرکردن با ‎:where()‎ نوشته شده که وزنِ صفر دارد، پس
   دقیقاً هم‌وزنِ جغدِ بعدی می‌ماند و «ترتیبِ نوشتن» تصمیم می‌گیرد نه
   ویژگی‌مندی — به همین دلیل ترتیبِ چهار گامِ زیر را جابه‌جا نکنید.
   ========================================================================== */

:root {
  --gap-tight:   14px;                      /* جفتِ به‌هم‌وابسته (شبکه و صفحه‌بندی‌اش) */
  --gap-block:   clamp(26px, 3.2vw, 34px);  /* مرزِ معمولِ دو بلوک */
  --gap-section: clamp(40px, 4.6vw, 56px);  /* جایی که موضوعِ صفحه عوض می‌شود */
}

/* گام ۰ — پیش‌فرضِ بیرون از <article> (مثلاً بخش‌های صفحهٔ اول).
   ‎.igs-products‎ تنها بلوکی بود که هیچ حاشیه‌ای نداشت. */
.igs-products { margin-block: var(--gap-block); }

/* شبکه‌ها خودشان حاشیه نمی‌گیرند؛ ظرفشان فاصله را تأمین می‌کند */
.igs-prod-grid,
.hs-card-grid { margin-block: 0; }

/* حاشیهٔ منفیِ ریلِ اسلایدر (بخش ۴۱: ‎margin-block: -8px -12px‎) برای جا باز
   کردنِ سایهٔ هاور است و باید سرِ جایش بماند؛ ولی چون ظرفِ کروسل پدینگ یا
   حاشیهٔ پایین ندارد، همان ۱۲px منفی از ظرف بیرون می‌زد و از فاصلهٔ بلوکِ
   بعدی کم می‌کرد. flow-root حاشیه را داخل ظرف نگه می‌دارد و ارتفاعِ ظرف را
   — که هدفِ اصلیِ آن حاشیهٔ منفی بود — همچنان درست حساب می‌کند. */
.bc-carousel { display: flow-root; }

/* گام ۱ — بلوک‌های تکرارشونده حاشیهٔ شخصیِ خود را پس می‌دهند */
.page-article > :where(
  .igs-products,
  .igs-prod-grid,
  .hs-card-grid,
  .page-content,
  .page-content-intro,
  .section-text,
  .toc-box,
  .igs-subcats,
  .related-pages,
  .bc-carousel,
  .children-section,
  .page-section
) { margin-block: 0; }

/* گام ۲ — جغد: هر بلوک نسبت به بلوکِ قبلی فاصله می‌گیرد */
.page-article > * + * { margin-block-start: var(--gap-block); }

/* گام ۳ — مرزهای بزرگ‌ترِ «بخش» */
.page-article > .children-section,
.page-article > .related-pages,
.page-article > .comments-section,
.page-article > .igs-products.is-carousel { margin-block-start: var(--gap-section); }

/* بلوکِ «مطالب مرتبط» جداکنندهٔ خط‌دار دارد (main.css)؛ پدینگِ ۴۰px آن روی
   فاصلهٔ تازه زیادی می‌شد، پس با همان مقیاس هماهنگ می‌شود */
.page-article > .related-pages {
  padding-block-start: var(--gap-block);
  border-block-start: 1px solid var(--border);
}

/* گام ۴ — جفت‌های به‌هم‌وابسته: صفحه‌بندی جزوِ شبکهٔ بالای خودش است */
.page-article > .igs-products + .igs-pager { margin-block-start: var(--gap-tight); }

/* حاشیهٔ اولین/آخرین فرزندِ بلوک‌های متنی بیرون نمی‌زند تا با فاصلهٔ جغد
   جمع یا در آن فرو نریزد (پاراگرافِ آخرِ ‎.page-content‎ ۱۲px داشت) */
.page-article > .page-content > :first-child,
.page-article > .page-section > :first-child,
.section-text .section-content > :first-child { margin-block-start: 0; }

.page-article > .page-content > :last-child,
.page-article > .page-section > :last-child,
.section-text .section-content > :last-child { margin-block-end: 0; }

/* ==========================================================================
   ۵۳) اصلاح جهت فلش کروسل‌ها
   ------------------------------------------------------------------------
   نویسه‌های ‹ (U+2039) و › (U+203A) در یونیکد Bidi_Mirrored هستند، یعنی در
   متن راست‌چین *برعکس* رندر می‌شوند. قاعده‌های قبلی گلیف درست را انتخاب
   کرده بودند ولی مرورگر در RTL آینه‌شان می‌کرد، پس «قبلی» رو به چپ و
   «بعدی» رو به راست دیده می‌شد — یعنی هر دو برعکس.
   اینجا فلش با بردر کشیده می‌شود: نه به یونیکد وابسته است نه به فونت،
   و آینه هم نمی‌شود. بردرها عمداً فیزیکی‌اند (border-right نه
   border-inline-end) چون منطقی‌ها خودشان در راست‌چین جابه‌جا می‌شوند.
   ========================================================================== */

.bc-btn::before,
.igs-car-btn::before,
.igs-art-btn::before {
  content: '';
  display: block;
  inline-size: 9px;
  block-size: 9px;
  border: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
  font-size: 0;
  /* راست‌چین: «قبلی» رو به راست است (به سمت ابتدای فهرست) */
  transform: translateX(-2px) rotate(45deg);
}

.bc-btn[data-dir="next"]::before,
.igs-car-btn[data-dir="next"]::before,
.igs-art-btn[data-dir="next"]::before {
  /* راست‌چین: «بعدی» رو به چپ است */
  transform: translateX(2px) rotate(-135deg);
}

/* در چپ‌چین دقیقاً برعکس */
[dir="ltr"] .bc-btn::before,
[dir="ltr"] .igs-car-btn::before,
[dir="ltr"] .igs-art-btn::before {
  transform: translateX(2px) rotate(-135deg);
}
[dir="ltr"] .bc-btn[data-dir="next"]::before,
[dir="ltr"] .igs-car-btn[data-dir="next"]::before,
[dir="ltr"] .igs-art-btn[data-dir="next"]::before {
  transform: translateX(-2px) rotate(45deg);
}

/* جداکنندهٔ breadcrumb هم همان نویسهٔ آینه‌ای را داشت. جهتش با
   direction: ltr قفل می‌شود تا همان «رو به چپ»ِ موردنظر بماند. */
.breadcrumb li + li::before {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   ۵۴) لوگو — اندازه، جمع‌شدن هنگام اسکرول، و قاب لوگوی فوتر
   ========================================================================== */

/* --- ۱) لوگوی هدر ۲۰٪ بزرگ‌تر: ۴۴ -> ۵۳ پیکسل ---------------------------
   ارتفاع hdr-inner هم کمی باز می‌شود وگرنه لوگوی بزرگ‌تر به لبه می‌چسبد. */
.site-logo img { height: 53px; }
.hdr-inner     { height: 72px; }

/* --- ۲) جمع شدن هنگام اسکرول --------------------------------------------
   کلاس is-compact را اسکریپت header.php از قبل روی #siteHeader می‌گذاشت
   (بالای ۱۵۰ پیکسل اضافه، زیر ۸۰ برداشته می‌شود) ولی هیچ قاعده‌ای برایش
   نوشته نشده بود، پس عملاً بی‌اثر بود. اینجا فعال می‌شود:
   لوگو ۳۰٪ کوچک‌تر (۵۳ -> ۳۷) و ارتفاع هدر هم جمع می‌شود تا واقعاً
   جای کمتری بگیرد. */
.site-header {
  transition: box-shadow .25s ease, background-color .25s ease;
}
.site-logo img {
  transition: height .25s ease;
  transform-origin: center;
}
.hdr-inner {
  transition: height .25s ease;
}

.site-header.is-compact .site-logo img { height: 37px; }
.site-header.is-compact .hdr-inner     { height: 56px; }
.site-header.is-compact                { box-shadow: 0 2px 14px rgb(0 0 0 / 10%); }

/* متن لوگو (وقتی تصویر لوگو تنظیم نشده) هم باید همراهش جمع شود */
.logo-text { transition: font-size .25s ease; }
.site-header.is-compact .logo-text { font-size: 17px; }

@media (max-width: 768px) {
  .site-logo img                         { height: 46px; }
  .hdr-inner                             { height: 64px; }
  .site-header.is-compact .site-logo img { height: 34px; }
  .site-header.is-compact .hdr-inner     { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-logo img, .hdr-inner, .logo-text, .site-header { transition: none; }
}

/* --- ۳) قاب لوگوی فوتر ---------------------------------------------------
   لوگو روی پس‌زمینهٔ سرمه‌ای فوتر شناور و بی‌قاب بود. حالا داخل یک کارت
   روشن می‌نشیند تا هم خوانا باشد هم به لوگوهای تیره/رنگی زمینهٔ درست بدهد. */
.mry-footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 20px;
  background: rgb(255 255 255 / 96%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--r-card, 10px);
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
  text-decoration: none;
  transition: transform var(--t-card, .3s ease), box-shadow var(--t-card, .3s ease);
}
.mry-footer-logo:hover,
.mry-footer-logo:focus-visible {
  transform: translateY(var(--lift, -3px));
  box-shadow: 0 12px 28px rgb(0 0 0 / 26%);
}
/* نوار زرد برند روی لبهٔ آغازین قاب */
.mry-footer-logo {
  border-inline-start: 4px solid var(--brand-yellow, #FFCC00);
}
.mry-footer-logo img { height: 56px; width: auto; display: block; }

/* حالت بدون تصویر: آیکون و متن باید روی زمینهٔ روشن خوانده شوند */
.mry-footer-logo .mry-logo-icon { color: var(--brand-blue, #3366CC); }
.mry-footer-logo .mry-logo-text { color: var(--brand-navy, #000066); }

@media (max-width: 620px) {
  .mry-footer-logo     { padding: 12px 16px; }
  .mry-footer-logo img { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .mry-footer-logo { transition: none; }
  .mry-footer-logo:hover, .mry-footer-logo:focus-visible { transform: none; }
}

/* ==========================================================================
   ۵۵) دکمه خرید — برچسب کوتاه، شماره در سطر جدا
   قبلاً عنوان کاملِ محصول و شماره داخل متن دکمه بودند و روی نام‌های بلند
   دکمه به یک پاراگراف دو خطی تبدیل می‌شد.
   ========================================================================== */

.buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  inline-size: 100%;
  padding: 12px 18px;
  text-align: start;
  line-height: 1.5;
}

.buy-btn-ico {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
}

.buy-btn-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-inline-size: 0;
}

.buy-btn-label {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

/* شماره ثانویه است: کوچک‌تر و کم‌رنگ‌تر، ولی هنوز خوانا */
.buy-btn-tel {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .85;
}

@media (max-width: 420px) {
  .buy-btn       { gap: 8px; padding: 11px 14px; }
  .buy-btn-label { font-size: 14px; }
  .buy-btn-tel   { font-size: 12.5px; }
}

/* ==========================================================================
   ۵۶) لایه متن اسلایدر — پررنگ‌تر و روی هویت برند
   پردهٔ مشکیِ خنثی با گرادیان سرمه‌ای برند عوض شد، یک نوار زرد کنار تیتر
   نشست و متن‌ها هنگام فعال شدن اسلاید به‌آرامی بالا می‌آیند.
   ========================================================================== */

.hs-slider .swiper-content {
  /* سرمه‌ای برند به‌جای مشکی: هم خواناتر است هم با فوتر و هدر یک خانواده.
     در راست‌چین «to left» یعنی تیرگی از سمت متن شروع می‌شود. */
  background:
    linear-gradient(to left,
      rgb(0 0 102 / 88%) 0%,
      rgb(0 0 102 / 62%) 34%,
      rgb(0 0 102 / 18%) 64%,
      rgb(0 0 102 / 0%) 84%),
    linear-gradient(to top, rgb(0 0 40 / 34%), transparent 42%);
  gap: 16px;
}

/* نوار زرد برند کنار تیتر — لنگر بصری که چشم را اول همان‌جا می‌برد */
.hs-slider .swiper-h2 {
  position: relative;
  max-width: 17ch;
  font-size: clamp(23px, 3.9vw, 42px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -.01em;
  padding-inline-start: 18px;
  text-shadow: 0 2px 16px rgb(0 0 40 / 55%);
}
.hs-slider .swiper-h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 6px 6px;
  inline-size: 5px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--brand-yellow), #ffa41b);
}

.hs-slider .swiper-sub {
  max-width: 40ch;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 2;
  color: rgb(255 255 255 / 94%);
  padding-inline-start: 18px;
  text-shadow: 0 1px 10px rgb(0 0 40 / 50%);
}

.hs-slider .swiper-btns { padding-inline-start: 18px; margin-top: 6px; }

/* دکمه اول کهربایی (همان دکمه خرید سایت)، دومی شیشه‌ای */
.hs-slider .cta-btn.cta-primary {
  background: linear-gradient(135deg, var(--amber), var(--amber-dark));
  border: 0;
  color: #1a1a1a;
  font-weight: 800;
  box-shadow: 0 8px 22px rgb(255 152 0 / 34%);
}
.hs-slider .cta-btn.cta-secondary {
  background: rgb(255 255 255 / 12%);
  border: 1.5px solid rgb(255 255 255 / 62%);
  color: #fff;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.hs-slider .cta-btn.cta-secondary:hover {
  background: rgb(255 255 255 / 22%);
  border-color: #fff;
}

/* ورود نرم متن‌ها روی اسلاید فعال */
@media (prefers-reduced-motion: no-preference) {
  .hs-slider .swiper-slide .swiper-h2,
  .hs-slider .swiper-slide .swiper-sub,
  .hs-slider .swiper-slide .swiper-btns {
    opacity: 0;
    transform: translateY(14px);
  }
  .hs-slider .swiper-slide-active .swiper-h2,
  .hs-slider .swiper-slide-active .swiper-sub,
  .hs-slider .swiper-slide-active .swiper-btns {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  }
  .hs-slider .swiper-slide-active .swiper-sub  { transition-delay: .12s; }
  .hs-slider .swiper-slide-active .swiper-btns { transition-delay: .24s; }
}

/* روی موبایل پرده از پایین می‌آید، پس متن هم پایین می‌نشیند */
@media (max-width: 768px) {
  .hs-slider .swiper-content {
    justify-content: flex-end;
    padding-block-end: clamp(22px, 6vw, 40px);
    background:
      linear-gradient(to top,
        rgb(0 0 102 / 90%) 0%,
        rgb(0 0 102 / 62%) 34%,
        rgb(0 0 102 / 10%) 72%,
        transparent 92%);
  }
  .hs-slider .swiper-h2  { max-width: 22ch; }
  .hs-slider .swiper-sub { max-width: 34ch; }
}

/* ==========================================================================
   ۵۷) اصلاح پردهٔ اسلایدر — تمام‌عرض به‌جای محدود به کانتینر
   ------------------------------------------------------------------------
   پرده تا الان روی .swiper-content بود، ولی آن جعبه
   `width: min(100%, var(--container))` و `margin-inline: auto` دارد —
   یعنی حداکثر ۱۱۶۰ پیکسل و وسط‌چین. روی نمایشگر پهن، گرادیان در همان
   ۱۱۶۰ پیکسل محاسبه می‌شد و به لبهٔ راست اسلاید نمی‌رسید؛ نتیجه یک
   پردهٔ ناقص با مرز مصنوعی بود.
   حالا پرده روی خودِ اسلاید کشیده می‌شود (تمام‌عرض) و .swiper-content
   فقط ظرفِ متن می‌ماند.
   ========================================================================== */

.hs-slider .swiper-slide { position: relative; }

.hs-slider .swiper-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* «to left» جهت فیزیکی است و در راست‌چین برعکس نمی‌شود:
     تیرگی از لبهٔ راست (سمت متن) شروع می‌شود. */
  background:
    linear-gradient(to left,
      rgb(0 0 102 / 90%) 0%,
      rgb(0 0 102 / 74%) 22%,
      rgb(0 0 102 / 40%) 46%,
      rgb(0 0 102 / 10%) 68%,
      rgb(0 0 102 / 0%) 86%),
    linear-gradient(to top, rgb(0 0 40 / 40%), transparent 45%);
}

/* ظرف متن دیگر پرده ندارد و باید بالای پرده بنشیند */
.hs-slider .swiper-content {
  position: relative;
  z-index: 2;
  background: none;
}

/* دکمه‌ها و پیکان‌ها هم باید بالای پرده باشند */
.hs-slider .swiper-button-prev,
.hs-slider .swiper-button-next,
.hs-slider .swiper-pagination { z-index: 3; }

@media (max-width: 768px) {
  /* روی موبایل متن پایین می‌نشیند، پس پرده هم از پایین می‌آید */
  .hs-slider .swiper-slide::before {
    background:
      linear-gradient(to top,
        rgb(0 0 102 / 92%) 0%,
        rgb(0 0 102 / 70%) 30%,
        rgb(0 0 102 / 24%) 58%,
        rgb(0 0 102 / 0%) 88%);
  }
  .hs-slider .swiper-content { background: none; }
}

/* ==========================================================================
   ۵۸) پردهٔ اسلایدر فقط با کلاس has-scrim
   ------------------------------------------------------------------------
   تصویر اسلاید حالا خودش متن و کنتراست دارد، پس پردهٔ تیره فقط طرح را
   خراب می‌کند. بخش ۵۷ به این کلاس محدود شد؛ بدون آن تصویر دقیقاً همان
   چیزی است که آپلود شده.
   برگرداندن: در تنظیمات بخش اسلایدر کلید  "scrim": 1  را اضافه کنید.
   ========================================================================== */

.hs-slider .swiper-slide::before { content: none; }
.hs-slider.has-scrim .swiper-slide::before { content: ''; }

/* لایهٔ متن هم بدون پرده هیچ پس‌زمینه‌ای ندارد */
.hs-slider .swiper-content { background: none; }

/* اگر متن داخل تصویر است، سایهٔ متنِ CSS هم لازم نیست */
.hs-slider:not(.has-scrim) .swiper-h2,
.hs-slider:not(.has-scrim) .swiper-sub { text-shadow: none; }

/* و نوار زردِ کنار تیتر وقتی متنی نیست نباید تنها بماند */
.hs-slider:not(.has-scrim) .swiper-h2:empty { display: none; }
.hs-slider:not(.has-scrim) .swiper-h2:empty::before { content: none; }

/* ==========================================================================
   ۵۹) کل اسلاید کلیک‌پذیر — .swiper-link
   لینک یک لایهٔ شفاف روی تمام اسلاید است، نه دربرگیرندهٔ محتوا، تا
   دکمه‌های داخل اسلاید در <a> تودرتو نیفتند.
   ========================================================================== */

.hs-slider .swiper-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  /* متن جایگزین برای screen reader لازم است ولی نباید دیده شود */
  font-size: 0;
  text-decoration: none;
}
.hs-slider .swiper-link:focus-visible {
  outline: 3px solid var(--brand-yellow);
  outline-offset: -6px;
}

/* لایهٔ متن نباید جلوی کلیکِ لینک را بگیرد، ولی دکمه‌هایش باید
   کلیک‌پذیر بمانند و بالای لینک بنشینند. */
.hs-slider .swiper-content { z-index: 3; pointer-events: none; }
.hs-slider .swiper-btns    { pointer-events: auto; }

/* پیکان و نقطه‌ها باید بالای لینک باشند وگرنه کلیکشان کار نمی‌کند */
.hs-slider .swiper-button-prev,
.hs-slider .swiper-button-next,
.hs-slider .swiper-pagination { z-index: 4; pointer-events: auto; }

/* نشانهٔ کلیک‌پذیری */
.hs-slider .swiper-slide:has(.swiper-link) { cursor: pointer; }

/* ==========================================================================
   ۶۰) اسلاید بدون برش — عرض ۱۰۰٪ و ارتفاع خودکار
   ------------------------------------------------------------------------
   قبلاً اسلایدر ارتفاع ثابت داشت (‎--slider-h‎، پیش‌فرض ۴۶۰px) و تصویر با
   object-fit: cover داخلش برش می‌خورد. یعنی بنری که خودتان طراحی کرده‌اید
   از بالا و پایین یا از دو طرف بریده می‌شد.
   حالا تصویر با نسبت واقعی خودش نمایش داده می‌شود و ارتفاع اسلایدر از
   خودِ تصویر می‌آید. سوایپر هم autoHeight گرفته تا هنگام تعویض اسلاید
   ارتفاع را با اسلاید فعال هماهنگ کند.
   ========================================================================== */

.hs-slider .swiper {
  height: auto;
  max-height: none;
}

.hs-slider .swiper-wrapper { align-items: flex-start; }

.hs-slider .swiper-slide {
  height: auto;
  display: block;
}

/* قاعدهٔ قدیمی به picture هم height:100% داده بود؛ صریح صفرش می‌کنیم تا
   به تفسیر مرورگر از «درصد روی والدِ auto» تکیه نکنیم. */
.hs-slider .swiper-slide picture {
  display: block;
  inline-size: 100%;
  block-size: auto;
  height: auto;
}

.hs-slider .swiper-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* دیگر برش نمی‌خورد */
  object-fit: fill;
}

/* روی موبایل هم دقیقاً همین — قاعدهٔ clamp قبلی خنثی می‌شود */
@media (max-width: 768px) {
  .hs-slider .swiper     { height: auto; max-height: none; }
  .hs-slider .swiper-img { block-size: auto; }
}

/* انتقال نرم ارتفاع هنگام تعویض اسلاید، نه پرش ناگهانی */
.hs-slider .swiper-wrapper { transition-property: transform, height; }

@media (prefers-reduced-motion: reduce) {
  .hs-slider .swiper-wrapper { transition-property: none; }
}


/* ==========================================================================
   نوبت‌دهی آنلاین — صفحهٔ فرم و رسید
   کلاس‌های .booking-* و .bk-* . سایت قدیم این صفحه را با بوت‌استرپ جداگانه و
   پالت بنفش می‌ساخت که با بقیهٔ سایت هم‌خانواده نبود؛ اینجا از همان توکن‌های
   برند استفاده می‌شود.
   ========================================================================== */

.booking-page { padding-block: 24px 56px; }

.booking-head { text-align: center; margin-block-end: 28px; }
.booking-head .page-h1 { margin-block-end: 6px; }
.booking-sub { color: var(--text-light); font-size: 15px; margin: 0; }

.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* --- کارت فرم --- */
.booking-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px;
}

/* تلهٔ ربات — از دید کاربر و صفحه‌خوان پنهان، ولی برای مرورگر واقعی موجود */
.bk-hp {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.bk-price {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--price-from), var(--price-to));
  color: #fff;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-block-end: 18px;
}
.bk-price-label { font-size: 14px; opacity: .92; }
.bk-price-value { font-size: 19px; font-weight: 700; }

.bk-intro {
  background: var(--brand-teal-pale);
  border: 1px solid var(--brand-teal-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px; line-height: 1.9;
  color: var(--text-light);
  margin-block-end: 20px;
}

.bk-field { margin-block-end: 18px; border: 0; padding: 0; }
.bk-field > label,
.bk-field > legend {
  display: block;
  font-weight: 600; font-size: 14.5px;
  color: var(--text);
  margin-block-end: 8px;
  padding: 0;
}
.bk-field .req { color: var(--price-red); }
.bk-field small {
  display: block; margin-block-start: 6px;
  font-size: 12.5px; color: var(--text-muted);
}

.bk-field input[type="text"],
.bk-field input[type="tel"],
.bk-field select,
.bk-field textarea {
  inline-size: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 15px;
  color: var(--text);
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}
.bk-field textarea { resize: vertical; min-block-size: 64px; }

/* --- نوع ویزیت --- */
.bk-visit-opts { display: flex; gap: 12px; }
.bk-visit-opt { flex: 1; }
.bk-visit-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bk-visit-opt span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 10px;
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer; font-size: 15px; color: var(--text-light);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.bk-visit-opt span:hover { border-color: var(--brand-teal); }
.bk-visit-opt input:checked + span {
  background: var(--brand-teal-pale);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}
.bk-visit-opt input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- شبکهٔ ساعت‌ها --- */
.bk-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.bk-slot input { position: absolute; opacity: 0; pointer-events: none; }
.bk-slot span {
  display: block; text-align: center;
  padding: 11px 6px;
  font-size: 14px;
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer; color: var(--text-light);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bk-slot span:hover { border-color: var(--brand-teal); color: var(--accent-dark); }
.bk-slot input:checked + span {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff; font-weight: 600;
}
.bk-slot input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bk-slots-loading,
.bk-slots-empty {
  grid-column: 1 / -1;
  font-size: 14px; color: var(--text-muted);
  padding: 10px 0; margin: 0;
}

/* --- پیام خطا و دکمه --- */
.bk-error {
  background: var(--red-light);
  border: 1px solid var(--price-red);
  color: var(--price-red-dark);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px; line-height: 1.9;
  margin-block-end: 16px;
}

.bk-submit {
  inline-size: 100%;
  padding: 15px 20px;
  font: inherit; font-size: 16px; font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0; border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bk-submit:hover:not(:disabled) {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), .28);
}
.bk-submit:disabled { opacity: .6; cursor: progress; transform: none; }

.bk-rules {
  margin-block: 16px 0;
  font-size: 13px; line-height: 1.9;
  color: var(--text-muted);
}

/* --- ستون کناری --- */
.bk-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-block-end: 18px;
}
.bk-card h2 {
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.bk-card h2 i { color: var(--accent); }
.bk-card p { font-size: 14px; line-height: 2; color: var(--text-light); margin: 0 0 12px; }

.bk-contact { list-style: none; margin: 0; padding: 0; }
.bk-contact li {
  display: flex; align-items: center; gap: 9px;
  padding-block: 7px;
  font-size: 14px; color: var(--text-light);
}
.bk-contact li i { color: var(--accent); inline-size: 18px; text-align: center; }
.bk-contact a { color: var(--text); }
.bk-contact a:hover { color: var(--accent); }

.bk-track-row { display: flex; gap: 8px; }
.bk-track-row input {
  flex: 1; min-inline-size: 0;
  padding: 11px 12px;
  font: inherit; font-size: 14px;
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.bk-track-row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}
.bk-track-row button {
  padding: 11px 16px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: #fff; background: var(--accent);
  border: 0; border-radius: var(--radius); cursor: pointer;
}
.bk-track-row button:hover { background: var(--accent-dark); }

.bk-track-result { margin-block-start: 12px; }
.bk-track-list { list-style: none; margin: 0; padding: 0; }
.bk-track-list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 9px 0;
  border-block-end: 1px solid var(--border);
  font-size: 13.5px;
}
.bk-track-list li:last-child { border-block-end: 0; }
.bk-track-list a { color: var(--text); }
.bk-track-list a:hover { color: var(--accent); }
.bk-track-status {
  font-size: 12px; padding: 3px 9px; border-radius: var(--radius-xl);
  background: var(--surface-page); color: var(--text-muted);
}
.bk-track-status.is-paid { background: var(--green-light); color: var(--sale-green); }
.bk-track-none, .bk-track-loading { font-size: 13.5px; color: var(--text-muted); margin: 0; }

/* --- پیام غیرفعال بودن --- */
.booking-notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--brand-teal-pale);
  border: 1px solid var(--brand-teal-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  max-inline-size: 720px; margin-inline: auto;
}
.booking-notice i { font-size: 24px; color: var(--accent); flex: none; margin-block-start: 2px; }
.booking-notice strong { display: block; margin-block-end: 6px; color: var(--ink); }
.booking-notice p { margin: 0; font-size: 14.5px; line-height: 2; color: var(--text-light); }

.booking-content { margin-block-start: 40px; }


/* ==========================================================================
   رسید نوبت
   ========================================================================== */

.booking-result { padding-block: 40px 60px; }

.bkr-card {
  max-inline-size: 560px; margin-inline: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-block-start: 5px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 34px 28px;
  text-align: center;
}
.bkr-card.bkr-ok   { border-block-start-color: var(--sale-green); }
.bkr-card.bkr-wait { border-block-start-color: var(--amber); }
.bkr-card.bkr-warn { border-block-start-color: var(--text-muted); }
.bkr-card.bkr-bad  { border-block-start-color: var(--price-red); }

.bkr-icon { font-size: 56px; line-height: 1; margin-block-end: 14px; }
.bkr-ok   .bkr-icon { color: var(--sale-green); }
.bkr-wait .bkr-icon { color: var(--amber); }
.bkr-warn .bkr-icon { color: var(--text-muted); }
.bkr-bad  .bkr-icon { color: var(--price-red); }

.bkr-title { font-size: 21px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.bkr-msg { font-size: 15px; color: var(--text-light); margin: 0 0 20px; line-height: 2; }

.bkr-rows {
  text-align: start;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 16px;
  margin: 0 0 20px;
}
.bkr-rows > div {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-block: 10px;
  border-block-end: 1px solid var(--border);
  font-size: 14.5px;
}
.bkr-rows > div:last-child { border-block-end: 0; }
.bkr-rows dt { color: var(--text-muted); margin: 0; }
.bkr-rows dd { margin: 0; color: var(--text); font-weight: 600; }
.bkr-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .5px;
  background: var(--brand-teal-pale);
  color: var(--accent-dark);
  padding: 2px 10px; border-radius: var(--radius-sm);
}

.bkr-hint {
  font-size: 13.5px; line-height: 2; color: var(--text-muted);
  background: var(--surface-page);
  border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 20px;
  text-align: start;
}

.bkr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }


/* ==========================================================================
   ویدیوی معرفی در صفحهٔ اصلی
   ========================================================================== */

.home-intro-video {
  max-inline-size: 760px; margin-inline: auto;
}
.home-intro-video video {
  inline-size: 100%; block-size: auto; display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: #000;
}


/* ==========================================================================
   واکنش‌گرایی بخش نوبت‌دهی
   ========================================================================== */

@media (max-width: 900px) {
  .booking-grid { grid-template-columns: 1fr; }
  .booking-aside { order: -1; }
  /* در موبایل فرم اصلی باید اول دیده شود، نه جعبهٔ پیگیری */
  .bk-track { display: none; }
}

@media (max-width: 560px) {
  .booking-form { padding: 20px 16px; }
  .bk-slots { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .bk-visit-opts { flex-direction: column; }
  .bkr-card { padding: 26px 18px; }
  .bkr-rows > div { flex-direction: column; gap: 2px; }
}


/* ==========================================================================
   هدر — بازطراحی برای رفع اسکرول افقی
   --------------------------------------------------------------------------
   مشکل قبلی: عنوان کامل سایت (۵۰ نویسه، با white-space:nowrap) کنار ۹ آیتم
   منوی صاف و یک ورودی جستجوی همیشه‌باز در یک ردیف flex با nowrap می‌نشست.
   مجموع عرض ثابت این سه از عرض صفحه بیشتر می‌شد و چون هیچ عنصری min-width:0
   نداشت، ردیف نه می‌شکست نه کوچک می‌شد — کل صفحه اسکرول افقی می‌خورد.

   راه‌حل: برند دو‌خطی و کوتاه، منو گروه‌بندی‌شده به ۶ آیتم، جستجو پشت دکمه،
   و min-width:0 روی عنصر کشسان تا اگر باز هم جا کم آمد منو کوچک شود نه صفحه.
   ========================================================================== */

/* تور ایمنی: هیچ عنصری نباید صفحه را افقی بکشد */
html, body { overflow-x: hidden; max-width: 100%; }

.hdr-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: auto;
  min-height: 70px;
  padding-block: 8px;
}

/* --- بلوک برند --- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}
.brand-mark {
  inline-size: 42px;
  block-size: 42px;
  border-radius: 11px;
  flex: none;
  display: block;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.brand-name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--brand-navy);
  white-space: nowrap;
}
.brand-tag {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 30ch;
}
.brand:hover .brand-name { color: var(--accent-dark); }

/* --- منو --- */
/* min-width:0 مهم است: بدون آن آیتم flex زیر عرض محتوایش نمی‌رود و
   سرریز به جای منو به صفحه منتقل می‌شود. */
.hdr-nav { flex: 1 1 auto; min-width: 0; }
.nav-list { justify-content: center; flex-wrap: nowrap; min-width: 0; }
.ni-link { padding: 8px 10px; font-size: 14.5px; white-space: nowrap; }

/* --- دکمه‌های سمت چپ هدر --- */
.hdr-actions { flex: 0 0 auto; gap: 10px; }

.hdr-icon-btn {
  display: flex; align-items: center; justify-content: center;
  inline-size: 38px; block-size: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--text-light);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.hdr-icon-btn svg { inline-size: 17px; block-size: 17px; stroke: currentColor; }
.hdr-icon-btn:hover,
.hdr-icon-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--brand-teal-pale);
}

.hdr-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 14.5px; font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.hdr-cta:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), .3);
}
.hdr-cta i { font-size: 13px; }

/* --- پنل جستجوی کشویی --- */
.hdr-search-panel {
  border-block-start: 1px solid var(--border);
  background: var(--bg-light);
  padding-block: 14px;
}
.hdr-search-panel form {
  display: flex; align-items: center; gap: 10px;
}
.hdr-search-panel svg {
  inline-size: 18px; block-size: 18px;
  stroke: var(--text-muted); flex: none;
}
.hdr-search-panel input {
  flex: 1; min-inline-size: 0;
  padding: 11px 14px;
  font: inherit; font-size: 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}
.hdr-search-panel input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}
.hdr-search-panel button {
  padding: 11px 20px;
  font: inherit; font-size: 14.5px; font-weight: 700;
  color: #fff; background: var(--accent);
  border: 0; border-radius: var(--radius);
  cursor: pointer; flex: none;
}
.hdr-search-panel button:hover { background: var(--accent-dark); }

/* --- دکمهٔ نوبت‌دهی در نوار موبایل --- */
.hdr-m-cta {
  display: flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}
.hdr-m-cta:hover { background: var(--accent-dark); color: #fff; }

/* ==========================================================================
   واکنش‌گرایی هدر
   ========================================================================== */

/* بین ۹۶۰ و ۱۱۵۰ منو هنوز افقی است ولی جا تنگ می‌شود: برچسب دکمهٔ نوبت‌دهی
   و خط تخصص حذف می‌شوند تا منو کامل جا شود، نه اینکه صفحه بکشد. */
@media (max-width: 1150px) {
  .brand-tag { display: none; }
  .ni-link   { padding-inline: 8px; font-size: 14px; }
}

@media (max-width: 1040px) {
  .hdr-cta span { display: none; }
  .hdr-cta { padding: 10px 14px; }
  .hdr-cta i { font-size: 15px; }
}

/* زیر ۹۶۰ منو به کشوی کناری می‌رود (قاعدهٔ main.css) */
@media (max-width: 960px) {
  .hdr-actions { display: none; }
  .brand-tag   { display: block; }
  .brand-mark  { inline-size: 38px; block-size: 38px; }
  .brand-name  { font-size: 16px; }
  .hdr-inner   { min-height: 62px; gap: 10px; }

  /* برند داخل کشو دوباره کامل دیده می‌شود */
  .drawer-logo .brand-mark { inline-size: 34px; block-size: 34px; }
  .drawer-logo .brand-name { font-size: 15px; }
  .drawer-logo .brand-tag  { font-size: 11px; }
}

@media (max-width: 560px) {
  .brand-tag  { display: none; }
  .brand-name { font-size: 15px; }
  .brand-mark { inline-size: 34px; block-size: 34px; }
  .hdr-search-panel button { display: none; }
}

@media (max-width: 380px) {
  .hdr-mobile-actions .hdr-m-phone span { display: none; }
}


/* ==========================================================================
   فوتر — طراحی اختصاصی مطب
   --------------------------------------------------------------------------
   جایگزین فوتر .mry-* که از پروژهٔ دیگری آمده بود. ساختار حول اطلاعات مطب
   می‌چرخد نه ستون‌های عمومی: نوار نوبت‌دهی، کارت مطب، پیوندها، نوار پایانی.
   ========================================================================== */

.dj-footer {
  margin-block-start: 64px;
  background: var(--bg);
  border-block-start: 1px solid var(--border);
}

/* --- ۱) نوار نوبت‌دهی --- */
.dj-cta {
  background: linear-gradient(135deg, var(--brand-teal-dark), var(--brand-teal-deep));
  color: #fff;
}
.dj-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-block: 26px;
}
.dj-cta-text h2 {
  margin: 0 0 4px;
  font-size: 20px; font-weight: 800; line-height: 1.6; color: #fff;
}
.dj-cta-text p { margin: 0; font-size: 14px; opacity: .9; }
.dj-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.dj-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background .18s, color .18s, transform .18s;
}
.dj-btn-solid { background: #fff; color: var(--brand-teal-deep); }
.dj-btn-solid:hover { background: var(--brand-teal-pale); color: var(--brand-teal-deep); transform: translateY(-1px); }
.dj-btn-ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.dj-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* --- ۲) کارت مطب --- */
/* کارت روی مرز نوار فیروزه‌ای می‌نشیند تا فوتر یک بلوک یکپارچه به نظر
   برسد، نه چند نوار جدا. */
.dj-clinic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  margin-block-start: -22px;
  margin-block-end: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dj-clinic-item {
  display: flex; gap: 14px;
  padding: 22px;
  border-inline-end: 1px solid var(--border);
}
.dj-clinic-item:last-child { border-inline-end: 0; }
.dj-clinic-ico {
  flex: none;
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--brand-teal-pale);
  color: var(--accent-dark);
  font-size: 16px;
}
.dj-clinic-item h3 {
  margin: 0 0 6px;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.dj-clinic-item p {
  margin: 0; font-size: 13.5px; line-height: 2; color: var(--text-light);
}
.dj-clinic-more {
  display: inline-block; margin-block-start: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent-dark);
}
.dj-clinic-more:hover { color: var(--accent); }

.dj-contact { list-style: none; margin: 0; padding: 0; }
.dj-contact li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-block: 5px;
  font-size: 13.5px;
}
.dj-contact li span { color: var(--text-muted); }
.dj-contact li a { color: var(--text); font-weight: 600; }
.dj-contact li a:hover { color: var(--accent); }

/* --- ۳) پیوندها --- */
.dj-links {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-block-end: 40px;
}

.dj-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.dj-brand img { border-radius: 12px; flex: none; }
.dj-brand strong {
  display: block; font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.4;
}
.dj-brand em {
  display: block; font-style: normal;
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}
.dj-brand-desc {
  margin: 14px 0 0;
  font-size: 13.5px; line-height: 2.1; color: var(--text-light);
  max-inline-size: 46ch;
}

.dj-socials { display: flex; gap: 9px; margin-block-start: 16px; }
.dj-social {
  inline-size: 38px; block-size: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg-light);
  color: var(--text-light);
  font-size: 16px;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.dj-social:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.dj-social-ig:hover { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.dj-social-tg:hover { background: #0088cc; }
.dj-social-wa:hover { background: #25d366; }

.dj-links-col h3 {
  margin: 0 0 14px;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  padding-block-end: 10px;
  border-block-end: 2px solid var(--brand-teal-border);
  display: inline-block;
}
.dj-links-col ul { list-style: none; margin: 0; padding: 0; }
.dj-links-col li { padding-block: 5px; }
.dj-links-col a {
  font-size: 13.5px; color: var(--text-light);
  transition: color .15s, padding-inline-start .15s;
}
.dj-links-col a:hover { color: var(--accent-dark); padding-inline-start: 4px; }

.dj-creds { list-style: none; margin: 0; padding: 0; }
.dj-creds li {
  display: flex; align-items: flex-start; gap: 9px;
  padding-block: 6px;
  font-size: 13px; line-height: 1.9; color: var(--text-light);
}
.dj-creds i { color: var(--accent); margin-block-start: 5px; flex: none; }

/* --- ۴) نوار پایانی --- */
.dj-bottom {
  background: var(--brand-navy);
  color: rgba(255,255,255,.72);
}
.dj-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-block: 16px;
}
.dj-copy { margin: 0; font-size: 12.5px; line-height: 2; }
.dj-enamad { display: block; background: #fff; border-radius: 8px; padding: 5px; line-height: 0; }
.dj-enamad img { display: block; inline-size: 74px; block-size: auto; }

/* --- نوار تماس چسبان موبایل --- */
.dj-mobilebar { display: none; }

@media (max-width: 960px) {
  .dj-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .dj-links-brand { grid-column: 1 / -1; }
  .dj-clinic-item { border-inline-end: 0; border-block-end: 1px solid var(--border); }
  .dj-clinic-item:last-child { border-block-end: 0; }
}

@media (max-width: 700px) {
  .dj-cta-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .dj-cta-actions { justify-content: center; }
  .dj-cta-text h2 { font-size: 18px; }
  .dj-links { grid-template-columns: 1fr; }
  .dj-bottom-inner { flex-direction: column; text-align: center; }

  /* نوار تماس پایین صفحه فقط در موبایل */
  .dj-mobilebar {
    position: fixed; inset-inline: 0; inset-block-end: 0;
    z-index: 950;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--bg);
    border-block-start: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(23,35,53,.12);
    padding-block-end: env(safe-area-inset-bottom, 0);
  }
  .dj-mb-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding-block: 9px;
    font-size: 11px; color: var(--text-light); text-decoration: none;
  }
  .dj-mb-item i { font-size: 17px; }
  .dj-mb-cta { color: var(--accent-dark); font-weight: 700; }
  /* جا برای نوار چسبان تا محتوای انتهای صفحه زیرش نماند */
  body { padding-block-end: 62px; }
  /* دکمهٔ شناور واتساپ با نوار پایین تداخل داشت */
  .whatsapp-float { inset-block-end: 74px; }
}


/* ==========================================================================
   بخش معرفی پزشک در صفحهٔ اصلی
   --------------------------------------------------------------------------
   این بخش «استایل نداشت»: یک تصویر و یک پاراگراف justify‌شده کنار هم، بدون
   هیچ تمایز بصری. حالا تصویر قاب می‌گیرد و مدارک به‌جای یک جملهٔ طولانی،
   فهرست نشان‌دار می‌شوند.
   ========================================================================== */

.hs-text-image { background: var(--tint-mist); }

.hs-text-image .ti-grid { gap: 40px; align-items: center; }

.hs-text-image .ti-image {
  position: relative;
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 40px rgba(23, 35, 53, .16);
  /* تا وقتی پوشهٔ imgs/ از سرور قدیم کپی نشده، عکس نمی‌آید؛ این پس‌زمینه
     باعث می‌شود جای عکس یک قاب فیروزه‌ای تمیز باشد نه آیکون شکستهٔ مرورگر */
  background: var(--brand-teal-pale);
  min-block-size: 220px;
}
/* حاشیهٔ فیروزه‌ای پشت تصویر — همان لهجهٔ بصری سایت قدیم، مرتب‌تر */
.hs-text-image .ti-image::after {
  content: '';
  position: absolute;
  inset-block-start: 14px; inset-inline-start: -14px;
  inline-size: 100%; block-size: 100%;
  border: 2px solid var(--brand-teal);
  border-radius: var(--radius-xl);
  z-index: -1;
}
.hs-text-image .ti-image img { border-radius: var(--radius-xl); }

.hs-text-image .hs-title {
  text-align: start;
  font-size: 26px;
  margin-block-end: 6px;
}
.hs-text-image .ti-content > p { font-size: 15px; line-height: 2.2; color: var(--text-light); }

/* فهرست مدارک — از پاراگراف کامادار ساخته می‌شود */
.dj-creds-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 22px;
}
.dj-creds-list li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 14px; line-height: 1.95; color: var(--text);
}
.dj-creds-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; inset-block-start: 10px;
  inline-size: 9px; block-size: 9px;
  border-radius: 50%;
  background: var(--brand-teal);
  box-shadow: 0 0 0 3px var(--brand-teal-pale);
}

.hs-intro-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 24px; }

@media (max-width: 900px) {
  .hs-text-image .ti-grid { grid-template-columns: 1fr; gap: 26px; }
  .hs-text-image .ti-image::after { display: none; }
  .hs-text-image .hs-title { text-align: center; font-size: 22px; }
  .dj-creds-list { grid-template-columns: 1fr; }
}


/* ==========================================================================
   ویدیوی معرفی — وقتی فایل نیست، جعبهٔ خالی نماند
   ========================================================================== */
.home-intro-video video { aspect-ratio: 16 / 9; object-fit: cover; }


/* ==========================================================================
   اصلاحات دور دوم
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱) هدر — ضدسرریز ساختاری
   دور قبل عرض‌ها را «تنظیم» کرده بودم؛ ولی وقتی brand_name در دیتابیس نبود،
   عنوان کامل سایت داخل هدر می‌نشست و باز سرریز می‌شد. حالا هدر طوری بسته
   می‌شود که هر طول متنی و هر تعداد آیتم منو هم بگیرد، صفحه اسکرول افقی
   نخورَد: نام برند بریده می‌شود و منو داخل خودش اسکرول می‌شود.
   -------------------------------------------------------------------------- */

.brand { max-inline-size: 280px; overflow: hidden; }
.brand-text { overflow: hidden; }
.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 100%;
}

/* منو داخل خودش اسکرول می‌شود، نه اینکه صفحه را بکشد */
.hdr-nav { min-width: 0; overflow: hidden; }
.nav-list {
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-list::-webkit-scrollbar { display: none; }

/* منوی کشویی نباید قربانی overflow شود.
   وقتی .nav-list اسکرول افقی دارد، dropdown داخلش بریده می‌شود؛ در عرض‌های
   بزرگ که جا هست اسکرول لازم نیست، پس آن‌جا overflow را آزاد می‌کنیم. */
@media (min-width: 1201px) {
  .hdr-nav  { overflow: visible; }
  .nav-list { overflow: visible; }
}

/* --------------------------------------------------------------------------
   ۲) بردکرامب — به لبهٔ صفحه چسبیده بود
   نوار مسیر داخل .container نیست و <ol> تمام عرض را می‌گرفت، برای همین در
   حالت راست‌چین به لبهٔ راست صفحه می‌چسبید. اینجا خودِ <ol> را به عرض
   container محدود و وسط‌چین می‌کنیم تا نیازی به تغییر markup نباشد.
   -------------------------------------------------------------------------- */
.breadcrumb > ol,
.breadcrumb > .container {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* --------------------------------------------------------------------------
   ۳) فونت و رنگ محتوا
   ادیتور سایت قدیم روی ۴۲ عنصر «font-family: tahoma» و روی ۱۰ عنصر رنگ آبی
   خالص (#0000ff) گذاشته بود. استایل inline را فقط !important می‌تواند
   بازنویسی کند، پس اینجا عمداً استفاده شده و دامنه‌اش هم فقط عناصری است که
   واقعاً چنین استایلی دارند.
   -------------------------------------------------------------------------- */

/* همهٔ متن سایت با فونت اصلی */
.page-content [style*="font-family" i],
.ti-content   [style*="font-family" i],
.section-text [style*="font-family" i],
.hs-html-body [style*="font-family" i],
.page-content font,
.hs-html-body font {
  font-family: var(--font) !important;
}

/* اندازهٔ فونتِ چسبیده به همان ادیتور هم بی‌اثر می‌شود تا ریتم متن نشکند */
.page-content [style*="tahoma" i],
.ti-content   [style*="tahoma" i],
.section-text [style*="tahoma" i],
.hs-html-body [style*="tahoma" i] {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* آبی خالصِ به‌جامانده از ادیتور قدیم → آبی برند */
.page-content [style*="#0000ff" i],
.page-content [style*="rgb(0, 0, 255)" i],
.page-content [style*="rgb(0,0,255)" i],
.hs-html-body [style*="#0000ff" i],
.hs-html-body [style*="rgb(0, 0, 255)" i],
.hs-html-body [style*="rgb(0,0,255)" i] {
  color: var(--brand-blue) !important;
}

/* عرض و ارتفاع inline روی تصویر، قاب را می‌شکست */
.page-content img[style*="width" i],
.hs-html-body img[style*="width" i] {
  max-inline-size: 100%;
  block-size: auto;
}

/* --------------------------------------------------------------------------
   ۴) بلوک‌های HTML صفحهٔ اصلی
   -------------------------------------------------------------------------- */
.hs-html-body { font-size: 15px; line-height: 2.1; color: var(--text-light); }
.hs-html-body > :first-child { margin-block-start: 0; }
.hs-html-body > :last-child  { margin-block-end: 0; }
.hs-html .hs-title { text-align: start; margin-block-end: 14px; }

@media (max-width: 700px) {
  .breadcrumb > ol,
  .breadcrumb > .container { padding-inline: 16px; }
}


/* --------------------------------------------------------------------------
   ۵) نقطهٔ شکست کشوی منو
   main.css منو را در ۹۶۰ پیکسل به کشو می‌برد. آن عدد برای ۶ آیتم درست بود،
   ولی اگر مدیر منو را گروه‌بندی نکند (یا پچ منو اجرا نشود) ۹ آیتم در ۱۰۲۴
   پیکسل جا نمی‌شود. نقطهٔ شکست به ۱۲۰۰ می‌آید تا در لپ‌تاپ‌های معمول هم
   منو مرتب باشد، و قواعد کشوی main.css در همین بازه هم اعمال شوند.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hdr-ham            { display: flex; }
  .hdr-mobile-actions { display: flex; }
  .hdr-actions        { display: none; }

  /* عمداً از right فیزیکی استفاده شده نه inset-inline-end.
     main.css همین کشو را با right می‌سازد؛ در صفحهٔ راست‌چین
     inset-inline-end یعنی «چپ»، و ترکیب این دو کشو را با هر دو لبه
     مقید می‌کرد و عرضش را می‌شکست. */
  .hdr-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100%;
    width: min(330px, 90vw);
    background: var(--white);
    z-index: 900;
    overflow-y: auto;
    overflow-x: hidden;
    transition: right .32s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .hdr-nav.open { right: 0; box-shadow: -8px 0 40px rgba(0,0,0,.18); }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    padding: 8px 0;
  }
  .ni-link { padding: 13px 18px; font-size: 15px; justify-content: space-between; }

  .drawer-top, .drawer-search, .drawer-foot { display: block; }
  .brand-tag { display: block; }
}