@charset "UTF-8";
/* ==========================================================================
   صفحه محصول
   --------------------------------------------------------------------------
   دسکتاپ: گالری | بلوکِ عنوان و مشخصات | پنلِ خریدِ چسبان
   موبایل : گالری → عنوان → کد مدل → قیمت → موجودی → گارانتی → دکمه → جزئیات

   ترتیبِ موبایل با order روی فلکس گرفته می‌شود، نه با تکرارِ مارک‌آپ؛
   .p-title-block زیر ۸۶۰px به display:contents می‌رود تا فرزندانش مستقیماً
   فرزندِ .product-top شوند و بتوانند بین گالری و پنلِ خرید جابه‌جا شوند.

   ⚠ حالتِ استعلامی (۳۸۵ محصول از ۴۸۵): .quotebox جای .buybox می‌نشیند و هیچ
   عنصرِ قیمتی روی صفحه نیست. .buybox و .quotebox هیچ‌وقت با هم رندر نمی‌شوند.
   ========================================================================== */

.product-top{
  display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr) minmax(0,320px);
  gap:var(--sp-5);align-items:start;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-xl);padding:var(--sp-5);
  box-shadow:var(--sh-1);
}
@media (max-width:1199px){.product-top{grid-template-columns:minmax(0,380px) minmax(0,1fr)}}

/* ---------- گالری ---------- */
.gallery{position:sticky;top:calc(var(--header-h) + 16px);min-width:0}
.gal-main{
  position:relative;aspect-ratio:1/1;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);overflow:hidden;
  display:grid;place-items:center;padding:var(--sp-5);
  cursor:zoom-in;
}
.gal-main img{width:100%;height:100%;object-fit:contain;transition:transform .25s var(--ease)}
/* زوم فقط روی دسکتاپ — روی لمسی حرکت موس نداریم */
@media (hover:hover) and (min-width:861px){
  .gal-main.is-zoom img{transform:scale(2);transform-origin:var(--zx,50%) var(--zy,50%)}
}
@media (hover:none){.gal-main{cursor:default}}

/* دو محصول اصلاً تصویر ندارند و به لوگو fallback می‌شوند؛
   عمداً کوچک و کم‌رنگ می‌شود تا «جای‌گیرِ آگاهانه» به‌نظر برسد نه تصویرِ خراب. */
.gal-main.is-empty{background:var(--c-bg);cursor:default}
.gal-main.is-empty img{width:auto;height:auto;max-width:132px;opacity:.32;filter:grayscale(1)}

.gal-flags{position:absolute;top:12px;inset-inline-start:12px;z-index:2;display:flex;flex-direction:column;gap:6px}
.gal-expand{
  position:absolute;bottom:12px;inset-inline-end:12px;z-index:2;
  width:44px;height:44px;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);
}
.gal-expand svg{width:18px;height:18px}
@media (hover:hover){.gal-expand:hover{color:var(--c-primary);border-color:var(--c-primary)}}

.gal-thumbs{display:flex;gap:9px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;min-width:0}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumb{
  flex:none;width:72px;height:72px;padding:6px;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-sm);overflow:hidden;transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.gal-thumb img{width:100%;height:100%;object-fit:contain}
.gal-thumb.is-active{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.1)}
@media (hover:hover){.gal-thumb:hover{border-color:var(--c-line)}}

/* لایت‌باکس ساده */
.gal-lightbox{
  position:fixed;inset:0;z-index:1200;background:rgba(29,29,27,.92);
  display:none;place-items:center;padding:24px;
}
.gal-lightbox.is-open{display:grid}
.gal-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:var(--r-md);background:var(--c-surface)}
.gal-lightbox .close{
  position:absolute;top:20px;inset-inline-end:20px;
  width:44px;height:44px;border-radius:var(--r-full);
  display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;
}

/* ---------- بلوک عنوان ---------- */
.p-title-block{display:flex;flex-direction:column;gap:12px;min-width:0}
.p-eyebrow{font-size:15px;color:var(--c-ink-3)}
.p-eyebrow a{color:var(--c-ink-2)}
@media (hover:hover){.p-eyebrow a:hover{color:var(--c-primary)}}

