/* ==========================================================================
   IGGAK — landing page
   ========================================================================== */

html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* --- nav ----------------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(.85rem + var(--safe-t)) var(--gut) .85rem;
  background:rgba(8,9,10,.55);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:.4s var(--ease);
}
.nav[data-stuck=true]{background:rgba(8,9,10,.95);border-bottom-color:var(--line)}
.nav-links{display:flex;gap:1.9rem;font-family:var(--data);font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase}
.nav-links a{text-decoration:none;color:var(--bone-dim)}
.nav-links a:hover{color:var(--bronze)}

.nav-right{display:flex;align-items:center;gap:.6rem}
.navtoggle{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- nav on phones ------------------------------------------------------- 
   The links used to be set to display:none below 880px with nothing put in
   their place, so four of the five destinations became unreachable on a
   phone. They now collapse into a panel behind the toggle. */
@media(max-width:880px){
  .navtoggle{
    display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;
    border:1px solid var(--line);border-radius:2px;background:transparent;
    cursor:pointer;touch-action:manipulation;
  }
  .navtoggle .bars,
  .navtoggle .bars::before,
  .navtoggle .bars::after{
    content:'';display:block;width:18px;height:1.5px;background:var(--bronze);
    transition:transform .3s var(--ease),opacity .2s var(--ease);
  }
  .navtoggle .bars{position:relative}
  .navtoggle .bars::before{position:absolute;top:-6px}
  .navtoggle .bars::after{position:absolute;top:6px}
  .navtoggle[aria-expanded=true] .bars{background:transparent}
  .navtoggle[aria-expanded=true] .bars::before{transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded=true] .bars::after{transform:translateY(-6px) rotate(-45deg)}

  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:rgba(8,9,10,.98);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:.4rem 0 calc(.4rem + var(--safe-b));
    /* افقیِ گوشی (۳۹۰ پیکسل بلندی): فهرست از صفحه بیرون می‌زد و اسکرول نداشت. */
    max-height:calc(100vh - 4.5rem);max-height:calc(100dvh - 4.5rem);overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    /* ‎visibility‎ و نه فقط شفافیت: پیوندهای پنلِ بسته وگرنه با Tab فوکوس
       می‌گرفتند و صفحه‌خوان هم می‌خواندشان — فوکوسِ نامرئی. */
    visibility:hidden;
    transition:.28s var(--ease);
  }
  .nav-links[data-open=true]{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .nav-links a{
    display:flex;align-items:center;min-height:52px;
    padding:0 var(--gut);border-bottom:1px solid rgba(200,145,89,.10);
  }
  .nav-links a:last-child{border-bottom:0}
}
@media(max-width:700px){
  .nav .btn{padding:.85em 1.1em;font-size:.6rem;letter-spacing:.12em}
  .nav .wordmark .name{font-size:.92rem;letter-spacing:.3em;text-indent:.3em}
}
/* Very narrow: the wordmark and the CTA stop fitting on one line together. */
@media(max-width:420px){
  .nav .btn .dot{display:none}
  .nav .btn{padding:.85em .9em;letter-spacing:.08em}
}

/* --- hero ---------------------------------------------------------------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:grid;align-content:center;
  padding:8rem var(--gut) 4rem;overflow:hidden;
}
/* low arctic sun sitting on the horizon */
.hero::before{
  content:'';position:absolute;left:50%;bottom:-38vmax;
  width:86vmax;height:86vmax;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,
    rgba(200,145,89,.20) 0%,
    rgba(42,62,74,.34) 40%,
    transparent 66%);
  pointer-events:none;
}
/* faint drifting snow band */
.hero::after{
  content:'';position:absolute;inset:auto 0 0 0;height:36vh;pointer-events:none;
  background:linear-gradient(to top,rgba(143,180,196,.10),transparent);
}
.hero-in{position:relative;z-index:2;max-width:1200px;margin-inline:auto;width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;gap:2.5rem}}

.eyebrow{display:flex;align-items:center;gap:.85rem;margin-bottom:1.6rem}
.eyebrow::after{content:'';flex:1;height:1px;max-width:180px;
  background:linear-gradient(90deg,var(--bronze-dim),transparent)}

.headline{font-size:clamp(2.4rem,6.4vw,5rem)}
.headline .thin{font-weight:300;color:var(--bone-dim)}

