/* ==========================================================================
   pages.css — برگه‌ها، وبلاگ، محصول، فرم‌ها
   همان نظام رنگ و فونتِ نمای هوایی، در چیدمان خواندنی.
   ========================================================================== */

/* ★ نوار بالا در همهٔ صفحه‌ها دقیقاً همان نوارِ صفحهٔ اصلی است:
   شناور، شیشه‌ای، با خط طلایی زیرش. قبلاً روی صفحه‌های داخلی یک
   نوارِ چسبان با زمینهٔ متفاوت بود و دو تا هدرِ متفاوت دیده می‌شد.
   چون شناور است، صفحه به‌اندازهٔ ارتفاعش از بالا فاصله می‌گیرد. */
body:not(.home) {
  padding-block-start: var(--bar);
}

.bar__menu {
  display: flex;
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bar__menu a {
  color: var(--shir-kam);
  text-decoration: none;
  font-size: var(--fs-kootah);
  transition: color var(--dur-kotah) var(--ease-narm);
}
.bar__menu a:hover,
.bar__menu .current-menu-item a {
  color: var(--tala-roshan);
}
@media (max-width: 46rem) {
  .bar__menu {
    gap: var(--s3);
    font-size: var(--fs-riz);
  }
}

/* ── چیدمان برگه ──────────────────────────────────────────────────── */

/* ★ عمداً .wrap.page نوشته شده، نه .page تنها:
   وردپرس روی <body> صفحه‌های ثابت کلاس page می‌گذارد. با انتخابگرِ
   تنها، این فاصله‌ها به خودِ body می‌چسبید و کل صفحه ۴۸ پیکسل پایین
   می‌افتاد — همان چیزی که نمای هوایی را از کادر بیرون می‌برد. */
.wrap.page {
  padding-block: var(--s7) var(--s9);
}
.wrap.page--center {
  text-align: center;
}
.page__title {
  font-size: var(--fs-titr);
  margin-block-end: var(--s3);
}
.page__title--sm {
  font-size: var(--fs-h2);
  margin-block-start: var(--s8);
}
.page__rule {
  width: 7rem;
  margin-block-end: var(--s6);
}
.wrap.page--center .page__rule {
  margin-inline: auto;
}
.page__meta {
  color: var(--shir-kam);
  font-size: var(--fs-riz);
  margin-block-end: var(--s3);
}
.page__hero {
  margin-block-end: var(--s6);
  border: 1px solid var(--marz);
}
.page__hero img {
  width: 100%;
  height: auto;
}
.page__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--s7);
  align-items: start;
  margin-block-start: var(--s7);
}
@media (max-width: 52rem) {
  .page__cols {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
}

.crumbs {
  font-size: var(--fs-riz);
  color: var(--shir-kam);
  margin-block-end: var(--s4);
}
.crumbs a {
  color: var(--shir-kam);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--tala);
}

.lede {
  color: var(--shir-kam);
  font-size: var(--fs-kootah);
  max-width: 46rem;
}
.empty {
  color: var(--shir-kam);
  padding-block: var(--s7);
}

/* ── متن بلند ─────────────────────────────────────────────────────── */

.prose {
  max-width: 46rem;
  color: var(--shir);
}
.prose p,
.prose ul,
.prose ol {
  margin-block-end: var(--s5);
  line-height: var(--lh-matn);
}
.prose h2,
.prose h3 {
  margin-block: var(--s7) var(--s3);
}
.prose h2 {
  font-size: var(--fs-h2);
}
.prose img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--marz-kam);
}
.prose blockquote {
  margin: var(--s6) 0;
  padding-inline-start: var(--s5);
  border-inline-start: 2px solid var(--tala-saye);
  color: var(--shir-kam);
}
.prose a {
  color: var(--tala);
}

