/* TOOPIC_MENU_DRAWER_V1 — site-wide left drawer. Overrides style.css @media 1280 sheet. */
html body .menu-drawer-mask,
html body .menu-mask-bg.menu-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 10040;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  min-width: 0;
  background: rgba(6, 9, 14, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .38s cubic-bezier(.22, 1, .36, 1), visibility .38s;
}
html body.menu-open .menu-drawer-mask,
html body.menu-open .menu-mask-bg.menu-drawer-mask {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html body.menu-open {
  overflow: hidden;
}
html body.menu-open .header .tool.menu {
  opacity: 0;
  pointer-events: none;
  background: none !important;
  box-shadow: none !important;
}
html body .header .tool.menu,
html body .menu-slide,
html body .menu-slide a,
html body .menu-slide button {
  -webkit-tap-highlight-color: transparent;
}

html body .header .menu-slide,
html body .menu-slide,
html body .menu-slide.menu-slide--v2 {
  display: none;
  box-sizing: border-box;
  width: min(84vw, 332px) !important;
  min-width: 268px !important;
  max-width: 332px !important;
  height: 100% !important;
  padding: 0 0 36px !important;
  color: #e9edf3;
  background:
    radial-gradient(90% 42% at 0% -8%, rgba(20, 150, 255, .22), transparent 58%),
    radial-gradient(70% 36% at 100% 108%, rgba(240, 165, 0, .1), transparent 52%),
    linear-gradient(180deg, #141b26 0%, #0c1118 48%, #090d13 100%) !important;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 10050 !important;
  border-radius: 0 28px 28px 0;
  box-shadow:
    18px 0 48px rgba(0, 0, 0, .42),
    inset -1px 0 0 rgba(20, 150, 255, .18);
  transform: translate3d(-110%, 0, 0);
  transition: transform .46s cubic-bezier(.22, 1, .36, 1);
  overscroll-behavior: contain;
  touch-action: pan-y;
}
html body .header .menu-slide.is-open,
html body .menu-slide.is-open,
html body .menu-slide.menu-slide--v2.is-open {
  display: block !important;
  transform: translate3d(0, 0, 0);
}
html body .menu-slide.is-dragging {
  transition: none;
}

html body .menu-slide .md-chrome,
html body .menu-slide .ms2-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: block;
  padding: 16px 48px 12px 18px;
  background: linear-gradient(180deg, rgba(20, 27, 38, .96) 0%, rgba(20, 27, 38, .88) 70%, rgba(20, 27, 38, 0));
  border-bottom: 0;
}
html body .menu-slide .md-chrome__copy em,
html body .menu-slide .ms2-head__title {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .38);
  text-transform: none;
}
html body .menu-slide .md-chrome__copy strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1.15;
}
html body .menu-slide .ms2-head__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
html body .menu-slide .md-close,
html body .menu-slide .ms2-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body .menu-slide .md-close:hover,
html body .menu-slide .ms2-close:hover,
html body .menu-slide .md-close:active,
html body .menu-slide .ms2-close:active {
  background: transparent !important;
  color: #fff;
  transform: none;
}

html body .menu-slide .ms2-summary {
  margin: 4px 16px 8px;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
html body .menu-slide .ms2-summary__tip {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.4;
}
html body .menu-slide .ms2-clear {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: #7ec8ff;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20, 150, 255, .14);
}

html body .menu-slide .menu-item {
  padding: 2px 16px 14px !important;
  border-bottom: 0 !important;
}
html body .menu-slide .menu-item:last-of-type {
  padding-bottom: 28px !important;
}
html body .menu-slide .menu-item .title,
html body .menu-slide .menu-item h3,
html body .menu-slide .menu-item h3.title {
  display: block !important;
  height: auto !important;
  line-height: 1.3 !important;
  margin: 10px 2px 12px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .38) !important;
}
html body .menu-slide .menu-item .title::before,
html body .menu-slide .menu-item h3::before,
html body .menu-slide .menu-item h3.title::before {
  content: none !important;
  display: none !important;
}

