/* Products navigation mega menu. The rules stay scoped to this menu so the
   product grids, carousels, and mobile navigation keep their existing styles. */
@media (min-width:1000px) {
  /* The grid aligns to the same centered content line as the desktop header.
     The panel starts at the physical viewport edge only to paint the growing
     left surplus white on wide displays. */
  :root {
    --qt-products-menu-anchor:max(
      calc(var(--qt-container-gutter,48px) / 2),
      calc((100vw - var(--qt-content,1290px)) / 2)
    );
    --qt-products-menu-grid-width:min(
      930px,
      calc(100vw - var(--qt-products-menu-anchor) - 28px)
    );
    --qt-products-menu-right-gutter:24px;
  }

  /* Keep the page's scrollbar gutter reserved while the menu locks body
     scrolling. Without this, the header/container widens by the scrollbar
     width and the pointer can miss the fixed panel during the transition. */

  body.qt-products-menu-open::after {
    content:"";
    position:fixed;
    z-index:850;
    inset:var(--qt-products-menu-overlay-top,var(--qt-header-height)) 0 0;
    background:rgba(17,24,29,.52);
    pointer-events:none;
  }

  body.qt-products-menu-open {
    overflow:hidden;
  }

  /* The document root is the actual scrolling element in Chromium. Lock it
     together with body so the page scrollbar disappears while the panel keeps
     its own scroll container. */
  html.qt-products-menu-open {
    overflow:hidden;
  }

  .qt-header,
  .qt-navbar,
  .qt-navbar__inner,
  .qt-nav,
  .qt-nav>ul,
  .qt-nav__has-submenu { overflow:visible; }

  .qt-products-mega-menu {
    position:fixed;
    /* Keep the panel attached to the bottom of the full header, not the
       Products trigger's own line box. */
    top:var(--qt-products-menu-top,var(--qt-header-height))!important;
    left:0;
    right:auto;
    z-index:920;
    display:grid;
    grid-template-columns:minmax(320px,362px) minmax(420px,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:58px;
    width:calc(
      var(--qt-products-menu-anchor) +
      var(--qt-products-menu-grid-width) +
      var(--qt-products-menu-right-gutter)
    );
    height:calc(100vh - var(--qt-products-menu-top,var(--qt-header-height)));
    max-height:calc(100vh - var(--qt-products-menu-top,var(--qt-header-height)));
    margin:0;
    padding:0 var(--qt-products-menu-right-gutter) 30px var(--qt-products-menu-anchor);
    box-sizing:border-box;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#9aa5ad transparent;
    background:#fff;
    box-shadow:none;
    text-transform:none;
  }

  .qt-header.is-sticky .qt-products-mega-menu {
    top:var(--qt-products-menu-top,var(--qt-sticky-height))!important;
    height:calc(100vh - var(--qt-products-menu-top,var(--qt-sticky-height)));
    max-height:calc(100vh - var(--qt-products-menu-top,var(--qt-sticky-height)));
  }

  .qt-products-mega-menu[aria-hidden="true"] {
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    pointer-events:none;
  }

  .qt-products-mega-menu[aria-hidden="false"] {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  .qt-products-mega-menu__categories,
  .qt-products-mega-menu__categories>ul {
    min-width:0;
    min-height:0;
  }

  .qt-products-mega-menu__categories {
    overflow:visible;
    padding-left:14px;
    box-sizing:border-box;
    background:#fff;
  }

  .qt-products-mega-menu::-webkit-scrollbar { width:10px; }
  .qt-products-mega-menu::-webkit-scrollbar-track { background:transparent; }
  .qt-products-mega-menu::-webkit-scrollbar-thumb {
    min-height:42px;
    border:2px solid #fff;
    border-radius:999px;
    background:#9aa5ad;
  }
  .qt-products-mega-menu::-webkit-scrollbar-thumb:hover { background:#71808a; }

  .qt-products-mega-menu__categories>ul {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
  }

  .qt-products-mega-menu__categories>ul>li { min-width:0; }

  .qt-products-mega-menu__category {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 90px;
    min-height:90px;
    padding:0!important;
    overflow:hidden;
    border:1px solid #e4e0c8;
    border-radius:12px;
    background:#eeece4;
    color:#0b2f4b!important;
    text-decoration:none;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
  }

  .qt-products-mega-menu__category:hover,
  .qt-products-mega-menu__category:focus-visible {
    border-color:var(--qt-accent);
    background:#eeece4;
    box-shadow:0 3px 12px rgba(20,29,37,.08);
    outline:none;
  }

  .qt-products-mega-menu__category.is-current {
    border-color:var(--qt-accent);
    background:#eeece4;
  }

  .qt-products-mega-menu__category--all {
    grid-template-columns:1fr;
    min-height:64px;
    background:#eeece4;
  }

  .qt-products-mega-menu__category--all .qt-products-mega-menu__category-copy {
    padding:10px 20px;
  }

  .qt-products-mega-menu__category-copy {
    display:flex;
    min-width:0;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:10px 14px 10px 20px;
  }

  .qt-products-mega-menu__category-copy strong {
    display:block;
    overflow:hidden;
    color:#0b2f4b;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-transform:none!important;
    transition:color .18s ease,text-decoration-color .18s ease;
  }

  .qt-products-mega-menu__category:hover .qt-products-mega-menu__category-copy strong,
  .qt-products-mega-menu__category:focus-within .qt-products-mega-menu__category-copy strong {
    text-decoration-line:underline;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
    text-decoration-color:currentColor;
  }

  .qt-products-mega-menu__category-copy small {
    display:-webkit-box;
    overflow:hidden;
    color:#53616b;
    font-size:12px;
    font-weight:400;
    line-height:1.3;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    text-transform:none!important;
  }

  .qt-products-mega-menu__category-media {
    display:grid;
    place-items:center;
    min-width:0;
    padding:8px;
    border-left:1px solid #e9e5d1;
    background:#fff;
  }

  .qt-products-mega-menu__category-media img {
    display:block;
    width:100%;
    height:100%;
    max-height:72px;
    object-fit:contain;
    transition:none;
  }

  .qt-products-mega-menu__category--all .qt-products-mega-menu__category-media {
    display:none;
  }

  .qt-products-mega-menu__category:hover .qt-products-mega-menu__category-media img,
  .qt-products-mega-menu__category:focus-visible .qt-products-mega-menu__category-media img { transform:none; }

  .qt-products-mega-menu__promo {
    position:relative;
    display:block!important;
    min-height:360px;
    height:360px;
    max-height:100%;
    align-self:start;
    margin:0;
    padding:0!important;
    overflow:hidden;
    border:1px solid #e4e0c8;
    border-radius:12px;
    background:#f8f7ef;
    color:#0b2f4b!important;
    text-decoration:none;
    text-transform:none;
    isolation:isolate;
  }

  .qt-products-mega-menu__promo::before {
    content:none;
  }

  .qt-products-mega-menu__promo-copy {
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    flex-direction:column;
    gap:12px;
    width:58%;
    height:auto;
    padding:68px 0 0 46px;
    box-sizing:border-box;
    text-align:left;
  }

  .qt-products-mega-menu__promo-eyebrow {
    color:#0b6b9e;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
  }

  .qt-products-mega-menu__promo-copy strong {
    max-width:260px;
    color:#101820;
    font-size:28px;
    line-height:1.12;
    text-transform:none!important;
  }

  .qt-products-mega-menu__promo-copy>span:not(.qt-products-mega-menu__promo-eyebrow):not(.qt-button) {
    max-width:255px;
    color:#0b2f4b;
    font-size:14px;
    font-weight:600;
    line-height:1.45;
    text-transform:none!important;
  }

  .qt-products-mega-menu__promo .qt-button {
    position:absolute;
    z-index:3;
    left:46px;
    bottom:58px;
    align-self:auto;
    margin:0;
    padding:14px 20px;
    border-radius:0;
    background:#1c6b9e;
    color:#fff;
    white-space:nowrap;
  }

  .qt-products-mega-menu__promo .qt-button:hover,
  .qt-products-mega-menu__promo .qt-button:focus-visible {
    background:#0b2f4b;
    color:#fff;
  }

  .qt-products-mega-menu__promo-media {
    position:absolute;
    z-index:0;
    inset:0;
    display:flex;
    min-width:0;
    height:100%;
    align-items:center;
    justify-content:flex-end;
    padding:0 36px 0 0;
    box-sizing:border-box;
  }

  .qt-products-mega-menu__promo-media img {
    display:block;
    width:205px;
    height:205px;
    max-width:46%;
    object-fit:contain;
    object-position:center;
    border:12px solid #fff;
    background:#fff;
    filter:none;
    transition:none;
  }

  .qt-products-mega-menu__promo:hover .qt-products-mega-menu__promo-media img,
  .qt-products-mega-menu__promo:focus-within .qt-products-mega-menu__promo-media img { transform:none; }

  .qt-nav__has-submenu > a {
    position:relative;
  }

  /* The fixed panel sits below the nav row, while the Products trigger is
     vertically centered inside that row. Keep the two hit areas connected so
     moving the pointer through the small gap does not close the menu. */
  body.qt-products-menu-open .qt-nav__has-submenu::before {
    content:"";
    position:fixed;
    z-index:919;
    top:calc(var(--qt-products-menu-top,var(--qt-header-height)) - 16px);
    right:auto;
    left:0;
    width:calc(
      var(--qt-products-menu-anchor) +
      var(--qt-products-menu-grid-width) +
      var(--qt-products-menu-right-gutter)
    );
    height:16px;
    pointer-events:auto;
    background:transparent;
  }

  .qt-nav__has-submenu > a::after {
    content:"";
    position:absolute;
    right:0;
    bottom:-10px;
    left:0;
    height:2px;
    background:var(--qt-accent);
    opacity:0;
    transform:scaleX(.35);
    transform-origin:center;
    transition:opacity .18s ease,transform .18s ease;
  }

  .qt-nav__has-submenu:hover > a::after,
  .qt-nav__has-submenu:focus-within > a::after,
  body.qt-products-menu-open .qt-nav__has-submenu > a::after {
    opacity:1;
    transform:scaleX(1);
  }

  .qt-nav__has-submenu:hover > a,
  .qt-nav__has-submenu:focus-within > a,
  body.qt-products-menu-open .qt-nav__has-submenu > a {
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-underline-offset:10px;
  }

  /* Match the reference navigation treatment across every top-level item:
     the active/hover state is a short accent rule below the label, not a
     browser-style underline through the text. */
  .qt-nav>ul>li>a {
    position:relative;
    text-decoration:none;
  }

  .qt-nav>ul>li>a::after {
    content:"";
    position:absolute;
    right:0;
    bottom:-10px;
    left:0;
    height:2px;
    background:var(--qt-accent);
    opacity:0;
    transform:scaleX(.35);
    transform-origin:center;
    transition:opacity .18s ease,transform .18s ease;
  }

  .qt-nav>ul>li:hover>a::after,
  .qt-nav>ul>li:focus-within>a::after,
  .qt-nav>ul>li>a.is-current::after,
  body.qt-products-menu-open .qt-nav>ul>li.qt-nav__has-submenu>a::after {
    opacity:1;
    transform:scaleX(1);
  }

  .qt-nav>ul>li:hover>a,
  .qt-nav>ul>li:focus-within>a,
  .qt-nav>ul>li>a.is-current {
    text-decoration:none;
  }

  /* The promotion card follows the reference composition: deep navy panel,
     centered copy, a curved dark overlay over the image, and a pill CTA. */
  .qt-products-mega-menu__promo {
    min-height:360px;
    height:360px;
    border:0;
    border-radius:12px;
    background:#082f4b;
    color:#fff!important;
  }

  .qt-products-mega-menu__promo::before {
    content:"";
    position:absolute;
    z-index:2;
    top:0;
    left:-10%;
    width:120%;
    height:210px;
    background:#082f4b;
    clip-path:ellipse(63% 100% at 50% 0%);
    pointer-events:none;
  }

  .qt-products-mega-menu__promo-copy {
    z-index:3;
    align-items:center;
    width:100%;
    padding:28px 36px 0;
    text-align:center;
  }

  .qt-products-mega-menu__promo-eyebrow {
    color:#b8d8d2;
  }

  .qt-products-mega-menu__promo-copy strong {
    max-width:420px;
    color:#b8d8d2;
    font-family:Georgia,"Times New Roman",serif;
    font-size:28px;
    font-weight:500;
    line-height:1.14;
  }

  .qt-products-mega-menu__promo-copy>span:not(.qt-products-mega-menu__promo-eyebrow):not(.qt-button) {
    max-width:390px;
    color:#fff;
    font-size:15px;
    font-weight:500;
    line-height:1.45;
    text-align:center;
  }

  .qt-products-mega-menu__promo-media {
    z-index:1;
    inset:auto 24px 20px;
    height:210px;
    align-items:stretch;
    justify-content:stretch;
    padding:0;
    border-radius:14px;
    overflow:hidden;
  }

  .qt-products-mega-menu__promo-media img {
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    border:0;
    border-radius:14px;
    object-fit:cover;
    object-position:center;
  }

  .qt-products-mega-menu__promo .qt-button {
    left:50%;
    bottom:26px;
    z-index:4;
    padding:12px 24px;
    border:0;
    border-radius:999px;
    background:var(--qt-accent);
    color:#fff;
    transform:translateX(-50%);
  }

  .qt-products-mega-menu__promo .qt-button:hover,
  .qt-products-mega-menu__promo .qt-button:focus-visible {
    background:var(--qt-accent-hover);
    color:#fff;
    transform:translateX(-50%);
  }
}

@media (min-width:1000px) and (max-width:1200px) {
  .qt-products-mega-menu { grid-template-columns:minmax(300px,340px) minmax(360px,1fr); gap:24px; padding-right:0; }
  .qt-products-mega-menu__promo { padding:0!important; }
  .qt-products-mega-menu__promo-copy strong { font-size:25px; }
}

@media (max-width:999.98px) {
  .qt-products-mega-menu { display:none!important; }
}

/* Mid-size desktop keeps the right-side expansion compact, matching the
   reference composition: a narrow category rail, a deliberate column gap,
   and a reserved gutter before the menu scrollbar. */
@media (min-width:1000px) and (max-width:1400px) {
  :root {
    /* Preserve the previous inner grid width (old 72.2vw panel minus its
       136px right gutter), while moving that grid to the header's left line. */
    --qt-products-menu-grid-width:min(
      calc(72.2vw - 136px),
      calc(100vw - var(--qt-products-menu-anchor) - 28px)
    );
  }

  .qt-products-mega-menu {
    width:calc(
      var(--qt-products-menu-anchor) +
      var(--qt-products-menu-grid-width) +
      var(--qt-products-menu-right-gutter)
    );
    grid-template-columns:311px minmax(0,1fr);
    gap:49px;
    padding:0 var(--qt-products-menu-right-gutter) 22px var(--qt-products-menu-anchor);
  }

  body.qt-products-menu-open .qt-nav__has-submenu::before {
    width:calc(var(--qt-products-menu-anchor) + var(--qt-products-menu-grid-width));
  }

  .qt-products-mega-menu__categories {
    padding-left:12px;
  }

  .qt-products-mega-menu__category {
    grid-template-columns:minmax(0,1fr) 78px;
    min-height:78px;
  }

  .qt-products-mega-menu__category--all {
    min-height:54px;
  }

  .qt-products-mega-menu__category--all .qt-products-mega-menu__category-copy {
    padding:8px 16px;
  }

  .qt-products-mega-menu__category-copy {
    gap:4px;
    padding:9px 12px 9px 16px;
  }

  .qt-products-mega-menu__category-copy strong {
    font-size:15px;
  }

  .qt-products-mega-menu__category-copy small {
    font-size:11px;
  }

  .qt-products-mega-menu__category-media {
    padding:6px;
    border-left:0;
    border-radius:35% 0 0 35% / 50% 0 0 50%;
    overflow:hidden;
  }

  .qt-products-mega-menu__category-media img {
    max-height:64px;
  }

  .qt-products-mega-menu__promo {
    min-height:360px;
    height:360px;
  }

  .qt-products-mega-menu__promo::before {
    height:210px;
  }

  .qt-products-mega-menu__promo-copy {
    padding:28px 24px 0;
  }

  .qt-products-mega-menu__promo-copy strong {
    max-width:360px;
    font-size:24px;
  }

  .qt-products-mega-menu__promo-copy>span:not(.qt-products-mega-menu__promo-eyebrow):not(.qt-button) {
    max-width:350px;
    font-size:13px;
  }

  .qt-products-mega-menu__promo-media {
    inset:auto 20px 20px;
    height:210px;
  }

  .qt-products-mega-menu__promo .qt-button {
    bottom:26px;
    padding:12px 24px;
  }
}

@media (min-width:1000px) {
  /* The thumbnail column follows the reference's bowed divider instead of a
     straight vertical split. */
  .qt-products-mega-menu__category-media {
    border-left:0;
    border-radius:35% 0 0 35% / 50% 0 0 50%;
    overflow:hidden;
  }

  /* Keep the promotion panel closer to the tall, near-square reference card
     as the desktop viewport grows. */
  .qt-products-mega-menu__promo {
    min-height:clamp(360px,31vw,420px);
    height:clamp(360px,31vw,420px);
  }

  .qt-products-mega-menu__promo::before {
    height:clamp(160px,11vw,180px);
  }

  .qt-products-mega-menu__promo-media {
    height:clamp(240px,19vw,270px);
  }
}

/* Match the reference promo composition: a near-square card, full-width image
   anchored to the bottom, and a shallow navy wave crossing its upper edge. */
@media (min-width:1000px) {
  .qt-products-mega-menu__promo {
    display:block!important;
    min-height:0;
    height:auto;
    aspect-ratio:1.03 / 1;
    padding:0!important;
    background:#072741;
  }

  .qt-products-mega-menu__promo::before {
    background:#072741;
    clip-path:ellipse(63% 100% at 50% 0%);
    height:44%;
  }

  .qt-products-mega-menu__promo-eyebrow,
  .qt-products-mega-menu__promo-copy strong {
    color:#9ab9ad;
  }

  .qt-products-mega-menu__promo-copy {
    position:relative;
    z-index:3;
    width:100%;
    height:auto;
    min-height:0;
    padding:28px 32px 0;
    box-sizing:border-box;
  }

  .qt-products-mega-menu__promo-media {
    position:absolute;
    z-index:1;
    top:32%;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    border-radius:0 0 12px 12px;
    overflow:hidden;
  }

  .qt-products-mega-menu__promo-media img {
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    border-radius:0 0 12px 12px;
  }
}

@media (min-width:1000px) and (max-width:1200px) {
  .qt-products-mega-menu__promo-copy {
    padding-top:20px;
  }
}

/* Keep the promotion card aligned without changing its grid track or internal dimensions. */
@media (min-width:1000px) {
  .qt-products-mega-menu__promo { transform:translateX(-22px); }
}

@media (min-width:1000px) and (max-width:1400px) {
  .qt-products-mega-menu__promo { transform:translateX(-18px); }
}