/* Full-width category columns inspired by the WTHD Products menu. */
.products-menu { position: static; }
.products-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 6px 5px #01010124;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.products-menu.is-open .products-menu-panel {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.products-menu-trigger { position: relative; }
.products-menu-trigger::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  bottom: -9px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.products-menu.is-open .products-menu-trigger { color: var(--orange); }
.products-menu.is-open .products-menu-trigger::after { transform: scaleX(1); }
.products-menu-inner { max-width: 1440px; margin: auto; padding: 60px 6% 24px; }
.products-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 24px;
}
.products-menu-category { min-width: 0; }
.products-submenu { display: none; }
.products-menu-category.is-expanded .products-submenu { display: block; }
.products-menu-panel a {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.products-category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  transition: color .2s ease;
}
.products-menu-chevron { display: none; flex-shrink: 0; }
.products-submenu a {
  display: block;
  padding: 8px 10px;
  margin-top: 8px;
  font-size: 16px;
  transition: background-color .2s ease, color .2s ease;
}
.products-submenu a:hover, .products-submenu a:focus-visible { background: var(--bg); color: var(--orange); }
.products-menu-category:hover > .products-category-link,
.products-category-link:focus-visible { color: var(--orange); }
.products-menu-panel a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.products-submenu .products-category-all { display: none; }
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  /* Fill the space from the trigger to the bottom edge of the header. */
  .products-menu.is-open::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 50%;
    bottom: 0;
    left: var(--products-trigger-left);
    width: var(--products-trigger-width);
  }
}
@media (max-width: 1100px) {
  .products-menu-inner { padding: 36px 4% 24px; }
  .products-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .products-menu { width: 100%; }
  .products-menu-trigger { display: table; margin-inline: auto; }
  .products-menu-panel {
    position: static;
    display: none;
    width: 100%;
    max-height: none;
    background: var(--panel);
    color: var(--text);
    box-shadow: none;
    transform: none;
    margin-top: 16px;
  }
  .products-menu.is-open .products-menu-panel { display: block; animation: products-menu-mobile .25s ease; }
  .products-menu-inner { padding: 12px; }
  .products-menu-grid { display: block; }
  .products-category-link { padding: 12px 0; margin: 0; font-size: 16px; }
  .products-menu-chevron { display: block; transition: transform .2s ease; }
  .products-category-link[aria-expanded="true"] { color: var(--orange); }
  .products-category-link[aria-expanded="true"] .products-menu-chevron { transform: rotate(90deg); }
  .products-submenu { display: none; border-left: 2px solid var(--orange); margin: 4px 0 12px; }
  .products-menu-category.is-expanded .products-submenu { display: block; animation: products-menu-mobile .25s ease; }
  .products-submenu .products-category-all { display: block; color: var(--orange); }
  .products-submenu a { font-size: 14px; }
  .products-submenu a:hover, .products-submenu a:focus-visible { background: var(--bg); color: var(--orange); }
  .navbar nav { max-height: calc(100dvh - 82px); overflow-y: auto; }
}
@media (min-width: 901px) and (hover: none), (min-width: 901px) and (pointer: coarse) {
  .products-menu { width: auto; }
  .products-menu-panel { position: absolute; top: 100%; left: 0; margin: 0; max-height: calc(100dvh - 88px); }
}
@keyframes products-menu-mobile { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .products-menu-panel, .products-menu-trigger::after,
  .products-menu-panel a, .products-menu-chevron { transition: none; }
  .products-menu.is-open .products-menu-panel,
  .products-menu-category.is-expanded .products-submenu { animation: none; }
}