/* ==========================================================================
   smartprix theme · header.css
   页头：主栏 / logo / 搜索条 + 建议面板 / 登录·More 下拉 / 桌面品类导航 /
   移动图标 tab / 左侧抽屉 / 国家选择弹层
   来源：us.smartprix.com index.3b4ef80b.css（规格 02 §2.1–§2.9）
   依赖 tokens.css + base.css + components.css
   ========================================================================== */

/* ==========================================================================
   1. 主栏 <header>
   ========================================================================== */
header{
  height:var(--header-h);
  background:var(--sp-header-bg);
  color:#fff;
  position:sticky;
  top:0;
  z-index:var(--z-header);
  box-shadow:var(--sp-shadow-header);
}
@media (max-height:550px) and (orientation:landscape){
  header{position:static}
}

.sm-search-header{
  --search-h:44px;
  margin:8px;
  display:flex;
  align-items:center;
  position:relative;
}
.sm-search-header>.i-left,
.sm-search-header>.i-user{
  display:flex;
  align-items:center;
  color:#fff;
  cursor:pointer;
  flex:0 0 auto;
}
.sm-search-header>.i-left{padding:8px;margin:0 4px 0 -4px}
.sm-search-header>.i-user{padding:6px;margin:0 -4px 0 4px}
.sm-search-header>.i-user>.icon{--s:28px}

/* ---------- logo ---------- */
.sm-search-header .logo{display:none}
.sm-search-header .logo>img{height:100%;max-width:100%;object-fit:contain;object-position:left}

/* ==========================================================================
   2. 搜索条 .sm-search-bar
   ========================================================================== */