.p-title{font-size:clamp(20px,2.2vw,26px);line-height:1.6;overflow-wrap:anywhere}
.p-title-en{font-size:15px;color:var(--c-ink-3);direction:ltr;text-align:start;unicode-bidi:isolate}
.p-metaline{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:12px;border-block:1px solid var(--c-line-2);
  font-size:15px;color:var(--c-ink-3);
}
.p-metaline .item{display:inline-flex;align-items:center;gap:6px}
.p-metaline svg{width:16px;height:16px;stroke-width:1.75}
.p-metaline a{color:var(--c-ink-2)}
@media (hover:hover){.p-metaline a:hover{color:var(--c-primary)}}

.p-highlights{display:flex;flex-direction:column;gap:12px;min-width:0}
.p-highlights .lead{font-size:15px;line-height:2;color:var(--c-ink-2)}

/* مشخصات کلیدی کنار عنوان */
.p-keyspecs{display:grid;gap:9px}
.p-keyspecs li{display:flex;gap:9px;font-size:15px;color:var(--c-ink-2);line-height:1.85;min-width:0}
.p-keyspecs li::before{
  content:'';width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--c-primary);margin-top:.72em;
}
.p-keyspecs .k{color:var(--c-ink-3);flex:none}

/* ---------- پنل خرید (قیمت‌دار) ---------- */
.buybox{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:var(--sp-4);
  display:flex;flex-direction:column;gap:14px;min-width:0;
  position:sticky;top:calc(var(--header-h) + 16px);
  box-shadow:var(--sh-1);
}
@media (max-width:1199px){.buybox{position:static;grid-column:1/-1;box-shadow:none;background:var(--c-bg)}}
.buybox-seller{
  display:flex;align-items:flex-start;gap:9px;
  font-size:15px;color:var(--c-ink-3);line-height:1.8;
  padding-bottom:12px;border-bottom:1px solid var(--c-line-2);
}
.buybox-seller svg{width:18px;height:18px;flex:none;margin-top:.35em;color:var(--c-success);stroke-width:1.75}

.p-stock{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:500}
.p-stock.in{color:var(--c-success)}
.p-stock.low{color:var(--c-warn)}
.p-stock.out{color:var(--c-ink-3)}
.p-stock::before{content:'';width:8px;height:8px;flex:none;border-radius:50%;background:currentColor}

/* قیمت */
.pricebox{display:flex;flex-direction:column;gap:6px;min-width:0}
.pricebox .old{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--c-ink-3);flex-wrap:wrap}
.pricebox .old s{text-decoration-color:var(--c-ink-3)}
.pricebox .off{
  background:var(--c-primary);color:#fff;font-size:15px;font-weight:700;
  padding:2px 9px;border-radius:var(--r-full);line-height:1.9;
}
.pricebox .now{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  font-size:27px;font-weight:700;color:var(--c-ink);line-height:1.4;
}
.pricebox .now .unit{font-size:15px;font-weight:400;color:var(--c-ink-2)}
.pricebox .save{font-size:15px;color:var(--c-success)}

/* شمارنده تعداد */
.qty{
  display:inline-flex;align-items:center;flex:none;
  border:1px solid #DADCE0;border-radius:var(--r-sm);
  background:var(--c-surface);overflow:hidden;height:48px;
}
.qty button{
  width:44px;height:100%;display:grid;place-items:center;
  color:var(--c-ink-2);transition:background var(--t-fast),color var(--t-fast);
}
/* قرمزِ تیره چون روی خاکستریِ --c-line-2 نشسته: قرمزِ روشن آنجا ۴٫۱۲:۱ می‌دهد */
@media (hover:hover){.qty button:hover{background:var(--c-line-2);color:var(--c-primary-dark)}}
.qty button:disabled{opacity:.4;pointer-events:none}
.qty button svg{width:17px;height:17px;stroke-width:2}
.qty input{
  width:50px;height:100%;min-height:0;border:0;text-align:center;
  font-size:15px;font-weight:700;background:transparent;border-radius:0;
  border-inline:1px solid var(--c-line);
}
.qty input:focus{box-shadow:none;border-color:var(--c-line)}

