/* =============================================================
   SILLAGE — Design System
   香水まとめDB / ダーク × ゴールド / editorial-luxury
   全ページ共通。color/typography/components/motion を集約。
   ============================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Palette */
  --bg:        #0D0D0D;   /* base background  */
  --bg-2:      #111111;   /* raised surface   */
  --card:      #141414;   /* card background  */
  --card-2:    #181818;   /* card hover       */
  --line:      rgba(201,169,110,.14); /* hairline (gold, faint) */
  --line-soft: rgba(255,255,255,.06);
  --gold:      #C9A96E;   /* primary accent   */
  --gold-soft: #B89A63;
  --gold-deep: #8C7240;
  --ink:       #EDE8E0;   /* primary text (warm white) */
  --ink-2:     #B7B0A6;   /* secondary text   */
  --ink-3:     #8A847B;   /* muted text       */
  --ink-4:     #5C5851;   /* faint / captions */

  /* Type */
  --serif-display: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --serif-body:    'Noto Serif JP', 'Cormorant Garamond', serif;
  --sans-label:    'Cormorant Garamond', 'Noto Serif JP', serif;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* Layered shadows (depth, no flat 1px borders) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.45);
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.55), 0 22px 60px rgba(0,0,0,.35);
  --shadow-card-hover: 0 6px 14px rgba(0,0,0,.55), 0 20px 48px rgba(0,0,0,.6), 0 34px 90px rgba(201,169,110,.10);
  --shadow-gold: 0 0 0 1px rgba(201,169,110,.30), 0 8px 30px rgba(201,169,110,.16);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Layout */
  --maxw: 1180px;
  --maxw-narrow: 760px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--serif-body);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.75;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; }

/* Atmospheric background: warm gold glow top + vignette + grain */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(201,169,110,.10), transparent 60%),
    radial-gradient(900px 700px at 85% 10%, rgba(124,99,58,.06), transparent 55%),
    linear-gradient(180deg, #0D0D0D 0%, #0B0B0B 100%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
.display{
  font-family:var(--serif-display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:.01em;
  text-wrap:balance;
}
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

.eyebrow{
  font-family:var(--sans-label);
  font-size:13px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold);
}
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* gold gradient text for wordmark */
.gold-text{
  background:linear-gradient(110deg, var(--gold-deep), var(--gold) 45%, #EAD6A6 60%, var(--gold) 80%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* section heading with hairline rule */
.section-head{
  display:flex; align-items:baseline; gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}
.section-head .eyebrow::after{
  content:''; display:inline-block; vertical-align:middle;
  width:42px; height:1px; margin-left:var(--sp-4);
  background:linear-gradient(90deg,var(--gold),transparent);
}
.section-title{
  font-family:var(--serif-display);
  font-size:clamp(28px,4.5vw,40px); font-weight:600; line-height:1.1;
  color:var(--ink);
}
.section-sub{ color:var(--ink-3); font-size:14px; margin-top:var(--sp-2); }

/* ---------- Layout ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5); }
.container-narrow{ max-width:var(--maxw-narrow); margin:0 auto; padding:0 var(--sp-5); }
section{ padding:var(--sp-9) 0; }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; }

.grid{ display:grid; gap:var(--sp-5); }
.grid-cards{ grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); }
.grid-wide{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

/* ---------- Top bar / Nav ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(13,13,13,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--line-soft);
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--sp-5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
}
.wordmark{
  font-family:var(--serif-display);
  font-size:24px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
.wordmark .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(201,169,110,.7); }
.nav-links{ display:flex; align-items:center; gap:var(--sp-5); font-family:var(--sans-label); font-size:15px; letter-spacing:.12em; }
.nav-links a{ color:var(--ink-2); transition:color .25s var(--ease); position:relative; }
.nav-links a:hover{ color:var(--gold); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:0; color:var(--ink); font-size:22px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  font-family:var(--sans-label); font-size:14px; letter-spacing:.12em;
  color:var(--ink-4); padding:var(--sp-5) 0 0; text-transform:uppercase;
}
.breadcrumb a{ color:var(--gold-soft); }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb .sep{ color:var(--ink-4); margin:0 8px; }

/* ---------- Card ---------- */
.card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  will-change:transform;
}
.card::before{ /* faint inner gold hairline for refinement */
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,169,110,.08);
  transition:box-shadow .45s var(--ease-out);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card-hover); }
