@charset "UTF-8";
/* ==========================================================================
   D3 HEALTH MARKET — استایل مخصوص صفحات
   ========================================================================== */

/* ==========================================================================
   الف) صفحه اصلی
   ========================================================================== */

/* ---- هیرو ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 96px);
}
.hero::before {
  content: "";
  position: absolute;
  inset-inline-end: -14%;
  top: -28%;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 40%,
    var(--magenta-050) 0%,
    rgba(253, 245, 249, 0) 62%
  );
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding-inline: 8px 16px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.hero__badge i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--lime);
  color: var(--ink);
  font-style: normal;
}
.hero__badge svg {
  width: 13px;
  height: 13px;
}
.hero h1 {
  margin-bottom: 20px;
}
.hero h1 mark {
  background: none;
  color: var(--magenta);
  position: relative;
  white-space: nowrap;
}
.hero h1 mark::after {
  content: "";
  position: absolute;
  inset-inline: -2px;
  bottom: 0.1em;
  height: 0.28em;
  background: var(--lime);
  opacity: 0.42;
  border-radius: 3px;
  z-index: -1;
}
.hero .lead {
  max-width: 46ch;
  margin-bottom: 30px;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.hero__stats {
  display: flex;
  gap: clamp(20px, 3vw, 42px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero__stat b {
  display: block;
  font-size: var(--fs-fluid-4);
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hero__stat span {
  font-size: var(--fs-300);
  color: var(--muted);
}

/* چیدمان تصویری هیرو */
.hero__art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-inline-start: auto;
  width: 100%;
}
.hero__disc {
  position: absolute;
  inset: 6% 6% 6% 6%;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--lime-100), var(--magenta-050));
  border: 1px solid var(--line);
}
.hero__disc::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(191, 28, 121, 0.18);
  border-radius: 50%;
}
.hero__prod {
  position: absolute;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}
.hero__prod img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14%;
  mix-blend-mode: multiply;
}
.hero__prod:hover {
  transform: translateY(-8px) scale(1.03);
  z-index: 5;
}
.hero__prod--a {
  width: 46%;
  aspect-ratio: 1;
  inset-inline-end: 4%;
  top: 6%;
  animation: floaty 7s ease-in-out infinite;
}
.hero__prod--b {
  width: 40%;
  aspect-ratio: 1;
  inset-inline-start: 0;
  top: 30%;
  animation: floaty 8.5s ease-in-out infinite reverse;
}
.hero__prod--c {
  width: 38%;
  aspect-ratio: 1;
  inset-inline-end: 16%;
  bottom: 2%;
  animation: floaty 9.5s ease-in-out infinite 1s;
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-13px);
  }
}
/* حباب اطلاعات روی هیرو */
.hero__pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  font-size: var(--fs-300);
  font-weight: 700;
  white-space: nowrap;
  z-index: 6;
}
.hero__pill i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  font-style: normal;
  flex: none;
}
.hero__pill svg {
  width: 14px;
  height: 14px;
}
.hero__pill--1 {
  inset-inline-start: 4%;
  top: 13%;
}
.hero__pill--1 i {
  background: var(--lime);
  color: var(--ink);
}
.hero__pill--2 {
  inset-inline-end: 0;
  bottom: 22%;
}
.hero__pill--2 i {
  background: var(--magenta);
  color: #fff;
}

/* ---- نوار مزیت ---- */
.usp {
  background: var(--white);
  border-block: 1px solid var(--line);
}
.usp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.usp__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 24px 22px;
  border-inline-start: 1px solid var(--line);
}
.usp__item:first-child {
  border-inline-start: 0;
}
.usp__item i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r);
  background: var(--magenta-050);
  color: var(--magenta);
}
.usp__item svg {
  width: 21px;
  height: 21px;
}
.usp__item b {
  display: block;
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: 1.5;
}
.usp__item span {
  font-size: var(--fs-200);
  color: var(--faint);
  line-height: 1.6;
}