/* ⚠ شمارنده و دکمه عمداً در دو سطر‌اند، نه یک سطر.
   ستونِ پنلِ خرید در دسکتاپ حداکثر ۳۲۰px است و با پدینگِ ۱۶ و کادر فقط ۲۸۶px
   محتوا می‌ماند. .qty عرضِ ثابتِ ۱۴۰px دارد (۴۴+۵۰+۴۴ و کادر) و با gap تنها
   ۱۳۶px برای دکمه باقی می‌گذارد، در حالی‌که «افزودن به سبد خرید» با آیکون و
   پدینگِ btn-lg حدود ۲۶۶px می‌خواهد. (کفِ ماجرا: .btn در app.css آن‌موقع سراسری
   white-space:nowrap بود و متن را از لبه بیرون می‌داد؛ آن ریشه حالا در app.css
   اصلاح شده، ولی این دو-سطره‌کردن هنوز درست است چون ۱۳۶px برای این برچسب
   کم است و شکستنِ دکمه در یک سطرِ باریک زشت‌تر از سطرِ اختصاصی است.) با flex-basis:100%
   دکمه به سطرِ خودش می‌رود و تمام‌عرض می‌شود؛ شمارنده اندازهٔ طبیعی‌اش را
   نگه می‌دارد (flex:none در قاعدهٔ .qty بالاتر). */
.buybox-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;min-width:0}
.buybox-row .btn{flex:1 1 100%;min-width:0}

/* شبکهٔ ایمنیِ متنِ دکمه‌ها در سه ناحیهٔ تنگِ این صفحه (پنلِ خرید، پنلِ استعلام،
   نوارِ چسبانِ موبایل). از وقتی .btn در app.css خودش white-space:normal شد این
   قاعده تکراری است و عمداً نگه داشته شده: اگر روزی کسی nowrap را در app.css
   برگرداند، این سه ناحیه — که تنگ‌ترین جاهای سایت‌اند — نمی‌شکنند.
   line-height:1.25 عمدی است: دو سطرِ ۱۵px می‌شود ۳۸px و هنوز زیرِ min-height
   دکمه (۴۶px) جا می‌شود، پس هدفِ لمس هیچ‌وقت زیر ۴۴px نمی‌افتد. */
.buybox .btn,
.quotebox .btn,
.sticky-buy .btn{white-space:normal;line-height:1.25}

/* فرم اطلاع از موجودی — حالتِ سومِ محصول */
#stockAlert{display:flex;flex-direction:column;gap:6px}

/* ---------- پنل استعلام (بدون قیمت) ----------
   خنثی و روشن؛ هیچ رنگِ دومی در کار نیست و هیچ عددی هم نمایش داده نمی‌شود. */
.quotebox{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);padding:var(--sp-4);
  display:flex;flex-direction:column;gap:13px;min-width:0;
  position:sticky;top:calc(var(--header-h) + 16px);
  box-shadow:var(--sh-1);
}
@media (max-width:1199px){.quotebox{position:static;grid-column:1/-1;box-shadow:none;background:var(--c-bg)}}
.quotebox .qtitle{
  display:flex;align-items:center;gap:9px;
  font-size:17px;font-weight:700;color:var(--c-ink);
}
.quotebox .qtitle svg{width:20px;height:20px;flex:none;stroke-width:1.75;color:var(--c-primary)}
.quotebox p{font-size:15px;color:var(--c-ink-2);line-height:1.95}
.quotebox .qphone{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;border-radius:var(--r-sm);
  background:var(--c-primary);color:#fff;border:1px solid var(--c-primary);
  font-size:18px;font-weight:700;direction:ltr;
  transition:background var(--t-fast),border-color var(--t-fast);
}
@media (hover:hover){.quotebox .qphone:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark)}}
.quotebox .qphone svg{width:20px;height:20px;flex:none;stroke-width:1.9}
.quotebox .qnote{
  display:flex;align-items:flex-start;gap:8px;
  font-size:15px;color:var(--c-ink-3);line-height:1.8;
}
.quotebox .qnote svg{width:17px;height:17px;flex:none;margin-top:.3em;color:var(--c-success);stroke-width:1.75}

