/* ═══════════════════════════════════════════════════════
   Zovino — header.css
   سربرگ شیشه‌ای fixed + فهرست هوشمند + زیرمنوی دسته‌بندی
   + دراور و فهرست پایین موبایل
═══════════════════════════════════════════════════════ */

/* --- مخفی کردن هدر/فهرست/نوار پایین قدیمی قالب اصلی --- */
body > header,           /* هدر + فهرست بالا (cat-menu) */
ul.cat-menu,              /* کپی احتمالی فهرست جای دیگه */
.bottom-nav {             /* نوار پایین قدیمی (موبایل/تبلت) */
  display: none !important;
}

#zv-header-wrap, #zv-header-wrap *,
#zv-mnav, #zv-mnav *,
#zv-cat-drawer, #zv-cat-drawer * { box-sizing: border-box; }

#zv-header-wrap {
  --blue: #2563EB; --blue-l: #60A5FA; --blue-d: #1D4ED8;
  --navy: #0F172A; --navy-2: #0e1f3a;
  --white: #FFFFFF; --slate: #F8FAFC;
  --ink: #0F172A; --sub: #64748B; --muted: #94A3B8;
  --border: rgba(15,23,42,0.07);
  --ff: 'Vazirmatn', sans-serif;

  direction: rtl;
  font-family: var(--ff);
  /* ⚠️ به‌جای sticky از fixed استفاده شد؛ چون یکی از المان‌های اجدادی
     صفحه احتمالاً overflow یا transform داشت و sticky رو می‌شکست.
     fixed مستقل از این مشکلات، همیشه بالای صفحه می‌مونه. جبران فضای
     خالی (که fixed از فلوی صفحه بیرونش می‌بره) با padding-top روی
     body در header.js انجام می‌شه. */
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 900;
}

#zv-header-wrap .zv-h-con{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- نوار بالایی --- */
#zv-header{
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
#zv-header .zv-h-con{
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

#zv-header .zv-h-logo{ display: flex; align-items: center; flex-shrink: 0; }
#zv-header .zv-h-logo img{ height: 36px; width: auto; display: block; }

/* --- جستجو --- */
#zv-header .zv-h-search{ margin-inline-start: auto; position: relative; display: flex; align-items: center; }
#zv-header .zv-h-search-toggle{
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,.6); cursor: pointer; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
#zv-header .zv-h-search-form{
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  display: flex; width: 280px; max-width: 80vw;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 32px rgba(15,23,42,.14);
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
#zv-header .zv-h-search.is-open .zv-h-search-form{ opacity: 1; visibility: visible; transform: translateY(0); }
#zv-header .zv-h-search-form input{
  flex: 1; min-width: 0; border: none; outline: none; padding: 12px 14px;
  font-family: var(--ff); font-size: 13.5px;
}
#zv-header .zv-h-search-form button{
  border: none; background: var(--blue); color: #fff; padding: 0 16px; cursor: pointer; font-size: 13px; font-family: var(--ff);
}

/* --- اکانت / سبد خرید --- */
#zv-header .zv-h-actions{ display: flex; align-items: center; gap: 10px; }
#zv-header .zv-h-icon-btn{
  position: relative;
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.6); border: 1px solid var(--border);
  color: var(--ink);
  transition: transform .2s, background .2s;
}
#zv-header .zv-h-icon-btn:hover{ transform: translateY(-2px); background: var(--white); }
#zv-header .zv-h-cart-count{
  position: absolute; top: -6px; inset-inline-end: -6px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* --- فهرست (نویگیشن دسکتاپ) --- */
#zv-nav{
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  max-height: 52px;
  overflow: visible;
  opacity: 1;
  transition: max-height .3s ease, opacity .25s ease;
}
#zv-nav.is-hidden{ max-height: 0; opacity: 0; overflow: hidden; }

