@charset "UTF-8";
/* ==========================================================================
   D3 HEALTH MARKET — Design System
   جهت: راست‌چین (RTL) | زبان: فارسی
   رنگ‌ها از logos/brand.css گرفته شده و نسبت کنتراست‌شان تست شده است.
   قانون طلایی: لیمویی فقط رنگ پس‌زمینه است، هرگز رنگ متن روی سفید نیست.
   ========================================================================== */

/* ---------- 1. فونت ----------
   ایران‌یکان از فایل محلی لود می‌شود، پس سایت کاملاً آفلاین هم کار می‌کند.
   (برای پرزنت مهم است — اگر اینترنت جلسه قطع شود، چیزی خراب نمی‌شود.) */
@font-face {
  font-family: "IRANYekan";
  src: url("../fonts/iranyekanwebregular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IRANYekan";
  src: url("../fonts/iranyekanwebmedium.woff") format("woff");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "IRANYekan";
  src: url("../fonts/iranyekanwebbold.woff") format("woff");
  font-weight: 700 900;
  font-display: swap;
}

/* ---------- 2. توکن‌ها ---------- */
:root {
  /* برند */
  --magenta: #bf1c79;
  --magenta-900: #7a114d;
  --magenta-700: #a4176a;
  --magenta-100: #f7e2ee;
  --magenta-050: #fdf5f9;
  --lime: #a6ce5b;
  --lime-700: #6e9433;
  --lime-100: #edf5de;

  /* خنثی */
  --ink: #16151a;
  --ink-2: #3d3b44;
  --muted: #6f6b78;
  --faint: #9c97a5;
  --line: #e8e2dc;
  --line-2: #f1ece6;
  --paper: #faf8f5;
  --tile: #f4f1ec;
  --white: #fff;

  /* معنایی */
  --ok: #2e7d4f;
  --ok-bg: #e8f4ec;
  --warn: #b26a00;
  --warn-bg: #fdf1de;
  --danger: #c0342b;

  /* شعاع */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  /* سایه — بسیار ملایم، حس پریمیوم از خط می‌آید نه از سایه */
  --sh-1: 0 1px 2px rgba(22, 21, 26, 0.04);
  --sh-2: 0 4px 16px -6px rgba(22, 21, 26, 0.1);
  --sh-3: 0 18px 44px -18px rgba(22, 21, 26, 0.22);
  --sh-mag: 0 10px 30px -12px rgba(191, 28, 121, 0.45);

  /* حرکت */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 0.28s var(--ease);

  /* چیدمان */
  --wrap: 1280px;
  --gut: 24px;
  --header-h: 76px;

  /* ─────────────────────────────────────────────────────────────
     مقیاس فونت
     -------------------------------------------------------------
     قانون: هیچ font-size خامی در CSS ننویس. فقط از این توکن‌ها.

     قبلاً ۳۷ سایز مختلف در فایل بود — بین ۰.۸۵ و ۰.۹۰ رِم شش سایز
     متفاوت داشتیم که چشم اصلاً تفاوتشان را نمی‌بیند، ولی نگه داشتن
     سایت را غیرممکن می‌کرد. حالا ۹ پله ثابت داریم.

     ثابت‌ها برای رابط کاربری (دکمه، برچسب، جدول، متن کارت).
     برای تیترها از توکن‌های سیال (fluid) پایین‌تر استفاده کن.
     ───────────────────────────────────────────────────────────── */
  --fs-100: 0.6875rem; /* ۱۱px — ریزترین. واحد کنار عدد، زیرنویس آیکون */
  --fs-200: 0.75rem;   /* ۱۲px — برچسب، تگ، نام برند روی کارت */
  --fs-300: 0.8125rem; /* ۱۳px — متن کمکی، توضیح زیر فیلد */
  --fs-400: 0.875rem;  /* ۱۴px — پیش‌فرض متن رابط کاربری ← پرکاربردترین */
  --fs-500: 1rem;      /* ۱۶px — متن اصلی پاراگراف، دکمه بزرگ */
  --fs-600: 1.125rem;  /* ۱۸px — تیتر کوچک داخل کارت */
  --fs-700: 1.25rem;   /* ۲۰px — قیمت بزرگ */
  --fs-800: 1.5rem;    /* ۲۴px */
  --fs-900: 1.875rem;  /* ۳۰px — عدد شاخص */

  /* تیترها — سیال‌اند، یعنی خودشان با عرض صفحه بزرگ و کوچک می‌شوند.
     دست به مقدارهای داخل clamp نزن؛ اگر تیتر جدیدی لازم داشتی یکی از
     همین‌ها را بردار، نه اینکه clamp تازه بنویسی. */
  --fs-fluid-1: clamp(2.1rem, 5.2vw, 3.65rem); /* تیتر قهرمان صفحه اصلی */
  --fs-fluid-2: clamp(1.7rem, 3.6vw, 2.6rem);  /* تیتر بزرگ صفحه فرود */
  --fs-fluid-3: clamp(1.5rem, 3.2vw, 2.3rem);  /* h2 — تیتر بخش */
  --fs-fluid-4: clamp(1.35rem, 2.4vw, 1.85rem);/* تیتر بخش کوچک‌تر */
  --fs-fluid-5: clamp(1.15rem, 2vw, 1.4rem);   /* h3 */
  --fs-lead: clamp(1rem, 1.6vw, 1.16rem);      /* پاراگراف مقدمه زیر تیتر */

  /* وزن فونت — این چهار وزن الان واقعاً در سایت استفاده می‌شوند.
     ⚠️ بدهی طراحی: ۶۰۰ و ۷۰۰ آن‌قدر به هم نزدیک‌اند که تفاوتشان دیده
     نمی‌شود. یکی‌شان باید حذف شود (پیشنهاد: ۶۰۰ برداشته شود و همه‌جا
     ۷۰۰ بماند) ولی چون این تغییر ظاهر سایت را عوض می‌کند، خودت باید
     تصمیم بگیری. تا آن موقع، برای کد جدید فقط از normal و bold و black
     استفاده کن. */
  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ارتفاع خط — فارسی به فضای بیشتری از لاتین نیاز دارد */
  --lh-tight: 1.24; /* تیتر */
  --lh-snug: 1.45;  /* متن رابط کاربری */
  --lh-body: 1.75;  /* پاراگراف بلند */

  /* ─────────────────────────────────────────────────────────────
     مقیاس فاصله — پایه ۴ پیکسل
     -------------------------------------------------------------
     برای هر padding و margin و gap جدید از این‌ها استفاده کن.
     عددِ خام ننویس. اگر عددی لازم داشتی که اینجا نیست، یعنی
     احتمالاً به آن عدد نیاز نداری.
     ───────────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
}

/* ---------- 3. ریست ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}
body {
  font-family: "IRANYekan", Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: var(--fs-500);
  line-height: 1.85;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  overflow-x: hidden;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
table {
  border-collapse: collapse;
  width: 100%;
}
:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--magenta-100);
  color: var(--magenta-900);
}
/* اسکرول‌بار */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--line-2);
}
::-webkit-scrollbar-thumb {
  background: #d6cec5;
  border-radius: 99px;
  border: 3px solid var(--line-2);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
}

