/* فونت وزیرمتن (self-host) - بدون نیاز به Google Fonts */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
html, body, button, input, textarea, select { font-family: "Vazirmatn", ui-sans-serif, system-ui, sans-serif; }

/* ==========================================================================
   site-ui.css  —  لایه‌ی رابط کاربری (Bootstrap 5.3.8 + Font Awesome 4.7)
   ترتیب بارگذاری: bootstrap-layer.css → font-awesome → Tailwind → این فایل
   این فایل بدون @layer است؛ پس بر Bootstrap و Tailwind اولویت دارد.
   ========================================================================== */

:root {
  --ui-ink: #0c333b;
  --ui-ink-deep: #061c21;
  --ui-brand: #176575;
  --ui-accent: #f4c86e;
  --ui-paper: #f4f8f7;
  --ui-ease: cubic-bezier(.22, .8, .2, 1);
}

html { -webkit-text-size-adjust: 100%; }
/* جلوگیری از پرش چیدمان هنگام قفل اسکرول (فقط مرورگرهای دسکتاپ با اسکرول‌بار کلاسیک) */
@media (min-width: 768px) { html { scrollbar-gutter: stable; } }
/* Bootstrap رنگ متن بدنه را عوض می‌کند؛ ظاهر اصلی سایت حفظ می‌شود */
body { color: inherit; }
section[id] { scroll-margin-top: 96px; }
img, svg, video, iframe { max-width: 100%; }

/* قفل اسکرول هنگام باز بودن منو (به‌جای قفل Bootstrap که برای RTL مناسب نیست) */
html.site-menu-open,
html.site-menu-open body { overflow: hidden; }
html.site-menu-open .site-chat-wrap,
html.site-menu-open .site-top,
html.site-menu-open .site-toast { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* هدایت‌گر بصری وقتی نتیجه‌ی جست‌وجو انتخاب می‌شود */
@keyframes site-hit-pulse {
  0%   { outline-color: rgba(244, 200, 110, 0); }
  25%  { outline-color: rgba(244, 200, 110, .95); }
  100% { outline-color: rgba(244, 200, 110, 0); }
}
.site-hit { outline: 3px solid transparent; outline-offset: 8px; border-radius: 10px; animation: site-hit-pulse 2.2s ease-out 1; }

/* ==========================================================================
   ۱) دکمه‌ی همبرگری (۳ خط)
   ========================================================================== */
.site-burger {
  position: relative;
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 8px 22px rgba(3, 20, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s, transform .2s;
}
.site-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform .4s var(--ui-ease), opacity .2s, width .3s var(--ui-ease), background .3s;
}
.site-burger span:nth-child(2) { width: 15px; }
.site-burger:hover span:nth-child(2),
.site-burger:focus-visible span:nth-child(2) { width: 22px; }
.site-burger:active { transform: scale(.94); }
.site-burger:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }

/* حالت ضربدر (دکمه‌ی بستن داخل منو) */
.site-burger.is-x span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-burger.is-x span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-burger.is-x span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-burger.is-x:hover { border-color: var(--ui-accent); color: var(--ui-accent); }

/* هدر سفید بعد از اسکرول */
.site-curved-header.site-header-scrolled .site-burger--header {
  color: var(--ui-ink);
  background: #edf5f3;
  border-color: rgba(12, 51, 59, .16);
  box-shadow: 0 6px 16px rgba(12, 51, 59, .1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* دکمه و منوی پیش‌فرض React حذف می‌شوند (جایگزین: Bootstrap Offcanvas) */
#root header button.lg\:hidden,
#root header > nav { display: none !important; }

/* دکمه‌ی زبان با translateX قدیمی روی دکمه‌ی «درخواست مشاوره» می‌افتاد */
html body .site-language { transform: none !important; margin-inline: 0 !important; }

@media (max-width: 1023.98px) {
  .site-burger { display: inline-flex; }
  /* انتخاب زبان در موبایل داخل منوی تمام‌صفحه است */
  html body .site-language { display: none !important; }
}

/* ==========================================================================
   ۲) منوی تمام‌صفحه — Bootstrap Offcanvas، ورود از راست با افکت Fade
   ========================================================================== */
.site-menu {
  --bs-offcanvas-width: 100%;
  --bs-offcanvas-bg: transparent;
  --bs-offcanvas-color: #fff;
  --bs-offcanvas-border-width: 0;
  z-index: 10000;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  border: 0;
  color: #fff;
  background: transparent;
  overflow: hidden;
  direction: inherit;
  /* حالت بسته: کمی بیرون در سمت راست + شفاف */
  opacity: 0;
  transform: translate3d(72px, 0, 0);
  transition: opacity .45s ease, transform .55s var(--ui-ease);
}
.site-menu.showing,
.site-menu.show:not(.hiding) { opacity: 1; transform: none; }
.site-menu.hiding { opacity: 0; transform: translate3d(72px, 0, 0); }

/* پس‌زمینه‌ی برند (تیل تیره + هاله‌ی طلایی + شبکه) */
.site-menu::before,
.site-menu::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.site-menu::before {
  z-index: -2;
  background:
    radial-gradient(70% 45% at 100% 0%, rgba(244, 200, 110, .2), transparent 62%),
    radial-gradient(85% 60% at 0% 100%, rgba(23, 101, 117, .75), transparent 66%),
    linear-gradient(160deg, var(--ui-ink-deep) 0%, var(--ui-ink) 55%, #0e4350 100%);
}
.site-menu::after {
  z-index: -1;
  opacity: .1;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%);
  mask-image: linear-gradient(160deg, #000, transparent 70%);
}

.site-menu-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 8px;
}
.site-menu-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 900; font-size: 1.05rem; }
.site-menu-brand img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .35)); }

.site-menu-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ورود تدریجی آیتم‌ها (stagger) */
.site-menu-item { opacity: 0; transform: translate3d(36px, 0, 0); transition: opacity .45s ease, transform .55s var(--ui-ease); }
.site-menu.show .site-menu-item {
  opacity: 1;
  transform: none;
  transition-delay: calc(.12s + var(--i, 0) * .055s);
}
.site-menu.hiding .site-menu-item { opacity: 0; transition-delay: 0s; transition-duration: .2s; }

