/* Compact marketplace navigation, shared across every catalogue category. */
.crail .category-flyout,.crail .mega-menu{
  display:block;left:48px;right:auto;width:min(1160px,calc(100% - 96px));
  padding:0;gap:0;border:1px solid var(--line);border-top:2px solid #2e78ed;
  border-radius:0 0 14px 14px;background:var(--surf);color:var(--ink);
  box-shadow:0 18px 44px #0712252e;overflow:hidden;
  animation:nav-arrive .16s ease-out;overscroll-behavior:contain;
}
.crail .category-flyout[hidden]{display:none}
.nav-panel-header{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line)}
.nav-panel-header h2{font-size:20px;line-height:1.15;margin:0;font-weight:700;color:var(--ink)}
.nav-panel-header>div>span{display:block;font-size:12px;color:var(--ink2);margin-top:4px}
.nav-panel-symbol{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:9px;background:var(--surf2);color:#2874e4}
.crail .nav-panel-symbol svg{display:block;width:23px;height:23px}
.nav-panel-close{display:grid;place-items:center;margin-left:auto;align-self:center;width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:50%;background:var(--surf);color:var(--ink2);transition:background .16s,color .16s}
.nav-panel-close:hover{background:var(--surf2);color:var(--ink)}
.crail .nav-panel-close svg{display:block;width:18px;height:18px}
.nav-panel-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(135px,.65fr) minmax(230px,1fr);gap:26px;padding:18px 24px}
.crail .nav-panel-body h3{font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--ink2);line-height:1.4;margin:0 0 10px}
.nav-sub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.crail .category-flyout .nav-sub-link{display:flex;align-items:center;justify-content:flex-start;gap:11px;min-height:54px;padding:8px;border:1px solid transparent;border-radius:9px;color:var(--ink);background:var(--surf2);font-size:14px;line-height:1.3;transition:background .16s,border-color .16s,color .16s}
.crail .category-flyout .nav-sub-link:hover{background:var(--surf);border-color:#93b9f5;color:#1763d6}
.nav-sub-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;color:var(--ink2)}
.crail .nav-sub-icon svg{display:block;width:25px;height:25px}
.nav-sub-copy{min-width:0;flex:1}.nav-sub-copy b{font-weight:600;display:block}
.crail .nav-sub-copy small{display:block;color:var(--ink2);font-size:11px;margin-top:4px}
.nav-link-arrow{font-size:20px;color:var(--ink3);line-height:1;transition:transform .16s}
.nav-sub-link:hover .nav-link-arrow{transform:translateX(2px);color:inherit}
.nav-platforms{border-left:1px solid var(--line);padding-left:23px}
.crail .category-flyout .nav-platform-link{display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-radius:7px;padding:10px;min-height:40px;font-size:14px;line-height:1.4;color:var(--ink2);transition:background .16s,color .16s}
.crail .category-flyout .nav-platform-link:hover{background:var(--surf2);color:#1763d6}
.crail .category-flyout .nav-platform-link small{color:var(--ink2);background:var(--surf2);border-radius:5px;padding:1px 6px;font-size:11px;font-variant-numeric:tabular-nums}
.crail .nav-feature>a{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:16px;border:1px solid var(--line);border-radius:10px;padding:17px;min-height:177px;color:var(--ink);background:var(--surf2);transition:border-color .16s,background .16s}
.crail .nav-feature>a:hover{border-color:#93b9f5;background:var(--surf);color:var(--ink)}
.nav-feature-art{display:grid;place-items:center;width:90px;height:127px;border-radius:6px;overflow:hidden;transition:transform .18s}
.nav-feature img{display:block;width:90px;height:127px;object-fit:contain}
.nav-feature-art.product-w11p img{transform:scale(2.05)}
.nav-feature-art.is-pack{background:#122e46;color:#fff;padding:10px;align-content:center;gap:3px}
.crail .nav-feature-art.is-pack svg{display:block;width:30px;height:30px}
.nav-feature-art.is-pack b{color:#fff;font-size:36px}
.crail .nav-feature-art.is-pack small{color:#c9e4f8;font-size:10px;margin:0}
.nav-feature a:hover .nav-feature-art{transform:translateY(-3px)}
.nav-feature a>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.nav-feature b{font-size:17px;line-height:1.25;font-weight:650;color:var(--ink)}
.crail .nav-feature small{color:var(--ink2);font-size:11px;line-height:1.5;margin-top:7px}
.nav-feature strong{font-size:25px;line-height:1.1;font-weight:700;letter-spacing:normal;font-variant-numeric:tabular-nums;margin-top:18px;white-space:nowrap}
.nav-feature-cta{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#1763d6;margin-top:10px}
.nav-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 24px;border-top:1px solid var(--line);background:var(--surf2)}
.crail .nav-panel-footer>a{display:inline-flex;align-items:center;gap:13px;min-height:26px;padding:0;border:0;font-size:13px;font-weight:600;color:#1763d6;line-height:1.4}
.crail .nav-panel-footer>a:hover{color:#104ea9;text-decoration:underline;text-underline-offset:3px}
.nav-panel-footer>span{font-size:12px;color:var(--ink2)}
.nav-category.is-open>a{border-bottom-color:#348cfd;color:#fff}
.nav-category-toggle{height:44px;width:24px;border-radius:5px;transition:color .16s}
.nav-category-toggle svg{transition:transform .16s}
.nav-directory{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding:24px}
.crail .mega-menu .nav-directory-heading{display:flex;align-items:center;gap:9px;padding:0 0 15px;margin-bottom:8px;border:0;border-bottom:1px solid var(--line);font-size:15px;font-weight:650;color:var(--ink);line-height:1.25;white-space:normal;min-height:60px}
.nav-directory-icon{display:grid;place-items:center;width:34px;height:38px;flex:none;color:var(--ink2)}
.crail .nav-directory-icon svg{display:block;width:25px;height:25px}
.nav-directory-heading small{display:block;color:var(--ink2);font-size:11px;font-weight:400;margin-top:5px}
.crail .mega-menu .nav-directory-link{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;padding:8px;border:0;border-radius:6px;font-size:13px;line-height:1.4;color:var(--ink2);text-decoration:none}
.crail .mega-menu .nav-directory-link:hover{background:var(--surf2);color:#1763d6;text-decoration:none}
.nav-directory-link>span{font-size:17px;color:var(--ink3)}
.crail .category-flyout a:focus-visible,.crail .mega-menu a:focus-visible,.nav-panel-close:focus-visible,.nav-category-toggle:focus-visible{outline:2px solid #2874e4;outline-offset:3px}
:root[data-theme="dark"] .nav-panel-symbol,:root[data-theme="dark"] .nav-feature-cta,:root[data-theme="dark"] .crail .nav-panel-footer>a,:root[data-theme="dark"] .crail .category-flyout .nav-sub-link:hover,:root[data-theme="dark"] .crail .category-flyout .nav-platform-link:hover,:root[data-theme="dark"] .crail .mega-menu .nav-directory-link:hover{color:#8dbaff}
@keyframes nav-arrive{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1279px){
  .crail .category-flyout,.crail .mega-menu{left:32px;width:calc(100% - 64px)}
  .nav-panel-body{grid-template-columns:minmax(0,1.5fr) minmax(130px,.65fr) minmax(220px,1fr);gap:18px;padding:20px}
  .nav-platforms{padding-left:17px}.nav-panel-header{padding:17px 20px}.nav-panel-footer{padding-inline:20px}
  .nav-sub-grid{gap:6px}.crail .category-flyout .nav-sub-link{gap:7px;padding:8px;font-size:13px}.nav-sub-icon{width:27px}
  .crail .nav-feature>a{grid-template-columns:74px minmax(0,1fr);padding:13px;gap:12px}.nav-feature-art,.nav-feature img{width:74px;height:116px}.nav-feature b{font-size:16px}.nav-feature strong{font-size:23px}
  .nav-directory{gap:16px;padding:20px}.crail .mega-menu .nav-directory-heading{font-size:14px}.nav-directory-icon{width:27px}
}
@media(max-width:999px){
  .crail .category-flyout,.crail .mega-menu{left:24px;width:calc(100% - 48px);max-height:65vh;max-height:65dvh;overflow-y:auto}
  .nav-panel-body{grid-template-columns:minmax(0,1.65fr) minmax(145px,.8fr);gap:22px}.nav-feature{display:none}
  .nav-directory{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}
@media(max-width:819px){
  .crail .category-flyout,.crail .mega-menu{left:12px;width:calc(100% - 24px);border-radius:0 0 12px 12px}
  .nav-panel-header{padding:14px 16px;position:sticky;top:0;background:var(--surf);z-index:1}.nav-panel-header h2{font-size:19px}
  .nav-panel-symbol{width:34px;height:34px}.nav-panel-close{width:40px;height:40px}
  .nav-panel-body{grid-template-columns:1fr;gap:21px;padding:17px 16px}
  .nav-sub-grid{gap:7px}.crail .category-flyout .nav-sub-link{font-size:14px;min-height:61px;padding:9px;gap:8px}
  .nav-sub-icon{width:26px}.crail .nav-sub-icon svg{width:22px;height:22px}.nav-link-arrow{display:none}
  .nav-platforms{border-left:0;border-top:1px solid var(--line);padding:17px 0 0}.nav-platforms>div{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
  .crail .category-flyout .nav-platform-link{min-height:40px;padding:8px 10px;font-size:14px;background:var(--surf2)}
  .nav-panel-footer{padding:12px 16px}.nav-panel-footer>span{display:none}.crail .nav-panel-footer>a{min-height:30px;font-size:14px}
  .nav-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;padding:18px 16px}
  .crail .mega-menu .nav-directory-heading{font-size:14px;min-height:55px}.crail .mega-menu .nav-directory-link{font-size:13px;min-height:40px;padding:8px 5px}
  .nav-category-toggle{width:26px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .crail .category-flyout,.crail .mega-menu{animation:none}
  .nav-feature-art,.nav-link-arrow,.nav-category-toggle svg{transition:none;transform:none!important}
}