/* ==========================================================================
   سایت نودسرو — استایل اصلی (سیستم اختصاصی، بدون وردپرس و بدون Elementor)
   RTL کامل، سبک و سریع. رنگ‌بندی برند: فیروزه‌ای ESET + سبز
   ========================================================================== */
:root{
  --teal:#008193; --teal-dark:#006d7d; --teal-light:#35c9db;
  --green:#8dc63f; --green-dark:#6ea52c;
  --dark:#181c20; --gray:#424d56; --muted:#7a8b92;
  --border:#e3e9ed; --bg:#f5f8fa; --card:#ffffff;
  --danger:#b42318; --warn:#a35a00; --ok:#458000;
  --radius:14px; --shadow:0 2px 10px rgba(16,32,48,.06);
  --shadow-lg:0 10px 30px rgba(16,32,48,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x:clip}
@supports not (overflow:clip){
  html{overflow-x:hidden}
}
body.site{
  font-family:var(--font-fa);
  background:var(--bg); color:var(--gray); line-height:1.9; font-size:15px;
  /* منوی موبایل به‌صورت off-canvas بیرون از کادر است؛ برای جلوگیری از اسکرول افقی.
     overflow:clip استفاده شده تا position:sticky ستون‌های کناری خراب نشود. */
  overflow-x:clip;
}
@supports not (overflow:clip){
  body.site{overflow-x:hidden}
}
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--teal-dark)}
img{max-width:100%; height:auto}
.wrap{max-width:1200px; margin:0 auto; padding:0 16px}
h1,h2,h3,h4{color:var(--dark); line-height:1.6; font-weight:800}
h1{font-size:26px} h2{font-size:21px} h3{font-size:17px}