/* ---------- 4. تایپوگرافی ---------- */
h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 {
  font-size: var(--fs-fluid-1);
  line-height: 1.24;
  letter-spacing: -0.025em;
  font-weight: 800;
}
h2 {
  font-size: var(--fs-fluid-3);
  letter-spacing: -0.02em;
}
h3 {
  font-size: var(--fs-fluid-5);
}
h4 {
  font-size: var(--fs-500);
}
p {
  color: var(--ink-2);
}
strong,
b {
  font-weight: 700;
}
small {
  font-size: var(--fs-300);
}
.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  line-height: 1.95;
  font-weight: 400;
}
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* برچسب بالای عنوان بخش */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--magenta);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--magenta);
  border-radius: 2px;
}

/* ---------- 5. چیدمان ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-narrow {
  max-width: 780px;
}
.section {
  padding-block: clamp(56px, 8vw, 104px);
}
.section-tight {
  padding-block: clamp(40px, 5vw, 64px);
}
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 46px);
  flex-wrap: wrap;
}
.sec-head p {
  max-width: 54ch;
  margin-top: 10px;
}
.grid {
  display: grid;
  gap: 22px;
}
/* ⚠️ حتماً minmax(0, 1fr) و نه فقط 1fr.
   `1fr` در واقع `minmax(auto, 1fr)` است و `auto` یعنی ستون نمی‌تواند
   از عرضِ min-content محتوایش باریک‌تر شود. نتیجه‌اش این است که وقتی
   صفحه باریک می‌شود، ستون‌ها کوتاه نمی‌آیند و کل گرید از صفحه می‌زند
   بیرون — و چون سایت راست‌به‌چپ است، سرریز به سمت چپ می‌رود و کل
   صفحه پهلو می‌لغزد. این باگ یک بار اتفاق افتاد؛ minmax جلویش را
   می‌گیرد. */