/* ── کارت‌ها ──────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--s6) var(--s5);
}
.cards--product {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card__media,
.card__frame {
  border: 1px solid var(--marz);
  overflow: hidden;
  background: var(--gerdoo);
  margin-block-end: var(--s3);
}
.card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-motevaset) var(--ease-narm);
}
.card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-motevaset) var(--ease-narm);
}
.card__link:hover .card__frame img {
  transform: scale(1.05);
}

/* پرچم وضعیت و نشان رسانه، روی گوشه کارت */
.card__flag {
  position: absolute;
  inset-block-start: var(--s2);
  inset-inline-start: var(--s2);
  padding: 2px var(--s2);
  font-size: var(--fs-riz);
  color: var(--shir);
  background: rgba(33, 0, 0, 0.72);
  border: 1px solid var(--marz);
  border-radius: var(--radius);
}
.card__flag--order {
  color: var(--tala);
}
.card__icons {
  position: absolute;
  inset-block-end: var(--s2);
  inset-inline-end: var(--s2);
  display: flex;
  gap: 4px;
}
.card__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--tala);
  background: rgba(33, 0, 0, 0.6);
  border: 1px solid var(--marz);
  border-radius: 50%;
}
.card__price {
  color: var(--tala-saye);
  font-variant-numeric: tabular-nums;
}
.card__meta {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.card__placeholder {
  display: grid;
  place-items: center;
  gap: var(--s2);
  text-align: center;
  color: var(--shir-kam);
  font-size: var(--fs-riz);
  padding: var(--s4);
}
.card__placeholder img {
  width: 40px;
  height: auto;
  border-radius: 0;
  opacity: 0.8;
}
.card__link:hover .card__media img {
  transform: scale(1.04);
}
.card__link:hover .card__frame,
.card__link:focus-visible .card__frame {
  border-color: var(--sadaf);
}
.card__title {
  font-family: var(--font-titr);
  font-size: 1.2rem;
  line-height: var(--lh-titr);
  margin: 0 0 var(--s1);
}
.card--product {
  text-align: center;
}
.card__meta {
  font-size: var(--fs-riz);
  color: var(--shir-kam);
  margin: 0 0 var(--s2);
}
.card__excerpt {
  font-size: var(--fs-riz);
  color: var(--shir-kam);
  line-height: var(--lh-kootah);
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-end: var(--s6);
}
.chip {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--marz-por);
  border-radius: var(--radius);
  color: var(--shir-kam);
  font-size: var(--fs-riz);
  text-decoration: none;
  transition: color var(--dur-kotah) var(--ease-narm),
    border-color var(--dur-kotah) var(--ease-narm);
}
.chip:hover,
.chip.is-on {
  color: var(--aabnoos);
  background: var(--gold-edge);
  border-color: transparent;
}

.pager {
  margin-block-start: var(--s7);
}
.pager .page-numbers {
  display: inline-block;
  min-width: 2.5rem;
  padding: var(--s2);
  text-align: center;
  border: 1px solid var(--marz);
  color: var(--shir-kam);
  text-decoration: none;
  margin-inline-end: var(--s2);
}
.pager .page-numbers.current,
.pager .page-numbers:hover {
  color: var(--aabnoos);
  background: var(--gold-edge);
  border-color: transparent;
}

/* ── صفحه محصول ───────────────────────────────────────────────────────
   قاب بیضی حذف شد. عکس محصول در یک کادر مستطیلِ ۴:۳ می‌نشیند و کامل
   دیده می‌شود؛ بیضی برند فقط یک نشان کوچک گوشه کادر است.
   ------------------------------------------------------------------- */

/* ★ چیدمان: نوشته‌ها سمت راست، رسانه سمت چپ.
   در شبکهٔ راست‌چین ستون یک سمت راست است، پس ستون اطلاعات را
   صریحاً ستون یک می‌کنیم. ترتیب خودِ HTML دست‌نخورده می‌ماند
   (اول رسانه) تا روی موبایل عکس بالا بیاید و بعد توضیحات. */
.pd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: var(--s8);
  row-gap: var(--s7);
  align-items: start;
}
.pd__info {
  grid-column: 1;
  grid-row: 1;
}
.pd__media {
  grid-column: 2;
  grid-row: 1;
}
/* توضیح بلند، زیر همان ستون عکس‌ها */
.pd__about {
  grid-column: 2;
  grid-row: 2;
  margin-block-start: 0;
}

@media (max-width: 56rem) {
  .pd {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  .pd__media,
  .pd__info,
  .pd__about {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ستون اطلاعات روی دسکتاپ همراه اسکرول می‌ماند تا دکمه‌ها همیشه در دید باشند */
@media (min-width: 56.0625rem) {
  .pd__info {
    position: sticky;
    inset-block-start: calc(var(--bar) + var(--s5));
  }
}

/* ── گالری ───────────────────────────────────────────────────────── */

.pd__gallery {
  position: relative;
}
.pd__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-kart);
  border: 1px solid var(--marz);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--saye-kart);
}
.pd__stage--empty {
  display: grid;
  place-items: center;
}
.pd__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-motevaset) var(--ease-narm);
}
.pd__slide.is-on {
  opacity: 1;
  pointer-events: auto;
}
.pd__slide img,
.pd__slide video,
.pd__slide iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.pd__slide img {
  object-fit: cover;
}
.pd__slide video {
  object-fit: contain;
  background: #000;
}

/* نشان برند، گوشه کادر — بیضی به‌جای اینکه عکس را ببرد، امضا می‌کند */
.pd__mark {
  position: absolute;
  inset-block-end: var(--s3);
  inset-inline-start: var(--s3);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(33, 0, 0, 0.55);
  border: 1px solid var(--marz);
  pointer-events: none;
  opacity: 0.75;
}
.pd__mark img {
  width: 18px;
  height: auto;
}

