/* 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) {
  /* Keep the panel aligned to the same left content line on every desktop
     width, matching the MOPAI reference layout. */
  :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 {
    --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;
  }
}

/* Balance the visible whitespace around the promotion card while keeping its
   grid track and internal dimensions unchanged. */
@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); }
}