<nav class="mm-dep" aria-label="Swiss Grid Department Store menu">

  <!-- Utility bar -->
  <div class="utility-bar">
    <a href="#">Store Locator</a>
    <a href="#">Order Tracker</a>
    <a href="#">Gift Cards</a>
    <a href="#">Sign In</a>
  </div>

  <ul class="nav-bar" role="menubar">

    <!-- DEPARTMENTS -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        Departments <span class="count" aria-hidden="true">4</span>
      </button>
      <div class="mega mega-dept" role="menu">

        <div class="dept-tile" aria-hidden="true">
          <div class="dept-tile-pattern">
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
          </div>
          <div class="dept-eyebrow">Shop By</div>
          <div class="dept-name">All Depart&shy;ments</div>
          <div class="dept-count">4 departments &middot; 280+ categories</div>
        </div>

        <div class="dept-col women">
          <div class="dept-col-header">
            <span class="dept-label">Women</span>
            <span class="dept-num">94 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Clothing <span class="n">48</span></a></li>
            <li><a href="#" role="menuitem">Shoes <span class="n">22</span></a></li>
            <li><a href="#" role="menuitem">Bags &amp; Purses <span class="n">16</span></a></li>
            <li><a href="#" role="menuitem">Jewellery <span class="n">18</span></a></li>
            <li><a href="#" role="menuitem">Swimwear <span class="new-tag">New</span></a></li>
            <li><a href="#" role="menuitem">Lingerie <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Sportswear <span class="n">14</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Women</a></div>
        </div>

        <div class="dept-col men">
          <div class="dept-col-header">
            <span class="dept-label">Men</span>
            <span class="dept-num">72 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Clothing <span class="n">38</span></a></li>
            <li><a href="#" role="menuitem">Shoes <span class="n">18</span></a></li>
            <li><a href="#" role="menuitem">Bags &amp; Wallets <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Grooming <span class="n">10</span></a></li>
            <li><a href="#" role="menuitem">Sportswear <span class="n">16</span></a></li>
            <li><a href="#" role="menuitem">Accessories <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Tailoring <span class="new-tag">New</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Men</a></div>
        </div>

        <div class="dept-col kids">
          <div class="dept-col-header">
            <span class="dept-label">Kids</span>
            <span class="dept-num">58 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Girls (2&ndash;16) <span class="n">22</span></a></li>
            <li><a href="#" role="menuitem">Boys (2&ndash;16) <span class="n">20</span></a></li>
            <li><a href="#" role="menuitem">Babies &amp; Toddlers <span class="n">18</span></a></li>
            <li><a href="#" role="menuitem">School Uniform <span class="n">10</span></a></li>
            <li><a href="#" role="menuitem">Shoes <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Toys &amp; Play</a></li>
            <li><a href="#" role="menuitem">Back-to-School <span class="sale-tag">Sale</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Kids</a></div>
        </div>

        <div class="dept-col home">
          <div class="dept-col-header">
            <span class="dept-label">Home</span>
            <span class="dept-num">56 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Furniture <span class="n">24</span></a></li>
            <li><a href="#" role="menuitem">Bedding <span class="n">16</span></a></li>
            <li><a href="#" role="menuitem">Kitchen &amp; Dining <span class="n">20</span></a></li>
            <li><a href="#" role="menuitem">Lighting <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Rugs &amp; Textiles <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Garden <span class="n">10</span></a></li>
            <li><a href="#" role="menuitem">New Arrivals <span class="new-tag">New</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Home</a></div>
        </div>

        <div class="mega-footer">
          <div class="f-left">
            <a href="#">New In This Week</a>
            <a href="#">Bestsellers</a>
            <a href="#">Trending Now</a>
            <a href="#" class="f-highlight">&#10024; Summer Sale &mdash; Up to 50% Off</a>
          </div>
          <a href="#">View Full Sitemap &rarr;</a>
        </div>
      </div>
    </li>

    <!-- LIFESTYLE -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">
        Lifestyle <span class="count" aria-hidden="true">3</span>
      </button>
      <div class="mega mega-life" role="menu">
        <div class="dept-tile" aria-hidden="true">
          <div class="dept-tile-pattern">
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
          </div>
          <div class="dept-eyebrow">Shop By</div>
          <div class="dept-name">Life&shy;style</div>
          <div class="dept-count">3 sections &middot; 110+ categories</div>
        </div>
        <div class="dept-col beauty">
          <div class="dept-col-header">
            <span class="dept-label">Beauty</span>
            <span class="dept-num">40 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Skincare <span class="n">18</span></a></li>
            <li><a href="#" role="menuitem">Fragrance <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Makeup <span class="n">20</span></a></li>
            <li><a href="#" role="menuitem">Haircare <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Wellness <span class="new-tag">New</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Beauty</a></div>
        </div>
        <div class="dept-col sport">
          <div class="dept-col-header">
            <span class="dept-label">Sport</span>
            <span class="dept-num">36 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Running <span class="n">14</span></a></li>
            <li><a href="#" role="menuitem">Gym &amp; Training <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Yoga &amp; Pilates <span class="n">10</span></a></li>
            <li><a href="#" role="menuitem">Cycling <span class="n">8</span></a></li>
            <li><a href="#" role="menuitem">Outdoor &amp; Hiking <span class="n">10</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Sport</a></div>
        </div>
        <div class="dept-col travel">
          <div class="dept-col-header">
            <span class="dept-label">Travel</span>
            <span class="dept-num">34 categories</span>
          </div>
          <ul class="sub-list">
            <li><a href="#" role="menuitem">Luggage <span class="n">12</span></a></li>
            <li><a href="#" role="menuitem">Carry-ons <span class="n">8</span></a></li>
            <li><a href="#" role="menuitem">Travel Accessories <span class="n">16</span></a></li>
            <li><a href="#" role="menuitem">Packing Cubes <span class="n">6</span></a></li>
            <li><a href="#" role="menuitem">Passport Holders <span class="new-tag">New</span></a></li>
          </ul>
          <div class="view-all-row"><a href="#">All Travel</a></div>
        </div>
        <div class="mega-footer">
          <div class="f-left">
            <a href="#">Staff Picks</a>
            <a href="#">Gift Guides</a>
            <a href="#" class="f-highlight">&#10024; New Wellness Arrivals</a>
          </div>
          <a href="#">View All Lifestyle &rarr;</a>
        </div>
      </div>
    </li>

    <!-- BRANDS -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">Brands</button>
      <div class="mega mega-brands" role="menu">
        <div class="brand-col">
          <div class="brand-col-title">Fashion</div>
          <ul class="brand-list">
            <li><a href="#" role="menuitem">Calvin Klein</a></li>
            <li><a href="#" role="menuitem">Ralph Lauren</a></li>
            <li><a href="#" role="menuitem">Tommy Hilfiger</a></li>
            <li><a href="#" role="menuitem">BOSS</a></li>
            <li><a href="#" role="menuitem">Polo Sport</a></li>
          </ul>
        </div>
        <div class="brand-col">
          <div class="brand-col-title">Footwear</div>
          <ul class="brand-list">
            <li><a href="#" role="menuitem">Nike</a></li>
            <li><a href="#" role="menuitem">Adidas</a></li>
            <li><a href="#" role="menuitem">New Balance</a></li>
            <li><a href="#" role="menuitem">Dr. Martens</a></li>
            <li><a href="#" role="menuitem">Clarks</a></li>
          </ul>
        </div>
        <div class="brand-col">
          <div class="brand-col-title">Beauty</div>
          <ul class="brand-list">
            <li><a href="#" role="menuitem">The Ordinary</a></li>
            <li><a href="#" role="menuitem">Charlotte Tilbury</a></li>
            <li><a href="#" role="menuitem">NARS</a></li>
            <li><a href="#" role="menuitem">Aesop</a></li>
            <li><a href="#" role="menuitem">Tatcha</a></li>
          </ul>
        </div>
        <div class="brand-col">
          <div class="brand-col-title">Home</div>
          <ul class="brand-list">
            <li><a href="#" role="menuitem">HAY</a></li>
            <li><a href="#" role="menuitem">Muuto</a></li>
            <li><a href="#" role="menuitem">&amp;Tradition</a></li>
            <li><a href="#" role="menuitem">Ferm Living</a></li>
            <li><a href="#" role="menuitem">Menu</a></li>
          </ul>
        </div>
        <div class="mega-footer">
          <div class="f-left">
            <a href="#">View All Brands A&ndash;Z</a>
            <a href="#" class="f-highlight">&#10024; Brand of the Month: Cos</a>
          </div>
          <a href="#">Brand Directory &rarr;</a>
        </div>
      </div>
    </li>

    <!-- ABOUT -->
    <li class="nav-item" role="none">
      <button type="button" class="nav-trigger" role="menuitem" aria-haspopup="true" aria-expanded="false">About</button>
    </li>

  </ul>