/* ===== سربرگ ===== */
/* ===== سربرگ (تک‌ردیفه، مثل سایت فعلی) ===== */
.site-header{background:#fff; border-bottom:1px solid #e8eef1; position:sticky; top:0; z-index:60}
.header-inner{display:flex; align-items:center; gap:14px; min-height:68px; max-width:1330px}
.brand{display:flex; align-items:center; gap:10px; color:inherit; flex:0 0 auto}
.brand img{height:44px; width:auto; display:block}
.brand-mark{background:linear-gradient(135deg,var(--teal),var(--teal-light)); color:#fff; font-weight:900; font-size:15px; padding:7px 11px; border-radius:9px}
.brand-text{font-weight:800; color:var(--dark); font-size:17px; display:flex; flex-direction:column; line-height:1.4}
.brand-text small{font-weight:500; font-size:10.5px; color:var(--muted)}

.main-nav{display:flex; align-items:center; flex:1 1 auto; justify-content:space-between; gap:0; flex-wrap:nowrap; overflow:hidden}
.main-nav a{
  position:relative; padding:8px 13px; font-size:13px; font-weight:600; color:#22484f;
  white-space:nowrap; border-radius:0; transition:color .18s;
}
.main-nav a + a::before{
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:15px; background:#dfe8eb;
}
.main-nav a:hover{color:var(--teal)}
.main-nav a.on{color:var(--teal); font-weight:800}
.main-nav a.on::after{
  content:''; position:absolute; right:12px; left:12px; bottom:-2px; height:3px;
  border-radius:3px; background:#1877b9;
}
.main-nav a.hl{color:#e0651a; font-weight:800}
.main-nav a.hl:hover{color:#b94f10}
.header-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.cart-link{
  position:relative; display:inline-flex; align-items:center; gap:5px; padding:7px 12px;
  border:1px solid #dfe8eb; border-radius:24px; font-size:12.5px; font-weight:700; color:#22484f;
  transition:.2s;
}
.cart-link:hover{border-color:var(--teal); color:var(--teal)}
.cart-ico{font-size:15px}
.cart-count{
  background:#1877b9; color:#fff; border-radius:20px; min-width:20px; height:20px; line-height:20px;
  text-align:center; padding:0 6px; font-size:11px; font-weight:800;
}
.nav-toggle{display:none; background:none; border:1px solid #dfe8eb; border-radius:9px; font-size:18px; padding:6px 11px; cursor:pointer}
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; font-size:13.5px; font-weight:700; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:.15s}
.btn-primary{background:var(--teal); color:#fff}
.btn-primary:hover{background:var(--teal-dark); color:#fff}
.btn-ghost{background:#fff; border-color:var(--border); color:var(--gray)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
.btn-green{background:var(--green); color:#fff}
.btn-green:hover{background:var(--green-dark); color:#fff}
.btn-lg{padding:13px 26px; font-size:15px; border-radius:12px}
.cart-count{background:rgba(255,255,255,.25); border-radius:20px; padding:0 7px; font-size:11px}
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:9px; font-size:18px; padding:6px 11px; cursor:pointer}

/* ===== بدنه ===== */
.site-main{min-height:60vh; padding:26px 0 40px}
.breadcrumb{font-size:12.5px; color:var(--muted); margin-bottom:14px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--teal)}

.hero{background:linear-gradient(135deg,#005f6d,#008193 45%,#12a4b8); color:#fff; border-radius:18px; padding:34px 28px; margin-bottom:26px}
.hero h1{color:#fff; font-size:29px; margin-bottom:10px}
.hero p{color:rgba(255,255,255,.9); font-size:15px; max-width:720px}
.hero-badges{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px}
.hero-badges span{background:rgba(255,255,255,.16); border-radius:20px; padding:5px 13px; font-size:12.5px; font-weight:600}

.section{margin-bottom:32px}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; flex-wrap:wrap}
.section-head h2{position:relative; padding-right:13px}
.section-head h2::before{content:''; position:absolute; right:0; top:6px; bottom:6px; width:4px; border-radius:3px; background:var(--teal)}

.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.18s; display:flex; flex-direction:column}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-2px)}
.card-thumb{aspect-ratio:16/10; background:#eef3f6; display:block; overflow:hidden}
.card-thumb img{width:100%; height:100%; object-fit:cover}
.card-body{padding:14px 15px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-title{font-size:15px; font-weight:800; color:var(--dark); line-height:1.7}
.card-excerpt{font-size:12.5px; color:var(--muted); line-height:1.85}
.card-meta{display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--muted); margin-top:auto; flex-wrap:wrap}

.price{font-weight:900; color:var(--dark); font-size:16px}
.price small{font-weight:500; font-size:11px; color:var(--muted)}
.price-old{color:var(--muted); text-decoration:line-through; font-size:12.5px; font-weight:500}

.badge{display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; background:#eef7f8; color:var(--teal)}
.badge-green{background:#eef9df; color:var(--ok)}
.badge-warn{background:#fff2de; color:var(--warn)}

/* ===== محتوای نوشته/برگه ===== */
.article{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:26px 28px; box-shadow:var(--shadow)}
.article h1{font-size:25px; margin-bottom:12px}
.article-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--border)}
.article-body{font-size:15px; line-height:2.1; color:var(--gray)}
.article-body h2{margin:26px 0 12px; font-size:20px}
.article-body h3{margin:22px 0 10px; font-size:17px}
.article-body p{margin-bottom:14px}
.article-body ul,.article-body ol{margin:0 22px 16px 0}
.article-body li{margin-bottom:7px}
.article-body img{border-radius:12px; margin:14px 0; box-shadow:var(--shadow)}
.article-body a{font-weight:600}
.article-body table{width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px}
.article-body th,.article-body td{border:1px solid var(--border); padding:9px 11px; text-align:right}
.article-body th{background:#f7fafb; font-weight:700; color:var(--dark)}
.article-body blockquote{border-right:4px solid var(--teal); background:#f7fafb; padding:12px 16px; border-radius:10px; margin:16px 0; color:var(--gray)}
.article-body code{background:#f1f4f6; border:1px solid var(--border); border-radius:5px; padding:1px 6px; direction:ltr; display:inline-block; font-size:13px}

/* --- کمکی: پنهان‌سازی بصری با حفظ دسترس‌پذیری و سئو --- */
.visually-hidden,
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- محتوای پاک‌سازی‌شده (جایگزین چیدمان Elementor) --- */
.article-body h4{margin:20px 0 9px; font-size:16px}
.article-body h5{margin:18px 0 8px; font-size:15px}
.article-body h6{margin:18px 0 8px; font-size:15px; color:var(--teal); font-weight:800}
.article-body h2:first-child,.article-body h3:first-child,.article-body h4:first-child,
.article-body h6:first-child{margin-top:0}
.article-body img{max-width:100%; height:auto; display:block; margin:16px auto; border-radius:12px; box-shadow:var(--shadow)}
.article-body p:empty,.article-body p:has(> br:only-child){display:none}
.article-body ul ul,.article-body ol ol,.article-body ul ol,.article-body ol ul{margin:6px 20px 6px 0}
.article-body hr{border:0; border-top:1px solid var(--border); margin:22px 0}
.article-body strong,.article-body b{color:var(--dark)}
.article-body figure{margin:16px 0}
.article-body figcaption{font-size:12.5px; color:var(--muted); text-align:center; margin-top:6px}
.article-body table{display:block; overflow-x:auto}
.article-body .article-note{background:#f7fafb; border:1px solid var(--border); border-right:4px solid var(--teal); border-radius:10px; padding:12px 16px; margin:16px 0}
.article-body > br{display:none}
.article-body h2,.article-body h3{scroll-margin-top:84px}
.article-body h2{padding-bottom:8px; border-bottom:2px solid #eef4f5}

/* --- فهرست مطالب --- */
.toc{background:#f7fafb; border:1px solid var(--border); border-radius:12px; padding:14px 18px; margin:0 0 22px}
.toc-head{font-weight:800; color:var(--dark); margin-bottom:8px; font-size:14px}
.toc ol{margin:0; padding:0; list-style:none; columns:2; column-gap:26px}
.toc li{font-size:13.5px; margin-bottom:5px; break-inside:avoid}
.toc li.lvl3{padding-right:14px; font-size:13px}
.toc a{color:var(--gray)}
.toc a:hover{color:var(--teal)}
@media(max-width:760px){.toc ol{columns:1}}

/* ===== فروشگاه ===== */
.product-card .card-body{gap:10px}
.product-price-row{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.filters a{padding:7px 14px; border-radius:9px; background:#fff; border:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--gray)}
.filters a.active,.filters a:hover{border-color:var(--teal); color:var(--teal); background:#f2fbfc}

.product-layout{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:22px; align-items:start}
@media (max-width:860px){.product-layout{grid-template-columns:1fr}}
.product-gallery{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)}
.product-side{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.spec-list{list-style:none; margin:14px 0}
.spec-list li{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #f1f5f7; font-size:13.5px}
.spec-list li span:first-child{color:var(--muted)}

/* ===== سبد خرید ===== */
.cart-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cart-table th{background:#f7fafb;padding:12px 14px;text-align:right;font-size:12.5px;color:var(--dark);border-bottom:1px solid var(--border)}
.cart-table td{padding:13px 14px;border-bottom:1px solid #f1f5f7;vertical-align:middle}
.cart-table tr:last-child td{border-bottom:none}
.cart-table input[type=number]{font-family:inherit}

/* ===== صفحه‌بندی ===== */
.pagination{display:flex; gap:6px; justify-content:center; margin:26px 0; flex-wrap:wrap}
.pagination a,.pagination span{padding:7px 13px; border-radius:9px; background:#fff; border:1px solid var(--border); font-size:13px; color:var(--gray)}
.pagination .active{background:var(--teal); border-color:var(--teal); color:#fff; font-weight:700}

/* ===== پیام‌ها ===== */
.alert{padding:13px 16px; border-radius:11px; margin-bottom:16px; font-size:13.5px; border:1px solid}
.alert-info{background:#eff6ff; border-color:#bfdbfe; color:#1e40af}
.alert-warn{background:#fffbeb; border-color:#fcd34d; color:#92400e}

/* ===== ۴۰۴ ===== */
.notfound{text-align:center; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:44px 24px; box-shadow:var(--shadow)}
.notfound .code{font-size:64px; font-weight:900; color:var(--teal); line-height:1}
.notfound p{color:var(--muted); margin:10px 0 20px}

/* ===== فوتر ===== */
.site-footer{background:var(--dark); color:#b9c6cd; margin-top:30px; padding-top:30px}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; padding-bottom:22px}
.footer-grid h4{color:#fff; font-size:14.5px; margin-bottom:11px}
.footer-grid p{font-size:12.5px; line-height:1.95}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:7px}
.footer-grid a{color:#b9c6cd; font-size:12.5px}
.footer-grid a:hover{color:var(--teal-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09); padding:14px 16px; font-size:12px; text-align:center}

@media (max-width:900px){
  .nav-toggle{display:block}
  .main-nav{display:none; width:100%; flex-direction:column; order:3; padding-top:8px}
  .main-nav.open{display:flex}
  .header-actions{margin-right:auto}
  .hero{padding:24px 18px} .hero h1{font-size:23px}
  .article{padding:18px 16px}
}