/* =========================
   跨境衣尚 Header
========================= */

body{
  padding-top:92px;
}

.site-header,
.site-header *{
  box-sizing:border-box;
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  width:100%;
  padding:18px 0 0;
  background:#ffffff;
  border-bottom:1px solid #eeeeee;
}

.site-header .container{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

/* =========================
   Header整体布局
========================= */

.header-inner{
  display:grid;
  grid-template-columns:125px minmax(0, 1fr) auto;
  align-items:center;
  column-gap:0;
  min-height:62px;
  padding-bottom:12px;
}

/* =========================
   品牌名称
========================= */

.site-brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:125px;
  color:#b42318;
  font-size:25px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  text-decoration:none;
}

/* =========================
   电脑版导航
========================= */

.desktop-nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  column-gap:30px;
  min-width:0;
  margin-left:22px;
}

.desktop-nav .nav-item{
  position:relative;
  flex:0 0 auto;
}

.desktop-nav .nav-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:40px;
  padding:3px 0;
  color:#333333;
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  text-align:left;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}

.desktop-nav .nav-link:hover{
  color:#b42318;
}

.desktop-nav .nav-link.active{
  color:#b42318;
}

/* =========================
   右侧功能区
========================= */

.header-actions{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  min-width:max-content;
  margin-left:20px;
  padding-left:8px;
  background:#ffffff;
}

/* =========================
   跨境衣尚专属功能图标
========================= */

.fashion-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  text-decoration:none;
  border:1px solid transparent;
  transition:
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.fashion-action-icon{
  display:block;
  width:23px;
  height:23px;
  flex:0 0 23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

/* 登录：红色圆形 */

.fashion-login{
  color:#b42318;
  background:#fff3f1;
  border-color:#f0cbc6;
  border-radius:50%;
}

/* 支付：蓝色圆角方形 */

.fashion-checkout{
  color:#1f3a5f;
  background:#edf4fb;
  border-color:#cddbea;
  border-radius:11px;
}

.fashion-action:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(31,58,95,.12);
}

.fashion-login:hover{
  color:#8f1c13;
  background:#ffe8e4;
  border-color:#dda9a2;
}

.fashion-checkout:hover{
  color:#102d50;
  background:#dfeefa;
  border-color:#aac3dc;
}

.fashion-action:focus-visible{
  outline:2px solid #9bb7e3;
  outline-offset:2px;
}

/* =========================
   中｜EN｜更多
========================= */

.language-switch{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:36px;
  padding-left:16px;
  border-left:1px solid #cfd6df;
  color:#1f3a5f;
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.language-btn,
.more-language-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  margin:0;
  padding:2px 4px;
  color:#1f3a5f;
  background:transparent;
  border:0;
  border-radius:4px;
  font:inherit;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:
    color .2s ease,
    background .2s ease;
}

.language-btn:hover,
.more-language-link:hover{
  color:#b42318;
  background:#fff4f2;
}

.language-btn.active{
  color:#b42318;
}

.language-separator{
  display:inline-block;
  margin:0 1px;
  color:#aeb8c5;
  font-size:12px;
  font-weight:400;
  user-select:none;
}

/* =========================
   三横菜单按钮
========================= */

.menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:0 0 auto;
  padding:0;
  color:#163f8c;
  background:#ffffff;
  border:1px solid #d9e1ef;
  border-radius:8px;
  font-size:27px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}

.menu-btn:hover{
  background:#f5f8fc;
  border-color:#c9d6ea;
}

/* =========================
   中等宽度电脑
========================= */

@media(min-width:1101px) and (max-width:1280px){

  .site-header .container{
    width:calc(100% - 30px);
  }

  .header-inner{
    grid-template-columns:115px minmax(0, 1fr) auto;
  }

  .site-brand{
    width:115px;
    font-size:23px;
  }

  .desktop-nav{
    column-gap:22px;
    margin-left:16px;
  }

  .desktop-nav .nav-link{
    font-size:15px;
  }

  .header-actions{
    gap:12px;
    margin-left:14px;
  }

  .fashion-action{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .fashion-action-icon{
    width:22px;
    height:22px;
    flex-basis:22px;
  }

  .language-switch{
    padding-left:12px;
    font-size:12px;
  }

}

/* =========================
   平板和手机
========================= */

@media(max-width:1100px){

  body{
    padding-top:70px;
  }

  .site-header{
    padding:7px 0 0;
  }

  .site-header .container{
    width:calc(100% - 24px);
  }

  .header-inner{
    position:relative;
    display:grid;
    grid-template-columns:40px 1fr auto;
    align-items:center;
    gap:8px;
    min-height:56px;
    padding-bottom:6px;
  }

  .menu-btn{
    display:flex;
    grid-column:1;
    justify-self:start;
    width:38px;
    height:38px;
    font-size:26px;
  }

  .site-brand{
    grid-column:2;
    justify-self:start;
    width:auto;
    font-size:22px;
  }

  .desktop-nav{
    position:fixed;
    top:70px;
    left:0;
    right:0;
    bottom:0;
    z-index:998;

    display:none;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;

    width:100%;
    height:calc(100vh - 70px);
    margin:0;
    padding:34px 28px;

    background:#ffffff;
    overflow-y:auto;
  }

  .desktop-nav.open{
    display:flex;
  }

  .desktop-nav .nav-item{
    width:100%;
  }

  .desktop-nav .nav-link{
    width:100%;
    padding:18px 0;
    border-bottom:1px solid #edf0f3;
    color:#1f3a5f;
    font-size:23px;
  }

  .header-actions{
    grid-column:3;
    justify-self:end;
    gap:9px;
    min-width:0;
    margin-left:0;
    padding-left:0;
  }

  .fashion-action{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .fashion-action-icon{
    width:20px;
    height:20px;
    flex-basis:20px;
  }

  .language-switch{
    min-height:32px;
    padding-left:9px;
    font-size:11px;
  }

  .language-btn,
  .more-language-link{
    min-height:28px;
    padding:2px 3px;
  }

  body.menu-open{
    overflow:hidden;
  }

}

/* =========================
   小屏手机
========================= */

@media(max-width:520px){

  body{
    padding-top:68px;
  }

  .site-header .container{
    width:calc(100% - 16px);
  }

  .header-inner{
    grid-template-columns:36px 1fr auto;
    gap:5px;
    min-height:54px;
  }

  .menu-btn{
    width:36px;
    height:36px;
    font-size:25px;
  }

  .site-brand{
    font-size:19px;
  }

  .header-actions{
    gap:6px;
  }

  .fashion-action{
    width:29px;
    height:29px;
    flex-basis:29px;
  }

  .fashion-action-icon{
    width:18px;
    height:18px;
    flex-basis:18px;
  }

  .language-switch{
    padding-left:6px;
    font-size:10.5px;
  }

  .language-btn,
  .more-language-link{
    padding:2px;
  }

  .language-separator{
    margin:0;
    font-size:10px;
  }

}

/* =========================
   特别窄的手机
========================= */

@media(max-width:390px){

  .site-header .container{
    width:calc(100% - 12px);
  }

  .site-brand{
    font-size:18px;
  }

  .header-actions{
    gap:5px;
  }

  .fashion-action{
    width:27px;
    height:27px;
    flex-basis:27px;
  }

  .fashion-action-icon{
    width:17px;
    height:17px;
    flex-basis:17px;
  }

  .language-switch{
    padding-left:5px;
    font-size:10px;
  }

  .language-btn,
  .more-language-link{
    padding:1px;
  }

}