/* ═══════════════════════════════════════════════════════
   Zovino — home.css
   همه استایل‌های صفحه اصلی، پیشوند zv- برای جلوگیری از
   تداخل با استایل‌های قالب ایران‌کالا
═══════════════════════════════════════════════════════ */

/* ── ریست و پایه ── */
#zv, #zv * { box-sizing: border-box; margin: 0; padding: 0; }
#zv a { text-decoration: none; color: inherit; }
#zv {
  --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);
  --radius: 20px;
  --ff: 'Vazirmatn', sans-serif;
  --fe: 'Inter', sans-serif;
  font-family: var(--ff);
  background: var(--slate);
  color: var(--ink);
  direction: rtl;
}
#zv .zv-en { font-family: var(--fe); direction: ltr; unicode-bidi: isolate; }
#zv .zv-con { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
#zv .zv-sec,
#zv .zv-sec-banners,
#zv .zv-sec-popular,
#zv .zv-sec-why,
#zv .zv-sec-reviews,
#zv .zv-sec-articles,
#zv .zv-sec-faq,
#zv .zv-sec-categories,
#zv .zv-sec-cta {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* ── سربرگ بخش ── */
#zv .zv-sh { text-align: center; margin-bottom: 44px; }
#zv .zv-sh.zv-sh-start { text-align: right; margin-bottom: 0; }
#zv .zv-kk { display: block; font-family: var(--fe); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
#zv .zv-sh h2 { font-size: 27px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
#zv .zv-sh p { color: var(--sub); font-size: 14px; }
#zv .zv-sh-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }

/* ── ردیف ناوبری Swiper ── */
#zv .zv-swiper-nav { display: flex; gap: 10px; }
#zv .zv-sw-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--blue); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, border-color .2s; }
#zv .zv-sw-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ════════════════════════
   هیرو
════════════════════════ */
#zv .zv-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy) 0%, #0e1f3a 55%, #122040 100%);
  padding: 68px 0 84px;
}
#zv .zv-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
#zv .zv-b1 { width: 380px; height: 380px; background: rgba(37,99,235,.6); top: -120px; left: -60px; }
#zv .zv-b2 { width: 280px; height: 280px; background: rgba(96,165,250,.3); bottom: -80px; right: 6%; }
#zv .zv-bubble { position: absolute; border-radius: 50%; background: rgba(255,255,255,.04); filter: blur(38px); animation: zfl 9s ease-in-out infinite; }
#zv .zv-bu1 { width: 190px; height: 190px; top: 20%; right: 10%; }
#zv .zv-bu2 { width: 140px; height: 140px; top: 8%; left: 16%; animation-delay: 3s; }
@keyframes zfl { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-26px) } }

#zv .zv-hero-inner { position: relative; z-index: 2; text-align: center; }
#zv .zv-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(16px); color: var(--blue-l); font-size: 12.5px; font-weight: 600; padding: 8px 18px; border-radius: 999px; margin-bottom: 20px; }
#zv .zv-live { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; animation: zpulse 2s infinite; }
@keyframes zpulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
#zv .zv-hero-inner h1 { font-size: 44px; line-height: 1.28; font-weight: 800; color: #fff; max-width: 720px; margin: 0 auto 14px; }
#zv .zv-hero-inner h1 em { font-style: normal; background: linear-gradient(90deg, var(--blue-l), #93C5FD); -webkit-background-clip: text; background-clip: text; color: transparent; }
#zv .zv-hero-inner > p { color: rgba(255,255,255,.6); font-size: 15.5px; max-width: 480px; margin: 0 auto 34px; line-height: 1.9; }
#zv .zv-trust { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; color: rgba(255,255,255,.5); font-size: 12.5px; }
#zv .zv-trust span { display: flex; align-items: center; gap: 7px; }

/* ════════════════════════
   بنرهای محصول
════════════════════════ */
#zv .zv-sec-banners { background: linear-gradient(150deg, var(--navy) 0%, #0e1f3a 55%, #122040 100%); padding: 48px 0 64px; position: relative; }
#zv .zv-bg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

