/* 自定义下拉组件（st-select-v1.js 配套样式）
   加载顺序在全站最后，这里的选择器负责压过 checkout/reference 里
   针对原生 select 的旧规则 —— 但只针对「触发器」，原生 select 已隐藏。 */

/* 原生 select 退场：留在 DOM（数据源），视觉与交互都交给触发器 */
select.st-select-native{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  border:0;
  opacity:0;
  pointer-events:none;
}

/* 触发器：与站内输入框同语言 —— 白底、12px 圆角、冷灰内描边 */
.st-select-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:44px;
  padding:10px 12px;
  border:0;
  border-radius:12px;
  background:#fff;
  box-shadow:inset 0 0 0 1px #081f8014;
  color:var(--ink,#162446);
  font-size:13px;
  text-align:left;
  cursor:pointer;
  transition:box-shadow .16s ease;
}
.st-select-trigger:hover{box-shadow:inset 0 0 0 1px #081f8030}
.st-select-trigger[aria-expanded="true"]{box-shadow:inset 0 0 0 2px #1a3ba8}
.st-select-trigger:focus-visible{outline:2px solid var(--orange,#f47700);outline-offset:-2px}
.st-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-select-chevron{
  flex:none;
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:#8b93a6;
  transition:transform .2s var(--curve,cubic-bezier(.22,.8,.25,1));
}
.st-select-trigger[aria-expanded="true"] .st-select-chevron{transform:rotate(180deg)}

/* 询价单里的紧凑触发器（单位）：与同一行的「固定单位」.unit-fixed 读作一套语言。
   🔴 2026-09-22 用户反馈「可选单位下拉栏显示有问题」：
      原样式带 1px 内描边 + 不透明浅底，在「₭205,000 ⋯⋯ 盒」这条由 price-fill
      点线连成的句子里，看起来是个突兀的输入框；而同位置的单单位商品渲染的是
      .unit-fixed（裸文字，无框）。同一个位置两种视觉语言 = 用户说的「有问题」。
   现在：静态态与裸文字同高、同字重、无底色无描边（读起来就是「／盒」两个字），
      仅 hover / 展开时浮出浅底 —— 把「这里可以点」的暗示留到交互时刻。
   高度保持 24px，与 .unit-fixed 的 line-height:24px 基线对齐，点线两端才齐平。 */
.st-select-trigger.st-select-sm{
  min-height:24px;
  height:24px;
  padding:0 2px;
  gap:3px;
  border-radius:6px;
  font-size:11.5px;
  font-weight:750;
  color:#4d5a76;
  background:none;
  box-shadow:none;
  transition:background .16s ease,box-shadow .16s ease;
}
.st-select-trigger.st-select-sm:hover{
  background:#eef3fb;
  box-shadow:inset 0 0 0 1px #dde5f2;
}
.st-select-trigger.st-select-sm[aria-expanded="true"]{
  background:#eef3fb;
  box-shadow:inset 0 0 0 2px #1a3ba8;
}
.st-select-trigger.st-select-sm .st-select-chevron{width:11px;height:11px;color:#9aa2b4}

/* 登录 / 结账的电话区号：与输入框并排、等高 */
.commerce-dialog .checkout-form .phone-input .st-select-trigger,
.auth-form .phone-input .st-select-trigger{
  width:116px;
  flex:none;
  min-height:48px;
  margin-top:10px;
  font-size:12px;
  border-radius:12px;
  box-shadow:0 0 0 4px #ffffff60,inset 0 0 0 1px #081f8014;
}

/* ---------- 浮层 ---------- */
.st-select-pop{
  position:fixed;
  z-index:80;
  min-width:150px;
  max-height:min(46vh,320px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:5px;
  border:1px solid #e8ecf4;
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px #0b26540a,0 24px 52px -24px #0b26545c;
  opacity:0;
  transform:translateY(-4px) scale(.99);
  transition:opacity .15s ease,transform .18s var(--curve,cubic-bezier(.22,.8,.25,1));
}
.st-select-pop.is-open{opacity:1;transform:none}

.st-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:40px;
  padding:8px 12px;
  border:0;
  border-radius:9px;
  background:none;
  color:#101c3d;
  font-size:13px;
  text-align:left;
  cursor:pointer;
  transition:background .12s ease;
}
.st-option:hover,.st-option.is-active{background:#f5f8ff}
.st-option.is-selected{font-weight:750;color:#1a3ba8}
.st-option svg{
  flex:none;
  width:15px;
  height:15px;
  fill:none;
  stroke:#1a3ba8;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- 手机：仍是「跟随触发器」的卡片，只是行更大、角更圆 ----------
   🔴 2026-09-21 用户反馈「手机上下拉列表显示在底部，有点远，不方便」：
      原来这里用一串 !important 把浮层钉在屏幕底部，触发器在屏幕中部时要跨半屏。
      现在位置由 JS 锚定（见 st-select-v1.js），这里只保留观感差异。 */
@media(max-width:720px){
  .st-select-pop.is-mobile{
    max-height:min(52vh,360px);
    padding:8px;
    border-radius:18px;
    box-shadow:0 1px 2px #0b26540a,0 22px 46px -20px #0b26545c;
    transform:translateY(6px) scale(.99);
  }
  .st-select-pop.is-mobile.is-open{transform:none}
  .st-select-pop.is-mobile:before{
    content:'';
    display:block;
    width:38px;
    height:4px;
    margin:2px auto 6px;
    border-radius:2px;
    background:#e3e8f0;
  }
  .st-select-pop.is-mobile .st-option{min-height:48px;font-size:14.5px;border-radius:14px}
  /* 紧凑/区号触发器在移动端维持各自宽度，但要与表单输入等高 */
  .st-select-trigger.st-select-phone{width:126px}
  .commerce-dialog .checkout-form .phone-input .st-select-trigger{width:126px}
}

@media(prefers-reduced-motion:reduce){
  .st-select-pop,.st-select-chevron{transition:none}
}