/* =====================================================================
   vic.ir · صفحه «تازه‌ها» · Content/new-arrivals.css
   همه‌چیز زیر .nw-page اسکوپ شده است. تم پیش‌فرض تیره؛ با .nw-light روشن می‌شود.
   هدر سایت از _Layout می‌آید و در این فایل نیست.
   ===================================================================== */
.nw-page {
  --nw-bg: #0A1626;
  --nw-surface: #0F2238;
  --nw-surface-2: #14304F;
  --nw-surface-3:#ffffff;
  --nw-line: rgba(255,255,255,.09);
  --nw-blue: #153D6E;
  --nw-accent: #F5821F;
  --nw-accent-text: #F5821F;
  --nw-teal: #2C8C93;
  --nw-crumbbar: #0F2238;
  --nw-text: #E8EEF5;
  --nw-muted: #93A4B8;
  --nw-shadow: none;
  --nw-radius: 12px;

  background: var(--nw-bg);
  color: var(--nw-text);
  font-family: "Vazirmatn","IRANSans", Tahoma, sans-serif;
  line-height: 1.8;
}
.nw-page *, .nw-page *::before, .nw-page *::after { box-sizing: border-box; }
.nw-page.nw-light {
  --nw-bg: #F3F6FA;
  --nw-surface: #FFFFFF;
  --nw-surface-2: #FFF8F0;
  --nw-line: rgba(21,61,110,.14);
  --nw-accent-text: #B85A08;
  --nw-crumbbar: #E8EDF4;
  --nw-text: #12233A;
  --nw-muted: #566579;
  --nw-shadow: 0 1px 2px rgba(21,61,110,.06);
}
.nw-wrap { max-width: 1200px; margin: 0 auto; }

/* --- بنر بالای صفحه --- */
/* برای تصویر واقعی: --nw-hero-img: url('/Content/img/hero.jpg'); */
.nw-hero {
  --nw-hero-img: none;
  background-color: #0E2A4D;
  background-image:
    linear-gradient(270deg, rgba(8,20,36,.82) 0%, rgba(14,42,77,.55) 55%, rgba(14,42,77,.75) 100%),
    var(--nw-hero-img);
  background-size: cover; background-position: center;
  color: #fff;
}
.nw-hero .nw-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 56px 20px; min-height: 260px;
}
.nw-hero h1 { margin: 0; font-size: clamp(26px, 4.2vw, 44px); font-weight: 800; line-height: 1.5; }
.nw-hero h1 span { display: block; color: var(--nw-accent); }
.nw-stats { display: flex; }
.nw-stat { padding: 4px 26px; text-align: center; border-inline-start: 1px solid rgba(255,255,255,.35); }
.nw-stat:first-child { border-inline-start: 0; }
.nw-stat b { display: block; font-size: 30px; font-weight: 800; line-height: 1.4; }
.nw-stat small { display: block; font-size: 13px; color: #D3DEEC; }

/* --- مسیر صفحه --- */
.nw-crumbbar { background: var(--nw-crumbbar); border-bottom: 1px solid var(--nw-line); }
.nw-crumb { margin: 0; padding: 12px 20px; font-size: 14px; color: var(--nw-muted); display: flex; align-items: center; gap: 8px; }
.nw-crumb a { color: var(--nw-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.nw-crumb a:hover { color: var(--nw-accent-text); }
.nw-crumb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nw-crumb-sep { opacity: .6; }
.nw-crumb [aria-current] { color: var(--nw-text); font-weight: 500; }

/* --- ناوبری بخش‌ها --- */
.nw-tabs {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,22,38,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nw-line);
}
.nw-tabs .nw-wrap {
  display: flex; gap: 8px; padding: 10px 20px; overflow-x: auto;
}
.nw-tab {
  flex: 0 0 auto;
  padding: 6px 16px; border-radius: 999px;
  border: 1px solid var(--nw-line);
  color: var(--nw-text); text-decoration: none; font-size: 14px;
  transition: background .15s, border-color .15s, color .15s;
}
.nw-tab:hover { border-color: var(--nw-accent); color: var(--nw-accent-text); }
.nw-tab:focus-visible, .nw-more:focus-visible, .nw-card-link:focus-visible {
  outline: 2px solid var(--nw-accent); outline-offset: 2px;
}

/* --- بخش‌ها --- */
.nw-main { padding: 8px 20px 64px; }
.nw-section { padding-top: 40px; scroll-margin-top: 56px; }
.nw-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--nw-accent);
}
.nw-sec-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.nw-sec-head p { margin: 2px 0 0; color: var(--nw-muted); font-size: 14px; }
.nw-more {
  flex: 0 0 auto;
  color: var(--nw-accent-text); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 6px 2px; border-bottom: 1px solid transparent;
}
.nw-more::after { content: " ‹"; }
.nw-more:hover { border-bottom-color: var(--nw-accent-text); }