.card:hover::before{ box-shadow:inset 0 0 0 1px rgba(201,169,110,.28); }
.card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.card-body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); flex:1; }
.card-kicker{
  font-family:var(--sans-label); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft);
}
.card-title{
  font-family:var(--serif-display); font-size:24px; font-weight:600; line-height:1.12; color:var(--ink);
}
.card-meta{ font-size:13px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-4); align-items:center; }
.card-desc{ font-size:14px; color:var(--ink-2); line-height:1.7; }

/* media band (typographic, no photos —法的に顔写真不可) */
.card-media{
  position:relative; aspect-ratio:3 / 2; /* fixed ratio → CLSゼロ */
  display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,169,110,.12), transparent 60%),
    linear-gradient(160deg,#191919,#0F0F0F);
}
.card-media .glyph{
  font-family:var(--serif-display); font-style:italic;
  font-size:64px; color:rgba(201,169,110,.5); line-height:1;
  text-shadow:0 4px 24px rgba(0,0,0,.6);
}
.card-media .media-year{
  position:absolute; bottom:10px; right:14px;
  font-family:var(--sans-label); font-size:13px; letter-spacing:.16em; color:var(--ink-3);
}

/* ---------- Pyramid (note structure) ---------- */
.pyramid{ display:flex; flex-direction:column; gap:var(--sp-3); }
.pyramid-row{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.pyramid-label{
  flex:0 0 92px; font-family:var(--sans-label); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-soft); padding-top:5px;
}
.pyramid-notes{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* ---------- Chips / Badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--serif-body); font-size:13px; line-height:1;
  color:var(--ink-2); padding:7px 13px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:color .25s,box-shadow .25s,background .25s;
}
.chip:hover{ color:var(--gold); box-shadow:inset 0 0 0 1px rgba(201,169,110,.4); }
.chip-accord{ box-shadow:inset 0 0 0 1px rgba(201,169,110,.22); }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans-label); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill);
}
.badge-type{ color:var(--gold); background:rgba(201,169,110,.10); box-shadow:inset 0 0 0 1px rgba(201,169,110,.3); }
.badge-unverified{ color:#E0B85A; background:rgba(224,184,90,.08); box-shadow:inset 0 0 0 1px rgba(224,184,90,.32); }

/* rating star + tabular number */
.rating{ display:inline-flex; align-items:center; gap:6px; color:var(--gold); font-size:14px; }
.rating .star{ font-size:13px; }
.rating .count{ color:var(--ink-4); font-size:12.5px; }

/* ---------- Buttons / CTA ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans-label); font-size:16px; letter-spacing:.1em;
  padding:14px 28px; border-radius:var(--r-pill); border:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.btn-gold{
  color:#1A1408;
  background:linear-gradient(110deg,var(--gold-deep),var(--gold) 45%,#EAD6A6 75%,var(--gold));
  box-shadow:var(--shadow-gold);
  font-weight:600;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(201,169,110,.5), 0 14px 40px rgba(201,169,110,.28); }
.btn-ghost{
  color:var(--ink); background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn-ghost:hover{ color:var(--gold); box-shadow:inset 0 0 0 1px rgba(201,169,110,.5); transform:translateY(-2px); }

/* ---------- Search & Filters ---------- */
.search{
  position:relative; display:flex; align-items:center;
  background:rgba(255,255,255,.04); border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow-1);
  padding:0 var(--sp-5); transition:box-shadow .3s var(--ease);
}
.search:focus-within{ box-shadow:inset 0 0 0 1px rgba(201,169,110,.55), 0 10px 34px rgba(201,169,110,.10); }
.search .icon{ color:var(--gold-soft); font-size:17px; flex:0 0 auto; }
.search input{
  flex:1; background:none; border:0; outline:0;
  color:var(--ink); font-family:var(--serif-body); font-size:16px;
  padding:16px var(--sp-4);
}
.search input::placeholder{ color:var(--ink-4); }

.filter-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.filter-chip{
  font-family:var(--sans-label); font-size:14px; letter-spacing:.1em;
  color:var(--ink-2); padding:8px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:all .25s var(--ease);
}
.filter-chip:hover{ color:var(--gold); box-shadow:inset 0 0 0 1px rgba(201,169,110,.35); }
.filter-chip[aria-pressed="true"]{
  color:#1A1408; background:linear-gradient(110deg,var(--gold-deep),var(--gold));
  box-shadow:0 6px 18px rgba(201,169,110,.22);
}