.g-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.center {
  text-align: center;
}
.center .eyebrow {
  justify-content: center;
}
.center .sec-head {
  flex-direction: column;
  align-items: center;
}
.hr {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* ---------- 6. دکمه‌ها ---------- */
.btn {
  --bg: var(--magenta);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 26px;
  height: 50px;
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--fg);
  font-weight: 700;
  font-size: var(--fs-500);
  white-space: nowrap;
  transition: background var(--t), transform var(--t), box-shadow var(--t),
    border-color var(--t), color var(--t);
  border: 1.5px solid transparent;
  user-select: none;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn--primary {
  box-shadow: var(--sh-mag);
}
.btn--primary:hover {
  background: var(--magenta-900);
}
.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--white);
}
.btn--dark {
  --bg: var(--ink);
}
.btn--dark:hover {
  background: #000;
}
.btn--light {
  --bg: #fff;
  --fg: var(--ink);
  border-color: var(--line);
}
.btn--light:hover {
  border-color: var(--magenta);
  color: var(--magenta);
}
.btn--sm {
  height: 40px;
  padding-inline: 18px;
  font-size: var(--fs-400);
}
.btn--lg {
  height: 58px;
  padding-inline: 34px;
  font-size: var(--fs-500);
}
.btn--block {
  width: 100%;
}
.btn[disabled],
.btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.btn svg {
  width: 19px;
  height: 19px;
  flex: none;
}

/* لینک متنی با فلش */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: var(--fs-400);
  color: var(--magenta);
  transition: gap var(--t);
}
.tlink svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t);
}
.tlink:hover {
  gap: 11px;
}
.tlink:hover svg {
  transform: translateX(-3px);
}

/* ---------- 7. چیپ و برچسب ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding-inline: 15px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1.5px solid var(--line);
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--ink);
}
.chip.is-active {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding-inline: 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: -0.01em;
  background: var(--magenta-100);
  color: var(--magenta-900);
}
.tag--lime {
  background: var(--lime);
  color: var(--ink);
}
.tag--lime-soft {
  background: var(--lime-100);
  color: #4d6a20;
}
.tag--ink {
  background: var(--ink);
  color: #fff;
}
.tag--off {
  background: var(--danger);
  color: #fff;
}
.tag--muted {
  background: var(--line-2);
  color: var(--muted);
}

/* ---------- 8. هدر ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 248, 245, 0.86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.header.is-stuck {
  border-bottom-color: var(--line);
}
.topbar {
  background: var(--ink);
  color: #cfcbd6;
  font-size: var(--fs-200);
  letter-spacing: 0.01em;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  gap: 16px;
}
.topbar b {
  color: #fff;
}
.topbar-list {
  display: flex;
  gap: 20px;
  align-items: center;
}
.topbar a:hover {
  color: #fff;
}
.header__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
.brand__mark {
  width: 34px;
  height: 52px;
  color: var(--magenta);
}
.brand__mark svg {
  width: 100%;
  height: 100%;
}
.brand__txt {
  line-height: 1.15;
}
.brand__txt b {
  display: block;
  font-size: var(--fs-500);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand__txt span {
  display: block;
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--faint);
}
.nav {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: 12px;
}
.nav a {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--ink-2);
  transition: color var(--t), background var(--t);
}
.nav a:hover,
.nav a.is-active {
  color: var(--magenta);
  background: var(--magenta-050);
}
.nav a.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--magenta);
}
.header__spacer {
  flex: 1;
}
.header__acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  color: var(--ink-2);
  transition: background var(--t), color var(--t);
}
.iconbtn:hover {
  background: var(--white);
  color: var(--magenta);
}
.iconbtn svg {
  width: 21px;
  height: 21px;
}
.iconbtn__count {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--r-full);
  background: var(--magenta);
  color: #fff;
  font-size: var(--fs-100);
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper);
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}
.iconbtn__count.is-on {
  transform: scale(1);
}
.burger {
  display: none;
}

/* جستجوی هدر */
.search {
  position: relative;
  flex: 1;
  max-width: 340px;
}
.search input {
  width: 100%;
  height: 42px;
  padding-inline: 42px 16px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  background: var(--white);
  font-size: var(--fs-400);
  transition: border-color var(--t), box-shadow var(--t);
}
.search input::placeholder {
  color: var(--faint);
}
.search input:focus {
  outline: 0;
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px var(--magenta-050);
}
.search svg {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--faint);
  pointer-events: none;
}
.search__pop {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  padding: 8px;
  max-height: 380px;
  overflow-y: auto;
  display: none;
  z-index: 50;
}
.search__pop.is-open {
  display: block;
}
.search__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--r-sm);
  transition: background var(--t);
}
.search__row:hover {
  background: var(--paper);
}
.search__row img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--tile);
  border-radius: var(--r-sm);
  flex: none;
}
.search__row b {
  display: block;
  font-size: var(--fs-400);
  font-weight: 600;
}
.search__row small {
  color: var(--faint);
}
.search__empty {
  padding: 20px;
  text-align: center;
  color: var(--faint);
  font-size: var(--fs-400);
}

