/* ووموو — فهرست محصولات
 *
 * محصول داخل کادر یا کارت نمی‌نشیند. عکس روی یک «ورق» می‌آید —
 * همان تیمار گالری صفحه محصول: زمینه‌ی --band، شعاع ۱۸، یک موی
 * خط دور. متن زیرِ ورق است، بیرون از آن، ریز و کنار.
 *
 * شیشه فقط برای کنترل است، پس چیپ‌های فیلتر شیشه‌ای‌اند و ورق‌ها
 * نه. رنگ تأکیدی هم فقط روی چیپ فعال می‌نشیند — «گزینه فعال»،
 * یکی از همان سه جای مجاز.
 */

.list{padding:var(--s10) clamp(var(--s5),5vw,var(--s9)) var(--s9)}

.list-head{max-width:62ch;margin-inline:auto;text-align:center}
.list-head .page-lede{margin-inline:auto}

/* ————————————————————————————— چیپ‌های فیلتر */

.list-filters{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s2);
  margin:0 auto var(--s8);
  max-width:76ch}

.chip{
  display:inline-block;
  padding:var(--s2) var(--s4);
  border:var(--hair) solid var(--gline);
  border-radius:var(--r-full);
  color:var(--muted);
  font-size:var(--fs-body-s);line-height:1.7;
  white-space:nowrap;
  transition:color var(--t-fast) var(--e),
             border-color var(--t-fast) var(--e),
             background-color var(--t-fast) var(--e)}

.chip:hover{color:var(--ink);border-color:var(--ink)}

/* گزینه فعال — تنها جای مجاز رنگ تأکیدی در این صفحه */
.chip.on{
  background:var(--signal);border-color:var(--signal);
  color:var(--on-signal)}
.chip.on:hover{color:var(--on-signal)}

/* روی موبایل ردیف می‌ماند و کنار می‌رود، نه اینکه سه سطر شود */
@media (max-width:640px){
  .list-filters{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:var(--s2);

    /* نوار مخفی بود و هیچ نشانه‌ای نداشت که ادامه دارد: آخرین
       چیپ درست لبه‌ی صفحه تمام می‌شد و مثل پایانِ فهرست
       دیده می‌شد. محو‌شدنِ لبه می‌گوید چیزی آن‌طرف هست.
       ماسک روی محورِ افقی است و در راست‌چین هم درست کار
       می‌کند چون به لبه‌ی فیزیکی کار دارد، نه منطقی. */
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 var(--s5),
      #000 calc(100% - var(--s5)),transparent 100%);
    mask-image:linear-gradient(to left,transparent 0,#000 var(--s5),
      #000 calc(100% - var(--s5)),transparent 100%);

    /* هر چیپ روی لبه می‌ایستد، نه نصفه */
    scroll-snap-type:x proximity;
    scroll-padding-inline:var(--s4)}
  .list-filters::-webkit-scrollbar{display:none}
  .list-filters .chip{scroll-snap-align:start}

  /* اولین و آخرین چیپ نباید زیر محو‌شدگی گم شوند */
  .list-filters::before,
  .list-filters::after{content:"";flex:0 0 var(--s2)}
}

/* ————————————————————————————— شبکه */

.list-grid{
  display:grid;
  /* سه تغییر که با هم معنی دارند، برای حالتی که تعداد محصول
     از تعداد ستون کمتر است — یعنی حالتِ همیشگیِ سایت تا وقتی
     کاتالوگ پر شود.

     auto-fill ستون‌های خالی را نگه می‌داشت: با دو محصول روی
     نمایشگر پهن پنج ستون ساخته می‌شد، دو کارت به یک لبه
     می‌چسبیدند و سه ستون خالی می‌ماند.

     auto-fit تنها، مشکل را برعکس می‌کرد: ستون خالی جمع
     می‌شود ولی 1fr باقی‌مانده را بین همان دو کارت پخش
     می‌کند و هر کارت نصف صفحه می‌شود.

     پس سقفِ ستون از 1fr به یک عدد ثابت تبدیل شد تا کارت از
     اندازه‌ی طبیعی‌اش بزرگ‌تر نشود، و justify-content
     مجموعه‌ی ستون‌ها را وسط می‌آورد تا فضای اضافه دو طرف
     تقسیم شود، نه یک طرف. */
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),320px));
  justify-content:center;
  gap:var(--s7) var(--s5)}