.hero-foot{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
@media(max-width:600px){.hero-foot .btn{flex:1 1 100%}}

.hero-spec{display:flex;gap:1.6rem 2.4rem;flex-wrap:wrap;margin-top:2.4rem;
  font-family:var(--data);font-size:.64rem;letter-spacing:.14em;color:var(--bone-dim)}
.hero-spec b{color:var(--bronze);font-weight:600}

/* the carved goggle, drawn in js */
.hero-art{position:relative;display:grid;place-items:center;min-height:min(46vh,380px)}
.hero-art svg{width:100%;height:auto;overflow:visible;will-change:transform}
@media(max-width:900px){.hero-art{order:-1;min-height:200px}}

/* --- ticker -------------------------------------------------------------- */
.ticker{border-block:1px solid var(--line);background:var(--panel);overflow:hidden;padding:.9rem 0}
.tt{display:flex;gap:2.8rem;width:max-content;animation:drift 58s linear infinite;
  font-family:var(--data);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);white-space:nowrap}
.tt b{color:var(--bronze);font-weight:600}
@keyframes drift{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tt{animation:none}}

/* --- sections ------------------------------------------------------------ */
.section{padding:clamp(4.5rem,11vw,9rem) var(--gut)}
.in{max-width:1200px;margin-inline:auto}
.head{display:grid;gap:1.15rem;margin-bottom:clamp(2.4rem,6vw,4.2rem);max-width:64ch}
.head h2{font-size:clamp(1.9rem,5vw,3.4rem)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,6vw,5rem);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* heritage panel */
.origin{
  border:1px solid var(--line);background:
    linear-gradient(180deg,var(--panel-2),var(--panel));
  padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:1.1rem;
}
.origin figure{margin:0;display:grid;gap:.9rem;justify-items:center}
.origin figcaption{font-family:var(--data);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);text-align:center}
.origin p{margin:0;font-size:.93rem;color:rgba(237,230,217,.72)}

.facts{display:grid;gap:0;margin-top:.4rem}
.fact{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;
  border-bottom:1px dashed rgba(200,145,89,.16);
  font-family:var(--data);font-size:.66rem;letter-spacing:.08em}
.fact:last-child{border-bottom:0}
.fact span{color:var(--bone-dim);text-transform:uppercase}
.fact b{color:var(--bronze);font-weight:600}

.steps{display:grid;gap:1.7rem;margin-top:2rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start}
.key{font-family:var(--data);font-size:.64rem;color:var(--black);background:var(--bronze);
  width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;font-weight:700}
.step h3{margin:0 0 .3rem;font-size:1.02rem;font-weight:600}
.step p{margin:0;color:var(--bone-dim);font-size:.92rem}

/* --- collection ---------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,286px),1fr));
  gap:1px;margin:1px}
/* خطِ بین کارت‌ها سایه‌ی خودِ کارت است، نه زمینه‌ی شبکه: وقتی ردیفِ آخر
   پر نیست (برگزیده‌ها با دو مدل) جای خالی باید خالی بماند، نه یک مستطیلِ رنگی. */
.card{position:relative;background:var(--black);box-shadow:0 0 0 1px var(--line);padding:1.6rem 1.35rem 1.25rem;
  display:grid;gap:.85rem;text-decoration:none;color:inherit;transition:background .4s var(--ease)}
.card:hover{background:var(--panel-2)}
.card-stage{display:grid;place-items:center;min-height:120px}
.card-stage svg,.card-stage img{width:100%;height:auto;transition:transform .5s var(--ease)}
@media(hover:hover){.card:hover .card-stage svg,.card:hover .card-stage img{transform:scale(1.06) rotate(-1deg)}}

/* ── دو عکس روی هم: عادی و هاور ───────────────────────────────────────
   هر دو در همان سلولِ گرید می‌نشینند، پس کارت بلندتر نمی‌شود و جابه‌جایی
   بدونِ پرشِ چیدمان است.

   ⚠ عکسِ دوم ‎display:none‎ نیست بلکه شفاف است: با none مرورگر تا لحظه‌ی
   هاور دانلودش نمی‌کند و اولین هاور یک تأخیرِ سفید می‌دهد. با
   ‎loading="lazy"‎ هم فقط وقتی نزدیکِ دید است گرفته می‌شود، پس هزینه‌ی
   کارت‌های پایینِ صفحه پرداخت نمی‌شود.

   روی دستگاهی که هاور ندارد (موبایل) عکسِ دوم اصلاً کشیده نمی‌شود. */
