/* ======================================================================
   مدل‌های هدرِ ویترین — ساختار و چیدمانِ هر مدل (قالب‌ها: templates/storefront/headers/<مدل>.html)
   فقط چیدمان این‌جاست و رنگ‌ها از توکن‌های پوسته میان (--header-bg، --primary، --text-dark، --border …)،
   پس هر مدل با هر پوسته‌ای که پیشنهادش می‌ده هم‌خون می‌شه. پوسته‌ها اگه بخوان، جزئیاتِ بیشتر رو در CSSِ خودشون
   با html[data-hdr="<مدل>"] یا .hd-<مدل> اضافه می‌کنن.
   ====================================================================== */

/* ---------------------------------------------------------------- پایه‌ی مشترک */
.hd { position:sticky; top:0; z-index:40; background:var(--header-bg); border-bottom:1px solid var(--border); box-shadow:none; }
.hd.is-static { position:relative; }
.hd-main, .hd-bar { position:relative; }          /* پنلِ مگامنو به همین ردیفِ تمام‌عرض می‌چسبه */
.hd-row { display:flex; align-items:center; gap:16px; min-height:68px; }
.hd-acts { display:flex; align-items:center; gap:4px; margin-inline-start:auto; flex-shrink:0; }
.hd-brand { flex-shrink:0; display:flex; align-items:center; gap:10px; min-width:0; color:var(--text-dark); }
.hd-brand .pro-brand-name { font-size:18px; line-height:1.4; }
.hd-menu-btn { display:none; }
.hd-search-btn { display:inline-flex; }
.hd-m-only { display:none !important; }
.hd-link { white-space:nowrap; }
.hd .pro-icon-btn { flex-shrink:0; }
.hd-t { font-size:13px; font-weight:600; white-space:nowrap; }
.hd .pro-icon-btn.is-icon .hd-t { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hd-phone-num { direction:ltr; font-size:12.5px; font-weight:700; }
.hd .pro-mega { position:static; }
/* دکمه‌های متنی («منو»، «جستجو»، «ورود»، «سبد (۲)») */
.hd-txt-btn { background:none; border:none; font:inherit; font-size:13px; color:var(--text-dark); padding:8px 4px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.hd-txt-btn:hover { color:var(--primary); }
.hd-txt-btn .hd-t { font-weight:inherit; }
.hd-cart-n::before { content:"("; } .hd-cart-n::after { content:")"; }
.hd-cart-n:not(.show) { display:none; }
/* کشوی جستجو زیرِ هدر */
.hd-drop { display:none; border-top:1px solid var(--border); padding:10px 0 12px; background:var(--header-bg); }
.hd.search-open .hd-drop { display:block; }
.hd-drop .pro-header-search { max-width:640px; margin:0 auto; }
/* نوارِ منو (ردیفِ دوم) */
.hd-bar { border-top:1px solid var(--border); }
.hd-bar-in { display:flex; align-items:center; gap:2px; min-height:46px; overflow-x:auto; scrollbar-width:none; }
.hd-bar-in::-webkit-scrollbar { display:none; }
.hd-bar-in:has(.pro-mega) { overflow:visible; }
.hd-nav { display:flex; align-items:center; gap:2px; min-width:0; }

@media (max-width:820px) {
  .hd-row { min-height:58px; gap:6px; }
  .hd-menu-btn { display:inline-flex; }
  .hd-m-only { display:inline-flex !important; }
  .hd-d-only, .hd-nav, .hd-bar, .hd-top, .hd-row > .hd-search, .hd-phone, .pro-header-social { display:none !important; }
  .hd-brand { flex:1; }
  .hd-brand .pro-brand-name { font-size:16px; }
  .hd .pro-icon-btn .hd-t { display:none; }
  .hd .pro-icon-btn { min-width:40px; height:40px; padding:0 8px; }
  .hd-account { display:none !important; }   /* حساب در موبایل از منوی پایین در دسترسه */
}

/* ---------------------------------------------------------------- ۱) بازاری (mall) */
.hd-mall .hd-top { border-bottom:1px solid var(--border); font-size:12px; color:var(--text-muted); }
.hd-top-in { display:flex; align-items:center; gap:18px; min-height:34px; }
.hd-top-phone { height:auto; min-width:0; padding:0; background:none !important; font-size:12px; color:var(--text-muted); }
.hd-top-phone .ic { width:15px; height:15px; }
.hd-top-links { display:flex; gap:16px; margin-inline-start:auto; }
.hd-top-links a:hover { color:var(--primary); }
.hd-top-social { margin:0; }
.hd-mall .hd-row { min-height:76px; gap:22px; }
.hd-mall .hd-wide { flex:1; max-width:none; height:46px; }
.hd-mall .hd-wide input { padding:12px 0; font-size:14px; }
.hd-mall .hd-acts { gap:6px; }
.hd-mall .hd-bar-in { gap:4px; }
.hd-mall .pro-mega-btn { background:var(--primary); color:var(--on-primary, #fff); margin-inline-end:8px; }
@media (max-width:820px) {
  .hd-mall .hd-row { min-height:58px; }
  .hd-mall .hd-drop { display:block; border-top:none; padding-top:0; }
  .hd-mall .hd-search-btn { display:none; }
  .hd-mall .hd-account { display:inline-flex !important; }
}

/* ---------------------------------------------------------------- ۲) یک‌ردیفه (inline) */
.hd-inline .hd-row { min-height:72px; gap:24px; }
.hd-inline .hd-nav { flex:1; justify-content:center; }
.hd-inline .pro-mega-btn { background:transparent; color:var(--text-dark); padding:0 12px; }
.hd-inline .pro-mega-btn:hover { color:var(--primary); }

/* ---------------------------------------------------------------- ۳) سرِ مجله (masthead) */
.hd-mast { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; min-height:84px; }
.hd-side { display:flex; align-items:center; gap:14px; min-width:0; }
.hd-side-s { justify-self:start; }
.hd-side-e { justify-self:end; }
.hd-center { justify-self:center; text-align:center; }
.hd-masthead .hd-brand .pro-brand-name { font-size:26px; font-weight:500; }
.hd-masthead .hd-menu-btn { display:inline-flex; }
.hd-masthead .hd-bar-in { justify-content:center; gap:6px; min-height:44px; }
.hd-masthead .hd-link { background:transparent !important; border-radius:0; font-size:13px; color:var(--text-dark); padding:8px 10px; }
.hd-masthead .hd-link:hover { color:var(--primary); }
.hd-masthead .hd-link.active { text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1px; }
.hd-dot { width:4px; height:4px; border-radius:50%; background:var(--border); margin:0 6px; flex-shrink:0; }
@media (max-width:820px) {
  .hd-mast { min-height:58px; gap:8px; }
  .hd-masthead .hd-brand { flex:none; }
  .hd-masthead .hd-brand .pro-brand-name { font-size:18px; }
  .hd-masthead .hd-search-btn { display:none; }
}

/* ---------------------------------------------------------------- ۴) لوگو وسط، منو دو طرف (split) */
.hd-splitrow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; min-height:80px; }
.hd-split .hd-nav { justify-self:start; display:flex; }
.hd-split .hd-acts { justify-self:end; margin:0; }
.hd-split .hd-brand { flex-direction:column; gap:4px; }
.hd-split .hd-brand .pro-brand-name { font-size:22px; }
.hd-split .pro-mega-btn { background:transparent; color:var(--text-dark); padding:0 10px; }
.hd-split .pro-mega-btn .ic:first-child { display:none; }
.hd-split .hd-link { background:transparent !important; }
@media (max-width:820px) {
  .hd-splitrow { min-height:60px; gap:8px; }
  .hd-split .hd-nav { display:flex !important; }
  .hd-split .hd-nav > :not(.hd-menu-btn) { display:none; }
  .hd-split .hd-brand { flex:none; }
  .hd-split .hd-brand img { height:34px; }
  .hd-split .hd-brand .pro-brand-name { font-size:17px; }
}

/* ---------------------------------------------------------------- ۵) شناور (floating) */
.hd-floating { background:transparent; border-bottom:none; padding-top:12px; pointer-events:none; }
.hd-floating > * { pointer-events:auto; }
.hd-pill { position:relative; display:flex; align-items:center; gap:14px; min-height:60px; padding:6px 8px 6px 20px; border-radius:999px;
  background:color-mix(in srgb, var(--bg-card) 86%, transparent); border:1px solid var(--border); box-shadow:0 10px 30px rgba(15,23,42,.08);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); }
.hd-floating .hd-nav { flex:1; }
.hd-floating .hd-link { border-radius:999px; }
.hd-floating .pro-mega-btn { background:transparent; color:var(--text-dark); border-radius:999px; }
.hd-floating .pro-mega-btn:hover { background:var(--bg-page); }
.hd-floating .pro-mega-panel { top:calc(100% + 8px); border:1px solid var(--border); border-radius:22px; overflow:hidden; }
.hd-floating .hd-mini { flex:0 1 220px; height:42px; border-radius:999px; }
.hd-floating .hd-mini input { padding:9px 0; }
.hd-floating .pro-icon-btn { border-radius:999px; }
.hd-cart.is-pill { background:var(--primary); color:var(--on-primary, #fff); border-radius:999px; padding:0 16px; gap:8px; }
.hd-cart.is-pill:hover { filter:brightness(1.08); background:var(--primary); color:var(--on-primary, #fff); }
.hd-cart.is-pill .pro-cart-badge { position:static; background:var(--on-primary, #fff); color:var(--primary); min-width:20px; height:20px; font-size:11px; }
.hd-floating .hd-drop { background:transparent; border:none; padding:8px 0 0; }
.hd-floating .hd-drop .pro-header-search { border-radius:999px; background:var(--bg-card); box-shadow:0 10px 30px rgba(15,23,42,.08); }
@media (max-width:820px) {
  .hd-floating { padding-top:8px; }
  .hd-pill { gap:4px; min-height:52px; padding:4px 6px; }
  .hd-floating .hd-brand { padding-inline-start:4px; }
  .hd-cart.is-pill { padding:0 12px; }
}

/* ---------------------------------------------------------------- ۶) پرانرژی (ticker) */
.hd-tick { position:relative; overflow:hidden; padding:0; height:34px; display:flex; align-items:center; background:var(--text-dark); color:var(--bg-page); }
.hd-tick-link { position:absolute; inset:0; z-index:1; }
.hd-tick-track { display:flex; width:max-content; direction:ltr; }
.hd-tick-run { display:flex; align-items:center; gap:22px; padding-inline-end:22px; direction:rtl; font-size:12.5px; font-weight:800; white-space:nowrap; }
.hd-tick-run i { font-style:normal; color:var(--primary); }
@media (prefers-reduced-motion:no-preference) {
  .hd-tick-track { animation:hdTick 38s linear infinite; }
  .hd-tick:hover .hd-tick-track { animation-play-state:paused; }
}
@keyframes hdTick { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.hd-ticker .hd-row { min-height:72px; gap:20px; }
.hd-ticker .hd-brand .pro-brand-name { font-weight:900; font-size:20px; }
.hd-ticker .hd-wide { flex:1; max-width:520px; height:46px; border-radius:999px; }
.hd-chips { border-top:1px solid var(--border); }
.hd-chips-in { display:flex; gap:8px; overflow-x:auto; padding:10px 0; scrollbar-width:none; }
.hd-chips-in::-webkit-scrollbar { display:none; }
.hd-chip { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 6px; border-radius:999px; border:1.5px solid var(--border);
  font-size:13px; font-weight:800; color:var(--text-dark); background:var(--bg-card); transition:border-color .15s, background .15s, color .15s; }
.hd-chip:first-child { padding:0 18px; }
.hd-chip:hover { border-color:var(--text-dark); }
.hd-chip.active { background:var(--text-dark); border-color:var(--text-dark); color:var(--bg-page); }
.hd-chip-ic { width:28px; height:28px; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:var(--pastel-red); color:var(--primary); font-size:12px; }
.hd-chip-ic img { width:100%; height:100%; object-fit:cover; }
.hd-chip-ic .ic { width:16px; height:16px; }
@media (max-width:820px) {
  .hd-ticker .hd-row { min-height:58px; }
  .hd-chips { display:block !important; }
  .hd-chips-in { padding:8px 0 10px; }
  .hd-chip { height:36px; font-size:12.5px; }
}

/* ---------------------------------------------------------------- ۷) سنتی (ornate) */
.hd-ornate .hd-mast { min-height:88px; }
.hd-orn { display:flex; align-items:center; gap:16px; }
.hd-orn-l, .hd-orn-r { position:relative; width:clamp(28px, 6vw, 84px); height:1px; background:linear-gradient(to left, var(--primary), transparent); }
.hd-orn-r { background:linear-gradient(to right, var(--primary), transparent); }
.hd-orn-l::after, .hd-orn-r::after { content:""; position:absolute; top:50%; width:7px; height:7px; border:1px solid var(--primary); transform:translateY(-50%) rotate(45deg); background:var(--header-bg); }
.hd-orn-l::after { right:-4px; } .hd-orn-r::after { left:-4px; }
.hd-ornate .hd-brand .pro-brand-name { font-size:24px; }
.hd-ornate .hd-bar { border-top:1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--primary) 7%, transparent) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--primary) 7%, transparent) 0 1px, transparent 1px 11px); }
.hd-ornate .hd-bar-in { justify-content:center; gap:4px; }
.hd-ornate .hd-link { background:transparent !important; color:var(--text-dark); }
.hd-ornate .hd-link:hover, .hd-ornate .hd-link.active { color:var(--primary); }
.hd-ornate .pro-mega-btn { background:transparent; color:var(--text-dark); }
@media (max-width:820px) {
  .hd-ornate .hd-mast { min-height:62px; }
  .hd-orn { gap:8px; }
  .hd-orn-l, .hd-orn-r { width:18px; }
  .hd-ornate .hd-brand { flex:none; }
  .hd-ornate .hd-brand .pro-brand-name { font-size:17px; }
  .hd-ornate .hd-side-s .hd-search-btn { display:none; }
  .hd-ornate .hd-main { border-bottom:3px double color-mix(in srgb, var(--primary) 40%, var(--border)); }
}

/* ---------------------------------------------------------------- ۸) کافه (compact) */
.hd-compact .hd-row { min-height:64px; gap:22px; }
.hd-compact .hd-nav { gap:2px; }
.hd-cta { display:inline-flex; align-items:center; height:40px; padding:0 22px; border-radius:999px; background:var(--primary); color:var(--on-primary, #fff); font-size:13.5px; font-weight:800; white-space:nowrap; transition:filter .15s; }
.hd-cta:hover { filter:brightness(1.08); }
@media (max-width:820px) {
  .hd-compact .hd-row { min-height:56px; }
  .hd-cta { height:36px; padding:0 16px; font-size:13px; }
}
/* اعلانِ متحرک: CSSِ قدیمیِ بعضی پوسته‌ها روی .pro-announce حرکت/رنگِ خودش رو داره؛ این‌جا خنثی می‌شه */
html[data-hdr="ticker"] .pro-announce.hd-tick { background:var(--text-dark); color:var(--bg-page); border:none; white-space:nowrap; font-weight:800; }
html[data-hdr="ticker"] .pro-announce.hd-tick > .hd-tick-track { display:flex; padding:0; animation:none; }
html[data-hdr="ticker"] .pro-announce.hd-tick .hd-tick-run span { color:var(--bg-page); }
@media (prefers-reduced-motion:no-preference) { html[data-hdr="ticker"] .pro-announce.hd-tick > .hd-tick-track { animation:hdTick 38s linear infinite; } }
@media (max-width:820px) { .hd-floating .hd-mini { display:none !important; } .hd-floating .hd-brand { flex:1; } }