/* merchzing.com top menu (scripts/mz-nav.mjs): drop-down panels on a computer, an accordion drawer on a phone.
   Self-contained: works under home.css and mz.css. Soft shadows only. */
.mn{--mn-ink:#0F1B3A;--mn-muted:#566074;--mn-line:#EADFCB;--mn-tint:#FFF1D6;--mn-orange:#FF6A13;--mn-teal:#0AA6B0;
  margin-left:auto;display:flex;align-items:center;font-family:var(--f-body,var(--body,system-ui,sans-serif))}
.top .wrap{position:relative}
.mn *{box-sizing:border-box}
.mn-links{display:flex;align-items:center;gap:2px}
.mn-item{position:relative;display:block}
.mn-tr{font:700 .97rem var(--f-body,var(--body,system-ui,sans-serif));color:var(--mn-ink);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:.55em .85em;border-radius:99px;text-decoration:none;white-space:nowrap;transition:background .15s,transform .12s}
.mn-tr svg{width:15px;height:15px;transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.mn-tr:hover,.mn-item.open>.mn-tr{background:var(--mn-tint)}
.mn-tr:active{transform:scale(.96)}
.mn-item.open>.mn-tr svg{transform:rotate(180deg)}
.mn-tr[aria-current="page"],.mn-tr.here{background:var(--mn-tint)}
.mn-tr:focus-visible,.mn-li:focus-visible,.mn-it:focus-visible,.mn-feat:focus-visible,.mn-login:focus-visible,.mn-burger:focus-visible{outline:3px solid var(--mn-teal);outline-offset:2px}
.mn-end{display:flex;align-items:center;gap:6px;margin-left:10px;padding-left:12px;border-left:1px solid var(--mn-line)}
.mn-login{display:inline-flex;align-items:center;gap:6px;font:700 .95rem var(--f-body,var(--body,system-ui,sans-serif));color:var(--mn-ink);text-decoration:none;padding:.5em .8em;border-radius:99px;white-space:nowrap;transition:background .15s}
.mn-login:hover{background:var(--mn-tint)}
.mn-login svg{width:17px;height:17px}
.mn-cta{white-space:nowrap}

/* the panels */
.mn-panel{position:absolute;top:calc(100% + 14px);left:0;z-index:40;width:max-content;max-width:min(100vw - 32px,420px);background:#fff;border-radius:22px;padding:12px;
  box-shadow:0 24px 60px rgba(15,27,58,.16),0 4px 14px rgba(15,27,58,.06);opacity:0;visibility:hidden;transform:translateY(8px) scale(.985);transform-origin:top left;
  transition:opacity .16s ease,transform .22s cubic-bezier(.2,.9,.3,1),visibility 0s .22s}
.mn-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.mn-item.open>.mn-panel{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .22s cubic-bezier(.2,.9,.3,1),visibility 0s}
.mn-wide{display:grid;grid-template-columns:210px minmax(340px,1fr) 220px;gap:6px 18px;width:min(880px,100vw - 32px);max-width:none;padding:18px}
.mn-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mn-h{margin:0 0 6px;padding:0 10px;font:800 .74rem var(--f-display,var(--head,system-ui,sans-serif));letter-spacing:.06em;text-transform:uppercase;color:var(--mn-muted)}
.mn-two>div{column-count:2;column-gap:8px}
.mn-two .mn-li{break-inside:avoid;margin-bottom:2px}
.mn-li{display:flex;align-items:center;gap:10px;padding:.55em .7em;border-radius:12px;font:600 .97rem var(--f-body,var(--body,system-ui,sans-serif));color:var(--mn-ink);text-decoration:none;transition:background .14s,transform .14s,padding .14s}
.mn-li i{width:12px;height:12px;border-radius:50%;flex:none;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.mn-li:hover{background:var(--mn-tint);transform:translateX(3px)}
.mn-li:hover i{transform:scale(1.35)}
.mn-li:active{transform:translateX(3px) scale(.98)}
.mn-feat{position:relative;grid-row:1;grid-column:3;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--mn-ink);background:var(--mn-tint);border-radius:18px;padding:10px 10px 14px;transition:transform .18s,box-shadow .18s}
.mn-feat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,27,58,.12)}
.mn-feat:active{transform:scale(.98)}
.mn-mos{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.mn-mos img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top;border-radius:9px;background:#fff}
.mn-feat b{font:800 1.02rem var(--f-display,var(--head,system-ui,sans-serif));padding:0 4px}
.mn-feat small{font-size:.86rem;color:var(--mn-muted);padding:0 4px}
.mn-go{position:absolute;right:12px;bottom:12px;width:30px;height:30px;border-radius:50%;background:var(--mn-orange);color:#fff;display:grid;place-items:center;transition:transform .2s}
.mn-go svg{width:16px;height:16px}
.mn-feat:hover .mn-go{transform:translateX(4px)}
.mn-list{width:340px;max-width:100%}
.mn-it{display:flex;align-items:center;gap:12px;padding:.65em .7em;border-radius:14px;text-decoration:none;color:var(--mn-ink);transition:background .14s,transform .14s}
.mn-it:hover{background:var(--mn-tint);transform:translateX(3px)}
.mn-it:active{transform:translateX(3px) scale(.98)}
.mn-ic{flex:none;width:38px;height:38px;border-radius:12px;background:var(--mn-tint);color:var(--mn-orange);display:grid;place-items:center;transition:background .14s,color .14s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.mn-it:hover .mn-ic{background:var(--mn-orange);color:#fff;transform:rotate(-6deg) scale(1.06)}
.mn-ic svg{width:20px;height:20px}
.mn-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.mn-tx b{font:700 .98rem var(--f-body,var(--body,system-ui,sans-serif))}
.mn-tx small{font-size:.84rem;color:var(--mn-muted);line-height:1.35}

/* the phone */
.mn-burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:0;border-radius:14px;background:var(--mn-tint);cursor:pointer;transition:transform .12s}
.mn-burger:active{transform:scale(.94)}
.mn-bars{position:relative;width:20px;height:14px;display:block}
.mn-bars i{position:absolute;left:0;right:0;height:2.5px;border-radius:2px;background:var(--mn-ink);transition:transform .25s cubic-bezier(.3,1.3,.5,1),opacity .15s,top .25s}
.mn-bars i:nth-child(1){top:0}.mn-bars i:nth-child(2){top:5.5px}.mn-bars i:nth-child(3){top:11px}
.mn.open .mn-bars i:nth-child(1){top:5.5px;transform:rotate(45deg)}
.mn.open .mn-bars i:nth-child(2){opacity:0}
.mn.open .mn-bars i:nth-child(3){top:5.5px;transform:rotate(-45deg)}
.mn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:1020px){
  .mn-burger{display:inline-flex}
  .mn-links{position:absolute;left:0;right:0;top:100%;display:block;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow:auto;background:#fff;border-radius:0 0 24px 24px;padding:8px 16px 20px;
    box-shadow:0 24px 50px rgba(15,27,58,.16);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .22s cubic-bezier(.2,.9,.3,1),visibility 0s .22s}
  .mn.open .mn-links{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .22s cubic-bezier(.2,.9,.3,1),visibility 0s}
  .mn-item{border-bottom:1px solid var(--mn-line)}
  .mn-tr{width:100%;justify-content:space-between;padding:1em .4em;border-radius:12px;font-size:1.05rem}
  .mn-panel,.mn-wide{position:static;width:auto;max-width:none;box-shadow:none;border-radius:0;padding:0;opacity:1;visibility:visible;transform:none;display:none;transition:none}
  .mn-panel::before{display:none}
  .mn-item.open>.mn-panel{display:block;padding:0 0 12px;animation:mnIn .22s ease}
  .mn-wide{grid-template-columns:1fr;gap:10px}
  .mn-item.open>.mn-wide{display:grid}
  .mn-feat{grid-row:auto;grid-column:auto}
  .mn-list{width:auto}
  .mn-end{margin:16px 0 0;padding:0;border:0;flex-direction:column;align-items:stretch;gap:10px}
  .mn-login{justify-content:center;padding:.8em;background:var(--mn-tint);font-size:1rem}
  .mn-cta{justify-content:center;font-size:1.05rem}
}
@media(max-width:340px){.mn-two>div{column-count:1}}
@keyframes mnIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mn *,.mn-panel,.mn-links{transition:none!important;animation:none!important}}
/* the old header's own rules hid the links on a phone */
.top .mn .mn-tr{display:inline-flex}
@media(max-width:1020px){.top .mn .mn-tr{display:flex}.mn .mn-plain{display:flex}}