#zv .zv-pb {
  position: relative; display: block; border-radius: 18px; overflow: hidden;
  min-height: 175px; padding: 18px;
  background: linear-gradient(145deg, var(--c1) 0%, var(--c2) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 24px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s;
  direction: rtl;
}
/* لایه تیره نرم پایین برای خوانایی متن */
#zv .zv-pb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(15,23,42,.45));
  pointer-events: none;
  z-index: 1;
}
/* لوگوی محو در پس‌زمینه */
#zv .zv-pb-logo {
  position: absolute;
  inset-inline-start: -8%;
  bottom: -18%;
  font-size: 7.5rem;
  line-height: 1;
  opacity: .16;
  filter: blur(0.5px);
  transform: rotate(-14deg);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
#zv .zv-pb-lg .zv-pb-logo {
  font-size: 11rem;
  inset-inline-start: -6%;
  bottom: -12%;
  opacity: .14;
}
#zv .zv-pb:hover {
  transform: translateY(-8px) scale(1.018);
  box-shadow: 0 22px 44px rgba(15,23,42,.22), inset 0 0 0 1px rgba(255,255,255,.22);
}
#zv .zv-pb:hover .zv-pb-emoji { transform: scale(1.14) translateY(-4px); }
#zv .zv-pb:hover .zv-pb-logo { opacity: .22; transform: rotate(-10deg) scale(1.05); }
#zv .zv-pb:hover .zv-pb-btn { background: rgba(255,255,255,.3); }
#zv .zv-pb-lg { grid-row: span 2; min-height: 364px; }
#zv .zv-pb-lg .zv-pb-emoji { font-size: 52px; }
#zv .zv-pb-emoji {
  position: relative; z-index: 2;
  font-size: 36px; display: block; margin-bottom: 10px;
  transition: transform .28s;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}
#zv .zv-pb-info { position: relative; z-index: 2; }
#zv .zv-pb-info h3 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
#zv .zv-pb-lg .zv-pb-info h3 { font-size: 19px; }
#zv .zv-pb-info p { color: rgba(255,255,255,.72); font-size: 11px; margin-bottom: 10px; }
#zv .zv-pb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#zv .zv-pb-price { font-size: 11px; font-weight: 700; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); padding: 4px 10px; border-radius: 999px; }
#zv .zv-pb-btn { font-size: 11px; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); padding: 6px 12px; border-radius: 9px; transition: background .2s; }
#zv .zv-soon { opacity: .72; }
#zv .zv-pb-badge { position: absolute; z-index: 3; top: 12px; right: 12px; background: rgba(15,23,42,.7); backdrop-filter: blur(8px); color: #fff; font-size: 9px; font-weight: 700; padding: 4px 9px; border-radius: 999px; font-family: var(--fe); }

/* ════════════════════════
   محصولات محبوب
════════════════════════ */
#zv .zv-sec-popular {
  background: #FFFFFF;
  padding: 28px 0 36px;
}
#zv .zv-pg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
#zv .zv-pc {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15,23,42,.06);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
#zv .zv-pc:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.28);
}
#zv .zv-pc-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
#zv .zv-pc-thumb {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff; /* بدون گرادینت */
  overflow: hidden;
}
#zv .zv-pc-thumb img,
#zv .zv-pc-img {
  max-width: 78%;
  max-height: 78%;
  width: auto;
  height: auto;
  object-fit: contain; /* عکس وسط و کامل دیده می‌شه */
  display: block;
}
#zv .zv-pc-placeholder {
  font-size: 42px;
  line-height: 1;
}
#zv .zv-pc-sale {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #DC2626;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(220,38,38,.35);
  z-index: 2;
}
#zv .zv-pc-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
}
#zv .zv-pc-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  text-align: center; /* متن‌ها وسط */
}
#zv .zv-pc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
#zv .zv-pc-tag {
  font-size: 11px;
  color: var(--sub);
}
#zv .zv-pc-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#zv .zv-pc-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1;
  line-height: 1.35;
}
/* قیمت تخفیف‌خورده: خط‌خورده + قیمت جدید زیر هم، نه روی هم */
#zv .zv-pc-price del {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  opacity: .9;
  order: 1;
}
#zv .zv-pc-price ins {
  text-decoration: none;
  color: #DC2626;
  font-weight: 800;
  order: 2;
}
#zv .zv-pc-add {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(37,99,235,.1);
  color: var(--blue);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, transform .2s;
}
#zv .zv-pc:hover .zv-pc-add {
  background: var(--blue);
  color: #fff;
  transform: scale(1.06);
}