.site-menu-nav { display: flex; flex-direction: column; gap: 8px; }
.site-menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.5;
}
.site-menu-link .ic {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 15px;
  background: rgba(255, 255, 255, .08);
  color: var(--ui-accent);
  font-size: 20px;
  transition: background .25s, color .25s, transform .25s;
}
.site-menu-link .go { margin-inline-start: auto; font-size: 22px; opacity: .55; transition: transform .25s, opacity .25s; }
html[dir="ltr"] .site-menu-link .go { transform: scaleX(-1); }
.site-menu.show .site-menu-link:hover,
.site-menu.show .site-menu-link:focus-visible,
.site-menu.show .site-menu-link.active {
  border-color: rgba(244, 200, 110, .55);
  background: linear-gradient(145deg, rgba(244, 200, 110, .2), rgba(255, 255, 255, .05));
}
.site-menu-link:hover .ic,
.site-menu-link.active .ic { background: var(--ui-accent); color: var(--ui-ink); }
.site-menu-link:hover .go,
.site-menu-link.active .go { opacity: 1; }
.site-menu-link:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }

.site-menu-foot { display: flex; flex-direction: column; gap: 16px; margin-top: auto; padding-top: 6px; }
.site-menu-langs { display: flex; gap: 8px; flex-wrap: wrap; }
.site-menu-lang {
  flex: 1 1 0;
  min-width: 72px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.site-menu-lang:hover { border-color: rgba(244, 200, 110, .6); }
.site-menu-lang.active { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-ink); }

.site-menu-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border: 0;
  border-radius: 18px;
  background: var(--ui-accent);
  color: var(--ui-ink);
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(244, 200, 110, .22);
}
.site-menu-cta:hover,
.site-menu-cta:focus-visible { background: #ffd986; color: var(--ui-ink); }
html[dir="ltr"] .site-menu-cta .fa-arrow-left { transform: scaleX(-1); }

.site-menu-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; }
.site-menu-meta a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-menu-meta a:hover { color: var(--ui-accent); }
.site-menu-meta .fa { color: var(--ui-accent); font-size: 16px; }

@media (min-width: 768px) {
  .site-menu-link { font-size: 1.35rem; padding: 14px 18px; }
  .site-menu-body { padding-top: 24px; gap: 26px; }
}
@media (max-height: 640px) {
  .site-menu-link { padding-block: 8px; font-size: 1.05rem; }
  .site-menu-link .ic { flex-basis: 38px; width: 38px; height: 38px; font-size: 17px; }
  .site-menu-body { gap: 14px; }
}

/* ==========================================================================
   ۳) جست‌وجو (هدر دسکتاپ + منوی موبایل)
   ========================================================================== */
.site-sbox { position: relative; z-index: 100; flex: 0 1 260px; width: 260px; margin-inline-start: 18px; }
.site-sbox-form {
  flex-wrap: nowrap;
  align-items: center;
  height: 46px;
  margin: 0;
  padding-inline: 4px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 10px 26px rgba(3, 20, 24, .16), inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.site-sbox-form:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 4px rgba(244, 200, 110, .16), 0 12px 30px rgba(3, 20, 24, .25);
}
.site-sbox-form .input-group-text {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: var(--ui-accent);
  color: var(--ui-ink);
  font-size: 16px;
}
.site-sbox-input.form-control {
  height: 100%;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.site-sbox-input.form-control::placeholder { color: rgba(255, 255, 255, .82); opacity: 1; }
.site-sbox-input::-webkit-search-cancel-button,
.site-sbox-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.site-sbox-clear {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  color: inherit;
  font-size: 15px;
  line-height: 1;
}
.site-sbox-clear:hover { background: rgba(255, 255, 255, .26); }
.site-sbox-clear[hidden] { display: none !important; }

/* روی هدر سفید (بعد از اسکرول) */
.site-curved-header.site-header-scrolled .site-sbox-form {
  border-color: rgba(12, 51, 59, .16);
  background: #f1f6f5;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--ui-ink);
}
.site-curved-header.site-header-scrolled .site-sbox-input.form-control { color: var(--ui-ink); }
.site-curved-header.site-header-scrolled .site-sbox-input.form-control::placeholder { color: rgba(12, 51, 59, .62); }
.site-curved-header.site-header-scrolled .site-sbox-clear { background: rgba(12, 51, 59, .08); }

/* نتایج */
.site-sbox-results {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  width: min(380px, calc(100vw - 32px));
  max-height: min(62vh, 420px);
  padding: 8px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  background: rgba(9, 40, 47, .93);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 54px rgba(2, 16, 20, .42);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.site-sbox.is-open .site-sbox-results { opacity: 1; visibility: visible; transform: none; }
.site-sbox-label { padding: 6px 12px 4px; color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 800; }
.site-sbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  text-align: start;
  cursor: pointer;
}
.site-sbox-item .fa { flex: 0 0 auto; color: var(--ui-accent); font-size: 14px; opacity: .8; }
.site-sbox-item .ttl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-sbox-item .grp { flex: 0 0 auto; padding: 1px 9px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); font-size: 10px; font-weight: 700; white-space: nowrap; }
.site-sbox-item mark { padding: 0; background: transparent; color: var(--ui-accent); font-weight: 900; }
.site-sbox-item.is-active,
.site-sbox-item:hover { background: rgba(244, 200, 110, .16); }
.site-sbox-empty { padding: 18px 12px; color: rgba(255, 255, 255, .62); font-size: 12px; text-align: center; }
.site-sbox-empty .fa { display: block; margin-bottom: 8px; font-size: 22px; opacity: .6; }

/* نسخه‌ی داخل منوی موبایل */
.site-sbox--menu { flex: none; width: 100%; margin: 0; }
.site-sbox--menu .site-sbox-form { height: 54px; border-radius: 18px; }
.site-sbox--menu .site-sbox-form .input-group-text { width: 42px; height: 42px; border-radius: 14px; font-size: 18px; }
.site-sbox--menu .site-sbox-input.form-control { font-size: 15px; }
.site-sbox--menu .site-sbox-results {
  position: static;
  display: none;
  width: 100%;
  max-height: 38vh;
  margin-top: 10px;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: rgba(255, 255, 255, .08);
}
.site-sbox--menu.is-open .site-sbox-results { display: block; }

/* هدر دسکتاپ: لینک‌ها و دکمه‌ها هیچ‌وقت نشکنند */
#root header .nav-link,
#root header a.bg-brand { white-space: nowrap; }

