@charset "UTF-8";
/* ==========================================================================
   کارت محصول
   سه حالت: قیمت‌دار موجود / قیمت‌دار ناموجود / بدون قیمت (استعلامی)
   حالت سوم در این کاتالوگ رایج‌ترین است چون سایت قدیم قیمت نداشت.
   ========================================================================== */

/* موبایل دقیقاً ۲ ستون (SPEC §۴).
   min-width:0 لازم است چون این گرید معمولاً خودش آیتمِ یک گرید دیگر
   (.coll-layout) است و بدون آن، کمینه‌محتوا ستون والد را باز می‌کند.
   align-items:stretch (پیش‌فرض) + margin-top:auto روی .pcard-price
   ⇒ همهٔ کارت‌های یک ردیف هم‌قد و بلوک قیمت همیشه کف کارت. */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  min-width:0;
}
@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;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  overflow:hidden;
  min-width:0;   /* کارت هرگز نباید ستون گرید را پهن‌تر کند */
  transition:box-shadow var(--t-slow),border-color var(--t-slow),transform var(--t-slow);
  /* رندر تنبل: گرید دسته‌ها گاهی ۴۸ کارت دارد.
     ⚠ مقدار تک‌عددی هم عرض و هم ارتفاع را ادعا می‌کرد و کارتِ خارج از دید
     می‌توانست عرض ستون را باز کند؛ `auto` یعنی «آخرین اندازهٔ واقعی را به یاد
     بسپار» و عدد فقط ارتفاعِ تخمینی است. */
  content-visibility:auto;
  contain-intrinsic-size:auto 340px;
}
@media (hover:hover){
  .pcard:hover{border-color:#D6DEEE;box-shadow:var(--sh-2);transform:translateY(-3px)}
  .pcard:hover .pcard-img img{transform:scale(1.05)}
  .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;background:#fff;
  padding:12px;overflow:hidden;
}
.pcard-img img{
  width:100%;height:100%;object-fit:contain;
  transition:transform var(--t-slow);
}
.pcard-img .ph{ /* جای‌گیر وقتی تصویر ندارد */
  width:100%;height:100%;display:grid;place-items:center;
  background:var(--c-line-2);border-radius:var(--r-sm);color:#C4CBD8;
}
.pcard-img .ph svg{width:44px;height:44px;stroke-width:1.5}

/* برچسب‌های روی تصویر */
.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:3px 9px;border-radius:var(--r-full);
  font-size:11px;font-weight:700;line-height:1.9;color:#fff;
  background:var(--c-ink-2);box-shadow:var(--sh-1);
}
.pcard-flag.new{background:var(--c-primary)}   /* سفید روی آبی ۶٫۶۳:۱ */
.pcard-flag.off{background:var(--c-danger)}    /* سفید روی قرمز ۴٫۷۲:۱ */
/* سفید روی نارنجی فقط ۲٫۶۱:۱ بود؛ متن تیره روی همان نارنجی ۷٫۰۶:۱ است */
.pcard-flag.hot{background:var(--c-accent);color:var(--c-on-accent)}

