/* Desktop "Categories" dropdown + mobile category list.
   Reuses the shop theme vars already defined in the header (--primary, etc.).
   Desktop (>=901px) shows the dropdown button + panel; the plain list shows in
   the mobile slideout (<=900px). Adjust the 900px breakpoint to match your nav's
   existing mobile breakpoint if it differs. */

.nav-dropdown { position: relative; display: inline-block; }
.nav-cat-mobile { display: none; }

.nav-dropdown-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; padding: 0;
}
.nav-dropdown-caret { font-size: .7em; transition: transform .15s ease; }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }

.nav-dropdown-panel {
  position: absolute; top: calc(100% + .55rem); left: 50%; transform: translateX(-50%);
  /* Room to breathe: two ~260px+ columns so names wrap at word boundaries
     (never mid-word), capped so it still fits smaller desktop viewports. */
  min-width: 560px; max-width: min(92vw, 760px);
  display: none; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: .45rem .9rem;
  /* Same colour as the nav bar (--secondary): the site's `.nav a` rule paints
     links in the bar's text colour, so a bar-coloured panel is the one
     background those names are guaranteed to read on. --on-secondary is the
     auto-contrast text colour, so shops with a white bar stay readable too. */
  background: var(--secondary, #fff); color: var(--on-secondary, #1d2b3a);
  border: 1px solid rgba(0, 0, 0, .18); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  padding: .8rem; z-index: 1200;
  overflow: hidden;   /* backstop: nothing ever paints past the rounded panel */
}
.nav-dropdown.open .nav-dropdown-panel { display: grid; }
/* little arrow pointing at the toggle */
.nav-dropdown-panel::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: var(--secondary, #fff);
}

/* Scoped under the panel so this outweighs the site's `.nav a` colour rule. */
.nav-dropdown-panel .nav-cat-tile {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .65rem; border-radius: 10px; min-width: 0;
  text-decoration: none; color: var(--on-secondary, #1d2b3a);
  white-space: normal;   /* long names wrap inside the tile, never overflow */
}
.nav-dropdown-panel .nav-cat-tile:hover { background: rgba(127, 127, 127, .25); }
.nav-cat-thumb {
  flex: 0 0 auto; width: 56px; height: 56px;
  border-radius: 10px; overflow: hidden; background: #eef0f4;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9aa3af; font-size: 1rem;
}
.nav-cat-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
/* flex/min-width: a flex item's implicit min-width is its content width, which
   is what let long names push past the panel — 0 restores normal wrapping.
   Wrapping is at WORD boundaries only (no overflow-wrap:anywhere): the wider
   columns give every word room, so no more "SPORTSW-EAR" mid-word breaks. */
.nav-cat-name { font-weight: 600; font-size: 1rem; line-height: 1.25; flex: 1 1 auto; min-width: 0; }

.nav-dropdown-panel .nav-cat-viewall {
  grid-column: 1 / -1; text-align: center;
  padding: .55rem; margin-top: .15rem;
  border-top: 1px solid rgba(127, 127, 127, .4);
  text-decoration: none; font-weight: 700; color: var(--on-secondary, #1d2b3a);
  white-space: normal;
}
.nav-dropdown-panel .nav-cat-viewall:hover { background: rgba(127, 127, 127, .25); border-radius: 8px; }

/* Mobile: hide the desktop dropdown, show the plain labelled list in the drawer. */
@media (max-width: 900px) {
  .nav-dropdown { display: none; }
  .nav-cat-mobile { display: block; }
}