.pd__zoom {
  position: absolute;
  inset-block-start: var(--s3);
  inset-inline-end: var(--s3);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--tala);
  background: rgba(33, 0, 0, 0.5);
  border: 1px solid var(--marz);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--dur-kotah) var(--ease-narm),
    border-color var(--dur-kotah) var(--ease-narm);
}
.pd__stage:hover .pd__zoom,
.pd__zoom:focus-visible {
  opacity: 1;
}
.pd__zoom:hover {
  border-color: var(--tala);
}
@media (hover: none) {
  .pd__zoom {
    opacity: 1;
  }
}

.pd__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
}
.pd__thumb {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  color: var(--tala);
  background: var(--bg-kart);
  border: 1px solid var(--marz);
  border-radius: var(--radius);
  transition: border-color var(--dur-kotah) var(--ease-narm),
    opacity var(--dur-kotah) var(--ease-narm);
  opacity: 0.7;
}
.pd__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd__thumb svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.pd__thumb--video img {
  opacity: 0.5;
}
.pd__thumb:hover,
.pd__thumb.is-on {
  opacity: 1;
  border-color: var(--tala);
}

/* بزرگ‌نمایی */
.pd__lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-medal);
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: rgba(20, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-motevaset) var(--ease-narm), visibility var(--dur-motevaset);
}
.pd__lightbox.is-on {
  opacity: 1;
  visibility: visible;
}
.pd__lightbox img {
  max-width: 100%;
  max-height: 92dvh;
  object-fit: contain;
  border: 1px solid var(--marz);
}
.pd__lightbox-close {
  position: absolute;
  inset-block-start: var(--s5);
  inset-inline-start: var(--s5);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--tala);
  border: 1px solid var(--marz);
  border-radius: 50%;
  background: var(--shishe);
}
html.pd-zoomed {
  overflow: hidden;
}

/* ── ستون اطلاعات ────────────────────────────────────────────────── */

.pd__eyebrow {
  font-size: var(--fs-riz);
  color: var(--shir-kam);
  margin: 0 0 var(--s2);
}
.pd__eyebrow a {
  color: var(--tala-saye);
  text-decoration: none;
}
.pd__eyebrow a:hover {
  color: var(--tala);
}
.pd__title {
  font-size: var(--fs-titr);
  margin: 0 0 var(--s3);
}
.pd__rule {
  width: 5rem;
  margin-block-end: var(--s5);
}
.pd__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s4);
}
.pd__lede {
  color: var(--shir);
  line-height: var(--lh-kootah);
  margin: 0 0 var(--s5);
}
.pd__price {
  font-size: 1.5rem;
  color: var(--tala);
  margin: 0 0 var(--s5);
}
.pd__price strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pd__price span {
  font-size: var(--fs-kootah);
  color: var(--shir-kam);
}
.pd__price-ask {
  font-size: var(--fs-kootah);
}
.pd__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-block-end: var(--s6);
}
.pd__specs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-kootah);
}
.pd__specs th,
.pd__specs td {
  padding: var(--s3) 0;
  text-align: start;
  border-block-end: 1px solid var(--marz-kam);
  vertical-align: top;
}
.pd__specs th {
  color: var(--shir-kam);
  font-weight: 400;
  width: 40%;
}
.pd__specs td {
  color: var(--shir);
}
.pd__specs tr:last-child th,
.pd__specs tr:last-child td {
  border-block-end: 0;
}

.pd__ask,
.pd__related {
  margin-block-start: var(--s8);
}
.pd__about .page__title--sm {
  margin-block-start: 0;
}

/* ── نشان وضعیت ──────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--marz-por);
  border-radius: var(--radius);
  color: var(--tala);
  font-size: var(--fs-riz);
  line-height: 1.9;
}
.badge--available {
  color: var(--movafagh);
  border-color: color-mix(in srgb, var(--movafagh) 45%, transparent);
}
.badge--out {
  color: var(--shir-kam);
}
.badge--code code {
  /* کد محصول هم با همان فونت سایت. اگر روزی خواستید تک‌عرض باشد
     تا حروف زیر هم بیفتند، همین یک خط را عوض کنید. */
  font-family: var(--font-matn);
  letter-spacing: 0.02em;
  font-size: 0.9em;
  color: var(--shir-kam);
  direction: ltr;
  display: inline-block;
}

/* ── فهرست محصولات ───────────────────────────────────────────────── */

.shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.shelf__count {
  color: var(--shir-kam);
  font-size: var(--fs-riz);
  margin: 0;
}
.chip__n {
  color: inherit;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  margin-inline-start: var(--s1);
}

/* ── فرم‌ها ───────────────────────────────────────────────────────── */

