/* ============================================================
   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;
  }
  /* USBM_MM_DRAWER (2026-09-07): the mobile drawer is FIXED under the sticky header so it
     opens wherever the visitor is on the page. --mm-drawer-top is set by megamenu.js from the
     live bottom edge of .header (it varies with the utility bar and the WP admin bar). */
  .mm-nav.is-open .mm-top{
    position:fixed; left:0; right:0; top:var(--mm-drawer-top,125px);
    max-height:calc(100vh - var(--mm-drawer-top,125px) - var(--usbm-cc-h,0px));/*USBM_MM_CC*/
    overflow:auto; -webkit-overflow-scrolling:touch;
    background:#202f5e; z-index:80;
    padding-bottom:12px;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  }
  .mm-item{ display:block; border-top:1px solid var(--mm-line); }
  /* USBM_MM_ALIGN (2026-09-07): left-align every label off its icon so the four items with a
     caret and the three without start at the same x. space-between was centring the first four
     and right-aligning the rest. */
  .mm-link{ width:100%; justify-content:flex-start; gap:12px; border-radius:0; padding:14px 14px; text-align:left; }
  .mm-link .mm-caret{ margin-left:auto; }
  .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}
/* ------------------------------------------------------------------
   Tight-desktop fit (mm-fit, Aug 2026; re-tightened 2026-09-09 when the Express link became "Express Service", ~50px wider)
   The 7 top-level items need ~1156px (920px of text + 7x32px of link
   padding + 6x2px gap) but the row only gets viewport - 56px. Between
   981px, where the desktop nav takes over from the burger, and ~1227px
   that pushed the whole page sideways: 3px at 1200, 179px at 1024.
   Step the link padding and type down through that band instead.

   Selector must be .mm-nav .mm-top .mm-link (0,3,0): overrides.css
   loads after this file and carries font-size:16px !important on
   .mm-nav .mm-link (0,2,0), so anything weaker is ignored.
   flex-wrap is a backstop only - each tier is sized to stay on one row.
   ------------------------------------------------------------------ */
@media (min-width:981px){
  .mm-top{flex-wrap:wrap;min-width:0}
}
@media (min-width:1181px) and (max-width:1300px){
  .mm-nav .mm-top .mm-link{padding-left:8px;padding-right:8px} /* USBM_MM_FIT_2026_09_09: was 11px; "Express Service" label (+50px) */
}
@media (min-width:1081px) and (max-width:1180px){
  .mm-nav .mm-top .mm-link{padding-left:6px;padding-right:6px;font-size:15px !important;gap:5px} /* USBM_MM_FIT_2026_09_09: was 8px */
}
@media (min-width:981px) and (max-width:1080px){
  .mm-top{gap:0}
  .mm-nav .mm-top .mm-link{padding-left:5px;padding-right:5px;font-size:14px !important;gap:5px} /* USBM_MM_FIT_2026_09_09: was 6px */
}
/* 981-1010px is the tightest point of the band: 14px type still needed
   916px against 910px available and tipped onto a second row. */
@media (min-width:981px) and (max-width:1010px){
  .mm-nav .mm-top .mm-link{font-size:13px !important}
}