/* ============================================================
   WMM 100% 复刻导航栏 (2026-08-14)
   源站: https://wmmworld.co/ (Destoon)
   风格: 深蓝 #2b2520 + 白底, 三段式: 顶条 / 主header / 搜索栏
   ============================================================ */

/* ---------- 覆盖旧的 mic 导航 (避免残留样式干扰) ---------- */
.mic-header, .mic-nav, .mic-megamenu { display: none; }

/* ---------- Top dark-blue bar (.top_head) ---------- */
.top_head { height: 36px; background: #2b2520; color: #fff; font-size: 14px; line-height: 36px; }
.top_head .wrap_box { max-width: 1400px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.top_head a { color: #fff; font-size: 14px; }
.top_head .left { float: left; }
.top_head .left i { font-weight: 700; margin-right: 5px; font-size: 12px; }
.top_head .right { float: right; }
.top_head .head_down { position: relative; z-index: 1000; float: left; }
.top_head .head_down ul { position: absolute; top: 36px; right: 0; background: #fff; padding: 10px 0; display: none; width: 215px; box-sizing: border-box; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.top_head .head_down span { padding-right: 8px; height: 36px; display: flex; align-items: center; line-height: 36px; box-sizing: border-box; border-left: 1px solid transparent; border-right: 1px solid transparent; cursor: pointer; position: relative; z-index: 10; }
.top_head .head_down .signnow { height: 30px; display: flex; align-items: center; line-height: 30px; box-sizing: border-box; cursor: pointer; position: relative; z-index: 10; }
.top_head .head_down .signnow a { padding: 0 5px; }
.top_head .head_down:nth-child(n+2) span::before { width: 1px; height: 10px; display: inline-block; content: ""; background: #fff; margin-right: 15px; }
.top_head .head_down span i { display: block; float: right; width: 16px; height: 16px; position: relative; transition: 0.3s; }
.top_head .head_down span i::before { content: ""; width: 4px; height: 4px; border-width: 2px 0 0 2px; border-style: solid; border-color: #fff; display: inline-block; transform: rotate(225deg); position: absolute; top: 4px; left: 5px; }
.top_head .head_down:hover span { color: #fff; }
.top_head .head_down:hover span i { transform: rotate(-180deg); }
.top_head .head_down:hover span i::before { border-color: #fff; }
.top_head .head_down span em { position: absolute; right: 0; top: 37px; display: none; }
.top_head .head_down:hover span em { display: block; }
.top_head .head_down span em::before, .top_head .head_down span em::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #eee; position: absolute; right: 10px; }
.top_head .head_down span em::before { top: -7px; }
.top_head .head_down span em::after { top: -6px; border-bottom: 6px solid #fff; }
.top_head .head_down:hover ul { display: block; }
.top_head .head_down ul li { line-height: 32px; padding: 0 20px; }
.top_head .head_down ul li a { color: #222; }
.top_head .head_down ul li:hover { background: #f5f5f5; }
.top_head .head_down ul li:hover a { color: #2b2520; }

/* ---------- Main header (.top_search / .TopSearchFixed) ---------- */
.TopSearchFixed { height: 120px; background: #fff; }
.top_search { height: 60px; padding: 30px 0; background: #fff; }
.top_search .wrap_box { max-width: 1400px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.top_search .wrap_box { display: flex; align-items: center; }
.top_search .top_logo > a { height: 60px; display: flex; align-items: center; }
.top_search .top_logo > a img { height: 60px; }

/* ---------- Centered nav (.nav_16) ---------- */
.nav_16 { height: 48px; display: flex; flex: 1 1 0%; justify-content: center; list-style: none; margin: 0; padding: 0; }
.nav_16 li { line-height: 48px; font-weight: bold; }
.nav_16 li a { display: block; padding: 0 1.5vw; }
.nav_16 li:nth-child(1) a { padding-left: 0; }
.nav_16 li span { color: #2b2520; text-transform: uppercase; font-size: 16px; font-weight: 600; }
.nav_16 li:hover span { color: #2b2520; text-decoration: underline; }
.nav_16 li.menuon span { color: #2b2520; text-decoration: underline; }

/* ---------- Shopping / account ---------- */
.top_search .Shopping ul { display: flex; list-style: none; margin: 0; padding: 0; }
.top_search .Shopping ul li { cursor: pointer; height: 42px; position: relative; list-style: none; }
.top_search .Shopping ul li:nth-child(n+2) { margin-left: 20px; }
.top_search .Shopping ul li span { height: 42px; float: left; display: flex; flex-direction: column; justify-content: center; }
.top_search .Shopping ul li::before { content: ""; display: block; float: left; width: 40px; height: 40px; margin-right: 5px; }
.top_search .Shopping ul li:nth-child(1)::before, #wmm_shopping > ul > li:first-child::before { background: url("ico-user2.svg") center center no-repeat; background-size: contain; }
.top_search .Shopping ul li:nth-child(2)::before { background: url("ico-cart2.svg") center center no-repeat; background-size: contain; }
.top_search .Shopping ul li span i { display: block; line-height: 20px; height: 20px; font-style: normal; }
.top_search .Shopping ul li span a, .top_search .Shopping ul li span { color: #333; font-size: 14px; }
.top_search .Shopping ul li span b { margin-left: 5px; }
.top_search .Shopping ul li span b::before { content: ""; width: 4px; height: 4px; border-width: 2px 0 0 2px; border-style: solid; border-color: #666; display: inline-block; transform: rotate(225deg); position: relative; top: -2px; }
.top_search .Shopping .pull_down { position: absolute; top: 42px; left: 50%; transform: translate(-50%,0); background: #fff; border-radius: 8px; width: 200px; padding: 20px; display: none; z-index: 100; box-shadow: 0 10px 20px rgba(12,41,68,0.14); box-sizing: border-box; }
.top_search .Shopping ul li:hover .pull_down { display: block; }
.top_search .Shopping .pull_down strong { font-size: 18px; color: #333; font-weight: 400; display: block; }
.top_search .Shopping .pull_down .rog a { height: 35px; display: block; background: #2b2520; text-align: center; line-height: 35px; color: #fff; border-radius: 17.5px; margin: 10px 0; font-size: 14px; text-decoration: none; }
.top_search .Shopping .pull_down .rog a:hover { background: #1c98df; }
.top_search .Shopping .pull_down .reg { font-size: 12px; border-bottom: 1px solid #e9e9e9; display: block; padding-bottom: 10px; margin-bottom: 10px; }
.top_search .Shopping .pull_down .reg a { margin-left: 8px; }
.top_search .Shopping .pull_down p { margin: 0; }
.top_search .Shopping .pull_down p a { line-height: 24px; font-size: 14px; color: #333; text-decoration: none; }
.top_search .Shopping .pull_down p a:hover { color: #2b2520; }

/* ---------- Search bar layer (.header_menu / .input_box) ---------- */
.header_menu { background: #fff; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding-bottom: 30px; }
.header_menu .wrap_box { max-width: 1400px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; display: flex; align-items: center; gap: 28px; }

/* Social media icons in header (left of search box) */
.headerMenuMedia { flex: 0 0 auto; display: flex; gap: 14px; align-items: center;}
.headerMenuMedia a { width: 38px; height: 38px; border: 1px solid #e5e5e5; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.headerMenuMedia a:hover { border-color: #e85d04; background: #fdf3ea; }
.headerMenuMedia a img { width: 22px; height: 22px; display: block; }

.input_box { box-sizing: border-box; flex: 1 1 0%; padding: 0 4vw; }
.input_box ul { display: flex; position: relative; list-style: none; margin: 0; padding: 0; }
.input_box ul li { float: left; position: relative; box-sizing: border-box; list-style: none; }
.input_box ul li.li_1, .input_box ul li.li_3 { width: 120px; }
.input_box ul li.li_2 { flex: 1 1 0%; }
.input_box input { border: none; background: none; height: 54px; width: 100%; outline: none; box-sizing: border-box; text-transform: uppercase; font-size: 14px; }
.input_box ul li.li_1 input { color: #999; text-align: center; cursor: pointer; border: 2px solid #e85d04; border-right: none; border-radius: 30px 0 0 30px; }
.input_box ul li.li_1 i { display: block; width: 16px; height: 16px; transition: 0.3s; position: absolute; right: 5px; top: 19px; }
.input_box ul li.li_1 i::before { content: ""; width: 4px; height: 4px; border-width: 2px 0 0 2px; border-style: solid; border-color: #999; display: inline-block; transform: rotate(225deg); position: absolute; top: 4px; left: 5px; }
.input_box ul li.li_1:hover i { transform: rotate(-180deg); }
.input_box ul li.li_2 input { padding-left: 20px; color: #999; border-top: 2px solid #e85d04; border-bottom: 2px solid #e85d04; }
.input_box ul li.li_2 input::placeholder { color: #999; }
.input_box ul li.li_3 button { color: #fff; cursor: pointer; font-size: 18px; background: #e85d04; border-radius: 0 30px 30px 0; height: 54px; width: 100%; border: none; font-weight: 600; }
.input_box ul li .search_mod { display: none; background: #fff; width: 100%; box-sizing: border-box; border: none; border-bottom: 2px solid #e85d04; position: absolute; left: 0; top: 52px; z-index: 1000; border-radius: 0 0 20px 20px; padding: 10px 0; }
.input_box ul li .search_mod p { line-height: 44px; font-size: 15px; text-align: center; cursor: pointer; color: #666; margin: 0; }
.input_box ul li .search_mod p:hover { color: #e85d04; background: #f5f5f5; }
.input_box ul li:hover .search_mod { display: block; }
.input_box ul li.li_2 #search-cls { z-index: 6060; position: absolute; top: 50%; right: 12px; width: 24px; height: 24px; margin: 0; display: none; cursor: pointer; transform: translate(0,-50%); }
.input_box #search-rec, .input_box #search-tip { z-index: 6060; position: absolute; top: 56px; left: 0; width: 100%; overflow: hidden; margin: 0; font-size: 14px; color: #666; background: #fff; border: 1px solid #ddd; border-radius: 10px; display: none; box-sizing: border-box; }
.input_box #search-rec .search-rec span:hover, .input_box #search-rec p:hover, .input_box #search-tip p:hover { background: #2b2520; color: #fff; }

/* ---------- 移动端适配 (applied below 768px) ---------- */
@media (max-width: 768px) {
  .top_head .left { display: none; }
  .top_head .right { float: right; }
  .top_head .wrap_box, .top_search .wrap_box, .header_menu .wrap_box { padding-left: 15px; padding-right: 15px; }
  .TopSearchFixed { height: auto; }
  .top_search { height: auto; padding: 15px 0; }
  .top_search .wrap_box { flex-wrap: wrap; }
  .top_search .top_logo > a img { height: 44px; }
  .nav_16 { flex-wrap: wrap; height: auto; justify-content: flex-start; order: 3; flex-basis: 100%; }
  .nav_16 li { line-height: 40px; }
  .nav_16 li a { padding: 0 14px; }
  .nav_16 li span { font-size: 14px; }
  .top_search .Shopping { display: none; }
  .header_menu { padding-bottom: 20px; }
  .input_box { padding: 0 15px; }
  .input_box ul li.li_1, .input_box ul li.li_3 { width: 90px; }
  .input_box ul li.li_1 input, .input_box ul li.li_3 button { border-radius: 20px; height: 46px; }
  .input_box input { height: 46px; font-size: 13px; }
  .mall-search form { flex-wrap: wrap; }
}