/* ---------- 9. کارت محصول ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.card:hover {
  border-color: #d8cfc6;
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
}
.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tile);
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 13%;
  transition: transform 0.5s var(--ease);
  mix-blend-mode: multiply;
}
.card:hover .card__media img {
  transform: scale(1.06);
}
.card__flags {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.card__fav {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  color: var(--muted);
  opacity: 0;
  transform: translateY(-6px);
  transition: all var(--t);
}
.card:hover .card__fav {
  opacity: 1;
  transform: none;
}
.card__fav:hover {
  color: var(--magenta);
}
.card__fav.is-on {
  opacity: 1;
  transform: none;
  color: var(--magenta);
}
.card__fav svg {
  width: 17px;
  height: 17px;
}
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 17px 17px;
  gap: 9px;
}
.card__brand {
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--faint);
}
.card__name {
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.1em;
  transition: color var(--t);
}
.card:hover .card__name {
  color: var(--magenta);
}

/* نوار ارزش غذایی — تمایز اصلی ما با رقبا */
.macros {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.macro {
  flex: 1;
  text-align: center;
  padding: 7px 2px 6px;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--line-2);
}
.macro b {
  display: block;
  font-size: var(--fs-400);
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.macro span {
  display: block;
  font-size: var(--fs-100);
  color: var(--faint);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.macro--pro b {
  color: var(--magenta);
}
.macro--sug b {
  color: var(--lime-700);
}
.card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}
.price {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.price s {
  font-size: var(--fs-300);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.price b {
  font-size: var(--fs-600);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.price b em {
  font-style: normal;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--muted);
  margin-inline-start: 3px;
}
.card__add {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--ink);
  color: #fff;
  transition: background var(--t), transform var(--t);
}
.card__add:hover {
  background: var(--magenta);
  transform: scale(1.08);
}
.card__add svg {
  width: 19px;
  height: 19px;
}
.card__add.is-added {
  background: var(--lime);
  color: var(--ink);
}
.card--out .card__media img {
  filter: grayscale(1);
  opacity: 0.55;
}

/* ---------- 10. اسکلت لودینگ ---------- */
.sk {
  background: linear-gradient(
    90deg,
    var(--line-2) 25%,
    #f8f5f1 37%,
    var(--line-2) 63%
  );
  background-size: 400% 100%;
  animation: sk 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes sk {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ---------- 11. فرم ---------- */
.field {
  display: block;
  margin-bottom: 16px;
}
.field > label,
.lbl {
  display: block;
  font-size: var(--fs-400);
  font-weight: 700;
  margin-bottom: 7px;
  color: var(--ink);
}
.inp,
.field input,
.field select,
.field textarea {
  width: 100%;
  height: 50px;
  padding-inline: 16px;
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  background: var(--white);
  font-size: var(--fs-400);
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea {
  height: auto;
  min-height: 108px;
  padding-block: 13px;
  resize: vertical;
  line-height: 1.8;
}
.inp:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px var(--magenta-050);
}
.field .hint {
  font-size: var(--fs-200);
  color: var(--faint);
  margin-top: 5px;
}
.field.has-err input,
.field.has-err select {
  border-color: var(--danger);
}
.field .err {
  display: none;
  font-size: var(--fs-200);
  color: var(--danger);
  margin-top: 5px;
}
.field.has-err .err {
  display: block;
}
.row-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

/* چک‌باکس و رادیو سفارشی */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 7px 0;
  font-size: var(--fs-400);
  color: var(--ink-2);
  transition: color var(--t);
  user-select: none;
}
.check:hover {
  color: var(--ink);
}
.check input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: all var(--t);
  cursor: pointer;
}
.check input::after {
  content: "";
  width: 10px;
  height: 6px;
  border: 2px solid #fff;
  border-top: 0;
  border-inline-end: 0;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.2s var(--ease);
  margin-top: -2px;
}
.check input:checked {
  background: var(--magenta);
  border-color: var(--magenta);
}
.check input:checked::after {
  transform: rotate(-45deg) scale(1);
}
.check__n {
  margin-inline-start: auto;
  font-size: var(--fs-200);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  cursor: pointer;
  transition: all var(--t);
}
.radio-card:hover {
  border-color: #d8cfc6;
}
.radio-card:has(input:checked) {
  border-color: var(--magenta);
  background: var(--magenta-050);
}
.radio-card input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  transition: all var(--t);
}
.radio-card input::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.2s var(--ease);
}
.radio-card input:checked {
  border-color: var(--magenta);
  background: var(--magenta);
}
.radio-card input:checked::after {
  transform: scale(1);
}
.radio-card__t {
  flex: 1;
}
.radio-card__t b {
  display: block;
  font-size: var(--fs-400);
}
.radio-card__t small {
  color: var(--muted);
  line-height: 1.7;
  display: block;
}
.radio-card__p {
  font-weight: 700;
  font-size: var(--fs-400);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- 12. جعبه‌ها ---------- */
.box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 28px);
}
.box--flat {
  background: var(--tile);
  border-color: transparent;
}
.note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--lime-100);
  font-size: var(--fs-400);
  line-height: 1.75;
  color: #3f5a17;
}
.note svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
}
.note--warn {
  background: var(--warn-bg);
  color: #7a4a00;
}
.note--info {
  background: var(--magenta-050);
  color: var(--magenta-900);
}

