/* =========================================================================
   EDIUSFA — HEADER SYSTEM  ·  LAYER 3 (کانانونی)  ·  v1.0
   کپی وفادار از download/ediusfa-header-system.html با یک تطبیق تولیدی:
   Container Queries به Media Queries تبدیل شده‌اند — در صفحهٔ واقعی ظرفِ
   هدر هم‌عرض ویوپورت است و پوشرهای fixed باید به ویوپورت لنگر بمانند.
   منبع: ediusfa-header-system.html (لایه ۳) + استایل‌های مکمل مینی‌کارت.
   ========================================================================= */

/* LAYER 3 — HEADER SYSTEM (لایهٔ کانونی جدید)
   پیشوند hf- فقط ساختار و چیدمان هدر است؛ ظاهر اتم‌ها از Layer 2 ارث می‌رسد.
   هدر به «عرض ظرف خودش» پاسخ می‌دهد (Container Queries) — در صفحات واقعی
   ظرف، پوشرِ هم‌عرض ویوپورت است؛ در همین سند، صحنه‌های نمایش.
   ========================================================================= */

/* ---- root & container context -------------------------------------------- */
.hf-ctx{container-type:inline-size;container-name:hfctx}
.hf{
  position:relative;z-index:20;
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--t-med);
}
/* بلور فقط روی نوار اصلی — backdrop-filter روی ریشه، لایه‌های کشویی را
   در محفظهٔ هدر زندانی می‌کند (containing block) */
.hf-bar{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
}
.hf.is-stuck{box-shadow:var(--sh-sm)}
.hf-inner{
  display:flex;align-items:center;gap:18px;
  height:var(--header-h);
  max-width:var(--container);margin-inline:auto;padding-inline:24px;
  position:relative;
}

/* ---- utility strip (فقط کانسپت A) ------------------------------------------ */
.hf-utility{
  border-bottom:1px solid var(--border);
  background:var(--paper);
  height:34px;overflow:hidden;
  transition:height var(--t-med),opacity var(--t-med);
}
.hf.is-stuck .hf-utility{height:0;opacity:0;border-bottom-color:transparent}
.hf-utility-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:34px;max-width:var(--container);margin-inline:auto;padding-inline:24px;
}
.hf-utility-nav{display:flex;align-items:center;gap:2px}
.hf-utility a{
  font-size:var(--fs-2xs);font-weight:600;color:var(--text-subtle);
  padding:4px 9px;border-radius:var(--r-xs);white-space:nowrap;
  transition:color var(--t-fast),background var(--t-fast);
}
.hf-utility a:hover{color:var(--primary-ink);background:var(--surface-muted)}
.hf-utility-note{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-2xs);font-weight:700;color:var(--primary-ink);
}
.hf-utility-note .icon-sm{width:13px;height:13px}

