@font-face {font-family:FuturaBk; src:url(/include/fonts/futurabk.woff)}
@font-face {font-family:FuturaHv; src:url(/include/fonts/futurahv.woff)}
@font-face {font-family:FuturaMd; src:url(/include/fonts/futuramd.woff)}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Hamburger menu (morph to cross) -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

#hamburger {
  --hamburger-transition-time:0.2s;
  --hamburger-ease:ease-in-out;
}

/* Ensure the hamburger <a> behaves like a flex container too */
#hamburger,
#menu .hamburger-link {align-items:center; display:flex; font-size:0; height:1.875rem; line-height:0;
                       justify-content:center; width:1.875rem; padding:0}

/* Normalize the SVG inside the hamburger */
#hamburger svg, .hamburger-icon {display:block; height:100%; vertical-align:middle; width:100%}

/* Outer wrapper: keeps the hamburger above other UI. */
#menu .hamburger {position:relative; z-index:200}

/* Clickable link: square hit area, centers SVG, spacing. */
#menu .hamburger-link {align-items:center; display:inline-flex; height:1.875rem; justify-content:center;
                       line-height:0; position:relative; width:1.875rem;
                       -webkit-tap-highlight-color:transparent; touch-action:manipulation}

/* Enlarge hit area to the right/bottom. */
#menu .hamburger-link::after{content:""; position:absolute; inset:0; right:-18px; bottom:-18px}

/* Root <svg>: scale to wrapper, no clipping on rotate. */
.hamburger-icon {height:100%; overflow:visible; pointer-events:none; width:100%}

/* Bars (<rect> in SVG): white fill, animate transform/opacity. */
.hamburger-icon .bar {fill:#FFFFFF;
                      transition:transform var(--hamburger-transition-time) var(--hamburger-ease),
                                 opacity var(--hamburger-transition-time) var(--hamburger-ease)}
/* Wrappers (<g in SVG>): shift whole bar, smooth transition. */
.hamburger-icon .bar-wrap {transition:transform var(--hamburger-transition-time) var(--hamburger-ease)}

/* Open state -> cross: shift top & bottom bars inward. */
#hamburger.is-locked .bar-wrap.top,
#hamburger.is-locked .bar-wrap.bottom {transform:translateX(4px)}

/* Open state -> cross: rotate into cross. */
.hamburger-icon .bar.top {transform-origin:0px 3px}
.hamburger-icon .bar.bottom {transform-origin:0px 27px}
#hamburger.is-locked .bar.top {transform:rotate(45deg)}
#hamburger.is-locked .bar.middle {opacity:0}
#hamburger.is-locked .bar.bottom {transform:rotate(-45deg)}

/* --- Mobile Landscape --- */
@media (max-width:859.98px) and (orientation:landscape)
{
  #hamburger .hamburger-icon {height:20px; width:20px}
  .hamburger-link {align-items:center; display:inline-flex; justify-content:center;
                   line-height:0; overflow:visible;position:relative}
  /* Invisible hit-area: ~44×44 target centered on the 20×20 icon. */
  .hamburger-link::before {content:""; inset:-12px; position:absolute}
}

/* +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ Menu +=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ */

#menu {float:left; position:relative}
#menu > div {
  --menu-fade:.25s;
  background:#F8F8F8; border:1px #007CC3 solid; box-shadow:0 0 0 2px #FFFFFF, 0 4px 8px rgba(0, 0, 0, 0.2);
  left:0; margin-top:6px; opacity:0; overflow:hidden; padding:0rem 0 0.75rem 1.25rem;
  position:absolute; top:100%; transform:translateY(-8px);
  transition:opacity var(--menu-fade) ease, transform var(--menu-fade) ease,
             visibility 0s linear var(--menu-fade);
  visibility:hidden; width:61.125rem; will-change:transform, opacity; z-index:100}

#menu.open > div {max-height:calc(100svh - 8rem); opacity:1; overflow-y:auto; overscroll-behavior:contain;
                  transition:opacity var(--menu-fade) ease, transform var(--menu-fade) ease,
                  visibility 0s linear 0s; transform:translateY(0); visibility:visible!important;
                  -webkit-overflow-scrolling:touch}

#menu ul, #menu li {list-style:none; margin:0; padding:0}
#menu p {all:unset; display:block; color:#000000; font-family:FuturaBk,sans-serif; font-size:.917rem; line-height:1.25rem}
#menu th {font-family:FuturaMd,sans-serif; font-weight:normal}
#menu td {padding:0}
#menu table {border-collapse:collapse; border-spacing:0; line-height:1.25rem}
#menu table tr {vertical-align:top}
#menu table td:nth-child(1) {padding-right:.625rem}
#menu table td:nth-child(5) {width:19%}