.salor-form {
  max-width: 34rem;
}
.salor-form p {
  margin-block-end: var(--s4);
}
.salor-form label {
  display: block;
  font-size: var(--fs-riz);
  color: var(--shir-kam);
  margin-block-end: var(--s1);
}
.salor-form input[type='text'],
.salor-form input[type='tel'],
.salor-form input[type='email'],
.salor-form textarea,
.searchform input[type='search'] {
  width: 100%;
  padding: var(--s3);
  background: var(--gerdoo);
  border: 1px solid var(--marz);
  border-radius: var(--radius);
  color: var(--shir);
  font: inherit;
}
.salor-form input:focus,
.salor-form textarea:focus,
.searchform input:focus {
  outline: 2px solid var(--tala);
  outline-offset: 1px;
}
/* تله ربات — کاربر هرگز نمی‌بیندش */
/* ★ تلهٔ ربات: باید برای آدم نامرئی باشد ولی برای ربات پرشدنی.
   قبلاً با left:-9999px کنار گذاشته می‌شد؛ در صفحهٔ راست‌چین این
   یعنی ده‌هزار پیکسل فضای اضافه، و مرورگر برای همان لایه‌ای به آن
   بزرگی می‌ساخت که روی بعضی کارت‌های گرافیک کلِ صفحه را از رندر
   می‌انداخت — صفحهٔ محصول و تماس کاملاً خالی دیده می‌شد.
   روش استاندارد clip همان کار را بدون هیچ فضای اضافه انجام می‌دهد. */
.salor-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-note {
  padding: var(--s3) var(--s4);
  border-inline-start: 3px solid var(--tala-saye);
  background: var(--gerdoo);
  font-size: var(--fs-kootah);
}
.form-note--ok {
  border-inline-start-color: var(--movafagh);
}
.form-note--bad {
  border-inline-start-color: var(--khata);
}
.form-hint {
  font-size: var(--fs-riz);
  color: var(--shir-kam);
}

.searchform {
  display: flex;
  gap: var(--s3);
  max-width: 34rem;
  margin-block-end: var(--s6);
}
.wrap.page--center .searchform {
  margin-inline: auto;
}

.info-card {
  border: 1px solid var(--marz);
  padding: var(--s5);
  background: var(--gerdoo);
}
.info-card__title {
  font-family: var(--font-titr);
  font-size: 1.25rem;
  margin: 0 0 var(--s4);
}
.info-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  font-size: var(--fs-kootah);
}
.info-card__list li {
  display: grid;
  gap: 2px;
}
.info-card__list span {
  color: var(--shir-kam);
  font-size: var(--fs-riz);
}
.info-card__map {
  margin-block-start: var(--s5);
}
.info-card__map iframe {
  width: 100%;
  min-height: 14rem;
  border: 0;
}

.four04 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
  margin-block: var(--s6);
}

/* ── فوتر ─────────────────────────────────────────────────────────────
   نوار طلاییِ تمام‌عرض. متن روی آن زرشکیِ تیره است، نه سفید — طلا
   روشن است و متن روشن رویش خوانده نمی‌شود.
   ------------------------------------------------------------------- */

.foot {
  position: relative;
  margin-block-start: var(--s6);
  padding-block: var(--s4) var(--s3);
  /* همان جنسِ نوار بالا: شیشهٔ تیره با خط طلایی روی لبه.
     هدر و فوتر دو سرِ یک قاب‌اند، پس باید یکی دیده شوند. */
  background: linear-gradient(to top, rgba(33, 0, 0, 0.72), transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--shir);
}
/* خط طلایی روی لبه — قرینهٔ همان خطی که زیر نوار بالاست */
.foot::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--s5);
  height: 1px;
  background-image: var(--gold-rule);
  opacity: 0.55;
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s3) var(--s5);
  align-items: start;
}
.foot__mark {
  font-size: 1.15rem;
  margin: 0 0 var(--s1);
  background-image: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot__head {
  font-family: var(--font-matn);
  font-size: var(--fs-riz);
  font-weight: 600;
  color: var(--tala);
  margin: 0 0 var(--s2);
  padding-block-end: var(--s1);
  border-block-end: 1px solid var(--marz-kam);
}
.foot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s1);
  font-size: var(--fs-riz);
  color: var(--shir-kam);
}
.foot__list a {
  color: var(--shir-kam);
  text-decoration: none;
  transition: color var(--dur-kotah) var(--ease-narm);
}
.foot__list a:hover,
.foot__list a:focus-visible {
  color: var(--tala-roshan);
}
.foot__note {
  font-size: var(--fs-riz);
  color: var(--shir-kam);
  margin: 0;
}
.foot__base {
  margin-block-start: var(--s3);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--marz-kam);
  font-size: var(--fs-riz);
  color: var(--shir-kam);
}
.foot__base p {
  margin: 0;
}