/* ۱۰۲۴ تا ۱۲۷۹: جست‌وجو به‌صورت آیکن جمع می‌شود و با فوکوس باز می‌شود */
@media (max-width: 1279.98px) and (min-width: 1024px) {
  #root header nav { gap: 1.25rem; }
  #root header a.bg-brand { padding-inline: 1rem; }
  .site-sbox { flex: 0 0 46px; width: 46px; height: 46px; margin-inline-start: 4px; }
  .site-sbox-header .site-sbox-form,
  .site-sbox--header .site-sbox-form {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 46px;
    overflow: hidden;
    transition: width .35s var(--ui-ease), border-color .25s, box-shadow .25s;
  }
  .site-sbox--header:focus-within .site-sbox-form {
    width: 270px;
    border-color: var(--ui-accent);
    background: #0b343c;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-curved-header.site-header-scrolled .site-sbox--header:focus-within .site-sbox-form { background: #fff; }
  .site-sbox--header .input-group-text { cursor: pointer; }
  /* عرض صفر باعث می‌شد مکان‌نما در RTL به ابتدای فیلد برگردد */
  .site-sbox--header .site-sbox-input.form-control { min-width: 150px; }
}

/* ==========================================================================
   ۴) کارت‌های محصول — شیشه‌ای (Glass) + شبکه‌ی Bootstrap
   ========================================================================== */
.site-prod-row {
  --bs-gutter-x: 1.5rem;
  margin-top: 3.5rem;
  margin-inline: calc(var(--bs-gutter-x) * -.5);
  row-gap: 1.5rem;
}
/* ریست Tailwind، پدینگ ستون‌های Bootstrap را صفر می‌کند؛ اینجا برمی‌گردد */
.site-prod-row > [class*="col"] { padding-inline: calc(var(--bs-gutter-x) * .5); margin-top: 0; }
.site-prod-row > [class*="col"] > article { height: 100%; }

#products article {
  isolation: isolate;
  min-height: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 28px;
  background: var(--ui-ink);
  box-shadow: 0 18px 44px rgba(7, 33, 39, .24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#products article > img { transition: transform .9s var(--ui-ease), filter .6s; }

/* محوشدگی تار انتهای عکس: تیره‌شدن تدریجی + بلور تدریجی (بدون کادر یا پنل) */
#products article > .product-scrim {
  top: auto;
  bottom: 0;
  height: 68%;
  opacity: 1;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 100%);
  background: linear-gradient(to top, rgba(5, 24, 29, .94) 0%, rgba(5, 24, 29, .78) 38%, rgba(5, 24, 29, .34) 72%, rgba(5, 24, 29, 0) 100%);
  transition: opacity .55s ease;
}

/* ردیف بالا: آیکن + شماره */
#products article > :nth-child(3) { padding: 18px 18px 0; opacity: 1; translate: none; transition: opacity .45s ease, translate .55s var(--ui-ease); }
#products article > :nth-child(3) > span:first-child {
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
#products article > :nth-child(3) > span:last-child {
  font-size: 1.6rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 2px 12px rgba(3, 20, 24, .5);
}

/* متن‌ها: سفید، نرم، تراز راست (شروع) زیر تصویر */
#products article > :nth-child(4) {
  inset-inline: 0;
  bottom: 0;
  padding: 0 24px 24px;
  text-align: start;
  color: #fff;
  opacity: 1;
  translate: none;
  transition: opacity .45s ease, translate .55s var(--ui-ease);
}
#products article > :nth-child(4) > div:first-child { flex-wrap: wrap; gap: 8px; row-gap: 6px; }
#products article > :nth-child(4) > div:first-child > span {
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .92);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
#products article > :nth-child(4) h3 {
  margin-top: 14px;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 2px 14px rgba(3, 20, 24, .5);
}
#products article > :nth-child(4) p {
  max-width: none;
  margin-top: 6px;
  font-size: .9rem;
  font-weight: 400;
  line-height: 2;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 10px rgba(3, 20, 24, .55);
}
#products article > :nth-child(4) a {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
}
#products article > :nth-child(4) a > span {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .14);
  transition: background .3s, color .3s;
}
#products article > :nth-child(4) a:hover > span,
#products article > :nth-child(4) a:focus-visible > span { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-ink); }
#products article > :nth-child(4) a:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; border-radius: 6px; }

/* هاور (دسکتاپ) یا لمس (موبایل): همه اطلاعات محو و تصویر کامل دیده می‌شود */
#products article.is-peek > .product-scrim,
#products article.is-peek > :nth-child(3),
#products article.is-peek > :nth-child(4) { opacity: 0; pointer-events: none; }
#products article.is-peek > :nth-child(3) { translate: 0 -10px; }
#products article.is-peek > :nth-child(4) { translate: 0 14px; }
#products article.is-peek > img { transform: scale(1.06); }
@media (hover: hover) {
  #products article:hover > .product-scrim,
  #products article:hover > :nth-child(3),
  #products article:hover > :nth-child(4) { opacity: 0; pointer-events: none; }
  #products article:hover > :nth-child(3) { translate: 0 -10px; }
  #products article:hover > :nth-child(4) { translate: 0 14px; }
  #products article:hover > img { transform: scale(1.06); }
}

@media (max-width: 575.98px) {
  #products article { aspect-ratio: auto; min-height: 31rem; border-radius: 24px; }
  #products article > :nth-child(3) { padding: 14px 14px 0; }
  #products article > :nth-child(4) { padding: 0 18px 18px; }
  #products article > :nth-child(4) h3 { font-size: 1.3rem; }
}