/* اکشن سریع (علاقه‌مندی/مقایسه) */
.pcard-quick{
  position:absolute;top:10px;inset-inline-end:10px;z-index:2;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.pcard-quick button{
  width:34px;height:34px;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:rgba(255,255,255,.95);border:1px solid var(--c-line);
  color:var(--c-ink-3);box-shadow:var(--sh-1);
  transition:all var(--t-fast);
}
.pcard-quick button svg{width:17px;height:17px;stroke-width:1.75}
.pcard-quick button:hover{color:var(--c-primary);border-color:var(--c-primary)}
.pcard-quick button.is-on{background:var(--c-danger);border-color:var(--c-danger);color:#fff}
/* روی لمسی همیشه دیده شود چون hover نداریم.
   دکمه ۳۴px است تا روی تصویر سنگینی نکند؛ ::before ناحیهٔ لمس را بدون
   تغییر ظاهر به ۴۴px می‌رساند (حداقل هدف لمسی). */
@media (hover:none){
  .pcard-quick{opacity:1;transform:none}
  .pcard-quick button{position:relative}
  .pcard-quick button::before{content:'';position:absolute;inset:-5px}
}

/* بدنه متنی */
.pcard-body{
  display:flex;flex-direction:column;flex:1 1 auto;
  padding:12px 14px 14px;gap:7px;min-height:0;min-width:0;
}
.pcard-brand{
  font-size:11.5px;color:var(--c-ink-3);font-weight:500;
  display:flex;align-items:center;gap:5px;
}
.pcard-brand img{height:14px;width:auto;object-fit:contain;opacity:.85}
.pcard-title{
  font-size:13.5px;font-weight:500;line-height:1.75;color:var(--c-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(1.75em * 2);
}
@media (hover:hover){.pcard-title:hover{color:var(--c-primary)}}
.pcard-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--c-ink-3)}
.pcard-rating{display:inline-flex;align-items:center;gap:3px;color:var(--c-star)}
.pcard-rating svg{width:13px;height:13px}
.pcard-rating b{color:var(--c-ink-2);font-size:11.5px}

/* ---------- بلوک قیمت ----------
   mt-auto تا کارت‌هایی با عنوان یک‌خطی و دوخطی از پایین هم‌تراز بمانند.
   min-width:0 تا قیمتِ nowrap عرض کارت را باز نکند. */
.pcard-price{
  margin-top:auto;
  padding-top:10px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  min-height:52px;min-width:0;
}
.pcard-price-col{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.price-old{
  font-size:12px;color:var(--c-ink-3);text-decoration:line-through;
  text-decoration-color:#C4CBD8;line-height:1.6;
}
.price-now{
  display:flex;align-items:baseline;gap:4px;
  font-size:16px;font-weight:700;color:var(--c-ink);line-height:1.5;
  white-space:nowrap;min-width:0;
}
.price-now .unit{font-size:11.5px;font-weight:400;color:var(--c-ink-3)}
.price-off{
  align-self:flex-start;
  background:var(--c-danger);color:#fff;
  font-size:11.5px;font-weight:700;line-height:1.9;
  padding:2px 8px;border-radius:var(--r-full);
  white-space:nowrap;
}

/* حالت الف: قیمت‌دار و موجود → دکمه دایره‌ای افزودن */
.pcard-add{
  flex:none;width:42px;height:42px;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:var(--c-primary);color:#fff;
  box-shadow:0 4px 12px rgba(var(--c-primary-rgb),.28);
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.pcard-add svg{width:20px;height:20px;stroke-width:1.9}
@media (hover:hover){.pcard-add:hover{background:var(--c-primary-dark);transform:scale(1.07)}}
.pcard-add:active{transform:scale(.95)}
.pcard-add.is-loading{color:transparent;position:relative;pointer-events:none}
.pcard-add.is-loading::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid #fff;border-top-color:transparent;animation:imb-spin .7s linear infinite;
}
.pcard-add.is-done{background:var(--c-success);box-shadow:none}

/* حالت ب: قیمت‌دار ولی ناموجود */
.pcard.is-oos .pcard-img img{filter:grayscale(.85);opacity:.72}
.pcard.is-oos .price-now{color:var(--c-ink-3)}
/* ۴٫۱۳:۱ بود (خاکستری روی خاکستری) → با ink-2 می‌شود ۸٫۹۳:۱ */
.pcard-oos{
  width:100%;text-align:center;
  background:var(--c-line-2);color:var(--c-ink-2);
  font-size:13px;font-weight:500;line-height:1.2;
  min-height:42px;padding:12px;border-radius:var(--r-md);
  border:1px solid var(--c-line);
  display:flex;align-items:center;justify-content:center;
}
.pcard.is-oos .pcard-price{flex-direction:column;align-items:stretch;gap:8px}

/* حالت ج: بدون قیمت → دکمه استعلام قیمت (پرکاربردترین حالت) */
.pcard.is-quote .pcard-price{
  flex-direction:column;align-items:stretch;gap:8px;
}
.pcard-quote-label{
  font-size:12.5px;color:var(--c-ink-3);font-weight:500;
  display:flex;align-items:center;gap:5px;
  min-width:0;overflow:hidden;white-space:nowrap;
}
/* آیکن با --c-accent روی سفید فقط ۲٫۳۶:۱ بود (کف آیکن ۳:۱ است) */
.pcard-quote-label svg{width:14px;height:14px;flex:none;stroke-width:1.75;color:var(--c-accent-ink)}

/* مهم‌ترین CTA کاتالوگ.
   قبل: پس‌زمینه #FFF1E6 (۱٫۰۵:۱ نسبت به کارت سفید) و لبهٔ #FFD9BC (۱٫۳۲:۱)
   ⇒ دکمه عملاً مرزی نداشت و «دیده نمی‌شد». حالا لبه ۳٫۶۳:۱ است.
   width:100% + box-sizing ارثی ⇒ در همهٔ کارت‌ها دقیقاً یک عرض. */
.pcard-quote{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;min-height:44px;padding:0 10px;
  background:var(--c-accent-soft);color:var(--c-accent-ink);
  border:1px solid var(--c-accent-line);border-radius:var(--r-md);
  font-size:13.5px;font-weight:700;line-height:1.2;
  text-align:center;min-width:0;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.pcard-quote > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-quote svg{width:17px;height:17px;flex:none;stroke-width:1.9;color:var(--c-accent-ink);transition:color var(--t-fast)}
@media (hover:hover){
  /* مرکبِ تیره روی نارنجی ۷٫۰۶:۱ — سفید روی همان نارنجی فقط ۲٫۶۱:۱ بود */
  .pcard-quote:hover{background:var(--c-accent);border-color:var(--c-accent-line);color:var(--c-on-accent)}
  .pcard-quote:hover svg{color:var(--c-on-accent)}
}
.pcard-quote:active{transform:scale(.99)}
@media (prefers-reduced-motion:reduce){.pcard-quote:active{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-md);padding:12px;
}
.pcard-h .thumb{width:88px;height:88px;flex:none;border-radius:var(--r-sm);background:#fff;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:14px;font-weight:500;line-height:1.7}
@media (max-width:560px){.pcard-h .thumb{width:70px;height:70px}}

/* ---------- کارت کوچک ریل ---------- */
.rail .pcard{width:230px}
@media (max-width:639px){.rail .pcard{width:165px}}

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