/* --- شبکه کارت‌ها --- */
.nw-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nw-grid-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nw-card {
  position: relative;
  background: var(--nw-surface);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, background .15s;
}
.nw-card:hover { border-color: rgba(245,130,31,.6); background: var(--nw-surface-2); }
.nw-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.nw-title {
  margin: 6px 0 0; font-size: 16px; font-weight: 700; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 3.2em;
}
.nw-meta { margin: 0; font-size: 13px; color: var(--nw-muted); display: flex; align-items: center; gap: 6px; }
.nw-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: 0 0 auto; }
.nw-activity { margin: 0; font-size: 13px; color: #C3D0E0; display: flex; align-items: center; gap: 8px; }
.nw-code {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  background: rgba(44,140,147,.18); color: #7fd0d6;
  padding: 1px 8px; border-radius: 6px; direction: ltr;
}
.nw-foot {
  margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--nw-line);
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--nw-muted);
}
.nw-go { color: var(--nw-accent-text); font-weight: 500; }
.nw-card:hover .nw-go::after { content: " ‹"; }

/* --- شرکت --- */
.nw-avatar {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--nw-blue); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  border: 1px solid rgba(255,255,255,.14);
}
/* --- محصول --- */
.nw-thumb {
  height: 96px; border-radius: 8px;
  background: repeating-linear-gradient(135deg, #12294a 0 10px, #0f2440 10px 20px);
  display: grid; place-items: center;
}
.nw-thumb svg { width: 44px; height: 44px; fill: none; stroke: #5f7fa6; stroke-width: 1.5; stroke-linejoin: round; }
/* --- برند --- */
.nw-brand-mark {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--nw-accent); color: var(--nw-accent);
  display: grid; place-items: center; font-weight: 800; font-size: 24px;
}
/* --- نمایشگاه --- */
.nw-ex { flex-direction: row; gap: 16px; align-items: stretch; }
.nw-date {
  flex: 0 0 68px; border-radius: 10px;
  background: var(--nw-blue); border: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.3;
}
.nw-date b { font-size: 26px; font-weight: 800; color: var(--nw-accent); }
.nw-date span { font-size: 13px; color:var(--nw-surface-3) }
.nw-ex-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nw-ex .nw-title { min-height: 0; margin-top: 0; }

/* --- واکنش‌گرایی --- */
@media (max-width: 991px) {
  .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .nw-grid, .nw-grid-ex { grid-template-columns: 1fr; }
  .nw-sec-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .nw-title { min-height: 0; }
}
@media (max-width: 991px) {
  .nw-hero .nw-wrap { flex-direction: column; align-items: flex-start; padding: 36px 20px; }
  .nw-stat:first-child { padding-inline-start: 0; }
}
@media (max-width: 575px) {
  .nw-stats { flex-wrap: wrap; row-gap: 12px; }
  .nw-stat { padding: 4px 16px; }
  .nw-stat b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --- تم روشن: تفاوت‌هایی که با متغیر حل نمی‌شوند --- */
.nw-light .nw-tabs { background: rgba(243,246,250,.94); }
.nw-light .nw-tab { background: #fff; }
.nw-light .nw-activity { color: #2E4460; }
.nw-light .nw-code { background: rgba(44,140,147,.12); color: #1E6F75; }
.nw-light .nw-thumb { background: repeating-linear-gradient(135deg, #E9F0F8 0 10px, #E1EAF5 10px 20px); }
.nw-light .nw-thumb svg { stroke: #7E97B8; }
.nw-light .nw-brand-mark { color: var(--nw-accent-text); background: #FFF3E6; }

/* --- تصویر واقعی داخل آواتار / تصویر محصول / نشان برند --- */
.nw-avatar, .nw-thumb, .nw-brand-mark { overflow: hidden; }
.nw-avatar img, .nw-brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- حالت خالی --- */
.nw-empty {
  padding: 28px 16px; text-align: center; color: var(--nw-muted);
  border: 1px dashed var(--nw-line); border-radius: var(--nw-radius);
}