/* =========================================================
   ORS — فروشگاه: بخش محصولات، کارت، اشتراک و اورس پلاس
   ========================================================= */

/*
  رنگ‌های سکشن به‌صورت متغیر تعریف شده‌اند تا یک سکشن بتواند بدون
  دست زدن به کارت و دکمه، پوسته‌اش را عوض کند. پیش‌فرض تیره است؛
  .ors-shop نسخه‌ی روشن روی کاغذ را می‌سازد.
*/
.ors-section {
  --sec-title: #ffffff;
  --sec-lead: var(--ors-grey-text-light);

  --card-bg: #1a1a1a;
  --card-border: rgba(255, 255, 255, 0.09);
  --card-title: #ffffff;
  --card-muted: var(--ors-grey-text);

  --btn-fg: #ffffff;
  --btn-border: rgba(255, 255, 255, 0.18);
  --btn-ghost-hover-bg: #ffffff;
  --btn-ghost-hover-fg: var(--ors-charcoal);

  padding-block: clamp(64px, 8vw, 120px);
  background-color: var(--ors-charcoal);
}

.ors-section--alt {
  background-color: #101010;
}

.ors-wrap {
  width: min(1320px, calc(100% - 64px));
  margin-inline: auto;
}

.ors-section__head {
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 64px);
}

.ors-section__eyebrow {
  margin: 0;
  color: var(--ors-green);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 900;
}

.ors-section__title {
  margin: 8px 0 0;
  color: var(--sec-title);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 900;
  line-height: 1.3;
  text-wrap: balance;
}

.ors-section__lead {
  width: min(620px, 92%);
  margin: 18px auto 0;
  color: var(--sec-lead);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 2.1;
}


/* ---------------- grid + card ---------------- */

.ors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

/*
  چهار کارت در یک ردیف. با auto-fill شبکه پنج ستون می‌ساخت و کارت
  پنجم خالی می‌ماند؛ اینجا تعداد ستون‌ها صریح است تا ردیف کامل شود.
*/
.ors-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

/*
  چهار، سه، دو، یک. بدون پله‌ی سه‌ستونه، تبلت افقی از چهار مستقیم به
  دو می‌افتاد و کارت‌ها ۴۶۶ پیکسل پهن می‌شدند — شبکه خلوت و بی‌ریتم.
*/
@media (max-width: 1200px) {
  .ors-grid--four { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .ors-grid--four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .ors-grid--four { grid-template-columns: 1fr; }
}

.ors-card {
  display: flex;
  flex-direction: column;

  border: 1px solid var(--card-border);
  border-radius: 18px;
  overflow: hidden;

  background-color: var(--card-bg);

  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ors-card:hover {
  border-color: rgba(75, 152, 85, 0.5);
  transform: translateY(-3px);
}

.ors-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;

  /* کمی داخل کارت و با گوشه‌ی گرد — مثل تصویر مرجع. قاب تصویر
     از قاب کارت جدا می‌شود و کارت سبک‌تر به نظر می‌رسد. */
  margin: 10px 10px 0;
  border-radius: 14px;
  background: #f2efe9;
}

/*
  تصویر absolute است، وگرنه aspect-ratio فقط یک «اندازه‌ی ترجیحی» است و
  عکسِ بلندتر جعبه را بزرگ می‌کند. با عکس ۱۲۰۰×۱۶۰۰ جعبه ۳۰۳ در ۴۰۳
  می‌شد در حالی که بقیه ۳۰۳ در ۳۰۳ بودند — و ریتم شبکه به هم می‌ریخت.
*/
.ors-card__media img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  /* پیش‌فرض برای عکس محصول: پکشات روی زمینه‌ی روشن، نباید بریده شود */
  object-fit: contain;
  display: block;
}

/*
  کارت مطلب فرق دارد: عکس شاخص یک عکس صحنه است، نه پکشات. بریدنش
  اشکالی ندارد و نسبت ۳:۲ ادیتوریال، رفتار یکسانی به هر آپلودی
  می‌دهد — عمودی، افقی یا مربع.
*/
.ors-card--post .ors-card__media {
  aspect-ratio: 3 / 2;
  background: #1b1b1b;
}

.ors-card--post .ors-card__media img {
  object-fit: cover;
  object-position: center;
}

.ors-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, #2a2118, #3a2d20);
}

.ors-card__badge,
.ors-card__soldout {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 6px 13px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
}

.ors-card__badge svg { width: 14px; height: 14px; }

.ors-card__badge {
  background: var(--ors-green-action);
  color: #fff;
}

/* «پرفروش» فقط روی پرفروش‌ترین محصولِ همان قفسه می‌نشیند و فقط اگر
   فروش واقعی داشته باشد — طلایی، تا از برچسب تخفیف جدا باشد. */
.ors-card__badge--best {
  background: linear-gradient(135deg, #c9973f, #9d6f24);
  color: #fff;
}

.ors-card__soldout {
  inset-inline-start: auto;
  inset-inline-end: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.ors-card__soldout--low {
  background: rgba(201, 151, 63, 0.92);
}

.ors-card__body {
  /* بدنه باید بقیه‌ی ارتفاع کارت را بگیرد، وگرنه `margin-top:auto`
     روی فرم جایی برای رفتن ندارد: شبکه کارت‌ها را هم‌ارتفاع می‌کند
     ولی فضای اضافه بیرون از بدنه می‌ماند. اندازه‌گیری: کارتِ
     تخفیف‌دار ۲۴ پیکسل فضای خالی زیر دکمه داشت. */
  flex: 1 1 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 20px 22px;
  text-align: center;
}

/* چیپ نوع دانه. جای ستاره‌ها را گرفته و همان کار را می‌کند:
   ارتفاع ردیف اول کارت‌ها را یکسان نگه می‌دارد، ولی برخلاف
   ستاره‌ها چیزی می‌گوید که همیشه راست است. */
.ors-card__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin: 0;
  padding: 5px 13px;
  border-radius: 999px;

  background: var(--chip-bg, rgba(255, 255, 255, 0.07));
  color: var(--card-title);
  font-size: 12px;
  font-weight: 700;
}

.ors-card__type svg { width: 14px; height: 14px; color: var(--ors-green); }

/* خط جداکننده‌ی قیمت از معرفی. بدون آن، قیمت یکی از چند خط متن
   می‌شود؛ با آن، پایانِ «این چیست» و شروعِ «چند است». */
.ors-card__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 4px 0 2px;
  background: var(--card-border);
}

/* سه ستون مساوی، نه flex-wrap.
   با wrap، سه چیپ در عرض ۳۰۰ پیکسلیِ کارت به ۲+۱ می‌شکست و ردیف
   دوم یک چیپِ تنها می‌شد — در مرورگر دیده شد. گرید سه‌ستونه هر سه
   را در یک ردیف نگه می‌دارد و متن بلند داخل خودِ چیپ کوتاه می‌شود. */
