.menu-item--products { position: static; }
.product-menu__trigger-row { display: flex; align-items: center; gap: .25rem; }
.product-menu__toggle { display: inline-grid; width: 1.2rem; height: 1.8rem; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .72; }
.product-menu__toggle svg { width: .65rem; height: .45rem; transition: transform 180ms ease; }
.menu-item--products.is-open .product-menu__toggle svg { transform: rotate(180deg); }

.product-mega { position: absolute; z-index: 5; top: calc(100% + .7rem); left: 50%; width: min(64rem, calc(100vw - 3rem)); padding: 1.35rem; border: 1px solid rgba(16,54,44,.13); border-radius: .9rem; background: linear-gradient(180deg,#fbfaf7 0%,#f4f3ed 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.96),0 .15rem .35rem rgba(10,25,21,.08),0 1.35rem 2.8rem rgba(10,25,21,.18),0 2.8rem 5.5rem rgba(10,25,21,.12); color: #123b31; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -.55rem) scale(.985); transform-origin: 50% 0; transition: opacity 180ms ease, transform 210ms cubic-bezier(.2,.72,.22,1), visibility 180ms; }
.menu-item--products.is-open .product-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.product-mega::before { position: absolute; right: 0; bottom: 100%; left: 0; height: .8rem; content: ""; }
.product-mega::after { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 rgba(16,54,44,.04); content: ""; pointer-events: none; }
.product-mega__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .15rem .2rem 1rem; border-bottom: 1px solid rgba(16,54,44,.16); }
.product-mega__head p { margin: 0; color: #49665d; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.site-header--overlay .primary-menu .product-mega__head a { display: inline-flex; align-items: center; gap: .65rem; color: #123b31; font-size: .72rem; font-weight: 700; text-decoration: none; }
.product-mega__head .button__icon, .product-mega__footer .button__icon, .product-mega__card > .button__icon { width: .9rem; height: .9rem; transition: transform 180ms ease; }
.product-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; padding: .75rem 0 .9rem; perspective: 75rem; }
.product-mega__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; min-width: 0; padding: .9rem 1rem 1rem; border: 1px solid rgba(16,54,44,.1); border-radius: .7rem; background: rgba(255,255,255,.56); box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 .35rem .8rem rgba(13,47,38,.07); color: #123b31; text-decoration: none; transform: translateY(0); transition: background-color 180ms ease,border-color 180ms ease,box-shadow 220ms ease,transform 220ms cubic-bezier(.2,.72,.22,1); }
.product-mega__media { grid-column: 1 / -1; display: grid; height: 8.8rem; place-items: center; margin-bottom: .8rem; overflow: hidden; }
.product-mega__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 8.8rem; object-fit: contain; filter: drop-shadow(0 .65rem .55rem rgba(17,45,37,.12)); transform: scale(.94) translateY(0); transition: filter 240ms ease,transform 240ms ease; }
.product-mega__copy { display: grid; min-width: 0; gap: .25rem; }
.product-mega__copy strong { color: #123b31; font-size: .94rem; line-height: 1.3; }
.product-mega__copy small { color: #6c817a; font-size: .7rem; line-height: 1.45; }
.product-mega__card > .button__icon { align-self: center; margin-left: .65rem; color: #07894c; }
.product-mega__card:hover, .product-mega__card:focus-visible { border-color: rgba(7,137,76,.24); background: rgba(247,251,247,.94); box-shadow: inset 0 1px 0 #fff,0 .85rem 1.45rem rgba(13,47,38,.14); outline: none; transform: translateY(-.32rem); }
.product-mega__card:hover .product-mega__media img, .product-mega__card:focus-visible .product-mega__media img { filter: drop-shadow(0 .9rem .7rem rgba(17,45,37,.18)); transform: scale(.985) translateY(-.15rem); }
.product-mega__card:hover > .button__icon, .product-mega__card:focus-visible > .button__icon, .product-mega__head a:hover .button__icon, .product-mega__footer:hover .button__icon { transform: translateX(.25rem); }
.site-header--overlay .primary-menu .product-mega__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .05rem; padding: .8rem 1rem; border-top: 1px solid rgba(16,54,44,.14); border-radius: .55rem; color: #123b31; text-decoration: none; transition: background-color 180ms ease,box-shadow 180ms ease; }
.site-header--overlay .primary-menu .product-mega__footer:hover,.site-header--overlay .primary-menu .product-mega__footer:focus-visible { background: rgba(255,255,255,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); outline: none; }
.site-header--overlay .primary-menu .product-mega a::after { display: none; }
.product-mega__footer span { display: flex; align-items: baseline; gap: 1rem; }
.product-mega__footer small { color: #6c817a; font-size: .68rem; }
.product-mega__footer strong { font-size: .8rem; }

@media (max-width: 74rem) {
  .menu-item--products { position: relative; }
  .product-menu__trigger-row { border-bottom: 1px solid var(--hqess-border); }
  .product-menu__link { flex: 1; border-bottom: 0 !important; }
  .product-menu__toggle { width: 3rem; height: 3rem; flex: 0 0 auto; }
  .product-mega { position: static; width: 100%; max-height: 0; padding: 0; border: 0; border-radius: 0; background: rgba(255,255,255,.04); box-shadow: none; opacity: 1; visibility: visible; overflow: hidden; pointer-events: none; transform: none; transition: max-height 260ms ease; }
  .menu-item--products.is-open .product-mega { max-height: 75rem; pointer-events: auto; transform: none; }
  .product-mega::before, .product-mega::after, .product-mega__head { display: none; }
  .product-mega__grid { display: block; padding: 0; perspective: none; }
  .site-header--overlay .primary-menu .product-mega__card { display: grid; grid-template-columns: 3.25rem minmax(0,1fr) auto; min-height: 4.6rem; align-items: center; padding: .65rem .75rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 0; background: transparent; box-shadow: none; color: #e7ede8; transform: none; }
  .product-mega__media { grid-column: 1; width: 2.75rem; height: 2.75rem; margin: 0 .5rem 0 0; }
  .product-mega__media img { max-height: 2.75rem; }
  .product-mega__copy strong { color: #f2f4f2; font-size: .85rem; }
  .product-mega__copy small { color: #aebbb4; font-size: .68rem; }
  .site-header--overlay .primary-menu .product-mega__footer { margin: 0; padding: .8rem .75rem; border-top: 0; color: #e7ede8; }
  .product-mega__footer span { display: grid; gap: .15rem; }
  .product-mega__footer small { color: #aebbb4; }
}

@media (prefers-reduced-motion: reduce) {
  .product-mega, .product-menu__toggle svg, .product-mega__card, .product-mega__media img, .product-mega .button__icon { transition: none; }
}