/* ---- brand ------------------------------------------------------------------ */
.hf-brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.hf-brand-mark{
  width:38px;height:38px;border-radius:11px;
  background:var(--text);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;letter-spacing:-.02em;
  transition:width var(--t-med),height var(--t-med),border-radius var(--t-med);
}
.hf-brand-name{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.hf-brand-name small{
  display:block;font-size:10.5px;font-weight:500;color:var(--text-subtle);
  letter-spacing:.01em;line-height:1.2;margin-top:-2px;
}
/* Custom logo (Customizer → site identity): constrain the uploaded image to
 * the bar geometry — unconstrained it renders at natural size (~3× the bar),
 * overflows into the utility strip and reads as a broken header. */
.hf-brand .custom-logo-link{
  display:inline-flex;align-items:center;line-height:0;
  max-width:min(42vw,220px);
}
.hf-brand .custom-logo-link img{
  display:block;width:auto;height:auto;
  max-height:var(--logo-cap,38px);max-width:100%;object-fit:contain;
}
.hf.is-stuck .hf-brand .custom-logo-link img{max-height:34px}
.hf--compact .hf-brand .custom-logo-link img{max-height:32px}

/* ---- primary nav + mega triggers ---------------------------------------------- */
.hf-nav{display:flex;align-items:center;gap:2px}
.hf-item{position:relative}
li.hf-item--mega{position:static} /* پنل مگا به نوار هدر لنگر می‌شود، نه به آیتم */
.hf-item.is-open > .nav-link{color:var(--primary-ink);background:var(--primary-soft)}
.hf-item.is-open > .nav-link .chev{transform:rotate(180deg)}

/* ---- search slots --------------------------------------------------------------- */
.hf-search{position:relative;flex:1;min-width:0;max-width:420px;margin-inline-start:auto}
.hf-search .search-field{width:100%}
.hf-search--xl{max-width:none}
.hf-search--xl .search-field{
  height:50px;background:var(--surface);
  border-color:var(--border-strong);box-shadow:var(--sh-xs)}
.hf-search--xl .search-field:focus-within{border-color:var(--primary)}
.hf-search--xl .search-field input{font-size:var(--fs-base)}
/* search-active state — پنل از فوکوس/تایپ باز می‌شود؛ پهن‌تر از فیلد و هم‌مرکز با آن */
.hf-search .search-panel{
  position:absolute;top:calc(100% + 10px);inset-inline:auto;
  inset-inline-start:50%;width:min(680px,calc(100vw - 48px));z-index:60;
  opacity:0;visibility:hidden;transform:translateX(50%) translateY(6px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility 0s var(--t-fast);
}
.hf-search:focus-within .search-panel,
.hf-search.is-open .search-panel{opacity:1;visibility:visible;transform:translateX(50%) translateY(0);transition-delay:0s}

/* ---- action cluster ------------------------------------------------------------------ */
.hf-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.hf-pop{position:relative}
.hf-acct-btn,.hf-cart-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 9px;border-radius:var(--r-sm);
  transition:background var(--t-fast);
}
.hf-acct-btn:hover,.hf-cart-btn:hover{background:var(--surface-muted)}
.hf-acct-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);white-space:nowrap}
.hf-acct-btn .chev{width:14px;height:14px;color:var(--text-subtle);transition:transform var(--t-fast)}
.hf-pop.is-open > .hf-acct-btn,.hf-pop.is-open > .hf-cart-btn{background:var(--surface-muted)}
.hf-pop.is-open > .hf-acct-btn .chev{transform:rotate(180deg)}
.hf-acct-btn .r-av{width:34px;height:34px;font-size:13px}

.hf-cart-meta{display:flex;flex-direction:column;line-height:1.35;text-align:start}
.hf-cart-meta span{font-size:10.5px;font-weight:600;color:var(--text-subtle)}
.hf-cart-meta b{font-size:12.5px;font-weight:800;color:var(--secondary);white-space:nowrap}

/* پاپ‌اورهای حساب و سبد */
.hf-pop-panel{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility 0s var(--t-fast);
}
.hf-pop.is-open .hf-pop-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hf-pop .account-menu{width:264px}
.hf-pop .mini-cart{width:min(380px,calc(100vw - 32px))}

/* ---- mega menu --------------------------------------------------------------------------- */
.hf-mega{
  position:absolute;top:100%;inset-inline:0;z-index:55;
  background:var(--surface);
  border:1px solid var(--border);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility 0s var(--t-fast);
}
.hf-item.is-open > .hf-mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hf-mega-panel{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.hf-mgrid{
  display:grid;grid-template-columns:1fr 1fr 1fr 300px;gap:36px;
  padding:26px 0 20px;
}
.hf-mcol-title{
  font-size:11.5px;font-weight:800;color:var(--text-subtle);
  margin-bottom:10px;
}
.hf-mlist li a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6.5px 0;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  transition:color var(--t-fast);
}
.hf-mlist li a:hover{color:var(--primary-ink)}
.hf-mlist .fcount{font-size:var(--fs-2xs);font-weight:600;color:var(--text-subtle)}
.hf-mlist .view-all{
  margin-top:8px;padding-top:11px;border-top:1px dashed var(--border);
  color:var(--primary-ink);font-weight:700;
}
.hf-mlist .view-all:hover{color:var(--primary-hover)}
.hf-mlist .view-all .icon-sm{width:14px;height:14px;transform:scaleX(-1)}

