/* ============================================================
   USB Makers — Mega Menu
   ============================================================ */
.mm-nav{
  --mm-ink:#1f2937; --mm-muted:#6b7280; --mm-line:#e6e8eb;
  --mm-hover:#f4f6f8; --mm-accent:#FF3D7F; --mm-bg:#fff;
  position:relative; background:#202f5e;
  border-top:1px solid #202f5e; border-bottom:1px solid #18224a;
  font-family:inherit; z-index:60;
}
.mm-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:8px; min-height:54px;
}

/* ---- top-level row ---- */
.mm-top{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; flex:1 1 auto; gap:2px; }
.mm-item{ position:static; display:flex; align-items:stretch; }
.mm-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:16px 16px; color:#fff; text-decoration:none;
  font-size:15px; font-weight:600; letter-spacing:.01em; line-height:1;
  border:0; background:none; cursor:pointer; white-space:nowrap;
  border-radius:8px 8px 0 0; transition:background .15s ease,color .15s ease;
}
.mm-link:hover,.mm-item.is-open>.mm-link{ background:rgba(255,255,255,.12); color:#fff; }
.mm-caret{ font-size:11px; color:rgba(255,255,255,.75); transform:translateY(1px); transition:transform .15s ease; }
.mm-item.is-open .mm-caret{ transform:translateY(1px) rotate(180deg); }

/* ---- quote CTA ---- */
.mm-quote.btn.btn-cta{
  flex:0 0 auto; margin-left:auto; white-space:nowrap;
  padding:11px 20px; border-radius:999px; font-weight:700; font-size:14px;
}
.mm-quote .arrow{ transition:transform .15s ease; }
.mm-quote:hover .arrow{ transform:translateX(3px); }

/* ---- mega panel ---- */
.mm-panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--mm-bg); border-top:1px solid var(--mm-line);
  box-shadow:0 24px 48px -16px rgba(15,23,42,.22);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:55;
}
.mm-item.is-open .mm-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.mm-panel-inner{
  max-width:var(--container); margin:0 auto; padding:24px;
  display:grid; grid-template-columns:288px 1fr; gap:28px;
  min-height:340px;
}

/* ---- left rail ---- */
.mm-rail{ border-right:1px solid var(--mm-line); padding-right:20px; }
.mm-rail-all{
  display:inline-block; margin:4px 0 12px; padding:2px 0;
  color:var(--mm-accent); font-weight:700; font-size:14px;
  text-decoration:underline; text-underline-offset:3px;
}
.mm-cats{ list-style:none; margin:0; padding:0; }
.mm-cats li{ margin:0; }
.mm-cat{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  color:var(--mm-ink); text-decoration:none; font-size:14.5px; font-weight:500;
  transition:background .12s ease,color .12s ease;
}
.mm-cat:hover,.mm-cat.is-active{ background:var(--mm-hover); }
.mm-cat.is-active{ font-weight:700; }
.mm-chev{ color:#c0c5cc; font-size:18px; line-height:1; transition:transform .12s ease,color .12s ease; }
.mm-cat:hover .mm-chev,.mm-cat.is-active .mm-chev{ color:var(--mm-accent); transform:translateX(2px); }

/* ---- right stage ---- */
.mm-stage{ position:relative; }
.mm-grid{ display:none; flex-wrap:wrap; gap:16px 12px; }
.mm-grid.is-active{ display:flex; }
.mm-prod{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:var(--mm-ink);
  width:113px; padding:4px; border-radius:10px; transition:background .12s ease,transform .12s ease;
}
.mm-prod:hover{ background:var(--mm-hover); transform:translateY(-2px); }
.mm-thumb{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:105px; margin:0 auto; aspect-ratio:1/1; background:none;
  overflow:visible;
}
.mm-thumb img{ width:94.4%; height:94.4%; object-fit:contain; }
.mm-pname{ font-size:13px; font-weight:600; text-align:center; line-height:1.3; color:#374151; }

/* ---- empty panel ---- */
.mm-empty{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; padding:24px 4px; color:var(--mm-muted); }
.mm-empty p{ margin:0; font-size:15px; }
.mm-empty-link{ color:var(--mm-accent); font-weight:700; text-decoration:none; }
.mm-empty-link:hover{ text-decoration:underline; }

/* ---- mobile burger (hidden on desktop) ---- */
.mm-burger{
  display:none; align-items:center; gap:8px;
  padding:10px 14px; margin:8px 0; border:1px solid var(--mm-line);
  background:#fff; border-radius:8px; font-weight:700; font-size:14px; color:var(--mm-ink); cursor:pointer;
}
.mm-burger-bars{ position:relative; width:18px; height:2px; background:currentColor; box-shadow:0 -6px currentColor,0 6px currentColor; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .mm-inner{ flex-wrap:wrap; padding:0 16px; gap:6px; }
  .mm-burger{ display:inline-flex; order:1; }
  .mm-quote.btn.btn-cta{ order:2; margin-left:auto; }
  .mm-top{
    order:3; flex:1 1 100%; flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .mm-nav.is-open .mm-top{ max-height:75vh; overflow:auto; padding-bottom:12px; }
  .mm-item{ display:block; border-top:1px solid var(--mm-line); }
  .mm-link{ width:100%; justify-content:space-between; border-radius:0; padding:14px 8px; }
  .mm-panel{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border-top:0; display:none;
  }
  .mm-item.is-open .mm-panel{ display:block; }
  .mm-panel-inner{ grid-template-columns:1fr; gap:0; padding:0 8px 12px; min-height:0; }
  .mm-rail{ border-right:0; padding-right:0; }
  .mm-stage{ display:none; }            /* thumbnails hidden on mobile; category links carry navigation */
  .mm-cat{ padding:12px; border-bottom:1px solid #f1f3f5; }
  .mm-cat .mm-chev{ color:var(--mm-accent); }
}

/* --- Custom USB Sticks showcase (mega-menu) --- */
.mmcs{position:relative;width:100%;aspect-ratio:16/9;max-height:560px;border-radius:14px;overflow:hidden;background:#f2f6f9}
.mmcs-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;pointer-events:none}
.mmcs-slide.is-on{opacity:1;pointer-events:auto}
.mmcs-slide img{width:100%;height:100%;object-fit:contain;display:block}