/* ==========================================================================
   collection.css — بنرِ مجموعه، کروسل، و منوی مگا.

   بعد از site.css و پیش از fa.css.

   سه متغیر کلِ جوّ صفحه را عوض می‌کنند و js/collection.js آن‌ها را از روی
   همان مجموعه روی :root می‌نویسد:

       --c-accent   رنگِ لهجه‌ی این مجموعه
       --c-lit      روشن‌ترش، برای تیتر
       --c-deep     تیره‌ترش، برای زمینه‌ی بنر

   طلاییِ برند (--bronze) دست‌نخورده می‌ماند: کارت‌ها، دکمه‌ها و سبد در هر
   ده صفحه یک شکل‌اند. فقط بنر و خط‌های همان صفحه رنگ عوض می‌کنند — وگرنه
   ده صفحه می‌شود ده سایتِ مختلف.
   ========================================================================== */

:root{
  --c-accent:var(--bronze);
  --c-lit:var(--bronze-lit);
  --c-deep:#1A1209;
}

/* ---------------------------------------------------------------- بنر --- */

.cbanner{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4.5rem,11vw,8rem) clamp(2.5rem,6vw,4.5rem);
}

/* زمینه: یک هاله‌ی رنگی که از بالای صفحه می‌آید و در متن حل می‌شود.
   جدا از خودِ بنر است تا بشود بدون دست‌زدن به چیدمان، عوضش کرد. */
.cb-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 78% -10%, color-mix(in oklab, var(--c-accent) 26%, transparent) 0%, transparent 62%),
    radial-gradient(90% 70% at 10% 0%,   color-mix(in oklab, var(--c-lit) 12%, transparent) 0%, transparent 58%),
    linear-gradient(to bottom, var(--c-deep) 0%, var(--black) 82%);
}
/* مرورگرهایی که color-mix ندارند نباید بنرِ بی‌رنگ بگیرند. */
@supports not (background: color-mix(in oklab, red 10%, transparent)){
  .cb-bg{background:linear-gradient(to bottom,var(--c-deep) 0%,var(--black) 82%)}
}

.cb-in{
  max-width:var(--max,1240px);margin-inline:auto;padding-inline:var(--gut);
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:961px){
  .cb-in{grid-template-columns:minmax(0,27rem) minmax(0,1fr);align-items:center}
}

.cb-id .stamp{color:var(--c-accent)}
.cb-id h1{
  font-size:clamp(2.6rem,7vw,4.6rem);margin:.35em 0 .45em;
  color:var(--c-lit);
}
.cb-id .lede{max-width:34rem;color:var(--bone-dim);margin:0}
.cb-count{
  margin:1.4rem 0 0;font-size:.8rem;color:var(--bone-dim);
}
.cb-count b{color:var(--c-accent);font-weight:700}

.cb-alts{display:flex;flex-wrap:wrap;gap:.55rem;margin-block-start:1.6rem}

/* ------------------------------------------------------------- کروسل --- */

.cb-car{position:relative;min-width:0}
.cb-car:focus-visible{outline:2px solid var(--c-accent);outline-offset:6px}

/* اسلایدها روی هم‌اند و با شفافیت عوض می‌شوند. ارتفاع را بلندترینشان
   تعیین می‌کند (grid، نه position:absolute) وگرنه هنگام تعویض، بقیه‌ی
   صفحه بالا و پایین می‌پرد. */
.cb-track{display:grid}
.cb-slide{
  grid-area:1/1;display:flex;flex-direction:column;gap:1.1rem;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s;
}
.cb-slide.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  .cb-slide{transition:none}
}

.cb-media{
  position:relative;
  aspect-ratio:2/1;display:grid;place-items:center;
  border:1px solid color-mix(in oklab, var(--c-accent) 24%, transparent);
  border-radius:3px;overflow:hidden;
  background:
    radial-gradient(70% 100% at 50% 0%, color-mix(in oklab, var(--c-accent) 12%, transparent), transparent 70%),
    var(--panel);
}
@supports not (background: color-mix(in oklab, red 10%, transparent)){
  .cb-media{border-color:var(--line);background:var(--panel)}
}
.cb-media img,.cb-media svg{width:100%;height:100%;object-fit:contain}
.cb-media.is-photo img{object-fit:cover}