/* ستون نرم‌افزار در مگا */
.hf-msw{display:flex;align-items:flex-start;gap:10px;padding:6.5px 0}
.hf-msw .sw-dot{margin-top:7px}
.hf-msw .fcount{font-size:var(--fs-2xs);color:var(--text-subtle);font-weight:600}
.hf-msw .sw-name{display:block;font-weight:700;font-size:var(--fs-base);line-height:1.5}
.hf-msw .sw-desc{display:block;font-size:var(--fs-xs);color:var(--text-subtle);line-height:1.6}
.hf-msub{margin:4px 19px 8px 0;display:flex;flex-direction:column;gap:2px}
.hf-msub a{
  font-size:var(--fs-2xs);font-weight:600;color:var(--text-subtle);
  padding:3.5px 0;transition:color var(--t-fast);
}
.hf-msub a:hover{color:var(--primary-ink)}

/* ستون ویژگی (featured) */
.hf-mfeat{
  border-inline-start:1px solid var(--border);
  padding-inline-start:30px;
  display:flex;flex-direction:column;gap:9px;
}
.hf-mfeat-tag{align-self:flex-start}
.hf-mfeat img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-sm)}
.hf-mfeat b{font-size:15px;font-weight:800;line-height:1.6}
.hf-mfeat p{font-size:var(--fs-2xs);color:var(--text-muted);line-height:1.9}
.hf-mfeat .price-wrap{margin-top:2px}
.hf-mfeat .price{font-size:15px}
.hf-mfeat .link-more{font-size:var(--fs-2xs);margin-top:2px}

.hf-mfoot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px dashed var(--border);
  padding:13px 0 16px;
}
.hf-mfoot .hint{font-size:var(--fs-2xs);color:var(--text-subtle)}

/* منوی افتادنی ساده (نسخهٔ متمرکزتر مگا) */
.hf-drop{
  position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:56;
  min-width:290px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility 0s var(--t-fast);
}
.hf-item.is-open > .hf-drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hf-drop a{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 10px;border-radius:var(--r-xs);
  transition:background var(--t-fast);
}
.hf-drop a:hover{background:var(--surface-muted)}

/* ---- LAYER 3 · ادامه — کانسپت B و C و ردیف جستجوی تبلت ------------------- */

/* ===== CONCEPT B — هدر کاوش‌محور ===== */
.hf--searchmode .hf-inner{gap:16px}
.hf--searchmode .hf-brand-name{font-size:17px}
.hf--searchmode .hf-brand-name small{display:none}
.hf--searchmode .hf-search--xl{margin-inline:4px}
/* ردیف دوم: ناوبری آرام + چیپ‌های پرطرفدار */
.hf-subnav{
  border-top:1px solid var(--border);
  background:var(--surface);
}
.hf-subnav-inner{
  display:flex;align-items:center;gap:14px;
  min-height:46px;max-width:var(--container);margin-inline:auto;padding-inline:24px;
}
.hf-subnav .main-nav{gap:0}
.hf-subnav .nav-link{font-size:var(--fs-sm);padding:7px 10px}
.hf-subnav-pop{
  display:flex;align-items:center;gap:8px;margin-inline-start:auto;
  min-width:0;overflow:hidden;
}
.hf-subnav-pop .lbl{font-size:var(--fs-2xs);font-weight:700;color:var(--text-subtle);flex-shrink:0}
.hf-subnav-pop .sp-chips{flex-wrap:nowrap;overflow:hidden}
.hf-subnav-pop .sp-chips a{white-space:nowrap;flex-shrink:0}