</nav>

/* ─── 04 Swiss Grid Department Store — full taxonomy mega menu ──────
   Imports Playfair Display + Jost + DM Mono. The faint grid overlay
   from the original (body::before) is scoped to .mm-dep::before so
   it stays inside the demo. Drop-shadow box-shadow on the panel
   reads as a print-style hard offset. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=DM+Mono:wght@300;400&family=Jost:wght@200;300;400;500&display=swap');

.mm-dep {
  --mm-dep-ivory: #f7f4ee;
  --mm-dep-paper: #ede9e0;
  --mm-dep-linen: #e5dfd3;
  --mm-dep-ink: #1a1714;
  --mm-dep-ink-mid: rgba(26, 23, 20, 0.55);
  --mm-dep-ink-dim: rgba(26, 23, 20, 0.3);
  --mm-dep-rule: rgba(26, 23, 20, 0.1);
  --mm-dep-rule-mid: rgba(26, 23, 20, 0.18);
  --mm-dep-accent: #2d6a4f;
  --mm-dep-accent2: #b5451b;
  --mm-dep-mono: 'DM Mono', ui-monospace, monospace;

  position: relative;
  background: var(--mm-dep-ivory);
  font-family: 'Jost', system-ui, sans-serif;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  box-sizing: border-box;
}

.mm-dep *,
.mm-dep *::before,
.mm-dep *::after { box-sizing: border-box; }

/* faint grid lines — scoped to wrapper, not body */
.mm-dep::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--mm-dep-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--mm-dep-rule) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 1;
}