/* اسلاید تایپوگرافی: جعبه‌ی خالیِ رسانه جمع می‌شود و متن بزرگ‌تر می‌نشیند.
   بدون این، یک مستطیلِ خالی می‌ماند که شبیه تصویرِ نیامده است. */
.cb-media.is-art{display:none}
.cb-slide:has(.cb-media.is-art) .cb-cap h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.cb-slide:has(.cb-media.is-art) .cb-cap{
  padding:clamp(1.6rem,4vw,2.6rem);
  border:1px solid color-mix(in oklab, var(--c-accent) 22%, transparent);
  border-radius:3px;
}

/* لینکِ نامرئی روی رندر، تا بنر هم مثل کارت قابل کلیک باشد */
.cb-hit{position:absolute;inset:0}
.cb-hit:focus-visible{outline:2px solid var(--c-accent);outline-offset:-4px}

.cb-cap h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;margin:0 0 .5rem;
  color:var(--c-lit);
}
.cb-cap p{margin:0;color:var(--bone-dim);font-size:.92rem;max-width:42rem}

.cb-nav{
  display:flex;align-items:center;gap:.9rem;margin-block-start:1.2rem;
}
.cb-arrow{
  background:none;border:1px solid var(--line);border-radius:2px;
  color:var(--bone);cursor:pointer;font:inherit;font-size:1.2rem;
  line-height:1;padding:.2em .55em;
}
.cb-arrow:hover{border-color:var(--c-accent);color:var(--c-lit)}
.cb-dots{display:flex;gap:.45rem;flex:1}
/* خطِ ۳ پیکسلی دیده می‌شود، ولی جای لمس بلندتر است (‎padding‎ + ‎content-box‎)؛
   هدفِ لمسیِ ۳ پیکسلی روی گوشی عملاً زده نمی‌شد. */
.cb-dots button{
  width:2.2rem;height:23px;padding:10px 0;border:0;border-radius:2px;cursor:pointer;
  background:var(--line);background-clip:content-box;transition:background .3s var(--ease);
}
.cb-dots button[aria-selected="true"]{background-color:var(--c-accent)}

/* -------------------------------------------------------------- گرید --- */

.chead{margin-block-end:1.6rem}
.chead .stamp{color:var(--c-accent)}

/* ------------------------------------------------ جست‌وجوی پیشرفته ---
   js/search.js. نوار (متن، فیلترها، مرتب‌سازی)، تراشه‌های فعال، و پنلی که
   باز و بسته می‌شود. در موبایل همه زیرِ هم و تمام‌عرض. */
.sbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.sf-q{
  flex:1 1 16rem;min-width:0;min-height:44px;padding:.55em 1.1em;
  background:var(--panel);color:var(--bone);font:inherit;font-size:.95rem;
  border:1px solid rgba(237,230,217,.2);border-radius:999px;
}
.sf-q:focus-visible,.sf-sort:focus-visible,.sf-price input:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}
.sf-toggle{min-height:44px;gap:.5rem}
.sf-toggle[aria-expanded="true"]{border-color:var(--c-accent);color:var(--c-lit)}
.sf-badge{
  display:inline-grid;place-items:center;min-width:1.45rem;height:1.45rem;padding:0 .35rem;
  border-radius:999px;background:var(--c-accent);color:var(--black);font-size:.72rem;font-weight:700;
}
.sf-sort{
  min-height:44px;padding:.4em 2.2em .4em 1em;max-width:100%;
  background:var(--panel);color:var(--bone);font:inherit;font-size:.85rem;
  border:1px solid rgba(237,230,217,.2);border-radius:999px;
}
.sf-active{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-block-start:.9rem}
.sf-x{border-color:var(--c-accent);color:var(--c-lit)}
.sf-clear{
  background:none;border:0;padding:.4em .2em;cursor:pointer;font:inherit;font-size:.8rem;
  color:var(--bone-dim);text-decoration:underline;text-underline-offset:3px;
}
.sf-clear:hover{color:var(--bone)}
.sf-panel{
  display:grid;gap:1.1rem 2rem;margin-block-start:1rem;padding:1.2rem clamp(1rem,2.5vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
}
.sf-panel[hidden]{display:none}
.sf-g{border:0;margin:0;padding:0;min-width:0}
.sf-g legend{
  padding:0;margin-block-end:.55rem;font-family:var(--data);font-size:.62rem;
  letter-spacing:.16em;color:var(--c-accent);
}
.sf-opts{display:flex;flex-wrap:wrap;gap:.4rem}
.sf-o,.sf-t{display:inline-flex;align-items:center;gap:.45em;text-transform:none;letter-spacing:.04em;font-size:.72rem}
.sf-o .n{opacity:.6;font-size:.9em}
.sf-o[aria-pressed="true"] .n{opacity:.8}
.sf-o:disabled{opacity:.35;cursor:default}
.sf-o[aria-pressed="true"],.sf-t[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent)}
.sw{
  width:.9rem;height:.9rem;border-radius:50%;flex:none;background:var(--sw);
  box-shadow:inset 0 0 0 1px rgba(237,230,217,.35);
}
.sw.is-tort{background:
  radial-gradient(circle at 30% 30%,#c08a4a 0 22%,transparent 24%),
  radial-gradient(circle at 70% 65%,#2a170b 0 26%,transparent 28%),var(--sw)}
.sw.is-clear{background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.12))}
.sf-price{display:flex;gap:.6rem}
.sf-price label{flex:1;display:grid;gap:.3rem;font-size:.72rem;color:var(--bone-dim)}
.sf-price input{
  width:100%;min-width:0;min-height:40px;padding:.45em .8em;
  background:var(--black);color:var(--bone);font:inherit;font-size:.85rem;
  border:1px solid rgba(237,230,217,.2);border-radius:3px;
}
.sf-count{margin-block:1.1rem 0}
@media (max-width:560px){
  .sf-sort{flex:1 1 auto}
  .sf-toggle{flex:1 1 auto;justify-content:center}
}

.cempty{
  padding:clamp(3rem,8vw,6rem) 0;text-align:center;
  border-block-start:1px solid var(--line);
}
.cempty h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 .7rem;color:var(--c-lit)}
.cempty p{margin:0 auto 1.8rem;max-width:34rem;color:var(--bone-dim)}
.cempty .cb-alts{justify-content:center}

/* منوی مگا به css/site.css رفت: روی صفحه‌ی اول و صفحه‌ی محصول هم باز
   می‌شود، و تا وقتی اینجا بود آنجا بی‌استایل — یک فهرستِ متنیِ خام زیر
   نوار — درمی‌آمد. */

/* شمارنده: هر عدد در جعبه‌ی خودش، جداکننده کشیده و نه نوشته. یک «·» میان
   دو رقم فارسی، در اندازه‌ی کوچک به یک رقمِ سوم شبیه می‌شود. */
.cb-count{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.cb-count span{display:inline-flex;align-items:center;gap:.3em}
.cb-count span + span{
  padding-inline-start:.9rem;
  border-inline-start:1px solid var(--line);
}

/* خطوطِ شبکه روی خودِ کارت‌هاست (css/site.css) — ردیفِ نیمه‌پر رنگی نمی‌شود. */

/* ------------------------------------------------------ گوشی (لمسی) ---
   ‎touch-action:pan-y‎: بدونِ آن مرورگر کشیدنِ افقی را صاحب می‌شود و
   ‎pointercancel‎ می‌دهد، پس کروسل با انگشت جابه‌جا نمی‌شد. ورودی‌ها ۱۶px تا
   iOS موقعِ فوکوس زوم نکند؛ تراشه‌ها و دکمه‌های فیلتر ≥۴۴px. */
.cb-car{touch-action:pan-y}
@media (max-width:760px){
  .sf-q,.sf-sort,.sf-price input{font-size:1rem}
  .sf-sort{min-height:48px}
  .sf-o,.sf-t,.sf-x{min-height:44px;padding-inline:1.1em;font-size:.82rem}
  .sf-clear{min-height:44px;padding:.4em .8em;font-size:.85rem}
  .sf-price input{min-height:48px}
  .cb-arrow{min-width:44px;min-height:44px}
  .cb-dots button{width:2.6rem}
}