/* بخش «گرید / مسیر خرید»: کارت‌های شیشه‌ای روی زمینه‌ی تیره‌ی رنگی */
.hx.dk,
.hx.dk2 { overflow: hidden; isolation: isolate; }
.hx.dk::before,
.hx.dk2::before {
  content: "";
  position: absolute;
  inset: -15% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 18%, rgba(244, 200, 110, .3), transparent 26%),
    radial-gradient(circle at 90% 82%, rgba(95, 195, 212, .34), transparent 30%),
    radial-gradient(circle at 62% 8%, rgba(23, 101, 117, .65), transparent 34%);
}
html .hx .cd.gl {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .26);
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 40px rgba(2, 16, 20, .3), inset 0 1px 0 rgba(255, 255, 255, .38);
}
html .hx .cd.gl:hover {
  border-color: rgba(244, 200, 110, .6);
  background: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08));
}
html .hx .cd.gl h3 { color: #fff; }

/* ==========================================================================
   ۵) آیکن‌های Font Awesome در فوتر / دکمه‌ها
   ========================================================================== */
.site-social .fa { font-size: 18px; line-height: 1; }
.site-contact-ic { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .08); color: var(--ui-accent); }
.site-contact-ic .fa { font-size: 16px; }
.site-top .fa { font-size: 18px; }
.site-chat-attach .fa { font-size: 18px; }

/* ==========================================================================
   ۶) واکنش‌گرایی کامل
   ========================================================================== */
html, body { max-width: 100%; overflow-x: clip; }
#root { max-width: 100%; }

/* شبکه‌ی بخش‌های اضافه (site-sections.js) */
@media (max-width: 991.98px) {
  html .hx .g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .hx .g.st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .hx .cat { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  html .hxs .in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .hx .hd { align-items: flex-start; }
}
@media (max-width: 575.98px) {
  html .hx { padding: 48px 16px; }
  html .hx .g,
  html .hx .g.st,
  html .hxs .in { grid-template-columns: minmax(0, 1fr); }
  html .hx .cd { padding: 22px; }
  html .hx .cu { min-height: 0; padding: 24px; }
  html .hx .cat img { height: 200px; }
  html .hx .cat h3 { font-size: 22px; }
  html .hx table { font-size: 13px; }
  html .hx th, html .hx td { padding: 12px 14px; white-space: nowrap; }
}

/* هدر موبایل + فاصله‌ی محتوای هیرو از هدر شناور */
@media (max-width: 1023.98px) {
  .site-curved-header > div:first-child { padding-inline: 16px; }
  html .site-hero-adjusted .site-hero-content { padding-top: 112px !important; }
}
@media (max-width: 575.98px) {
  .site-footer-bottom span { display: block; }
  .site-footer-grid { gap: 26px; }
  .site-map { height: 200px; }
}

/* احترام به کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .site-menu-item,
  .site-burger span { transition-duration: .01s !important; transition-delay: 0s !important; }
  .site-hit { animation: none; outline-color: rgba(244, 200, 110, .9); }
}


/* ==========================================================================
   ۷) هیرو — موبایل و تبلت (زیر ۱۰۲۴): تک‌ستون، وسط‌چین، استاندارد
   ========================================================================== */
@media (max-width: 1023.98px) {
  html .site-hero-adjusted .site-hero-content {
    /* یک قانون !important لایه‌دار روی .px-5 پدینگ را ۴۸px نگه می‌دارد؛ با عرض/مارجین خنثی می‌شود */
    width: calc(100% + 56px) !important;
    max-width: none !important;
    min-height: 0 !important;
    position: relative !important;
    inset-inline-start: -28px !important;
    padding-top: 118px !important;
    padding-bottom: 56px !important;
    row-gap: 36px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch;
  }
  .site-hero-content > div:first-child { max-width: none !important; width: 100%; text-align: center; }

  /* برچسب بالای عنوان */
  .site-hero-content > div:first-child > div:first-child { justify-content: center; margin-bottom: 18px !important; gap: 10px; flex-wrap: wrap; }
  .site-hero-content > div:first-child > div:first-child > span:nth-child(2) { display: none; }

  /* عنوان */
  html .site-hero-title { font-size: clamp(2rem, 8.6vw, 2.9rem) !important; line-height: 1.4 !important; text-align: center; }
  html .site-hero-title span { display: inline-block; }

  /* توضیح: بدون نوار رنگی کناری، وسط‌چین */
  .site-hero-content > div:first-child > div:nth-child(3) { max-width: none; margin-top: 20px !important; justify-content: center; }
  .site-hero-content > div:first-child > div:nth-child(3) > span:first-child { display: none; }
  .site-hero-content > div:first-child > div:nth-child(3) p { font-size: .98rem; line-height: 2.1; text-align: center; max-width: 34rem; margin-inline: auto; }

  /* دکمه‌ها: تمام‌عرض زیر هم */
  .site-hero-content > div:first-child > div:nth-child(4) { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px !important; }
  .site-hero-content > div:first-child > div:nth-child(4) > a:first-child { justify-content: space-between; width: 100%; padding-inline-end: 8px; padding-inline-start: 22px; min-height: 56px; font-size: .95rem; }
  .site-hero-content > div:first-child > div:nth-child(4) > a:last-child { justify-content: center; width: 100%; min-height: 48px; }

  /* آمار: ۳ ستون مساوی و وسط‌چین */
  .site-hero-content > div:first-child > div:nth-child(5) { max-width: none; margin-top: 28px !important; padding-block: 18px; }
  .site-hero-content > div:first-child > div:nth-child(5) > div { padding-inline: 6px; text-align: center; }
  .site-hero-content > div:first-child > div:nth-child(5) > div:first-child { padding-inline-start: 6px; }
  .site-hero-content > div:first-child > div:nth-child(5) strong { font-size: 1.3rem; }
  .site-hero-content > div:first-child > div:nth-child(5) span { font-size: 11px; color: rgba(255, 255, 255, .6); }

  /* اسلایدر: کارت تمام‌عرض + دو نشان زیر آن */
  html .site-hero-adjusted .site-hero-slider-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100% !important;
    max-width: 640px !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }
  .site-hero-slider-wrap > .absolute.rounded-full,
  .site-hero-slider-wrap > [class*="-inset-5"] { display: none !important; }
  html .site-hero-adjusted .site-hero-slider-card {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3.6 !important;
    border-radius: 24px !important;
    min-height: 0 !important;
  }
  .site-hero-slider-card > div[class*="bottom-0"] { padding: 18px 18px 16px !important; }
  .site-hero-slider-card [class*="min-h-24"] { min-height: 4.6rem; }
  .site-hero-slider-card [class*="min-h-24"] p:first-child { font-size: 11px; }
  .site-hero-slider-card [class*="min-h-24"] p + p { font-size: 1.2rem !important; line-height: 1.7 !important; margin-top: 4px; }
  .site-hero-slider-card > div[class*="right-6"] { right: 14px !important; top: 14px !important; }
  /* نشان‌های شناور: از حالت absolute خارج و زیر کارت ردیف می‌شوند */
  .site-hero-slider-wrap > div[class*="-left-3"],
  .site-hero-slider-wrap > div[class*="-bottom-2"] {
    position: static !important;
    inset: auto !important;
    width: 100%;
    margin: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(3, 20, 24, .22) !important;
  }
  .site-hero-slider-wrap > div[class*="-left-3"] strong,
  .site-hero-slider-wrap > div[class*="-bottom-2"] strong { font-size: 13px; line-height: 1.6; }
  .site-hero-slider-wrap > div[class*="-left-3"] small,
  .site-hero-slider-wrap > div[class*="-bottom-2"] small { display: block; font-size: 10px; line-height: 1.6; }
  .site-hero-slider-wrap > div[class*="-left-3"] > span:first-child,
  .site-hero-slider-wrap > div[class*="-bottom-2"] > span:first-child { flex: 0 0 38px; width: 38px; height: 38px; }
  .site-hero-slider-wrap > div[class*="-right-4"] { display: none !important; }

  html .site-hero-adjusted .site-scroll-cue { display: none !important; }
}
@media (max-width: 380px) {
  .site-hero-slider-wrap > div[class*="-left-3"] small,
  .site-hero-slider-wrap > div[class*="-bottom-2"] small { display: none; }
}


