/* =====================================================================
   ویو وردپرس — تم روشن پرمیوم «سفید + آبی + پاستلی»
   تمیز و حرفه‌ای | تایپوگرافی وزیرمتن | بدون انیمیشن مزاحم | RTL | iOS-ready
   ===================================================================== */

/* ---------- فونت وزیرمتن (لوکال) ---------- */
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:400; font-display:swap; src:url('../vendor/font/Vazirmatn-Regular.woff2') format('woff2'); }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:500; font-display:swap; src:url('../vendor/font/Vazirmatn-Medium.woff2') format('woff2'); }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:600; font-display:swap; src:url('../vendor/font/Vazirmatn-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:700; font-display:swap; src:url('../vendor/font/Vazirmatn-Bold.woff2') format('woff2'); }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:800; font-display:swap; src:url('../vendor/font/Vazirmatn-ExtraBold.woff2') format('woff2'); }
@font-face { font-family:'Vazirmatn'; font-style:normal; font-weight:900; font-display:swap; src:url('../vendor/font/Vazirmatn-Black.woff2') format('woff2'); }

:root {
  --bg:#fafaf7;
  --bg-2:#f3f4ef;
  --surface:#ffffff;
  --surface-2:#fafbf8;
  --border:#e4e7e0;
  --border-soft:#eef0ea;
  --text:#121a14;
  --muted:#5f6b62;
  --primary:#0f9a4d;
  --primary-dark:#0a7a3c;
  --primary-soft:#e7f7ee;
  --brown:#f97316;
  --amber:#f59e0b;
  --amber-soft:#fff4e5;
  --tan:#ea580c;
  --tan-soft:#ffedd5;
  --accent:#e5484d;
  --accent-soft:#fdecec;
  --violet:#2563eb;
  --violet-soft:#e8effd;
  --blue:#2563eb;
  --blue-soft:#e8effd;
  --star:#f59e0b;
  --green:#0f9a4d;
  --green-soft:#e7f7ee;
  --red:#e5484d;
  --red-soft:#fdecec;
  --black:#0e1511;
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 12px 32px rgba(12,50,28,.10);
  --shadow-sm:0 2px 10px rgba(12,50,28,.07);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body {
  font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.9; font-size:15px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { touch-action:manipulation; font-family:inherit; }
::selection { background:rgba(18,161,80,.85); color:#fff; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:#b9c4b9; border-radius:20px; }
::-webkit-scrollbar-thumb:hover { background:#9aab9e; }

.container { width:min(1200px,94%); max-width:1200px; margin-inline:auto; padding-inline:0; }
.muted { color:var(--muted); }
.small { font-size:.8rem; }
.text-primary { color:var(--primary) !important; }
.text-gold { color:var(--brown) !important; }
.text-green { color:var(--green) !important; }
.text-red { color:var(--red) !important; }
.text-center { text-align:center; }
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.5rem} .mb-4{margin-bottom:2rem}
.hidden{display:none} .d-flex{display:flex} .d-block{display:block}

/* =====================================================================
   هماهنگ‌سازی بوت‌استرپ روشن با پالت آبی
   ===================================================================== */
[data-bs-theme="light"] {
  --bs-body-bg:#f4f7fc; --bs-body-color:#16223c; --bs-body-color-rgb:22,34,60;
  --bs-secondary-color:#64748b; --bs-secondary-color-rgb:100,116,139;
  --bs-border-color:#e2e9f3; --bs-primary:#0f9a4d; --bs-primary-rgb:15,154,77;
  --bs-link-color:#2563eb; --bs-link-hover-color:#1d4ed8;
  --bs-secondary-bg:#edf2fa; --bs-tertiary-bg:#e8f0fe;
  --bs-emphasis-color:#16223c; --bs-emphasis-color-rgb:22,34,60;
  --bs-card-bg:#ffffff; --bs-card-border-color:#e2e9f3;
  --bs-form-control-bg:#ffffff; --bs-form-control-border-color:#dfe7f2; --bs-form-control-color:#16223c;
  --bs-input-focus-border-color:#2563eb;
}
.collapsing { transition:none !important; }
.offcanvas { transition:none !important; }

/* ---------- دکمه‌ها ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(180deg,#17b45c,#0f8f45); color:#fff;
  border:1px solid transparent; border-radius:12px;
  padding:.62rem 1.3rem; font-weight:800; font-size:.9rem;
  cursor:pointer; font-family:inherit; line-height:1.7; min-height:42px;
  box-shadow:0 6px 18px rgba(18,161,80,.28);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn:hover { background:linear-gradient(180deg,#1cbe64,#119c4b); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(18,161,80,.34); }
.btn-outline { background:var(--surface); border:1px solid var(--border); color:var(--primary-dark); box-shadow:var(--shadow-sm); transition:all .25s ease; }
.btn-outline:hover { border-color:var(--primary); background:var(--primary-soft); transform:translateY(-2px); }
.btn-outline:hover { border-color:var(--primary); background:var(--primary-soft); color:var(--primary-dark); }
.btn-ghost { background:var(--primary-soft); color:var(--primary-dark); box-shadow:none; transition:all .25s ease; }
.btn-ghost:hover { background:#d6f0e0; transform:translateY(-2px); }
.btn-ghost:hover { background:#d9f7e6; color:var(--primary-dark); }
.btn-brown { background:linear-gradient(180deg,#17b45c,#0b6b36); color:#fff; box-shadow:0 4px 14px rgba(18,161,80,.28); }
.btn-green { background:linear-gradient(180deg,#17b45c,#0f8f45); color:#fff; box-shadow:0 4px 14px rgba(18,161,80,.25); transition:all .25s ease; }
.btn-green:hover { transform:translateY(-2px); }
.btn-danger { background:var(--red-soft); color:var(--red); box-shadow:none; }
.btn-danger:hover { background:#fad9dc; color:#c93439; }
.btn-lg { padding:.9rem 1.7rem; font-size:1rem; min-height:52px; border-radius:14px; }
.btn-sm { padding:.42rem .9rem; font-size:.8rem; min-height:36px; border-radius:10px; }
.btn-block { width:100%; }

/* ---------- نوار بالایی ---------- */
.topbar { background:linear-gradient(90deg,#eef8f2,#fff7ec); border-bottom:1px solid var(--border-soft); font-size:.78rem; color:#3d5247; padding:.5rem 0; }
.topbar .container { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.topbar b { color:var(--primary-dark); }
.topbar a { color:var(--primary); font-weight:700; }
.topbar a:hover { text-decoration:underline; }

/* ---------- هدر ---------- */
.site-header {
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50; box-shadow:0 1px 0 rgba(18,60,35,.06);
}
.header-main { display:flex; align-items:center; gap:1rem; padding:.85rem 0; }
.brand { display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.brand-mark {
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,#17b45c,#0b6b36); color:#fff; flex-shrink:0;
  box-shadow:0 6px 18px rgba(18,161,80,.30); font-size:1.25rem;
}
.brand-name { font-weight:900; font-size:1.05rem; line-height:1.35; }
.brand-name b { color:var(--text); }
.brand-name b span { color:var(--primary); }
.brand-name small { display:block; font-size:.62rem; color:var(--muted); font-weight:600; }

.hsearch { flex:1; display:flex; align-items:center; gap:.5rem; background:var(--bg-2); border:1px solid var(--border); border-radius:13px; padding:.42rem .5rem .42rem 1rem; max-width:520px; transition:border-color .25s, box-shadow .25s; }
.hsearch:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(18,161,80,.14); }
.hsearch svg, .hsearch i { color:var(--muted); flex-shrink:0; }
.hsearch input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-family:inherit; font-size:.9rem; }
.hsearch input::placeholder { color:var(--muted); }
.hsearch input:focus { color:var(--text); }

.h-actions { display:flex; align-items:center; gap:.5rem; margin-inline-start:auto; }
.icon-btn { position:relative; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--text); cursor:pointer; font-size:1rem; }
.icon-btn:hover { border-color:var(--primary); color:var(--primary); }
.cart-badge { position:absolute; top:-6px; inset-inline-end:-6px; background:var(--accent); color:#fff; font-size:.66rem; font-weight:900; min-width:19px; height:19px; border-radius:10px; display:grid; place-items:center; padding:0 4px; }
.search-toggle { display:none; }

.h-nav { display:flex; align-items:center; gap:.3rem; padding-bottom:.35rem; overflow:visible; flex-wrap:wrap; }
@media (max-width: 1100px) and (min-width: 861px) {
  .h-nav { flex-wrap:nowrap; overflow-x:auto; overflow-y:visible; scrollbar-width:none; }
  .nav-mega .mega-panel { position:fixed; }
}
.h-nav::-webkit-scrollbar { display:none; }
.h-nav a { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:11px; font-size:.86rem; font-weight:700; color:var(--muted); white-space:nowrap; }
.h-nav a i { font-size:.82rem; color:var(--muted); }
.h-nav a { transition:all .22s ease; }
.h-nav a:hover { color:var(--primary-dark); background:var(--primary-soft); transform:translateY(-1px); }
.h-nav a:hover i { color:var(--primary); }
.h-nav a.active { color:var(--primary); background:var(--primary-soft); }
.h-nav a.active i { color:var(--primary); }
.h-nav a.nav-sale { color:#fff; background:linear-gradient(135deg,#e5484d,#c62f34); border:1px solid transparent; box-shadow:0 4px 12px rgba(229,72,77,.3); }
.h-nav a.nav-sale:hover { background:linear-gradient(135deg,#f0575c,#e5484d); color:#fff; }

.hamburger { display:none; }

/* ---------- منوی موبایل (offcanvas) ---------- */
.offcanvas { background:var(--surface); color:var(--text); }
.offcanvas-header { border-bottom:1px solid var(--border-soft); }
.m-search { display:flex; gap:.5rem; margin-bottom:.8rem; }
.m-search input { flex:1; background:var(--bg-2); border:1px solid var(--border); color:var(--text); border-radius:12px; padding:.62rem .9rem; font-family:inherit; font-size:.9rem; outline:none; }
.m-search input:focus { border-color:var(--primary); }
.m-links { display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; }
.m-links a { display:flex; align-items:center; gap:.6rem; padding:.72rem .85rem; border-radius:12px; font-weight:700; font-size:.88rem; color:var(--muted); background:var(--bg-2); border:1px solid var(--border-soft); }
.m-links a i { width:18px; text-align:center; color:var(--primary); }
.m-links a:hover { background:var(--primary-soft); color:var(--primary-dark); border-color:rgba(18,161,80,.35); }

/* ---------- نوار پایین اپ ---------- */
.appnav {
  position:fixed; bottom:0; inset-inline:0; z-index:60;
  background:rgba(255,255,255,.98); border-top:1px solid var(--border);
  display:none; padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(18,60,35,.10);
}
.appnav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted); font-size:.7rem; font-weight:800; padding:.35rem .1rem; border-radius:14px; min-width:0; }
.appnav a i { font-size:1.15rem; }
.appnav a.active { color:var(--primary); background:var(--primary-soft); }
.appnav .nav-ico { position:relative; width:46px; height:46px; display:grid; place-items:center; }
.appnav .nav-ico .ico3d { width:120%; height:120%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(15,40,90,.30)); }
.appnav .dot { position:absolute; top:-2px; inset-inline-end:-7px; background:var(--accent); color:#fff; font-size:.58rem; font-weight:900; min-width:16px; height:16px; border-radius:9px; display:grid; place-items:center; }

/* ---------- هیرو ---------- */
.hero {
  background:
    radial-gradient(820px 380px at 88% -14%, rgba(18,161,80,.15), transparent 60%),
    radial-gradient(720px 340px at 6% 118%, rgba(124,111,240,.12), transparent 60%),
    radial-gradient(520px 260px at 50% -30%, rgba(255,122,89,.07), transparent 60%),
    linear-gradient(180deg,#eef4ff 0%,#f6f9fe 60%,#f4f7fc 100%);
  border-bottom:1px solid var(--border-soft);
  padding:3.2rem 0 2.7rem;
  position:relative; overflow:hidden;
}
.hero h1 { font-size:clamp(1.5rem,4vw,2.4rem); font-weight:900; line-height:1.7; color:var(--text); }
.hero h1 span { background:linear-gradient(90deg,#12a150,#f97316); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { color:var(--muted); margin:.7rem auto 1.6rem; max-width:660px; }
.hero-search {
  display:flex; align-items:center; gap:.6rem; max-width:640px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:.55rem .6rem .55rem 1.1rem; box-shadow:0 16px 40px rgba(18,60,35,.12);
transition:border-color .25s, box-shadow .25s;
}
.hero-search:focus-within { border-color:var(--primary); box-shadow:0 16px 40px rgba(18,161,80,.18); }
.hero-search i { color:var(--primary); flex-shrink:0; font-size:1.05rem; }
.hero-search input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-family:inherit; font-size:.98rem; }
.hero-search input::placeholder { color:var(--muted); }
.hero-popular { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:1.2rem; }
.pill { background:var(--surface); border:1px solid var(--border); color:var(--muted); font-size:.78rem; font-weight:700; padding:.3rem .9rem; border-radius:20px; }
.pill:hover { border-color:var(--primary); color:var(--primary); }

/* ---------- بخش‌ها ---------- */
.section { padding:2.8rem 0; }
.section-head { margin-bottom:1.5rem; }
.section-head h2 { font-size:1.4rem; font-weight:900; display:flex; align-items:center; gap:.65rem; color:var(--text); }
.section-head h2::before { content:''; width:5px; height:26px; border-radius:4px; background:linear-gradient(var(--primary),#7c6ff0); }
.section-head p { color:var(--muted); font-size:.86rem; margin-top:.35rem; }
.sec-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; gap:1rem; }
.see-all { color:var(--primary); font-size:.86rem; font-weight:700; white-space:nowrap; }
.see-all:hover { text-decoration:underline; }

/* ---------- نوار اعتماد ---------- */
.trust-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2rem 0 0; }
.trust-item { display:flex; align-items:center; gap:.85rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.05rem 1.2rem; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.trust-item:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#a8e0c0; }
.trust-item .tico { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.2rem; flex-shrink:0; background:var(--primary-soft); color:var(--primary); }
.trust-item b { font-size:.9rem; display:block; }
.trust-item span { color:var(--muted); font-size:.74rem; }

/* ---------- دسته‌بندی‌ها ---------- */
.cats { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.cat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem 1rem; text-align:center; box-shadow:var(--shadow-sm); }
.cat-card { transition:all .3s ease; }
.cat-card:hover { border-color:#a8e0c0; background:var(--surface-2); box-shadow:var(--shadow); transform:translateY(-5px); }
.cat-ico { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin:0 auto .8rem; background:linear-gradient(135deg,#dbe9ff,#c7d8ff); color:#1d4ed8; font-size:1.6rem; font-weight:900; }
.cat-card:nth-child(5n+2) .cat-ico { background:linear-gradient(135deg,#e4defc,#d0c8f7); color:#5b48d8; }
.cat-card:nth-child(5n+3) .cat-ico { background:linear-gradient(135deg,#d7f5e6,#bdeeda); color:#0e8f4d; }
.cat-card:nth-child(5n+4) .cat-ico { background:linear-gradient(135deg,#ffe6ec,#ffd3dd); color:#d5346a; }
.cat-card:nth-child(5n+5) .cat-ico { background:linear-gradient(135deg,#fff1d9,#ffe2b3); color:#c07f16; }
.cat-card b { font-size:.92rem; display:block; }
.cat-card span { color:var(--muted); font-size:.74rem; }

/* ---------- کارت محصول ---------- */
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:1.15rem; }
.product { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.product { transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.product:hover { border-color:#a8e0c0; box-shadow:0 16px 36px rgba(18,60,35,.14); transform:translateY(-6px); }
.product .thumb img { transition:transform .5s ease; }
.product:hover .thumb img { transform:scale(1.07); }
.thumb { height:170px; display:grid; place-items:center; position:relative; color:#1d4ed8; font-size:2.6rem; font-weight:900; background:linear-gradient(135deg,#e3eefe,#e9e4fd); }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 62%,rgba(15,33,66,.16)); }
.discount-badge { position:absolute; top:.6rem; inset-inline-start:.6rem; z-index:2; background:linear-gradient(135deg,#f0575c,#c62f34); color:#fff; font-size:.74rem; font-weight:900; padding:.18rem .62rem; border-radius:9px; box-shadow:0 4px 12px rgba(240,62,99,.3); }
.new-badge { position:absolute; top:.6rem; inset-inline-end:.6rem; z-index:2; background:var(--primary); color:#fff; font-size:.7rem; font-weight:900; padding:.18rem .62rem; border-radius:9px; }
.p-body { padding:.95rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.p-cat { font-size:.72rem; color:var(--primary); font-weight:700; }
.p-title { font-weight:800; font-size:.94rem; line-height:1.75; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:3.2em; }
.p-title:hover { color:var(--primary); }
.p-meta { display:flex; gap:.7rem; flex-wrap:wrap; font-size:.72rem; color:var(--muted); align-items:center; }
.p-meta .rate { color:var(--star); font-weight:800; }
.p-meta .support { color:var(--primary); font-weight:800; }
.p-foot { margin-top:auto; display:flex; flex-direction:column; gap:.6rem; }
.price { font-weight:900; font-size:1.05rem; color:var(--text); }
.price .old { font-size:.76rem; color:var(--muted); text-decoration:line-through; font-weight:600; margin-inline-end:.4rem; }
.price .unit { font-size:.72rem; color:var(--muted); font-weight:600; }
.p-actions { display:flex; gap:.5rem; }
.p-actions .btn { flex:1; padding-inline:.4rem; }

/* ---------- آمار ---------- */
.stats-bar { background:linear-gradient(135deg,#eef4ff,#f3f0ff); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; box-shadow:var(--shadow-sm); }
.stat { text-align:center; }
.stat b { display:block; font-size:1.6rem; font-weight:900; color:var(--primary); }
.stat span { color:var(--muted); font-size:.8rem; }

/* ---------- بنرها (تصویری) ---------- */
.bnr { position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border); display:flex; align-items:center; min-height:220px; box-shadow:0 10px 30px rgba(13,26,18,.08); transition:transform .3s, box-shadow .3s; }
.bnr::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(270deg, rgba(8,18,12,.82) 0%, rgba(8,18,12,.45) 48%, rgba(8,18,12,.08) 100%); pointer-events:none; }
.bnr:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(13,26,18,.14); }
.bnr::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(270deg,rgba(12,30,66,.85) 0%,rgba(12,30,66,.45) 48%,rgba(12,30,66,.12) 100%); }
.bnr-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bnr-overlay { position:relative; z-index:2; padding:1.7rem 1.9rem; width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.bnr-overlay h3 { font-size:1.35rem; font-weight:900; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.bnr-overlay p { color:rgba(255,255,255,.92); font-size:.86rem; margin-top:.2rem; text-shadow:0 1px 8px rgba(0,0,0,.3); max-width:520px; line-height:1.8; }
.bnr-overlay b { color:#ffd66b; }
.bnr-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.banner { background:linear-gradient(135deg,#0f8f45,#12a150 55%,#17b45c); border-radius:var(--radius); padding:2rem 2.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; position:relative; overflow:hidden; border:1px solid transparent; box-shadow:0 14px 34px rgba(18,161,80,.28); }
.banner::before { content:''; position:absolute; inset-inline-end:-70px; top:-70px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.14); }
.banner h3 { font-size:1.4rem; font-weight:900; color:#fff; position:relative; }
.banner p { color:rgba(255,255,255,.9); font-size:.86rem; position:relative; }
.banner .btn { position:relative; background:#fff; color:var(--primary-dark); box-shadow:none; }
.banner.brown { background:linear-gradient(135deg,#0f8f45,#12a150 55%,#f97316); box-shadow:0 14px 34px rgba(18,161,80,.28); }
.banner.brown::before { background:rgba(255,255,255,.16); }

/* ---------- نظرات ---------- */
.testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.testimonial { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; height:100%; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.testimonial:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.testimonial .q { color:#c7d8ff; font-size:1.8rem; line-height:1; font-family:Georgia,serif; }
.testimonial p { color:var(--text); font-size:.88rem; margin:.6rem 0 1rem; }
.testimonial .who { display:flex; align-items:center; gap:.65rem; }
.testimonial .who .av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#7c6ff0); color:#fff; display:grid; place-items:center; font-weight:900; }
.testimonial .who b { font-size:.82rem; display:block; line-height:1.4; }
.testimonial .who span { font-size:.7rem; color:var(--muted); }

/* ---------- چیدمان فروشگاه ---------- */
.shop-layout { display:grid; grid-template-columns:280px 1fr; gap:1.4rem; align-items:start; }
.sidebar { display:flex; flex-direction:column; gap:1rem; position:sticky; top:90px; }
.side-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem 1.25rem; box-shadow:var(--shadow-sm); transition:border-color .25s; }
.side-box:hover { border-color:#cfd8cd; }
.side-box h4 { font-weight:900; font-size:.96rem; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.side-box h4::before { content:''; width:4px; height:17px; border-radius:3px; background:linear-gradient(var(--primary),#7c6ff0); }
.side-list a { display:flex; justify-content:space-between; align-items:center; font-size:.87rem; padding:.48rem .5rem; border-radius:10px; color:var(--muted); }
.side-list a:hover { background:var(--primary-soft); color:var(--primary); }
.side-list a .cnt { font-size:.72rem; background:var(--bg-2); border:1px solid var(--border-soft); padding:0 .5rem; border-radius:8px; }
.side-check { display:flex; align-items:center; gap:.5rem; font-size:.85rem; padding:.3rem .4rem; border-radius:8px; cursor:pointer; color:var(--muted); }
.side-check input { accent-color:var(--primary); width:15px; height:15px; }

.best-item { display:flex; gap:.7rem; align-items:center; padding:.55rem 0; border-bottom:1px dashed var(--border-soft); }
.best-item:last-child { border-bottom:none; }
.best-item .rank { width:28px; height:28px; border-radius:9px; background:var(--primary-soft); color:var(--primary); font-weight:900; font-size:.78rem; display:grid; place-items:center; flex-shrink:0; }
.best-item .rank.gold { background:var(--violet-soft); color:var(--violet); }
.best-item b { font-size:.8rem; display:block; line-height:1.6; }
.best-item span { font-size:.72rem; color:var(--muted); }

/* ---------- صفحه‌بندی ---------- */
.pagination { display:flex; gap:.4rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; }
.pagination a { min-width:40px; height:40px; padding:0 .7rem; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); border-radius:11px; font-weight:700; font-size:.85rem; color:var(--muted); }
.pagination a:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-2px); transition:all .2s ease; }
.pagination a.active { background:linear-gradient(135deg,#17b45c,#0f8f45); border-color:transparent; color:#fff; box-shadow:0 6px 16px rgba(18,161,80,.3); }

/* ---------- صفحه محصول ---------- */
.pdp { display:grid; grid-template-columns:1.05fr 1fr; gap:1.7rem; align-items:start; }
.gallery-main { height:360px; border-radius:var(--radius); overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,#e3eefe,#e9e4fd); color:#1d4ed8; font-size:4.2rem; font-weight:900; position:relative; border:1px solid var(--border); }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.p-cat { font-size:.8rem; color:var(--primary); font-weight:700; }
.p-title-big { font-size:1.5rem; font-weight:900; line-height:1.8; margin:.35rem 0 .65rem; color:var(--text); }
.pdp-meta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; font-size:.8rem; color:var(--muted); margin-bottom:1.1rem; }
.pdp-meta .stars { color:var(--star); }
.pdp-meta .support { color:var(--primary); font-weight:800; }

.info-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.95rem 1.25rem; box-shadow:var(--shadow-sm); }
.info-row { display:flex; justify-content:space-between; align-items:center; padding:.58rem 0; font-size:.88rem; border-bottom:1px dashed var(--border-soft); }
.info-row:last-of-type { border-bottom:none; }
.info-row .lbl { color:var(--muted); }
.info-row .val { font-weight:800; }
.info-row .val.big { font-size:1.4rem; color:var(--primary); }
.disc-strip { background:var(--accent-soft); color:var(--accent); border:1px solid #ffd4de; border-radius:12px; padding:.55rem .95rem; font-size:.84rem; font-weight:800; margin-bottom:.85rem; }
.disc-strip i { margin-inline-end:.3rem; }

.feature-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.feat { display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:700; color:var(--green); background:var(--green-soft); border-radius:9px; padding:.38rem .75rem; }
.features-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem 1.4rem; margin-top:1rem; }
.features-list li { font-size:.87rem; color:var(--text); display:flex; gap:.55rem; align-items:center; padding:.32rem 0; }
.features-list li i { color:var(--green); }
.features-list li::before { content:'✓'; color:var(--green); font-weight:900; }

.buy-actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }
.buy-actions .btn { flex:1; min-width:150px; }
.qty { display:inline-flex; align-items:center; gap:.4rem; background:var(--bg-2); border:1px solid var(--border); border-radius:11px; padding:.2rem; }
.qty button { width:36px; height:36px; border-radius:9px; border:none; background:var(--primary-soft); color:var(--primary); font-weight:900; font-size:1rem; cursor:pointer; }
.qty input { width:46px; text-align:center; border:none; background:transparent; color:var(--text); font-family:inherit; font-weight:800; outline:none; }

.seller-card { display:flex; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; margin-top:1.5rem; flex-wrap:wrap; box-shadow:var(--shadow-sm); }
.seller-avatar { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#3b82f6,#7c6ff0); display:grid; place-items:center; font-weight:900; font-size:1.4rem; color:#fff; flex-shrink:0; }
.seller-info { flex:1; min-width:200px; }
.seller-info b { font-size:.95rem; }
.seller-stats { display:flex; gap:1.4rem; margin-top:.45rem; }
.seller-stats div { display:flex; flex-direction:column; }
.seller-stats b { color:var(--primary); font-size:.95rem; }
.seller-stats span { color:var(--muted); font-size:.72rem; }

.pdp-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem 1.7rem; margin-top:1.5rem; box-shadow:var(--shadow-sm); }
.pdp-section h3 { font-weight:900; font-size:1.06rem; margin-bottom:.85rem; display:flex; align-items:center; gap:.55rem; }
.pdp-section h3::before { content:''; width:4px; height:18px; border-radius:3px; background:linear-gradient(var(--primary),#7c6ff0); }
.prose { color:var(--text); font-size:.92rem; }
.spec-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.spec-table th, .spec-table td { padding:.65rem .85rem; border-bottom:1px solid var(--border-soft); text-align:right; }
.spec-table th { color:var(--muted); font-weight:700; width:160px; background:var(--bg-2); }

/* ---------- سبد خرید ---------- */
.cart-item { display:flex; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.95rem 1.15rem; margin-bottom:.75rem; box-shadow:var(--shadow-sm); }
.ci-thumb { width:58px; height:58px; border-radius:14px; background:linear-gradient(135deg,#e3eefe,#e9e4fd); display:grid; place-items:center; font-weight:900; font-size:1.5rem; color:#1d4ed8; flex-shrink:0; }
.ci-name { flex:1; min-width:160px; }
.ci-name b { display:block; font-size:.9rem; }
.ci-price { font-weight:900; color:var(--primary); white-space:nowrap; }
.remove-btn { background:var(--red-soft); color:var(--red); border:none; width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:.9rem; }
.remove-btn:hover { background:#fad9dc; color:#c93439; }

.summary-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.35rem; position:sticky; top:90px; box-shadow:var(--shadow-sm); }
.sum-row { display:flex; justify-content:space-between; padding:.58rem 0; font-size:.9rem; border-bottom:1px dashed var(--border-soft); }
.sum-row.total { border-bottom:none; font-size:1rem; font-weight:900; }
.sum-row.total .val { color:var(--primary); font-size:1.35rem; }

/* ---------- جدول‌ها ---------- */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; font-size:.88rem; }
.table th, .table td { padding:.78rem .95rem; text-align:right; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
.table th { color:var(--muted); font-weight:700; font-size:.78rem; background:var(--bg-2); }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:rgba(18,161,80,.05); }
.badge { display:inline-block; font-size:.72rem; font-weight:800; padding:.2rem .7rem; border-radius:8px; }
.badge-green { background:var(--green-soft); color:var(--green); }
.badge-amber { background:#fff4e0; color:#b87a08; }
.badge-red { background:var(--red-soft); color:var(--red); }
.badge-blue { background:var(--primary-soft); color:var(--primary); }
.badge-brown { background:var(--violet-soft); color:var(--violet); }

/* ---------- فیلترها ---------- */
.filter-tabs { display:flex; gap:.5rem; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.48rem 1.1rem; border-radius:11px; font-size:.84rem; font-weight:700; background:var(--surface); border:1px solid var(--border); color:var(--muted); }
.chip:hover { border-color:var(--primary); color:var(--primary); }
.chip.active { background:var(--primary-soft); border-color:#bcd2f8; color:var(--primary); }

/* ---------- فرم‌ها ---------- */
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:.4rem; }
.form-control { width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:12px; padding:.62rem .95rem; font-family:inherit; font-size:.9rem; outline:none; transition:border-color .25s, box-shadow .25s; }
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(18,161,80,.14); }
textarea.form-control { min-height:110px; resize:vertical; }

/* ---------- هشدارها ---------- */
.alert { border-radius:12px; padding:.85rem 1.15rem; font-size:.88rem; font-weight:700; margin-bottom:1rem; }
.alert-success { background:var(--green-soft); color:var(--green); border:1px solid #c2edd5; }
.alert-error { background:var(--red-soft); color:#c93439; border:1px solid #f7ccd0; }
.alert-info { background:var(--primary-soft); color:var(--primary); border:1px solid #c8ddfb; }

/* ---------- آکاردئون (سوالات) ---------- */
.accordion-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius) !important; margin-bottom:.7rem; overflow:hidden; }
.accordion-button { background:var(--surface); color:var(--text); font-weight:800; padding:1.05rem 1.25rem; transition:background .25s, color .25s; }
.accordion-button:not(.collapsed) { background:linear-gradient(90deg,var(--primary-soft),transparent); color:var(--primary-dark); box-shadow:none; }
.accordion-button:focus { box-shadow:none; border-color:var(--primary); }
.accordion-body { color:var(--muted); background:var(--surface); }
.accordion-button i { color:var(--primary); }

/* ---------- تب‌ها ---------- */
.nav-tabs { border-bottom:1px solid var(--border); gap:.3rem; }
.nav-tabs .nav-link { color:var(--muted); border:none; font-weight:700; border-radius:11px 11px 0 0; padding:.72rem 1.35rem; background:transparent; }
.nav-tabs .nav-link:hover { color:var(--primary); }
.nav-tabs .nav-link.active { color:var(--primary); background:var(--primary-soft); border:none; }
.tab-content > .tab-pane { padding-top:1rem; }

/* ---------- ورود/ثبت‌نام ---------- */
.auth-card { max-width:460px; margin:2.5rem auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2.1rem; box-shadow:var(--shadow); }

/* ---------- وبلاگ ---------- */
.posts { display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; }
.post-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.post-card { transition:all .3s ease; }
.post-card:hover { border-color:#a8e0c0; box-shadow:var(--shadow); transform:translateY(-5px); }
.post-card:hover .post-title { color:var(--primary); }
.post-thumb img { width:100%; height:100%; object-fit:cover; }
.post-thumb { height:140px; display:grid; place-items:center; background:linear-gradient(135deg,#e3eefe,#e9e4fd); color:#1d4ed8; font-size:2.4rem; font-weight:900; }
.post-body { padding:1.05rem 1.15rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-meta { font-size:.72rem; color:var(--muted); }
.post-title { font-weight:900; font-size:.96rem; line-height:1.8; color:var(--text); }
.post-card:hover .post-title { color:var(--primary); }
.post-excerpt { color:var(--muted); font-size:.8rem; }
.post-read { color:var(--primary); font-size:.8rem; font-weight:700; margin-top:auto; }

.widget { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem 1.25rem; box-shadow:var(--shadow-sm); }
.widget h4 { font-weight:900; font-size:.96rem; margin-bottom:.7rem; }
.widget li { padding:.38rem 0; border-bottom:1px dashed var(--border-soft); }
.widget li:last-child { border-bottom:none; }
.widget a { font-size:.85rem; color:var(--muted); }
.widget a:hover { color:var(--primary); }
.tag-cloud { display:flex; flex-wrap:wrap; gap:.45rem; }
.tag-cloud a { background:var(--bg-2); border:1px solid var(--border); padding:.28rem .75rem; border-radius:9px; font-size:.76rem; }
.tag-cloud a:hover { border-color:var(--primary); color:var(--primary); }

/* ---------- خبرنامه ---------- */
.newsletter { display:flex; gap:.5rem; max-width:360px; }
.newsletter input { flex:1; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:11px; padding:.58rem .85rem; font-family:inherit; font-size:.85rem; outline:none; }
.newsletter input:focus { border-color:var(--primary); }

/* ---------- فوتر ---------- */
.footer { background:linear-gradient(180deg,#f4faf6,#eef7f1); border-top:1px solid var(--border); padding:3rem 0 1.4rem; margin-top:3rem; color:#3d5247; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr; gap:1.7rem; }
.footer h4 { font-size:.98rem; font-weight:900; margin-bottom:.9rem; color:var(--text); }
.footer h4::after { content:""; display:block; width:28px; height:3px; border-radius:3px; background:linear-gradient(90deg,#12a150,#f97316); margin-top:.4rem; }
.f-brand { font-weight:900; font-size:1.15rem; color:var(--text); }
.f-brand b { color:var(--primary-dark); }
.footer-desc { color:var(--muted); font-size:.85rem; margin:.7rem 0 1.1rem; line-height:1.9; }
.fl { display:block; color:#4a5f53; font-size:.85rem; padding:.3rem 0; transition:color .2s; }
.fl:hover { color:var(--primary-dark); }
.socials { display:flex; gap:.5rem; }
.social { width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid var(--border); display:grid; place-items:center; color:#4a5f53; transition:all .25s ease; }
.social:hover { border-color:var(--primary); color:var(--primary-dark); transform:translateY(-3px); box-shadow:0 6px 16px rgba(18,161,80,.2); }
.support-line { display:flex; align-items:center; gap:.55rem; color:#3d5247; font-size:.83rem; margin-bottom:.85rem; }
.support-line i { color:#3ddc84; }
.pay-badges { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.3rem; }
.pay-badge { background:#fff; border:1px solid var(--border); border-radius:10px; padding:.42rem .85rem; font-size:.74rem; font-weight:700; color:#3d5247; display:inline-flex; align-items:center; gap:.45rem; box-shadow:0 2px 8px rgba(13,26,18,.04); }
.pay-badge i { color:var(--primary-dark); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid var(--border); color:var(--muted); font-size:.78rem; }
.footer-bottom a { color:var(--muted); }
.footer-bottom a:hover { color:var(--primary-dark); }

/* ---------- خالی ---------- */
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.empty svg, .empty i { color:var(--border); margin-bottom:.8rem; }

/* ---------- دراپ‌داون ---------- */
.dropdown-menu { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.45rem; box-shadow:0 16px 40px rgba(18,60,35,.16); }
.dropdown-item { color:var(--text); border-radius:9px; font-size:.88rem; font-weight:600; padding:.55rem .85rem; }
.dropdown-item:hover { background:var(--primary-soft); color:var(--primary); }
.dropdown-divider { border-color:var(--border-soft); }
.dropdown-toggle::after { margin-inline-start:.35rem; }

/* ---------- سوییپر ---------- */
.swiper { padding-bottom:48px; }
.swiper-pagination-bullet { background:var(--muted); opacity:.4; }
.swiper-pagination-bullet-active { background:var(--primary); opacity:1; }
.swiper-button-next, .swiper-button-prev { color:var(--primary); background:var(--surface); width:44px; height:44px; border-radius:50%; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.swiper-button-next::after, .swiper-button-prev::after { font-size:1.05rem; font-weight:900; }
.swiper-products .swiper-slide, .swiper-testimonials .swiper-slide { height:auto; }
.swiper-products .product, .swiper-testimonials .testimonial { height:100%; }

/* ---------- پنل مدیریت ---------- */
.admin-body { display:flex; min-height:100vh; }
@supports (min-height:100dvh) { .admin-body { min-height:100dvh; } }
.admin-side { width:255px; background:var(--surface); border-inline-start:1px solid var(--border); padding:1.25rem; flex-shrink:0; }
.admin-side .brand { margin-bottom:1.6rem; }
.admin-side nav { display:flex; flex-direction:column; }
.admin-side nav a { display:flex; align-items:center; gap:.75rem; padding:.66rem .9rem; border-radius:11px; font-size:.9rem; font-weight:700; color:var(--muted); margin-bottom:.28rem; }
.admin-side nav a i { width:18px; text-align:center; }
.admin-side nav a:hover { background:var(--primary-soft); color:var(--primary); }
.admin-side nav a.active { background:var(--primary-soft); color:var(--primary); border-inline-start:3px solid var(--primary); }
.admin-main { flex:1; padding:1.7rem; min-width:0; }
.admin-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:.6rem; }
.admin-top h1 { font-size:1.35rem; font-weight:900; }
.stat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.6rem; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow-sm); }
.stat-card b { display:block; font-size:1.55rem; font-weight:900; color:var(--primary); }
.stat-card span { font-size:.82rem; color:var(--muted); }

/* ---------- DataTables ---------- */
.dataTables_wrapper { color:var(--text); overflow-x:auto; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:9px; padding:.38rem .6rem; }
.dataTables_wrapper .dataTables_length select option { background:var(--surface); }
.dataTables_wrapper .dataTables_info { color:var(--muted); }
.dataTables_wrapper .dataTables_paginate .page-item .page-link { background:var(--surface); border-color:var(--border); color:var(--muted); }
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background:linear-gradient(135deg,#17b45c,#0f8f45); border-color:transparent; color:#fff; }
table.dataTable { color:var(--text); }
table.dataTable thead th { color:var(--muted); }

/* ---------- Select2 ---------- */
.select2-container--bootstrap-5 .select2-selection { background:var(--surface) !important; border-color:var(--border) !important; color:var(--text) !important; min-height:42px; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color:var(--text) !important; line-height:40px; padding-inline:.7rem; }
.select2-container--bootstrap-5 .select2-dropdown { background:var(--surface) !important; border-color:var(--border) !important; color:var(--text) !important; }
.select2-container--bootstrap-5 .select2-results__option { color:var(--text); }
.select2-container--bootstrap-5 .select2-results__option--highlighted { background:var(--primary-soft) !important; color:var(--primary) !important; }

/* ---------- Toastr ---------- */
#toast-container > div { background-color:var(--surface) !important; color:var(--text); border:1px solid var(--border); box-shadow:0 14px 40px rgba(23,54,120,.18); font-family:inherit; font-weight:700; }
#toast-container > .toast-success { border-color:#bde8cd; }
#toast-container > .toast-error { border-color:#f7ccd0; }

/* =====================================================================
   ریسپانسیو + iOS
   ===================================================================== */
@media (max-width:1024px) {
  .products { grid-template-columns:repeat(3,1fr); }
  .posts { grid-template-columns:repeat(2,1fr); }
  .cats { grid-template-columns:repeat(3,1fr); }
  .pdp { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .h-nav { display:none; }
  .hamburger { display:grid; }
  .search-toggle { display:grid; }
  .shop-layout { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .trust-strip { grid-template-columns:repeat(2,1fr); }
  .bnr-grid { grid-template-columns:1fr; }
  .testimonials { grid-template-columns:repeat(2,1fr); }
  /* منوی پایین اپ در موبایل و تبلت */
  .appnav { display:flex; }
  body { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width:640px) {
  body { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  /* جلوگیری از زوم خودکار iOS هنگام فوکوس روی ورودی‌ها */
  input, select, textarea { font-size:16px !important; }
  .products { grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .posts { grid-template-columns:1fr; }
  .cats { grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .trust-strip { grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .testimonials { grid-template-columns:1fr; }
  .stat-cards { grid-template-columns:repeat(2,1fr); }
  .admin-side { display:none; }
  .hsearch { display:none; }
  .features-list { grid-template-columns:1fr; }
  .appnav { display:flex; }
  .hero { padding:2.4rem 0 2.1rem; }
  .cart-item { flex-wrap:wrap; }
  .cart-item .ci-price { width:100%; text-align:left; }
  .banner { padding:1.5rem 1.4rem; }
  .buy-actions .btn { flex:1 1 100%; }
  .brand-name small { display:none; }
  .brand-name { font-size:.95rem; }
  .brand-mark { width:42px; height:42px; }
  .m-links { grid-template-columns:1fr; }
  .thumb { height:140px; }
  .gallery-main { height:260px; }
  /* پنل مدیریت در موبایل: ناوبری افقی بالای صفحه */
  .admin-body { flex-direction:column; }
  .admin-side { display:block; width:100%; padding:.6rem; border-inline-start:none; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40; }
  .admin-side .brand { display:none; }
  .admin-side nav { flex-direction:row; overflow-x:auto; gap:.35rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .admin-side nav::-webkit-scrollbar { display:none; }
  .admin-side nav a { white-space:nowrap; margin-bottom:0; padding:.5rem .8rem; font-size:.82rem; border-inline-start:none; }
  .admin-side nav a.active { border-inline-start:none; border-bottom:2px solid var(--primary); border-radius:8px 8px 0 0; }
  .admin-main { padding:1rem .8rem; }
}
@media (max-width:380px) {
  .products { grid-template-columns:1fr 1fr; gap:.6rem; }
  .p-body { padding:.8rem .8rem .9rem; }
  .thumb { height:118px; }
  .p-title { font-size:.85rem; }
  .p-actions .btn { font-size:.74rem; min-height:32px; padding-inline:.3rem; }
  .header-main { gap:.5rem; }
  .h-actions { gap:.35rem; }
  .icon-btn { width:38px; height:38px; }
  .cat-card { padding:1rem .6rem; }
  .cat-ico { width:48px; height:48px; }
  .section { padding:2.1rem 0; }
  .hero-search input { font-size:.9rem; }
}

/* =====================================================================
   صفحات خدمات (سئو / هاست / دامنه / طراحی سایت / نمونه‌کارها) — پرمیوم
   ===================================================================== */
.svc-hero {
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(18,161,80,.35), transparent 60%),
    radial-gradient(560px 300px at 10% 100%, rgba(249,115,22,.22), transparent 60%),
    linear-gradient(135deg,#f0faf4 0%,#e7f6ed 55%,#fff7ec 100%); color:var(--text); border-bottom:1px solid var(--border-soft);
  padding:3rem 0 2.6rem; position:relative; overflow:hidden; border-bottom:1px solid var(--border-soft);
}
.svc-hero::before { content:''; position:absolute; inset-inline-start:-90px; bottom:-130px; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.08); }
.svc-hero::after { content:''; position:absolute; inset-inline-end:-70px; top:-100px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.07); }
.svc-hero h1 { font-size:clamp(1.5rem,4vw,2.3rem); font-weight:900; line-height:1.7; position:relative; color:var(--text); }
.svc-hero p { color:var(--muted); max-width:700px; margin:.6rem auto 1.4rem; position:relative; line-height:1.9; }
.svc-hero .pill { background:#fff; border:1px solid var(--border); color:var(--text); }
.svc-hero .pill:hover { background:var(--primary-soft); color:var(--primary-dark); border-color:var(--primary); }
.svc-hero .hero-search { background:#fff; border-color:transparent; box-shadow:0 14px 40px rgba(10,30,80,.25); }
.svc-hero .hero-search i { color:var(--primary); }
.svc-hero .btn { background:linear-gradient(180deg,#17b45c,#0f8f45); color:#fff; box-shadow:0 8px 22px rgba(18,161,80,.28); }
.svc-hero .btn:hover { background:linear-gradient(180deg,#1cbe64,#119c4b); color:#fff; transform:translateY(-2px); }

/* کارت قیمت */
.price-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch; }
.price-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; position:relative; box-shadow:var(--shadow-sm); }
.price-card.popular { border:2px solid var(--primary); box-shadow:0 16px 40px rgba(18,161,80,.18); }
.price-card .pc-tag { position:absolute; top:-13px; inset-inline-start:1.3rem; background:linear-gradient(135deg,#17b45c,#0f8f45); color:#fff; font-size:.72rem; font-weight:900; padding:.28rem .85rem; border-radius:20px; }
.price-card h3 { font-size:1.06rem; font-weight:900; }
.price-card .pc-desc { font-size:.78rem; color:var(--muted); min-height:2.6em; }
.price-card .pc-price { font-size:1.55rem; font-weight:900; color:var(--primary); }
.price-card .pc-price small { font-size:.76rem; color:var(--muted); font-weight:600; }
.price-card ul { display:flex; flex-direction:column; gap:.5rem; margin:.4rem 0 .2rem; flex:1; }
.price-card ul li { font-size:.85rem; color:#3c4d68; display:flex; gap:.55rem; align-items:flex-start; }
.price-card ul li i { color:var(--green); margin-top:.35rem; font-size:.8rem; }
.price-card .pc-note { font-size:.73rem; color:var(--muted); }
.price-card .btn { width:100%; }

/* مراحل فرآیند */
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.step { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem 1rem; text-align:center; box-shadow:var(--shadow-sm); }
.step .snum { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#17b45c,#0f8f45); color:#fff; font-weight:900; display:grid; place-items:center; margin:0 auto .7rem; font-size:1.05rem; }
.step b { font-size:.9rem; display:block; }
.step span { font-size:.76rem; color:var(--muted); }

/* کارت امکانات */
.feat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.feat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.35rem 1.1rem; text-align:center; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.feat-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#a8e0c0; }
.feat-card .fico { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin:0 auto .7rem; font-size:1.3rem; background:var(--primary-soft); color:var(--primary); }
.feat-card b { font-size:.9rem; display:block; }
.feat-card span { font-size:.76rem; color:var(--muted); }
.feat-card:nth-child(4n+2) .fico { background:var(--violet-soft); color:var(--violet); }
.feat-card:nth-child(4n+3) .fico { background:var(--green-soft); color:var(--green); }
.feat-card:nth-child(4n+4) .fico { background:#fff1e0; color:#d07c12; }

/* نمونه‌کارها */
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.case-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.35rem; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.case-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.case-card .c-head { display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem; }
.case-card .c-logo { width:48px; height:48px; border-radius:13px; background:linear-gradient(135deg,#e3eefe,#e9e4fd); color:#1d4ed8; display:grid; place-items:center; font-weight:900; font-size:1.15rem; flex-shrink:0; }
.case-card .c-name b { font-size:.94rem; display:block; }
.case-card .c-name span { font-size:.72rem; color:var(--muted); }
.case-card .c-sale { font-size:1.22rem; font-weight:900; color:var(--primary); }
.case-card .c-sale small { font-size:.72rem; color:var(--muted); font-weight:600; }
.case-card .c-growth { display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:800; color:var(--green); background:var(--green-soft); border-radius:8px; padding:.15rem .55rem; }
.case-card .c-meta { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 .5rem; }
.case-card .c-tag { font-size:.68rem; font-weight:800; background:var(--primary-soft); color:var(--primary); padding:.16rem .55rem; border-radius:7px; }
.case-card .c-desc { font-size:.8rem; color:var(--muted); }

.chart-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }
.chart-box h4 { font-weight:900; font-size:1rem; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }

/* دامنه‌ها */
.domain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.domain-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem 1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.domain-item:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#a8e0c0; }
.domain-item .d-ext { font-size:1.2rem; font-weight:900; color:var(--text); }
.domain-item .d-ext small { display:block; font-size:.7rem; color:var(--muted); font-weight:600; }
.domain-item .d-price { color:var(--primary); font-weight:900; white-space:nowrap; text-align:left; }
.domain-item .d-price small { color:var(--muted); font-size:.68rem; font-weight:600; display:block; }

/* CTA */
.svc-cta { background:linear-gradient(135deg,#0f8f45,#12a150 60%,#17b45c); border-radius:var(--radius); padding:2.3rem 2.2rem; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; color:#fff; box-shadow:0 16px 40px rgba(18,161,80,.30); position:relative; overflow:hidden; }
.svc-cta::before { content:''; position:absolute; inset-inline-start:-60px; top:-60px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.1); }
.svc-cta h3 { font-size:1.35rem; font-weight:900; position:relative; }
.svc-cta p { color:rgba(255,255,255,.9); font-size:.88rem; position:relative; margin-top:.2rem; }
.svc-cta .btn { background:#fff; color:var(--primary-dark); box-shadow:none; position:relative; }

/* چک‌لیست دوستونه */
.lead-form { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }

/* ریسپانسیو خدمات */
@media (max-width:1024px) {
  .case-grid { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .feat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  .price-cards { grid-template-columns:1fr; }
  .domain-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .case-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .domain-grid { grid-template-columns:1fr 1fr; gap:.7rem; }
  .svc-cta { padding:1.7rem 1.4rem; }
  .svc-hero { padding:2.4rem 0 2.1rem; }
}

/* =====================================================================
   لوگو، آیکون‌های سه‌بعدی، قهوه‌ای پاستیلی و اصلاحات ریسپانسیو
   ===================================================================== */
.brand-mark img { width:100%; height:100%; border-radius:inherit; object-fit:cover; display:block; }
.cat-ico.has-img { background:none; box-shadow:none; }
.cat-ico.has-img img { width:72%; height:72%; object-fit:contain; border-radius:0; }
.hero-icon3d { width:104px; height:104px; margin:0 auto 1.1rem; object-fit:contain; position:relative; filter:drop-shadow(0 12px 20px rgba(10,30,80,.28)); }

/* لینک سایت مشتری در نمونه‌کار */
.case-card { display:flex; flex-direction:column; }
.case-card .c-desc { flex:1; }
.case-site { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:800; color:var(--primary); background:var(--primary-soft); border:1px solid #d4e3fc; border-radius:9px; padding:.3rem .75rem; margin-top:.8rem; align-self:flex-start; }
.case-site:hover { color:var(--primary-dark); background:var(--primary-soft); }

/* قهوه‌ای پاستیلی — لمس گرم در کنار آبی */
.feat-card:nth-child(5n+5) .fico { background:var(--tan-soft); color:#8a6a4f; }
.steps .step:nth-child(even) .snum { background:linear-gradient(135deg,#b08968,#8a6a4f); }
.stats-bar .stat:nth-child(3) b { color:#8a6a4f; }
.stat-card:nth-child(3) b { color:#8a6a4f; }
.pay-badge:nth-child(3) i { color:#d8b48c; }

/* مراحل با تعداد کم‌تر */
.steps-3 { grid-template-columns:repeat(3,1fr); }
.steps-4 { grid-template-columns:repeat(4,1fr); }
.cases-layout { grid-template-columns:1.5fr 1fr; }

@media (max-width:1024px) {
  .steps-4 { grid-template-columns:repeat(2,1fr); }
  .cases-layout { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .steps-3 { grid-template-columns:repeat(2,1fr); }
  .cases-layout { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .steps-3, .steps-4 { grid-template-columns:1fr; }
  .hero-icon3d { width:84px; height:84px; }
  .domain-item { flex-direction:column; align-items:flex-start; gap:.4rem; }
  .domain-item .d-price { text-align:right; }
  .svc-hero .hero-search { flex-wrap:wrap; }
}

/* آیکون سه‌بعدی جایگزین (فونت) وقتی تصویر هنوز تولید نشده */
.hero-icon3d-fa { display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#fff; font-size:2.1rem; }

/* آیکون‌های سه‌بعدی در کانتینرهای آیکون (جایگزین خودکار) */
.fico .ico3d, .tico .ico3d, .cat-ico .ico3d { width:72%; height:72%; object-fit:contain; }
.fico:has(.ico3d), .tico:has(.ico3d), .cat-ico:has(.ico3d) { background:none; box-shadow:none; }
.pay-badge .ico3d, .support-line .ico3d { width:18px; height:18px; object-fit:contain; }

/* اندازه آیکون‌های سه‌بعدی در جاهای ریز */
.topbar .ico3d { width:16px; height:16px; display:inline-block; vertical-align:-3px; }
.hsearch .ico3d { width:18px; height:18px; flex-shrink:0; }
.hero-search .ico3d { width:22px; height:22px; flex-shrink:0; }
.accordion-button .ico3d { width:20px; height:20px; flex-shrink:0; }
.admin-side nav a .ico3d { width:20px; height:20px; flex-shrink:0; }
.admin-top .ico3d { width:18px; height:18px; vertical-align:-3px; }
.svc-cta .ico3d { width:22px; height:22px; }

/* پایه: آیکون‌های سه‌بعدی داخل متن/منو/دکمه/تب */
.ico3d { width:18px; height:18px; object-fit:contain; vertical-align:-3px; display:inline-block; flex-shrink:0; }
.h-nav a .ico3d { width:16px; height:16px; }
.m-links a .ico3d { width:22px; height:22px; }
.dropdown-item .ico3d { width:15px; height:15px; vertical-align:-2px; }
.btn .ico3d { width:15px; height:15px; vertical-align:-2px; }
.nav-tabs .ico3d { width:15px; height:15px; vertical-align:-2px; }
.disc-strip .ico3d { width:18px; height:18px; }
.case-card .ico3d, .c-meta .ico3d, .c-growth .ico3d { width:14px; height:14px; vertical-align:-2px; }
.p-meta .ico3d { width:13px; height:13px; vertical-align:-2px; }
.svc-hero .ico3d { width:24px; height:24px; }

/* =====================================================================
   اصلاحات موبایل + سایه آیکون‌های سه‌بعدی
   ===================================================================== */

/* جلوگیری از سرریز افقی (بدون شکستن sticky هدر) */
html { overflow-x:hidden; }
body { overflow-x:hidden; overflow-x:clip; }

/* سایه نرم و یکنواخت روی همه آیکون‌های سه‌بعدی */
.ico3d { filter:drop-shadow(0 3px 4px rgba(18,60,35,.20)); }
.fico .ico3d, .tico .ico3d, .cat-ico .ico3d, .cat-ico.has-img img {
  filter:drop-shadow(0 7px 12px rgba(18,60,35,.26));
}

/* نوار بالایی: در موبایل فقط پیام تخفیف، یک‌خطی */
@media (max-width:860px) {
  .topbar .container { flex-wrap:nowrap; justify-content:center; }
  .topbar .container span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar .container span:last-child { display:none; }
}

/* هدر موبایل: جمع‌وجور و حرفه‌ای */
@media (max-width:640px) {
  .header-main { gap:.55rem; padding:.65rem 0; flex-wrap:nowrap; }
  .brand { gap:.5rem; }
  .brand-mark { width:40px; height:40px; border-radius:12px; }
  .brand-name { font-size:.88rem; line-height:1.3; }
  .h-actions { gap:.4rem; }
  .h-actions .btn, .h-actions .dropdown { display:none; } /* ورود از منوی همبرگری و نوار پایین */
  .search-toggle { display:none; } /* جستجو داخل منوی همبرگری */
  .icon-btn { width:44px; height:44px; border-radius:12px; }
  .icon-btn .ico3d { width:26px; height:26px; }
  .topbar { font-size:.72rem; padding:.42rem 0; }
  .appnav .nav-ico { width:42px; height:42px; }
  .appnav a { font-size:.66rem; }
}

/* هدر در تبلت */
@media (min-width:641px) and (max-width:860px) {
  .h-actions .btn { padding:.45rem .8rem; font-size:.78rem; min-height:38px; }
}

/* =====================================================================
   ویجت‌های گرافیکی (نوار پیشرفت، گیج، جدول مقایسه، رتبه، اینستاگرام)
   ===================================================================== */
.bars { display:flex; flex-direction:column; gap:1rem; }
.bar-label { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; font-weight:700; margin-bottom:.4rem; }
.bar-label b { color:var(--text); }
.bar-label span { color:var(--muted); font-weight:800; }
.bar { height:11px; border-radius:20px; background:var(--bg-2); overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,#2563eb,#7c6ff0); }
.bar.green > span { background:linear-gradient(90deg,#22c55e,#16a34a); }
.bar.brown > span { background:linear-gradient(90deg,#f59e0b,#b08968); }
.bar.red > span { background:linear-gradient(90deg,#fb7185,#e5484d); }

.gauge-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.gauge { width:150px; height:150px; border-radius:50%; margin-inline:auto; display:grid; place-items:center; }
.gauge .g-in { width:112px; height:112px; border-radius:50%; background:var(--surface); display:grid; place-items:center; text-align:center; box-shadow:var(--shadow-sm); }
.gauge .g-in b { font-size:1.5rem; font-weight:900; color:var(--primary); line-height:1.3; display:block; }
.gauge .g-in span { font-size:.68rem; color:var(--muted); }

.compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
.compare-table { width:100%; border-collapse:collapse; min-width:520px; }
.compare-table th, .compare-table td { padding:.75rem .9rem; font-size:.82rem; text-align:center; border-bottom:1px solid var(--border-soft); }
.compare-table thead th { background:var(--bg-2); font-weight:800; color:var(--text); white-space:nowrap; }
.compare-table thead th.hl { background:var(--primary-soft); color:var(--primary); }
.compare-table tbody th { text-align:right; font-weight:700; color:var(--text); background:var(--surface-2); white-space:nowrap; }
.compare-table .yes { color:var(--green); font-weight:900; }
.compare-table .no { color:#b6c2d6; }

.rank-table td .pos { display:inline-grid; place-items:center; min-width:27px; height:27px; border-radius:9px; font-weight:900; font-size:.78rem; }
.pos.p1 { background:var(--green-soft); color:var(--green); }
.pos.p2 { background:#fff4e0; color:#b87a08; }
.pos.p5 { background:var(--primary-soft); color:var(--primary); }
.pos.p10 { background:var(--bg-2); color:var(--muted); }
.up { color:var(--green); font-weight:900; white-space:nowrap; }
.down { color:var(--red); font-weight:900; white-space:nowrap; }

.mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
.mini { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.95rem 1.05rem; display:flex; align-items:center; gap:.8rem; box-shadow:var(--shadow-sm); }
.mini .mi { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--primary-soft); flex-shrink:0; }
.mini .mi .ico3d { width:68%; height:68%; }
.mini b { font-size:.98rem; font-weight:900; display:block; line-height:1.4; color:var(--text); }
.mini span { font-size:.72rem; color:var(--muted); }

.insta-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:.85rem; }
.insta-item { position:relative; border-radius:15px; overflow:hidden; aspect-ratio:1; display:grid; place-items:center; }
.insta-item img { width:100%; height:100%; object-fit:cover; }
.insta-item .ig-ov { position:absolute; inset:0; background:linear-gradient(155deg,rgba(18,161,80,.28),rgba(124,111,240,.45)); display:grid; place-items:center; }
.insta-item .ig-ov .ico3d { width:30px; height:30px; }

.kv { display:flex; justify-content:space-between; gap:.6rem; padding:.55rem 0; border-bottom:1px dashed var(--border-soft); font-size:.84rem; }
.kv:last-child { border-bottom:none; }
.kv span { color:var(--muted); }
.kv b { color:var(--text); }

@media (max-width:860px) {
  .gauge-row { grid-template-columns:repeat(3,1fr); gap:.6rem; }
  .gauge { width:110px; height:110px; }
  .gauge .g-in { width:82px; height:82px; }
  .insta-grid { grid-template-columns:repeat(3,1fr); }
  .mini-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .gauge-row { grid-template-columns:1fr 1fr 1fr; }
  .gauge { width:86px; height:86px; }
  .gauge .g-in { width:64px; height:64px; }
  .gauge .g-in b { font-size:1rem; }
  .insta-grid { grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .mini-grid { grid-template-columns:1fr; }
}

/* =====================================================================
   ویجت‌های گرافیکی سطح ۲ (حلقه امتیاز، رادار، تایم‌لاین، چک‌لیست و…)
   ===================================================================== */
.score-ring { width:172px; height:172px; border-radius:50%; margin-inline:auto; display:grid; place-items:center; }
.score-ring .sr-in { width:130px; height:130px; border-radius:50%; background:var(--surface); display:grid; place-items:center; text-align:center; box-shadow:var(--shadow-sm); }
.score-ring .sr-in b { font-size:2.3rem; font-weight:900; color:var(--primary); line-height:1.1; }
.score-ring .sr-in span { font-size:.7rem; color:var(--muted); }

.chips { display:flex; flex-wrap:wrap; gap:.55rem; }
.chips .chip2 { display:inline-flex; align-items:center; gap:.4rem; background:var(--surface); border:1px solid var(--border); color:var(--muted); font-size:.8rem; font-weight:700; padding:.42rem 1rem; border-radius:20px; box-shadow:var(--shadow-sm); }
.chips .chip2 .ico3d { width:16px; height:16px; }

.checklist { display:flex; flex-direction:column; gap:.65rem; }
.checklist .ck { display:flex; gap:.75rem; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.8rem 1rem; box-shadow:var(--shadow-sm); }
.checklist .ck .ico3d { width:21px; height:21px; flex-shrink:0; margin-top:2px; }
.checklist .ck b { display:block; font-size:.86rem; color:var(--text); }
.checklist .ck span { font-size:.76rem; color:var(--muted); }

.cta-band { background:linear-gradient(120deg,#0f8f45,#12a150 50%,#17b45c); border-radius:var(--radius); padding:2.1rem 2.3rem; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; box-shadow:0 18px 44px rgba(18,161,80,.28); }
.cta-band h3 { font-size:1.3rem; font-weight:900; margin-bottom:.35rem; }
.cta-band p { color:rgba(255,255,255,.92); font-size:.86rem; max-width:560px; line-height:1.9; }
.cta-band .btn { background:#fff; color:var(--primary); box-shadow:none; }
.cta-band .btn:hover { background:#eef4ff; }

.timeline { display:flex; flex-direction:column; position:relative; padding-inline-start:2.2rem; }
.timeline::before { content:''; position:absolute; inset-inline-start:.6rem; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--primary),#7c6ff0); border-radius:2px; }
.tl { position:relative; padding-bottom:1.5rem; }
.tl:last-child { padding-bottom:0; }
.tl::before { content:''; position:absolute; inset-inline-start:-2.2rem; top:4px; width:16px; height:16px; border-radius:50%; background:var(--primary); border:4px solid #dbe8fd; }
.tl b { display:block; font-size:.9rem; color:var(--text); }
.tl span { font-size:.78rem; color:var(--muted); }
.tl .tl-tag { display:inline-block; font-size:.68rem; font-weight:800; background:var(--primary-soft); color:var(--primary); border-radius:7px; padding:.12rem .6rem; margin-bottom:.3rem; }

.dc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.dc-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; text-align:center; box-shadow:var(--shadow-sm); }
.dc-card .fico { width:50px; height:50px; border-radius:13px; background:var(--primary-soft); display:grid; place-items:center; margin:0 auto .7rem; }
.dc-card .fico .ico3d { width:70%; height:70%; }
.dc-card b { font-size:.95rem; display:block; }
.dc-card span { font-size:.76rem; color:var(--muted); }

.big-nums { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.big-num { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; box-shadow:var(--shadow-sm); }
.big-num b { font-size:2rem; font-weight:900; color:var(--primary); display:block; line-height:1.3; }
.big-num span { font-size:.78rem; color:var(--muted); }

.follow-box { display:flex; align-items:center; justify-content:center; gap:1.6rem; flex-wrap:wrap; margin-top:1.3rem; }
.follow-box .fb-stat { text-align:center; min-width:90px; }
.follow-box .fb-stat b { font-size:1.35rem; font-weight:900; color:var(--primary); display:block; }
.follow-box .fb-stat span { font-size:.72rem; color:var(--muted); }

@media (max-width:860px) {
  .dc-grid { grid-template-columns:repeat(3,1fr); gap:.6rem; }
  .big-nums { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .dc-grid { grid-template-columns:1fr; }
  .big-nums { grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .score-ring { width:132px; height:132px; }
  .score-ring .sr-in { width:98px; height:98px; }
  .cta-band { padding:1.5rem 1.3rem; }
}

/* =====================================================================
   تایپوگرافی فشرده موبایل (۸ تا ۱۴ پیکسل) + بخش‌های جمع‌وجور
   ===================================================================== */
@media (max-width:640px) {
  body { font-size:12.5px; line-height:1.75; }

  /* تیترها: حداکثر ۱۴px */
  h1, .hero h1 { font-size:14px !important; line-height:1.6; }
  h2, .section-head h2, .sec-top h2 { font-size:13px !important; }
  h3, .price-card h3, .cta-band h3, .lead-form h3 { font-size:12px !important; }
  h4, .chart-box h4, .side-box h4, .widget h4, .footer h4 { font-size:12px !important; }
  .section-head p { font-size:10px; }
  .hero-sub { font-size:11px; }

  /* هدر */
  .brand-name { font-size:12px; }
  .brand-name small { font-size:8px; }
  .topbar { font-size:9px; }
  .h-nav a { font-size:11px; padding:.4rem .7rem; }
  .h-actions .btn { font-size:10px; }
  .appnav a { font-size:10.5px; }

  /* دکمه‌ها */
  .btn { font-size:11px; min-height:38px; padding:.5rem 1rem; }
  .btn-lg { font-size:12px; min-height:44px; }
  .btn-sm { font-size:10px; min-height:32px; padding:.36rem .7rem; }

  /* محصولات */
  .p-cat { font-size:9px; }
  .p-title { font-size:11px; }
  .p-meta, .p-meta span, .p-meta .rate { font-size:9px; }
  .price, .price .unit { font-size:11px; }
  .price .old { font-size:9px; }
  .discount-badge, .new-badge { font-size:9px; padding:.15rem .45rem; }
  .p-actions .btn { font-size:10px; }

  /* دسته‌ها و کارت‌ها */
  .cat-card b { font-size:11px; }
  .cat-card span { font-size:9px; }
  .trust-item b { font-size:11px; }
  .trust-item span { font-size:9px; }
  .feat-card b { font-size:11px; }
  .feat-card span { font-size:9px; }
  .stat b { font-size:13px; }
  .stat span { font-size:9px; }
  .stat-card b { font-size:14px; }
  .stat-card span { font-size:9px; }
  .step b { font-size:11px; }
  .step span { font-size:9px; }
  .step .snum { font-size:11px; width:34px; height:34px; }

  /* پلن‌ها و قیمت‌ها */
  .price-card .pc-desc { font-size:9px; }
  .price-card .pc-price { font-size:13px; }
  .price-card .pc-price small { font-size:9px; }
  .price-card ul li { font-size:10px; }
  .price-card .pc-tag { font-size:9px; }

  /* ویجت‌های گرافیکی */
  .bar-label, .bar-label b, .bar-label span { font-size:9px; }
  .kv { font-size:10px; }
  .mini b { font-size:11px; }
  .mini span { font-size:9px; }
  .ck b { font-size:10px; }
  .ck span { font-size:9px; }
  .chip2 { font-size:9px; padding:.32rem .75rem; }
  .tl b { font-size:10px; }
  .tl span { font-size:9px; }
  .tl .tl-tag { font-size:8px; }
  .big-num b { font-size:13px; }
  .big-num span { font-size:9px; }
  .dc-card b { font-size:11px; }
  .dc-card span { font-size:9px; }
  .gauge .g-in b { font-size:12px; }
  .gauge .g-in span { font-size:8px; }
  .score-ring .sr-in b { font-size:13px; }
  .score-ring .sr-in span { font-size:8px; }
  .cta-band p { font-size:10px; }
  .fb-stat b { font-size:12px; }
  .fb-stat span { font-size:9px; }

  /* نمونه‌کار */
  .case-card .c-name b { font-size:11px; }
  .case-card .c-name span, .case-card .c-desc { font-size:9px; }
  .case-card .c-sale { font-size:12px; }
  .case-card .c-tag, .case-card .c-growth { font-size:9px; }
  .case-site { font-size:9px; }

  /* دامنه */
  .domain-item .d-ext { font-size:12px; }
  .domain-item .d-price { font-size:11px; }
  .domain-item small { font-size:8px; }

  /* جدول‌ها */
  .compare-table th, .compare-table td { font-size:9px; padding:.55rem .6rem; }
  .rank-table th, .rank-table td { font-size:10px; }
  .rank-table .pos { font-size:9px; min-width:22px; height:22px; }
  .table th, .table td { font-size:10px; }

  /* نظرات */
  .testimonial p { font-size:11px; }
  .testimonial .who b { font-size:10px; }
  .testimonial .who span { font-size:9px; }

  /* بلاگ */
  .post-title { font-size:11px; }
  .post-excerpt { font-size:10px; }
  .post-meta, .post-read { font-size:9px; }

  /* فوتر */
  .footer h4 { font-size:12px; }
  .f-brand { font-size:13px; }
  .footer-desc { font-size:10px; }
  .fl { font-size:10px; }
  .footer-bottom { font-size:9px; }
  .pay-badge { font-size:9px; }
  .support-line { font-size:9px; }
  .newsletter input { font-size:10px; }

  /* متفرقه */
  .pill { font-size:9px; }
  .chip { font-size:9px; }
  .alert { font-size:10px; }
  .badge { font-size:9px; }
  .hero-popular { margin-top:.8rem; }
  .hero-search input { font-size:11px; }
  .m-links a { font-size:12px; }

  /* فاصله بخش‌ها جمع‌وجورتر */
  .section { padding:1.8rem 0; }
  .section-head { margin-bottom:1rem; }
  .stats-bar { padding:1rem; gap:.6rem; }
  .price-cards, .feat-grid, .case-grid, .testimonials, .dc-grid, .big-nums, .mini-grid { gap:.7rem; }
}

/* موبایل‌های خیلی کوچک: باز هم فشرده‌تر */
@media (max-width:380px) {
  body { font-size:12px; }
  .hero h1 { font-size:13px !important; }
  .p-title { font-size:10px; }
  .price { font-size:10px; }
  .btn { font-size:10px; padding:.45rem .8rem; }
  .appnav a { font-size:9.5px; }
  .h-nav a { font-size:10px; }
}

/* =====================================================================
   صیقل پرمیوم — تایپوگرافی حرفه‌ای + دسترس‌پذیری + پایداری
   ===================================================================== */

/* تیترها: تراز متوازن خطوط (بدون پرش چیدمان) */
h1, h2, h3 { text-wrap: balance; }

/* اعداد قیمت و آمار: رقم‌های هم‌عرض (tabular) برای خوانایی و ثبات */
.price, .pc-price, .c-sale, .sum-row .val, .d-price,
.stat b, .stat-card b, .big-num b, .fb-stat b, .gauge .g-in b, .score-ring .sr-in b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* فوکوس صفحه‌کلید واضح (دسترس‌پذیری) — بدون انیمیشن */
:focus-visible {
  outline: 3px solid rgba(18, 161, 80, .5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* بازخورد فشردن دکمه — فوری و بدون ترنزیشن */
.btn:active { transform: translateY(1px); }

/* دکمه در حال ارسال (ضد دابل‌سابمیت) */
.btn.is-loading { opacity: .65; pointer-events: none; }

/* فرم‌ها: فاصله و خوانایی بهتر */
.form-control:focus { box-shadow: 0 0 0 4px rgba(18, 161, 80, .14); border-color: var(--primary); }

/* تصاویر آیکون: بدون درگ و انتخاب ناخواسته */
img.ico3d, img.hero-icon3d { user-select: none; -webkit-user-drag: none; }

/* استیبل‌سازی چیدمان: جلوگیری از پرش عرض ناشی از اسکرول‌بار */
html { scrollbar-gutter: stable; }

/* =====================================================================
   پالت حرفه‌ای (آبی/مشکی/تیره + صورتی) + حالت دارک + ریسپانسیو نهایی
   ===================================================================== */

/* ---------- صیقل حرفه‌ای: شعاع کمتر، سایه واقعی‌تر ---------- */
:root {
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(15, 40, 90, .12);
  --shadow-sm: 0 2px 8px rgba(15, 40, 90, .08);
}

/* ---------- نوار بالایی: مشکی/آبی تیره حرفه‌ای ---------- */
.topbar {
  background: #0b1220;
  border-bottom: 1px solid #1c2a44;
  color: #9fb0cc;
}
.topbar b { color: #93c5fd; }
.topbar a { color: #60a5fa; }
.topbar a:hover { color: #93c5fd; }

/* ---------- هیرو: تمیز و بدون گرادیان‌های فانتزی ---------- */
.hero {
  background: linear-gradient(180deg, #f5f8fe 0%, #f8fafd 55%, #f2f6fb 100%);
}
.stats-bar { background: var(--surface); box-shadow: var(--shadow-sm); }

/* =====================================================================
   تم تیره (دارک مود)
   ===================================================================== */
[data-bs-theme="dark"] {
  --bg: #0b100d;
  --bg-2: #0e1511;
  --surface: #121a15;
  --surface-2: #0d130f;
  --border: #243029;
  --border-soft: #1b251f;
  --text: #e8efe9;
  --muted: #93a89a;
  --primary: #1cba60;
  --primary-dark: #3ddc84;
  --primary-soft: #12301f;
  --brown: #fb923c;
  --amber: #f59e0b;
  --amber-soft: #2b2113;
  --tan: #f97316;
  --tan-soft: #2a1a10;
  --accent: #f87171;
  --accent-soft: #2a1416;
  --violet: #60a5fa;
  --violet-soft: #14243d;
  --blue: #60a5fa;
  --blue-soft: #14243d;
  --star: #f5a623;
  --green: #3ddc84;
  --green-soft: #12a150;
  --red: #f87171;
  --red-soft: #2a1416;
  --black: #070b09;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);

  --bs-body-bg: #0b100d; --bs-body-color: #e8efe9; --bs-body-color-rgb: 232, 239, 233;
  --bs-secondary-color: #93a89a; --bs-border-color: #243029;
  --bs-primary: #1cba60; --bs-link-color: #3ddc84; --bs-link-hover-color: #6ee7a5;
  --bs-secondary-bg: #0e1511; --bs-tertiary-bg: #12301f;
  --bs-emphasis-color: #e8efe9;
  --bs-card-bg: #121a15; --bs-card-border-color: #243029;
  --bs-form-control-bg: #0d130f; --bs-form-control-border-color: #243029; --bs-form-control-color: #e8efe9;
}

/* هدر و هیرو و نوار پایین در دارک */
[data-bs-theme="dark"] .site-header { background: rgba(9, 14, 11, .96); border-bottom-color: var(--border); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
[data-bs-theme="dark"] .hero { background: linear-gradient(180deg, #0e1511 0%, #0b100d 100%); border-bottom-color: var(--border); }
[data-bs-theme="dark"] .hero-sub { color: var(--muted); }
[data-bs-theme="dark"] .appnav { background: rgba(9, 14, 11, .97); border-top-color: var(--border); }
[data-bs-theme="dark"] .icon-btn { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-bs-theme="dark"] .brand-name b { color: var(--text); }
[data-bs-theme="dark"] .h-nav a:hover, [data-bs-theme="dark"] .h-nav a.active { background: var(--primary-soft); }
[data-bs-theme="dark"] .h-nav a.nav-sale { background: var(--accent-soft); border-color: #4a2439; color: var(--accent); }

/* سرویس‌هیرو: دکمه و جستجو در دارک */
[data-bs-theme="dark"] .svc-hero .hero-search { background: #0c1424; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
[data-bs-theme="dark"] .svc-hero .hero-search input { color: #e7edf9; }
[data-bs-theme="dark"] .svc-hero .btn { background: linear-gradient(180deg,#17b45c,#0f8f45); color: #fff; }

/* دراپ‌داون و آف‌کنواس و تیبل در دارک */
[data-bs-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); }
[data-bs-theme="dark"] .dropdown-item { color: var(--text); }
[data-bs-theme="dark"] .dropdown-item:hover { background: var(--primary-soft); color: #fff; }
[data-bs-theme="dark"] .offcanvas { background: var(--surface); color: var(--text); }
[data-bs-theme="dark"] .offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(2); }
[data-bs-theme="dark"] .table { color: var(--text); }
[data-bs-theme="dark"] .compare-table thead th { background: var(--bg-2); color: var(--text); }
[data-bs-theme="dark"] .compare-table tbody th { background: var(--surface-2); color: var(--text); }
[data-bs-theme="dark"] .pos.p10 { background: var(--bg-2); color: var(--muted); }

/* نمودارها: لیبل‌های خواناتر در دارک (با جاوااسکریپت رنگ‌ها ست شده) */
[data-bs-theme="dark"] .chart-box { background: var(--surface); }

/* =====================================================================
   ریسپانسیو نهایی — تضمین چیدمان موبایل/تبلت
   ===================================================================== */
@media (max-width:860px) {
  .price-cards { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .dc-days { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width:640px) {
  .price-cards { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: 1fr; }
  .domain-grid { grid-template-columns: 1fr; }
  .dc-days { grid-template-columns: repeat(2, 1fr); }
  .hero-search { flex-wrap: wrap; }
  .hero-search .btn { width: 100%; }
  .follow-box { gap: .8rem; }
  .follow-box .btn { width: 100%; }
  .cta-band { padding: 1.5rem 1.3rem; text-align: center; justify-content: center; }
}
@media (max-width:380px) {
  .feat-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .gauge-row { grid-template-columns: 1fr; }
  .gauge { margin-inline: auto; }
}

/* تقویم هفتگی اینستاگرام: ۷ ستون در دسکتاپ */
.dc-days { grid-template-columns: repeat(7, 1fr); }
@media (max-width:1024px) { .dc-days { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   بخش‌های حرفه‌ای جدید (ابزارها، راهنما، خدمات، مقایسه، مسیر همکاری و…)
   ============================================================ */

/* گرید محصول: ۴ ستون دسکتاپ / ۲ ستون موبایل (کامپکت و حرفه‌ای) */
@media (max-width: 480px) {
  .products { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .product .thumb { height: 96px; }
  .product .p-body { padding: .55rem .6rem; }
  .product .p-cat { font-size: .66rem; }
  .product .p-title { font-size: .8rem; }
  .product .p-meta { font-size: .66rem; gap: .35rem; }
  .product .price { font-size: .82rem; }
  .product .p-actions { gap: .3rem; }
  .product .p-actions .btn { padding: .32rem .5rem; font-size: .72rem; }
}

.filter-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0 1.3rem; }
.filter-pills button { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px; padding:.42rem 1rem; font-weight:800; font-size:.84rem; cursor:pointer; }
.filter-pills button.on { background:var(--primary); border-color:var(--primary); color:#fff; }

.hscroll { padding-bottom:.4rem; }
.hscroll .swiper-slide { height:auto; }
.tcard { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; height:100%; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.55rem; transition:all .3s ease; }
.tcard:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#a8e0c0; }
.tcard .tico { width:46px; height:46px; display:grid; place-items:center; background:var(--primary-soft); border-radius:12px; }
.tcard .tico img { width:32px; height:32px; object-fit:contain; }
.tcard h4 { font-size:.92rem; font-weight:900; margin:0; }
.tcard p { font-size:.8rem; color:var(--muted); margin:0; line-height:1.7; }

.guide-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.guide-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.guide-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#a8e0c0; }
.guide-card .gnum { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--primary); color:#fff; font-weight:900; margin-bottom:.7rem; }
.guide-card h4 { font-size:.95rem; font-weight:900; margin:0 0 .4rem; }
.guide-card p { font-size:.82rem; color:var(--muted); margin:0; line-height:1.8; }

.compare { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.compare .box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; }
.compare .box.reco { border-color:var(--primary); background:var(--primary-soft); }
.compare h4 { font-weight:900; margin:0 0 .7rem; }
.compare ul { margin:0; padding:0 1.1rem; font-size:.86rem; line-height:2; color:var(--text); }

.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.step { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; text-align:center; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.step:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.step .sn { width:40px; height:40px; margin:0 auto .7rem; border-radius:50%; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet); font-weight:900; }
.step h4 { font-size:.9rem; font-weight:900; margin:0 0 .3rem; }
.step p { font-size:.78rem; color:var(--muted); margin:0; line-height:1.7; }

.price-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.price-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.6rem; transition:all .3s ease; }
.price-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.price-card.hot { border-color:var(--accent); box-shadow:0 14px 40px rgba(255,92,124,.16); }
.price-card .pp { font-size:1.35rem; font-weight:900; color:var(--primary); }
.price-card ul { margin:0; padding:0 1.1rem; font-size:.84rem; line-height:2; color:var(--muted); }

.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.why-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.why-item:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.why-item img { width:34px; height:34px; object-fit:contain; margin-bottom:.6rem; }
.why-item h4 { font-size:.88rem; font-weight:900; margin:0 0 .3rem; }
.why-item p { font-size:.78rem; color:var(--muted); margin:0; line-height:1.7; }

.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.svc-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow-sm); transition:all .3s ease; }
.svc-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#a8e0c0; }
.svc-card img { width:40px; height:40px; object-fit:contain; margin-bottom:.6rem; }
.svc-card h4 { font-size:.95rem; font-weight:900; margin:0 0 .4rem; }
.svc-card p { font-size:.82rem; color:var(--muted); margin:0 0 .7rem; line-height:1.8; }

.cta-strip { background:linear-gradient(135deg,#0f8f45,#0f8f45); color:#fff; border-radius:var(--radius); padding:2.2rem 1.8rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.cta-strip h3 { font-size:1.3rem; font-weight:900; margin:0 0 .3rem; }
.cta-strip p { margin:0; opacity:.85; }
.cta-strip .btn { background:#fff; color:#0b1b33; border:none; }

.case-car .case-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; height:100%; box-shadow:var(--shadow-sm); }
.case-car .case-card h4 { font-weight:900; margin:0 0 .2rem; font-size:.95rem; }
.case-car .case-card .cat { color:var(--muted); font-size:.78rem; }
.case-car .case-card .num { color:var(--green); font-weight:900; font-size:1.05rem; margin:.5rem 0; }

/* FAQ آکاردئونی (بدون انیمیشن) */
.faq-acc { max-width:820px; margin:0 auto; }
.faq-acc .accordion-item { border:1px solid var(--border); border-radius:12px; margin-bottom:.6rem; overflow:hidden; background:var(--surface); }
.faq-acc .accordion-button { background:var(--surface); color:var(--text); font-weight:800; font-size:.92rem; }
.faq-acc .accordion-button:not(.collapsed) { background:var(--primary-soft); color:var(--primary); }

@media (max-width: 992px) {
  .guide-grid { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .svc-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .price-cards { grid-template-columns:1fr; }
}
@media (max-width: 576px) {
  .guide-grid { grid-template-columns:1fr; }
  .compare { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .svc-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   تنظیم آیکون‌های سه‌بعدی و چیدمان بخش‌های جدید صفحه اصلی
   ============================================================ */

/* راهنمای انتخاب */
.guide-card .gnum { background:transparent; width:auto; height:auto; }
.guide-card .gnum img { width:36px; height:36px; object-fit:contain; }

/* چرا ویو وردپرس */
.why-item .ico3d { width:40px; height:40px; object-fit:contain; margin-bottom:.55rem; }

/* خدمات اختصاصی */
.svc-card { display:flex; flex-direction:column; gap:.15rem; }
.svc-card .ico3d { width:42px; height:42px; object-fit:contain; margin-bottom:.5rem; }
.svc-price { color:var(--primary); font-weight:900; font-size:.95rem; margin-top:.2rem; }

/* مقایسه */
.compare .box { position:relative; display:flex; flex-direction:column; gap:.85rem; }
.compare .box h4 { display:flex; align-items:center; gap:.5rem; margin:0; font-size:1.05rem; }
.compare .box h4 .ico3d { width:34px; height:34px; object-fit:contain; }
.compare .box ul { flex:1; }
.compare .box ul li::marker { color:var(--primary); }
.compare .box .btn { align-self:flex-start; margin-top:.4rem; }
.reco-tag { position:absolute; top:-13px; inset-inline-start:1.2rem; background:linear-gradient(135deg,#12a150,#0c7c3e); color:#fff; font-size:.72rem; font-weight:900; padding:.26rem .9rem; border-radius:20px; box-shadow:0 6px 16px rgba(18,161,80,.32); }

/* مسیر همکاری */
.step .step-ico { display:inline-block; }
.step .step-ico .ico3d { width:46px; height:46px; object-fit:contain; margin-bottom:.5rem; }
.steps .step h4 { font-size:.92rem; font-weight:900; margin:0 0 .3rem; }

/* تعرفه‌ها */
.price-card { position:relative; }
.price-card h4 { font-size:1.05rem; font-weight:900; margin:0; }
.price-card p { font-size:.8rem; color:var(--muted); margin:0; min-height:2.4em; }
.price-card ul { flex:1; }
.price-card .btn { margin-top:.4rem; width:100%; }
.price-tag { position:absolute; top:-13px; inset-inline-start:1.2rem; background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; font-size:.72rem; font-weight:900; padding:.26rem .9rem; border-radius:20px; box-shadow:0 6px 16px rgba(225,29,72,.28); }

/* نمونه‌کارها (اسلایدر) */
.case-car .case-card { display:flex; gap:.85rem; align-items:flex-start; }
.case-car .cc-ico .ico3d { width:46px; height:46px; object-fit:contain; }
.case-car .cc-body h4 { font-size:.95rem; font-weight:900; margin:0 0 .25rem; }
.case-car .cc-body .cat { font-size:.76rem; color:var(--muted); margin:0; }
.cc-link { display:inline-flex; align-items:center; gap:.35rem; margin-top:.55rem; font-size:.8rem; font-weight:800; color:var(--primary); background:var(--primary-soft); border:1px solid #d4e3fc; border-radius:9px; padding:.28rem .75rem; }
.cc-link:hover { color:var(--primary-dark); background:var(--primary-soft); }

/* سوالات متداول (details بدون انیمیشن) */
.faq-acc details.faq-item { border:1px solid var(--border); border-radius:12px; margin-bottom:.6rem; background:var(--surface); overflow:hidden; }
.faq-acc summary { cursor:pointer; padding:1rem 1.2rem; font-weight:800; font-size:.94rem; color:var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-acc summary::-webkit-details-marker { display:none; }
.faq-acc summary::after { content:'+'; font-size:1.35rem; font-weight:900; color:var(--primary); line-height:1; }
.faq-acc details[open] summary { background:var(--primary-soft); color:var(--primary); }
.faq-acc details[open] summary::after { content:'−'; }
.faq-acc details.faq-item > div { padding:0 1.2rem 1.1rem; font-size:.86rem; color:var(--muted); line-height:1.9; }
.faq-acc details.faq-item > div p { margin:0; }

/* حالت دارک */
[data-bs-theme="dark"] .cc-link { border-color:rgba(96,165,250,.25); }
[data-bs-theme="dark"] .compare .box.reco { background:rgba(18,161,80,.15); }

/* ============================================================
   صفحه راهنمای انتخاب سایت (guide.php)
   ============================================================ */
.guide-grid-3 { grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.guide-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.guide-top .gnum { margin:0; }
.guide-top .gn { font-size:1.35rem; font-weight:900; color:var(--border); line-height:1; }
.guide-card .glist { margin:.6rem 0 0; padding:0; list-style:none; border-top:1px dashed var(--border-soft); padding-top:.6rem; }
.guide-card .glist li { display:flex; gap:.45rem; align-items:flex-start; font-size:.78rem; color:#3c4d68; line-height:1.9; }
.guide-card .glist li .ico3d { width:16px; height:16px; margin-top:3px; flex-shrink:0; }
[data-bs-theme="dark"] .guide-card .glist li { color:#b9c4d9; }
[data-bs-theme="dark"] .guide-top .gn { color:var(--border); }
@media (max-width:992px) { .guide-grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .guide-grid-3 { grid-template-columns:1fr; } }


/* =====================================================================
   مگامنوی دسته‌بندی‌ها — حرفه‌ای، بزرگ، بدون فانتزی
   ===================================================================== */
.nav-mega { position: relative; }
.nav-mega .mega-trigger {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .7rem; border-radius: 11px;
  font-weight: 700; font-size: .86rem; color: var(--text);
  text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s;
}
.nav-mega .mega-trigger:hover,
.nav-mega .mega-trigger.active { background: var(--primary-soft); color: var(--primary-dark); }
.nav-mega .mega-trigger.active { color: var(--primary-dark); }
.mega-caret { opacity: .55; transition: transform .25s; }
.nav-mega:hover .mega-caret,
.nav-mega.open .mega-caret { transform: rotate(180deg); }

.mega-panel {
  position: fixed;
  top: var(--mega-top, 120px);
  left: var(--mega-left, 120px); right: auto;
  width: min(1080px, calc(100vw - 2.5rem));
  max-height: min(72vh, 640px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(12,40,24,.16), 0 4px 16px rgba(12,40,24,.06);
  padding: 1.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transform-origin: top center;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1200;
  pointer-events: none;
  box-shadow: 0 28px 70px rgba(10,35,20,.18), 0 6px 18px rgba(10,35,20,.08);
}
.nav-mega:hover .mega-panel,
.nav-mega:focus-within .mega-panel,
.nav-mega.open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 200px;
  gap: .6rem .85rem;
  align-items: start;
}
.mega-col {
  display: flex; flex-direction: column; gap: .12rem;
  padding: .45rem .5rem .55rem;
  border-radius: 12px;
  transition: background .2s;
  min-width: 0;
}
.mega-col:hover { background: var(--surface-2); }
.mega-col-alt { background: linear-gradient(180deg, rgba(15,154,77,.04), transparent); }
.mega-col-alt:hover { background: rgba(15,154,77,.07); }

.mega-head {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
  padding: .35rem .25rem .5rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--border-soft);
}
.mega-head b { display: block; font-size: .9rem; font-weight: 900; color: var(--text); line-height: 1.5; }
.mega-head small { display: block; font-size: .7rem; color: var(--muted); font-weight: 600; margin-top: .1rem; }
.mh-ico {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--primary-soft), var(--amber-soft));
  display: grid; place-items: center; flex-shrink: 0;
}
.mh-ico .ico3d, .mh-ico img { width: 22px; height: 22px; object-fit: contain; }
.mega-head:hover b { color: var(--primary-dark); }

.mega-link {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  font-size: .82rem; font-weight: 600; color: #3d4a42;
  text-decoration: none;
  padding: .42rem .5rem;
  border-radius: 9px;
  transition: background .15s, color .15s, padding .15s;
  line-height: 1.6;
}
.mega-link:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding-inline-start: .72rem;
}
.mega-go { font-size: .75rem; opacity: 0; transform: translateX(4px); transition: .2s; }
.mega-link:hover .mega-go { opacity: 1; transform: none; }

.mega-promo {
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #0a2e1a, #0f9a4d);
  color: #fff;
  display: flex; flex-direction: column;
  align-self: stretch;
  min-height: 100%;
}
.mega-promo img {
  width: 100%; height: 96px; object-fit: cover;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mp-body {
  padding: .85rem .9rem 1rem;
  display: flex; flex-direction: column; gap: .3rem;
  flex: 1;
}
.mp-body b { font-size: .86rem; font-weight: 900; line-height: 1.6; }
.mp-body span { font-size: .72rem; opacity: .88; margin-bottom: .35rem; }
.mp-body .btn {
  margin-top: auto;
  background: #fff; color: var(--primary-dark);
  border: 0; font-size: .78rem; font-weight: 800;
  align-self: flex-start;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.mp-body .btn:hover { background: #f0fdf6; transform: translateY(-1px); }

/* لینک‌های زیرمجموعه در موبایل */
.m-links a.m-sub {
  padding-inline-start: 2.4rem;
  font-weight: 600;
  opacity: .92;
  border-style: dashed;
}

@media (max-width: 1200px) {
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
  .mega-promo { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .mega-promo img { width: 140px; height: auto; border: 0; }
}
@media (max-width: 860px) {
  .nav-mega .mega-panel { display: none; }
}

/* =====================================================================
   پس‌زمینه سه‌بعدی هنگام اسکرول — کل سایت (حرفه‌ای، غیرفانتزی)
   ===================================================================== */
#site-3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}
body { position: relative; }
.site-header, .topbar, main, .footer, .appnav, .offcanvas, .toast-container {
  position: relative;
  z-index: 1;
}
/* محتوا روی پس‌زمینه شفاف بماند اما خوانا */
main.home .hp-hero { z-index: 2; }
.home { position: relative; z-index: 1; }

/* لایه‌های CSS 3D برای اسکرول (fallback + تقویت) */
.depth-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  perspective: 900px;
}
.depth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .45;
  will-change: transform;
  transform-style: preserve-3d;
}
.depth-orb.o1 {
  width: 340px; height: 340px;
  background: radial-gradient(circle at 35% 35%, rgba(15,154,77,.35), transparent 70%);
  top: 8%; inset-inline-start: -80px;
}
.depth-orb.o2 {
  width: 280px; height: 280px;
  background: radial-gradient(circle at 40% 40%, rgba(249,115,22,.28), transparent 70%);
  top: 45%; inset-inline-end: -60px;
}
.depth-orb.o3 {
  width: 220px; height: 220px;
  background: radial-gradient(circle at 40% 40%, rgba(37,99,235,.22), transparent 70%);
  top: 72%; inset-inline-start: 18%;
}
.depth-grid {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(rgba(15,154,77,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,154,77,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: rotateX(58deg) translateZ(-40px);
  transform-origin: center 30%;
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  opacity: .7;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  #site-3d, .depth-layer { display: none; }
}