/* ===== FANTY — МЕНЮ «КОЛЛЕКЦИИ» В ШАПКЕ =====
   Общий файл для fanty.html и fanty-cart.html; разметку панели строит collections.js.
   Панель висит под полосой шапки АБСОЛЮТНО: на главной шапка sticky и стоит в потоке,
   и если бы панель росла внутри потока, при открытии вся страница съезжала бы вниз. */

.nav-col-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-cond);font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);transition:color .2s}
.nav-col-btn:hover,.nav-col-btn[aria-expanded="true"]{color:var(--ink)}
.nav-col-btn:focus-visible{outline:1px solid var(--sand);outline-offset:6px}
.nav-col-btn svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.nav-col-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

/* шапка превращается в карточку: сплошной фон + тень; капсула при этом раздаётся вширь.
   Фон именно сплошной: даже 3% прозрачности пропускали из-под панели чёрные заголовки страницы */
nav.menu-open{background:var(--paper);box-shadow:0 10px 34px rgba(13,13,13,.12)}
nav.scrolled.menu-open{max-width:min(760px,calc(100% - 24px));border-color:var(--line-soft);border-bottom-color:transparent;border-radius:29px 29px 0 0}

.nav-panel{position:absolute;left:-1px;right:-1px;top:100%;display:grid;grid-template-rows:0fr;
  background:var(--paper);border:1px solid transparent;border-top:0;opacity:0;visibility:hidden;
  box-shadow:0 30px 44px -26px rgba(13,13,13,.28);
  transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s linear .4s}
nav.menu-open .nav-panel{grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s}
nav.scrolled .nav-panel{border-color:var(--line-soft);border-radius:0 0 29px 29px}
.np-clip{min-height:0;overflow:hidden}

.np-body{max-width:760px;margin:0 auto;padding:0 clamp(20px,3vw,30px) clamp(20px,2.6vw,28px)}
.np-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 8px;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand-dim)}
.np-head span+span{color:var(--light)}
.np-main{display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:clamp(20px,3vw,32px);align-items:start}

.np-list{list-style:none;margin:0;padding:0}
.np-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:baseline;column-gap:12px;padding:9px 0 8px;
  border-bottom:1px solid var(--line-soft);color:var(--ink);text-decoration:none;outline:none}
.np-idx{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--light)}
/* кириллицы в Bebas Neue нет — имена коллекций набраны Oswald, он и так фолбэк --font-display */
.np-name{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(24px,2.5vw,29px);line-height:1.1;letter-spacing:.02em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .4s cubic-bezier(.22,1,.36,1),color .2s}
.np-name small{font-family:var(--font-mono);font-weight:400;font-size:9px;letter-spacing:.18em;color:var(--light);margin-left:10px;vertical-align:.45em}
.np-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--gray);transition:color .2s}
.np-row:hover .np-name,.np-row:focus-visible .np-name,.np-row.is-hot .np-name{transform:translateX(8px);color:var(--sand-dim)}
.np-row:hover .np-count,.np-row.is-hot .np-count{color:var(--ink)}

.np-preview{position:relative;aspect-ratio:3/4;background:var(--bg);overflow:hidden;margin-top:12px}
.np-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;opacity:0;transform:scale(.96);
  transition:opacity .35s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.np-preview img.on{opacity:1;transform:none}

/* появление как в gugo: пункты влетают каскадом из-за угла кнопки, с пружинкой */
@media(prefers-reduced-motion:no-preference){
  nav.menu-open .np-head{animation:npFade .35s .05s both}
  nav.menu-open .np-row{animation:npIn .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(90ms + var(--i,0) * 55ms)}
  nav.menu-open .np-preview{animation:npRise .6s .18s cubic-bezier(.22,1,.36,1) both}
}
@keyframes npIn{from{opacity:0;transform:translate(48px,-36px)}to{opacity:1;transform:none}}
@keyframes npFade{from{opacity:0}to{opacity:1}}
@keyframes npRise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

@media(max-width:860px){
  .np-main{grid-template-columns:minmax(0,1fr)}
  .np-preview{display:none}
  .np-body{padding:0 20px 16px}
  .np-name{font-size:27px}
}