/* ---- خرید بر اساس هدف (تمایز کلیدی) ---- */
.goals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.goal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px 22px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: all var(--t);
}
.goal::after {
  content: "";
  position: absolute;
  inset-inline-start: -30%;
  bottom: -55%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--tint, var(--magenta-050));
  transition: transform 0.55s var(--ease);
}
.goal:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--sh-3);
}
.goal:hover::after {
  transform: scale(4.2);
}
.goal > * {
  position: relative;
  z-index: 1;
}
.goal i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r);
  background: var(--tint, var(--magenta-050));
  color: var(--tint-fg, var(--magenta));
  transition: background var(--t);
}
.goal:hover i {
  background: #fff;
}
.goal svg {
  width: 24px;
  height: 24px;
}
.goal b {
  font-size: var(--fs-500);
  font-weight: 700;
  display: block;
}
.goal span {
  font-size: var(--fs-300);
  color: var(--muted);
  line-height: 1.75;
}
.goal em {
  font-style: normal;
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--magenta);
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ---- دسته‌بندی‌ها ---- */
.cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.cat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  transition: all var(--t);
  overflow: hidden;
}
.cat:hover {
  border-color: var(--magenta);
  transform: translateX(-5px);
}
.cat__img {
  width: 82px;
  height: 82px;
  flex: none;
  border-radius: var(--r);
  background: var(--tile);
  object-fit: contain;
  padding: 9px;
  mix-blend-mode: multiply;
  transition: transform 0.5s var(--ease);
}
.cat:hover .cat__img {
  transform: scale(1.09) rotate(-3deg);
}
.cat__t b {
  display: block;
  font-size: var(--fs-500);
  font-weight: 700;
}
.cat__t span {
  font-size: var(--fs-300);
  color: var(--faint);
}
.cat__go {
  margin-inline-start: auto;
  color: var(--line);
  transition: color var(--t), transform var(--t);
}
.cat:hover .cat__go {
  color: var(--magenta);
  transform: translateX(-4px);
}
.cat__go svg {
  width: 20px;
  height: 20px;
}

/* ---- بنر دوتایی ---- */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
  padding: clamp(28px, 4vw, 46px);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
}
.promo--mag {
  background: var(--magenta);
  color: #fff;
}
.promo--mag h3,
.promo--mag .eyebrow {
  color: #fff;
}
.promo--mag .eyebrow::before {
  background: var(--lime);
}
.promo--mag p {
  color: rgba(255, 255, 255, 0.82);
}
.promo--lime {
  background: var(--lime);
  color: var(--ink);
}
.promo--lime .eyebrow {
  color: var(--magenta-900);
}
.promo--lime .eyebrow::before {
  background: var(--magenta-900);
}
.promo--lime p {
  color: #3c4f1c;
}
/* متن و عکس دو ناحیه‌ی جدا هستند و نباید به هم برسند.
   `--promo-text` سقف عرض متن است و `--promo-img` عرض عکس؛ مجموعشان
   عمداً زیر ۱۰۰٪ است تا در هیچ عرضی همپوشانی پیش نیاید. اگر یکی را
   بزرگ کردی، آن یکی را کوچک کن. */
.promo {
  --promo-text: 56%;
  --promo-img: 34%;
}
.promo h3 {
  font-size: var(--fs-fluid-4);
  margin-bottom: 12px;
  max-width: min(16ch, var(--promo-text));
}
.promo p {
  max-width: min(34ch, var(--promo-text));
  font-size: var(--fs-400);
  line-height: 1.9;
  margin-bottom: 24px;
}
.promo .btn {
  align-self: flex-start;
}
.promo__img {
  position: absolute;
  /* ⚠️ باگ راست‌به‌چپ که اینجا بود: قبلاً `inset-inline-start` بود.
     در فارسی inline-start یعنی «راست» — یعنی عکس دقیقاً همان‌جایی
     می‌نشست که متن شروع می‌شود و رویش می‌افتاد. عکس باید سمتِ مخالفِ
     متن باشد، پس inline-end. این را برنگردان. */
  inset-inline-end: 0;
  bottom: -6%;
  width: var(--promo-img);
  /* ⚠️ سقف ارتفاع لازم است. بدون آن، ارتفاع را نسبت ابعاد خودِ عکس
     تعیین می‌کند: عکس عریض (۸۰۰×۲۹۹) کوتاه می‌ماند ولی عکس مربعی
     (۶۰۰×۶۰۰) تا ۷۵٪ ارتفاع کارت بالا می‌آید و تیتر را می‌پوشاند.
     با max-height هر نسبتی مهار می‌شود. */
  max-height: 74%;
  object-fit: contain;
  object-position: bottom;
  z-index: -1;
  opacity: 0.94;
  transition: transform 0.6s var(--ease);
}
.promo:hover .promo__img {
  transform: scale(1.06) translateY(-6px);
}
.promo__ring {
  position: absolute;
  inset-inline-end: -14%;
  top: -34%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 44px solid rgba(255, 255, 255, 0.09);
  z-index: -1;
}