#zv-nav .zv-nav-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2px;
  height: 52px;
  /* ⚠️ عمداً overflow-x تنظیم نشده: اگه یکی از دو محور overflow غیر از
     visible باشه، مرورگرها محور دیگه رو هم به‌صورت خودکار auto حساب
     می‌کنن (یه رفتار استاندارد ولی گیج‌کننده CSS) و باعث می‌شد
     dropdown که پایین همین لیست باز می‌شه، بریده/نامرئی بشه.
     همین overflow-x بود که باعث می‌شد زیرمنوها «دیده نشن». */
  overflow: visible;
  flex-wrap: wrap;
}
#zv-nav .zv-nav-list > li{ position: relative; flex-shrink: 0; }
#zv-nav .zv-nav-list > li > a{
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 10px;
  color: rgba(255,255,255,.75); text-decoration: none;
  font-size: 13.5px; font-weight: 600; transition: background .2s, color .2s;
}
#zv-nav .zv-nav-list > li > a:hover{ background: rgba(255,255,255,.08); color: #fff; }
#zv-nav .zv-nav-caret{ font-size: 10px; opacity: .7; }
#zv-nav .zv-nav-thumb{
  width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,.12);
}
#zv-nav .zv-nav-thumb img{ width: 100%; height: 100%; object-fit: cover; }

/* --- زیرمنوها: پنل اصلی (سطح ۲) + فلای‌اوت کناری (سطح ۳) --- */
#zv-nav .zv-nav-dropdown{
  position: absolute;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(15,23,42,.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 999;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}

#zv-nav .zv-nav-dropdown-primary{
  top: 100%; right: 0; margin-top: 8px;
  min-width: 230px; max-width: 300px;
}

#zv-nav .zv-nav-dropdown-flyout{
  top: -8px; right: 100%; margin-inline-end: 8px;
  min-width: 200px;
  transform: translateY(0) translateX(6px);
}

#zv-nav li.has-dropdown:hover > .zv-nav-dropdown-primary,
#zv-nav li.has-dropdown.is-open > .zv-nav-dropdown-primary{
  opacity: 1; visibility: visible; transform: translateY(0);
}
#zv-nav .zv-nav-dropdown-item-wrap.has-children:hover > .zv-nav-dropdown-flyout,
#zv-nav .zv-nav-dropdown-item-wrap.has-children.is-open > .zv-nav-dropdown-flyout{
  opacity: 1; visibility: visible; transform: translateX(0);
}

#zv-nav .zv-nav-dropdown-item-wrap{ position: relative; }
#zv-nav .zv-nav-dropdown-item{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600;
  transition: background .2s;
}
#zv-nav .zv-nav-dropdown-item:hover{ background: rgba(37,99,235,.06); color: var(--blue); }
#zv-nav .zv-nav-dropdown-thumb{
  width: 32px; height: 32px; border-radius: 9px; overflow: hidden; flex-shrink: 0;
  background: var(--slate);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
#zv-nav .zv-nav-dropdown-thumb img{ width: 100%; height: 100%; object-fit: cover; }
#zv-nav .zv-nav-flyout-caret{ font-size: 10px; opacity: .55; }

#zv-nav .zv-nav-flyout-item{
  display: block; padding: 8px 10px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 12.5px; font-weight: 500;
  transition: background .2s;
}
#zv-nav .zv-nav-flyout-item:hover{ background: rgba(37,99,235,.06); color: var(--blue); }

/* --- دراور دسته‌بندی موبایل (آکاردئون تودرتو) --- */
#zv-cat-drawer{ position: fixed; inset: 0; z-index: 950; visibility: hidden; }
#zv-cat-drawer.is-open{ visibility: visible; }

.zv-cat-drawer-backdrop{
  position: absolute; inset: 0; background: rgba(15,23,42,.5);
  opacity: 0; transition: opacity .25s;
}
#zv-cat-drawer.is-open .zv-cat-drawer-backdrop{ opacity: 1; }

.zv-cat-drawer-panel{
  position: absolute; bottom: 0; right: 0; left: 0;
  max-height: 75vh;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
  direction: rtl; font-family: 'Vazirmatn', sans-serif;
}
#zv-cat-drawer.is-open .zv-cat-drawer-panel{ transform: translateY(0); }

