/* Product navigation: a destination link and an independent disclosure button. */
.product-nav{position:relative;display:flex;align-items:center;gap:.25rem}
.product-nav__toggle{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:.5rem;border:0;border-radius:.25rem;background:transparent;color:#111;cursor:pointer}
.product-nav__toggle[hidden],.product-nav__panel[hidden]{display:none}
.product-nav__toggle:hover{background:#F2F2EF}
.product-nav__toggle:focus-visible{outline:2px solid var(--hc-color-brand);outline-offset:3px}
.product-nav__toggle svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2}
.product-nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.product-nav__panel{margin:0;padding:.5rem;list-style:none;background:#fff;border:1px solid #D7DCDC;border-radius:.5rem;min-width:15rem}
.product-nav[data-ready] .product-nav__panel{position:absolute;z-index:30;top:100%;left:0;box-shadow:0 .5rem 1.5rem #00000014}
.navlinks .product-nav__panel a{display:flex;padding:.75rem 1rem;min-height:2.75rem;white-space:nowrap}
.product-nav__panel a:hover,.product-nav__panel a[aria-current="page"]{background:#F2F2EF}
.mobile-menu__links .mobile-product-link{font-size:1.25rem;padding-inline:1rem;border-inline-start:2px solid #D7DCDC}
@media(max-width:60rem){.product-nav{flex-wrap:wrap}.product-nav__panel{width:100%}.product-nav[data-ready] .product-nav__panel{position:static;box-shadow:none}}

/* Prototype mega menu: shared static markup, ready for a WP data source later.
   Preserve Hydrocell tokens, typography and 60rem navigation breakpoint. */
header.shell{position:relative;z-index:40}
.mega-menu{color:var(--hc-color-ink)}
.mega-menu summary,.mobile-products summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;cursor:pointer;min-block-size:2.75rem}
.mega-menu summary::-webkit-details-marker,.mobile-products summary::-webkit-details-marker{display:none}
.mega-menu>summary{font:700 var(--hc-text-s)/1.4 var(--hc-font-body);padding-block:.5rem}
.mega-menu summary:hover,.mobile-products summary:hover{color:var(--hc-color-brand)}
.mega-menu summary:focus-visible,.mobile-products summary:focus-visible{outline:2px solid var(--hc-color-brand);outline-offset:4px;border-radius:var(--hc-radius-button)}
.mega-menu__chevron{flex:0 0 .5rem;inline-size:.5rem;block-size:.5rem;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:rotate(45deg);margin-inline-end:.3rem;margin-block-start:-.25rem}
details[open]>summary>.mega-menu__chevron{transform:rotate(225deg);margin-block-start:.25rem}
.mega-menu__panel{position:absolute;inset-inline:var(--hc-gutter,2rem);inset-block-start:100%;z-index:40;padding:1.5rem 2rem 2rem;background:var(--hc-color-paper);border:1px solid #d7dcd9;border-block-start:3px solid var(--hc-color-brand);border-radius:0 0 .375rem .375rem;box-shadow:0 1rem 2rem #2426261a;max-block-size:calc(100dvh - 7rem);overflow-y:auto;overscroll-behavior:contain}
.mega-menu__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block-end:1rem;margin-block-end:1.5rem;border-block-end:1px solid #d7dcd9}
.mega-menu__top>span{color:var(--hc-color-ink);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.navlinks .mega-menu__top a{gap:.75rem;font-weight:700;color:var(--hc-color-brand)}
.mega-menu__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.mega-menu__group{min-inline-size:0}
.mega-menu__group h2{font:400 1.5rem/1.2 var(--hc-font-heading);margin:0 0 1rem}
.mega-menu ul,.mobile-products ul{list-style:none;padding:0;margin:0}
.navlinks .mega-menu__group a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-block-size:2.75rem;padding:.625rem .75rem;margin-inline:-.75rem;font:400 1rem/1.45 var(--hc-font-body);white-space:normal;border-radius:var(--hc-radius-button);overflow-wrap:anywhere}
.mega-menu__group a:hover,.mega-menu__group a[aria-current="page"],.mobile-products li a:hover,.mobile-products li a[aria-current="page"]{background:var(--hc-color-neutral);color:var(--hc-color-brand)}
.mega-menu__badge{display:inline-flex;flex-shrink:0;font:700 .6875rem/1.3 var(--hc-font-body);color:var(--hc-color-brand);border:1px solid currentColor;padding:.1875rem .375rem;border-radius:var(--hc-radius-button)}
/* The mobile dialog remains native, scrollable and keyboard accessible. */
.mobile-menu__inner{max-inline-size:44rem}
.mobile-menu__header{position:sticky;inset-block-start:0;background:var(--hc-color-paper);z-index:2;padding-block:.5rem}
.mobile-menu[open] .mobile-menu__close{position:static;inline-size:2.75rem;block-size:2.75rem;background:var(--hc-color-paper)}
.mobile-menu__links{align-items:stretch;justify-content:flex-start;gap:0;padding-block:1.5rem 2rem;flex:0 0 auto}
.mobile-menu__links>a,.mobile-products>summary{font:400 1.625rem/1.346154 var(--hc-font-heading);text-align:start;padding-block:1rem;border-block-end:1px solid #d7dcd9;min-block-size:3.5rem}
.mobile-products{min-inline-size:0}
.mobile-products__content{padding-block:.5rem 1rem}
.mobile-menu__links .mobile-products__all{display:flex;justify-content:space-between;gap:1rem;text-align:start;font:700 .9375rem/1.493334 var(--hc-font-body);padding:.75rem .5rem;color:var(--hc-color-brand);min-block-size:2.75rem}
.mobile-product-group{border-block-end:1px solid #d7dcd9}
.mobile-product-group>summary{font:400 1.25rem/1.365 var(--hc-font-heading);padding:.875rem .5rem}
.mobile-product-group ul{padding:0 .5rem .75rem}
.mobile-menu__links .mobile-product-group a{display:flex;justify-content:space-between;gap:.5rem;text-align:start;font:400 .9375rem/1.546667 var(--hc-font-body);padding:.75rem;min-block-size:2.75rem;overflow-wrap:anywhere;border-radius:var(--hc-radius-button)}
@media(max-width:60rem){
 .mega-menu__panel{position:static;padding:1rem;max-block-size:none;box-shadow:none}
 .mega-menu__grid{grid-template-columns:1fr;gap:1.5rem}
 .mega-menu__top{flex-wrap:wrap}
}
@media(min-width:60.001rem) and (max-width:75rem){
 .mega-menu__panel{inset-inline:1.5rem;padding:1.25rem 1.5rem 1.5rem}
 .mega-menu__grid{gap:1.5rem}
 .mega-menu__group h2{font-size:1.375rem}
}