/* ---- نوار برندها ---- */
.brands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.brandchip {
  display: grid;
  place-items: center;
  height: 54px;
  padding-inline: 26px;
  border-radius: var(--r);
  background: var(--white);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: var(--fs-400);
  color: var(--muted);
  transition: all var(--t);
}
.brandchip:hover {
  color: var(--magenta);
  border-color: var(--magenta);
  transform: translateY(-3px);
}

/* ---- نظرات ---- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.quote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.stars {
  display: flex;
  gap: 2px;
  color: #f0a500;
}
.stars svg {
  width: 16px;
  height: 16px;
}
.quote p {
  font-size: var(--fs-400);
  line-height: 2;
  flex: 1;
}
.quote footer {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--magenta-100);
  color: var(--magenta-900);
  font-weight: 800;
  font-size: var(--fs-400);
  flex: none;
}
.quote footer b {
  display: block;
  font-size: var(--fs-400);
}
.quote footer span {
  font-size: var(--fs-200);
  color: var(--faint);
}

/* آیکون تعهدها */
.promise-i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r);
  background: var(--magenta-050);
  color: var(--magenta);
}
.promise-i svg {
  width: 22px;
  height: 22px;
}

/* ---- نوار خبرنامه ---- */
.news {
  position: relative;
  padding: clamp(34px, 5vw, 58px);
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
}
.news h3 {
  color: #fff;
  font-size: var(--fs-fluid-4);
  margin-bottom: 9px;
}
.news p {
  color: #9c97a5;
  font-size: var(--fs-400);
  max-width: 44ch;
}
.news form {
  display: flex;
  gap: 10px;
  min-width: min(420px, 100%);
}
.news input {
  flex: 1;
  /* ⚠️ لازم است. آیتم فلکس به‌طور پیش‌فرض `min-width: auto` دارد، یعنی
     نمی‌تواند از عرض ذاتی خودش باریک‌تر شود. بدون این خط، روی موبایل
     مجموع اینپوت و دکمه از فرم می‌زد بیرون و چون `.news` مقدار
     `overflow: hidden` دارد، لبه‌ی اینپوت بریده می‌شد. */
  min-width: 0;
  height: 52px;
  padding-inline: 18px;
  border-radius: var(--r-full);
  border: 1.5px solid #322f3a;
  background: #221f29;
  color: #fff;
  font-size: var(--fs-400);
}
.news input::placeholder {
  color: #6f6a79;
}
.news input:focus {
  outline: 0;
  border-color: var(--magenta);
}
.news::after {
  content: "";
  position: absolute;
  inset-inline-end: -6%;
  top: -80%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 28, 121, 0.32), transparent 66%);
}