/* ===== CONCEPT C — هدر فشرده ===== */
.hf--compact .hf-inner{height:58px;gap:14px}
.hf--compact .hf-brand-mark{width:32px;height:32px;border-radius:9px;font-size:13px}
.hf--compact .hf-brand-name{font-size:15px}
.hf--compact .hf-brand-name small{display:none}
.hf-c-div{width:1px;height:22px;background:var(--border);flex-shrink:0}
.hf-c-crumbs{min-width:0;flex:1}
.hf-c-crumbs .crumbs{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.hf-c-title{font-size:14px;font-weight:800;white-space:nowrap}
.hf-c-title small{display:block;font-size:10px;font-weight:600;color:var(--text-subtle);line-height:1.4}
/* نوار پیشرفت مطالعه — فقط مقاله */
.hf-progress{
  position:absolute;bottom:-1px;inset-inline-start:0;height:2px;width:calc(var(--progress,0)*1%);
  background:var(--primary);z-index:3;transition:width .1s linear;
}
/* مراحل تسویه در هدر — نسخهٔ فشرده */
.hf-c-steps{flex:1;display:flex;justify-content:center;min-width:0}
.hf-c-steps .steps{width:min(330px,100%)}
.hf-c-steps .step-dot{width:22px;height:22px;border-width:1.5px}
.hf-c-steps .step-dot .icon-sm{width:11px;height:11px}
.hf-c-steps .step span{font-size:10px;max-width:none}
.hf-c-steps .step::before{top:11px}
.hf-c-secure{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-2xs);font-weight:700;color:var(--success);
  background:var(--success-soft);padding:6px 12px;border-radius:var(--r-full);
}
.hf-c-secure .icon-sm{width:13px;height:13px}

/* ===== ردیف جستجوی تبلت (۷۶۸–۱۰۲۳) ===== */
.hf-subrow{display:none;border-top:1px solid var(--border);padding:10px 24px 12px;background:var(--surface)}
.hf-subrow .search-field{background:var(--surface-muted)}

/* ===== CONTAINER QUERIES — پاسخ هدر به عرض ظرف =====
   نقاط شکست معادل ویوپورت: ≤۱۲۷۹ لپ‌تاپ · ≤۱۰۲۳ تبلت · ≤۶۳۹ موبایل */
@media (max-width:1279px){
  .hf-inner{gap:14px}
  .hf-search{max-width:330px}
  .hf-utility-note{display:none}
  .hf-brand-name small{display:none}
}
@media (max-width:1023px){
  .hf-utility{display:none}
  .hf-nav{display:none}
  .hf-search{display:none}
  .hf-menubtn{display:inline-flex !important}
  .hf-subrow{display:block}
  .hf-acct-label,.hf-acct-btn .chev,.hf-acct-btn .r-av{display:none}
  .hf-cart-meta{display:none}
}
@media (max-width:639px){
  .hf-inner{height:56px;gap:8px;padding-inline:14px}
  .hf-brand-mark{width:34px;height:34px;border-radius:10px}
  .hf-brand .custom-logo-link img{max-height:32px;max-width:38vw}
  .hf-brand-name{font-size:16.5px}
  .hf-subrow{display:none}
  .hf-acct-btn{display:none !important}
  .hf-searchicon{display:inline-flex !important}
  .icon-btn{width:40px;height:40px}
}
/* حالت‌های پیش‌فرض کنترل‌هایی که فقط در برخی نقاط شکست دیده می‌شوند */
.hf-menubtn,.hf-searchicon{display:none}
.hf-subrow .search-field{width:100%;max-width:640px;margin-inline:auto}

