/* ZOC_PUBLIC_MENU_STRUCTURE_V53
 * Media sizing and hierarchy mechanics only. The active template and its
 * Template Manager own colours, surfaces, spacing and submenu visual models.
 */
.zoc-menu-link-inner,.lsf-menu-link-inner,.jf-menu-link-inner{display:inline-flex;align-items:center;gap:8px;min-width:0}
.zoc-menu-icon,.lsf-menu-icon,.jf-menu-icon{width:20px;height:20px;object-fit:contain;flex:0 0 20px}
.zoc-menu-image,.lsf-menu-image,.jf-menu-image{width:32px;height:28px;object-fit:cover;flex:0 0 32px}
.zoc-menu-caret,.lsf-menu-caret,.jf-menu-caret{margin-inline-start:2px;font-size:10px;opacity:.7}

/* Luxury Storefront uses the native .lsf-mega/.lsf-mega-grid contract. */
.lsf-mega-grid{position:relative}
.lsf-mega-grid>.lsf-mega-branch-panel{display:none;grid-column:1/-1}
.lsf-mega-grid>a.lsf-mega-branch-trigger:hover+.lsf-mega-branch-panel,
.lsf-mega-grid>a.lsf-mega-branch-trigger:focus+.lsf-mega-branch-panel,
.lsf-mega-grid>a.lsf-mega-branch-trigger:focus-visible+.lsf-mega-branch-panel,
.lsf-mega-grid>.lsf-mega-branch-panel:hover,
.lsf-mega-grid>.lsf-mega-branch-panel:focus-within{display:block}
.lsf-mega-branch-panel>.lsf-mega-grid{margin-top:8px}

/* Neutral mechanics retained for other templates that use their legacy DOM. */
.zoc-nav li.has-children,.jf-nav-item{position:relative}
.zoc-menu-sub,.jf-submenu-v47{display:none}
.zoc-nav li:hover>.zoc-menu-sub,.zoc-nav li:focus-within>.zoc-menu-sub,
.jf-nav-item:hover>.jf-submenu-v47,.jf-nav-item:focus-within>.jf-submenu-v47{display:block}

@media(max-width:980px){
  .lsf-header .lsf-mega{display:none!important}
  .lsf-mega-grid>.lsf-mega-branch-panel{display:block}
}
@media(max-width:900px){
  .zoc-menu-sub li.has-children>.zoc-menu-sub{position:static}
  .jf-nav-item{display:flex;flex-direction:column;width:100%}
}