/* ==========================================================================
   VENDORHA — استایل پایه و کامپوننت‌ها
    پورت‌شده از تم اصلی شما + لایهٔ گلس‌مورفیسم.
   ========================================================================== */

/* ======================================================================
   ۱) پایه
   ====================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* مورد ۳: اجزای رابط (دکمه‌ها، ناوبری، آیکن‌ها، نشان‌ها) قابل انتخاب نباشند
   تا تجربهٔ اپ‌مانند بدهند. متنِ محتوا (عنوان، توضیحات) همچنان قابل کپی است. */
button, .btn, .act, .fav, .pd-tool, .mobile-nav, .topbar, .badge, .mbadge,
nav, .drawer-head, .up-box, .cmp-bar, .df-btn, .rv-tab, .page-search-x,
.dr-x, .up-card-x, .cmp-chip-x, .modal-actions, .hamburger, .logo,
.section-head a, .cats .cat, .timer, .mini-chart {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* عناصری که کاربر باید بتواند متنشان را کپی کند، صراحتاً قابل انتخاب */
.pd-desc, .pd-info h1, .spec-table, .report-table, input, textarea, p.about,
.rv-desc, .card-title, .dr-main {
  -webkit-user-select: text;
  user-select: text;
}

html { scroll-behavior: smooth; }
/* ==========================================================================
   قاعدهٔ سراسری hidden
   --------------------------------------------------------------------------
   هر قاعده‌ای که `display: grid/flex/block` بگذارد، رفتار پیش‌فرض صفت
   `hidden` را بازنویسی می‌کند و عنصر «مخفی» همچنان جا می‌گیرد و کلیک‌ها را
   می‌گیرد. این یک تلهٔ کلاسیک CSS است؛ با قاعدهٔ زیر برای همیشه بسته می‌شود.
   (اگر جایی عمداً می‌خواهید عنصر hidden دیده شود، از کلاس دیگری استفاده کنید.)
   ========================================================================== */
[hidden] { display: none !important; }

body {
  /* زنجیرهٔ فونت فارسی: Vazirmatn خودمیزبان، سپس فونت‌های سیستمی هر
     پلتفرم (اندروید، iOS، ویندوز، لینوکس) تا متن هرگز بدشکل نشود. */
  font-family: 'Vazirmatn', 'Vazir', 'IRANSans', 'Noto Naskh Arabic',
               'Segoe UI', Tahoma, 'Droid Arabic Naskh', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  transition: background .25s, color .25s;
  /* بافت نرم پس‌زمینه: دو هالهٔ سبزِ کم‌رنگ که حس عمقِ «شیشه روی محیط» می‌دهد */
  background-image:
    radial-gradient(60% 50% at 100% 0%, rgba(0, 168, 89, .06), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(0, 168, 89, .05), transparent 60%);
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* کانتینر اصلی: ۹۰٪ عرض صفحه، سقف برای نمایشگرهای خیلی بزرگ */
.wrap { width: 90%; max-width: 1780px; margin-inline: auto; }

.eyebrow { color: var(--green-text); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin: 0 0 22px;
}
.section-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; }
.section-head a { color: var(--green-text); font-weight: 600; font-size: .95rem; white-space: nowrap; }
section { padding-block: clamp(34px, 5vw, 64px); }

/* دکمه‌ها */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
  padding: 12px 22px; border-radius: 12px; transition: .2s; white-space: nowrap;
}
.btn-primary { background: var(--green-btn); color: var(--on-green); }
.btn-primary:hover { background: var(--green-btn-hover); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-text); }
.icon { width: 22px; height: 22px; flex: none; }

/* ابزار کمکی گلس: هر عنصری این کلاس را بگیرد، شیشه‌ای می‌شود */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ======================================================================
   ۲) نوار بالایی (utility bar)
   ====================================================================== */