/* موبایل: کانتینر بخش‌ها ۴۸px پدینگ اجباری دارد؛ به ۲۰px می‌رسد تا کارت‌ها عریض و هم‌تراز شوند */
@media (max-width: 767.98px) {
  #products > div.max-w-7xl,
  #industries > div.max-w-7xl,
  #about > div.max-w-7xl {
    position: relative;
    inset-inline-start: -28px;
    width: calc(100% + 56px);
    max-width: none;
  }
}


/* ==========================================================================
   ۸) هیرو موبایل: ترتیب جدید  (عنوان ← اسلایدر ← دکمه‌ها ← آمار)
   ========================================================================== */
@media (max-width: 1023.98px) {
  html .site-hero-adjusted .site-hero-content { row-gap: 0 !important; }
  .site-hero-content > div:first-child { display: contents !important; }
  .site-hero-content > div:first-child > * { grid-column: 1; min-width: 0; }
  .site-hero-content > div:first-child > div:nth-child(1) { order: 1; }
  .site-hero-content > div:first-child > h1 { order: 2; }
  .site-hero-content > div:first-child > div:nth-child(3) { order: 3; }
  .site-hero-content > .site-hero-slider-wrap { order: 4; margin-top: 30px !important; }
  .site-hero-content > div:first-child > div:nth-child(4) { order: 5; margin-top: 26px !important; }
  .site-hero-content > div:first-child > div:nth-child(5) { order: 6; margin-top: 22px !important; }
}

/* ==========================================================================
   ۹) اسلایدر افقی خودکار (Swiper 11) برای گروه‌های دو‌تایی و بیشتر در موبایل
   ========================================================================== */
.site-swiper { display: block !important; position: relative; overflow: hidden; width: 100%; max-width: 100%; margin-inline: 0 !important; padding: 6px 2px 46px !important; }
.site-swiper > .swiper-wrapper { display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; }
.site-swiper > .swiper-wrapper > .swiper-slide { height: auto; width: auto; flex-shrink: 0; min-width: 0; padding-inline: 0 !important; box-sizing: border-box; }
.site-swiper > .swiper-wrapper > .swiper-slide > * { height: 100%; margin: 0 !important; }
.site-swiper > .swiper-wrapper > .swiper-slide > article { width: 100%; }
.site-swiper > .swiper-wrapper > .swiper-slide > .cd,
.site-swiper > .swiper-wrapper > .swiper-slide > .cu { min-height: 100%; }
.site-swiper .site-sw-dots { position: absolute; inset-inline: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; z-index: 5; }
.site-swiper .site-sw-dots .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important; border-radius: 99px; background: rgba(12, 51, 59, .28); opacity: 1; transition: width .35s var(--ui-ease), background .3s; }
.site-swiper .site-sw-dots .swiper-pagination-bullet-active { width: 26px; background: var(--ui-brand); }
.hx.dk .site-sw-dots .swiper-pagination-bullet,
.hx.dk2 .site-sw-dots .swiper-pagination-bullet { background: rgba(255, 255, 255, .38); }
.hx.dk .site-sw-dots .swiper-pagination-bullet-active,
.hx.dk2 .site-sw-dots .swiper-pagination-bullet-active { background: var(--ui-accent); }
/* خط تزئینی بخش «مسیر همکاری» در اسلایدر لازم نیست */
.site-swiper > .absolute { display: none !important; }
/* ردیف خدمات (۴ آیتم) داخل اسلایدر */
.hxs .in.site-swiper { display: block !important; padding-bottom: 40px !important; }
.hxs .in.site-swiper .t { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 6px 20px rgba(12, 51, 59, .06); height: 100%; }


/* ==========================================================================
   ۱۰) رفع پرش/لرزش اسکرول + هیرو فشرده‌تر و فاصله‌دار (موبایل)
   ========================================================================== */
/* Scroll anchoring باعث تنظیم مداوم موقعیت اسکرول و «پرپر زدن» صفحه می‌شد */
html, body, #root, main, section { overflow-anchor: none; }
.site-swiper, .site-swiper * { overflow-anchor: none; }
.site-swiper { touch-action: pan-y; contain: layout paint; }