/* ---------- Footer ---------- */
.site-footer{ background:#0A0A0A; box-shadow:0 -1px 0 var(--line-soft); padding:var(--sp-8) 0 var(--sp-6); margin-top:var(--sp-9); }
.footer-grid{ display:flex; flex-wrap:wrap; gap:var(--sp-6); justify-content:space-between; }
.footer-brand .wordmark{ font-size:22px; }
.footer-tag{ color:var(--ink-4); font-size:13px; margin-top:var(--sp-3); max-width:300px; line-height:1.7; }
.footer-col h4{ font-family:var(--sans-label); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:var(--sp-3); }
.footer-col a{ display:block; color:var(--ink-3); font-size:14px; padding:5px 0; transition:color .25s; }
.footer-col a:hover{ color:var(--gold); }
.footer-base{ margin-top:var(--sp-7); padding-top:var(--sp-5); box-shadow:0 -1px 0 var(--line-soft); color:var(--ink-4); font-size:12px; display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:space-between; }

/* affiliate / legal disclosure */
.disclosure{ color:var(--ink-4); font-size:11.5px; line-height:1.7; max-width:760px; }

/* ---------- Motion: staggered reveal on load + scroll ---------- */
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.reveal{ opacity:0; }
.reveal.in{ animation:rise .9s var(--ease-out) forwards; }
.stagger > *{ opacity:0; }
.stagger.in > *{ animation:rise .8s var(--ease-out) forwards; }
.stagger.in > *:nth-child(1){ animation-delay:.04s; }
.stagger.in > *:nth-child(2){ animation-delay:.10s; }
.stagger.in > *:nth-child(3){ animation-delay:.16s; }
.stagger.in > *:nth-child(4){ animation-delay:.22s; }
.stagger.in > *:nth-child(5){ animation-delay:.28s; }
.stagger.in > *:nth-child(6){ animation-delay:.34s; }
.stagger.in > *:nth-child(7){ animation-delay:.40s; }
.stagger.in > *:nth-child(8){ animation-delay:.46s; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal,.stagger > *{ opacity:1 !important; }
}

/* ---------- Empty state ---------- */
.empty{ text-align:center; color:var(--ink-3); padding:var(--sp-8) 0; }
.empty .glyph{ font-family:var(--serif-display); font-style:italic; font-size:48px; color:var(--gold-soft); opacity:.5; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  section{ padding:var(--sp-8) 0; }
  .nav-links{ display:none; }
  .nav-links.open{
    display:flex; position:absolute; top:100%; right:0; left:0;
    flex-direction:column; gap:0; padding:var(--sp-3) var(--sp-5);
    background:rgba(13,13,13,.97); backdrop-filter:blur(14px);
    box-shadow:0 12px 30px rgba(0,0,0,.5);
  }
  .nav-links.open a{ padding:12px 0; box-shadow:0 1px 0 var(--line-soft); }
  .nav-toggle{ display:block; }
  .footer-grid{ flex-direction:column; gap:var(--sp-5); }
}
@media (max-width:480px){
  .grid-cards{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .card-title{ font-size:20px; }
}

/* tap targets ≥44px on touch */
@media (hover:none){
  .nav-links a,.footer-col a{ padding-top:11px; padding-bottom:11px; }
}

/* =============================================================
   Detail pages & Revenue blocks
   ============================================================= */
.detail-head{ padding:var(--sp-8) 0 var(--sp-6); }
.detail-kicker{
  font-family:var(--sans-label); font-size:14px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:var(--sp-3); display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.detail-title{
  font-family:var(--serif-display); font-weight:600; line-height:1.02;
  font-size:clamp(38px,6.5vw,72px); color:var(--ink); text-wrap:balance;
}
.detail-title em{ font-style:italic; color:var(--gold); }
.detail-sub{ color:var(--ink-3); font-size:16px; margin-top:var(--sp-3); }
.detail-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--sp-7); align-items:start; margin-top:var(--sp-6); }
@media(max-width:860px){ .detail-grid{ grid-template-columns:1fr; gap:var(--sp-5); } }

.panel{
  position:relative; background:linear-gradient(180deg,var(--card),var(--bg-2));
  border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:var(--sp-6);
}
.panel::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,169,110,.10); }
.panel + .panel{ margin-top:var(--sp-5); }
.panel-title{
  font-family:var(--sans-label); font-size:14px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:var(--sp-4); display:flex; align-items:center; gap:10px;
}
.lead-quote{ border-left:2px solid var(--gold); padding:var(--sp-2) 0 var(--sp-2) var(--sp-5);
  color:var(--ink-2); font-size:17px; line-height:1.85; margin:var(--sp-4) 0; }
