/* ===== Category navigation =====
   Root list (left) + panel (right) share one height: the header dropdown uses --category-panel-height, the homepage
   sidebar takes the height of the hero beside it. Anything longer scrolls inside its own column, the page never grows. */
.mega-menu {
  --root-width:var(--category-root-width);
  display:grid;
  grid-template-columns:var(--root-width) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
}

.mega-menu:not(.category-sidebar) {
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:42;
  height:min(var(--category-panel-height),calc(100dvh - var(--header-height) - 16px));
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:0 14px 30px #1c304629;
}

.mega-categories,
.mega-groups,
.mega-children {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#b9c4d3 transparent;
}

.mega-categories::-webkit-scrollbar,
.mega-groups::-webkit-scrollbar,
.mega-children::-webkit-scrollbar {
  width:8px;
}

.mega-categories::-webkit-scrollbar-thumb,
.mega-groups::-webkit-scrollbar-thumb,
.mega-children::-webkit-scrollbar-thumb {
  background:#c3ccd8;
  border-radius:8px;
}

.mega-categories::-webkit-scrollbar-thumb:hover,
.mega-groups::-webkit-scrollbar-thumb:hover,
.mega-children::-webkit-scrollbar-thumb:hover {
  background:#9fb0c6;
}

.mega-categories {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px;
  border-right:1px solid var(--color-border);
  background:#fafbfc;
}

.mega-categories>button {
  position:relative;
  display:flex;
  align-items:center;
  flex:1 0 36px;
  max-height:48px;
  gap:10px;
  width:100%;
  padding:0 8px 0 12px;
  font-size:14px;
  line-height:1.2;
  text-align:left;
  border-radius:6px;
  white-space:nowrap;
}

.mega-categories>button .icon {
  width:18px;
  height:18px;
  color:var(--color-primary);
}

.mega-categories .menu-label,
.mega-group .menu-label {
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mega-categories>button:hover {
  color:var(--color-primary);
  background:#f1f5fb;
}

/* hover previews, a click pins: the pinned row is clearly stronger than a previewed one */
.mega-categories>button.active {
  color:var(--color-primary);
  background:#eaf0fa;
}

.mega-categories>button.is-pinned {
  background:#dde8f7;
  font-weight:700;
}

.mega-categories>button.is-pinned::before {
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:3px;
  border-radius:3px;
  background:var(--color-primary);
}

.mega-categories>button.active .menu-chevron {
  color:var(--color-primary);
}

.mega-panels {
  min-width:0;
  min-height:0;
}

.mega-panel {
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

.mega-panel[hidden] {
  display:none;
}

.mega-head {
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
  padding:12px 20px 11px 24px;
  border-bottom:1px solid var(--color-border);
}

.mega-head h2 {
  min-width:0;
  margin:0;
  font-size:19px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mega-view-all {
  margin-left:auto;
  flex:0 0 auto;
  font-size:13.5px;
  font-weight:600;
  color:var(--color-primary);
  white-space:nowrap;
}

.mega-view-all:hover,
.mega-view-all:focus-visible {
  text-decoration:underline;
}

.mega-close {
  width:30px;
  height:30px;
  flex:0 0 auto;
  color:var(--color-text-muted);
}

.mega-close .icon {
  width:16px;
  height:16px;
}

.mega-body {
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}

.mega-body.has-groups {
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
}

.mega-groups {
  margin:0;
  padding:8px 8px 12px 16px;
  list-style:none;
}

.mega-body.has-groups .mega-groups {
  border-right:1px solid var(--color-border);
}

.mega-body:not(.has-groups) .mega-groups {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  grid-auto-rows:min-content;
  gap:0 24px;
  padding:12px 20px 16px 24px;
  align-content:start;
}

.mega-group {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:38px;
  padding:6px 10px;
  font-size:14.5px;
  line-height:1.3;
  text-align:left;
  color:var(--color-text);
  border-radius:6px;
  white-space:nowrap;
}

.mega-group:hover,
.mega-group:focus-visible {
  color:var(--color-primary);
  background:#f1f5fb;
}

.mega-group.active {
  color:var(--color-primary);
  background:#eaf0fa;
  font-weight:600;
}

.mega-group .menu-chevron {
  color:#9aa6b5;
}

.mega-group.active .menu-chevron {
  color:var(--color-primary);
}

.mega-children {
  padding:14px 24px 18px;
}

.mega-children-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.mega-children-title {
  min-width:0;
  font-size:14.5px;
  font-weight:700;
  color:var(--color-dark);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mega-children-all {
  flex:0 0 auto;
  margin-left:auto;
  font-size:13.5px;
  font-weight:600;
  color:var(--color-primary);
  white-space:nowrap;
}

.mega-children-title:hover,
.mega-children-title:focus-visible {
  color:var(--color-primary);
}

.mega-children-all:hover,
.mega-children-all:focus-visible {
  text-decoration:underline;
}

.mega-children ul {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:0 28px;
  margin:0;
  padding:0;
  list-style:none;
}

.mega-children li a {
  display:block;
  padding:6px 0;
  font-size:14px;
  line-height:1.35;
  color:var(--color-text-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mega-children li a:hover,
.mega-children li a:focus-visible {
  color:var(--color-primary);
}

/* Homepage: the root list sits beside the hero and is exactly as tall as the banners; its panel opens over them. */
.home-hero {
  --category-root-width:270px;
  position:relative;
  display:grid;
  grid-template-columns:var(--category-root-width) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
}

@media(min-width:1025px) {
  .home-hero {
    min-height:360px;
  }
}

.home-hero>.hero-grid {
  align-self:start;
}

.mega-menu.category-sidebar {
  display:block;
  position:static;
  min-height:0;
  overflow:visible;
}

/* height:0 + min-height:100% = as tall as the hero row without making the row taller itself */
.category-sidebar .mega-categories {
  height:0;
  min-height:100%;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:#fff;
}

.category-sidebar .mega-panels {
  position:absolute;
  top:0;
  bottom:0;
  left:var(--category-root-width);
  right:0;
  z-index:35;
  background:#fff;
  border:1px solid var(--color-border);
  border-left:0;
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  box-shadow:0 18px 40px #1c304624;
  overflow:hidden;
}

.category-sidebar .mega-panels[hidden] {
  display:none;
}

@media(max-width:1399px) {
  .home-hero,
  .mega-menu {
    --category-root-width:250px;
  }}

@media(max-width:1199px) {
  .home-hero,
  .mega-menu {
    --category-root-width:234px;
  }
  .home-hero {
    gap:14px;
  }
  .mega-body.has-groups {
    grid-template-columns:minmax(200px,250px) minmax(0,1fr);
  }}