/* ===== پوشرهای تمام‌صفحه — منوی موبایل و جستجوی موبایل ===== */
.hf-backdrop{
  position:fixed;inset:0;background:rgba(23,25,29,.45);z-index:90;
  opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility 0s var(--t-med);
}
.hf-backdrop.is-open{opacity:1;visibility:visible;transition:opacity var(--t-med),visibility 0s}
.hf-drawer{
  position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:92;
  width:min(360px,90vw);background:var(--surface);
  transform:translateX(105%);
  transition:transform var(--t-med),visibility 0s var(--t-med);
  visibility:hidden;display:flex;flex-direction:column;
}
.hf-drawer.is-open{transform:translateX(0);visibility:visible;transition:transform var(--t-med),visibility 0s}
.hf-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--border);
}
.hf-drawer-body{flex:1;overflow-y:auto;padding:6px 8px 26px}
.hf-md-account{
  display:flex;align-items:center;gap:11px;
  background:var(--surface-muted);border-radius:var(--r-md);
  padding:13px 15px;margin:10px 6px 14px;
  font-weight:700;font-size:var(--fs-base);
}
.hf-md-account .r-av{width:38px;height:38px;font-size:14px}
.hf-md-account span{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--text-subtle)}
.hf-md-search{
  display:flex;align-items:center;gap:10px;
  margin:0 6px 12px;padding:11px 14px;
  border:1.5px dashed var(--border-strong);border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:600;color:var(--text-subtle);
  transition:border-color var(--t-fast),color var(--t-fast);
  width:calc(100% - 12px);
}
.hf-md-search:hover{border-color:var(--primary);color:var(--primary-ink)}
.hf-md-search .icon-sm{width:15px;height:15px}
.hf-acc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:12px 14px;
  font-size:14.5px;font-weight:700;color:var(--text);
  transition:color var(--t-fast),background var(--t-fast);
}
.hf-acc-btn:hover{background:var(--surface-muted)}
.hf-acc-btn .chev{width:15px;height:15px;color:var(--text-subtle);transition:transform var(--t-med)}
.hf-acc.is-open .hf-acc-btn{color:var(--primary-ink)}
.hf-acc.is-open .hf-acc-btn .chev{transform:rotate(180deg)}
.hf-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med)}
.hf-acc.is-open .hf-acc-panel{grid-template-rows:1fr}
.hf-acc-panel > div{overflow:hidden}
.hf-acc-panel ul{padding:2px 0 8px}
.hf-acc-panel ul a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8.5px 30px;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  transition:color var(--t-fast),background var(--t-fast);
}
.hf-acc-panel ul a:hover{color:var(--primary-ink);background:var(--surface-muted)}
.hf-acc-panel .fcount{font-size:var(--fs-2xs);font-weight:600;color:var(--text-subtle)}
.hf-md-link{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;font-size:var(--fs-base);font-weight:600;color:var(--text-muted);
  transition:background var(--t-fast),color var(--t-fast);
}
.hf-md-link:hover{background:var(--surface-muted);color:var(--primary-ink)}
.hf-md-link.is-accent{color:var(--success);font-weight:700}
.hf-md-foot{
  border-top:1px solid var(--border);margin-top:10px;padding:12px 6px 4px;
  display:flex;flex-direction:column;gap:2px;
}
.hf-md-foot a{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;font-size:var(--fs-xs);font-weight:600;color:var(--text-subtle);
  transition:color var(--t-fast);
}
.hf-md-foot a:hover{color:var(--primary-ink)}

/* جستجوی تمام‌صفحهٔ موبایل */
.hf-msearch{
  position:fixed;inset:0;z-index:94;background:var(--surface);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--t-med),transform var(--t-med),visibility 0s var(--t-med);
}
.hf-msearch.is-open{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-med),transform var(--t-med),visibility 0s}
.hf-msearch-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);
}
.hf-msearch-head b{font-size:var(--fs-base);font-weight:800}
.hf-msearch-body{flex:1;overflow-y:auto;padding:18px 18px 30px}
.hf-msearch .search-field{height:50px;background:var(--surface-muted);margin-bottom:22px}
.hf-msearch .search-field:focus-within{background:var(--surface)}

/* داخل قاب موبایل، پوشرها مطلق می‌شوند نه ثابت */
.pv-screen .hf-backdrop,.pv-screen .hf-drawer,.pv-screen .hf-msearch{position:absolute}
/* ---- supplements — استایل‌های مکمل هدر (از سند مرجع، خارج از لایهٔ ۳) ------ */
.count-badge{
  position:absolute;top:2px;inset-inline-end:0;
  min-width:17px;height:17px;padding:0 4px;
  background:var(--secondary);color:#fff;
  font-size:10px;font-weight:800;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
}
.mc-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin-inline-start:auto}
.mc-side .price{font-size:13px;white-space:nowrap}
.qty.sm button{width:26px;height:27px}
.qty.sm input{width:30px;height:27px;font-size:12.5px}
.mc-item .qty{border-radius:var(--r-xs);flex-shrink:0}
.mc-empty{display:none;padding:34px 18px;text-align:center;font-size:var(--fs-sm);color:var(--text-muted)}
.mini-cart.is-empty .mc-empty{display:block}
.mini-cart.is-empty .mc-item,.mini-cart.is-empty .mc-foot{display:none}
.hf-mc-note{font-size:var(--fs-2xs);color:var(--text-subtle);display:flex;align-items:center;gap:6px}
.hf-mc-note .icon-sm{width:13px;height:13px;color:var(--success)}
@media (max-width:639px){
  .hf-acct-btn,.hf-wishbtn{display:none !important}
}