.prose{ color:var(--ink-2); font-size:15.5px; line-height:1.9; }
.prose strong{ color:var(--ink); }

/* meta facts table */
.facts{ display:grid; gap:0; }
.facts > div{ display:flex; gap:var(--sp-4); padding:11px 0; box-shadow:0 1px 0 var(--line-soft); }
.facts > div:last-child{ box-shadow:none; }
.facts dt{ flex:0 0 116px; font-family:var(--sans-label); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-4); }
.facts dd{ color:var(--ink); font-size:14.5px; }

/* relation list (登場作品 / 登場香水) */
.rel-list{ display:flex; flex-direction:column; gap:var(--sp-3); }
.rel-item{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md); background:rgba(255,255,255,.02);
  box-shadow:inset 0 0 0 1px var(--line-soft); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.rel-item:hover{ box-shadow:inset 0 0 0 1px rgba(201,169,110,.32); transform:translateX(5px); }
.rel-glyph{ flex:0 0 46px; height:46px; display:grid; place-items:center; border-radius:var(--r-sm);
  font-family:var(--serif-display); font-style:italic; font-size:24px; color:var(--gold);
  background:linear-gradient(160deg,#1a1a1a,#0f0f0f); box-shadow:inset 0 0 0 1px rgba(201,169,110,.14); }
.rel-body{ flex:1; min-width:0; }
.rel-name{ font-family:var(--serif-display); font-size:19px; color:var(--ink); line-height:1.2; }
.rel-note{ font-size:13px; color:var(--ink-3); margin-top:3px; }
.rel-arrow{ color:var(--ink-4); transition:color .3s; flex:0 0 auto; }
.rel-item:hover .rel-arrow{ color:var(--gold); }

/* note pyramid pill */
.note-pill{ display:inline-flex; align-items:center; font-size:14px; color:var(--ink); padding:7px 14px;
  border-radius:var(--r-pill); background:rgba(201,169,110,.07); box-shadow:inset 0 0 0 1px rgba(201,169,110,.20); }

/* ---- Revenue: Amazon CTA ---- */
.buy-cta{ width:100%; margin-top:var(--sp-2); }
.pr-tag{ font-family:var(--sans-label); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4); }
.buy-note{ color:var(--ink-4); font-size:12px; margin-top:var(--sp-3); line-height:1.6; }
.price-band{ font-family:var(--serif-display); color:var(--gold); font-size:20px; }

/* ---- Revenue: Bounty grid ---- */
.bounty{ display:grid; gap:var(--sp-3); }
.bounty-card{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4);
  border-radius:var(--r-md); background:rgba(201,169,110,.05);
  box-shadow:inset 0 0 0 1px rgba(201,169,110,.18);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.bounty-card:hover{ box-shadow:inset 0 0 0 1px rgba(201,169,110,.5); transform:translateY(-2px); }
.bounty-card .bemoji{ font-size:24px; flex:0 0 auto; }
.bounty-card .btitle{ color:var(--ink); font-size:15px; font-weight:500; }
.bounty-card .bdesc{ color:var(--ink-3); font-size:12.5px; margin-top:2px; }
.bounty-card .barrow{ margin-left:auto; color:var(--gold); font-size:18px; }

/* ---- AdSense slot (reserve height → CLS safe) ---- */
.ad-slot{ margin:var(--sp-6) auto; min-height:100px; display:grid; place-items:center;
  color:var(--ink-4); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }

/* list pages: filter bar */
.filterbar{ display:flex; flex-direction:column; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.filter-group{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.filter-group .glabel{ font-family:var(--sans-label); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-right:var(--sp-2); }
.result-count{ color:var(--ink-3); font-size:14px; }
.result-count .num{ color:var(--gold); }

/* sticky buy rail on desktop */
@media(min-width:861px){ .buy-rail{ position:sticky; top:84px; } }
[hidden]{ display:none !important; }