/*
 * Main menu CSS: canonical CategoriesMenu source.
 * Keep this file as a source-organization layer only: no inline CSS,
 * no new, and no late patch-stack overrides.
 */

/* === CategoriesMenu base shared styles === */
.MenuBarComponent[name='CategoriesMenu'] {
  height:45px;
}
.MenuBarComponent[name='CategoriesMenu'] .MenuSeparator {
  visibility:hidden;
}

.MenuBarComponent[name='CategoriesMenu'] .MenuItemLink {
  color:#d5d5d5;
  text-transform:uppercase;
  font-size:18px;
  font-weight:600;
}

.MenuBarComponent[name='CategoriesMenu'] .MenuItemOuter .handle {
  display:none;
}

.MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer {
  background-color:#3a3a3a;
  opacity:1;
  border:0;
  min-width:160px;
}

.MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer .SubmenuItemLink {
  color:white;
  text-transform:none;
  font-size:17px;
}
.MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer .RightPart {
  color:white;
  font-weight:bold;
}

/* === Desktop CategoriesMenu layout and full-height dropdowns === */
@media (min-width: 901px) {
  .header .full .menu_wrap {
    position:absolute;
    left:0;
    right:0;
    top:104px;
    display:block;
    width:100%;
    height:43px;
    padding-right:0;
    box-sizing:border-box;
    z-index:3000;
    background:#3a3a3a;
    overflow:visible;
  }
  .MenuBarComponent[name='CategoriesMenu'] {
    display:flex;
    align-items:stretch;
    column-gap:24px;
    width:100%;
    height:43px;
    padding-right:20px;
    box-sizing:border-box;
    overflow:visible;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer {
    float:none;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuSeparator {
    display:none;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer:first-child {
    margin-right:auto;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer > .MenuItemOuter {
    display:flex;
    align-items:center;
    justify-content:center;
    height:43px;
    padding:0;
    box-sizing:border-box;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer > .MenuItemOuter .MenuItemLink {
    display:flex;
    align-items:center;
    justify-content:center;
    height:43px;
    line-height:43px;
    box-sizing:border-box;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer:first-child > .MenuItemOuter .MenuItemLink {
    padding-left:20px;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer:first-child > .MenuItemOuter .MenuItemLink:before {
    content:"";
    display:inline-block;
    width:18px;
    height:12px;
    margin-right:10px;
    background:linear-gradient(#e3262e 0 0) 0 0/18px 2px no-repeat,
               linear-gradient(#e3262e 0 0) 0 5px/18px 2px no-repeat,
               linear-gradient(#e3262e 0 0) 0 10px/18px 2px no-repeat;
    flex:0 0 auto;
  }
  /* Desktop dropdown panel shell. */
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer {
    z-index:3001;
    width:420px;
    height:var(--desktop-categories-submenu-height, auto);
    box-sizing:border-box;
    background:#3a3a3a;
    border:0;
    border-top:1px solid #e3262e;
    border-right:0;
    border-bottom:0;
    border-radius:0 0 8px 8px;
    padding:15px 0 15px;
    box-shadow:none;
    overflow:visible;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer.HasOpenChild {
    border-right:1px solid #777777;
    border-radius:0 0 0 8px;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer.LastOpenColumn {
    border-radius:0;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer:first-child > .SubmenuRenderer {
    border-radius:0;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer:first-child > .SubmenuRenderer.HasOpenChild {
    border-radius:0;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer .SubmenuRenderer {
    width:420px;
    border-top:1px solid #e3262e;
    border-left:1px solid #777777;
    border-right:0;
    border-bottom:0;
    border-radius:0 0 8px 0;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer .SubmenuRenderer.HasOpenChild {
    border-right:1px solid #777777;
    border-radius:0;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer .SubmenuRenderer.LastOpenColumn {
    border-radius:0;
  }
  /* Desktop dropdown rows, hover state and chevrons. */
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemOuter {
    position:relative;
    box-sizing:border-box;
    padding:0;
    background:#3a3a3a;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemLink {
    display:block;
    box-sizing:border-box;
    width:100%;
    padding:10px 48px 10px 15px;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer:hover > .SubmenuItemOuter,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer.Hover > .SubmenuItemOuter {
    background:rgba(227,38,46,0.18);
    box-shadow:inset 3px 0 0 #e3262e;
    border-radius:9px;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer:hover > .SubmenuItemOuter .SubmenuItemLink,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer.Hover > .SubmenuItemOuter .SubmenuItemLink {
    color:#ffffff;
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer[have_submenu='1'] > .MenuItemOuter .handle[data-line] {
    display:none;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer > .SubmenuItemOuter .handle[data-line] {
    display:block;
    position:absolute;
    right:25px;
    top:50%;
    width:8px;
    height:8px;
    padding:0;
    margin:0;
    color:transparent;
    background:transparent;
    transform:translateY(-50%);
    pointer-events:none;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer > .SubmenuItemOuter .handle[data-line]:before {
    content:"";
    display:block;
    width:7px;
    height:7px;
    border-right:2px solid #e3262e;
    border-bottom:2px solid #e3262e;
    transform:rotate(-45deg);
  }
}

/* === Mobile hamburger overlay and nested CategoriesMenu === */
@media (max-width: 900px) {
  .header .full .menu_wrap {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:2000;
    width:100%;
    max-width:100%;
    max-height:calc(100vh - var(--mobile-header-space, 64px));
    margin:0;
    padding-bottom:0;
    box-sizing:border-box;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#3a3a3a;
    border-top:1px solid #4b4b4b;
    box-shadow:none;
  }
  body.mobile-menu-open .header .full .menu_wrap {
    display:block;
  }
  .MenuBarComponent[name='CategoriesMenu'] {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    background:#3a3a3a;
    overflow:visible;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    user-select:none;
  }
  .MenuBarComponent[name='CategoriesMenu'],
  .MenuBarComponent[name='CategoriesMenu'] * {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuSeparator {
    display:none;
    visibility:hidden;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer {
    display:none;
    visibility:hidden;
    position:static;
    width:100%;
    min-width:0;
    padding:0;
    background:#3a3a3a;
    opacity:1;
    border:0;
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer.Hover > .SubmenuRenderer,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer.Hover > .SubmenuRenderer {
    display:block;
    visibility:visible;
    left:auto;
    top:auto;
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer {
    display:block;
    float:none;
    clear:both;
    position:static;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    text-align:left;
    background:#3a3a3a;
    border-bottom:0;
    box-sizing:border-box;
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuItemOuter,
  .MenuBarComponent[name='CategoriesMenu'] .MenuItemLink,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemOuter,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemLink {
    display:block;
    position:static;
    float:none;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0;
    padding:0;
    box-sizing:border-box;
    background:#3a3a3a;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    user-select:none;
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuItemLink,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemLink {
    color:#ffffff;
    font-size:14px;
    font-weight:bold;
    line-height:1.25;
    text-align:left;
    text-transform:uppercase;
    padding:10px 17px;
    text-decoration:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    outline:0;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemLink {
    font-size:14px;
    font-weight:600;
    text-transform:none;
    padding-left:33px;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer:first-child {
    margin-top:10px;
  }
  .MenuBarComponent[name='CategoriesMenu'] > .MenuBarItemRenderer:last-child {
    margin-bottom:10px;
  }
  /* Mobile hierarchy bullets and indentation. */
  .MenuBarComponent[name='CategoriesMenu'] .MenuItemLink:before,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemLink:before {
    content:"";
    display:inline-block;
    width:5px;
    height:5px;
    margin-right:5px;
    border-radius:50%;
    background:#e3262e;
    vertical-align:middle;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer .SubmenuRenderer .SubmenuItemLink {
    padding-left:49px;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer .SubmenuRenderer .SubmenuRenderer .SubmenuItemLink {
    padding-left:65px;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer .SubmenuRenderer .SubmenuRenderer .SubmenuRenderer .SubmenuItemLink {
    padding-left:81px;
  }
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuRenderer .SubmenuRenderer .SubmenuRenderer .SubmenuRenderer .SubmenuRenderer .SubmenuItemLink {
    padding-left:97px;
  }
  /* Mobile tap/focus cleanup: prevent Android/WebKit grey active artifacts. */
  .MenuBarComponent[name='CategoriesMenu'] .MenuItemLink:focus,
  .MenuBarComponent[name='CategoriesMenu'] .MenuItemLink:active,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemLink:focus,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemLink:active,
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer:focus,
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer:active,
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer.Hover,
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer.Hover > .MenuItemOuter,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer:focus,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer:active,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer.Hover,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer.Hover > .SubmenuItemOuter {
    background:#3a3a3a;
    outline:0;
    box-shadow:none;
    text-decoration:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer > .MenuItemOuter,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer > .SubmenuItemOuter {
    position:relative;
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer[have_submenu='1'] > .MenuItemOuter .MenuItemLink,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer > .SubmenuItemOuter .SubmenuItemLink {
    padding-right:calc(20% + 18px);
  }
  /* Mobile right-side expand handle. */
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer > .MenuItemOuter .handle[data-line],
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer > .SubmenuItemOuter .handle[data-line] {
    display:block;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:20%;
    min-width:44px;
    padding:0;
    margin:0;
    color:transparent;
    text-align:center;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    outline:0;
    box-shadow:none;
    background:#3a3a3a;
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer > .MenuItemOuter .handle[data-line]:before,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer > .SubmenuItemOuter .handle[data-line]:before {
    content:"";
    display:block;
    position:absolute;
    right:18px;
    top:50%;
    width:7px;
    height:7px;
    border-right:2px solid #ffffff;
    border-bottom:2px solid #ffffff;
    transform:translateY(-50%) rotate(-45deg);
    transition:transform .16s ease;
    pointer-events:none;
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer.Hover > .MenuItemOuter .handle[data-line]:before,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer.Hover > .SubmenuItemOuter .handle[data-line]:before {
    content:"×";
    right:14px;
    width:14px;
    height:auto;
    border:0;
    color:#e3262e;
    font:bold 26px/1 Arial, Helvetica, sans-serif;
    line-height:1;
    text-align:center;
    transform:translateY(-50%);
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer > .MenuItemOuter .handle[data-line]:focus,
  .MenuBarComponent[name='CategoriesMenu'] .MenuBarItemRenderer > .MenuItemOuter .handle[data-line]:active,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer > .SubmenuItemOuter .handle[data-line]:focus,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemRenderer > .SubmenuItemOuter .handle[data-line]:active {
    background:#3a3a3a;
    outline:0;
    box-shadow:none;
  }
  .MenuBarComponent[name='CategoriesMenu'] .MenuItemLink:hover,
  .MenuBarComponent[name='CategoriesMenu'] .SubmenuItemLink:hover {
    background:#3a3a3a;
    color:#ffffff;
    text-decoration:none;
  }
}