/* ════════════════════════
   چرا ما + آمار
════════════════════════ */
#zv .zv-sec-why { background: #F1F5F9; padding: 20px 0 30px;}
#zv .zv-wg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#zv .zv-swiper-why { overflow: hidden; }
#zv .zv-why-pagination { display: none; }
#zv .zv-swiper-why .swiper-slide { height: auto; }
#zv .zv-wc { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: 0 4px 14px rgba(15,23,42,.05); transition: transform .25s, box-shadow .25s, border-color .25s; }
#zv .zv-wc:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(37,99,235,.12); border-color: rgba(37,99,235,.25); }
#zv .zv-wc-icon { width: 42px; height: 42px; border-radius: 11px; margin-bottom: 13px; background: rgba(37,99,235,.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 18px; }
#zv .zv-wc h4 { font-size: 14px; font-weight: 700; margin-bottom: 7px; color: var(--ink); }
#zv .zv-wc p { font-size: 12px; color: var(--sub); line-height: 1.8; }

#zv .zv-st { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; margin-top: 40px; border-top: 1px solid rgba(15,23,42,.08); padding-top: 32px; }
#zv .zv-num { font-size: 28px; font-weight: 800; color: var(--blue); }
#zv .zv-lbl { font-size: 12px; color: var(--sub); margin-top: 4px; }

/* ════════════════════════
   نظرات — Swiper
════════════════════════ */
#zv .zv-sec-reviews { background: var(--white); padding: 20px 0 30px;}
#zv .zv-swiper-reviews .swiper-slide { height: auto; }
#zv .zv-rc { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: 0 4px 14px rgba(15,23,42,.05); height: 100%; transition: transform .25s, box-shadow .25s; }
#zv .zv-rc:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(37,99,235,.1); }
#zv .zv-stars { color: #F59E0B; font-size: 13px; margin-bottom: 10px; letter-spacing: 2px; }
#zv .zv-quote { font-size: 13px; line-height: 1.9; color: #334155; margin-bottom: 16px; }
#zv .zv-ru { display: flex; align-items: center; gap: 10px; }
#zv .zv-ra { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-l)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
#zv .zv-ru h5 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
#zv .zv-ru small { font-size: 11px; color: var(--sub); }

/* ════════════════════════
   مقالات — Swiper
════════════════════════ */
#zv .zv-sec-articles { background: #F8FAFC; border-top: 1px solid var(--border); padding: 20px 0 30px;}
#zv .zv-swiper-blog .swiper-slide { height: auto; }
#zv .zv-ac { display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 14px rgba(15,23,42,.05); transition: transform .25s, box-shadow .25s, border-color .25s; height: 100%; }
#zv .zv-ac:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(37,99,235,.13); border-color: rgba(37,99,235,.25); }
#zv .zv-ac-thumb { height: 145px; display: flex; align-items: center; justify-content: center; font-size: 40px; position: relative; background: linear-gradient(135deg, var(--c1, rgba(37,99,235,.08)), var(--c2, rgba(96,165,250,.04))); overflow: hidden; }
#zv .zv-ac-thumb img { width: 100%; height: 100%; object-fit: cover; }
#zv .zv-ac-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,23,42,.3)); pointer-events: none; }
#zv .zv-ac-cat { position: absolute; bottom: 10px; right: 12px; z-index: 2; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
#zv .zv-ac-body { padding: 16px; }
#zv .zv-ac-body h4 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px; line-height: 1.6; }
#zv .zv-ac-body p { font-size: 12px; color: var(--sub); line-height: 1.8; margin-bottom: 13px; }
#zv .zv-ac-meta { display: flex; align-items: center; justify-content: space-between; }
#zv .zv-ac-date { font-size: 11px; color: var(--muted); }
#zv .zv-ac-read { font-size: 11.5px; font-weight: 600; color: var(--blue); }

/* ════════════════════════
   FAQ آکاردئون
════════════════════════ */
#zv .zv-sec-faq { background: #EFF6FF; border-top: 1px solid #DBEAFE; padding: 20px 0 30px; }
#zv .zv-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
#zv .zv-faq-item { background: var(--white); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
#zv .zv-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; background: none; border: none; cursor: pointer; font-family: var(--ff); font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; }
#zv .zv-faq-q:hover { color: var(--blue); }
#zv .zv-faq-icon { font-size: 20px; color: var(--blue); flex-shrink: 0; transition: transform .25s; }
#zv .zv-faq-q[aria-expanded="true"] .zv-faq-icon { transform: rotate(45deg); }
#zv .zv-faq-a { padding: 0 20px 18px; }
#zv .zv-faq-a p { font-size: 13px; color: var(--sub); line-height: 1.9; }

