/* توکن‌های طراحی — مطابق «سند طراحی صفحه اصلی مستر ۵ درصد» */
:root {
  /* رنگ‌ها */
  --green: #06604E;
  --green-dark: #045743;      /* فقط Hover/Pressed */
  --green-light: #E5F2EF;
  --navy: #101050;
  --black: #111111;
  --gray: #8A8D99;
  --border: #E7EBF1;
  --card-border: #ECEFF3;
  --bar-border: #E5ECEA;
  --badge-red: #EF3340;
  --search-bg: #FBFCFF;
  --placeholder: #9295A3;
  --category-bg: #F8F9FD;
  --white: #FFFFFF;

  /* Radius ها */
  --radius-header-btn: 9px;
  --radius-search: 10px;
  --radius-category: 8px;
  --radius-card: 10px;
  --radius-badge: 6px;
  --radius-bar: 10px;

  /* فاصله‌ها */
  --page-pad: 8px;
  --top-gap: 18px;
  --section-gap: 10px;
  --col-gap: 4px;
  --row-gap: 6px;

  /* ابعاد */
  --page-max: 430px;
  --header-h: 56px;
  --search-h: 42px;
  --category-bar-h: 74px;
  --category-w: 64px;
  --category-h: 68px;
  --subcategory-bar-h: 30px;
  --card-h: 186px;
  --bar-h: 56px;
  --bar-gap: 8px;

  --font: "Vazirmatn", "IRANSansX", system-ui, "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", sans-serif;

  /* Placeholder ساده عکس (محصول خراب/موجود‌نبودن) */
  --placeholder-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3C9D6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E");

  /* پیش‌فرض = موبایل (بازه ۳۶۰ تا ۴۳۰): ۴ ستون، ستون وسط‌چین تا ۴۳۰px، بدون بزرگ‌نمایی (بند طراحی مرجع دقیقاً همین است) */
  --cols: 4;
  --bar-max: 430px;
  --fluid-scale: 1;
}

/*
  تبلت، لپ‌تاپ و دسکتاپ: «طراحی واقعی دسکتاپ» — با بزرگ‌ترشدن صفحه، آیکون‌ها، کارت‌ها، فونت‌ها و
  فاصله‌ها هم به همان نسبت بزرگ‌تر می‌شوند (نه فقط تعداد ستون‌ها)، دقیقاً مثل یک وب‌سایت دسکتاپ واقعی
  (مثل دیجی‌کالا/اسنپ) نه یک صفحه موبایل تکرارشده. رنگ‌ها، چیدمان و برند دقیقاً همان می‌ماند.

  --fluid-scale یک ضریب پیوسته (نه پله‌ای) است: از ۱ در ۶۰۰px شروع و تا ۱٫۷ در ۱۹۲۰px بالا می‌رود
  و بعد از آن ثابت می‌ماند (clamp) — یعنی با هر عرض صفحه‌ای بین این دو، اندازه‌ها خودکار و نرم
  (بدون پرش ناگهانی) با آن تطبیق پیدا می‌کنند. تمام توکن‌های اندازه/فاصله/Radius با همین ضریب
  در calc() ضرب می‌شوند تا هم‌زمان و هم‌نسبت بزرگ شوند (تناسب کارت‌ها به‌هم نمی‌خورد).
*/
@media (min-width: 600px) {
  :root {
    --fluid-scale: clamp(1, calc(1 + 0.7 * (100vw - 600px) / 1320px), 1.7);

    --radius-header-btn: calc(9px * var(--fluid-scale));
    --radius-search: calc(10px * var(--fluid-scale));
    --radius-category: calc(8px * var(--fluid-scale));
    --radius-card: calc(10px * var(--fluid-scale));
    --radius-badge: calc(6px * var(--fluid-scale));
    --radius-bar: calc(10px * var(--fluid-scale));

    --page-pad: calc(8px * var(--fluid-scale));
    --top-gap: calc(18px * var(--fluid-scale));
    --section-gap: calc(10px * var(--fluid-scale));
    --col-gap: calc(4px * var(--fluid-scale));
    --row-gap: calc(6px * var(--fluid-scale));

    --header-h: calc(56px * var(--fluid-scale));
    --search-h: calc(42px * var(--fluid-scale));
    --category-bar-h: calc(74px * var(--fluid-scale));
    --category-w: calc(64px * var(--fluid-scale));
    --category-h: calc(68px * var(--fluid-scale));
    --subcategory-bar-h: calc(30px * var(--fluid-scale));
    --card-h: calc(186px * var(--fluid-scale));
    --bar-h: calc(56px * var(--fluid-scale));

    /* عرض پایه هر بازه طوری انتخاب شده که با ضرب در --fluid-scale، عرض/تناسب کارت با موبایل یکی بماند */
    --cols: 6;
    --page-max: calc(580px * var(--fluid-scale));
    --bar-max: calc(720px * var(--fluid-scale));
  }
}
@media (min-width: 900px) {   /* تبلت افقی / لپ‌تاپ */
  :root { --cols: 8; --page-max: calc(770px * var(--fluid-scale)); }
}
@media (min-width: 1280px) {  /* مانیتور بزرگ */
  :root { --cols: 10; --page-max: calc(960px * var(--fluid-scale)); }
}