/* Maps Joomla markup onto the concept's classes. Extend as J2Commerce overrides are built. */
.nav .mod-menu { display: flex; gap: 4px; list-style: none; margin: 0 0 0 12px; padding: 0; }
.nav .mod-menu a, .nav .mod-menu .nav-header { font: 600 1.02rem/1 var(--font-head); color: var(--ink); text-decoration: none; padding: 12px 14px; border-radius: 6px; display: block; }
.home .nav .mod-menu a { color: #e8f1ee; }
.nav .mod-menu a:hover, .nav .mod-menu .active > a { background: var(--glass); color: var(--dark); }
.home .nav .mod-menu a:hover, .home .nav .mod-menu .active > a { background: rgba(255,255,255,.09); color: #fff; }
.nav .mod-menu li { position: relative; }
.nav .mod-menu ul { display: none; position: absolute; left: 0; top: 100%; min-width: 280px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px rgba(14,47,42,.16); padding: 8px; list-style: none; margin: 8px 0 0; z-index: 60; }
.nav .mod-menu li:hover > ul, .nav .mod-menu li:focus-within > ul { display: block; }
.nav .mod-menu ul a, .home .nav .mod-menu ul a { color: var(--ink); }
.nav .mod-menu ul a:hover, .home .nav .mod-menu ul a:hover { background: var(--glass); color: var(--dark); }
.breadcrumb, .mod-breadcrumbs { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; font-size: .9rem; color: var(--steel); }
/* J2Commerce: its markup is not styled here yet. Generate the overrides in the J2Commerce admin
   (J2Commerce > Design > Template Overrides), then style them with the classes from site.css
   (.rowp rows, .pdp buy box, .opt option chips, .totals cart summary). */

/* The thin dark strip above the header is the empty 'utility' module position: hide it when nothing is in it */
.utility:not(:has(.wrap *)) { display: none; }