/* Top navigation: clothesline + garment buttons */
/* ---------- layout shell ---------- */
.app-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(15,11,22,0.82);
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:12px;font-family:'Unbounded',sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-0.5px;flex-shrink:0;}
.brand-monogram{width:auto;height:30px;transition:transform .25s ease;}
.brand:hover .brand-monogram{transform:scale(1.05);}
.brand-logo{display:block;height:40px;width:auto;max-width:150px;object-fit:contain;transition:transform .25s ease;}
.brand:hover .brand-logo{transform:scale(1.05);}
.brand-monogram path{fill:none;stroke:var(--indigo);stroke-width:22;stroke-linecap:round;stroke-linejoin:round;}

.app-nav.garment-nav{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand line actions";
  align-items:start;gap:14px;
  background:rgba(253,251,246,0.92);
  padding:12px 28px 8px;
}
.garment-nav .brand{grid-area:brand;padding-top:2px;}
/* ---------- clothesline ---------- */
.clothesline-wrap-xl{grid-area:line;position:relative;display:flex;justify-content:center;align-items:flex-start;min-width:0;overflow:visible;}
.clothesline-rope-xl{position:absolute;top:0;left:13px;width:calc(100% - 26px);height:60px;pointer-events:none;}
.clothesline-ring{position:absolute;z-index:2;top:3px;width:26px;height:26px;pointer-events:none;}
.clothesline-ring-left{left:0;}
.clothesline-ring-right{right:0;}
.nav-links{position:relative;z-index:1;display:flex;gap:12px;align-items:flex-start;padding-top:4px;}

.garment-btn{width:112px;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;transform-origin:50% 0%;animation:garmentSway 4.6s ease-in-out infinite;}
.garment-btn svg{transition:transform .25s ease, filter .25s ease;transform-origin:50% 8%;}
.garment-btn:hover svg{transform:scale(1.06);filter:drop-shadow(0 6px 8px rgba(92,83,64,0.18));}
.garment-btn:focus-visible{outline:none;}
.garment-btn:focus-visible .garment-label{outline:2px solid var(--indigo);outline-offset:2px;}
.garment-btn:nth-child(1){animation-delay:0s;}
.garment-btn:nth-child(2){animation-delay:.6s;}
.garment-btn:nth-child(3){animation-delay:1.2s;}
.garment-btn:nth-child(4){animation-delay:.3s;}
.garment-btn:nth-child(5){animation-delay:.9s;}
.garment-btn:nth-child(6){animation-delay:1.5s;}
.garment-btn:nth-child(7){animation-delay:.45s;}
@keyframes garmentSway{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
.garment-label{font-size:0.76rem;font-weight:600;color:#6b6252;padding:3px 10px;border-radius:999px;white-space:nowrap;transition:background .2s ease,color .2s ease;}
.garment-btn:hover .garment-label{color:#2c2a22;background:rgba(138,125,100,0.1);}
.garment-btn.active .garment-label{color:var(--white);background:var(--indigo);}
@media (prefers-reduced-motion: reduce){.garment-btn{animation:none;}}

/* ---------- right actions ---------- */
.nav-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:12px;}
.profile-btn{
  width:46px;height:46px;border-radius:999px;padding:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, #fbe9a8, #f4d86b 70%);border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(92,83,64,0.16),0 6px 14px rgba(92,83,64,0.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.profile-btn svg{width:100%;height:100%;display:block;}
.profile-btn:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 0 0 1px rgba(92,83,64,0.22),0 10px 20px rgba(92,83,64,0.24);}
.profile-btn:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;}

.nav-admin-link{padding:7px 14px;border-radius:999px;background:var(--indigo);color:var(--yellow);font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap;}
.nav-admin-link:hover{background:var(--indigo-deep);}

/* ---------- tablet / mobile ---------- */
@media (max-width:900px){
  .app-nav.garment-nav{
    grid-template-columns:1fr auto;
    grid-template-areas:"brand actions" "line line";
    row-gap:6px;padding:10px 16px 6px;
  }
  .garment-nav .brand{padding-top:0;align-self:center;}
  .profile-btn{width:40px;height:40px;}
  .nav-links{gap:6px;padding-top:6px;}
  .garment-btn{width:min(96px, calc((100vw - 40px) / var(--nav-count, 5)));}
  .garment-btn svg{width:70px;height:105px;max-width:100%;}
}
@media (max-width:560px){
  .brand-monogram{height:24px;}
  .brand-logo{height:30px;max-width:110px;}
  .profile-btn{width:38px;height:38px;}
  .clothesline-ring{width:20px;height:20px;top:1px;}
  .clothesline-rope-xl{left:10px;width:calc(100% - 20px);height:40px;}
  .nav-links{gap:0;padding-top:6px;}
  .nav-links{overflow-x:clip;}
  .garment-btn{width:calc((100vw - 32px) / var(--nav-count, 5));max-width:72px;}
  .garment-btn svg{width:52px;height:78px;max-width:100%;}
  .garment-label{font-size:0.62rem;padding:2px 6px;white-space:normal;text-align:center;line-height:1.15;}
}
.nav-links button:not(.garment-btn){
  padding:9px 16px;border-radius:100px;font-size:0.92rem;font-weight:600;color:var(--text-dim);
  transition:all .15s ease;
}
.nav-links button:not(.garment-btn):hover{color:var(--text);background:var(--surface);}
.nav-links button.active:not(.garment-btn){color:#0f0b16;background:var(--grad-lime);}
.nav-cta{padding:10px 18px;border-radius:100px;background:var(--grad-main);font-weight:700;font-size:0.9rem;box-shadow:var(--shadow-glow);}
.nav-links-mobile-hint{display:none;}