/* ════════════════════════
   خبرنامه
════════════════════════ */
#zv .zv-sec-cta { background: linear-gradient(135deg, var(--blue-d), var(--blue)); padding: 40px 20px; position: relative; overflow: hidden; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding-left: 0; padding-right: 0;}
#zv .zv-sec-cta .zv-cta-in { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
#zv .zv-sec-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 20% 50%, rgba(255,255,255,.12), transparent); }
#zv .zv-cta-in { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; text-align: center; }
#zv .zv-cta-in h3 { color: #fff; font-size: 24px; font-weight: 800; margin-bottom: 8px; }
#zv .zv-cta-in p { color: rgba(255,255,255,.85); font-size: 14px; margin-bottom: 26px; }
#zv .zv-cta-form { max-width: 400px; margin: 0 auto; display: flex; gap: 8px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 13px; padding: 6px; }
#zv .zv-cta-form input { flex: 1; background: none; border: none; outline: none; color: #fff; padding: 9px 12px; font-family: var(--ff); font-size: 13px; }
#zv .zv-cta-form input::placeholder { color: rgba(255,255,255,.65); }
#zv .zv-cta-form button { background: #fff; color: var(--blue); border: none; padding: 9px 20px; border-radius: 8px; font-family: var(--ff); font-weight: 700; font-size: 13px; cursor: pointer; }

/* ════════════════════════
   ریسپانسیو
════════════════════════ */
@media (max-width: 1024px) {
  #zv .zv-bg { grid-template-columns: repeat(3, 1fr); }
  #zv .zv-pb-lg { grid-column: span 1; grid-row: span 1; min-height: 175px; }
  #zv .zv-pb-lg .zv-pb-emoji { font-size: 36px; }
  #zv .zv-wg { grid-template-columns: repeat(2, 1fr); }
  #zv .zv-st { grid-template-columns: repeat(2, 1fr); }
  #zv .zv-pg { grid-template-columns: repeat(2, 1fr) !important; }
}

/* دسکتاپ و تبلت: گرید ثابت، بدون اثر Swiper */
@media (min-width: 768px) {
  #zv .zv-swiper-why {
    overflow: visible !important;
  }

  /* محصولات محبوب: دسکتاپ ۴ ستون (تبلت در max-width:1024 روی ۲ می‌رود) */
  #zv .zv-pg { grid-template-columns: repeat(4, 1fr); }

  #zv .zv-swiper-why .swiper-wrapper.zv-wg {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
  }
  #zv .zv-swiper-why .swiper-slide {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    flex-shrink: 1 !important;
  }
  #zv .zv-swiper-why .zv-wc {
    height: 100%;
  }
  #zv .zv-why-pagination {
    display: none !important;
  }
}

/* تبلت: دو ستون */
@media (min-width: 768px) and (max-width: 1024px) {
  #zv .zv-swiper-why .swiper-wrapper.zv-wg {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* موبایل: اسلایدر چرا ما (گرید ۲ستونهٔ ۱۰۲۴ را خنثی می‌کند) */
@media (max-width: 767px) {
  #zv .zv-swiper-why {
    overflow: hidden;
  }
  #zv .zv-swiper-why .swiper-wrapper.zv-wg {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    transform: translate3d(0, 0, 0);
  }
  #zv .zv-swiper-why .swiper-slide {
    height: auto;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  #zv .zv-swiper-why .zv-wc {
    height: 100%;
  }
  #zv .zv-why-pagination {
    display: block !important;
    position: relative;
    margin-top: 16px;
  }
  #zv .zv-why-pagination .swiper-pagination-bullet {
    background: var(--blue);
    opacity: .25;
  }
  #zv .zv-why-pagination .swiper-pagination-bullet-active {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  #zv .zv-bg { grid-template-columns: 1fr; }
  /* محبوب: موبایل هم ۲×۲ */
  #zv .zv-pg { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  #zv .zv-hero-inner h1 { font-size: 24px; }
  #zv .zv-sh-row { flex-direction: column; align-items: flex-end; }
}

/* ═══════════════════════════════════════════════════════
   بخش دسته‌بندی شیشه‌ای (Glassmorphism)
═══════════════════════════════════════════════════════ */