.sm-search-bar-wrap{position:relative;flex:1;min-width:0}
.sm-search-bar{
  height:var(--search-h);
  display:flex;
  align-items:center;
  position:relative;
  z-index:var(--z-search);
  width:100%;
  cursor:text;
  background:var(--sp-search-bg);
  color:var(--sp-search-text);
  border-radius:var(--sp-radius-search);
  padding:6px 8px;
  box-shadow:var(--sp-shadow-search);
}
.sm-search-bar .i-logo{
  padding:4px;margin:-4px;box-sizing:content-box;
  width:28px;height:28px;display:flex;align-items:center;flex:0 0 auto;
}
.sm-search-bar .i-logo>img{border-radius:var(--sp-radius-circle);opacity:.8;width:28px;height:28px}
.sm-search-bar .i-search,
.sm-search-bar .i-back{
  display:flex;align-items:center;padding:6px;cursor:pointer;color:inherit;flex:0 0 auto;
}
.sm-search-bar .i-search{opacity:.9;margin-right:-6px}
.sm-search-bar .i-back{display:none;margin:-6px;color:#999}
.sm-search-bar .i-back>.icon{--s:24px}
.sm-search-bar form{
  flex:1;min-width:0;width:100%;position:relative;height:var(--search-h);
  display:flex;align-items:center;justify-content:flex-end;
}
.sm-search-bar .sm-input{flex:1;min-width:0;max-width:none;padding:0 4px 0 10px}
.sm-search-bar .sm-input input,
.sm-search-bar .sm-input input:focus{
  padding:0;box-shadow:none;border:0;background:transparent;
  font-size:16px;line-height:24px;max-height:none;
}
/* 原站没有 border-radius / color / ::placeholder 覆盖：输入框沿用 .sm-input>.input
   的 border-radius:3px 与 color:#000，placeholder 走浏览器默认（实测 computed
   input.input.empty → color rgb(0,0,0)、border-radius 3px）。 */
.sm-search-bar.open{background:#fff}
.sm-search-bar.open .i-logo,
.sm-search-bar.open .i-search{display:none}
.sm-search-bar.open .i-back{display:flex}

/* ---------- 建议面板 ---------- */
.sm-search-suggest{
  position:fixed;top:0;left:0;background:var(--sp-search-bg);
  width:100vw;height:100vh;z-index:var(--z-search-suggest);
}
.sm-search-suggest[hidden]{display:none}
.sm-search-suggestions{
  padding:.5rem 8px;margin-top:var(--header-h);font-size:15px;overflow:auto;max-height:calc(100vh - var(--header-h));
}
.sm-search-suggestions>li{
  display:grid;
  grid-template:"icon text" 1fr "icon cat" / auto 1fr;
  align-items:center;padding:.5rem .5714rem;cursor:pointer;
}
.sm-search-suggestions>li:hover,
.sm-search-suggestions>li.current{background:var(--sp-search-suggest-hover)}
.sm-search-suggestions>li>.icon{grid-area:icon;margin-right:10px;color:var(--color-text-extra-light)}
.sm-search-suggestions>li>span{grid-area:text;color:var(--color-text-semi-light)}
.sm-search-suggestions>li>span>b{color:var(--color-text);font-weight:700}
.sm-search-suggestions>li>small{grid-area:cat;color:var(--color-text-extra-light);margin-top:4px}
.sm-search-suggestions>li>small>b{color:var(--color-link);font-weight:400}

/* ==========================================================================
   3. 桌面右侧：Login / More 下拉 + 广告位
   ========================================================================== */
.sm-desktop-header-right{
  display:flex;justify-content:flex-end;align-items:center;flex:1;
  margin:-8px 0;height:var(--header-h);
}
.sm-desktop-header-right>*{padding:0 12px;font-size:16px;font-weight:500}
.sm-desktop-header-right .sm-dropdown{color:#fff;height:100%}
.sm-d-header-user{width:160px;justify-content:flex-end}
.sm-d-header-user .uname{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-left:6px}
.sm-d-header-user>img:first-child{
  width:24px;height:24px;border-radius:var(--sp-radius-circle);
  background:lightblue;object-fit:cover;flex:0 0 auto;
}
.sm-desktop-header-right sm-dap[pos=d_all_header_button]{
  margin:0 0 0 10px;padding:0;width:256px;height:40px;box-shadow:1px 1px 3px #5c72ab;
}
.sm-desktop-header-right sm-dap[pos=d_all_header_button]:hover{box-shadow:2px 2px 6px #8696c1}

/* ---------- 下拉面板 .sm-dropdown>.x（原站结构） ---------- */
.sm-dropdown{--top:50px}
.sm-dropdown>.d{margin-left:3px}
.sm-dropdown>.x{display:none;position:absolute;top:var(--top);z-index:var(--z-dropdown);right:0}
.sm-dropdown>.x:before{
  content:"";display:block;position:absolute;top:-18px;right:38px;z-index:1;width:0;
  border:10px solid transparent;border-bottom:10px solid #fff;
}
.sm-dropdown:hover>.x,
.sm-dropdown:focus-within>.x,
.sm-dropdown.visible>.x{display:block}
.sm-dropdown.visible>.d{opacity:1}

/* ---------- 面板内的行（补 components.css 未覆盖的形态） ---------- */
.sm-menu{overflow-y:auto;overflow-x:hidden;contain:content;font-weight:400}
.sm-menu>a{white-space:nowrap;text-decoration:none;user-select:none}
.sm-menu>a>.text{color:var(--color-text);flex:1;white-space:nowrap}
.sm-menu>a>img{
  width:var(--img-size);height:var(--img-size);margin:0 10px 0 -3px;
  max-width:var(--img-size);max-height:var(--img-size);object-fit:cover;
  background:var(--color-text-extra-light);border-radius:var(--sp-radius-circle);
}
.sm-menu>a.subHeading{
  font-weight:700;font-size:16px;border-width:1px 0;margin-bottom:-4px;flex-direction:row-reverse;
}
.sm-menu>a.subHeading:not(:first-child){margin-top:4px}

/* ---------- 分栏菜单 ---------- */
.sm-menu-column{
  grid-area:1 / var(--n) / 1 / var(--n);
  margin:-8px 0;display:flex;flex-direction:column;
}
.sm-menu-column>.title{padding:9px 16px;font-size:16px;background:var(--sp-menu-column-title-bg);color:var(--color-text)}
.sm-menu-column .sm-menu{box-shadow:none;border:none;padding-top:2px;min-width:0}

/* ==========================================================================
   4. 桌面品类导航 nav.sm-desktop-nav
   ========================================================================== */
.sm-desktop-nav{
  background:var(--sp-nav-bg-gradient);
  font-size:14px;font-weight:500;
  border-top:1px solid var(--sp-nav-border);
  color:var(--sp-nav-text);
}
.sm-desktop-nav>ul{
  display:grid;grid-auto-flow:column;justify-content:start;grid-gap:17px;
  max-width:var(--main-width);margin:0 auto;padding:0 16px;height:var(--sp-nav-h);
}
.sm-desktop-nav>ul>li{position:relative;cursor:pointer}
.sm-desktop-nav>ul>li,
.sm-desktop-nav>ul>li>a,
.sm-desktop-nav>ul>li>.sm-dropdown{display:flex;align-items:center;height:100%;line-height:17px}
.sm-desktop-nav>ul>li>a{color:var(--sp-nav-text);padding:0 8px;text-align:center}
.sm-desktop-nav>ul>li>a:hover,
.sm-desktop-nav>ul>li:hover{color:var(--sp-nav-text-hover)}
.sm-desktop-nav>ul>li.new:after{
  content:".";position:absolute;top:-1px;right:-2px;
  color:var(--sp-new-dot);font-size:3em;line-height:0;
}
.sm-desktop-nav .sm-dropdown{--top:37px}
.sm-desktop-nav .sm-menu{--img-size:32px}
.sm-desktop-nav .sm-dn-menu{position:relative;right:-25%}
.sm-desktop-nav .sm-menu>a>img{background:none;border-radius:0}

/* ==========================================================================
   5. 移动图标 tab 栏 nav.sm-top-tabs
   ========================================================================== */
.sm-top-tabs{display:flex;height:var(--sp-top-tabs-h);background:var(--sp-header-bg);color:#fff}
.sm-top-tabs>a{
  padding:8px 0;flex:1;text-align:center;text-transform:uppercase;color:#fff;
  position:relative;display:flex;align-items:center;justify-content:center;height:var(--sp-top-tabs-h);
}
.sm-top-tabs>a .icon{top:-1px}
.sm-top-tabs>a.new>span{position:relative}
.sm-top-tabs>a.new>span:after{
  content:".";position:absolute;top:-15px;right:-10px;
  color:var(--sp-new-dot);font-size:3em;line-height:0;
}

/* ==========================================================================
   6. 左侧抽屉 .sm-drawer > .sm-lnav
   ========================================================================== */
.sm-lnav{display:block}
.sm-lnav>.head{background:var(--color-primary);color:#fff}
.sm-lnav>.sm-box{margin:0;border-top:0;border-radius:0;box-shadow:none}
.sm-lnav-umenu{
  display:flex;flex-flow:row wrap;
  border-top:1px dashed rgba(255,255,255,.15);padding:6px 12px;
}
.sm-lnav-umenu>li{width:50%;display:flex;align-items:center;font-size:1.0715rem;padding:8px 0}
.sm-lnav-umenu>li>a,
.sm-lnav-umenu>li>button{
  display:flex;align-items:center;color:inherit;cursor:pointer;
  text-align:left;padding:0;width:100%;
}
.sm-lnav-umenu>li .icon{--s:26px;margin-right:7px}
.sm-lnav-umenu>li img{
  width:26px;height:26px;padding:1px;margin-right:7px;
  border-radius:var(--sp-radius-circle);object-fit:cover;flex:0 0 auto;
}
.sm-lnav-umenu.login{border-top:0}
.sm-lnav-umenu.login>li{font-size:1.4287rem;font-weight:700}
.sm-lnav-cwrap{padding:12px;background:var(--sp-menu-column-title-bg)}
.sm-lnav-cwrap>.sm-lnav-umenu{
  background:rgba(255,255,255,.5);color:var(--color-text-slight-light);
  border-radius:var(--sp-radius);padding:2px 12px;border:1px solid rgba(0,0,0,.15);
}

/* 抽屉内的品类九宫格 .sm-cats 在 components.css §17（原站 index.css 共用件）。 */

/* ==========================================================================
   7. 国家选择弹层
   ========================================================================== */
.sp-country-popup{max-height:min(300px,90vh)}
.sp-country-popup[hidden]{display:none}
.sp-country-popup .sp-popup-close{display:flex;align-items:center;padding:12px;color:#fff;cursor:pointer}
.sm-country-selector{background:#fff;flex:1;overflow:auto}
.sm-country-selector .sm-box-item{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--color-text)}
.sm-country-selector .sm-box-item:hover{background:var(--sp-menu-hover)}
.sm-country-selector .sm-box-item>img,
.sm-country-selector .sm-box-item>.sp-flag-blank{width:32px;height:26px;object-fit:cover;flex:0 0 auto}
.sm-country-selector .sp-flag-blank{border:1px solid var(--color-border);border-radius:2px;background:var(--bg-light-grey)}

/* ==========================================================================
   8. 断点（规格 02 §6）
   ========================================================================== */
@media (max-width:750px){
  .sm-desktop-header-right{display:none}
  .sm-search-bar.open{z-index:var(--z-dropdown);position:fixed;top:8px;left:8px;right:8px;width:auto}
  .sm-search-bar.has-q .sm-input{display:block}
  .sm-search-bar.has-q:not(.open) .sm-input>.input{color:#59809f}
  .sm-search-bar:has(> form:focus-within){background:#fff}
  .sm-search-bar:has(> form:focus-within) .i-logo,
  .sm-search-bar:has(> form:focus-within) .i-search{display:none}
  .sm-search-bar:has(> form:focus-within) .i-back{display:flex}
}

@media (min-width:750px){
  .sm-search-header{
    --search-h:40px;
    max-width:var(--main-width);
    margin:.5714rem auto;
    padding:0 2px 0 218px;
  }
  .sm-search-header .logo{
    display:block;position:absolute;left:12px;top:-8px;opacity:1;
    height:var(--sp-logo-header-h);width:var(--sp-logo-header-w);cursor:pointer;
  }
  .sm-search-header>.i-left,
  .sm-search-header>.i-user{display:none}

  .sm-search-bar-wrap{width:50vw;max-width:var(--sp-search-max-w)}
  .sm-search-bar .i-logo{display:none}
  .sm-search-bar .i-search{margin-right:-5px}
  .sm-search-bar .sm-input{padding-left:6px}
  .sm-search-bar.open{border-radius:var(--sp-radius-search) var(--sp-radius-search) 0 0}
  .sm-search-bar.open .i-search.i-search{display:flex;cursor:pointer}
  .sm-search-bar.open .i-back{display:none}

  .sm-search-suggest{
    position:absolute;top:var(--search-h);left:0;background:#fff;width:100%;height:auto;
    border-radius:0 0 var(--sp-radius-search) var(--sp-radius-search);
    box-shadow:var(--sp-shadow-search);
  }
  .sm-search-suggest:before{
    display:block;content:"";position:absolute;top:-.2857rem;left:0;
    width:100%;height:.2857rem;background:#fff;border-bottom:1px solid var(--color-border);
  }
  .sm-search-suggestions{padding:.5rem 0;margin-top:0;max-height:none}
}

@media (min-width:750px) and (max-width:1120px){
  .sm-search-header{padding-left:190px}
  .sm-desktop-header-right>*{padding:0 8px;font-size:14px}
  .sm-d-header-user{width:140px}
  .sm-desktop-header-right sm-dap[pos=d_all_header_button]{display:none}
}
@media (min-width:920px) and (max-width:1180px){
  .sm-desktop-header-right sm-dap[pos=d_all_header_button]{display:flex;width:200px}
}
@media (min-width:920px) and (max-width:1020px){
  .sm-desktop-header-right sm-dap+*+.sm-d-header-more{display:none}
}

/* ---------- 品类导航：随宽度收窄 gap 并逐项隐藏 ---------- */
@media (min-width:1190px){.sm-smc-us .sm-desktop-nav>ul{grid-gap:14px}}
@media (max-width:1190px){.sm-smc-us .sm-desktop-nav>ul>li:nth-child(6){display:none}}
@media (max-width:1160px){.sm-desktop-nav>ul{grid-gap:12px}}
@media (max-width:1100px){.sm-desktop-nav>ul{grid-gap:10px}}
@media (max-width:1060px){
  .sm-desktop-nav>ul{font-size:13px;grid-gap:8px}
  .sm-desktop-nav .sm-menu a{font-size:14px}
}
@media (max-width:980px){.sm-smc-us .sm-desktop-nav>ul>li:nth-child(5){display:none}}
@media (max-width:880px){.sm-smc-us .sm-desktop-nav>ul>li:nth-child(7){display:none}}
@media (max-width:810px){.sm-desktop-nav>ul{grid-gap:8px;font-size:12px}}
@media (max-width:750px){.sm-desktop-nav{display:none}}