/* 可选款式选择器（2026-10-28）
 *
 * 把「合并进来的款」从一排相关产品卡，改成产品自带的款式选项：
 * 一排小图，点一下就换主图 / 换标题 / 换型号 / 换询价按钮，
 * 跟 Silipint 那种「颜色色块」是一个逻辑 —— 客户是在选这一款，
 * 不是在看别的推荐产品。
 *
 * 位置：插在产品标题和规格条之间（价格/规格上方），不用滚到底。
 * 数据：页面 <head> 里的 window.__EVERCUP_SERIES__（含 label 短标签）
 */

.bx-opt {
  margin: 20px 0 6px;
  padding: 16px 16px 14px;
  border: 1px solid #e6e1da;
  border-radius: 14px;
  background: #fbf9f7;
}

.bx-opt-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}

.bx-opt-kick {
  font-family: Manrope, Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ae5438;
}

.bx-opt-count {
  font-size: 12px;
  color: #6b6f76;
}

/* 2026-10-30：改成等宽网格。原来是定宽 84px + flex 换行，
   文字一长就把卡片撑开、跟隔壁的字贴到一起。现在每格等宽，
   行内永远对齐，最后一行不满也靠左。 */
.bx-opt-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;          /* 每一行等高，整块像编号的格子 */
  gap: 8px;
}

.bx-opt-sw {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* 2026-10-30：左右内边距 5px → 4px，容量行多出 2px 可用宽度，
     「580 ml / 19.6 oz」这种最长的一条也能一行装下不顶边。 */
  padding: 6px 4px 7px;
  border: 1px solid #e2ddd6;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  -webkit-appearance: none;
  appearance: none;
}

.bx-opt-sw:hover {
  border-color: #c9bfb4;
  transform: translateY(-1px);
}

.bx-opt-sw:focus-visible {
  outline: 2px solid #ae5438;
  outline-offset: 2px;
}

.bx-opt-sw.is-on {
  border-color: #ae5438;
  box-shadow: 0 0 0 2px rgba(174, 84, 56, .16);
  background: #fff;
}

.bx-opt-pic {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f2eee9;
}

.bx-opt-pic img {
  display: block;
  width: 100%;
  height: 100%;
  /* 2026-10-30：原来 cover 会把杯子裁掉一截、各款看着大小不一。
     改成 contain：整只杯子完整装进同一格，一排看过去尺寸齐。 */
  object-fit: contain;
  padding: 3px;
  box-sizing: border-box;
}

/* 标签：第一行容量、第二行效果
   2026-10-30：原来靠 flex:1 撑高，一碰到「473 ml / 16 oz · Design contemporary」
   这种要换行的标签，格子高度和容量行的位置就跟着飘 —— 一排看过去高矮不齐。
   现在把标签区锁成固定的两行高度（容量行永远在同一水平线上），
   超出的效果文字最多显示两行，多的截掉。 */
.bx-opt-lab {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  height: 40px;
  margin-top: 6px;
  font-family: Manrope, Arial, sans-serif;
  color: #3a3f45;
  text-align: center;
  overflow: hidden;
}

.bx-opt-cap {
  /* 2026-10-30：11px 时「285 ml / 9.5 oz」「580 ml / 19.6 oz」这种会顶出格子，
     10.5px 还差一点点，定在 10px —— 一格 74px 里全部一行装得下，绝不折行。 */
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.bx-opt-fx {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.22;
  overflow-wrap: break-word;
  word-break: break-word;
  /* 最多两行，第三行起截掉，保证格子高度锁死 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 没有容量前缀的页面（标签就是款名），让文字在框内垂直居中 */
.bx-opt-fx--solo {
  margin: auto 0;
}

.bx-opt-sw.is-on .bx-opt-lab {
  color: #ae5438;
}

.bx-opt-sw.is-on .bx-opt-fx {
  font-weight: 800;
}

.bx-opt-now {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6b6f76;
}

.bx-opt-now b {
  color: #17181a;
  font-weight: 700;
}

.bx-opt-flash {
  animation: bx-opt-fade .5s ease;
}

@keyframes bx-opt-fade {
  from { opacity: .35; }
  to { opacity: 1; }
}

@media (max-width: 1180px) {
  .bx-opt-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .bx-opt-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bx-opt { padding: 13px 12px 12px; }
  .bx-opt-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .bx-opt-sw { padding: 5px 4px 6px; }
  .bx-opt-cap { font-size: 10.5px; }
  .bx-opt-fx { font-size: 9.5px; }
}