@media (max-width: 767.98px) {
  /* بلور سنگین (backdrop-filter) روی موبایل پرش و افت فریم ایجاد می‌کرد */
  #products article > .product-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html .hx .cd.gl { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .12); }
  .site-curved-header, .site-search-form, .site-sbox-form { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hx .rv { transition-duration: .4s; }
  .site-chat-bubble:before, .site-chat-bubble:after { animation: none; }
  .site-chat-wrap { left: 14px; bottom: 14px; }
  .site-chat-bubble { width: 52px; height: 52px; border-radius: 18px; }
}

@media (max-width: 1023.98px) {
  html .site-hero-adjusted .site-hero-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    padding-top: 104px !important;
    padding-bottom: 48px !important;
  }
  .site-hero-content > div:first-child > * { grid-column: 1 / -1; }
  /* اسلایدر و نشان‌ها هم‌سطح بقیه‌ی آیتم‌های گرید می‌شوند تا ترتیب دلخواه شود */
  html .site-hero-adjusted .site-hero-slider-wrap { display: contents !important; }
  html .site-hero-adjusted .site-hero-slider-card { grid-column: 1 / -1; order: 4; margin-top: 26px !important; aspect-ratio: 16 / 10 !important; }
  .site-hero-content > div:first-child > div:nth-child(4) { order: 5; margin-top: 18px !important; }
  .site-hero-slider-wrap > div[class*="-left-3"] { order: 6; margin-top: 16px !important; }
  .site-hero-slider-wrap > div[class*="-bottom-2"] { order: 6; margin-top: 16px !important; }
  .site-hero-content > div:first-child > div:nth-child(5) { order: 7; margin-top: 22px !important; }
  /* فاصله‌ی متن‌ها از هم */
  .site-hero-content > div:first-child > h1 { margin-top: 0 !important; }
  .site-hero-content > div:first-child > div:nth-child(3) { margin-top: 18px !important; }
  .site-hero-content > div:first-child > div:nth-child(3) p span.block { margin-top: 8px !important; }
  .site-hero-slider-card [class*="min-h-24"] { min-height: 4rem; }
  .site-hero-slider-card > div[class*="bottom-0"] { padding: 14px 16px 12px !important; }
  .site-hero-slider-card > div[class*="bottom-0"] > div:last-child { margin-top: 10px !important; }
}


/* ==========================================================================
   ۱۱) بخش‌ها در موبایل: کارت‌های کوچک و کنار هم (بدون اسلایدر)
   ========================================================================== */
@media (max-width: 767.98px) {
  /* --- گرید ۲ ستونه‌ی فشرده (دانشنامه، گریدها، مسیر خرید) --- */
  html body .hx .g:not(.site-swiper) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body .hx .g:not(.site-swiper) .cd { padding: 14px 12px; border-radius: 16px; }
  html body .hx .g:not(.site-swiper) .cd small { font-size: 10px; }
  html body .hx .g:not(.site-swiper) .cd h3 { font-size: 14px; line-height: 1.7; margin: 4px 0 2px; }
  html body .hx .g:not(.site-swiper) .cd p { font-size: 11.5px; line-height: 1.85; margin: 0; }
  html body .hx .g:not(.site-swiper) .cd a { margin-top: 8px; font-size: 11.5px; }
  html body .hx .g:not(.site-swiper) .cd:hover { transform: none; }
  /* ردیف آخرِ تک (تعداد فرد) تمام‌عرض می‌شود */
  html body .hx .g:not(.site-swiper) > .cd:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* دانشنامه: ۳ مقاله — اولی تمام‌عرض، دو تای بعدی کنار هم */
  html body #knowledge .g > .cd:first-child { grid-column: 1 / -1; }
  html body #knowledge .g > .cd:last-child:nth-child(odd) { grid-column: auto; }
  /* مسیر خرید: شماره‌ی دایره‌ای کوچک‌تر */
  html body .hx .st .cd:before { width: 26px; height: 26px; font-size: 12px; margin-bottom: 6px; }
  /* همکاری: دو کارت زیر هم ولی فشرده */
  html body #partner .g { grid-template-columns: minmax(0, 1fr); }
  html body #partner .g .cd { padding: 18px 16px; }
  html body #partner .g .cd h3 { font-size: 16px; }
  html body #partner .g .cd p { font-size: 12.5px; }
  html body #partner .g .cd .bt { padding: 9px 16px; font-size: 12.5px; }

  /* --- هدر بخش‌ها --- */
  html body .hx .hd { margin-bottom: 22px; gap: 10px; }
  html body .hx .hd h2 { font-size: 24px; line-height: 1.55; }
  html body .hx .hd p { font-size: 12.5px; line-height: 1.95; max-width: none; }
  html body .hx { padding: 40px 16px; }

  /* --- جدول آزمایشگاه: فشرده و بدون اسکرول افقی --- */
  html body .hx .tw { overflow-x: visible; }
  html body .hx table { font-size: 11px; border-radius: 14px; table-layout: fixed; }
  html body .hx th, html body .hx td { padding: 9px 6px; white-space: normal; line-height: 1.7; word-break: break-word; }
  html body .hx th { font-size: 10.5px; }
  html body .hx td:first-child { font-size: 11px; }

  /* --- صنایع: ۴ آیتم ۲×۲ فشرده --- */
  #industries .grid.gap-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 18px !important; }
  #industries .grid.gap-4 > * { padding: 12px !important; border-radius: 16px !important; }
  #industries .grid.gap-4 h3 { font-size: 13.5px !important; line-height: 1.7 !important; margin-top: 8px !important; }
  #industries .grid.gap-4 p { font-size: 11.5px !important; line-height: 1.85 !important; margin-top: 4px !important; }
  #industries .grid.gap-4 [class*="size-1"] { width: 34px !important; height: 34px !important; }
  #industries section, #industries { padding-block: 44px !important; }

  /* --- مسیر همکاری (about): ۵ گام ۲ ستونه، آخری تمام‌عرض --- */
  #about .grid.gap-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 28px !important; }
  #about .grid.gap-6 > .absolute { display: none !important; }
  #about .grid.gap-6 > *:not(.absolute) { padding: 14px 12px !important; border-radius: 16px !important; }
  #about .grid.gap-6 > *:not(.absolute):last-child:nth-child(even) { grid-column: 1 / -1; }
  #about .grid.gap-6 h3 { font-size: 14px !important; line-height: 1.7 !important; margin-top: 6px !important; }
  #about .grid.gap-6 p { font-size: 11.5px !important; line-height: 1.85 !important; margin-top: 3px !important; }
  #about .grid.gap-6 [class*="size-1"], #about .grid.gap-6 [class*="size-9"] { width: 36px !important; height: 36px !important; }
  #about, #industries { padding-block: 44px !important; }
}

@media (max-width: 767.98px) {
  html body .hx td:first-child { font-size: 10px; word-break: normal; overflow-wrap: normal; hyphens: none; }
  html body .hx th, html body .hx td { word-break: normal; overflow-wrap: break-word; }
}

