/* Mega-menu layout — design-agnostic. Structure only: no colours, fonts, borders, shadows or
   motion; the design layer adds those. Every knob is a custom property, so a design sets its own
   values once and a panel's settings override them per panel (inline style on the panel).

   The rule it encodes: the layout follows the blocks. Any number of groups, an optional feature
   area, items that wrap instead of squeezing. Measured on LampsAndPlants: groups grown .82 and the
   feature area 1.5, from zero, gap 52px, reproduced the prototype's fixed grid to the pixel. */

[data-menu-root] { position: relative; }                 /* panels hang from the header */

[data-menu-panel] {
  position: absolute; left: 0; right: 0; top: 100%;
  visibility: hidden; opacity: 0;
  z-index: var(--mm-z, 40);
}
[data-menu-panel].is-open { visibility: visible; opacity: 1; }

.mm-panel__inner {
  display: flex; flex-wrap: wrap;
  gap: var(--mm-row-gap, 40px) var(--mm-gap, 52px);
  max-width: var(--mm-max-width, none); margin-inline: auto;
}
.mm-panel[data-align="center"] .mm-panel__inner { justify-content: center; }

.mm-group   { flex: var(--mm-group-grow, .82) 1 0; min-width: var(--mm-group-min, 120px); }
.mm-feature {
  flex: var(--mm-feature-grow, 1.5) 1 0;
  min-width: var(--mm-feature-min, 260px);
  max-width: var(--mm-feature-max, 640px);
}
.mm-panel[data-feature-position="left"] .mm-feature { order: -1; }

.mm-feature__items { display: grid; gap: var(--mm-item-gap, 20px);
  grid-template-columns: repeat(var(--mm-per-row, 2), minmax(0, 1fr)); }
.mm-feature[data-stack] .mm-feature__items { grid-template-columns: minmax(0, 1fr); }

.mm-media { aspect-ratio: var(--mm-ratio, 4 / 3); overflow: hidden; }
.mm-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The breakpoint where the nav becomes a drawer is the design's: set the same value here and in
   data-menu-desktop. Below it, panels are never shown; the drawer renders the same blocks. */
@media (max-width: 989px) { [data-menu-panel] { display: none; } }