/* ---------- 13. فوتر ---------- */
.footer {
  background: var(--ink);
  color: #a8a3b1;
  padding-top: clamp(48px, 6vw, 76px);
  margin-top: clamp(56px, 8vw, 100px);
}
.footer h4 {
  color: #fff;
  font-size: var(--fs-500);
  margin-bottom: 18px;
}
.footer a {
  color: #a8a3b1;
  font-size: var(--fs-400);
  line-height: 2.35;
  transition: color var(--t);
}
.footer a:hover {
  color: #fff;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px 30px;
  padding-bottom: 44px;
}
.footer__about p {
  color: #8f8a99;
  font-size: var(--fs-400);
  line-height: 2;
  max-width: 34ch;
  margin-block: 16px 20px;
}
.footer .brand__txt b {
  color: #fff;
}
.footer .brand__mark {
  color: var(--lime);
}
.socials {
  display: flex;
  gap: 9px;
}
.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: 1px solid #322f3a;
  transition: all var(--t);
}
.socials a:hover {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}
.socials svg {
  width: 19px;
  height: 19px;
}
.footer__bar {
  border-top: 1px solid #2a2831;
  padding-block: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--fs-300);
}
/* نمادها و درگاه‌های پرداخت.
   کادر «pending» عمداً کم‌رنگ و بی‌لوگوست تا با نماد واقعی اشتباه
   نشود. حالت «live» پس‌زمینه‌ی سفید می‌گیرد چون لوگوهای رسمی
   (نماد اعتماد، زرین‌پال و…) روی زمینه‌ی روشن طراحی شده‌اند. */