.tile{display:block}

/* ورق: نور پشت محصول، نه کارت دور محصول */
.tile-shot{
  position:relative;display:block;
  aspect-ratio:1/1;
  background:var(--band);
  border-radius:var(--r-card);
  overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 var(--hair) var(--gline)}

.tile-shot .tile-img{
  width:100%;height:100%;max-width:none;display:block;
  object-fit:cover;object-position:center;
  transition:transform var(--t-mid) var(--e);
  -webkit-user-drag:none;user-select:none}

/* بدون سایه سخت: فقط خودِ عکس کمی جلو می‌آید */
.tile:hover .tile-shot .tile-img{transform:scale(1.04)}

/* ورقِ بی‌عکس — کد وسطش می‌ماند تا قاب خالی گنگ نباشد */
.tile-blank{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center}

.tile-meta{
  display:flex;flex-direction:column;gap:var(--s1);
  margin-top:var(--s3)}

.tile-name{color:var(--ink);font-size:var(--fs-body);line-height:1.7}

.tile-foot{
  display:flex;align-items:baseline;gap:var(--s3);
  color:var(--muted);font-size:var(--fs-body-s)}
.tile-foot .price{color:var(--muted)}
.tile-foot del{opacity:.6}
.tile-foot ins{text-decoration:none;color:var(--ink)}

/* بازه‌ی قیمتِ محصول متغیر را ووکامرس این‌طور می‌سازد:
     <bdi>۱٬۹۰۰٬۰۰۰ تومان</bdi> – <bdi>۳٬۸۰۰٬۰۰۰ تومان</bdi>
   روی کارتِ باریکِ موبایل، شکستن می‌توانست وسطِ یک عدد بیفتد یا
   خط دوم را با «–» شروع کند. هر عدد با واحدش یک تکه‌ی نشکستنی
   می‌شود؛ شکستن فقط اجازه دارد کنارِ خط تیره اتفاق بیفتد.
   isolate هم لازم است تا عددِ لاتین جهتِ جمله‌ی فارسی را
   به‌هم نریزد. */
/* دو بار سلکتور را اشتباه زدم و هر دو بار به هیچ عنصری نخورد:
   اول .tile-foot .price (کلاسِ واقعی tile-price است) و بعد
   .tile-price bdi (این نصبِ ووکامرس اصلاً bdi نمی‌سازد).
   خروجی واقعیِ get_price_html اینجا این است:
     <span class="woocommerce-Price-amount amount">
       <span class="woocommerce-Price-currencySymbol">تومان</span>۵٬۹۰۰٬۰۰۰
     </span> – <span …>…</span>
   پس هر «مبلغ» یک تکه‌ی نشکستنی می‌شود و شکستن فقط کنارِ خط
   تیره اجازه دارد. isolate هم عدد لاتین را از جهتِ جمله‌ی
   فارسی جدا نگه می‌دارد. */
.tile-price .woocommerce-Price-amount{unicode-bidi:isolate;white-space:nowrap}

/* رنگ تأکیدی روی متن ممنوع است (هویت بصری §۲) — پس هاور
   لینک با خط زیر مشخص می‌شود، نه با رنگ */
.tile:hover .tile-name{text-decoration:underline;text-underline-offset:4px}

.tile-flag{margin-inline-start:auto}

.list-empty{color:var(--muted);text-align:center;margin-top:var(--s8)}

/* راهِ بیرونِ حالت خالی زیر همان جمله می‌نشیند و با آن هم‌تراز
   می‌شود. .page-outs به‌طور پیش‌فرض از شروع می‌چیند — که در ۴۰۴
   و سبد خالی درست است، چون آنجا متن هم راست‌چین است — ولی اینجا
   جمله وسط‌چین است و لینکِ کنارافتاده از آن جدا به نظر می‌رسید. */
.list-empty + .page-outs{justify-content:center;margin-top:var(--s4)}

.list .pagination{display:flex;justify-content:center}

@media (max-width:640px){
  .list-grid{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s3)}
}