/* ==========================================================================
   ب) فروشگاه
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-300);
  color: var(--faint);
  padding-block: 20px 0;
  flex-wrap: wrap;
}
.crumbs a:hover {
  color: var(--magenta);
}
.crumbs svg {
  width: 13px;
  height: 13px;
  opacity: 0.5;
}
.crumbs b {
  color: var(--ink-2);
  font-weight: 600;
}

.pagehead {
  padding-block: 22px 30px;
}
.pagehead h1 {
  font-size: var(--fs-fluid-2);
  margin-bottom: 10px;
}
.pagehead p {
  max-width: 60ch;
}

.shop {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.filters {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.filters__head b {
  font-size: var(--fs-500);
}
.fgroup {
  border-bottom: 1px solid var(--line-2);
  padding: 16px 18px;
}
.fgroup:last-child {
  border-bottom: 0;
}
.fgroup > b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-400);
  font-weight: 700;
  margin-bottom: 9px;
  cursor: pointer;
}
.fgroup > b svg {
  width: 15px;
  height: 15px;
  color: var(--faint);
  transition: transform var(--t);
}
.fgroup.is-closed > b svg {
  transform: rotate(-90deg);
}
.fgroup.is-closed .fgroup__body {
  display: none;
}
.fgroup__body {
  max-height: 224px;
  overflow-y: auto;
}
.range {
  padding-top: 6px;
}
.range input[type="range"] {
  width: 100%;
  height: 4px;
  appearance: none;
  background: var(--line);
  border-radius: 99px;
  outline: 0;
}
.range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--magenta);
  border: 3px solid #fff;
  box-shadow: var(--sh-2);
  cursor: pointer;
}
.range input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--magenta);
  border: 3px solid #fff;
  cursor: pointer;
}
.range__vals {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-200);
  color: var(--muted);
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.toolbar__count {
  font-size: var(--fs-400);
  color: var(--muted);
}
.toolbar__count b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.toolbar select {
  height: 42px;
  padding-inline: 15px 36px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  background: var(--white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f6b78' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat left 14px center;
  font-size: var(--fs-400);
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}
.toolbar__end {
  margin-inline-start: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}
.filterbtn {
  display: none;
}
.activef {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.activef .chip {
  background: var(--magenta-050);
  border-color: var(--magenta-100);
  color: var(--magenta-900);
}
.activef .chip svg {
  width: 13px;
  height: 13px;
}

/* ==========================================================================
   ج) صفحه محصول
   ========================================================================== */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  padding-block: 12px;
}
.gallery {
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.gallery__main {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  background: var(--tile);
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 9%;
  mix-blend-mode: multiply;
  transition: opacity 0.3s var(--ease);
}
.gallery__flags {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 2;
}
.gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.thumb {
  width: 78px;
  height: 78px;
  flex: none;
  border-radius: var(--r);
  background: var(--tile);
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color var(--t);
  cursor: pointer;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  mix-blend-mode: multiply;
}
.thumb.is-active {
  border-color: var(--magenta);
}

.pdp__brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: 10px;
}
.pdp h1 {
  font-size: var(--fs-fluid-3);
  line-height: 1.45;
  margin-bottom: 14px;
}
.pdp__rate {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-300);
  color: var(--muted);
  margin-bottom: 20px;
}
.pdp__rate .stars svg {
  width: 15px;
  height: 15px;
}
.pdp__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 18px;
  border-block: 1px solid var(--line);
  margin-bottom: 22px;
}
.pdp__price .now {
  font-size: var(--fs-900);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.pdp__price .now em {
  font-style: normal;
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--muted);
  margin-inline-start: 5px;
}
.pdp__price s {
  font-size: var(--fs-500);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.pdp__desc {
  font-size: var(--fs-500);
  line-height: 2.05;
  color: var(--ink-2);
  margin-bottom: 24px;
}

/* انتخاب طعم */
.variants {
  margin-bottom: 24px;
}
.variants__lbl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 11px;
}
.variants__lbl b {
  font-size: var(--fs-400);
}
.variants__lbl span {
  font-size: var(--fs-300);
  color: var(--magenta);
  font-weight: 700;
}
.vgrid {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.vitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 8px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: var(--fs-400);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
}
.vitem img {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  object-fit: contain;
  background: var(--tile);
  flex: none;
}
.vitem:hover {
  border-color: #d8cfc6;
}
.vitem.is-active {
  border-color: var(--magenta);
  background: var(--magenta-050);
  color: var(--magenta-900);
}
.vitem.is-out {
  opacity: 0.42;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── نشان منبع داده تغذیه‌ای ──
   به مشتری می‌گوید عددها از کجا آمده‌اند. جای «امتیاز ۴.۸ از ۵» را گرفته. */
.srcbadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.5;
  cursor: help;
}
.srcbadge svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.srcbadge--ok {
  background: var(--ok-bg);
  color: #1f5c39;
}
.srcbadge--warn {
  background: var(--warn-bg);
  color: #7a4a00;
}

/* یادداشت زیر گالری وقتی تصویر شماتیک است، نه عکس واقعی */
.imgnote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 15px;
  border-radius: var(--r);
  background: var(--tile);
  border: 1px dashed var(--line);
  font-size: var(--fs-300);
  line-height: 1.85;
  color: var(--muted);
}
.imgnote svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 4px;
  color: var(--faint);
}

/* وقتی هیچ عدد تغذیه‌ای روی بسته نیست */
.macro-none {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 15px 17px;
  border-radius: var(--r);
  background: var(--warn-bg);
  color: #7a4a00;
  font-size: var(--fs-400);
  line-height: 1.8;
}
.macro-none svg {
  width: 19px;
  height: 19px;
  flex: none;
}