#zv .zv-sec-categories {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    padding: 20px 0 20px;
}

#zv .zv-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

#zv .zv-cat-item {
    /* طراحی شیشه‌ای (Glassmorphism) */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 25px 15px 20px;
    text-align: center;
    text-decoration: none !important;
    color: #1E293B !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* افکت هاله نورانی در هاور */
#zv .zv-cat-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

#zv .zv-cat-item:hover::before {
    opacity: 1;
}

#zv .zv-cat-item:hover {
    transform: translateY(-8px) scale(1.03);
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
    border-color: rgba(255, 255, 255, 0.7);
}

#zv .zv-cat-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 14px;
    transition: transform 0.3s;
    overflow: hidden;
}

#zv .zv-cat-item:hover .zv-cat-icon {
    transform: scale(1.1) rotate(-5deg);
}

#zv .zv-cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#zv .zv-cat-name {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #0F172A;
}

#zv .zv-cat-count {
    font-size: 11px;
    color: #64748B;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    padding: 2px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 4px;
}

#zv .zv-cat-arrow {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 14px;
    color: #2563EB;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.5);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#zv .zv-cat-item:hover .zv-cat-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ===== ریسپانسیو برای دسته‌بندی ===== */
@media (max-width: 768px) {
    #zv .zv-cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 14px;
    }

    #zv .zv-cat-item {
        padding: 18px 10px 16px;
    }

    #zv .zv-cat-icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    #zv .zv-cat-name {
        font-size: 13px;
    }

    #zv .zv-cat-arrow {
        display: none;
    }
}

@media (max-width: 480px) {
    #zv .zv-cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }

    /* محبوب: ۲ ستون در موبایل کوچک */
    #zv .zv-pg { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }

    #zv .zv-cat-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    #zv .zv-cat-name {
        font-size: 12px;
    }

    #zv .zv-cat-count {
        font-size: 10px;
        padding: 1px 8px;
    }
}

/* ═══════════════════════════════════════════════════════
   بنر تبلیغاتی زیر بنرهای محصول (جایگزین موقت دسته‌بندی)
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   اسلایدر بنرهای تبلیغاتی (۳ بنر)
═══════════════════════════════════════════════════════ */
#zv .zv-sec-home-promo {
  background: #FFFFFF;
  padding: 24px 0 10px;
}

#zv .zv-swiper-promo {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

#zv .zv-home-promo-link {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  transition: transform .25s, box-shadow .25s;
}

#zv .zv-home-promo-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.12);
}

#zv .zv-home-promo-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px; /* ← ارتفاع نمایش بنر را از اینجا کنترل کن */
  object-fit: cover;
}

/* نقطه‌ها */
#zv .zv-promo-pagination {
  position: absolute !important;
  bottom: 14px !important;
  left: 0;
  right: 0;
  z-index: 5;
}
#zv .zv-promo-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: .45;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: opacity .2s, width .2s, border-radius .2s;
}
#zv .zv-promo-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 22px;
  border-radius: 999px;
  background: #fff;
}

/* فلش‌ها */
#zv .zv-promo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}
#zv .zv-promo-nav:hover {
  background: rgba(37, 99, 235, 0.9);
  transform: translateY(-50%) scale(1.05);
}
#zv .zv-promo-prev { right: 14px; }
#zv .zv-promo-next { left: 14px; }

@media (max-width: 768px) {
  #zv .zv-sec-home-promo {
    padding: 28px 0 6px;
  }
  #zv .zv-home-promo-img {
    max-height: 240px; /* ← ارتفاع موبایل */
  }
  #zv .zv-swiper-promo {
    border-radius: 14px;
  }
  #zv .zv-promo-nav {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
  #zv .zv-promo-prev { right: 8px; }
  #zv .zv-promo-next { left: 8px; }
}



/* ── اسلایدر نظرات / مقالات: نقطه‌ها به‌جای فلش ── */
#zv .zv-swiper-reviews,
#zv .zv-swiper-blog {
  overflow: hidden;
  padding-bottom: 8px;
}
#zv .zv-rev-pagination,
#zv .zv-blog-pagination {
  position: relative !important;
  margin-top: 22px;
  bottom: auto !important;
}
#zv .zv-rev-pagination .swiper-pagination-bullet,
#zv .zv-blog-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--blue);
  opacity: .25;
  transition: opacity .2s, width .2s, border-radius .2s;
}
#zv .zv-rev-pagination .swiper-pagination-bullet-active,
#zv .zv-blog-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 22px;
  border-radius: 999px;
}