.footer__trust {
  border-top: 1px solid #2a2831;
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
}
.trust-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  align-content: start;
}
.trust-group__label {
  font-size: var(--fs-200);
  font-weight: 700;
  color: #8b8695;
}
.trustmarks {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.trustmark,
.paymark {
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-size: var(--fs-100);
  text-align: center;
  line-height: 1.4;
  padding: var(--sp-2);
  transition: border-color var(--t), background var(--t);
}
.trustmark {
  width: 62px;
  height: 62px;
}
.paymark {
  width: 92px;
  height: 52px;
}
.mark--pending {
  background: #221f29;
  border: 1px dashed #3b3745;
  color: #6f6a79;
}
.mark--live {
  background: var(--white);
  border: 1px solid transparent;
  padding: var(--sp-2);
}
.mark--live img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
a.mark--live:hover {
  border-color: var(--lime);
}
.trust-note {
  font-size: var(--fs-200);
  color: #6f6a79;
  line-height: 1.7;
  max-width: 62ch;
  margin-block-start: calc(var(--sp-3) * -1);
  padding-block-end: var(--sp-4);
}

/* ---------- 14. توست ---------- */
.toasts {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 13px 14px;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-400);
  font-weight: 600;
  box-shadow: var(--sh-3);
  animation: toastIn 0.4s var(--ease);
  max-width: 340px;
}
.toast img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 7px;
  flex: none;
}
.toast svg {
  width: 20px;
  height: 20px;
  color: var(--lime);
  flex: none;
}
.toast.is-out {
  animation: toastOut 0.3s var(--ease) forwards;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

/* ---------- 15. کشوی سبد ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(22, 21, 26, 0.42);
  backdrop-filter: blur(3px);
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t);
}
.scrim.is-open {
  opacity: 1;
  visibility: visible;
}
/* کشو از لبه راست (چون سایت RTL است، inset-inline-start یعنی سمت راست).
   برای پنهان کردن باید به راست ببریمش، یعنی translateX مثبت. */
.drawer {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 100dvh;
  width: min(420px, 100vw);
  background: var(--paper);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.36s var(--ease);
  box-shadow: var(--sh-3);
  will-change: transform;
}
.drawer.is-open {
  transform: none;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer__head b {
  font-size: var(--fs-500);
  font-weight: 800;
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
}
.drawer__foot {
  flex: none;
  padding: 18px 22px 22px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

/* سطر آیتم سبد */
.citem {
  display: flex;
  gap: 13px;
  padding-block: 15px;
  border-bottom: 1px solid var(--line-2);
}
.citem:last-child {
  border-bottom: 0;
}
.citem__img {
  width: 78px;
  height: 78px;
  flex: none;
  border-radius: var(--r);
  background: var(--tile);
  object-fit: contain;
  padding: 8px;
  mix-blend-mode: multiply;
}
.citem__mid {
  flex: 1;
  min-width: 0;
}
.citem__mid b {
  display: block;
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: 1.5;
}
.citem__mid small {
  color: var(--faint);
  font-size: var(--fs-200);
}
.citem__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  background: #fff;
  height: 36px;
  overflow: hidden;
}
.qty button {
  width: 34px;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color var(--t), background var(--t);
}
.qty button:hover {
  color: var(--magenta);
  background: var(--magenta-050);
}
.qty span {
  min-width: 30px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-400);
  font-variant-numeric: tabular-nums;
}
.qty svg {
  width: 15px;
  height: 15px;
}
.qty--lg {
  height: 50px;
}
.qty--lg button {
  width: 46px;
}
.qty--lg span {
  min-width: 42px;
  font-size: var(--fs-500);
}
.linkbtn {
  font-size: var(--fs-300);
  color: var(--faint);
  transition: color var(--t);
}
.linkbtn:hover {
  color: var(--danger);
}

/* خط جمع */
.sumrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 9px;
  font-size: var(--fs-400);
  color: var(--ink-2);
}
.sumrow b {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.sumrow--total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 15px;
  font-size: var(--fs-500);
}
.sumrow--total b {
  font-size: var(--fs-700);
  font-weight: 800;
}
.sumrow--save b {
  color: var(--lime-700);
}

