/* =====================================================================
   صفحه‌ی فروشگاه و آرشیو دسته‌ها
   ---------------------------------------------------------------------
   کارت محصول از اسنیپت صفحه اصلی (.ssh-card) می‌آید و اینجا بازتعریف
   نمی‌شود — یک مالک برای هر ناحیه.
   والدِ این بلوک ممکن است flex باشد؛ به همین دلیل روی هر آیتمِ گرید
   min-width:0 گذاشته شده تا ستون‌ها جمع نشوند.
   ===================================================================== */

.ssp{
  display:block; width:100%; min-width:0;
  margin-block:0 var(--ssh-gap,56px);
}
.ssp *{box-sizing:border-box}

/* ---------- ۱ — عنوان و مسیر ---------- */
.ssp-top{margin-bottom:22px}
.ssp-crumb{font-size:12.5px;color:var(--muted);display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ssp-crumb a{color:var(--muted);text-decoration:none}
.ssp-crumb a:hover{color:var(--c)}
.ssp-crumb-cur{color:var(--label)}
.ssp-title-row{display:flex;align-items:baseline;gap:12px}
.ssp-title{font-size:26px;font-weight:800;margin:0;color:var(--ink);line-height:1.4}
.ssp-count{font-size:13px;color:var(--muted);font-weight:600}

/* ---------- ۲ — نوار زیرشاخه‌ها ---------- */
.ssp-strip{
  display:flex;gap:18px;overflow-x:auto;padding-bottom:6px;margin-bottom:26px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ssp-strip::-webkit-scrollbar{display:none}
.ssp-chipcat{
  flex:0 0 auto;width:82px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:var(--label);
}
.ssp-chipcat-img{
  width:72px;height:72px;border-radius:999px;overflow:hidden;background:var(--soft);
  display:block;border:2px solid transparent;
  box-shadow:0 0 0 0 var(--c);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.ssp-chipcat-img img{width:100%;height:100%;object-fit:cover;display:block}
.ssp-chipcat:hover .ssp-chipcat-img,
.ssp-chipcat.is-cur .ssp-chipcat-img{border-color:#fff;box-shadow:0 0 0 2px var(--c)}
.ssp-chipcat-t{font-size:12px;font-weight:600;text-align:center;line-height:1.5;transition:color .15s var(--ease)}
.ssp-chipcat:hover .ssp-chipcat-t,
.ssp-chipcat.is-cur .ssp-chipcat-t{color:var(--c)}

/* ---------- ۳ — نوار چسبانِ موبایل ---------- */
.ssp-mbar{display:none}

/* ---------- بدنه‌ی دو ستونه ---------- */
/* سایدبار از ۲۶۴ به ۲۳۶ و فاصله از ۴۰ به ۲۸ آمد تا کارت‌ها پهن‌تر شوند:
   در ۱۴۴۰px عرض کارت از ۲۱۹ به ۲۴۰ رسید، بدون کم‌کردن تعداد ستون. */
.ssp-body{display:grid;grid-template-columns:236px minmax(0,1fr);gap:28px;width:100%;min-width:0;align-items:start}
.ssp-main{min-width:0;display:flex;flex-direction:column;gap:20px}

/* روی دسکتاپ پوسته‌ی شیت وجود ندارد و سایدبار مستقیم آیتم گرید می‌شود */
.ssp-sheet,.ssp-sheet-in{display:contents}
.ssp-sheet-head,.ssp-sheet-foot{display:none}
/* شیتِ مرتب‌سازی محتوای مستقل دارد؛ با display:contents لینک‌هایش
   به‌صورت متنِ لخت روی صفحه می‌افتادند. روی دسکتاپ کلاً حذف. */
.ssp .ssp-sheet-sort{display:none}

/* ---------- ۴ — سایدبار فیلترها ---------- */
.ssp-side{position:sticky;top:96px;min-width:0;display:flex;flex-direction:column}
.ssp-side-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.ssp-side-head h2{font-size:17px;font-weight:800;margin:0;color:var(--ink)}
.ssp-clear{font-size:12.5px;color:var(--muted);text-decoration:none}
.ssp-clear:hover{color:var(--c)}

.ssp-fg{border-bottom:1px solid var(--line)}
.ssp-fg > summary{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;list-style:none;padding:16px 0;
  font-size:14.5px;font-weight:700;color:var(--ink);
}
.ssp-fg > summary::-webkit-details-marker{display:none}
.ssp-chev{
  /* فقط خواص فیزیکی — در RTL مقدارِ inline-end روی لبه‌ی چپ می‌نشیند و
     فلش به‌جای پایین، به پهلو نگاه می‌کند (اندازه‌گیری‌شده). */
  width:9px;height:9px;flex:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  border-top:0;border-left:0;
  transform:rotate(45deg);margin-top:-4px;
  transition:transform .25s var(--ease);
}
.ssp-fg[open] > summary .ssp-chev,
.ssp-seo[open] > summary .ssp-chev{transform:rotate(-135deg);margin-top:3px}
.ssp-fg-b{padding-bottom:20px}

/* سایز — چیپ، نه چک‌باکس */
.ssp-sizes{display:flex;flex-wrap:wrap;gap:6px}
.ssp-size{
  /* سایدبار که باریک شد، چهار چیپ در یک ردیف جا نمی‌شدند و XXXL
     می‌افتاد خط بعد. اندازه‌ها طوری تنظیم شده که هر چهارتا جا شوند. */
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:32px;padding:0 8px;
  border:1px solid var(--line2);border-radius:8px;background:#fff;
  font-size:12.5px;font-weight:700;color:var(--label);text-decoration:none;
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease);
}
.ssp-size:hover{border-color:var(--c2);color:var(--c)}
.ssp-size.is-on{border-color:var(--c);background:var(--tint);color:var(--c)}

/* رنگ — سواچ گرد با حلقه‌ی انتخاب */
.ssp-colors{display:flex;flex-direction:column;gap:12px}
.ssp-color{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--label);font-size:13px}
.ssp-dot{
  width:24px;height:24px;flex:0 0 24px;border-radius:999px;
  border:1px solid rgba(26,28,31,.12);
  box-shadow:0 0 0 0 #fff,0 0 0 0 var(--c);
  transition:box-shadow .16s var(--ease),transform .16s var(--ease);
}
.ssp-color:hover .ssp-dot{transform:scale(1.08)}
.ssp-color.is-on .ssp-dot{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.ssp-color.is-on .ssp-color-t{color:var(--c);font-weight:700}

/* قیمت */
.ssp-slider{position:relative;height:26px;margin:6px 0 4px}
.ssp-track,.ssp-fill{position:absolute;top:11px;height:4px;border-radius:999px}
.ssp-track{inset-inline:0;background:var(--line2)}
.ssp-fill{background:var(--c)}
.ssp-r{
  position:absolute;inset-inline:0;top:0;width:100%;height:26px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.ssp-r::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;
  width:16px;height:16px;border-radius:999px;background:#fff;
  border:3px solid var(--c);cursor:pointer;box-shadow:0 1px 4px rgba(26,28,31,.2);
}
.ssp-r::-moz-range-thumb{
  pointer-events:auto;width:16px;height:16px;border-radius:999px;background:#fff;
  border:3px solid var(--c);cursor:pointer;
}
.ssp-r::-moz-range-track{background:none}
.ssp-price-row{display:flex;align-items:flex-end;gap:8px;margin-top:12px}
.ssp-price-row label{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted)}
.ssp-price-row input{
  width:100%;height:36px;border:1px solid var(--line2);border-radius:8px;
  padding:0 8px;font:inherit;font-size:12.5px;color:var(--ink);background:#fff;
}
.ssp-price-row input:focus{border-color:var(--c);outline:none}
.ssp-price-dash{width:12px;height:1px;background:var(--line2);margin-bottom:18px;flex:none}
.ssp-price-out{margin-top:10px;font-size:12px;color:var(--label);font-weight:600}
.ssp .ssp-price-go{
  margin-top:12px;width:100%;height:40px;min-height:0;border:0;border-radius:9px;
  background:var(--c)!important;color:#fff!important;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:0;
  transition:background .15s var(--ease);
}
.ssp .ssp-price-go:hover{background:var(--c2)!important}

/* سوییچ‌ها */
.ssp-toggles{display:flex;flex-direction:column;gap:16px;padding-top:20px}
.ssp-tg{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600}
.ssp-sw{
  position:relative;width:38px;height:21px;flex:none;border-radius:999px;
  background:var(--line2);transition:background .18s var(--ease);
}
.ssp-sw::after{
  content:"";position:absolute;top:3px;right:3px;width:15px;height:15px;
  border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(26,28,31,.25);
  transition:transform .18s var(--ease);
}
.ssp-tg.is-on .ssp-sw{background:var(--c)}
.ssp-tg.is-on .ssp-sw::after{transform:translateX(-17px)}

/* ---------- ۵ — نوار ابزار ---------- */
.ssp-tools{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.ssp-sortwrap{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--label)}
.ssp-sortlabel{color:var(--muted);white-space:nowrap}
.ssp .ssp-sort{
  border:1px solid var(--line2);border-radius:9px;height:40px;min-height:0;padding:0 30px 0 10px;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);background:#fff;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:12px 17px,17px 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.ssp .ssp-sort:focus{border-color:var(--c);outline:none}
.ssp-active{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ssp-active-l{font-size:12.5px;color:var(--muted)}
.ssp-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:8px;background:var(--soft);
  font-size:12.5px;color:var(--label);text-decoration:none;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.ssp-chip span{color:var(--muted);font-size:15px;line-height:1}
.ssp-chip:hover{background:var(--tint);color:var(--c)}
.ssp-chip:hover span{color:var(--c)}

/* ---------- ۶ — گرید ---------- */
.ssp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ssp-grid > *{min-width:0}

/* ---------- ۸ — صفحه‌بندی ---------- */
.ssp-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.ssp-pager .page-numbers{
  min-width:40px;height:40px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);border-radius:10px;background:#fff;
  font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.ssp-pager .page-numbers:hover{border-color:var(--c);color:var(--c)}
.ssp-pager .page-numbers.current{background:var(--c);border-color:var(--c);color:#fff}
.ssp-pager .page-numbers.dots{border:0;background:none;color:var(--muted);min-width:20px}

/* ---------- ۹ — حالت خالی ---------- */
.ssp-empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:64px 24px;text-align:center;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:16px;
}
.ssp-empty svg{width:44px;height:44px;color:var(--muted2)}
.ssp-empty-t{font-size:16px;font-weight:700;color:var(--ink);margin:6px 0 0}
.ssp-empty-d{font-size:13px;margin:0}
.ssp-empty-b{
  margin-top:10px;display:inline-flex;align-items:center;height:42px;padding:0 22px;
  border-radius:10px;background:var(--c);color:#fff;font-size:13.5px;font-weight:700;text-decoration:none;
}
.ssp-empty-b:hover{background:var(--c2)}

/* ---------- ۱۰ — متن سئو ---------- */
.ssp-seo{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-top:14px}
.ssp-seo > summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;font-size:15px;font-weight:800;color:var(--ink);
}
.ssp-seo > summary::-webkit-details-marker{display:none}
.ssp-seo-b{margin-top:14px;font-size:13.5px;line-height:2.1;color:var(--label)}
.ssp-seo-b p{margin:0 0 10px}

/* =====================================================================
   تبلت
   ===================================================================== */
@media (max-width:1100px){
  .ssp-body{grid-template-columns:214px minmax(0,1fr);gap:22px}
  .ssp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =====================================================================
   موبایل — سایدبار به شیت پایین تبدیل می‌شود
   نکته: قانون پایه‌ی .ssp-sheet مقدار display:contents دارد؛ اینجا باید
   با همان قدرت بازنویسی شود، وگرنه شیت اصلاً دیده نمی‌شود.
   ===================================================================== */
@media (max-width:900px){
  .ssp-body{grid-template-columns:minmax(0,1fr);gap:0}
  /* ستون‌ها اینجا دست نمی‌خورند؛ سه‌ستونهٔ بریک‌پوینت ۱۱۰۰ ادامه پیدا می‌کند
     و دوستونه شدن به ۶۰۰px موکول می‌شود. */

  .ssp-mbar{
    display:flex;gap:10px;position:sticky;top:0;z-index:30;
    padding:10px 0;margin-bottom:16px;
    background:var(--ss-bg,#F9F9FD);
  }
  .ssp-mbtn{
    flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
    height:42px;border:1px solid var(--line2);border-radius:999px;background:#fff;
    font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;
  }
  .ssp-mbtn svg{width:17px;height:17px}

  .ssp .ssp-sheet,
  .ssp .ssp-sheet-sort{
    display:block;position:fixed;inset:0;z-index:10000;
    background:rgba(11,11,20,.45);opacity:0;transition:opacity .25s var(--ease);
  }
  /* بدون این قانون، display:block بالا از [hidden]ِ مرورگر قوی‌تر است و هر دو
     شیت به‌صورت لایه‌ی تمام‌صفحه‌ی نامرئی روی صفحه می‌مانند — یعنی هیچ‌چیز
     در موبایل قابل لمس نیست. تست پلی‌رایت این را گرفت، اسکرین‌شات نمی‌گرفت. */
  .ssp .ssp-sheet[hidden]{display:none}
  .ssp-sheet.is-open{opacity:1}
  .ssp-sheet-in{
    display:flex;flex-direction:column;
    position:absolute;inset-block-end:0;inset-inline:0;
    max-height:86vh;background:#fff;
    border-start-start-radius:22px;border-start-end-radius:22px;
    transform:translateY(100%);transition:transform .28s var(--ease);
  }
  .ssp-sheet.is-open .ssp-sheet-in{transform:translateY(0)}

  .ssp-sheet-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 20px 12px;border-bottom:1px solid var(--line);position:relative;flex:none;
  }
  .ssp-sheet-head strong{font-size:15.5px;color:var(--ink)}
  .ssp-sheet-grip{
    position:absolute;top:7px;right:50%;transform:translateX(50%);
    width:40px;height:4px;border-radius:999px;background:var(--line2);
  }
  .ssp-sheet-x{
    border:0;background:none;font-size:26px;line-height:1;color:var(--muted);
    cursor:pointer;padding:0 4px;
  }
  .ssp-side{position:static;overflow-y:auto;padding:0 20px 8px;flex:1 1 auto;min-height:0}
  .ssp-side-head{display:none}
  .ssp-sheet-foot{
    display:flex;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);flex:none;
  }
  .ssp-sheet-apply{
    flex:1;display:inline-flex;align-items:center;justify-content:center;height:46px;
    border-radius:12px;background:var(--c);color:#fff;font-size:14px;font-weight:700;text-decoration:none;
  }
  .ssp-sheet-clear{
    display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;
    border:1px solid var(--line2);border-radius:12px;color:var(--label);
    font-size:14px;font-weight:700;text-decoration:none;
  }
  .ssp-sortlist{display:flex;flex-direction:column;padding:6px 20px 10px}
  .ssp-sortitem{
    padding:15px 2px;border-bottom:1px solid var(--line);
    font-size:14px;color:var(--ink);text-decoration:none;
  }
  .ssp-sortlist .ssp-sortitem:last-child{border-bottom:0}
  .ssp-sortitem.is-on{color:var(--c);font-weight:800}

  .ssp-tools{border-bottom:0;padding-bottom:0}
  .ssp-sortwrap{display:none}
  .ssp-title{font-size:22px}
  .ssp-chipcat{width:72px}
  .ssp-chipcat-img{width:64px;height:64px}
  .ssp-strip{gap:14px}
  /* ناوبری ثابتِ پایین صفحه در موبایل ۶۰px ارتفاع دارد */
  .ssp{padding-bottom:60px}
}

@media (max-width:600px){
  .ssp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

@media (max-width:420px){
  .ssp-grid{gap:12px}
}