@charset "UTF-8";
/* ==========================================================================
   کارت محصول
   --------------------------------------------------------------------------
   سه حالتِ کاملاً مجزا (منطقِ انتخاب در views/partials/product-card.php):

     .pcard            قیمت‌دار و موجود   → قیمت + دکمهٔ «افزودن به سبد»
     .pcard.is-oos     قیمت‌دار ناموجود   → قیمتِ خاموش + دکمهٔ «اطلاع از موجودی»
     .pcard.is-quote   بدون قیمت (استعلامی) → فقط دکمهٔ استعلام، بدون هیچ خطِ قیمت

   ⚠ قانونِ اصلِ کاتالوگ: از ۴۸۵ محصول، ۳۸۵ تا price=0 هستند. در حالتِ استعلامی
   نه قیمت چاپ می‌شود و نه جای خالیِ قیمت رزرو می‌شود؛ «قیمت» و «تماس بگیرید»
   هیچ‌وقت کنار هم دیده نمی‌شوند.

   هم‌ترازیِ کارت‌ها: .pcard-foot با margin-block-start:auto به کفِ کارت می‌چسبد،
   پس دکمه‌های همهٔ کارت‌های یک ردیف — در هر سه حالت — روی یک خط می‌نشینند و
   ارتفاعِ کارت‌ها هم با stretch گرید یکسان می‌ماند.

   ⚠ کارت فقط یک دکمه دارد: «مشاهده جزئیات و خرید» که به صفحهٔ محصول می‌رود
   (خواستهٔ صریحِ کارفرما). «افزودن به سبد» و «تماس برای قیمت» از کارت برداشته
   شدند و فقط در صفحهٔ محصول‌اند. یعنی روی صفحهٔ دسته دیگر هیچ [data-add-to-cart]
   وجود ندارد؛ app.js با delegation کار می‌کند پس چیزی نمی‌شکند.
   تنها قلاب باقی‌مانده روی کارت: [data-wish] برای علاقه‌مندی.
   ========================================================================== */

/* ---------- گرید محصولات ---------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (min-width:640px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}

/* ---------- بدنهٔ کارت ---------- */
.pcard{
  position:relative;
  display:flex;flex-direction:column;
  min-width:0;                       /* فرزندِ گرید باید اجازهٔ کوچک‌شدن داشته باشد */
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-1);
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
  /* رندر تنبل: گرید دسته‌ها گاهی ۴۸ کارت دارد */
  content-visibility:auto;
  contain-intrinsic-size:auto 380px;
}
@media (hover:hover){
  .pcard:hover{border-color:#DADCE0;box-shadow:var(--sh-2);transform:translateY(-2px)}
  .pcard:hover .pcard-img img{transform:scale(1.04)}
  .pcard:hover .pcard-quick{opacity:1;transform:none}
}
.pcard:focus-within{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.12)}

/* ---------- ۱) تصویر ---------- */
.pcard-img{
  position:relative;display:block;
  aspect-ratio:1/1;
  /* ⚠ سفید، نه خاکستری. تصویرِ خودِ محصولات پس‌زمینهٔ سفیدِ توپر دارد؛ روی
     خاکستریِ --c-bg یک مربعِ سفیدِ واضح دورِ محصول دیده می‌شد. حالا تصویر با
     کارت یکی می‌شود و جداکنندهٔ زیر، مرزِ لازم را می‌سازد. */
  background:var(--c-surface);
  border-block-end:1px solid var(--c-line-2);
  padding:var(--sp-4);
  overflow:hidden;
}
.pcard-img img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .25s var(--ease);
}
/* جای‌گیرِ عمدی برای دو محصولی که اصلاً تصویر ندارند */
.pcard-img .ph{
  width:100%;height:100%;display:grid;place-items:center;
  color:var(--c-line);
}
.pcard-img .ph svg{width:38px;height:38px;stroke-width:1.25}

/* ---------- ۲) برچسب (فقط وقتی لازم است) ---------- */
.pcard-flags{
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
}
.pcard-flag{
  padding:1px 9px;border-radius:var(--r-full);
  font-size:15px;font-weight:700;line-height:1.55;
  background:var(--c-ink);color:#fff;
}
.pcard-flag.off{background:var(--c-primary)}
.pcard-flag.new,
.pcard-flag.hot{background:var(--c-surface);color:var(--c-ink-2);border:1px solid var(--c-line)}