.card-stage{grid-template-areas:'shot'}
.card-stage > *{grid-area:shot}
.card-stage .shot{transition:opacity .35s var(--ease),transform .5s var(--ease)}
.card-stage .shot.alt{opacity:0}
@media(hover:hover){
  .card:hover .card-stage .shot{opacity:0}
  .card:hover .card-stage .shot.alt{opacity:1}
}
@media(hover:none){.card-stage .shot.alt{display:none}}
/* کسی که حرکت را دوست ندارد، فقط عکسِ اول را می‌بیند. */
@media(prefers-reduced-motion:reduce){
  .card-stage .shot,.card-stage .shot.alt{transition:none}
  .card:hover .card-stage .shot{opacity:1}
  .card:hover .card-stage .shot.alt{opacity:0}
}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem}
.house{font-family:var(--data);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.price{font-family:var(--data);font-size:.72rem;color:var(--bronze)}
.card h3{margin:0;font-family:var(--display);font-size:1.24rem;font-weight:400;
  letter-spacing:.05em;text-transform:uppercase}
.colour{font-size:.79rem;color:var(--bone-dim);margin:-.4rem 0 0}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:.7rem;
  padding-top:.8rem;border-top:1px dashed rgba(200,145,89,.16)}
.size{font-family:var(--data);font-size:.64rem;color:var(--bone-dim);letter-spacing:.05em}
.badge3d{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--bronze);margin-left:.4rem;vertical-align:middle}
.try{font-family:var(--data);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze);opacity:0;transform:translateX(-6px);transition:.35s var(--ease);
  text-decoration:none}
.card:hover .try,.card:focus-visible .try{opacity:1;transform:none}
@media(hover:none){.try{opacity:1;transform:none}}
/* ⚠ لینکِ آینه **روی** لایه‌ی پوششیِ کارت می‌نشیند، وگرنه کلیکش را
   همان پوشش می‌گیرد و باز به صفحه‌ی محصول می‌رود. */
a.try{position:relative;z-index:2}
a.try:hover{text-decoration:underline;text-underline-offset:3px}
a.try:focus-visible{outline:2px solid var(--bronze);outline-offset:2px;opacity:1;transform:none}
.try.is-off{color:var(--bone-dim)}

/* --- band ---------------------------------------------------------------- */
.band{position:relative;padding:clamp(4.5rem,11vw,8rem) var(--gut);
  background:var(--ice-deep);overflow:hidden;text-align:center}
.band::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 118%,rgba(200,145,89,.34),transparent 62%)}
.band-in{position:relative;z-index:2;max-width:740px;margin-inline:auto;
  display:grid;gap:1.3rem;justify-items:center}
.band h2{font-size:clamp(2rem,5.6vw,3.8rem)}
.band .lede{text-align:center;margin-inline:auto}

/* --- footer -------------------------------------------------------------- */
.footer{padding:clamp(3rem,7vw,5rem) var(--gut) calc(2.4rem + var(--safe-b));
  border-top:1px solid var(--line);display:grid;gap:2.2rem}
.ftop{max-width:1200px;margin-inline:auto;width:100%;display:flex;flex-wrap:wrap;
  gap:2rem 3rem;justify-content:space-between}
.fcol{display:grid;gap:.55rem;align-content:start}
.fcol a{font-size:.85rem;color:var(--bone-dim);text-decoration:none}
.fcol a:hover{color:var(--bronze)}
.legal{max-width:1200px;margin-inline:auto;width:100%;font-family:var(--data);
  font-size:.6rem;line-height:1.95;color:rgba(237,230,217,.34);
  border-top:1px dashed rgba(200,145,89,.14);padding-top:1.3rem}
.legal b{color:var(--bone-dim);font-weight:600}

/* --- reveal -------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

@media(max-width:700px){
  .hero{padding-top:6.5rem}
  /* Two cards abreast still reads on a phone and halves the scroll. */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-stage{min-height:96px}
  .card{padding:.85rem}
}
@media(max-width:430px){
  .grid{grid-template-columns:1fr}
  .card-stage{min-height:120px}
}

/* 100vh on a phone is measured against the URL bar's collapsed state, so a
   full-height hero gets clipped on load. dvh follows the bar as it moves. */