/* مبنای اعداد روی کارت محصول (وقتی در هر ۱۰۰ گرم است) */
.macro-basis {
  font-size: var(--fs-100);
  color: var(--faint);
  text-align: center;
  margin-top: -4px;
}

/* سواچ رنگی — رنگ از خود بسته‌بندی نمونه‌برداری شده */
.vswatch {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r-full);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line), var(--sh-1);
  transition: transform var(--t);
}
.vitem:hover .vswatch {
  transform: scale(1.12);
}
.vitem.is-active .vswatch {
  box-shadow: 0 0 0 2px var(--magenta);
}
.vswatch--sm {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-inline-end: 8px;
  border-width: 1px;
}
/* گرم پروتئین روی خود دکمه طعم */
.vpro {
  font-style: normal;
  font-size: var(--fs-200);
  font-weight: 800;
  color: var(--magenta);
  background: var(--magenta-100);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  transition: all var(--t);
}
.vitem.is-active .vpro {
  background: var(--magenta);
  color: #fff;
}
/* یک جمله درباره طعم انتخاب‌شده */
.vnote {
  font-size: var(--fs-400);
  line-height: 1.85;
  color: var(--muted);
  margin-top: 12px;
  padding-inline-start: 13px;
  border-inline-start: 2.5px solid var(--lime);
  min-height: 1.85em;
}

/* تعویض نرم عکس اصلی هنگام تغییر طعم */
.gallery__main img {
  transition: opacity 0.13s linear, transform 0.5s var(--ease);
}

/* فلاش کوتاه روی اعداد وقتی طعم عوض می‌شود — تا کاربر متوجه تغییر بشود */
.macros--live {
  margin-bottom: 24px;
}
.macros--live.is-flash .macro {
  animation: macroFlash 0.6s var(--ease);
}
@keyframes macroFlash {
  0% {
    background: var(--magenta-100);
    border-color: var(--magenta-100);
    transform: translateY(-3px);
  }
  100% {
    background: var(--paper);
    border-color: var(--line-2);
    transform: none;
  }
}

/* جدول مقایسه طعم‌ها */
.cmp {
  font-size: var(--fs-400);
}
.cmp thead th {
  padding: 11px 14px;
  text-align: start;
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--faint);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cmp thead th:not(:first-child) {
  text-align: center;
}
.cmp td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.cmp td:first-child {
  text-align: start;
  font-weight: 600;
  white-space: nowrap;
}
.cmp tbody tr {
  cursor: pointer;
  transition: background var(--t);
}
.cmp tbody tr:hover {
  background: var(--magenta-050);
}
.cmp tbody tr.is-active {
  background: var(--magenta-050);
  box-shadow: inset 2.5px 0 0 var(--magenta);
}
.cmp tbody tr:last-child td {
  border-bottom: 0;
}

.buybar {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 20px;
}
.buybar .btn {
  flex: 1;
}
.iconsq {
  display: grid;
  place-items: center;
  width: 50px;
  flex: none;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--muted);
  transition: all var(--t);
}
.iconsq:hover {
  border-color: var(--magenta);
  color: var(--magenta);
}
.iconsq svg {
  width: 20px;
  height: 20px;
}

.perks {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--line-2);
}
.perk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  font-size: var(--fs-400);
}
.perk svg {
  width: 19px;
  height: 19px;
  color: var(--magenta);
  flex: none;
}
.perk b {
  font-weight: 700;
}
.perk span {
  color: var(--muted);
}

/* جدول ارزش غذایی */
.nutri {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.nutri__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: var(--ink);
  color: #fff;
}
.nutri__head b {
  font-size: var(--fs-500);
}
.nutri__head span {
  font-size: var(--fs-200);
  color: #a8a3b1;
}
.nutri table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-400);
}
.nutri table tr:last-child td {
  border-bottom: 0;
}
.nutri table td:last-child {
  text-align: end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nutri table tr.is-key td {
  background: var(--magenta-050);
  color: var(--magenta-900);
}
.nutri table tr.is-key td:last-child {
  color: var(--magenta);
}
.nutri__note {
  padding: 12px 20px;
  background: var(--paper);
  font-size: var(--fs-200);
  color: var(--faint);
  border-top: 1px solid var(--line-2);
}

/* تب‌ها */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
  overflow-x: auto;
}
.tabs button {
  position: relative;
  padding: 13px 20px;
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t);
}
.tabs button:hover {
  color: var(--ink);
}
.tabs button.is-active {
  color: var(--magenta);
}
.tabs button.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  bottom: -1px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--magenta);
}
.tabpane {
  display: none;
  animation: fadeUp 0.4s var(--ease);
}
.tabpane.is-active {
  display: block;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.prose p {
  margin-bottom: 15px;
  line-height: 2.15;
}
.prose ul {
  margin-bottom: 15px;
}
.prose li {
  position: relative;
  padding-inline-start: 24px;
  margin-bottom: 9px;
  line-height: 1.95;
  color: var(--ink-2);
}
.prose li::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 0.85em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
}
.prose h4 {
  margin-block: 22px 12px;
}