/* افزودن به علاقه‌مندی — روی دسکتاپ با hover، روی لمسی همیشه دیده می‌شود */
.pcard-quick{
  position:absolute;top:8px;inset-inline-end:8px;z-index:2;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.pcard-quick button{
  width:40px;height:40px;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:var(--c-surface);border:1px solid var(--c-line);
  color:var(--c-ink-2);
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.pcard-quick button svg{width:18px;height:18px;stroke-width:1.75}
@media (hover:hover){.pcard-quick button:hover{color:var(--c-primary);border-color:var(--c-primary)}}
.pcard-quick button.is-on{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
@media (hover:none){.pcard-quick{opacity:1;transform:none}}

/* ---------- بدنهٔ متنی ---------- */
.pcard-body{
  display:flex;flex-direction:column;flex:1 1 auto;
  min-width:0;min-height:0;
  padding:var(--sp-3) var(--sp-3) var(--sp-3);
  gap:6px;
}
@media (min-width:640px){.pcard-body{padding:14px}}

/* ۳) نام محصول — حداکثر دو خط */
.pcard .pcard-title{
  font-size:15px;font-weight:500;line-height:1.75;color:var(--c-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
  min-height:calc(1.75em * 2);
  transition:color var(--t-fast);
}
@media (hover:hover){.pcard .pcard-title:hover{color:var(--c-primary)}}

/* ۴) کد مدل / SKU — کوچک و خاکستری */
.pcard-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:15px;color:var(--c-ink-3);line-height:1.7;min-width:0;
}
.pcard-sku{
  direction:ltr;unicode-bidi:isolate;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.pcard-rating{display:inline-flex;align-items:center;gap:3px;color:var(--c-star);flex:none}
.pcard-rating svg{width:13px;height:13px}
.pcard-rating b{color:var(--c-ink-2);font-size:15px;font-weight:500}

/* ---------- بلوکِ پایین: قیمت (اگر هست) + دکمه ----------
   margin-block-start:auto ⇒ دکمه‌ها در همهٔ حالت‌ها کفِ کارت هم‌تراز می‌شوند. */
.pcard-foot{
  margin-block-start:auto;
  padding-block-start:var(--sp-3);
  display:grid;gap:10px;min-width:0;
}

/* ۵) قیمت — فقط در حالتِ قیمت‌دار رندر می‌شود */
.pcard-amount{
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  min-height:42px;min-width:0;
}
.price-old{
  font-size:15px;color:var(--c-ink-3);text-decoration:line-through;
  text-decoration-color:var(--c-ink-3);line-height:1.6;
}
.price-now{
  display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;
  font-size:20px;font-weight:700;color:var(--c-ink);line-height:1.45;
}
.price-now .unit{font-size:15px;font-weight:400;color:var(--c-ink-3)}
/* ⚠ اندازه با .pcard قفل شده چون mobile.css — که بعد از این فایل لود می‌شود —
   زیر ۹۰۰px قیمت را به کوچک‌تر از کفِ ۱۵px می‌برد. */
.pcard .price-now{font-size:20px}
.price-off{
  align-self:flex-start;
  background:var(--c-primary);color:#fff;
  font-size:15px;font-weight:700;line-height:1.9;
  padding:2px 8px;border-radius:var(--r-full);
  white-space:nowrap;
}

/* ۶) دکمهٔ CTA — یک هندسه برای هر سه حالت، همیشه دیده می‌شود (بدون hover) */
.pcard-cta{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;min-height:44px;padding-inline:10px;
  border:1px solid transparent;border-radius:var(--r-sm);
  font-size:15px;font-weight:700;line-height:1.2;text-align:center;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
/* ⚠ برچسب عمداً ellipsis ندارد و اجازهٔ شکستن به دو خط دارد.
   «مشاهده جزئیات و خرید» ۲۰ کاراکتر است و در کارتِ ۱۶۴ پیکسلیِ ۳۶۰px در یک خط
   جا نمی‌شود؛ با ellipsis می‌شد «مشاهده جزئیات و…» که بدتر از دو خط است. */
.pcard-cta .t{min-width:0;text-wrap:balance}

/* تکِ CTA برای هر سه حالت: سفید با کادر — مطابق btn-secondary در app.css.
   قرمز عمداً اینجا نیست: در یک گرید ۲۴تایی، ۲۴ دکمهٔ قرمز صفحه را داد می‌زند و
   با قاعدهٔ «قرمز فقط برای CTA اصلی» می‌جنگد. CTA اصلی در صفحهٔ محصول است. */
.pcard-cta--go{
  background:var(--c-surface);color:var(--c-ink);border-color:#DADCE0;
  white-space:normal;line-height:1.45;padding-block:6px;
}
@media (hover:hover){
  .pcard-cta--go:hover{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary-dark)}
}

/* حالت ب: قیمت‌دار ولی ناموجود — قیمت خاموش می‌شود، اما حذف نمی‌شود */
.pcard.is-oos .pcard-img img{filter:grayscale(1);opacity:.55}
.pcard.is-oos .price-now{color:var(--c-ink-2)}
.pcard.is-oos .price-now .unit{color:var(--c-ink-2)}
/* خطِ «ناموجود» زیر قیمت — چون دکمه دیگر این را نمی‌گوید، وضعیت باید
   جایی دیده شود وگرنه کاربر تا صفحهٔ محصول نمی‌فهمد. */
.pcard-oos{
  font-size:15px;font-weight:500;line-height:1.6;color:var(--c-ink-2);
  display:flex;align-items:center;gap:5px;min-width:0;
}
.pcard-oos::before{
  content:'';width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--c-ink-3);
}

/* حالت ج: بدون قیمت — .pcard-amount اصلاً رندر نمی‌شود، پس جای خالی نداریم */

/* ---------- ریزتنظیمِ نمایشگرهای کوچک ----------
   کفِ اندازهٔ متن ۱۵px است، پس در گریدِ دوستونیِ ۳۶۰px فقط فاصله‌ها جمع می‌شوند
   نه متن؛ کوتاه‌شدنِ برچسبِ دکمه هم با .t (ellipsis + min-width:0) مهار می‌شود. */
@media (max-width:479px){
  .pcard-img{padding:var(--sp-3)}
  .pcard .pcard-title{line-height:1.7;min-height:calc(1.7em * 2)}
  .pcard-body{padding:10px 10px 12px;gap:5px}
  .pcard-foot{padding-block-start:10px;gap:8px}
  .pcard-amount{min-height:38px}
  .pcard .price-now{font-size:18px}
  .pcard-cta{gap:5px;padding-inline:6px}
  .pcard-quick button{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .pcard,.pcard-img img,.pcard-quick{transition:none}
  .pcard:hover{transform:none}
  .pcard:hover .pcard-img img{transform:none}
}

/* ---------- کارت افقی (سبد، مقایسه، نتایج جستجو) ---------- */
.pcard-h{
  display:flex;gap:14px;align-items:center;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:12px;
}
/* سفید، به همان دلیلِ .pcard-img: تصویرِ محصول خودش زمینهٔ سفید دارد */
.pcard-h .thumb{width:88px;height:88px;flex:none;border-radius:var(--r-sm);background:var(--c-surface);border:1px solid var(--c-line-2);overflow:hidden}
.pcard-h .thumb img{width:100%;height:100%;object-fit:contain}
.pcard-h .info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.pcard-h .info .t{font-size:15px;font-weight:500;line-height:1.7}
@media (max-width:560px){.pcard-h .thumb{width:70px;height:70px}}

/* ---------- کارت داخل ریل ---------- */
.rail .pcard{width:230px;min-width:230px}
/* در موبایل عرض کارت طوری است که همیشه بخشی از کارت بعدی دیده شود،
   تا کاربر بفهمد می‌تواند بکشد. در ۳۶۰px: ۱۶۴+۱۶+۱۶۴ = ۳۴۴ > ۳۲۸ عرض مفید. */
@media (max-width:639px){.rail .pcard{width:164px;min-width:164px}}

/* ---------- اسکلت کارت ---------- */
.pcard-skel{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:12px;
}
.pcard-skel .im{aspect-ratio:1/1;border-radius:var(--r-sm);margin-bottom:12px}