.ors-card__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;

  width: 100%;
  margin: 4px 0 14px;
  padding: 0;
  list-style: none;
}

.ors-card__specs li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;

  padding: 6px 6px;
  border-radius: 9px;

  background: var(--chip-bg, rgba(255, 255, 255, 0.05));
  color: var(--card-muted);
  font-size: 10.5px;
  line-height: 1.5;
}

/* محصولی که درصد ترکیب ندارد دو چیپ می‌گیرد؛ آن‌وقت دو ستون. */
.ors-card__specs:has(li:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ors-card__specs svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* دکمه با نشانِ گرد در سرِ خط. نشان absolute است تا متن دکمه دقیقاً
   وسط بماند — با flex، متن به اندازه‌ی نیمِ نشان از مرکز می‌افتاد. */
/* فرم هم باید تمام‌عرض و چسبیده به پایین باشد، نه فقط دکمه:
   ‏`.ors-card__body` ستونِ align-items:center است، پس فرم به اندازه‌ی
   محتوایش جمع می‌شد و دکمه‌ی «۱۰۰٪» هم با آن جمع می‌شد. و
   ‏`margin-top:auto` روی دکمه، دکمه را داخل فرم پایین می‌برد، نه
   فرم را داخل کارت — پس کارتِ تخفیف‌دار دکمه‌اش پایین‌تر می‌افتاد. */
.ors-card__body form {
  width: 100%;
  margin-top: auto;
}

.ors-card__add {
  position: relative;
  width: 100%;
  margin-top: auto;
  padding-inline: 46px;
}

.ors-card__add-mark {
  position: absolute;
  inset-inline-start: 6px;
  top: 50%;
  transform: translateY(-50%);

  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.ors-card__add-mark svg { width: 16px; height: 16px; }

.ors-card__add--out .ors-card__add-mark {
  background: var(--chip-bg, rgba(255, 255, 255, 0.08));
}

/* کارت پرفروش قاب طلایی می‌گیرد، مثل تصویر مرجع. */
.ors-card.is-bestseller {
  border-color: rgba(201, 151, 63, 0.55);
  box-shadow: 0 0 0 1px rgba(201, 151, 63, 0.25);
}

.ors-card__stars {
  margin: 0;
  color: #e8b23a;
  font-size: 13px;
  letter-spacing: 2px;
}

.ors-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.ors-card__title a { color: var(--card-title); }
.ors-card__title a:hover { color: var(--ors-green); }

.ors-card__origin {
  margin: 0;
  color: var(--card-muted);
  font-size: 13px;
}

/* خط‌خورده بالای قیمت می‌نشیند، نه کنارش: کنار هم، در عرض کارت
   دو عدد بلندِ فارسی به هم می‌چسبند و خواندن قیمت واقعی سخت می‌شود. */
.ors-card__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
}

.ors-card__price del {
  color: var(--card-muted);
  font-size: 12px;
}

.ors-card__price strong {
  color: var(--ors-green);
  font-size: 18px;
  font-weight: 800;
}



/* ---------------- buttons ---------------- */

.ors-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 14px 28px;

  /*
    مقدار جایگزین، نه تزئین.

    این دو متغیر فقط داخل `.ors-section` تعریف شده‌اند. صفحه‌هایی که
    سکشن ندارند — تسویه، ورود، تأیید شماره، سبد — `var()` بی‌مقدار
    می‌گرفتند و چون `border` یک shorthand است، کل قاعده در زمان
    محاسبه باطل می‌شد و به «medium none» برمی‌گشت: دکمه‌ی ثانویه
    اصلاً قاب نداشت و مثل یک خط متن دیده می‌شد. دکمه‌ی «ارسال
    دوباره‌ی کد» در صفحه‌ی تأیید دقیقاً همین‌طور ناپیدا بود.
  */
  border: 2px solid var(--btn-border, rgba(255, 255, 255, 0.18));
  border-radius: 999px;

  color: var(--btn-fg, #ffffff);
  background: transparent;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ors-btn--primary {
  background-color: var(--ors-green-action);
  border-color: var(--ors-green-action);
  /* همیشه سفید، حتی در سکشن روشن: پس‌زمینه‌اش سبز است نه کاغذ */
  color: #ffffff;
}

.ors-btn--primary:hover:not(:disabled) {
  background-color: var(--ors-green-action-hover);
  border-color: var(--ors-green-action-hover);
}

.ors-btn--ghost:hover:not(:disabled) {
  border-color: var(--btn-ghost-hover-bg);
  background-color: var(--btn-ghost-hover-bg);
  color: var(--btn-ghost-hover-fg);
}

.ors-btn--block { width: 100%; }

.ors-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ---------------- subscription plans ---------------- */

.ors-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.ors-plan {
  display: flex;
  flex-direction: column;

  padding: clamp(26px, 3vw, 40px);

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;

  background: #1a1a1a;
}

.ors-plan--featured {
  border-color: var(--ors-green);
  background: linear-gradient(180deg, rgba(75, 152, 85, 0.12), #1a1a1a 60%);
}

.ors-plan__name {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.ors-plan__interval {
  margin: 6px 0 0;
  color: var(--ors-green);
  font-size: 14px;
  font-weight: 700;
}

.ors-plan__price {
  margin: 20px 0 4px;
  color: #fff;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 900;
}

.ors-plan__price-note {
  margin: 0;
  color: var(--ors-grey-text);
  font-size: 13px;
}

.ors-plan__features {
  margin: 22px 0 26px;
  display: grid;
  gap: 12px;
}

.ors-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ors-grey-text-light);
  font-size: 14px;
  line-height: 1.9;
}

.ors-plan__features li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--ors-green);
  font-weight: 900;
}

.ors-plan__cta { margin-top: auto; }


/* ---------------- ORS Plus ---------------- */

.ors-plus {
  position: relative;
  overflow: hidden;

  padding-block: clamp(64px, 8vw, 120px);

  background:
    linear-gradient(135deg, rgba(75, 152, 85, 0.22), rgba(21, 21, 21, 0.96)),
    var(--ors-charcoal);
}

.ors-plus__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.ors-plus__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 16px;
  margin-bottom: 16px;

  border: 1px solid var(--ors-green);
  border-radius: 999px;

  color: var(--ors-green);
  font-size: 13px;
  font-weight: 700;
}

.ors-plus__title {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 900;
  line-height: 1.25;
}

.ors-plus__lead {
  margin: 18px 0 0;
  max-width: 46ch;
  color: var(--ors-grey-text-light);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 2.1;
}

.ors-plus__perks {
  margin: 26px 0 32px;
  display: grid;
  gap: 12px;
}

.ors-plus__perks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
  font-size: 15px;
  line-height: 1.9;
}

.ors-plus__perks li::before {
  content: "✓";
  color: var(--ors-green);
  font-weight: 900;
}

.ors-plus__card {
  padding: clamp(28px, 3vw, 44px);

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;

  background: rgba(0, 0, 0, 0.4);
  text-align: center;
}

