/* SGC theme: the header mega menu (11 Nov 2026, output\design-plan\menu-audit-2026-11-11.md). Loads on every page after the
   kit; the kit files stay untouched.
   The kit's pane was a two-track grid: the photo tiles, then ONE 240px column of links. The rebuilt menu has real columns
   per range (the Christmas section has eight: trees by size, style and brand, lights by type and colour, Lemax collections,
   wreaths and garlands, the Christmas pages), so a pane is now its tiles across the top and its columns underneath, flowing
   as newspaper columns (.mcols, the header template's wrapper) so one short column and eight uneven ones both pack tidily.
   The menu is shared chrome: nothing here depends on the page it is printed on. */

.mega .pane.on{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
.mega .tiles a{aspect-ratio:16/10}
.mega .mcols{columns:4 168px;column-gap:var(--s5)}
.mega .mcols>div{break-inside:avoid;padding-bottom:var(--s4)}
.mega .mcols h3{margin-bottom:6px}
.mega .mcols .links{gap:0}
.mega .mcols .links a{align-items:flex-start;padding:6px 8px;font-size:16px;line-height:1.3}
.mega .mcols .links a .ic{flex:none;margin-top:2px}
.mega .mcols .links small{font-size:13px;color:var(--muted);white-space:nowrap}
.mega .mcols .links a:hover small{color:inherit}

/* a section taller than the window scrolls inside the menu (the header is sticky, so the page cannot scroll it into view) */
@media (min-width:761px){
  .mega{max-height:calc(100vh - var(--hdr-h));overflow-y:auto;overscroll-behavior:contain}
}

/* the phone menu: two columns of links under the tiles */
@media (max-width:760px){
  .mega .pane.on{gap:var(--s4)}
  .mega .mcols{columns:2;column-gap:10px}
  .mega .mcols>div{padding-bottom:var(--s3)}
  .mega .mcols .links a{padding:6px 4px;gap:6px;font-size:15px}
  .mega .mcols .links a .ic{width:14px;height:14px;margin-top:3px}
  .mega .mcols .links small{display:block;white-space:normal}
}

/* the site search form in the menu's left column: the kit's `.mega .secs button` (the section buttons: no background, full
   width) also caught the form's Search button, which printed as bare text beside a squashed field; this gives it back the
   primary button. */
.mega .secs .extra .sform .btn{width:auto;flex:none;gap:8px;justify-content:center;border:2px solid var(--green);border-radius:var(--pill);background:var(--green);color:#fff;font:700 16px/1 var(--font)}
.mega .secs .extra .sform .btn:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
@media (max-width:480px){
  .mega .secs .extra .sform .btn{flex:1 1 100%}
}