.mm-dep .utility-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 8px 32px;
  background: var(--mm-dep-ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 3;
}
.mm-dep .utility-bar a {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.mm-dep .utility-bar a:hover { color: rgba(255, 255, 255, 0.85); }

.mm-dep .nav-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mm-dep-ivory);
  border-bottom: 2px solid var(--mm-dep-ink);
  position: relative;
  z-index: 4;
}

.mm-dep .nav-item { position: relative; list-style: none; }

.mm-dep .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 26px;
  height: 60px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-dep-ink-mid);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--mm-dep-rule);
  cursor: pointer;
  user-select: none;
  transition: color 0.25s;
  position: relative;
}
.mm-dep .nav-bar .nav-item:first-child .nav-trigger { border-left: 1px solid var(--mm-dep-rule); }

.mm-dep .nav-trigger .count {
  font-family: var(--mm-dep-mono);
  font-size: 8px;
  color: var(--mm-dep-ink-dim);
  letter-spacing: 0;
  transition: color 0.25s;
}
.mm-dep .nav-item:hover .nav-trigger,
.mm-dep .nav-item.mm-open .nav-trigger { color: var(--mm-dep-ink); }
.mm-dep .nav-item:hover .nav-trigger .count,
.mm-dep .nav-item.mm-open .nav-trigger .count { color: var(--mm-dep-accent); }

.mm-dep .nav-trigger::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mm-dep-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mm-dep .nav-item:hover .nav-trigger::after,
.mm-dep .nav-item.mm-open .nav-trigger::after { transform: scaleX(1); }