/* مزیت‌ها زیر پنل خرید */
.buy-perks{display:grid;gap:11px;padding-top:14px;border-top:1px solid var(--c-line-2)}
.buy-perks li{display:flex;align-items:flex-start;gap:9px;font-size:15px;color:var(--c-ink-2);line-height:1.8;min-width:0}
.buy-perks svg{width:18px;height:18px;flex:none;margin-top:.28em;color:var(--c-ink-3);stroke-width:1.6}
.buy-perks .tel-link{direction:ltr;unicode-bidi:isolate;font-weight:700}
@media (hover:hover){.buy-perks .tel-link:hover{color:var(--c-primary)}}

/* ==========================================================================
   ترتیبِ موبایل: گالری → عنوان → مدل → قیمت → موجودی → گارانتی → دکمه → جزئیات
   ========================================================================== */
@media (max-width:860px){
  .product-top{
    display:flex;flex-direction:column;gap:var(--sp-4);
    padding:var(--sp-4);border-radius:var(--r-lg);
  }
  .gallery{position:static;order:1}

  /* فرزندانِ بلوکِ عنوان مستقیماً فرزندِ .product-top می‌شوند تا بتوانند
     دور پنلِ خرید جابه‌جا شوند. */
  .p-title-block{display:contents}
  .p-eyebrow{order:2}
  .p-title{order:3}
  .p-title-en{order:4}
  .buybox,.quotebox{order:5}
  .p-metaline{order:6;margin-top:var(--sp-2)}
  .p-highlights{order:7}

  /* داخلِ پنلِ خرید: قیمت → موجودی → گارانتی → دکمه */
  .buybox{display:flex;flex-direction:column}
  .buybox > .buybox-seller{order:1}
  .buybox > .pricebox{order:2}
  .buybox > .p-stock{order:3}
  .buybox > .buy-perks{
    order:4;padding-top:0;padding-bottom:14px;
    border-top:0;border-bottom:1px solid var(--c-line-2);
  }
  .buybox > .buybox-row,
  .buybox > #stockAlert{order:5}
  .buybox > .rev-actions{order:6}

  /* در حالتِ استعلامی هم گارانتی/ساعتِ کاری قبل از دکمهٔ تماس بیاید */
  .quotebox{display:flex;flex-direction:column}
  .quotebox > .qtitle{order:1}
  .quotebox > p{order:2}
  .quotebox > .qnote{order:3}
  .quotebox > .qphone{order:4}
  .quotebox > .btn{order:5}
}

/* ---------- تب‌های محتوا ---------- */
.p-tabs{
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:6px;margin:var(--sp-5) 0 var(--sp-4);
  position:sticky;top:var(--header-h);z-index:30;
}
.p-tabs::-webkit-scrollbar{display:none}
.p-tabs a{
  flex:none;min-height:44px;display:inline-flex;align-items:center;
  padding:0 18px;border-radius:var(--r-sm);
  font-size:15px;font-weight:500;color:var(--c-ink-2);white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast);
}
.p-tabs a.is-active{background:var(--c-primary-soft);color:var(--c-primary-dark);font-weight:700}
@media (hover:hover){.p-tabs a:hover{background:var(--c-line-2)}}

.p-section{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-xl);padding:var(--sp-5) var(--sp-6);
  margin-bottom:var(--sp-4);min-width:0;
}
.p-section > h2{
  font-size:20px;margin-bottom:var(--sp-4);
  padding-bottom:12px;border-bottom:1px solid var(--c-line-2);
}
@media (max-width:639px){.p-section{padding:var(--sp-4);border-radius:var(--r-lg)}}