/* عنوان بخش‌ها: دو بخش عنوان در یک خط (بدون شکستن به خط بعد) */
html body .hx .hd h2 br { display: none; }
html body .hx .hd h2 i { display: inline; margin-inline-start: .3em; }

/* آیکون‌های نوار اعتماد (Font Awesome 4.7) */
.hxs .t > i.fa { color: #176575; font-size: 20px; line-height: 1; }

/* ==========================================================================
   ۶) کارت‌های محصول — طراحی جمع‌وجور و مدرن
   متن‌ها داخل ناحیه‌ی تیره‌ی پایین کارت قرار می‌گیرند (بدون بلور سنگین)
   ========================================================================== */
html #products article {
  aspect-ratio: 5 / 6;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 26px;
  box-shadow: 0 14px 34px rgba(7, 33, 39, .22);
  transition: transform .35s var(--ui-ease);
  contain: layout paint;
}
html #products article:hover { box-shadow: 0 14px 34px rgba(7, 33, 39, .22); }
html #products article > img { transition: transform .6s var(--ui-ease); }

/* ناحیه‌ی تیره: گرادیان غلیظ پشت متن، محو نرم به سمت بالا */
html #products article > .product-scrim {
  top: auto; bottom: 0; height: 66%;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(to top,
    rgba(4, 22, 27, .98) 0%,
    rgba(4, 22, 27, .95) 42%,
    rgba(4, 22, 27, .72) 68%,
    rgba(4, 22, 27, .28) 88%,
    rgba(4, 22, 27, 0) 100%);
}

/* ردیف بالا: آیکن کوچک‌تر + شماره */
html #products article > :nth-child(3) { padding: 14px 14px 0; }
html #products article > :nth-child(3) > span:first-child {
  width: 40px; height: 40px; border-radius: 13px;
  background: rgba(7, 33, 39, .55);
  border: 1px solid rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html #products article > :nth-child(3) > span:first-child svg { width: 20px; height: 20px; }
html #products article > :nth-child(3) > span:last-child { font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .85); }

/* بلوک متن: فشرده */
html #products article > :nth-child(4) { padding: 0 20px 18px; }
html #products article > :nth-child(4) > div:first-child { flex-wrap: nowrap; gap: 6px; overflow: hidden; }
html #products article > :nth-child(4) > div:first-child > span {
  padding: 3px 10px; font-size: 10.5px; line-height: 1.7; white-space: nowrap;
  border: 0; background: rgba(255, 255, 255, .13); color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html #products article > :nth-child(4) h3 {
  margin-top: 10px !important; font-size: 1.25rem; font-weight: 800; line-height: 1.5; text-shadow: none;
}
html #products article > :nth-child(4) h3::before {
  content: ""; display: block; width: 28px; height: 3px; margin-bottom: 6px; border-radius: 3px; background: var(--ui-accent);
}
html #products article > :nth-child(4) p {
  margin-top: 2px !important; font-size: .8rem; line-height: 1.8; color: rgba(255, 255, 255, .8) !important; text-shadow: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
html #products article > :nth-child(4) a {
  margin-top: 12px !important; padding-top: 0; border-top: 0;
  font-size: .85rem; font-weight: 700; color: var(--ui-accent) !important;
}
html #products article > :nth-child(4) a > span {
  width: 32px; height: 32px;
  border-color: rgba(244, 200, 110, .55); background: rgba(244, 200, 110, .14); color: var(--ui-accent) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

@media (max-width: 575.98px) {
  html #products article { aspect-ratio: auto; min-height: 27rem; border-radius: 22px; }
  html #products article > :nth-child(4) { padding: 0 16px 16px; }
  html #products article > :nth-child(4) h3 { font-size: 1.2rem; }
}

/* ==========================================================================
   ۷) بهینه‌سازی سرعت: حذف بلورهای سنگین، کاهش هزینه‌ی رندر
   ========================================================================== */
/* backdrop-filter در هر فریمِ اسکرول دوباره محاسبه می‌شود؛ جز منوی تمام‌صفحه و چت (فقط هنگام باز بودن) حذف شد */
header, .site-curved-header, .site-search-form, .site-sbox-form, .site-language-menu,
[class*="backdrop-blur"], .product-scrim, .cd.gl, .hx .cd, .hxs, .site-hero-adjusted *,
#root section *, #root footer *, .site-footer * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html .hx .cd.gl { background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); }
.site-curved-header { background-color: rgba(244, 248, 247, .96); }
.site-curved-header:not(.site-header-scrolled) { background-color: transparent; }

/* انیمیشن‌های بی‌پایان هیرو وقتی از دید خارج شد متوقف شوند */
html.hero-off .site-hero-adjusted *,
html.hero-off .site-hero-adjusted *::before,
html.hero-off .site-hero-adjusted *::after { animation-play-state: paused !important; }

/* انیمیشن‌های سنگین را برای کاربرانی که کاهش حرکت خواسته‌اند خاموش کن */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

html #products article > :nth-child(4) a:hover > span,
html #products article > :nth-child(4) a:focus-visible > span { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-ink) !important; }

/* هیرو دسکتاپ — تمام‌صفحه (ارتفاع دقیق یک صفحه‌ی نمایش) */
@media (min-width: 1024px) {
  html #root main > section:first-child {
    min-height: calc(100vh - 38px) !important;
    min-height: calc(100svh - 38px) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  html #root main > section:first-child > div.grid {
    min-height: calc(100vh - 38px) !important;
    min-height: calc(100svh - 38px) !important;
    padding-top: 128px !important;
    padding-bottom: 72px !important;
    align-items: center !important;
    width: 100%;
  }
  /* تصاویر داخل باکس هیرو بزرگ‌تر */
  html #root main > section:first-child > div.grid .site-hero-slider-card,
  html #root main > section:first-child > div.grid [class*="aspect-[4/5]"] {
    aspect-ratio: 1.76 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(44vh, 430px) !important;
  }
}

/* ==========================================================================
   ۸) جست‌وجوی هدر — طراحی شیشه‌ای (Glass) لوکس
   ========================================================================== */