/* ---------- 16. حالت خالی ---------- */
.empty {
  text-align: center;
  padding: clamp(40px, 8vw, 80px) 20px;
}
.empty svg {
  width: 64px;
  height: 64px;
  color: var(--line);
  margin-inline: auto;
  margin-bottom: 18px;
}
.empty b {
  display: block;
  font-size: var(--fs-600);
  margin-bottom: 8px;
}
.empty p {
  color: var(--muted);
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: 22px;
}

/* ---------- 17. انیمیشن ورود ---------- */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.rv.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 18. ریسپانسیو ---------- */
@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .search {
    max-width: 240px;
  }
}
@media (max-width: 900px) {
  :root {
    --gut: 18px;
    --header-h: 66px;
  }
  .nav,
  .topbar,
  .search {
    display: none;
  }
  .burger {
    display: grid;
    place-items: center;
  }
  .g-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .g-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .row-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .toasts {
    inset-inline: 16px;
    bottom: 16px;
  }
  .toast {
    max-width: none;
  }
}
@media (max-width: 560px) {
  body {
    font-size: var(--fs-400);
  }
  /* کارت محصول روی موبایل عمداً دوتایی می‌ماند — تصمیم طراحی است. */
  .g-4,
  .g-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* ولی `.g-2` جای کارت محصول نیست: چیدمان دوستونیِ محتواست (کارت‌های
     تعهد، بخش‌های صفحه محصول، صفحه درباره ما). دو ستونِ متن روی صفحه‌ی
     ۳۷۵ پیکسلی خواندنی نیست، پس تک‌ستونه می‌شود. */
  .g-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid {
    gap: 12px;
  }
  .card__body {
    padding: 12px 12px 13px;
    gap: 7px;
  }
  .card__name {
    font-size: var(--fs-400);
  }
  .macro b {
    font-size: var(--fs-200);
  }
  .macro span {
    font-size: var(--fs-100);
  }
  .price b {
    font-size: var(--fs-500);
  }
  .card__add {
    width: 36px;
    height: 36px;
  }
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .btn {
    height: 48px;
  }
}

/* ---------- 19. کمکی ---------- */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.flex {
  display: flex;
}
.aic {
  align-items: center;
}
.jcb {
  justify-content: space-between;
}
.gap-6 {
  gap: 6px;
}
.gap-10 {
  gap: 10px;
}
.gap-16 {
  gap: 16px;
}
.wrapf {
  flex-wrap: wrap;
}
.mt-8 {
  margin-top: 8px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}
.mb-0 {
  margin-bottom: 0;
}
.muted {
  color: var(--muted);
}
.faint {
  color: var(--faint);
}
.mag {
  color: var(--magenta);
}
.hide {
  display: none !important;
}

/* ==========================================================================
   ۱۵. گوشی‌های خیلی باریک (≤۳۸۰ پیکسل)
   --------------------------------------------------------------------------
   آیفون SE نسل اول و اندرویدهای قدیمی. در این عرض سه چیز می‌شکست:

   ۱) نوار هدر: برند ۱۶۵ پیکسل بود با flex-shrink صفر، به‌علاوه سه فاصله‌ی
      ۱۸ پیکسلی — مجموعاً ۳۰۹ پیکسل در ظرفِ ۲۷۳ پیکسلی. مقصر اصلی
      letter-spacing درشتِ زیرنویس «HEALTH MARKET» بود.
   ۲) کارت محصول دوتایی می‌ماند و ردیف قیمت و دکمه در ۱۲۹ پیکسل جا نمی‌شد.
   ۳) نتیجه‌ی هر دو: اسکرول افقی و لغزیدن کل صفحه.
   ========================================================================== */
@media (max-width: 380px) {
  .header__bar {
    gap: var(--sp-3);
  }
  .brand {
    gap: var(--sp-2);
  }
  /* زیرنویس برند در این عرض حذف می‌شود — نشان و «D3» به‌تنهایی
     هویت را می‌رسانند و ۷۰ پیکسل آزاد می‌کنند. */
  .brand__txt span {
    display: none;
  }
  /* کارت محصول تک‌ستونه می‌شود؛ دوتایی در این عرض قیمت و دکمه را
     له می‌کند. */
  .g-4,
  .g-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}