/* حالتِ خالیِ آگاهانه — نظرات و پرسش‌ها برای کاتالوگِ مهاجرت‌شده خالی‌اند */
.p-empty{
  display:flex;align-items:center;gap:10px;
  padding:var(--sp-4);border:1px dashed var(--c-line);
  border-radius:var(--r-md);background:var(--c-bg);
  font-size:15px;color:var(--c-ink-2);line-height:1.8;
}
.p-empty svg{width:20px;height:20px;flex:none;color:var(--c-ink-3);stroke-width:1.6}

/* ---------- جدول مشخصات ---------- */
.specs{display:grid;gap:0;min-width:0}
.specs-group + .specs-group{margin-top:var(--sp-5)}
.specs-group h3{
  font-size:15px;color:var(--c-primary-dark);background:var(--c-primary-soft);
  padding:9px 14px;border-radius:var(--r-sm);margin-bottom:6px;
}
.spec-row{
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;
  padding:11px 14px;border-bottom:1px solid var(--c-line-2);
  font-size:15px;line-height:1.9;min-width:0;
}
.spec-row:last-child{border-bottom:0}
.spec-row .k{color:var(--c-ink-3);font-weight:500;min-width:0}
.spec-row .v{color:var(--c-ink);min-width:0;overflow-wrap:anywhere}
@media (max-width:639px){
  .spec-row{grid-template-columns:minmax(0,1fr);gap:3px;padding:10px 12px}
  .spec-row .k{font-size:15px}
}

/* ---------- توضیحات و آکاردئون ---------- */
.p-desc.is-clamped{max-height:640px;overflow:hidden;position:relative}
.p-desc.is-clamped.is-open{max-height:none;overflow:visible}
.p-desc.is-clamped:not(.is-open)::after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:110px;pointer-events:none;
  background:linear-gradient(to top,var(--c-surface),rgba(255,255,255,0));
}
.p-desc-more{display:block;margin:14px auto 0}

/* آکاردئون به app.css منتقل شد — در صفحه دسته و برند هم لازم است
   و آن صفحات این فایل را لود نمی‌کنند. اینجا فقط تیتر درشت‌تر می‌شود. */
.p-section .acc-head{font-size:15px;font-weight:700}

/* ---------- نظرات ---------- */
.rev-summary{
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:var(--sp-5);
  align-items:center;padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--c-line-2);margin-bottom:var(--sp-5);
}
.rev-score{text-align:center}
.rev-score .n{font-size:42px;font-weight:700;line-height:1.2}
.rev-score .stars{justify-content:center;margin:6px 0}
.rev-score small{color:var(--c-ink-3);font-size:15px}
.rev-bars{display:grid;gap:7px;min-width:0}
.rev-bar{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--c-ink-3);min-width:0}
.rev-bar .lbl{flex:none;width:44px;display:flex;align-items:center;gap:3px}
.rev-bar .lbl svg{width:12px;height:12px;color:var(--c-star)}
.rev-bar .track{flex:1 1 auto;min-width:0;height:6px;border-radius:var(--r-full);background:var(--c-line-2);overflow:hidden}
.rev-bar .rating-bar-fill{height:100%;background:var(--c-star);border-radius:var(--r-full)}
.rev-bar .pct{flex:none;width:46px;text-align:end}
@media (max-width:860px){.rev-summary{grid-template-columns:minmax(0,1fr);text-align:center}}

.rev-list{display:grid;gap:14px}
.rev-item{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:16px;min-width:0}
.rev-item-head{display:flex;align-items:center;gap:11px;margin-bottom:10px;flex-wrap:wrap}
.rev-avatar{
  width:38px;height:38px;border-radius:var(--r-full);flex:none;
  display:grid;place-items:center;background:var(--c-primary-soft);
  color:var(--c-primary-dark);font-weight:700;font-size:15px;
}
.rev-item-head .nm{font-size:15px;font-weight:700}
.rev-item-head time{font-size:15px;color:var(--c-ink-3)}
.rev-item-head .stars{margin-inline-start:auto}
.rev-body{font-size:15px;color:var(--c-ink-2);line-height:2;overflow-wrap:anywhere}
.rev-pros{display:grid;gap:6px;margin-top:12px}
.rev-pros li{display:flex;align-items:flex-start;gap:7px;font-size:15px;line-height:1.8}
.rev-pros li svg{width:15px;height:15px;flex:none;margin-top:5px}
.rev-pros .pro{color:var(--c-success)}
.rev-pros .con{color:var(--c-danger)}
.rev-actions{display:flex;gap:14px;margin-top:12px;font-size:15px;color:var(--c-ink-3);flex-wrap:wrap}
.rev-actions button,.rev-actions a{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;color:inherit;
}
@media (hover:hover){.rev-actions button:hover,.rev-actions a:hover{color:var(--c-primary)}}
.rev-actions svg{width:16px;height:16px}
.rev-reply{
  margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--c-line-2);font-size:15px;color:var(--c-ink-2);
  border-inline-start:3px solid var(--c-primary);
}