.ors-plus__price {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 900;
}

.ors-plus__duration {
  margin: 6px 0 24px;
  color: var(--ors-grey-text);
  font-size: 14px;
}

.ors-plus__state {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(75, 152, 85, 0.16);
  color: #fff;
  font-size: 14px;
}


@media (max-width: 900px) {
  .ors-wrap { width: calc(100% - 32px); }
  .ors-plus__inner { grid-template-columns: 1fr; }
}


/* ---------------- go to top ---------------- */

.ors-gotop {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 60;

  display: grid;
  place-items: center;
  gap: 2px;

  width: 62px;
  height: 62px;

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;

  background: rgba(21, 21, 21, 0.92);
  color: var(--ors-green);

  font-size: 10px;
  font-weight: 700;

  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ors-gotop svg { width: 18px; height: 18px; }

.ors-gotop:hover {
  border-color: var(--ors-green);
  background: var(--ors-green);
  color: #fff;
}


/* =========================
   HEADER ON INNER PAGES
=========================

   .coffee-hero__nav برای شناور بودن روی Hero طراحی شده و absolute است.
   صفحاتی که Hero ندارند (سبد، فروشگاه، مجله، حساب) باید هدر را در
   جریان عادی داشته باشند، وگرنه روی محتوا می‌افتد.
*/

body:not(.has-hero) .coffee-hero__nav {
  position: relative;
  left: auto;
  transform: none;

  margin-inline: auto;

  padding-top: 24px;
  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

body:not(.has-hero) {
  background-color: var(--ors-charcoal);
}

/* بخش بعد از هدر نباید فاصله‌ی اضافی Hero را داشته باشد */
body:not(.has-hero) main > .ors-section:first-child {
  padding-top: clamp(40px, 5vw, 72px);
}


/* =========================
   BREADCRUMBS
========================= */

.ors-crumbs {
  margin-bottom: clamp(20px, 2.4vw, 32px);
  font-size: 13px;
}

.ors-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ors-crumbs li + li::before {
  content: "‹";
  margin-inline-end: 8px;
  color: var(--ors-grey-text);
}

.ors-crumbs a { color: var(--ors-grey-text); }
.ors-crumbs a:hover { color: var(--ors-green); }
.ors-crumbs [aria-current] { color: #fff; }


/* =========================
   FRESHNESS
========================= */

.ors-freshness {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 12px 0 0;
  padding: 7px 15px;

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;

  color: var(--ors-grey-text-light);
  font-size: 13px;
  font-weight: 600;
}

.ors-freshness.is-fresh {
  border-color: var(--ors-green);
  background: rgba(75, 152, 85, 0.14);
  color: #8fd39c;
}

.ors-freshness::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.ors-card__fresh {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;

  padding: 4px 11px;
  border-radius: 999px;

  background: rgba(75, 152, 85, 0.92);
  color: #fff;

  font-size: 11px;
  font-weight: 700;
}


/* =========================
   STARS
========================= */

.ors-card__stars span { color: rgba(255, 255, 255, 0.22); }
.ors-card__stars span.is-on { color: #e8b23a; }

.ors-card__reviewlink {
  margin-inline-start: 8px;
  color: var(--ors-grey-text);
  font-size: 12px;
  letter-spacing: 0;
}

.ors-card__reviewlink:hover { color: var(--ors-green); }

.ors-card__reviewcount {
  margin-inline-start: 6px;
  color: var(--ors-grey-text);
  font-size: 12px;
  letter-spacing: 0;
}

/* محصولی که هنوز نظری ندارد: یک خط خنثی، نه پنج ستاره‌ی ساختگی.
   هم‌ارتفاع با حالت ستاره‌دار می‌ماند تا شبکه نلرزد. */
.ors-card__stars--empty {
  color: var(--ors-grey-text);
  font-size: 12px;
  letter-spacing: 0;
}

.ors-inline-link { color: var(--ors-green); }
.ors-inline-link:hover { text-decoration: underline; }


/* =========================
   REVIEWS
========================= */

.ors-reviews__score {
  margin-inline-start: 10px;
  color: var(--ors-grey-text);
  font-size: 13px;
  font-weight: 500;
}

.ors-review {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ors-review__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.ors-review__stars span { color: rgba(255, 255, 255, 0.22); font-size: 14px; }
.ors-review__stars span.is-on { color: #e8b23a; }

.ors-review__author {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.ors-review__verified {
  margin-inline-start: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(75, 152, 85, 0.2);
  color: #8fd39c;
  font-size: 11px;
  font-weight: 600;
}

.ors-review__date {
  margin-inline-start: auto;
  color: var(--ors-grey-text);
  font-size: 12px;
}

.ors-review__title {
  margin: 0 0 6px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.ors-review__body {
  margin: 0;
  color: var(--ors-grey-text-light);
  font-size: 14px;
  line-height: 2;
}

.ors-review__empty {
  padding: 22px 0;
  color: var(--ors-grey-text);
  font-size: 14px;
}

.ors-review__form { margin-top: 26px; }


/* =========================
   FILTERS
========================= */

.ors-shop {
  display: grid;
  grid-template-columns: 268px 1fr;
  align-items: start;
  gap: clamp(20px, 2.6vw, 40px);
}

.ors-filters {
  position: sticky;
  top: 20px;

  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: #1a1a1a;
}

.ors-filters__group { margin-bottom: 22px; }

.ors-filters__legend {
  margin: 0 0 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.ors-filters label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  color: var(--ors-grey-text-light);
  font-size: 14px;
  cursor: pointer;
}

.ors-filters label:hover { color: #fff; }

.ors-filters__price {
  display: flex;
  gap: 8px;
}

.ors-filters__price input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: #131313;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
}

.ors-searchbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

/*
  min-width: 0 اینجا حیاتی است، نه آرایشی.

  آیتم فلکس به‌طور پیش‌فرض min-width: auto دارد، یعنی زیر عرض ذاتی
  محتوایش کوچک نمی‌شود. input با placeholder بلند عرض ذاتی بزرگی
  داشت، جا نمی‌داد، و دکمه‌ی جست‌وجو را از صفحه بیرون می‌راند: روی
  ۳۲۰ پیکسل دکمه در موقعیت -۱۳۳ تا -۱۲ بود، یعنی کاملاً نامرئی و
  غیرقابل استفاده.
*/
.ors-searchbar input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: #131313;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
}

.ors-searchbar input:focus {
  outline: none;
  border-color: var(--ors-green);
}

.ors-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.ors-toolbar__count {
  color: var(--ors-grey-text);
  font-size: 14px;
}

.ors-filters__toggle { display: none; }


@media (max-width: 900px) {
  .ors-shop { grid-template-columns: 1fr; }

  .ors-filters {
    position: static;
    display: none;
  }

  .ors-filters.is-open { display: block; }

  .ors-filters__toggle {
    display: inline-flex;
    margin-bottom: 16px;
  }
}


/* =========================
   QUIZ
========================= */

.ors-quiz__step {
  padding: clamp(22px, 2.6vw, 34px);
  margin-bottom: 18px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: #1a1a1a;
}

.ors-quiz__number {
  display: inline-grid;
  place-items: center;

  width: 30px;
  height: 30px;
  margin-inline-end: 10px;

  border-radius: 50%;
  background: var(--ors-green-action);
  color: #fff;

  font-size: 14px;
  font-weight: 700;
}

.ors-quiz__question {
  display: flex;
  align-items: center;
  margin: 0 0 6px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.ors-quiz__help {
  margin: 0 0 18px;
  padding-inline-start: 40px;
  color: var(--ors-grey-text);
  font-size: 13px;
}

.ors-quiz__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* گزینه‌های کوییز انتخاب می‌شدند، ولی هیچ‌جوره دیده نمی‌شد.

   رادیو `sr-only` است و تنها استایلِ «انتخاب‌شده»، کلاس `is-selected`
   بود که سمت سرور رندر می‌شود — یعنی فقط بعد از ارسال فرم. اندازه‌گیری
   در مرورگر: بعد از کلیک، پس‌زمینه و حاشیه‌ی گزینه دقیقاً همان
   گزینه‌های انتخاب‌نشده بود.

   روی دسکتاپ هم `cursor: default` بود؛ یعنی حتی به نظر هم قابل کلیک
   نمی‌آمد. روی موبایل تنها بازخورد، hover چسبیده‌ی لمس بود — اتفاقی،
   نه طراحی.

   سه چیز درست شد: نشانگر دایره‌ای واقعی (همان چیزی که کاربر از یک
   گروه رادیو انتظار دارد)، حالت انتخاب‌شده با `:has()` بدون نیاز به
   رفت‌وبرگشت سرور، و حلقه‌ی فوکوس — که چون خود رادیو نامرئی است،
   بدون آن کاربر کیبورد هیچ نمی‌بیند. */

.ors-quiz__option {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 12px;
  padding: 15px 18px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;

  color: #fff;
  text-align: start;
  cursor: pointer;

  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* نشانگر دایره‌ای — با ::before حلقه و با ::after مغزِ پر */
.ors-quiz__option::before {
  content: "";
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transition: border-color 0.2s ease;
}

.ors-quiz__option::after {
  content: "";
  position: absolute;
  inset-inline-start: 23px;
  top: 21px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ors-green);

  transform: scale(0);
  transition: transform 0.18s ease;
}

.ors-quiz__option:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.04);
}

/* حالت انتخاب‌شده باید از hover پررنگ‌تر باشد، وگرنه روی دسکتاپ
   این دو با هم اشتباه می‌شوند. */
.ors-quiz__option:has(input:checked),
.ors-quiz__option.is-selected {
  border-color: var(--ors-green);
  background: rgba(75, 152, 85, 0.18);
}

.ors-quiz__option:has(input:checked)::before,
.ors-quiz__option.is-selected::before {
  border-color: var(--ors-green);
}

.ors-quiz__option:has(input:checked)::after,
.ors-quiz__option.is-selected::after {
  transform: scale(1);
}

/* رادیو نامرئی است، پس حلقه‌ی فوکوس باید روی خود برچسب بنشیند. */
.ors-quiz__option:focus-within {
  outline: 2px solid var(--ors-green);
  outline-offset: 2px;
}

.ors-quiz__option strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.ors-quiz__option span {
  grid-column: 2;
  color: var(--ors-grey-text);
  font-size: 12px;
}


/* =========================
   TOUCH TARGETS
=========================

   حداقل ۴۴×۴۴ پیکسل برای هر چیزی که لمس می‌شود. آیکن‌ها از نظر
   بصری کوچک می‌مانند؛ ناحیه‌ی لمس با padding بزرگ می‌شود، نه با
   بزرگ کردن خود آیکن.
*/

.coffee-hero__icon-btn,
.coffee-hero__burger {
  width: 44px;
  height: 44px;
}

.coffee-hero__social-list a {
  width: 44px;
  height: 44px;
}

/* لینک‌های منو ارتفاع لمسی کامل بگیرند بدون اینکه منو بلند شود */
.coffee-hero__menu a {
  padding-block: 12px;
}

/* لینک‌های ثانویه هم ناحیه‌ی لمسی قابل قبول بگیرند */
.ors-crumbs a,
.ors-crumbs span {
  display: inline-block;
  padding-block: 10px;
}

.ors-card__title a,
.ors-footer__column a {
  display: inline-block;
  padding-block: 6px;
}

/* دکمه‌های داخل ردیف سبد */
.ors-linkbtn {
  padding: 10px 4px;
}

/* چک‌باکس‌های فیلتر پیش‌فرض ۱۳×۱۳ هستند که برای لمس کوچک است.
   برچسب هم کلیک‌پذیر است، ولی خود کنترل باید قابل هدف‌گیری باشد. */
.ors-filters input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--ors-green-action);
  flex: 0 0 auto;
}

.ors-filters label {
  min-height: 44px;
  margin-bottom: 2px;
}


/* =========================
   SEO TEXT + FAQ
=========================

   بلوک متن پایین صفحه و پرسش‌های متداول. الگوی برنده‌ی صفحه‌های
   دسته‌بندی در نتایج فارسی همین دو تاست، پس باید خوانا باشند نه
   دفن‌شده — ولی از شبکه‌ی محصول هم جلو نزنند.
*/

.ors-seotext {
  max-width: 74ch;
  margin: clamp(48px, 6vw, 88px) auto 0;

  color: var(--ors-grey-text-light);
  font-size: 15px;
  line-height: 2.2;
}

.ors-seotext h2,
.ors-seotext h3 {
  margin: 28px 0 12px;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}

.ors-seotext p { margin: 0 0 16px; }

.ors-faq {
  max-width: 74ch;
  margin: clamp(40px, 5vw, 72px) auto 0;
}

.ors-faq__title {
  text-align: start;
  font-size: clamp(22px, 2.2vw, 30px);
  margin-bottom: 20px;
}

.ors-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ors-faq__q {
  padding: 18px 0;

  color: #fff;
  font-size: 16px;
  font-weight: 700;

  cursor: pointer;
  list-style: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ors-faq__q::-webkit-details-marker { display: none; }

.ors-faq__q::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--ors-green);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.ors-faq__item[open] .ors-faq__q::after { content: "−"; }

.ors-faq__q:hover { color: var(--ors-green); }

.ors-faq__a {
  padding: 0 0 20px;
  color: var(--ors-grey-text-light);
  font-size: 15px;
  line-height: 2.1;
}

.ors-faq__a p { margin: 0 0 12px; }


/* ---------------- کارت مطلب ---------------- */

/*
  کارت مطلب از کارت محصول جدا شد.

  محصول بدون عکس معنا ندارد، پس کارتش همیشه یک قاب تصویر دارد.
  مطلب بدون عکس کاملاً معنا دارد — و چون هیچ‌کدام از مطلب‌های فعلی
  عکس ندارند، نتیجه‌ی قرض‌گرفتن کارت محصول ده مستطیل قهوه‌ای یکسان
  بود. روی گوشی هر کارت ۲۳۰ پیکسل از صفحه را به آن خالی می‌داد و
  در هر صفحه فقط یک مطلب دیده می‌شد.
*/
.ors-postcard {
  display: flex;
  flex-direction: column;

  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.09));
  border-radius: 18px;
  background: var(--card-bg, #1a1a1a);
  overflow: hidden;

  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ors-postcard:hover {
  border-color: var(--ors-green);
  transform: translateY(-2px);
}

.ors-postcard__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: #1b1b1b;
}

/* position: absolute عمدی است، نه تزئین. «aspect-ratio» فقط اندازه‌ی
   ترجیحی است؛ بدون این، یک عکس ۱۲۰۰×۱۶۰۰ جعبه را بلندتر می‌کند و
   ریتم شبکه به هم می‌ریزد. همان درسی که کارت محصول قبلاً داد. */
.ors-postcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ors-postcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

/* کارتِ بی‌عکس کمی بلندتر نفس می‌کشد، چون قاب تصویر ندارد */
.ors-postcard--plain .ors-postcard__body { padding-top: 22px; }

.ors-postcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;

  margin: 0;
  color: var(--card-muted, var(--ors-grey-text));
  font-size: 12px;
}

@media (min-width: 500px) {
  .ors-postcard__meta span + span::before {
    content: "—";
    margin-inline-end: 12px;
    opacity: 0.5;
  }
}

.ors-postcard__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}

.ors-postcard__title a {
  color: var(--card-title, #fff);
  text-decoration: none;
}

.ors-postcard__title a:hover { color: var(--ors-green); }

/*
  خلاصه دیگر هم‌وزنِ خط تاریخ نیست.

  هر دو `ors-card__origin` بودند — یعنی یک اندازه و یک رنگ. چشم
  نمی‌فهمید کدام متاداده است و کدام محتوا.
*/
.ors-postcard__excerpt {
  margin: 0;
  color: var(--card-muted, var(--ors-grey-text));
  font-size: 13.5px;
  line-height: 1.9;
}

/* =========================
   ARTICLE / GUIDE
========================= */

/* ---------------- سر مقاله ---------------- */

.ors-post__wrap { max-width: 780px; }

.ors-post__head {
  /*
    راست‌چین، نه وسط‌چین.

    سر مقاله تا دیروز کلاس سکشن بازاریابی داشت و وسط می‌نشست، در
    حالی که متن زیرش راست‌چین بود — سه جهت‌بندی در یک صفحه. تیتر
    مقاله با متن خودش هم‌جهت است.
  */
  text-align: start;
  margin: 8px 0 26px;
}

.ors-post__kicker {
  margin: 0 0 10px;
  color: var(--ors-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ors-post__title {
  /*
    تیتر کوچک‌تر شد.

    نسخه‌ی قبلی `ors-section__title` بود: اندازه‌ی تیتر سکشن
    صفحه‌ی اصلی، که آنجا تنها عنصر صفحه است. روی مقاله، همان اندازه
    دو خط می‌شد و به‌تنهایی نیمی از صفحه‌ی اول را می‌خورد — اولین
    جمله‌ی متن در پیکسل ۵۵۱ از ۱۰۰۰ شروع می‌شد.
  */
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(25px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.35;
  text-wrap: balance;
}

.ors-post__meta {
  display: flex;
  flex-wrap: wrap;
  /* فاصله‌ی افقی خودش جداکننده است وقتی خط می‌شکند */
  gap: 4px 18px;

  margin: 0;
  color: var(--ors-grey-text);
  font-size: 13px;
}

/*
  جداکننده فقط روی عرضی که خط نمی‌شکند.

  هر قلم داخل span خودش است، پس «۳ دقیقه مطالعه» دیگر وسط خودش
  نمی‌شکند. ولی اگر جداکننده همیشه بیاید، روی گوشی که خط می‌شکند
  یک «—» سرِ خط دوم آویزان می‌ماند. زیر ۵۰۰ پیکسل فقط فاصله می‌ماند.
*/
@media (min-width: 500px) {
  .ors-post__meta span + span::before {
    content: "—";
    margin-inline-end: 18px;
    color: rgba(255, 255, 255, 0.28);
  }
}

.ors-post__cover {
  width: 100%;
  border-radius: 18px;
  margin-bottom: 30px;
}

/* ---------------- فهرست مطالب ---------------- */

.ors-toc {
  margin: 0 0 32px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.ors-toc__title {
  margin: 0 0 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.ors-toc__list {
  display: grid;
  gap: 8px 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  margin: 0;
  padding: 0;
  /* شماره‌ها را خودمان می‌گذاریم تا با ارقام فارسی سازگار بمانند */
  list-style: none;
  counter-reset: toc;
}

.ors-toc__list li { counter-increment: toc; }

.ors-toc__list a {
  display: flex;
  gap: 8px;
  color: var(--ors-grey-text-light);
  font-size: 14px;
  line-height: 1.7;
  text-decoration: none;
}

.ors-toc__list a::before {
  /* «persian» وگرنه شماره‌ها لاتین می‌شوند و در صفحه‌ای که همه‌ی
     اعدادش فارسی است، تنها جای لاتین همین فهرست می‌ماند. */
  content: counter(toc, persian) ".";
  flex: 0 0 auto;
  color: var(--ors-green);
  font-weight: 700;
}

.ors-toc__list a:hover { color: #fff; }

/* لنگر زیر هدر چسبان نرود */
.ors-article h2[id] { scroll-margin-top: 96px; }

/* ---------------- جدول مقایسه ---------------- */

/*
  راهنمای خرید که کارش مقایسه‌ی چند گزینه است، با فهرست بولت خوانده
  نمی‌شود: خواننده باید دو بولت را در ذهنش کنار هم بگذارد. جدول
  همان کار را تمام‌شده تحویل می‌دهد.
*/
.ors-article__tablewrap {
  margin: 0 0 24px;
  /* جدول پنج‌ستونی روی گوشی جا نمی‌شود؛ بدون این، کل صفحه افقی
     کشیده می‌شد به‌جای خودِ جدول */
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;

  /*
    سایه‌ی لبه، فقط وقتی چیزی بیرون قاب مانده.

    بدون آن، خواننده‌ی موبایل نمی‌فهمد جدول دو ستون دیگر هم دارد —
    اسکرول افقی در iOS نوار هم نشان نمی‌دهد. دو لایه‌ی اول با
    «local» همراه محتوا حرکت می‌کنند و سایه را می‌پوشانند؛ دو لایه‌ی
    دوم با «scroll» سر جایشان می‌مانند. یعنی سایه دقیقاً همان‌جایی
    دیده می‌شود که هنوز محتوای ندیده هست.
  */
  background:
    linear-gradient(to right, #151515 30%, rgba(21, 21, 21, 0)) left center,
    linear-gradient(to left, #151515 30%, rgba(21, 21, 21, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.ors-article__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
  white-space: nowrap;
}

.ors-article__table th,
.ors-article__table td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ors-article__table th {
  color: #fff;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.ors-article__table td { color: var(--ors-grey-text-light); }

.ors-article__table tbody tr:last-child th,
.ors-article__table tbody tr:last-child td { border-bottom: 0; }

/* ستون اول شناسه‌ی ردیف است و باید بخواند */
.ors-article__table td:first-child { color: #fff; }

/* ---------------- ادامه‌ی همین موضوع ---------------- */

.ors-post__related { margin-top: clamp(40px, 5vw, 60px); }

.ors-post__related-title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.ors-post__related-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ors-post__related-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;

  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;

  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ors-post__related-list a:hover {
  border-color: var(--ors-green);
  background: rgba(75, 152, 85, 0.08);
}

.ors-post__related-time {
  flex: 0 0 auto;
  color: var(--ors-grey-text);
  font-size: 12.5px;
  font-weight: 500;
}


.ors-article__lead {
  margin: 0 0 28px;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--ors-green);

  color: #fff;
  font-size: 17px;
  line-height: 2;
}

.ors-article {
  color: var(--ors-grey-text-light);
  font-size: 16px;
  line-height: 2.2;
}

.ors-article h2 {
  margin: 40px 0 14px;
  color: #fff;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.5;
}

.ors-article h3 {
  margin: 30px 0 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.ors-article p { margin: 0 0 18px; }

.ors-article ul {
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
}

.ors-article li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ors-article li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 14px;
  border-radius: 50%;
  background: var(--ors-green);
}

/* بلوک «حالا کدام را بخرم؟» — لینک ساختاری به صفحه‌ی درآمدزا */
.ors-nextstep {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 34px);

  border: 1px solid var(--ors-green);
  border-radius: 20px;
  background: rgba(75, 152, 85, 0.1);
}

.ors-nextstep__title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
}

.ors-nextstep__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/*
  قرص، دو خط شد.

  «حالا کدام را بخرم؟» با چهار قرصِ یکسان جواب نمی‌گیرد: خواننده
  هیچ دلیلی ندارد که یکی را به آن یکی ترجیح بدهد. تعداد و قیمتِ
  شروع همان دلیل را می‌دهد، در همان یک نگاه.
*/
.ors-nextstep__link {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;

  padding: 12px 20px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;

  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;

  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ors-nextstep__name { font-weight: 700; }

.ors-nextstep__note {
  color: var(--ors-grey-text-light);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.ors-nextstep__link:hover {
  background: var(--ors-green-action);
  border-color: var(--ors-green-action);
}


/* =========================================================
   سکشن فروشگاه صفحه‌ی اصلی — روی بافت کاغذ

   پس‌زمینه روشن است، پس متغیرهای سکشن بازنویسی می‌شوند و کارت و
   دکمه بدون هیچ تغییر دیگری پوسته‌ی روشن می‌گیرند.
   ========================================================= */

.ors-store {
  --sec-title: var(--ors-charcoal);
  --sec-lead: #5b5b5b;

  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.08);
  --card-title: var(--ors-charcoal);
  --card-muted: #6f6f6f;
  /* چیپ روشن روی کارت سفید؛ نسخه‌ی تیره‌ی پیش‌فرض اینجا ناپدید می‌شد */
  --chip-bg: #f1efe9;

  --btn-fg: var(--ors-charcoal);
  --btn-border: rgba(0, 0, 0, 0.16);
  --btn-ghost-hover-bg: var(--ors-charcoal);
  --btn-ghost-hover-fg: #ffffff;

  position: relative;

  background-color: #f2efe9;
  /* ۲۲۲ → ۱۶۳ کیلوبایت. */
  background-image: url("../assets/paper_bg.3c14a039201e.jpg");
  background-image: image-set(url("../assets/paper_bg.87e10424a609.webp") type("image/webp"),
                              url("../assets/paper_bg.3c14a039201e.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}


/* ---------------- محصول شاخص ---------------- */

.ors-store__hero {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);

  margin-bottom: clamp(48px, 6vw, 88px);
}

/*
  نقش‌مایه‌ها پشت متن می‌نشینند، نه کنارش: در RTL سمت چپِ بلوک متن
  فضای خالی است و همان‌جا جای‌شان است. pointer-events خاموش می‌ماند
  تا جلوی کلیک روی دکمه‌ها را نگیرند.
*/
.ors-store__doodles {
  position: absolute;
  z-index: 0;
  inset-inline-end: -2%;
  top: 50%;
  transform: translateY(-50%);

  width: min(420px, 34%);
  aspect-ratio: 515 / 620;

  background-image: url("../assets/product-bg-010.d69642908462.png");
  background-size: contain;
  background-repeat: no-repeat;

  pointer-events: none;
}

.ors-store__hero-media,
.ors-store__hero-body {
  position: relative;
  z-index: 1;
}

.ors-store__hero-media {
  display: block;
  aspect-ratio: 1 / 1;
}

.ors-store__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ors-store__hero-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  background: linear-gradient(150deg, #e6e0d4, #d8cfbe);
}

/* ستاره‌های محصول شاخص از کارت‌ها بزرگ‌ترند: اینجا نقش «چرا این
   یکی» را دارند، نه یک جزئیات کنار قیمت. */
.ors-store__hero-body .ors-card__stars {
  font-size: 17px;
  letter-spacing: 3px;
}

.ors-store__hero-title {
  margin: 6px 0 0;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.4;
}

.ors-store__hero-title a { color: var(--ors-charcoal); }
.ors-store__hero-title a:hover { color: var(--ors-green-action); }

.ors-store__hero-text {
  margin: 14px 0 0;
  color: #5b5b5b;
  font-size: 15px;
  line-height: 2.1;
}

.ors-store__facts {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 9px;
}

.ors-store__facts li {
  position: relative;
  padding-inline-start: 26px;

  color: #3f3f3f;
  font-size: 14px;
  line-height: 1.9;
}

/* تیک سبز با CSS ساخته می‌شود تا یک درخواست تصویر اضافه نشود */
.ors-store__facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.55em;

  width: 11px;
  height: 6px;

  border-inline-start: 2px solid var(--ors-green-action);
  border-bottom: 2px solid var(--ors-green-action);
  transform: rotate(-45deg);
}

.ors-store__hero-price {
  margin: 24px 0 0;

  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.ors-store__hero-price del {
  color: #8a8a8a;
  font-size: 16px;
}

.ors-store__hero-price strong {
  color: var(--ors-green-action);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 900;
}

.ors-store__hero-actions {
  margin-top: 26px;

  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* دکمه‌ی مشکی، جفتِ دکمه‌ی سبز — عین همان الگوی سکشن «درباره ما» */
.ors-btn--dark {
  background-color: var(--ors-charcoal);
  border-color: var(--ors-charcoal);
  color: #ffffff;
}

.ors-btn--dark:hover:not(:disabled),
.ors-btn--dark:focus-visible {
  background-color: var(--ors-green-action);
  border-color: var(--ors-green-action);
}


/* ---------------- چهار محصول بعدی ---------------- */

.ors-store__grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.ors-store .ors-card:hover {
  border-color: rgba(63, 128, 73, 0.45);
}

/* روی کاغذ، کاشی تصویر کمی تیره‌تر از کارت باشد تا بسته دیده شود */
.ors-store .ors-card__media {
  background: #f6f3ed;
}

.ors-store__cta {
  margin: clamp(38px, 4.4vw, 60px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}


/* ---------------- موبایل ---------------- */

@media (max-width: 860px) {
  .ors-store__hero {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* روی یک ستون، نقش‌مایه‌ها فقط شلوغی‌اند */
  .ors-store__doodles { display: none; }

  .ors-store__hero-media {
    width: min(320px, 78%);
    margin-inline: auto;
  }
}


/* ---------------- نوار دسته‌ها (اورس مگ) ---------------- */

.ors-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.ors-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 18px;

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;

  color: var(--ors-grey-text-light);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;

  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ors-chip span {
  /* شمارنده — با وزن سبک‌تر تا با خود نام قاطی نشود */
  font-weight: 400;
  font-size: 12px;
  opacity: 0.7;
}

.ors-chip:hover,
.ors-chip:focus-visible {
  border-color: var(--ors-green);
  color: #ffffff;
}

.ors-chip.is-on {
  border-color: var(--ors-green-action);
  background-color: var(--ors-green-action);
  color: #ffffff;
}


/* ---------------- صفحه‌بندی ---------------- */

.ors-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  margin-top: clamp(34px, 4vw, 56px);
}

.ors-pager__state {
  color: var(--ors-grey-text);
  font-size: 14px;
}


/* ---------------- راهنمای خرید ---------------- */

.ors-guide__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.ors-guide__cta {
  margin: clamp(32px, 4vw, 48px) 0 0;
  text-align: center;
}

/*
  مراحل با شماره‌ی واقعی. عدد از شمارنده‌ی CSS می‌آید نه از متن، پس
  اگر مرحله‌ای اضافه یا جابه‌جا شود شماره‌ها خودشان درست می‌مانند.
*/
.ors-steps {
  counter-reset: ors-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.ors-step {
  counter-increment: ors-step;
  position: relative;

  padding: 26px 26px 26px 26px;
  padding-inline-start: 26px;

  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.1));
  border-radius: 18px;
  background-color: var(--card-bg, rgba(255, 255, 255, 0.03));
}

.ors-step::before {
  content: counter(ors-step, persian);

  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;
  margin-bottom: 14px;

  border-radius: 10px;
  background-color: rgba(75, 152, 85, 0.16);
  color: var(--ors-green);

  font-size: 16px;
  font-weight: 900;
}

.ors-step__title {
  margin: 0 0 8px;
  color: var(--card-title, #ffffff);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
}

.ors-step__text {
  margin: 0;
  color: var(--card-muted, var(--ors-grey-text-light));
  font-size: 14px;
  line-height: 2;
}


/* ---------------- سردر فروشگاه ---------------- */

/*
  عکس‌های محصول روی زمینه‌ی روشن گرفته شده‌اند و متن سفید رویشان
  خوانا نیست. پس تصویر تیره و محو می‌شود و فقط نقش بافت را بازی
  می‌کند؛ کنتراست متن از گرادیان می‌آید نه از شانسِ عکس.
*/

.ors-shophero {
  position: relative;
  overflow: hidden;

  padding-block: clamp(46px, 6vw, 84px);
  background-color: var(--ors-charcoal);
}

.ors-shophero__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ors-shophero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: grayscale(0.25);
}

.ors-shophero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(21, 21, 21, 0.55) 0%,
      rgba(21, 21, 21, 0.82) 70%,
      var(--ors-charcoal) 100%);
}

.ors-shophero__inner {
  position: relative;
  z-index: 1;
}

.ors-shophero__title {
  margin: 0;
  font-family: var(--ors-font-fa);
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 900;
  line-height: 1.35;
  color: #ffffff;
}

.ors-shophero__lead {
  margin: 14px 0 0;
  max-width: 52ch;
  color: var(--ors-grey-text-light);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 2;
}

.ors-shophero__chips {
  margin-top: clamp(22px, 2.6vw, 32px);
  margin-bottom: 0;
}

/* سردر خودش فاصله‌ی بالا دارد؛ سکشن بعدی نباید دوباره بدهد */
.ors-section--tight {
  padding-top: clamp(28px, 3vw, 44px);
}


/* ---------------- قیمت در صفحه‌ی محصول ---------------- */

/*
  قیمتی که پرداخت می‌شود اول می‌آید و بزرگ‌تر است؛ قیمت قبلی بعد از آن
  و کوچک‌تر. روی موبایل این دو بدون فاصله کنار هم می‌نشستند و مثل یک
  عدد بلند خوانده می‌شدند.
*/

.ors-detail__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;

  margin: 26px 0 0;
}

.ors-detail__price-now {
  color: var(--ors-green);
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.4;
}

.ors-detail__price-was {
  color: var(--ors-grey-text);
  font-size: clamp(15px, 3.4vw, 18px);
  text-decoration-line: line-through;
  /* خط پیش‌فرض روی رقم فارسی کم‌رنگ دیده می‌شود */
  text-decoration-thickness: 2px;
}


/* ---------------- دکمه‌ی بازگشت به بالا ---------------- */

/*
  روی موبایل ۶۲ پیکسل بود و روی متن می‌افتاد. کوچک‌تر می‌شود و
  برچسبش برداشته می‌شود؛ آیکن به‌تنهایی گویاست و aria-label سر جایش
  است.
*/
@media (max-width: 640px) {
  .ors-gotop {
    width: 46px;
    height: 46px;
    inset-inline-end: 14px;
    bottom: 14px;
  }

  .ors-gotop span {
    display: none;
  }

  .ors-gotop svg {
    width: 20px;
    height: 20px;
  }
}

/* ---------------------------------------------------------------- گیج کافئین
   عقربه از راست (کم) به چپ (زیاد) می‌رود؛ در چیدمان راست‌به‌چپ جهت
   «بیشتر شدن» همین است. تمام مقادیر عقربه سمت سرور حساب می‌شود، پس
   این بخش هیچ جاوااسکریپتی ندارد و در صفحه‌ی بدون JS هم درست است. */

.ors-caff {
  margin-block: 26px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
}

.ors-caff__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.ors-caff__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ors-white);
}

.ors-caff__badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(75, 152, 85, .16);
  color: #8fd39a;
  font-size: 13px;
  font-weight: 700;
}

.ors-caff__body {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.ors-caff__ratio {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ors-grey-text-light);
}

.ors-caff__ratio b {
  color: var(--ors-white);
  font-weight: 800;
}

.ors-caff__ratio-sep { color: var(--ors-grey-text); }

.ors-caff__dial {
  flex: 0 0 190px;
  width: 190px;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.ors-caff__track,
.ors-caff__value {
  fill: none;
  stroke-linecap: round;
  stroke-width: 13;
}

.ors-caff__track { stroke: rgba(255, 255, 255, .12); }
.ors-caff__value { stroke: var(--ors-green); }

.ors-caff__ticks line {
  stroke: rgba(255, 255, 255, .28);
  stroke-width: 2;
  stroke-linecap: round;
}

.ors-caff__needle {
  stroke: var(--ors-white);
  stroke-width: 4;
  stroke-linecap: round;
}

.ors-caff__hub { fill: var(--ors-white); }

.ors-caff__edge {
  fill: var(--ors-grey-text);
  font-size: 12px;
  font-family: inherit;
}

.ors-caff__figure {
  flex: 1 1 170px;
  min-width: 0;      /* وگرنه متن بلند، کارت را از عرض خودش بیرون می‌زند */
}

.ors-caff__daily {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #8fd39a;
}

.ors-caff__notes { margin-top: 14px; }

.ors-caff__number {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 800;
  color: var(--ors-white);
  line-height: 1.5;
}

.ors-caff__number--soft { font-size: 18px; }

.ors-caff__unit {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ors-grey-text);
}

.ors-caff__line {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ors-grey-text-light);
}

.ors-caff__fine {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.85;
  color: var(--ors-grey-text);
}

@media (max-width: 560px) {
  .ors-caff { padding: 18px 16px; }
  .ors-caff__body { gap: 14px; }
  .ors-caff__dial { flex-basis: 160px; width: 160px; margin-inline: auto; }
}

/* در صفحه‌ی کالکشن، گیج زیر تیتر می‌نشیند و نباید تمام عرض را بگیرد */
.ors-caff-wrap {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 40px;
}

/* ------------------------------------------------ چیدمان صفحه‌ی محصول

   نسبت ستون‌ها عمداً به نفع ستون خرید است. عکس محصول مربع است، پس
   هر پیکسلی که به ستون عکس بدهیم مستقیم به ارتفاعش اضافه می‌شود؛
   در عوض ستون متن هرچه پهن‌تر باشد کوتاه‌تر می‌شود. چیدمان قبلی
   (۱.۵fr برای عکس) دقیقاً برعکس این کار را می‌کرد.

   ستون عکس چسبان است تا وقتی خواننده مشخصات را می‌خواند، خودِ
   محصول از جلوی چشمش نرود. */

.ors-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 3.4vw, 52px);
}

.ors-pdp__media {
  position: sticky;
  top: 24px;
}

.ors-pdp__buy { min-width: 0; }

.ors-pdp__image {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1;
}

/* در دسکتاپ باریک، ستون متن کوتاه نمی‌شود چون ارتفاعش را فرم و
   دکمه می‌سازند، نه متن. پس به‌جای باریک کردن ستون عکس — که فاصله
   را بدتر کرد — خود عکس کشیده‌تر می‌شود. بسته‌ی قهوه هم ذاتاً
   عمودی است و در قاب ۳:۴ بهتر می‌نشیند تا مربع. */
@media (min-width: 901px) and (max-width: 1200px) {
  .ors-pdp__image { aspect-ratio: 3 / 4; }
}

/* توضیح بلند و گیج کافئین، زیر دو ستون و در عرض کامل */
.ors-pdp__details {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.ors-pdp__subtitle {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ors-white);
}

/* گیج داخل این بخش حاشیه‌ی بالای خودش را لازم ندارد */
.ors-pdp__details .ors-caff { margin-top: 0; }

/* محصولی که توضیح بلند ندارد، نباید نصف ردیف را خالی بگذارد */
.ors-pdp__details--solo {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

@media (max-width: 900px) {
  .ors-pdp,
  .ors-pdp__details { grid-template-columns: 1fr; }

  /* روی موبایل چسباندن عکس یعنی نصف صفحه همیشه اشغال است */
  .ors-pdp__media { position: static; }
}


/* =========================
   انتخابگر وزن
========================= */

.ors-weights {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.ors-weights__legend {
  padding: 0;
  margin-bottom: 10px;
  color: var(--card-muted, var(--ors-grey-text));
  font-size: 13px;
}

/* auto-fit، نه سه ستون ثابت: محصولی که دو وزن دارد نباید یک ستون
   خالی کنارش بماند، و چهار وزنی هم باید جا شود. */
.ors-weights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.ors-weight {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 14px 12px 12px;

  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;

  color: #fff;
  text-align: center;
  cursor: pointer;

  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.ors-weight:hover { border-color: rgba(255, 255, 255, 0.34); }

/* حالت انتخاب‌شده باید از hover پررنگ‌تر باشد، وگرنه روی دسکتاپ این
   دو با هم اشتباه می‌شوند — همان درسی که در کوییز گرفتیم. */
.ors-weight:has(input:checked) {
  border-color: var(--ors-green);
  background: rgba(75, 152, 85, 0.14);
}

/* رادیو sr-only است، پس حلقه‌ی فوکوس باید روی خود برچسب بنشیند. */
.ors-weight:focus-within {
  outline: 2px solid var(--ors-green);
  outline-offset: 2px;
}

.ors-weight.is-out {
  cursor: not-allowed;
  opacity: 0.5;
}

.ors-weight.is-out:hover { border-color: rgba(255, 255, 255, 0.14); }

.ors-weight__name { font-size: 15px; font-weight: 800; }
.ors-weight__price { font-size: 14px; font-weight: 700; color: var(--ors-green); }

.ors-weight__unit {
  color: var(--ors-grey-text);
  font-size: 10.5px;
  line-height: 1.7;
}

.ors-weight__out,
.ors-weight__low {
  font-size: 10.5px;
  color: var(--ors-grey-text);
}

.ors-weight__low { color: #c9973f; }

/* نشان گوشه: تخفیف سبز، به‌صرفه‌بودن طلایی. دو چیز متفاوت‌اند و
   نباید یک رنگ باشند. */
.ors-weight__flag {
  position: absolute;
  top: -9px;
  inset-inline-start: 50%;
  transform: translateX(50%);

  padding: 2px 9px;
  border-radius: 999px;

  background: var(--ors-green-action);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.ors-weight__flag--value { background: linear-gradient(135deg, #c9973f, #9d6f24); }


/* کارت شبکه: محصولی که چند وزن دارد «از ... تومان» نشان می‌دهد */
.ors-card__from {
  color: var(--card-muted);
  font-size: 11px;
}

.ors-card__weights {
  color: var(--card-muted);
  font-size: 11px;
}