/*!/wp-content/uploads/custom-css-js/36780.css*//******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 11 2026 | 19:09:35 */
/* =======================================================
   MetNet Article Scope CSS — v3.4 (Balanced Desktop Columns + Mobile Labeled Cards)
   پایه: نسخه زنده دیپلوی‌شده روی سایت (css_78) + اصلاح فاصله خالی دسکتاپ + کارت‌های برچسب‌دار موبایل
   ======================================================= */

/* [FIX v3] فونت: قبلاً فقط Regular تعریف شده بود و بدون font-weight.
   چون در CSS برای تیترها و بج‌ها از font-weight:700 استفاده می‌شود،
   مرورگر بولد را «تقلبی» (Synthetic Bold) رندر می‌کرد.
   فایل Vazirmatn-Bold.woff2 را در همان پوشه uploads/fonts آپلود کنید:
   https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2 */
@font-face{font-family:'Vazirmatn';src:url('https://metnet5.ir/wp-content/uploads/fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Vazirmatn';src:url('https://metnet5.ir/wp-content/uploads/fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- Progress Bar ---- */
.metnet-progress-container {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background-color: rgb(0 0 0 / .05); z-index: 99999; pointer-events: none;
}
.metnet-progress-bar {
  height: 100%; background-color: #7C3AED; width: 100%;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.1s ease-out; will-change: transform;
}

/* ---- Scope ---- */
.metnet-article-scope {
  background-color: #FFF; color: #111827;
  font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
  line-height: 2; border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .05), 0 2px 4px -1px rgb(0 0 0 / .03);
  padding: 32px 0; max-width: 840px; margin: 0 auto !important;
  -webkit-text-size-adjust: 100%;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  direction: rtl; position: relative;
}
.metnet-article-scope *,
.metnet-article-scope *::before,
.metnet-article-scope *::after { box-sizing: border-box; }

/* [FIX v3] حاشیه پایین 32px از همه تصاویر حذف شد */
.metnet-article-scope img {
  max-width: 100%; height: auto;
  display: block; border-radius: 12px;
}

.metnet-article-scope h2, .metnet-article-scope h3,
.metnet-article-scope p, .metnet-article-scope ul,
.metnet-article-scope ol, .metnet-article-scope figure { margin: 0; padding: 0; }

/* [FIX v3] لنگرهای فهرست مطالب به h2/h3 */
.metnet-article-scope h2[id],
.metnet-article-scope h3[id],
.metnet-article-scope section[id] { scroll-margin-top: 120px; }

.metnet-article-scope svg { flex-shrink: 0; max-width: none; }

/* [FIX v3] مخفی‌کردن مارکر پیش‌فرض summary */
.metnet-article-scope summary { list-style: none; }
.metnet-article-scope summary::-webkit-details-marker { display: none; }

.metnet-article-scope .container {
  width: 100%; max-width: 800px;
  margin: 0 auto !important; padding: 0 20px !important;
}

/* ---- Header & Meta ---- */
.metnet-article-scope header { padding: 16px 0 24px 0; }
.metnet-article-scope .update-badge-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.metnet-article-scope .update-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background-color: #F5F3FF; border: 1px solid #DDD6FE;
  padding: 4px 12px; border-radius: 9999px; font-size: 11px; color: #7C3AED;
}
.metnet-article-scope .update-badge::before {
  content: ""; width: 6px; height: 6px;
  background-color: #7C3AED; border-radius: 50%;
}
.metnet-article-scope .copy-link-button {
  background-color: #F3F4F6; border: 1px solid #E5E7EB; color: #4B5563;
  font-size: 11px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  font-family: inherit; touch-action: manipulation;
}
.metnet-article-scope .copy-link-button:hover,
.metnet-article-scope .copy-link-button:focus-visible {
  background-color: #E5E7EB; color: #111827;
}
.metnet-article-scope .eeat-verifier {
  display: flex; align-items: center; gap: 8px;
  background-color: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px;
  padding: 8px 12px; font-size: 11px; color: #15803D; margin-bottom: 16px;
}
.metnet-article-scope .meta-info {
  display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px;
  color: #4B5563; padding-bottom: 16px; border-bottom: 1px solid #E5E7EB;
}
.metnet-article-scope .meta-info a {
  color: #4B5563; text-decoration: none; font-weight: 700; transition: color 0.2s;
}
.metnet-article-scope .meta-info a:hover { color: #7C3AED; }

/* ---- Featured Image (LCP) ---- */
.metnet-article-scope .featured-image-wrapper {
  border-radius: 16px; overflow: hidden; border: 1px solid #E5E7EB;
  background-color: #F3F4F6; margin-bottom: 36px !important;
  aspect-ratio: 16 / 9; contain: paint;
}
.metnet-article-scope .featured-image-wrapper img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; margin-bottom: 0 !important; border-radius: 0;
}
.metnet-article-scope .featured-image-caption {
  font-size: 11px; color: #4B5563; text-align: center;
  padding: 10px 16px; background-color: #F9FAFB;
  border-top: 1px solid #E5E7EB; line-height: 1.6;
}

/* ---- Content Images ---- */
.metnet-article-scope .content-image-wrapper {
  margin: 32px 0; text-align: center; padding: 24px 16px;
  border-radius: 12px; background-color: #F9FAFB; border: 1px solid #F3F4F6;
}
.metnet-article-scope .content-image-wrapper img {
  margin-left: auto; margin-right: auto; margin-bottom: 0 !important;
  border-radius: 8px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}
.metnet-article-scope .image-caption {
  font-size: 12px; color: #64748B; margin-top: 12px; line-height: 1.8;
}

/* ---- Quick Summary & TOC ---- */
.metnet-article-scope .quick-summary {
  background: linear-gradient(135deg, #F5F3FF, #EFF6FF);
  border: 1px solid #DDD6FE; border-radius: 16px;
  padding: 24px; margin-top: 36px !important; margin-bottom: 36px !important;
}
.metnet-article-scope .quick-summary-title {
  font-weight: 700; color: #7C3AED; margin-bottom: 12px;
  font-size: 15px; display: flex; align-items: center; gap: 8px;
}
.metnet-article-scope .quick-summary-text {
  font-size: 14px; color: #374151; line-height: 1.8; text-align: right;
}
.metnet-article-scope .toc-box {
  background-color: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px;
  padding: 16px; margin-top: 32px !important; margin-bottom: 32px !important;
}
.metnet-article-scope .toc-box summary {
  font-weight: 700; color: #111827; cursor: pointer; font-size: 14px;
  outline: none; user-select: none; display: flex; align-items: center;
  gap: 8px; touch-action: manipulation;
}
.metnet-article-scope .toc-box ul {
  list-style: none; padding-top: 12px; margin-top: 12px;
  border-top: 1px solid #E5E7EB; padding-right: 16px;
}
.metnet-article-scope .toc-box li {
  margin-bottom: 8px; position: relative; padding-right: 12px;
}
.metnet-article-scope .toc-box li::before {
  content: "•"; position: absolute; right: 0; color: #7C3AED; font-weight: 700;
}
.metnet-article-scope .toc-box a {
  color: #4B5563; text-decoration: none; font-size: 13px; transition: color 0.2s;
}
.metnet-article-scope .toc-box a:hover { color: #7C3AED; }

/* ---- Body ---- */
.metnet-article-scope .article-content { margin-bottom: 32px; }
.metnet-article-scope .article-content h2 {
  font-size: 20px; color: #111827; margin-top: 36px; margin-bottom: 16px;
  border-right: 4px solid #7C3AED; padding-right: 12px;
}
.metnet-article-scope .article-content h3 {
  font-size: 16px; color: #1F2937; margin-top: 24px; margin-bottom: 12px;
  padding-right: 16px; position: relative;
}
.metnet-article-scope .article-content h3::before {
  content: "•"; position: absolute; right: 0; color: #7C3AED; font-weight: 700;
}
.metnet-article-scope .article-content p {
  font-size: 17px; color: #374151; margin-bottom: 24px; text-align: right;
}
.metnet-article-scope .article-content a {
  color: #7C3AED; text-decoration: underline; transition: color 0.2s;
}
.metnet-article-scope .article-content a:hover { color: #6D28D9; }
.metnet-article-scope .article-content ul,
.metnet-article-scope .article-content ol {
  padding-right: 24px; margin-bottom: 24px;
}
.metnet-article-scope .article-content li {
  margin-bottom: 12px; color: #374151; line-height: 2; font-size: 16px;
}
.metnet-article-scope .article-content > img { margin-bottom: 24px; }

/* ---- AI Overviews 2026: Answer Capsule & Technical Metrics ---- */
.metnet-article-scope .answer-capsule {
  background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
  border-right: 4px solid #6366F1 !important;
  border-radius: 0 12px 12px 0;
  padding: 14px 18px !important;
  margin: 16px 0 24px 0 !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: #0F172A !important;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.metnet-article-scope .answer-capsule strong {
  color: #4338CA !important;
  font-weight: 700;
}
.metnet-article-scope .tech-metric {
  display: inline-block;
  background-color: #EEF2FF;
  color: #4338CA !important;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, sans-serif;
  font-size: 13px !important;
  font-weight: 700;
  direction: ltr !important;
  unicode-bidi: isolate;
  margin: 0 3px;
  border: 1px solid #C7D2FE;
}

/* ---- Mid-article CTA ---- */
.metnet-article-scope .mid-article-cta {
  background-color: #F9FAFB; border: 1px dashed #DDD6FE; border-radius: 12px;
  padding: 16px; margin: 24px 0; text-align: center; font-size: 14px;
  color: #374151; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.metnet-article-scope .mid-article-cta-text {
  display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700;
}
@media (min-width: 480px) {
  .metnet-article-scope .mid-article-cta { flex-direction: row; justify-content: center; }
}
.metnet-article-scope .mid-article-cta-btn {
  color: #7C3AED !important; text-decoration: none !important; font-weight: 700;
  border-bottom: 2px solid #7C3AED; display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s, border-color 0.2s; touch-action: manipulation;
}
.metnet-article-scope .mid-article-cta-btn:hover,
.metnet-article-scope .mid-article-cta-btn:focus-visible {
  color: #6D28D9 !important; border-color: #6D28D9;
}

/* ---- CSS Diagram ---- */
.metnet-article-scope .css-diagram {
  background-color: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 16px; padding: 24px; margin: 32px 0;
}
.metnet-article-scope .diagram-title {
  font-size: 13px; color: #4B5563; text-align: center;
  margin-bottom: 16px; font-weight: 700;
}
.metnet-article-scope .diagram-flow { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 600px) {
  .metnet-article-scope .diagram-flow { flex-direction: row; align-items: center; justify-content: space-between; }
}
.metnet-article-scope .diagram-node {
  flex: 1; background-color: #FFF; border: 1px solid #E5E7EB; border-radius: 8px;
  padding: 12px; text-align: center; font-size: 12px; color: #111827;
  box-shadow: 0 1px 3px rgb(0 0 0 / .02); display: flex;
  align-items: center; justify-content: center; gap: 8px;
}
.metnet-article-scope .diagram-arrow {
  text-align: center; display: flex; align-items: center; justify-content: center;
}
.metnet-article-scope .diagram-arrow-icon {
  width: 16px; height: 16px; fill: none; stroke: #7C3AED; stroke-width: 3;
}
@media (min-width: 600px) {
  .metnet-article-scope .diagram-arrow-icon { transform: rotate(90deg); }
}

/* ---- Expert Box ---- */
.metnet-article-scope .expert-box {
  background-color: #F5F3FF; border-right: 4px solid #7C3AED;
  border-radius: 0 12px 12px 0; padding: 20px; margin: 28px 0;
}
.metnet-article-scope .expert-box-title {
  font-weight: 700; color: #7C3AED; display: flex; align-items: center;
  gap: 8px; margin-bottom: 8px; font-size: 14px;
}
.metnet-article-scope .expert-box-text { font-size: 14px; color: #4B5563; margin: 0; }

/* =======================================================
   [FIX v3.4] جدول متوازن دسکتاپ + کارت‌های برچسب‌دار موبایل:
   ۱. در کامپیوتر: توزیع دقیق درصدی عرض ستون‌ها و وسط‌چین مقادیر (حذف فاصله خالی)
   ۲. در موبایل: کارت‌های عمودی با برچسب‌های تفکیک‌شده
   ======================================================= */

/* ---- حالت اول: در کامپیوتر و صفحات عریض (> 640px) ---- */
@media (min-width: 641px) {
  .metnet-article-scope .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    margin: 32px 0;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  }
  .metnet-article-scope table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: #4B5563;
  }
  .metnet-article-scope th {
    background-color: #F9FAFB;
    color: #111827;
    padding: 14px 16px;
    font-weight: 700;
    border-bottom: 2px solid #E5E7EB;
    white-space: nowrap;
  }
  .metnet-article-scope td {
    padding: 14px 16px;
    border-top: 1px solid #E5E7EB;
    line-height: 1.8;
    vertical-align: middle;
  }
  .metnet-article-scope tr:nth-child(even) {
    background-color: #F9FAFB;
  }

  /* رفع کامل فضای خالی با تخصیص عرض‌های درصدی مهندسی‌شده */
  .metnet-article-scope th:first-child,
  .metnet-article-scope td:first-child {
    width: 22%;
    text-align: right;
  }
  /* ستون مقادیر ایده‌آل: وسط‌چین دقیق زیر هدر */
  .metnet-article-scope th:nth-child(2),
  .metnet-article-scope td:nth-child(2) {
    width: 20%;
    text-align: center;
  }
  /* ستون مقادیر بحرانی: وسط‌چین دقیق زیر هدر (رفع فضای خالی سمت چپ) */
  .metnet-article-scope th:nth-child(3):not(:last-child),
  .metnet-article-scope td:nth-child(3):not(:last-child) {
    width: 22%;
    text-align: center;
  }
  /* ستون توضیحات و پیامدها: راست‌چین با عرض کامل باقی‌مانده و توزیع روان خطوط */
  .metnet-article-scope th:last-child,
  .metnet-article-scope td:last-child {
    width: 36%;
    text-align: right;
    vertical-align: middle;
  }

  .metnet-article-scope .highlight-cell {
    color: #15803D;
    font-weight: 700;
  }
}

/* ---- حالت دوم: در موبایل (<= 640px) کارت‌های عمودی با برچسب‌های تفکیک‌شده ---- */
@media (max-width: 640px) {
  .metnet-article-scope .table-wrapper {
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    margin: 24px 0 !important;
    box-shadow: none !important;
  }
  .metnet-article-scope table {
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
    border: none !important;
    border-collapse: separate !important;
  }
  .metnet-article-scope thead {
    display: none !important; /* مخفی‌کردن هدر افقی در موبایل */
  }
  .metnet-article-scope tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .metnet-article-scope tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
  }
  .metnet-article-scope td {
    width: 100% !important;
    padding: 10px 0 !important;
    border: none !important;
    border-bottom: 1px dashed #E5E7EB !important;
    font-size: 13.5px !important;
    line-height: 1.8 !important;
    color: #374151 !important;
    text-align: right !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* ۱. نام پارامتر در هدر کارت */
  .metnet-article-scope td:first-child {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #7C3AED !important;
    background-color: #F5F3FF !important;
    margin: -16px -16px 12px -16px !important;
    padding: 12px 16px !important;
    border-radius: 13px 13px 0 0 !important;
    border-bottom: 1px solid #DDD6FE !important;
    text-align: right !important;
  }

  /* ۲. برچسب مشخص‌کننده «شرایط ایده‌آل» در موبایل */
  .metnet-article-scope td:nth-child(2)::before {
    content: "شرایط ایده‌آل (استاندارد):";
    font-weight: 700;
    color: #15803D !important;
    font-size: 12px !important;
    flex-shrink: 0;
  }

  /* ۳. برچسب مشخص‌کننده «شرایط بحرانی» در موبایل */
  .metnet-article-scope td:nth-child(3):not(:last-child)::before {
    content: "شرایط بحرانی (نیاز به تقویت):";
    font-weight: 700;
    color: #DC2626 !important;
    font-size: 12px !important;
    flex-shrink: 0;
  }

  /* ۴. کادر توضیحات و پیامدها در انتهای کارت */
  .metnet-article-scope td:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    border-bottom: none !important;
    padding: 12px !important;
    margin-top: 6px !important;
    color: #4B5563 !important;
    font-size: 13px !important;
    background-color: #F9FAFB !important;
    border-radius: 8px !important;
    line-height: 1.85 !important;
    text-align: right !important;
    gap: 4px !important;
  }
  .metnet-article-scope td:last-child::before {
    content: "توضیح عملکرد و پیامدها:";
    font-weight: 700;
    color: #111827 !important;
    font-size: 12px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 4px;
    width: 100%;
  }

  .metnet-article-scope .highlight-cell {
    color: #15803D !important;
    font-weight: 700 !important;
  }
}

/* Optimization: Content Visibility */
.metnet-article-scope .conclusion-section,
.metnet-article-scope .faq-section,
.metnet-article-scope .final-cta,
.metnet-article-scope .products-section,
.metnet-article-scope .author-box {
  content-visibility: auto; contain-intrinsic-size: auto 500px;
}

/* ---- Conclusion ---- */
.metnet-article-scope .conclusion-section {
  background-color: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 16px; padding: 24px; margin-top: 40px;
}
.metnet-article-scope .conclusion-section h2 {
  font-size: 20px; color: #111827; margin-top: 0; margin-bottom: 16px;
  border-right: 4px solid #7C3AED; padding-right: 12px;
}
.metnet-article-scope .conclusion-list {
  list-style: none; display: flex; flex-direction: column; gap: 12px;
}
.metnet-article-scope .conclusion-item {
  display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #374151;
}
.metnet-article-scope .conclusion-item-icon { color: #16A34A; font-weight: 700; }

/* ---- FAQ ---- */
.metnet-article-scope .faq-section {
  margin-top: 40px; border-top: 1px solid #E5E7EB; padding-top: 32px;
}
.metnet-article-scope .faq-section h2 {
  font-size: 20px; color: #111827; margin-top: 0; margin-bottom: 20px;
  border-right: 4px solid #7C3AED; padding-right: 12px;
  display: flex; align-items: center; gap: 8px;
}
.metnet-article-scope .faq-item {
  background-color: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
}
.metnet-article-scope .faq-item summary {
  font-weight: 700; color: #1F2937; cursor: pointer; outline: none;
  font-size: 14px; user-select: none; display: flex; align-items: center;
  touch-action: manipulation;
}
.metnet-article-scope .faq-item p {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #E5E7EB;
  font-size: 13px; line-height: 1.8; color: #4B5563;
}

/* ---- Final CTA ---- */
.metnet-article-scope .final-cta {
  background: linear-gradient(135deg, #F5F3FF, #EFF6FF);
  border: 1px solid #DDD6FE; border-radius: 20px;
  padding: 32px 20px; text-align: center; margin-top: 40px;
}
.metnet-article-scope .final-cta h3 { color: #111827; font-size: 18px; margin-bottom: 8px; }
.metnet-article-scope .final-cta p { color: #4B5563; font-size: 13px; margin-bottom: 24px; }
.metnet-article-scope .cta-buttons-container {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  justify-items: center; margin-bottom: 16px;
}
@media (min-width: 480px) {
  .metnet-article-scope .cta-buttons-container {
    grid-template-columns: 1fr 1fr; gap: 16px; max-width: 500px;
    margin-left: auto; margin-right: auto;
  }
}
.metnet-article-scope .cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #FFFFFF !important; text-decoration: none !important; font-weight: 700;
  font-size: 13px; padding: 14px 20px; border-radius: 12px;
  transition: background-color 0.2s, transform 0.2s; width: 100%; touch-action: manipulation;
}
.metnet-article-scope .cta-button:active { transform: scale(.97); }
.metnet-article-scope .cta-button-phone { background-color: #7C3AED; }
.metnet-article-scope .cta-button-phone:hover { background-color: #6D28D9; }
.metnet-article-scope .cta-button-whatsapp { background-color: #10B981; }
.metnet-article-scope .cta-button-whatsapp:hover { background-color: #0D9488; }
.metnet-article-scope .cta-button-bale { background-color: #2563EB; }
.metnet-article-scope .cta-button-bale:hover { background-color: #1D4ED8; }
.metnet-article-scope .cta-button-rubika { background-color: #EA580C; }
.metnet-article-scope .cta-button-rubika:hover { background-color: #C2410C; }
.metnet-article-scope .trust-badges-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  font-size: 11px; color: #4B5563; margin-top: 12px;
}
.metnet-article-scope .trust-badge-item {
  display: inline-flex; align-items: center; gap: 4px;
  background-color: rgb(255 255 255 / .6); border: 1px solid #E5E7EB;
  padding: 4px 10px; border-radius: 6px;
}

/* ---- Products ---- */
.metnet-article-scope .products-section-title {
  font-size: 18px; color: #111827; text-align: center; margin: 48px 0 24px 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.metnet-article-scope .products-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 600px) {
  .metnet-article-scope .products-grid { grid-template-columns: 1fr 1fr; }
}
.metnet-article-scope .product-card {
  background-color: #FFF; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none !important; transition: border-color 0.2s, box-shadow 0.2s;
}
.metnet-article-scope .product-card:hover,
.metnet-article-scope .product-card:focus-visible {
  border-color: #7C3AED; box-shadow: 0 4px 12px rgb(124 58 237 / .05);
}
.metnet-article-scope .product-image {
  aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background-color: #F3F4F6; margin-bottom: 12px; border: 1px solid #E5E7EB;
}
.metnet-article-scope .product-image img { width: 100%; height: 100%; object-fit: cover; }
.metnet-article-scope .product-card h4 { color: #111827; font-size: 14px; margin-bottom: 6px; }
.metnet-article-scope .product-card p { color: #4B5563; font-size: 12px; margin-bottom: 16px; }
.metnet-article-scope .product-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid #E5E7EB; margin-top: auto; direction: rtl !important;
}
.metnet-article-scope .product-price-label { font-size: 11px; color: #6B7280; }
.metnet-article-scope .product-price { font-size: 14px; font-weight: 700; color: #7C3AED; }

/* ---- Author ---- */
.metnet-article-scope .author-box {
  background-color: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: 16px; padding: 24px; margin-top: 48px;
}
.metnet-article-scope .author-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.metnet-article-scope .author-avatar-svg {
  background-color: #FFF; border: 2px solid #7C3AED; border-radius: 50%;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgb(0 0 0 / .02); flex-shrink: 0;
}
.metnet-article-scope .author-details h4 { color: #111827; font-size: 14px; margin-bottom: 4px; }
.metnet-article-scope .author-details a { color: #7C3AED; text-decoration: none; }
.metnet-article-scope .author-details a:hover { color: #6D28D9; text-decoration: underline; }
.metnet-article-scope .author-details p { color: #4B5563; font-size: 12px; margin: 0; }
.metnet-article-scope .author-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  border-top: 1px solid #E5E7EB; padding-top: 16px; font-size: 11px; color: #4B5563;
}
@media (max-width: 480px) {
  .metnet-article-scope .author-meta-grid { grid-template-columns: 1fr; }
}
.metnet-article-scope .author-meta-label { color: #6B7280; }

/* ---- Focus (Accessibility) ---- */
.metnet-article-scope a:focus-visible,
.metnet-article-scope button:focus-visible,
.metnet-article-scope summary:focus-visible {
  outline: 3px solid #7C3AED; outline-offset: 3px; border-radius: 4px;
}