.zv-cat-drawer-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.zv-cat-drawer-head h3{ font-size: 15px; font-weight: 800; color: #0F172A; margin: 0; }
.zv-cat-drawer-close{
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: #F1F5F9; color: #64748B; font-size: 14px; cursor: pointer;
}

.zv-cat-drawer-list{ overflow-y: auto; display: grid; gap: 2px; }
.zv-cat-drawer-item{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px; border-radius: 12px;
  color: #0F172A; text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.zv-cat-drawer-item:active{ background: rgba(37,99,235,.08); color: #2563EB; }
.zv-cat-drawer-thumb{
  width: 38px; height: 38px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: #F8FAFC; display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.zv-cat-drawer-thumb img{ width: 100%; height: 100%; object-fit: cover; }

/* --- آکاردئون تودرتوی دراور (تا ۳ سطح) --- */
.zv-cat-drawer-node{ display: flex; flex-direction: column; }
.zv-cat-drawer-toggle{
  display: flex; align-items: center; gap: 12px;
  width: 100%; border: none; background: transparent; cursor: pointer;
  padding: 11px 10px; border-radius: 12px;
  color: #0F172A; font-size: 13.5px; font-weight: 600; font-family: inherit; text-align: right;
}
.zv-cat-drawer-toggle:active{ background: rgba(37,99,235,.06); }
.zv-cat-drawer-toggle-text{ flex: 1; }
.zv-cat-drawer-chevron{ font-size: 11px; color: #94A3B8; transition: transform .2s; }
.zv-cat-drawer-node.is-open > .zv-cat-drawer-toggle .zv-cat-drawer-chevron{ transform: rotate(180deg); color: #2563EB; }
.zv-cat-drawer-node.is-open > .zv-cat-drawer-toggle{ color: #2563EB; }

.zv-cat-drawer-children{
  display: grid; gap: 2px;
  padding-inline-start: 20px;
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
}
.zv-cat-drawer-node.is-open > .zv-cat-drawer-children{ max-height: 1000px; }

/* هرچی عمیق‌تر بریم، تورفتگی و ریزتر شدن فونت بیشتر می‌شه */
.zv-cat-drawer-children .zv-cat-drawer-item,
.zv-cat-drawer-children .zv-cat-drawer-toggle{ font-size: 12.5px; font-weight: 500; opacity: .9; }
.zv-cat-drawer-children .zv-cat-drawer-thumb{ width: 30px; height: 30px; font-size: 13px; }

/* --- فهرست پایین صفحه (موبایل) --- */
#zv-mnav{
  display: none;
  position: fixed; bottom: 0; inset-inline-start: 0; inset-inline-end: 0;
  z-index: 500;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(15,23,42,.06);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  direction: rtl;
  font-family: 'Vazirmatn', sans-serif;
}
#zv-mnav .zv-mnav-item{
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: #64748B; font-size: 10.5px; font-weight: 600;
  padding: 6px 0; border-radius: 12px; transition: color .2s, background .2s;
  border: none; background: transparent; cursor: pointer; font-family: inherit;
}
#zv-mnav .zv-mnav-item svg{ transition: transform .15s; }
#zv-mnav .zv-mnav-item.is-active,
#zv-mnav .zv-mnav-item:active{ color: #2563EB; }
#zv-mnav .zv-mnav-item.is-active{ background: rgba(37,99,235,.08); }
#zv-mnav .zv-mnav-item:active svg{ transform: scale(.9); }
#zv-mnav .zv-mnav-badge{
  position: absolute; top: 2px; inset-inline-end: 20%;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: #DC2626; color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* --- ریسپانسیو --- */
@media (max-width: 900px){
  #zv-nav{ display: none; }
  #zv-mnav{ display: flex; }
  body{ padding-bottom: 62px; }
  #zv-header .zv-h-con{ height: 60px; }
  #zv-header .zv-h-logo img{ height: 30px; }
}

/* هدر زیر نوار ادمین بنشیند (نه زیر آن) */
body.admin-bar #zv-header-wrap {
  top: 32px;
}
@media screen and (min-width: 783px) {
  body.admin-bar #zv-header-wrap {
    top: 46px;
  }
}
/* موبایل ادمین‌بار وقتی جمع می‌شود */
@media screen and (max-width: 782px) {
  body.admin-bar #zv-header-wrap {
    top: 46px;
  }
  body.admin-bar.wp-responsive-open #zv-header-wrap {
    top: 46px;
  }
}

/* ── کیبورد موبایل باز: مخفی منوبار + جلوگیری از فضای سفید زیر viewport ── */
@media (max-width: 900px) {
  body.zv-keyboard-open #zv-mnav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.zv-keyboard-open {
    padding-bottom: 0 !important;
  }
  /* پس‌زمینه صفحه زیر visualViewport دیده نشود */
  html.zv-keyboard-open,
  body.zv-keyboard-open {
    background: #fff;
  }
}


/* انیمیشن شمارنده سبد بعد از افزودن */
@keyframes zv-cart-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.zv-h-cart-count.zv-cart-bump,
.zv-mnav-badge.zv-cart-bump {
  animation: zv-cart-bump .35s ease;
}