html body .menu-slide .menu-item ul,
html body .menu-slide .menu-item ul.category,
html body .menu-slide .menu-item ul.size {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
  overflow: visible;
}
html body .menu-slide .menu-item ul.md-lanes,
html body .menu-slide .menu-item ul.md-pills,
html body .menu-slide .menu-item ul.md-sizes {
  display: flex !important;
}
html body .menu-slide .menu-item ul.md-lanes {
  flex-direction: column;
  gap: 8px;
}
html body .menu-slide .menu-item ul.md-pills,
html body .menu-slide .menu-item ul.md-sizes {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
html body .menu-slide .menu-item ul.md-pills { gap: 6px; }
html body .menu-slide .menu-item ul.md-sizes { gap: 6px; }
html body .menu-slide .menu-item ul.md-pills li,
html body .menu-slide .menu-item ul.md-sizes li {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 100%;
}
html body .menu-slide .menu-item ul:after,
html body .menu-slide .menu-item ul:before {
  display: none !important;
  content: none !important;
}
html body .menu-slide .menu-item ul li,
html body .menu-slide .menu-item ul.category li,
html body .menu-slide .menu-item ul.size li {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0;
}

/* 栏目: full-width rows, not 3 cramped boxes */
html body .menu-slide ul.md-lanes {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
html body .menu-slide ul.md-lanes li a,
html body .menu-slide ul.md-lanes li a.active {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  padding: 15px 16px !important;
  text-align: left;
  font-size: 16px !important;
  font-weight: 600;
  color: rgba(255, 255, 255, .94) !important;
  text-decoration: none;
  border-radius: 16px !important;
  border: 0 !important;
  background:
    linear-gradient(90deg, rgba(20, 150, 255, .16), rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .04)) !important;
  box-shadow: inset 3px 0 0 #1496ff;
  box-sizing: border-box;
  transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), background .2s ease, box-shadow .2s ease;
}
html body .menu-slide ul.md-lanes li a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, .45);
  border-top: 2px solid rgba(255, 255, 255, .45);
  transform: rotate(45deg);
  margin-left: 8px;
  flex: 0 0 auto;
}
html body .menu-slide ul.md-lanes li a.active {
  background: linear-gradient(90deg, rgba(20, 150, 255, .32), rgba(20, 150, 255, .1)) !important;
  box-shadow: inset 3px 0 0 #5cbcff, 0 10px 24px -16px rgba(20, 150, 255, .9);
}
html body .menu-slide ul.md-lanes li a:active {
  transform: scale(.985);
}

/* 分类: content-sized pills */
html body .menu-slide ul.md-pills {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
html body .menu-slide ul.md-pills li a,
html body .menu-slide ul.md-pills li a.active,
html body .menu-slide .ms2-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  padding: 7px 11px !important;
  text-align: center;
  font-size: 12px !important;
  font-weight: 600;
  color: rgba(255, 255, 255, .86) !important;
  text-decoration: none;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .075) !important;
  box-shadow: none;
  box-sizing: border-box;
  transition: transform .18s cubic-bezier(.34, 1.4, .64, 1), background .18s ease, color .18s ease;
}
html body .menu-slide ul.md-pills li a.active,
html body .menu-slide .ms2-chip.is-on,
html body .menu-slide .ms2-chip.active {
  color: #fff !important;
  background: rgba(20, 150, 255, .28) !important;
  box-shadow: 0 0 0 1px rgba(20, 150, 255, .35);
}
html body .menu-slide ul.md-pills li a:active,
html body .menu-slide .ms2-chip:active {
  transform: scale(.96);
}
@media (hover: hover) {
  html body .menu-slide ul.md-lanes li a:hover {
    background: linear-gradient(90deg, rgba(20, 150, 255, .28), rgba(255, 255, 255, .08)) !important;
  }
  html body .menu-slide ul.md-pills li a:hover,
  html body .menu-slide .ms2-chip:hover {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
  }
  html body .menu-slide ul.md-sizes li a:hover {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
  }
}

/* 尺寸: compact stamps, folded extras */
html body .menu-slide ul.md-sizes {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
html body .menu-slide ul.md-sizes:not(.is-expanded) .md-size-more {
  display: none !important;
}
html body .menu-slide ul.md-sizes li a,
html body .menu-slide ul.md-sizes li a.active {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72) !important;
  text-decoration: none;
  border-radius: 8px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .05) !important;
  font-variant-numeric: tabular-nums;
}
html body .menu-slide ul.md-sizes li a.active {
  color: #fff !important;
  background: rgba(240, 165, 0, .22) !important;
}
html body .menu-slide .md-more-sizes {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
}
html body .menu-slide .md-more-sizes:active {
  color: #fff;
}

html body .menu-slide .ms2-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 0 4px;
}
html body .menu-slide .ms2-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid transparent;
  box-sizing: border-box;
}
html body .menu-slide .ms2-swatch.is-on {
  box-shadow: 0 0 0 2px #0c1118, 0 0 0 4px #1496ff;
}
html body .menu-slide .ms2-tag-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 12px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
html body .menu-slide .ms2-tag-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
}
html body .menu-slide .ms2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

html body.menu-open .menu-slide.is-open .md-chrome,
html body.menu-open .menu-slide.is-open .ms2-head,
html body.menu-open .menu-slide.is-open .ms2-summary,
html body.menu-open .menu-slide.is-open .menu-item {
  animation: mdRise .48s cubic-bezier(.22, 1, .36, 1) both;
}
html body.menu-open .menu-slide.is-open .menu-item:nth-of-type(1) { animation-delay: .04s; }
html body.menu-open .menu-slide.is-open .menu-item:nth-of-type(2) { animation-delay: .09s; }
html body.menu-open .menu-slide.is-open .menu-item:nth-of-type(3) { animation-delay: .14s; }
html body.menu-open .menu-slide.is-open .menu-item:nth-of-type(4) { animation-delay: .18s; }
html body.menu-open .menu-slide.is-open .menu-item:nth-of-type(5) { animation-delay: .22s; }
@keyframes mdRise {
  from { opacity: 0; transform: translate3d(-12px, 8px, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body .menu-slide,
  html body .menu-drawer-mask {
    transition: none;
  }
  html body.menu-open .menu-slide.is-open .md-chrome,
  html body.menu-open .menu-slide.is-open .ms2-head,
  html body.menu-open .menu-slide.is-open .ms2-summary,
  html body.menu-open .menu-slide.is-open .menu-item {
    animation: none;
  }
}