/* نظر کاربران */
.rev {
  display: flex;
  gap: 15px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line-2);
}
.rev:last-child {
  border-bottom: 0;
}
.rev__b b {
  font-size: var(--fs-400);
}
.rev__b .stars {
  margin-block: 4px 8px;
}
.rev__b p {
  font-size: var(--fs-400);
  line-height: 1.95;
}
.rev__date {
  margin-inline-start: auto;
  font-size: var(--fs-200);
  color: var(--faint);
  white-space: nowrap;
}
.verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-bg);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.verified svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   د) سبد و تسویه‌حساب
   ========================================================================== */
.cartpage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}
.side {
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.coupon {
  display: flex;
  gap: 9px;
  margin-block: 16px;
}
.coupon input {
  flex: 1;
  /* ⚠️ لازم است — همان دلیل `.news input`. آیتم فلکس به‌طور پیش‌فرض
     `min-width: auto` دارد و نمی‌تواند از عرض ذاتی خودش باریک‌تر شود،
     پس در گوشی باریک ردیف «کد تخفیف + اعمال» از جعبه می‌زد بیرون. */
  min-width: 0;
  height: 46px;
  padding-inline: 15px;
  border-radius: var(--r-full);
  border: 1.5px dashed var(--line);
  background: var(--paper);
  font-size: var(--fs-400);
}
.coupon input:focus {
  outline: 0;
  border-color: var(--magenta);
  border-style: solid;
}

.steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--faint);
}
.step i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  font-style: normal;
  font-size: var(--fs-300);
  background: #fff;
  transition: all var(--t);
}
.step.is-on {
  color: var(--ink);
}
.step.is-on i {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}
.step.is-done i {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}
.step.is-done {
  color: var(--ink-2);
}
.step__line {
  flex: 1;
  min-width: 20px;
  height: 1.5px;
  background: var(--line);
}

.paylogos {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.paylogo {
  display: grid;
  place-items: center;
  height: 38px;
  padding-inline: 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #fff;
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--muted);
}
/* درگاهی که هنوز راه‌اندازی نشده: خط‌چین و کم‌رنگ، تا با درگاه
   فعال اشتباه نشود. با رسیدن لوگو، خودکار به paylogo--live می‌رود. */
.paylogo--pending {
  border-style: dashed;
  color: var(--faint);
  background: var(--tile);
}
.paylogo--live {
  padding-inline: var(--sp-2);
}
.paylogo--live img {
  max-height: 22px;
  max-width: 76px;
  object-fit: contain;
}

/* موفقیت سفارش */
.done {
  text-align: center;
  padding-block: clamp(40px, 7vw, 80px);
  max-width: 560px;
  margin-inline: auto;
}
.done__tick {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  margin-inline: auto;
  margin-bottom: 26px;
  animation: pop 0.55s var(--ease);
}
.done__tick svg {
  width: 44px;
  height: 44px;
}
@keyframes pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.done__code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1.5px dashed var(--line);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-block: 20px 28px;
}

/* ==========================================================================
   ه) صفحات فرود تخصصی + درباره ما
   ========================================================================== */