/* فرم نظر */
.rev-form{background:var(--c-bg);border-radius:var(--r-lg);padding:var(--sp-5);margin-top:var(--sp-5);min-width:0}
@media (max-width:639px){.rev-form{padding:var(--sp-4)}}
.star-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.star-input input{position:absolute;opacity:0;width:0;height:0}
.star-input label{cursor:pointer;color:var(--c-line);transition:color var(--t-fast);padding:4px}
.star-input label svg{width:28px;height:28px}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label{color:var(--c-star)}
.star-input input:focus-visible + label{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:4px}

/* ---------- پرسش و پاسخ ---------- */
.qa-list{display:grid;gap:12px}
.qa-item{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:15px;min-width:0}
.qa-q,.qa-a{display:flex;gap:11px;font-size:15px;line-height:2;min-width:0}
.qa-q > div,.qa-a > div{min-width:0;overflow-wrap:anywhere}
.qa-a{margin-top:12px;padding-top:12px;border-top:1px solid var(--c-line-2)}
.qa-badge{
  width:28px;height:28px;flex:none;border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:15px;font-weight:700;
}
.qa-q .qa-badge{background:var(--c-primary-soft);color:var(--c-primary-dark)}
.qa-a .qa-badge{background:var(--c-success-soft);color:var(--c-success)}
.qa-meta{font-size:15px;color:var(--c-ink-3);margin-top:4px}

/* ---------- ریل محصولات مرتبط ---------- */
.related-rail{
  display:flex;gap:16px;overflow-x:auto;min-width:0;max-width:100%;
  scroll-snap-type:x proximity;padding-bottom:8px;
  scrollbar-width:thin;
}
.related-rail::-webkit-scrollbar{height:6px}
.related-rail::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:var(--r-full)}
.related-rail > .pcard{flex:none;width:230px;scroll-snap-align:start}
@media (max-width:639px){.related-rail > .pcard{width:172px}}

/* ==========================================================================
   نوار خریدِ چسبانِ موبایل
   --------------------------------------------------------------------------
   ⚠ نباید روی .mobile-bar (نوارِ ناوبریِ پایین، position:fixed، inset-block-end:0)
   بیفتد. nav.css برای آن نوار ۶۲px به body پدینگ می‌دهد؛ همان عدد را مبنا
   می‌گیریم و این نوار را دقیقاً بالای آن می‌نشانیم. برای پنهان‌شدن هم باید
   به‌اندازهٔ «ارتفاعِ خودش + همان ۶۲px» پایین برود، وگرنه نصفه‌نیمه روی
   ناوبری دیده می‌شود.
   کلاسِ is-visible را app.js با IntersectionObserver روی .buybox/.quotebox
   می‌گذارد؛ نام کلاس‌ها و ساختار دست‌نخورده مانده است.
   ========================================================================== */