/* ── Mega panel ── */
.mm-dep .mega {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--mm-dep-ivory);
  border: 2px solid var(--mm-dep-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: grid;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--mm-dep-ink);
  min-width: min(900px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  z-index: 5;
}
.mm-dep .nav-item:hover .mega,
.mm-dep .nav-item.mm-open .mega {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.mm-dep .mega-dept   { grid-template-columns: 200px repeat(4, 1fr); }
.mm-dep .mega-life   { grid-template-columns: 220px repeat(3, 1fr); }
.mm-dep .mega-brands { grid-template-columns: repeat(4, 1fr); min-width: min(760px, calc(100vw - 32px)); }

/* ── Department tile ── */
.mm-dep .dept-tile {
  border-right: 2px solid var(--mm-dep-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px;
  background: var(--mm-dep-paper);
  min-height: 400px;
  position: relative;
  overflow: hidden;
}
.mm-dep .dept-tile-pattern {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  opacity: 0.06;
}
.mm-dep .dept-tile-pattern span {
  border-right: 1px solid var(--mm-dep-ink);
  border-bottom: 1px solid var(--mm-dep-ink);
}
.mm-dep .dept-tile .dept-eyebrow {
  font-family: var(--mm-dep-mono);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--mm-dep-ink-dim);
  text-transform: uppercase;
  margin-bottom: 8px;
  position: relative;
}
.mm-dep .dept-tile .dept-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  color: var(--mm-dep-ink);
  line-height: 1.1;
  margin-bottom: 14px;
  position: relative;
}
.mm-dep .dept-tile .dept-count {
  font-family: var(--mm-dep-mono);
  font-size: 10px;
  font-weight: 300;
  color: var(--mm-dep-accent);
  letter-spacing: 0.1em;
  position: relative;
}

/* ── Sub-department column ── */
.mm-dep .dept-col {
  border-right: 1px solid var(--mm-dep-rule-mid);
  padding: 0;
}
.mm-dep .dept-col:last-of-type { border-right: none; }

.mm-dep .dept-col-header {
  padding: 16px 18px 12px;
  border-bottom: 2px solid var(--mm-dep-ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.mm-dep .dept-col-header .dept-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--mm-dep-ink);
  line-height: 1;
}
.mm-dep .dept-col-header .dept-num {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  color: var(--mm-dep-ink-dim);
  letter-spacing: 0.05em;
}