.topbar { background: var(--band); color: var(--on-band); font-size: .82rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.topbar-links { display: flex; gap: 18px; align-items: center; opacity: .85; }
.topbar-links a:hover { opacity: 1; color: var(--green-text); }
.topbar-right { display: flex; gap: 10px; align-items: center; }

/* انتخاب زبان: یک فرم جنگو که به i18n/setlang/ POST می‌کند */
.lang-pick { display: flex; gap: 2px; background: rgba(255, 255, 255, .08); border-radius: 8px; padding: 3px; }
.lang-pick .lang-form { display: inline-flex; margin: 0; }
.lang-pick button { padding: 3px 9px; border-radius: 6px; font-size: .78rem; opacity: .7; }
.lang-pick button.on { background: var(--green-btn); opacity: 1; font-weight: 700; }
.lang-pick button:hover { opacity: 1; }

.theme-btn {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; background: rgba(255, 255, 255, .08);
}
.theme-btn:hover { background: var(--green-btn); }

/* ======================================================================
   ۳) هدر اصلی — شیشه‌ایِ چسبان (عنصر امضای لایهٔ گلس)
   ====================================================================== */
.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}
.header .wrap { display: flex; align-items: center; gap: 20px; height: 78px; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo img { height: 42px; width: auto; }
.logo b { font-size: 1.45rem; font-weight: 900; letter-spacing: .5px; }
.logo b span { color: var(--green-text); }

/* دکمهٔ مگامنو */
.mega-btn {
  display: flex; align-items: center; gap: 8px; font-weight: 700;
  background: var(--green-100); color: var(--green-text-soft); padding: 11px 16px;
  border-radius: 12px; flex: none;
}
[data-theme="dark"] .mega-btn { color: var(--green-text); }
.mega-btn:hover { background: var(--green-btn); color: var(--on-green); }

/* جستجو */
.search {
  flex: 1; display: flex; align-items: center; background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 16px; min-width: 0;
}
.search:focus-within { border-color: var(--green); }
.search input {
  flex: 1; border: none; background: none; outline: none; color: var(--ink);
  font: inherit; font-size: .95rem; min-width: 0;
}
.search input::placeholder { color: var(--slate); }
.search button {
  background: var(--green-btn); color: var(--on-green); border-radius: 10px; padding: 9px 14px;
  display: flex; align-items: center; gap: 6px; font-weight: 700;
}

/* اکشن‌های هدر */
.actions { display: flex; align-items: center; gap: 6px; flex: none; }
.act {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px; border-radius: 12px; font-size: .7rem; color: var(--slate);
  min-width: 46px; justify-content: center;      /* عرض یکسان → توازن (مورد ۱۱) */
}
.act:hover { background: var(--bg); color: var(--green-text); }
.act .icon { width: 24px; height: 24px; }
.badge {
  position: absolute; top: 2px; inset-inline-end: 4px; background: var(--offer-btn); color: var(--on-offer);
  font-size: .62rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
/* مورد ۱۱: نشان خالی نباید دیده شود (display:flex بالا [hidden] را می‌پوشاند) */
.badge[hidden] { display: none; }
.hamburger { display: none; }
.search-mobile-btn { display: none; }

/* ======================================================================
   ۴) هیرو / اسلایدر — لیکویید‌گلس به‌عنوان امضای صفحه
   ====================================================================== */
.hero { padding-top: clamp(20px, 3vw, 34px); }
.slider {
  position: relative; border-radius: 24px; overflow: hidden;
  min-height: clamp(300px, 38vw, 440px); box-shadow: var(--shadow-lg);
}
.slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease;
  display: flex; align-items: center; padding: clamp(24px, 5vw, 68px);
}
.slide.on { opacity: 1; }
.slide-1 {
  background:
    radial-gradient(120% 140% at 85% 10%, rgba(255, 255, 255, .12), transparent 50%),
    linear-gradient(135deg, #00824A 0%, #00A859 55%, #16C173 100%);
}
.slide-2 { background: linear-gradient(135deg, #0F1115 0%, #1d242b 60%, #00824A 130%); }
.slide-3 {
  background:
    radial-gradient(100% 120% at 10% 90%, rgba(0, 168, 89, .35), transparent 55%),
    linear-gradient(135deg, #101418, #1a2129);
}

/* حباب‌های شناورِ لیکویید‌گلس پشت محتوای هیرو (امضا) */
.slide-blobs { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.slide-blobs span {
  position: absolute; border-radius: 50%; filter: blur(34px); opacity: .55;
  animation: float 14s ease-in-out infinite;
}
.slide-blobs span:nth-child(1) {
  width: 280px; height: 280px; background: rgba(255, 255, 255, .35);
  top: -60px; inset-inline-end: 8%;
}
.slide-blobs span:nth-child(2) {
  width: 220px; height: 220px; background: rgba(22, 193, 115, .45);
  bottom: -70px; inset-inline-start: 14%; animation-delay: -5s;
}
.slide-blobs span:nth-child(3) {
  width: 160px; height: 160px; background: rgba(255, 255, 255, .25);
  top: 40%; inset-inline-start: 45%; animation-delay: -9s;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(0, -26px) scale(1.08); }
}

/* پنل شیشه‌ای متنِ هیرو */
.slide-inner {
  max-width: 560px; color: #fff; position: relative; z-index: 2;
  padding: clamp(20px, 3vw, 34px);
  border-radius: 22px;
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}
.slide-inner .tag {
  display: inline-block; background: rgba(255, 255, 255, .16);
  padding: 6px 14px; border-radius: 30px; font-size: .82rem; font-weight: 700;
  margin-bottom: 16px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.slide-inner h1, .slide-inner .slide-title { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 900; line-height: 1.25; margin-bottom: 14px; }
.slide-inner p { font-size: clamp(.95rem, 1.6vw, 1.15rem); opacity: .92; margin-bottom: 26px; max-width: 440px; }
.slide-inner .btn-primary { background: #fff; color: var(--green-on-white); }
.slide-inner .btn-primary:hover { background: var(--band); color: var(--on-band); }
.slide-inner .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.slide-inner .btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.slide-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* نقش بزرگ V/سبد به‌عنوان عنصر گرافیکی گوشهٔ هیرو */
.slide-mark {
  position: absolute; inset-inline-end: -40px; bottom: -50px; width: min(46%, 420px);
  opacity: .14; z-index: 1; color: #fff;
}
.slide-mark svg { width: 100%; height: auto; }

.dots {
  position: absolute; bottom: 18px; inset-inline-start: 50%; transform: translateX(50%);
  display: flex; gap: 8px; z-index: 3;
}
.dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.dots button.on { width: 26px; border-radius: 5px; background: #fff; }

/* ======================================================================
   ۵) دسته‌بندی‌های سریع
   ====================================================================== */
.cats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.cat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 10px; text-align: center; transition: .2s; display: flex;
  flex-direction: column; align-items: center; gap: 10px;
}
.cat:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow); }
.cat .ic {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; background: var(--green-100); color: var(--green-text-soft); font-size: 1.6rem;
}
[data-theme="dark"] .cat .ic { color: var(--green-text); }
.cat span { font-size: .84rem; font-weight: 600; }

/* ======================================================================
   ۶) انواع تأمین‌کننده (کارخانه/فروشنده/خدمات)
   ====================================================================== */
.vendors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vcard {
  position: relative; border-radius: 20px; overflow: hidden; padding: 30px; min-height: 200px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate;
}
.vcard::after { content: ""; position: absolute; inset: 0; z-index: -1; transition: .3s; }
.vcard:hover::after { transform: scale(1.05); }
.v1::after { background: linear-gradient(160deg, #00A859, #00824A); }
.v2::after { background: linear-gradient(160deg, #1d242b, #0F1115); }
.v3::after { background: linear-gradient(160deg, #11806e, #0c5a4a); }
.vcard .vnum { font-size: .8rem; opacity: .8; font-weight: 700; margin-bottom: auto; }
.vcard h3 { font-size: 1.45rem; font-weight: 900; margin-bottom: 6px; }
.vcard p { font-size: .9rem; opacity: .9; margin-bottom: 16px; }
.vcard .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; }
.vcard .more .icon { width: 18px; height: 18px; }

/* ======================================================================
   ۷) آفرها / محصولات
   ====================================================================== */
.offer-strip {
  display: flex; align-items: center; gap: 14px; background: var(--band);
  color: #fff; border-radius: 16px; padding: 14px 22px; margin-bottom: 22px; flex-wrap: wrap;
}
.offer-strip .fire { font-size: 1.4rem; }
.offer-strip b { font-size: 1.05rem; }
.offer-strip .timer { margin-inline-start: auto; display: flex; gap: 6px; }
.offer-strip .timer span {
  background: var(--offer-btn); color: var(--on-offer); font-weight: 800;
  border-radius: 8px; padding: 4px 9px; font-variant-numeric: tabular-nums;
}

.products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: .2s; display: flex; flex-direction: column;
}
.pcard:hover { border-color: var(--green); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.pthumb {
  position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green-100), var(--surface));
}
.pthumb .mark { width: 46%; opacity: .45; color: var(--green-text); }
/* تصویر واقعی محصول (از MinIO) تمام کادر را پر می‌کند */
.pthumb .thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pthumb .off {
  position: absolute; top: 10px; inset-inline-start: 10px; background: var(--offer-btn);
  color: var(--on-offer); font-weight: 800; font-size: .78rem; padding: 4px 9px; border-radius: 9px;
}
/* ابزارهای روی تصویر: علاقه‌مندی + مقایسه، به‌صورت ستونی روی هم */
.pthumb-tools {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
}
.fav {
  width: 34px; height: 34px; background: var(--surface); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
  color: var(--slate); transition: .18s;
}
.fav:hover { color: var(--offer); }
.fav.on { color: var(--offer); }
.fav-compare:hover, .fav-compare.on { color: var(--green-text); }
.pbody { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pvendor { font-size: .74rem; color: var(--green-text); font-weight: 700; }
.ptitle {
  font-size: .92rem; font-weight: 600; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.prate { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--slate); }
.prate .s { color: var(--star); }
.pprice { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.pprice .now { font-size: 1.05rem; font-weight: 800; }
.pprice .now small { font-size: .72rem; font-weight: 600; color: var(--slate); }
.pprice .old { font-size: .78rem; color: var(--slate); text-decoration: line-through; }

/* اکشن‌های کارت محصول: خرید + مقایسه */
.pactions { display: flex; gap: 8px; margin-top: 12px; }
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; font-size: .85rem; border-radius: 10px; padding: 9px 12px; transition: .18s;
}
.pbtn .icon { width: 18px; height: 18px; }
.pbtn-buy { flex: 1; background: var(--green-btn); color: var(--on-green); }
.pbtn-buy:hover { background: var(--green-btn-hover); }
.pbtn-buy.added { background: var(--green-btn-hover); }
.pbtn-compare { flex: none; width: 42px; background: var(--bg); border: 1.5px solid var(--line); color: var(--slate); }
.pbtn-compare:hover, .pbtn-compare.on { border-color: var(--green); color: var(--green-text); }

/* نشان وریفای سه‌سطحی (بند ۳۵) — روی کارت محصول/تأمین‌کننده */
.verify {
  display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 800;
  padding: 2px 8px; border-radius: 20px; color: #1b1b1b;
}
.verify::before { content: "✔"; font-size: .7rem; }
.verify-bronze { color: #fff; }
.verify-silver { color: #1b1b1b; }
.verify-gold { color: #1b1b1b; }

/* ======================================================================
   ۸) نوار اعتماد (ویژگی‌ها)
   ====================================================================== */
/*
  ⚠️ چهار قولِ سایت — نه چهار خط متن.

  نسخهٔ پیشین یک ردیف آیکنِ سبزِ یک‌دست بود روی پس‌زمینهٔ
  ساده: در دسکتاپ به‌چشم نمی‌آمد و در موبایل دو ستون فشرده
  می‌شد که خواندنش سخت بود. حالا هرکدام یک کارت با رنگ خودش
  است تا در یک نگاه از هم جدا شوند.

  ⚠️ رنگ‌ها از `data-accent` می‌آیند، نه کلاس جدا.

  همان چهار تا هستند و هر جای دیگری که همین الگو لازم شود،
  فقط یک صفت می‌خواهد.
*/
.trust {
  position: relative;
  padding-block: 34px;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 50% 0%,
      color-mix(in srgb, var(--green) 7%, transparent) 0%,
      transparent 62%),
    var(--surface);
}

.trust-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- کارت ---------- */
.tcard {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .22s ease, border-color .22s ease,
              box-shadow .22s ease;
}

/*
  ⚠️ هالهٔ رنگی یک لایهٔ جداست، نه `background` کارت.

  اگر روی خودِ پس‌زمینه بنشیند، در حالت hover نمی‌شود فقط
  آن را پررنگ کرد بدون اینکه رنگ کارت هم بپرد.
*/
.tcard::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 100% 0%,
    var(--tc-tint) 0%, transparent 60%);
  opacity: .55; transition: opacity .22s ease;
  pointer-events: none;
}

.tcard:hover {
  transform: translateY(-3px);
  border-color: var(--tc-line);
  box-shadow: 0 14px 30px -14px var(--tc-line);
}
.tcard:hover::before { opacity: 1; }

/* ---------- آیکن ---------- */
.tcard-ic {
  position: relative; z-index: 1;
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px; color: #fff;
  background: linear-gradient(140deg, var(--tc-a), var(--tc-b));
  box-shadow: 0 8px 18px -8px var(--tc-b);
}
.tcard-ic svg { width: 23px; height: 23px; }

.tcard-txt { position: relative; z-index: 1; min-width: 0; }
.tcard-txt b {
  display: block; font-size: .95rem; font-weight: 800;
  line-height: 1.45;
}
.tcard-txt span {
  display: block; font-size: .79rem; color: var(--slate);
  line-height: 1.5;
}

/* ---------- چهار رنگ ---------- */
.tcard[data-accent="green"] {
  --tc-a: #10b981; --tc-b: #047857;
  --tc-tint: rgb(16 185 129 / .12); --tc-line: rgb(16 185 129 / .55);
}
.tcard[data-accent="blue"] {
  --tc-a: #38bdf8; --tc-b: #0369a1;
  --tc-tint: rgb(56 189 248 / .13); --tc-line: rgb(56 189 248 / .55);
}
.tcard[data-accent="violet"] {
  --tc-a: #a78bfa; --tc-b: #6d28d9;
  --tc-tint: rgb(167 139 250 / .13); --tc-line: rgb(167 139 250 / .55);
}
.tcard[data-accent="amber"] {
  --tc-a: #fbbf24; --tc-b: #b45309;
  --tc-tint: rgb(251 191 36 / .14); --tc-line: rgb(251 191 36 / .55);
}

/*
  ⚠️ در تم تیره هاله باید کم‌رنگ‌تر شود.

  همان مقدار روشنایی روی زمینهٔ تیره، کارت را می‌سوزاند و
  متن سفید رویش خوانده نمی‌شود.
*/
[data-theme="dark"] .tcard::before { opacity: .35; }
[data-theme="dark"] .tcard:hover::before { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .tcard, .tcard::before { transition: none; }
  .tcard:hover { transform: none; }
}

/*
  ⚠️ در موبایل کارت عمودی می‌شود، نه فشرده‌ی افقی.

  با دو ستون روی صفحهٔ ۳۶۰ پیکسلی، «کیف پول وندورها» کنار
  یک آیکن ۴۶ پیکسلی در دو خط می‌شکست و زیرعنوانش هم سه خط
  می‌شد. آیکن که بالا برود، متن کل عرض کارت را دارد.
*/
@media (max-width: 560px) {
  .trust { padding-block: 24px; }
  .trust-grid { gap: 10px; }

  .tcard {
    flex-direction: column; align-items: flex-start;
    gap: 10px; padding: 14px 13px; border-radius: 16px;
  }

  .tcard-ic { width: 40px; height: 40px; border-radius: 12px; }
  .tcard-ic svg { width: 20px; height: 20px; }

  .tcard-txt b { font-size: .88rem; }
  .tcard-txt span { font-size: .74rem; }
}

/* ======================================================================
   ۹) فوتر
   ====================================================================== */
.footer { background: var(--band); color: #cfd6da; padding-top: 54px; margin-top: 10px; }
.footer .cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 34px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer h4, .footer .fhead { color: #fff; font-size: 1rem; margin-bottom: 16px; font-weight: 800; }
.footer .logo b { color: #fff; }
.footer .about { font-size: .86rem; line-height: 1.9; opacity: .8; margin-top: 14px; max-width: 320px; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { font-size: .88rem; opacity: .82; }
.footer ul a:hover { color: var(--green-text); opacity: 1; }
.trust-marks { display: flex; gap: 12px; margin-top: 16px; }
.trust-marks .nemad {
  width: 78px; height: 90px; border-radius: 10px; background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .2); display: flex; align-items: center;
  justify-content: center; text-align: center; font-size: .68rem; opacity: .7; padding: 6px;
}
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .07);
  display: flex; align-items: center; justify-content: center;
}
.socials a:hover { background: var(--green-btn); color: var(--on-green); }
.footer .copy { text-align: center; padding: 20px 0; font-size: .82rem; opacity: .65; }

/* ======================================================================
   ۱۰) نوار پایین موبایل (فقط در موبایل) — شیشه‌ای
   ====================================================================== */
.mobile-nav {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 50;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border); display: none;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .06);
}
/* هم لینک‌ها و هم دکمه‌ها یکدست؛ هر آیتم سهم مساوی و چیدمان ستونی مرتب */
.mobile-nav > a,
.mobile-nav > button {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; font-size: .64rem; font-weight: 600; line-height: 1;
  color: var(--slate); padding: 6px 2px; position: relative; background: none; text-align: center;
}
.mobile-nav > a.on, .mobile-nav > button.on { color: var(--green-text); }
.mobile-nav .icon { width: 22px; height: 22px; }
.mobile-nav .mbadge {
  position: absolute; top: 2px; inset-inline-end: 50%; transform: translateX(50%) translateX(14px);
  background: var(--offer-btn); color: var(--on-offer); font-size: .56rem; font-weight: 800;
  min-width: 15px; height: 15px; border-radius: 8px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
}

/* ======================================================================
   ۱۱) ریسپانسیو
   ====================================================================== */
@media (max-width: 1100px) {
  .cats { grid-template-columns: repeat(4, 1fr); }
  .products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 920px) {
  .vendors { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .wrap { width: 92%; }
  .topbar-links { display: none; }

  /* ---- هدر موبایل: مرتب و بدون روی‌هم‌افتادگی ---- */
  .header .wrap { height: 60px; gap: 10px; position: relative; }
  .mega-btn { display: none; }          /* دسته‌ها در نوار پایین موبایل هست */
  /* جستجوی نواری هدر در موبایل حذف می‌شود؛ اما فرم داخل مودال باید بماند */
  header .search { display: none; }
  .actions { display: none; }           /* ورود/کیف/علاقه/سبد در نوار پایین */
  .hamburger { display: inline-flex; }  /* بند ۱۴: کلید منوی کشویی موبایل */
  .search-mobile-btn {
    display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
    border-radius: 12px; background: var(--green-btn); color: var(--on-green); flex: none;
  }
  /*
    لوگو دقیقاً وسط هدر (مستقل از دکمهٔ جستجو).

    ⚠️ باید به `.header` محدود باشد.

    این قاعده بدون دامنه نوشته شده بود، پس **لوگوی فوتر** هم
    `position: absolute` می‌گرفت و روی متن معرفی شناور می‌شد.
    نام سایت هم با `display: none` از فوتر ناپدید می‌شد.

    بقیهٔ قواعد همین بلوک با `.header` محدود شده‌اند؛ این یکی
    جا مانده بود.
  */
  .header .logo {
    position: absolute; inset-inline: 0; justify-content: center; pointer-events: none;
  }
  .header .logo img { height: 36px; pointer-events: auto; }
  .header .logo b { display: none; }

  .mobile-nav { display: flex; }
  /* فضای پایین برای نوار موبایل (با در نظر گرفتن ناحیهٔ امن آیفون).
     هم روی body و هم روی ظرف اصلی محتوا می‌گذاریم تا در صفحه‌هایی که
     فوتر ندارند هم آخرین سطر زیر نوار ثابت پنهان نشود. */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* فاصله‌گیر انتهای صفحه: همیشه پس از آخرین محتوا می‌نشیند تا نوار
     ثابت پایین روی چیزی نیفتد — مستقل از ساختار صفحه. */
  body::after {
    content: "";
    display: block;
    /* ارتفاع از JS می‌آید (--vh-bottom-gap) تا با تغییر واقعی نوار هماهنگ
       بماند؛ مقدار ثابت به‌عنوان پشتیبان اگر JS اجرا نشد. */
    height: var(--vh-bottom-gap, calc(66px + env(safe-area-inset-bottom)));
    flex: 0 0 auto;      /* در چیدمان flex فشرده نشود */
  }

  /* فوتر هم نباید زیر نوار ثابت برود، پس فاصله را برنمی‌داریم؛
     فقط کمی کمترش می‌کنیم چون فوتر خودش padding دارد. */
  body:has(.site-footer)::after {
    height: var(--vh-bottom-gap, calc(66px + env(safe-area-inset-bottom)));
  }

  /* افزون بر فاصله‌گیر، به ظرف‌های اصلی هم فاصله می‌دهیم. لازم است چون
     محتوای بازشونده (مثل فرم فیلتر داخل <details>) پس از محاسبهٔ اولیه
     ارتفاع می‌گیرد و بدون این، دکمه‌هایش زیر نوار پنهان می‌شوند. */
  main > :last-child,
  .page-content > .wrap > :last-child,
  .profile-body > :last-child,
  .vz-body > :last-child,
  details[open] > :last-child {
    margin-bottom: var(--vh-bottom-gap, calc(66px + env(safe-area-inset-bottom)));
  }
  /* در صفحه‌های فوتردار، فاصلهٔ ظرف لازم نیست (فاصله‌گیر body کافی است) */
  body:has(.site-footer) main > :last-child,
  body:has(.site-footer) .page-content > .wrap > :last-child {
    margin-bottom: 0;
  }
  /* وقتی نوار مقایسه هم باز است، فضای بیشتری لازم است تا محتوا زیرش نرود */
  body:has(.cmp-bar:not([hidden])) {
    padding-bottom: calc(66px + 78px + env(safe-area-inset-bottom));
  }
  /* نوار مقایسه بالای نوار ناوبری موبایل بنشیند، نه رویش */
  .cmp-bar { bottom: calc(60px + env(safe-area-inset-bottom)); }

  /* ---- شبکه‌ها ---- */
  .products { grid-template-columns: repeat(2, 1fr); }
  .cats { grid-template-columns: repeat(3, 1fr); }

  /* ---- هیرو/اسلایدر موبایل: مرتب و بدون سرریز ---- */
  .slider { min-height: 0; border-radius: 18px; }
  .slide { position: relative; padding: 22px 20px; min-height: 300px; }
  .slide:not(.on) { display: none; }    /* به‌جای روی‌هم‌چینی مطلق، فقط فعال نمایش داده شود */
  .slide-inner { max-width: 100%; padding: 18px; background: rgba(0,0,0,.28); }
  .slide-inner h1, .slide-inner .slide-title { font-size: 1.5rem; }
  .slide-inner p { font-size: .92rem; margin-bottom: 18px; }
  .slide-cta { gap: 8px; }
  .slide-cta .btn { flex: 1; justify-content: center; padding: 11px 14px; font-size: .9rem; }
  .slide-mark { display: none; }        /* نشان بزرگ گوشه در موبایل حذف */
  .slide-blobs span { filter: blur(28px); opacity: .4; }
  .dots { bottom: 12px; }
}
@media (max-width: 480px) {
  .cats { grid-template-columns: repeat(2, 1fr); }
  .footer .cols { grid-template-columns: 1fr; }
}

/* ======================================================================
   ۱۲) دسترس‌پذیری
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto; }
  .slide-blobs { display: none; } /* حباب‌های متحرک در حالت کاهش حرکت خاموش */
}
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }