/* =========================================================================
   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;
}

/* ---- 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-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-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}