html .site-sbox-form {
  position: relative;
  height: 48px;
  padding-inline: 5px 6px;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%);
  box-shadow:
    0 12px 32px rgba(3, 20, 24, .22),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
  transition: border-color .3s, box-shadow .3s, background .3s, transform .3s var(--ui-ease);
}
/* درخشش ظریف لبه‌ی بالا */
html .site-sbox-form::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 38%);
  opacity: .55;
  transition: opacity .3s;
}
html .site-sbox-form:hover { border-color: rgba(255, 255, 255, .6); transform: translateY(-1px); }
html .site-sbox-form:focus-within {
  border-color: var(--ui-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .14) 100%);
  box-shadow:
    0 0 0 4px rgba(244, 200, 110, .2),
    0 16px 38px rgba(3, 20, 24, .3),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}
html .site-sbox-form:focus-within::after { opacity: .9; }

/* دکمه‌ی آیکن */
html .site-sbox-form .input-group-text {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fbe3a3 0%, #f4c86e 55%, #e6ae45 100%);
  color: #0c333b;
  font-size: 15px;
  box-shadow: 0 6px 14px rgba(230, 174, 69, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .35s var(--ui-ease), box-shadow .3s;
}
html .site-sbox-form:focus-within .input-group-text { transform: scale(1.06) rotate(-8deg); }

html .site-sbox-form .site-sbox-input.form-control {
  position: relative;
  z-index: 1;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1px;
}
html .site-sbox-form .site-sbox-input.form-control::placeholder { color: rgba(255, 255, 255, .85); font-weight: 500; }
html .site-sbox-clear { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; }

/* روی هدر سفید (بعد از اسکرول + صفحات داخلی) */
html .site-curved-header.site-header-scrolled .site-sbox-form {
  border-color: rgba(23, 101, 117, .2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(232, 242, 241, .85) 100%);
  box-shadow:
    0 8px 22px rgba(12, 51, 59, .1),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(23, 101, 117, .06);
}
html .site-curved-header.site-header-scrolled .site-sbox-form::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 45%);
  opacity: .7;
}
html .site-curved-header.site-header-scrolled .site-sbox-form:hover { border-color: rgba(23, 101, 117, .4); }
html .site-curved-header.site-header-scrolled .site-sbox-form:focus-within {
  border-color: #176575;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(23, 101, 117, .14), 0 14px 30px rgba(12, 51, 59, .16), inset 0 1px 0 #fff;
}
html .site-curved-header.site-header-scrolled .site-sbox-form .input-group-text {
  background: linear-gradient(145deg, #1d7f92 0%, #176575 60%, #0f4c59 100%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(23, 101, 117, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html .site-curved-header.site-header-scrolled .site-sbox-form .site-sbox-input.form-control::placeholder { color: rgba(12, 51, 59, .55); }

/* بلور فقط روی دسکتاپ (روی موبایل برای سرعت خاموش می‌ماند) */
@media (min-width: 768px) {
  html .site-sbox .site-sbox-form {
    -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
    backdrop-filter: blur(18px) saturate(170%) !important;
  }
  html .site-curved-header.site-header-scrolled .site-sbox .site-sbox-form {
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
  }
}

/* پنل نتایج */
html .site-sbox-results {
  top: calc(100% + 12px);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(14, 62, 73, .9) 0%, rgba(7, 33, 40, .94) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 28px 64px rgba(2, 16, 20, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
html .site-sbox-label { padding: 8px 14px 6px; letter-spacing: .3px; color: rgba(244, 200, 110, .8); }
html .site-sbox-item {
  position: relative;
  padding: 11px 14px;
  border-radius: 15px;
  transition: background .2s, transform .2s var(--ui-ease);
}
html .site-sbox-item .fa {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(244, 200, 110, .14);
  opacity: 1;
}
html .site-sbox-item.is-active,
html .site-sbox-item:hover {
  background: linear-gradient(90deg, rgba(244, 200, 110, .2), rgba(244, 200, 110, .06));
  transform: translateX(-2px);
}
html .site-sbox-item .grp { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .1); }

/* کارت‌های «راهکارهایی برای یک تولید مطمئن‌تر»: هاور و کلیک */
#products article.group{cursor:pointer;isolation:isolate}
#products article.group:focus-within{outline:3px solid #f4c86e;outline-offset:3px}
#products article.group:hover>div,#products article.group:hover>.product-scrim{opacity:1!important;transform:none!important}
#products article.group:hover>.product-scrim{background:linear-gradient(to top,rgba(12,51,59,.96),rgba(12,51,59,.35) 70%,transparent)}
#products article.group>div:last-of-type a>span{transition:transform .3s,background .3s,color .3s}
#products article.group:hover>div:last-of-type a>span{transform:translateX(-6px);background:#f4c86e;color:#0c333b;border-color:#f4c86e}
#products article.group:hover h3{color:#f4c86e}
#products article.group h3{transition:color .3s}
@media(hover:none){#products article.group:active{transform:scale(.99)}}

/* ---------- دکمه‌های هدر: یکدست، مستقل از زبان و جهت صفحه ---------- */
#root header .hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
#root header .hdr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:44px;min-width:44px;padding:0 20px;border:1px solid #176575;border-radius:12px;font:inherit;font-size:14px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s}
#root header .hdr-btn--primary{background:#176575;color:#fff}
#root header .hdr-btn--primary:hover{background:#0c333b;border-color:#0c333b;color:#fff}
#root header .hdr-btn--outline{background:transparent;color:#176575}
#root header .hdr-btn--outline:hover{background:#176575;color:#fff}
#root header .hdr-btn--icon{padding:0;width:44px}
#root header .hdr-btn:focus-visible{outline:2px solid #f4c86e;outline-offset:2px}
#root header .hdr-icon{width:20px;height:20px;flex:none}
#root header .hdr-arrow{width:16px;height:16px;flex:none}
html[dir=rtl] #root header .hdr-arrow{transform:scaleX(-1)}
#root header .hdr-desktop{display:none}
#root header .hdr-toggle{display:inline-flex}
@media(min-width:1024px){#root header .hdr-desktop{display:inline-flex}#root header .hdr-toggle{display:none}}
/* منوی اصلی: بدون شکستن خط و با فاصله‌ی انعطاف‌پذیر برای متن‌های بلندتر */
#root header > div > nav{gap:clamp(10px,1.5vw,24px);min-width:0}
#root header nav .nav-link{white-space:nowrap}
@media(min-width:1024px) and (max-width:1279px){#root header .hdr-btn{padding:0 14px;font-size:13px}#root header .hdr-actions{gap:8px}}