#menu .Heading, #menu .Heading a {color:#007CC3; font-family:FuturaHv,sans-serif; font-size:1.083rem; letter-spacing:.0625rem; line-height:1.3125rem}
#menu .HeadingMenuSection, #menu .HeadingMenuSection a {color:#00C070; font-family:FuturaMd,sans-serif; font-size:1rem}
#menu .DekTecMenu, #menu .DekTecMenu a {color:#606060; font-family:FuturaMd,sans-serif; font-size:1rem}
#menu .MoreMenu, #menu .MoreMenu a {color:#007CC3; font-family:FuturaMd,sans-serif; font-size:1rem}

#menu a {color:inherit; font-family:FuturaBk,sans-serif; font-size:.917rem; text-decoration:inherit}
#menu a:hover {color:inherit; text-decoration:underline}

#menu a.Black {color:#000000; text-decoration:none}
#menu a:hover.Black {color:#E01030; text-decoration:underline}
#menu a.Blue {color:#007CC3; font-family:FuturaMd; text-decoration:none}
#menu a:hover.Blue {color:#E01030; font-family:FuturaMd; text-decoration:underline}
#menu a.Bold {color:#505050; font-family:FuturaMd; text-decoration:none}
#menu a:hover.Bold {color:#E01030; font-family:FuturaMd; text-decoration:none}

#menu img {padding-right:.625rem}
#menu .Black {color:#000000}
#menu table .Heading {color:#007CC3; line-height:normal; padding-top:.625rem}
#menu table .HeadingMenuSection {padding-top:.9375rem; padding-bottom:.3125rem}
#menu table .DekTecMenu {padding-top:.9375rem}
#menu li.NewProduct {position:relative;}
#menu li.NewProduct::before {color:red; content:"new"; font-size:.833rem; font-style:italic; font-family:FuturaMd; margin-right:.3125rem; position:absolute; right:100%; top:-.3125rem}

#menu > div table {table-layout:fixed; width:100%}

/* Each cell becomes a column layout. */
#menu > div table td {position:relative; vertical-align:top; padding-bottom: 1.75rem }
#menu .MoreMenu {margin-top:auto; padding-top:.75rem }
#menu .MoreMenu
{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;               /* kill inline margins */
  padding-top: .5rem;      /* small separation from above content */
}

@media (max-width:859.98px)
{
  #menu > div {width:47rem}

  #menu table td:nth-child(1) {width:4.2rem!important}
  #menu table td:nth-child(2) {width:13.5rem!important}
  #menu table {line-height:1.1rem}

  #menu p, #menu a {font-size:.75rem}
  #menu .DekTecMenu, #menu .DekTecMenu a {font-size:.85rem}
  #menu .HeadingMenuSection, #menu .HeadingMenuSection a, #menu .MoreMenu, #menu .MoreMenu a {font-size:.8125rem}
  #menu .Heading, #menu .Heading a {font-size:.9375rem}
  #menu li.NewProduct::before {font-size:.6875rem}

  #menu > div {padding:0.5rem 0 0.75rem 0.4rem}
}

/* --- Desktop --- */
@media (min-width:860px)
{
  #menu::after{content:""; height:6px; left:0; position:absolute; top:100%; width:100%}
}

@media (max-width:859.98px) and (orientation:portrait)
{
  .topbar {position:relative}
  #menu { position: static; float: none; }

  /* Use the original desktop width and let it overflow to the right. */
  #menu > div {
    position: absolute;     /* anchor to #menu again (old way) */
    top: 100%;
    margin-top: 6px;
    left: -0.6rem;          /* your previous alignment offset */
    right: 0;
    max-height: calc(100svh - 8rem);
    max-width:none;
    width: auto;
    overflow-x: auto;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* keep your fade/slide animation */
  }

  #menu.open > div table {width:50rem !important}

    /* Let the table keep fixed layout, but give col 1 more room. */
  #menu > div table {table-layout:fixed; max-width:48rem}
   /* Override the inline 7.5rem. */
  #menu > div table td:nth-child(1) {width:6rem !important }
}

@media (max-width:859.98px) and (orientation:landscape)
{
  .topbar {position:relative}
  #menu {position:static; float:none}

  #menu > div {
    left:50%;
    margin-top:0;
    position:absolute;
    right:auto;
    top:100%;
    transform:translateX(-50%);
    width:calc(100vw - 2rem);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #menu.open > div {max-height:calc(100svh - 4rem); transform:translateX(-50%) translateY(0)}
}