@supports(height:100dvh){
  .hero{min-height:100dvh}
}

/* Admin entry point in the footer. Plain by design — staff find it, customers
   scroll past it. Not access control. */
.adminentry{font-family:var(--mono,monospace);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-dim,#8e8880);text-decoration:none;
  border-bottom:1px solid rgba(200,145,89,.35);padding-bottom:.15em}
@media(hover:hover){.adminentry:hover{color:var(--bronze)}}

/* --- کارت: پوشش لینک + دکمه‌ی خرید ---------------------------------------
   کارت خودش <a> نیست چون دکمه‌ی خرید نمی‌تواند داخل یک لینک دیگر بنشیند.
   .card-hit تمام کارت را می‌پوشاند و .buy رویش می‌نشیند. */
.card-hit{position:absolute;inset:0;z-index:1}
.card-hit:focus-visible{outline:2px solid var(--bronze);outline-offset:-3px}
.card .buy{
  position:relative;z-index:2;justify-self:start;
  font-family:var(--data);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  padding:.7em 1.2em;margin-top:.2rem;
  border:1px solid var(--bronze);border-radius:2px;color:var(--bronze);
  background:transparent;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
@media(hover:hover){.card .buy:hover{background:var(--bronze);color:var(--black)}}

/* ناموجود یا بی‌قیمت: همان جای دکمه، ولی آشکارا دکمه نیست. جای خالی
   گذاشتن باعث می‌شد کارت‌های کنار هم قد متفاوت بگیرند. */
.card .buy.is-off{
  border-color:var(--line);color:var(--bone-dim);cursor:default;
}
@media(hover:hover){.card .buy.is-off:hover{background:transparent;color:var(--bone-dim)}}

.price.is-ask{color:var(--bone-dim)}

/* ---------------------------------------------------------- تخفیف ---
   قیمتِ پیش از تخفیف و درصدش، روی کارت.

   ⚠ ‎<s>‎ و نه ‎text-decoration‎ی CSS: خطِ خورده اینجا **معنی** دارد
   («این قیمت دیگر معتبر نیست») و screen reader باید بخواندش. با یک
   ‎span‎ی خط‌دار، کسی که با صدا می‌خرد دو قیمت می‌شنود و نمی‌داند
   کدام را می‌پردازد.                                                */
.price .was{margin-inline-start:.45em;color:var(--bone-dim);opacity:.75;
  font-size:.86em;text-decoration-thickness:1px}
.price .off{margin-inline-start:.4em;font-style:normal;font-size:.8em;
  color:var(--ink,#0B0906);background:var(--bronze);
  padding:.1em .45em;border-radius:.2em;white-space:nowrap}

/* ---------------------------------------------------------- منوی مگا ---
   ⚠ اینجا و نه در collection.css. nav.js روی هر صفحه‌ای که نوار دارد
   منو را می‌سازد؛ تا وقتی استایلش فقط در collection.css بود، روی صفحه‌ی
   اول و صفحه‌ی محصول یک فهرستِ متنیِ بی‌قاب زیر نوار می‌افتاد.        */

.mm-trigger{position:relative}
.mm-trigger.is-open{color:var(--bronze)}

.mm-panel{
  position:absolute;z-index:70;
  inset-inline-end:var(--gut);inset-block-start:calc(100% - .2rem);
  min-width:min(46rem,calc(100vw - 2*var(--gut)));
  padding:1.4rem clamp(1rem,2.4vw,1.8rem) 1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.mm-panel[hidden]{display:none!important}

.mm-cols{
  display:grid;gap:1.4rem clamp(1rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.mm-col .stamp{color:var(--bronze);margin:0 0 .55rem}
.mm-col a{
  display:flex;align-items:center;gap:.55rem;
  padding:.42em 0;font-size:.9rem;text-decoration:none;color:var(--bone);
}
.mm-col a:hover,.mm-col a[aria-current="page"]{color:var(--bronze-lit)}
.mm-dot{
  width:.5rem;height:.5rem;border-radius:50%;flex:none;
  background:var(--c-accent);opacity:.85;
}
.mm-label{flex:1;min-width:0}
.mm-n{font-size:.72rem;color:var(--bone-dim);font-variant-numeric:tabular-nums}

.mm-all{
  display:inline-block;margin-block-start:1rem;padding-block-start:.9rem;
  border-block-start:1px solid var(--line);width:100%;
  font-size:.82rem;color:var(--bronze);text-decoration:none;
}

/* جست‌وجوی منو ← ‎/all?q=…‎ */
.mm-search{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;
  margin-block-end:1.1rem;padding-block-end:1rem;border-block-end:1px solid var(--line);
}
.mm-search input{
  flex:1 1 12rem;min-width:0;min-height:40px;padding:.5em .9em;
  background:var(--black);color:var(--bone);border:1px solid rgba(237,230,217,.2);
  border-radius:999px;font:inherit;font-size:.9rem;
}
.mm-search input:focus-visible{outline:2px solid var(--bronze);outline-offset:1px}
.mm-search .btn{min-height:40px;padding-block:.4em}
.mm-adv{font-size:.78rem;color:var(--bronze);text-decoration:none;white-space:nowrap}
.mm-adv:hover{color:var(--bronze-lit)}

/* در موبایل، پنل داخل همان کشوی نوار می‌نشیند و دیگر شناور نیست. */
@media (max-width:880px){
  .mm-panel{
    position:static;min-width:0;width:100%;
    margin-block:.6rem;padding:1rem;box-shadow:none;
    background:var(--panel-2);
  }
  .mm-cols{grid-template-columns:1fr}
}
/* گروهی که هنوز چیزی ندارد (مثلاً هیچ برندی در پنل ساخته نشده). */
.mm-none{margin:0;padding:.42em 0;font-size:.9rem;color:var(--bone-dim)}

/* ------------------------------------------------ صفحه‌ی اول: برگزیده‌ها --- */
.top-head{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:1rem 2rem}
.top-head > div{display:grid;gap:1.15rem}
.top-all{white-space:nowrap}
.top-empty{text-align:center;padding:2rem 0}

/* ---------------------------------------------------------- آینه (معرفی) --- */
.mirror-card{display:grid;gap:1rem;align-content:start}
.mirror-card .mirror-big{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.6rem);
  line-height:1.6;color:var(--bone)}
.mirror-card .mirror-big b{color:var(--bronze)}
.mirror-card .btn{justify-self:start}

/* ------------------------------------------------------------ درباره ما --- */
.about-body{display:grid;gap:1.1rem}
.about-body .lede{margin:0}
.contact-card .fact b{text-align:left;font-weight:500}
.contact-card .fact b a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(201,160,99,.35)}
.contact-card .fact b a:hover{border-bottom-color:var(--bronze)}
.contact-card .fact span{text-transform:none;white-space:nowrap}
.contact-links{margin-top:1rem}
.contact-links:empty{display:none}

/* --- پیشنهادِ زنده‌ی جست‌وجو (js/suggest.js) ------------------------------
   در ‎body‎ و ‎fixed‎ — جایش را خودِ اسکریپت زیرِ جعبه می‌گذارد. */
.sg-pop{
  position:fixed;z-index:1000;max-height:min(70vh,30rem);overflow-y:auto;overscroll-behavior:contain;
  padding:.35rem;background:var(--panel-2);color:var(--bone);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  direction:rtl;text-align:start;
}
.sg-pop[hidden]{display:none}
.sg-h{margin:.45rem .6rem .2rem;font-family:var(--data);font-size:.6rem;letter-spacing:.16em;color:var(--bone-dim)}
.sg-i{
  display:flex;align-items:center;gap:.7rem;padding:.45rem .6rem;border-radius:10px;
  color:var(--bone);text-decoration:none;font-size:.88rem;
}
.sg-i[aria-selected="true"]{background:rgba(237,230,217,.08)}
.sg-th{flex:none;display:grid;place-items:center;width:64px;height:42px;border-radius:8px;overflow:hidden;background:var(--black)}
.sg-th img,.sg-th svg{width:100%;height:100%;object-fit:contain}
.sg-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.sg-t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-t small{font-size:.74rem;color:var(--bone-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-p{flex:none;font-size:.78rem;color:var(--bronze);white-space:nowrap}
.sg-dot{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--c,var(--bronze))}
.sg-i.is-all{justify-content:center;margin-top:.25rem;border-top:1px solid var(--line);border-radius:0 0 10px 10px;
  font-size:.8rem;color:var(--bronze)}
.sg-pop mark{background:none;color:var(--bronze-lit,var(--bronze));font-weight:700}
.sg-none{margin:.6rem;font-size:.85rem;color:var(--bone-dim)}