/* حالت چسبان در صفحات واقعی — نوار ناوبری همیشه در دسترس */
.hf{position:sticky;top:0;z-index:50}


/* =========================================================================
   V3 SITE HEADER LAYER — verbatim port of the shipped homepage reference
   (ediusfa-redesign main.css §HEADER + §MOBILE). Default header style A.
   Variable names resolve through the LEGACY ALIASES in tokens.css.
   ========================================================================= */
.site-header{
  position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t-med);
}
.site-header.is-scrolled{box-shadow:var(--sh-sm)}
.header-inner{
  display:flex;align-items:center;gap:16px;
  height:var(--header-h);
  position:relative;
}
/* WP custom logo — capped to brand-mark scale on every page (user report:
   logo rendered oversized and inconsistent between templates). */
.brand img.custom-logo,header img.custom-logo{max-height:44px;width:auto;height:auto}

/* brand */
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{
  width:38px;height:38px;border-radius:11px;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;letter-spacing:-.02em;
}
.brand-name{font-size:18px;font-weight:800;letter-spacing:-.01em}
.brand-name small{
  display:block;font-size:10.5px;font-weight:500;color:var(--ink-3);
  letter-spacing:.01em;line-height:1.2;margin-top:-2px;
}

/* primary nav */
.main-nav{display:flex;align-items:center;gap:2px}
.main-nav > li{position:relative}
.main-nav .nav-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:600;color:var(--ink-2);
  white-space:nowrap;background:none;border:0;cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast);
}
.main-nav .nav-link:hover{color:var(--teal-ink);background:var(--surface-warm)}
.nav-link .chev{width:14px;height:14px;transition:transform var(--t-fast)}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.main-nav .nav-link.is-accent{color:var(--green);font-weight:700}
.main-nav .nav-link.is-accent:hover{color:var(--green);background:var(--green-tint)}

/* ---- Mega menu (محصولات) — anchored to header-inner ---- */
.site-header .mega{
  position:absolute;top:calc(var(--header-h) - 6px);inset-inline-start:0;
  width:min(940px,calc(100vw - 48px));
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t-med),transform var(--t-med),visibility 0s var(--t-med);
  z-index:80;
}
.site-header .has-mega:hover .mega,
.site-header .has-mega.open .mega,
.site-header .has-mega:focus-within .mega{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity var(--t-med),transform var(--t-med),visibility 0s;
}
.mega-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  overflow:hidden;
  margin-top:12px; /* hover bridge */
}
.mega-grid{
  display:grid;grid-template-columns:1.05fr 1fr .95fr 288px;gap:0;
}
.mega-col{padding:28px 28px 20px;border-inline-end:1px solid var(--line)}
.mega-col-title{
  font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);
  letter-spacing:.06em;margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.mega-col-title::after{content:"";height:1px;background:var(--line);flex:1}
.mega-col ul{display:flex;flex-direction:column;gap:2px}
/* V3: quiet editorial text links (no icons) */
.mega-col ul a{
  display:block;
  padding:6px 10px;margin-inline:-10px;border-radius:var(--r-xs);
  font-size:var(--fs-base);color:var(--ink-2);font-weight:500;
  transition:background var(--t-fast),color var(--t-fast);
}
.mega-col ul a:hover{background:var(--surface-warm);color:var(--teal-ink)}
.mega-col a.view-all{
  margin-top:12px;font-weight:700;color:var(--teal-ink);border-top:1px dashed var(--line);
  padding-top:12px;border-radius:0;
  display:flex;align-items:center;gap:7px;
}
.mega-col a.view-all .icon-sm{width:14px;height:14px;color:var(--teal);transform:scaleX(-1)}