.lp-hero {
  position: relative;
  padding-block: clamp(44px, 7vw, 90px);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 16px;
  isolation: isolate;
}
.lp-hero__in {
  max-width: 620px;
  padding-inline: clamp(24px, 5vw, 56px);
}
.lp-hero h1 {
  font-size: var(--fs-fluid-2);
  margin-bottom: 18px;
}
.lp-hero p {
  font-size: var(--fs-lead);
  line-height: 2;
  max-width: 48ch;
  margin-bottom: 28px;
}
.lp-hero__art {
  position: absolute;
  inset-inline-start: 2%;
  bottom: -10%;
  width: 34%;
  max-width: 400px;
  z-index: -1;
  opacity: 0.95;
}
.lp-hero--diabetic {
  background: linear-gradient(115deg, #f7e2ee 0%, #fdf5f9 60%, #faf8f5 100%);
}
.lp-hero--athlete {
  background: var(--ink);
  color: #fff;
}
.lp-hero--athlete h1 {
  color: #fff;
}
.lp-hero--athlete p {
  color: #b3aebc;
}
.lp-hero--vegan {
  background: linear-gradient(115deg, var(--lime-100) 0%, #f6faee 55%, #faf8f5 100%);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.fact {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.fact b {
  display: block;
  font-size: var(--fs-fluid-2);
  font-weight: 800;
  color: var(--magenta);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.fact span {
  font-size: var(--fs-400);
  color: var(--muted);
  line-height: 1.85;
}

.steps-num {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  counter-reset: s;
}
.stepnum {
  position: relative;
  padding: 30px 26px 26px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.stepnum::before {
  counter-increment: s;
  content: counter(s);
  position: absolute;
  top: -18px;
  inset-inline-start: 26px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--magenta);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-500);
  box-shadow: var(--sh-mag);
}
.stepnum b {
  display: block;
  font-size: var(--fs-500);
  margin-block: 10px 8px;
}
.stepnum p {
  font-size: var(--fs-400);
  line-height: 1.95;
}

.faq {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq details:last-child {
  border-bottom: 0;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 700;
  font-size: var(--fs-500);
  cursor: pointer;
  list-style: none;
  transition: color var(--t);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--magenta);
}
.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-inline-end: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(45deg);
  transition: transform var(--t);
  margin-top: -4px;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.faq details[open] summary {
  color: var(--magenta);
}
.faq p {
  padding: 0 22px 20px;
  font-size: var(--fs-400);
  line-height: 2.05;
  color: var(--muted);
}

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.about-art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--lime-100), var(--magenta-050));
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.about-art .brand__mark {
  width: 96px;
  height: 148px;
  color: var(--magenta);
  opacity: 0.22;
}

.map-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.map-card__info {
  padding: clamp(26px, 4vw, 44px);
}
.map-card__map {
  background: var(--tile)
    repeating-linear-gradient(
      45deg,
      transparent 0 18px,
      rgba(191, 28, 121, 0.045) 18px 19px
    );
  min-height: 300px;
  display: grid;
  place-items: center;
  position: relative;
}
.map-pin {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  box-shadow: var(--sh-mag);
  animation: ping 2.4s ease-out infinite;
}
.map-pin svg {
  width: 26px;
  height: 26px;
}
@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgba(191, 28, 121, 0.42);
  }
  70% {
    box-shadow: 0 0 0 26px rgba(191, 28, 121, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(191, 28, 121, 0);
  }
}
.infoline {
  display: flex;
  gap: 13px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line-2);
}
.infoline:last-child {
  border-bottom: 0;
}
.infoline svg {
  width: 19px;
  height: 19px;
  color: var(--magenta);
  flex: none;
  margin-top: 5px;
}
.infoline b {
  display: block;
  font-size: var(--fs-400);
}
.infoline span {
  font-size: var(--fs-400);
  color: var(--muted);
  line-height: 1.85;
}

/* ==========================================================================
   و) ریسپانسیو صفحات
   ========================================================================== */