.mm-dep .dept-col.women .dept-col-header,
.mm-dep .dept-col.beauty .dept-col-header { background: #f0e8e4; }
.mm-dep .dept-col.men .dept-col-header,
.mm-dep .dept-col.sport .dept-col-header  { background: #e4eaf0; }
.mm-dep .dept-col.kids .dept-col-header,
.mm-dep .dept-col.travel .dept-col-header { background: #eaf0e6; }
.mm-dep .dept-col.home .dept-col-header   { background: #f0ece4; }

.mm-dep .sub-list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
}
.mm-dep .sub-list li { list-style: none; }

.mm-dep .sub-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--mm-dep-ink-mid);
  text-decoration: none;
  transition: color 0.2s, background 0.2s, padding-left 0.25s;
  border-bottom: 1px solid var(--mm-dep-rule);
  position: relative;
}
.mm-dep .sub-list li a:last-child { border-bottom: none; }
.mm-dep .sub-list li a .n {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  color: var(--mm-dep-ink-dim);
  letter-spacing: 0.05em;
  transition: color 0.2s;
  flex-shrink: 0;
}
.mm-dep .sub-list li a:hover {
  color: var(--mm-dep-ink);
  background: var(--mm-dep-paper);
  padding-left: 24px;
}
.mm-dep .sub-list li a:hover .n { color: var(--mm-dep-accent); }

.mm-dep .sub-list li a .new-tag,
.mm-dep .sub-list li a .sale-tag {
  font-family: var(--mm-dep-mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-dep-ivory);
  padding: 2px 6px;
  margin-left: 6px;
}
.mm-dep .sub-list li a .new-tag  { background: var(--mm-dep-accent); }
.mm-dep .sub-list li a .sale-tag { background: var(--mm-dep-accent2); }

.mm-dep .view-all-row {
  padding: 12px 18px;
  border-top: 2px solid var(--mm-dep-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mm-dep .view-all-row a {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mm-dep-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s;
}
.mm-dep .view-all-row a::after { content: '\2192'; }
.mm-dep .view-all-row a:hover { gap: 14px; }

/* ── Brands grid ── */
.mm-dep .brand-col {
  padding: 20px 22px;
  border-right: 1px solid var(--mm-dep-rule-mid);
}
.mm-dep .brand-col:last-of-type { border-right: none; }
.mm-dep .brand-col-title {
  font-family: var(--mm-dep-mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mm-dep-ink-dim);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mm-dep-rule-mid);
}
.mm-dep .brand-list { list-style: none; margin: 0; padding: 0; }
.mm-dep .brand-list li a {
  display: block;
  padding: 8px 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--mm-dep-ink-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--mm-dep-rule);
  transition: color 0.2s, padding-left 0.25s;
}
.mm-dep .brand-list li a:hover { color: var(--mm-dep-ink); padding-left: 8px; }

/* ── Mega footer ── */
.mm-dep .mega-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: var(--mm-dep-ink);
  flex-wrap: wrap;
  gap: 12px;
}
.mm-dep .mega-footer .f-left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mm-dep .mega-footer a {
  font-family: var(--mm-dep-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.mm-dep .mega-footer a:hover { color: #fff; }
.mm-dep .mega-footer .f-highlight { color: #f5c842 !important; }

/* Stagger */
.mm-dep .nav-item:hover .sub-list li,
.mm-dep .nav-item.mm-open .sub-list li { animation: mm-dep-up 0.35s ease both; }
.mm-dep .nav-item:hover .sub-list li:nth-child(1),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(1) { animation-delay: 0.04s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(2),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(2) { animation-delay: 0.08s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(3),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(3) { animation-delay: 0.12s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(4),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(4) { animation-delay: 0.16s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(5),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(5) { animation-delay: 0.20s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(6),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(6) { animation-delay: 0.24s; }
.mm-dep .nav-item:hover .sub-list li:nth-child(7),
.mm-dep .nav-item.mm-open .sub-list li:nth-child(7) { animation-delay: 0.28s; }

@keyframes mm-dep-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .mm-dep .nav-trigger { padding: 0 14px; font-size: 10px; }
  .mm-dep .mega-dept,
  .mm-dep .mega-life,
  .mm-dep .mega-brands {
    grid-template-columns: 1fr;
    min-width: calc(100vw - 24px);
  }
  .mm-dep .dept-tile { min-height: 160px; border-right: 0; border-bottom: 2px solid var(--mm-dep-ink); }
  .mm-dep .dept-col, .mm-dep .brand-col {
    border-right: 0;
    border-bottom: 1px solid var(--mm-dep-rule-mid);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-dep .mega,
  .mm-dep .sub-list li,
  .mm-dep .sub-list li a,
  .mm-dep .view-all-row a { transition: none; animation: none; }
}

(() => {
  document.querySelectorAll('.mm-noi .nav-item, .mm-cyb .nav-item, .mm-bio .nav-item, .mm-dep .nav-item, .mm-typ .nav-item, .mm-dea .nav-item').forEach(item => {
    const trigger = item.querySelector('.nav-trigger');
    if (!trigger) return;

    // Mouse + keyboard: toggle open on click / Enter / Space
    trigger.addEventListener('click', e => {
      e.preventDefault();
      const isOpen = item.classList.contains('mm-open');
      // Close any sibling that's open so only one panel shows at a time
      item.parentElement?.querySelectorAll('.nav-item.mm-open').forEach(other => {
        if (other !== item) other.classList.remove('mm-open');
        const otherBtn = other.querySelector('.nav-trigger');
        if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
      });
      item.classList.toggle('mm-open', !isOpen);
      trigger.setAttribute('aria-expanded', String(!isOpen));
    });
  });

  // Outside-click closes all open panels
  document.addEventListener('click', e => {
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      if (!item.contains(e.target)) {
        item.classList.remove('mm-open');
        const btn = item.querySelector('.nav-trigger');
        if (btn) btn.setAttribute('aria-expanded', 'false');
      }
    });
  });

  // Escape closes the currently open panel
  document.addEventListener('keydown', e => {
    if (e.key !== 'Escape') return;
    document.querySelectorAll('.mm-noi .nav-item.mm-open, .mm-cyb .nav-item.mm-open, .mm-bio .nav-item.mm-open, .mm-dep .nav-item.mm-open, .mm-typ .nav-item.mm-open, .mm-dea .nav-item.mm-open').forEach(item => {
      item.classList.remove('mm-open');
      const btn = item.querySelector('.nav-trigger');
      if (btn) btn.setAttribute('aria-expanded', 'false');
    });
  });
})();