/* software column entries */
.mega-sw a{display:flex;align-items:flex-start;gap:10px;padding-block:8px}
.mega-sw .sw-name{font-weight:700;color:var(--ink);font-size:var(--fs-base);line-height:1.5}
.mega-sw .sw-desc{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.sw-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;margin-top:8px}

/* featured panel */
.mega-feature{
  padding:22px;background:var(--surface-warm);
  display:flex;flex-direction:column;gap:12px;
}
.mega-feature .mf-tag{
  align-self:flex-start;
  font-size:var(--fs-2xs);font-weight:700;color:var(--amber-strong);
  background:var(--amber-tint);padding:3px 10px;border-radius:var(--r-full);
}
.mega-feature img{border-radius:var(--r-md);aspect-ratio:16/10;object-fit:cover;width:100%}
.mega-feature b{font-size:var(--fs-base);font-weight:800;line-height:1.6}
.mega-feature p{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.7}
.mega-feature .link-more{font-size:var(--fs-xs)}
.mega-foot{
  border-top:1px solid var(--line);
  padding:13px 28px;display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);
}
.mega-foot .hint{font-size:var(--fs-xs);color:var(--ink-3)}
.mega-foot .link-more{font-size:var(--fs-sm)}

/* ---- Nav dropdown (نرم‌افزارها) ---- */
.site-header .nav-drop{
  position:absolute;top:100%;inset-inline-start:0;
  min-width:290px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);
  padding:8px;margin-top:10px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--t-med),transform var(--t-med),visibility 0s var(--t-med);
  z-index:80;
}
.site-header .nav-drop::before{content:"";position:absolute;top:-12px;inset-inline:0;height:12px} /* hover bridge */
.site-header .has-drop:hover .nav-drop,
.site-header .has-drop.open .nav-drop,
.site-header .has-drop:focus-within .nav-drop{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity var(--t-med),transform var(--t-med),visibility 0s;
}
.site-header .nav-drop a{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 10px;border-radius:var(--r-xs);
  transition:background var(--t-fast);
}
.site-header .nav-drop a:hover{background:var(--surface-warm)}
.site-header .nav-drop .sw-name{display:block;font-weight:700;font-size:var(--fs-base);line-height:1.5}
.site-header .nav-drop .sw-desc{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
.site-header .nav-drop .sw-dot{margin-top:9px}

/* ---- Header search ---- */
.site-header .header-search{position:relative;flex:1;max-width:420px;margin-inline-start:auto}
.site-header .search-field{
  display:flex;align-items:center;gap:9px;
  background:var(--surface-warm);
  border:1.5px solid transparent;border-radius:var(--r-full);
  padding:0 15px;height:44px;
  transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.site-header .search-field:focus-within{
  background:var(--surface);border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(14,115,128,.13);
}
.search-field .icon-sm{color:var(--ink-3)}
.site-header .search-field input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-size:var(--fs-sm);height:100%;
}
.site-header .search-field input::placeholder{color:var(--ink-3)}
.search-kbd{
  font-size:10.5px;color:var(--ink-3);border:1px solid var(--line-strong);
  border-radius:5px;padding:1px 6px;background:var(--surface);flex-shrink:0;
}

/* header panel anchors to page center so it has room to breathe */
.site-header .header-search .search-panel{
  inset-inline-start:auto;
  inset-inline-end:0;
  width:min(580px,calc(100vw - 48px));
}

/* search dropdown panel (shared by header + hero search) */
.search-panel{
  position:absolute;top:calc(100% + 10px);inset-inline:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:20px;z-index:85;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--t-med),transform var(--t-med),visibility 0s var(--t-med);
}
.search-box:focus-within .search-panel{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity var(--t-med),transform var(--t-med),visibility 0s;
}
.search-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sp-group-title{
  font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);
  letter-spacing:.05em;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;
}
.sp-chips{display:flex;flex-wrap:wrap;gap:7px}
.sp-chips a{
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);
  background:var(--surface-warm);border:1px solid var(--line);
  padding:5px 12px;border-radius:var(--r-full);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.sp-chips a:hover{background:var(--teal-tint);color:var(--teal-ink);border-color:var(--teal)}