@media (max-width: 1080px) {
  .goals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .usp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .usp__item:nth-child(3) {
    border-inline-start: 0;
  }
  .cartpage {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
}
@media (max-width: 920px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__art {
    order: -1;
    max-width: 400px;
    margin-inline: auto;
  }
  .hero .lead {
    max-width: none;
  }
  .pdp {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery {
    position: static;
  }
  .shop {
    grid-template-columns: minmax(0, 1fr);
  }
  .filters {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    height: 100dvh;
    width: min(330px, 88vw);
    z-index: 500;
    border-radius: 0;
    border: 0;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    overflow-y: auto;
    box-shadow: var(--sh-3);
  }
  .filters.is-open {
    transform: none;
  }
  .filterbtn {
    display: inline-flex;
  }
  .cartpage {
    grid-template-columns: minmax(0, 1fr);
  }
  .side {
    position: static;
  }
  .news {
    grid-template-columns: minmax(0, 1fr);
  }
  .news form {
    min-width: 0;
  }
  .duo {
    grid-template-columns: minmax(0, 1fr);
  }
  /* روی موبایل کارت باریک است: سهم متن را بیشتر و سهم عکس را کمتر
     می‌کنیم. چون هر دو از یک جفت متغیر می‌آیند، تنظیمشان همین دو خط است. */
  .promo {
    --promo-text: 62%;
    --promo-img: 28%;
  }
  .promo__img {
    max-height: 46%;
  }
}

/* گوشی‌های باریک (SE و اندرویدهای کوچک): متن سهم بیشتری می‌گیرد،
   وگرنه پاراگراف به عکس می‌رسد. */
@media (max-width: 400px) {
  .promo {
    --promo-text: 70%;
    --promo-img: 22%;
  }
  .promo__img {
    max-height: 40%;
  }
}

/* زیر ۳۴۰ پیکسل عکس تزئینی را کنار می‌گذاریم. دلیلش دکمه است: عرض
   دکمه را متنش تعیین می‌کند و سقف --promo-text شاملش نمی‌شود، پس در
   کارت خیلی باریک به عکس می‌رسد. در این عرض، خوانا بودن متن مهم‌تر
   از یک تصویر ۷۰ پیکسلی است. */
@media (max-width: 340px) {
  .promo__img {
    display: none;
  }
}

/* ادامه‌ی قوانین ≤۹۲۰ پیکسل */
@media (max-width: 920px) {
  .quotes {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps-num,
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .about-split,
  .map-card {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 620px) {
  .goals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .goal {
    padding: 18px 16px;
  }
  .cats {
    grid-template-columns: minmax(0, 1fr);
  }
  .usp__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .usp__item {
    border-inline-start: 0 !important;
    border-top: 1px solid var(--line);
    padding: 16px 4px;
  }
  .usp__item:first-child {
    border-top: 0;
  }
  .hero__stats {
    gap: 18px;
  }
  .hero__pill {
    display: none;
  }
  .buybar {
    flex-wrap: wrap;
  }
  .buybar .qty {
    width: 100%;
  }
  .brandchip {
    height: 46px;
    padding-inline: 18px;
    font-size: var(--fs-300);
  }
}

/* ---------- صفحه ۴۰۴ ----------
   هدفش این است که بن‌بست نباشد: مشتری گمشده باید در یک کلیک به
   جایی برسد که برایش مفید است، نه اینکه سایت را ببندد. */
.nf {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--sp-7);
}
.nf__code {
  display: block;
  font-size: var(--fs-fluid-1);
  font-weight: 800;
  color: var(--magenta-100);
  line-height: 1;
  letter-spacing: 0.04em;
}
.nf__title {
  margin-block: var(--sp-3) var(--sp-4);
  font-size: var(--fs-fluid-3);
}
.nf__lead {
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.95;
  margin-block-end: var(--sp-6);
}
.nf__cta {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-block-end: var(--sp-7);
}
.nf__goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-block-end: var(--sp-6);
}
.nf__goal {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  background: var(--tint);
  color: var(--fg);
  font-size: var(--fs-400);
  font-weight: 700;
  transition: transform var(--t);
}
.nf__goal:hover {
  transform: translateX(-4px);
}
.nf__goal i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.nf__goal svg {
  width: 20px;
  height: 20px;
}
.nf__help {
  font-size: var(--fs-400);
  color: var(--muted);
}
.nf__help a {
  color: var(--magenta);
  font-weight: 700;
}

/* توضیح مبنای عدد زیر اسلایدرهای تغذیه‌ای.
   ⚠️ چرا لازم است: `macros.protein` هر محصول مبنای خودش را دارد
   (`nutriBasis`): بعضی «در هر بار»، بعضی «در هر ۱۰۰ گرم»، بعضی «کل
   بسته». فیلتر این اعداد را مستقیم با هم مقایسه می‌کند، پس نتیجه‌اش
   بین محصولاتِ با مبنای متفاوت دقیق نیست. تا وقتی وزن هر سروینگ را
   نداریم و نمی‌توانیم نرمال‌سازی کنیم، دست‌کم به کاربر می‌گوییم. */
.range__basis {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-200);
  line-height: 1.7;
  color: var(--faint);
}