/* کارت نظر کمی مدرن‌تر */
#zv .zv-rc {
  background: linear-gradient(180deg, #fff 0%, #F8FAFC 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
#zv .zv-rc:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(37,99,235,.12);
}

/* کارت مقاله */
#zv .zv-ac {
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
#zv .zv-ac-thumb {
  height: 160px;
}

/* ═══ اسلایدرهای هوم (تخفیف / پکیج / ویژه) ═══ */
#zv .zv-sec-slider-block {
  background: #fff;
  padding: 28px 0 36px;
}
#zv .zv-sec-sale { background: #FFF7F7; }
#zv .zv-sec-packages { background: #F8FAFC; }
#zv .zv-sec-special { background: #F0F7FF; }

#zv .zv-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
#zv .zv-slider-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
#zv .zv-slider-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(37,99,235,.1);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}
#zv .zv-sec-sale .zv-slider-icon { background: rgba(220,38,38,.1); color: #DC2626; }
#zv .zv-slider-title { font-size: 20px; font-weight: 800; margin: 0 0 2px; color: var(--ink); }
#zv .zv-slider-sub { margin: 0; font-size: 13px; color: var(--sub); }

#zv .zv-slider-nav { display: flex; gap: 8px; }
#zv .zv-sl-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff;
  color: var(--ink); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
#zv .zv-sl-btn:hover {
  background: var(--blue); color: #fff; border-color: var(--blue);
}

#zv .zv-swiper-sale,
#zv .zv-swiper-packages,
#zv .zv-swiper-special { overflow: hidden; }

#zv .zv-sl-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 16px 14px 14px;
  height: 100%; text-align: center;
  box-shadow: 0 4px 16px rgba(15,23,42,.05);
  transition: transform .2s, box-shadow .2s;
}
#zv .zv-sl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(37,99,235,.12);
}
#zv .zv-sl-thumb {
  position: relative;
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
#zv .zv-sl-thumb img {
  max-width: 80%; max-height: 100%;
  object-fit: contain;
}
#zv .zv-sl-ph { font-size: 40px; }
#zv .zv-sl-off {
  position: absolute; top: 0; right: 0;
  background: #DC2626; color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 4px 9px; border-radius: 999px;
}
#zv .zv-sl-name {
  font-size: 13px; font-weight: 700; color: var(--ink);
  margin: 0 0 8px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em;
}
#zv .zv-sl-price {
  font-size: 13px; font-weight: 800; color: var(--blue);
  margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#zv .zv-sl-price del { font-size: 11px; color: var(--muted); font-weight: 500; }
#zv .zv-sl-price ins { text-decoration: none; color: #DC2626; }
#zv .zv-sl-buy {
  margin-top: auto;
  display: block;
  background: linear-gradient(135deg, var(--blue), var(--blue-l));
  color: #fff; font-weight: 700; font-size: 13px;
  padding: 9px 0; border-radius: 10px;
}

/* کارت پکیج (شبیه یوسی) */
#zv .zv-pkg-card {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 18px 14px 16px;
  height: 100%; text-align: center;
  box-shadow: 0 4px 16px rgba(15,23,42,.05);
  transition: transform .2s, box-shadow .2s;
}
#zv .zv-pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(37,99,235,.12);
}
#zv .zv-pkg-circle {
  width: 88px; height: 88px; border-radius: 50%;
  border: 3px solid #E2E8F0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; overflow: hidden; background: #F8FAFC;
}
#zv .zv-pkg-circle img {
  max-width: 70%; max-height: 70%; object-fit: contain;
}
#zv .zv-pkg-amount {
  font-size: 20px; font-weight: 900; color: #475569;
}
#zv .zv-pkg-label {
  font-size: 14px; font-weight: 800; color: var(--ink);
  margin-bottom: 12px;
}
#zv .zv-pkg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 4px;
}
#zv .zv-pkg-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  flex: 1;
  text-align: right;
}
#zv .zv-pkg-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(37,99,235,.1);
  color: var(--blue);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, transform .2s;
}
#zv .zv-pkg-card:hover .zv-pkg-arrow {
  background: var(--blue);
  color: #fff;
  transform: scale(1.06);
}