.sp-list li a{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-sm);color:var(--ink-2);padding:6px 4px;border-radius:6px;
  transition:color var(--t-fast),background var(--t-fast);
}
.sp-list li a:hover{color:var(--teal-ink);background:var(--surface-warm)}
.sp-list .icon-sm{width:14px;height:14px;color:var(--ink-3)}
.sp-empty{font-size:var(--fs-xs);color:var(--ink-3);padding:6px 4px}
.sp-clear{font-size:var(--fs-2xs);font-weight:600;color:var(--teal-ink)}
.sp-footer{
  border-top:1px solid var(--line);margin-top:18px;padding-top:13px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);color:var(--ink-3);
}

/* header actions */
.site-header .header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.site-header .count-badge{
  position:absolute;top:2px;inset-inline-end:0;
  min-width:17px;height:17px;padding:0 4px;
  background:var(--amber);color:#fff;
  font-size:10px;font-weight:800;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
}
.site-header .header-search-toggle{display:none}

/* =========================================================================
   V3 MOBILE — search row + flat drawer
   ========================================================================= */
.site-header .mobile-search-row{display:none;border-top:1px solid var(--line);padding:10px 16px 12px}
.site-header .mobile-search-row .search-field{background:var(--surface-warm)}

.drawer-backdrop{
  position:fixed;inset:0;background:rgba(23,25,29,.45);z-index:95;
  opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility 0s var(--t-med);
}
.drawer-backdrop.show{opacity:1;visibility:visible;transition:opacity var(--t-med),visibility 0s}

.mobile-drawer{
  position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:96;
  width:min(360px,90vw);background:var(--surface);
  transform:translateX(105%);
  transition:transform var(--t-med);
  display:flex;flex-direction:column;
  visibility:hidden;
}
[dir="rtl"] .mobile-drawer{transform:translateX(105%)}
[dir="ltr"] .mobile-drawer{transform:translateX(-105%)}
.mobile-drawer.open{transform:translateX(0);visibility:visible}
.mobile-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.mobile-drawer-body{flex:1;overflow-y:auto;padding:10px 8px 24px}
.mobile-drawer .md-account{
  display:flex;align-items:center;gap:11px;
  background:var(--surface-warm);border-radius:var(--r-md);
  padding:13px 15px;margin:10px 10px 16px;
  font-weight:700;font-size:var(--fs-base);color:var(--ink);
}
.mobile-drawer .md-account .md-av{
  width:38px;height:38px;border-radius:var(--r-full);
  background:var(--teal-tint);color:var(--teal-ink);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.mobile-drawer .md-account .md-av .icon{width:19px;height:19px}
.mobile-drawer .md-account span{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3)}
.md-group-title{
  font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);
  letter-spacing:.05em;padding:14px 18px 6px;
}
.mobile-drawer-body ul a{
  display:flex;align-items:center;gap:11px;
  padding:11px 18px;font-size:var(--fs-base);font-weight:600;color:var(--ink-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.mobile-drawer-body ul a:hover{background:var(--surface-warm);color:var(--teal-ink)}
.mobile-drawer .md-cta{margin:18px 14px 0;display:flex;flex-direction:column;gap:10px}

/* ---- V3 responsive (header scope) ---- */
@media (max-width:1180px){
  .site-header .main-nav{display:none}
  .site-header .header-search{max-width:none}
  .site-header .header-search-toggle{display:inline-flex}
  .site-header .mobile-search-row{display:block}
  .site-header .desktop-search{display:none}
  .site-header .header-inner{gap:10px}
}
@media (max-width:639px){
  .site-header .brand-name small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .site-header .mega,.site-header .nav-drop,.search-panel,.mobile-drawer,.drawer-backdrop{transition-duration:.01ms}
}