.sticky-buy{
  /* --mbar-h عمداً اینجا دوباره تعریف نمی‌شود؛ از :root در nav.css می‌آید.
     تعریفِ محلی یعنی دو منبعِ حقیقت برای یک عدد: اگر کسی ارتفاعِ نوارِ پایین
     را در nav.css عوض کند، این نوار همان‌جا می‌ماند و رویش می‌افتد. */
  --sb-safe:env(safe-area-inset-bottom,0px);
  display:none;
  position:fixed;inset-inline:0;
  inset-block-end:calc(var(--mbar-h) + var(--sb-safe));
  z-index:890;
  background:var(--c-surface);border-top:1px solid var(--c-line);
  box-shadow:0 -2px 16px rgba(0,0,0,.06);
  padding:10px var(--pad-x);
  transform:translateY(calc(100% + var(--mbar-h) + var(--sb-safe)));
  transition:transform .25s var(--ease);
}
.sticky-buy.is-visible{transform:translateY(0)}
.sticky-buy-inner{display:flex;align-items:center;gap:10px;min-width:0}
/* قیمت در یک سطر می‌ماند تا نوار بلند نشود و ارتفاعش قابل پیش‌بینی بماند.
   flex:none هم عمدی است: عدد قیمت هرگز نباید کوچک یا بریده شود. */
.sticky-buy .sb-price{display:flex;align-items:baseline;gap:5px;flex:none;min-width:0}
.sticky-buy .sb-price .now{font-size:19px;font-weight:700;white-space:nowrap;color:var(--c-ink)}
.sticky-buy .sb-price .unit{font-size:15px;color:var(--c-ink-3);white-space:nowrap}
/* در ۳۶۰px بعد از قیمتِ نُه‌رقمی چیزی حدود ۱۷۰px برای دکمه می‌ماند؛ پدینگِ
   پیش‌فرضِ ۲۰px دو طرفِ .btn همان‌جا کم می‌آورد. اینجا کوتاه‌ترش می‌کنیم تا
   «افزودن به سبد» در یک سطر جا شود و شکستنِ خط فقط برای برچسبِ بلندترِ
   حالتِ ناموجود («ناموجود — اطلاع از موجودی») لازم بیفتد. */
.sticky-buy .btn{flex:1 1 auto;min-width:0;padding-inline:14px}

/* فاصلهٔ امن تا فوترِ صفحه زیرِ نوار پنهان نشود (فقط در همان بازه رندر می‌شود) */
.sticky-buy-spacer{display:none}

@media (max-width:900px){
  .sticky-buy{display:block}
  .sticky-buy-spacer{display:block;height:76px}
  /* دکمهٔ «بازگشت به بالا» وقتی نوار خرید باز است باید از رویش رد شود:
     ارتفاع نوار پایینِ موبایل + ارتفاع نوار خرید. عمداً !important ندارد —
     تخصصِ :has (۰,۳,۱) از قاعدهٔ .to-top در mobile.css (۰,۱,۰) بالاتر است. */
  body:has(.sticky-buy.is-visible) .to-top{
    inset-block-end:calc(var(--mbar-h,62px) + 80px + env(safe-area-inset-bottom,0px));
  }
}
/* گران‌ترین کالای کاتالوگ ۴۱۰٬۰۰۰٬۰۰۰ تومان است، یعنی نُه رقم و دو جداکننده.
   در ۳۶۰px همین عدد با «تومان» حدود ۱۶۸px از ۳۲۸px عرضِ نوار را می‌گیرد و چون
   .sb-price عمداً flex:none است، کمبودِ فضا تمامش می‌افتد گردنِ دکمه و
   «افزودن به سبد» می‌شکست. دو پیکسل از تیترِ قیمت و چهار پیکسل از پدینگِ نوار
   می‌گیریم تا دکمه در یک سطر جا شود؛ ۱۷px همچنان بالای کفِ ۱۵px پروژه است و
   قیمت هم هرگز بریده یا کوچک‌تر از خوانا نمی‌شود. */
@media (max-width:400px){
  .sticky-buy{padding-inline:12px}
  .sticky-buy .sb-price .now{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .sticky-buy{transition:none}
}

/* ---------- مقایسه ---------- */
.compare-table{overflow-x:auto;min-width:0}
.compare-table table{min-width:760px}
.compare-table th{position:sticky;top:0;background:var(--c-surface);z-index:2}
.compare-table td:first-child,.compare-table th:first-child{
  position:sticky;inset-inline-start:0;background:var(--c-surface);z-index:1;
  border-inline-end:1px solid var(--c-line);
}