/* 口味卡片（Figma pc端 7:847 / 手机端 7:764）
   整张卡按设计稿等比缩放：--u = 设计稿上的 1px；宽版按 504px 稿、窄版（≤460px）按 361px 稿。
   选择器统一以 .bz-flv-fieldset.product-form__input 开头：主题自带的选项按钮样式是
   `.product-form__input input[type="radio"]:checked + label:not(...)`，特异性要高过它。 */

variant-radios:has(.bz-flv-fieldset) {
  container-type: inline-size;
}

.bz-flv-fieldset.product-form__input {
  --u: calc(100cqw / 504);
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: calc(var(--u) * 13) calc(var(--u) * 13) calc(var(--u) * 15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: calc(var(--u) * 17);
  overflow: hidden;
  background:
    radial-gradient(circle calc(var(--u) * 196) at 0 0, rgba(198, 207, 237, 0.42), rgba(198, 207, 237, 0)),
    linear-gradient(151deg, rgba(249, 249, 253, 0.94) 0%, rgba(242, 236, 249, 0.86) 100%);
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(88, 68, 112, 0.08), inset 0 1px 0 #fff;
  font-family: 'Manrope', var(--body-font), sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* 斜向高光 */
.bz-flv-fieldset.product-form__input::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.52;
  pointer-events: none;
  background: linear-gradient(116deg, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0.55) 47%, rgba(255, 255, 255, 0) 69%);
}
.bz-flv-fieldset.product-form__input > * { position: relative; }

/* 标题行：水滴图标 + Select Flavor */
.bz-flv-head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  margin-bottom: calc(var(--u) * 12);
}
.bz-flv-head__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border: 1px solid #fff;
  border-radius: calc(var(--u) * 11);
  background: rgba(119, 88, 220, 0.11);
}
.bz-flv-head__icon svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.bz-flv-fieldset .bz-flv-head__title {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  font-size: calc(var(--u) * 16);
  font-weight: 800;
  line-height: calc(var(--u) * 25);
  letter-spacing: 0.06em;
  color: #7b68bc;
}

/* 两列网格；单数个时最后一个占满一行（.is-wide 由 bz-flavor-cards.js 加） */
.bz-flv-fieldset.product-form__input .bz-flv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 7);
  width: 100%;
}

.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"] + label.bz-flv-item {
  display: grid;
  grid-template-columns: calc(var(--u) * 25) minmax(0, 1fr) calc(var(--u) * 18);
  align-items: center;
  gap: calc(var(--u) * 9);
  min-height: calc(var(--u) * 45);
  margin: 0;
  padding: calc(var(--u) * 7) calc(var(--u) * 8);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: calc(var(--u) * 11);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(65, 49, 79, 0.04), inset 0 1px 0 #fff;
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"] + label.bz-flv-item::before,
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"] + label.bz-flv-item::after {
  display: none;
}
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"] + label.bz-flv-item.is-wide {
  grid-column: 1 / -1;
}
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"]:not([disabled]) + label.bz-flv-item:hover {
  border-color: rgba(120, 89, 225, 0.35);
}

/* 选中：淡紫底 + 紫色描边 + 右侧对勾 */
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"]:checked + label.bz-flv-item {
  border-color: rgba(120, 89, 225, 0.72);
  background: linear-gradient(169deg, rgba(240, 236, 255, 0.94) 0%, rgba(250, 248, 255, 0.88) 100%);
  box-shadow: 0 calc(var(--u) * 7) calc(var(--u) * 16) rgba(111, 81, 204, 0.11), inset 0 1px 0 #fff;
  color: #1d1d1f;
}

/* 售罄 / 不可选 */
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"]:disabled + label.bz-flv-item {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.4);
}
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"]:disabled + label.bz-flv-item .bz-flv-name {
  text-decoration: line-through;
}

/* 口味色球：双色渐变 + 白边 + 左上高光点 */
.bz-flv-dot {
  position: relative;
  justify-self: start;
  width: calc(var(--u) * 23);
  height: calc(var(--u) * 23);
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--flv-c1, #8d7cc4) 0%, var(--flv-c2, #cfc4ee) 100%);
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(49, 36, 57, 0.13));
}
.bz-flv-dot::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 4);
  top: calc(var(--u) * 3);
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: rgba(255, 255, 255, 0.55);
}

.bz-flv-text { display: flex; flex-direction: column; min-width: 0; }
.bz-flv-name {
  overflow: hidden;
  font-size: calc(var(--u) * 8);
  font-weight: 700;
  line-height: calc(var(--u) * 9.6);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bz-flv-desc {
  margin-top: calc(var(--u) * 2);
  overflow: hidden;
  font-size: calc(var(--u) * 7);
  font-weight: 400;
  line-height: calc(var(--u) * 10.5);
  color: #8b8489;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bz-flv-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  border-radius: 50%;
  background: #7558dc;
  visibility: hidden;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1), opacity 0.15s ease;
}
.bz-flv-check svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"]:checked + label.bz-flv-item .bz-flv-check {
  visibility: visible;
  transform: none;
  opacity: 1;
}

/* ---- 窄版（Figma 手机端 7:764，361px 稿）---- */
@container (max-width: 460px) {
  .bz-flv-fieldset.product-form__input {
    --u: calc(100cqw / 361);
    padding: calc(var(--u) * 9) calc(var(--u) * 11) calc(var(--u) * 13);
    border-radius: calc(var(--u) * 16);
  }
  .bz-flv-head { margin-bottom: calc(var(--u) * 14); }
  .bz-flv-fieldset.product-form__input .bz-flv-grid { gap: calc(var(--u) * 6); }
  .bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"] + label.bz-flv-item {
    grid-template-columns: calc(var(--u) * 23) minmax(0, 1fr) calc(var(--u) * 17);
    gap: calc(var(--u) * 7);
    min-height: calc(var(--u) * 48);
    padding: calc(var(--u) * 7);
  }
  .bz-flv-dot { width: calc(var(--u) * 21); height: calc(var(--u) * 21); }
  .bz-flv-name { font-size: calc(var(--u) * 9); line-height: calc(var(--u) * 10.8); }
  .bz-flv-check { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
}

/* 分组筛选隐藏的卡片（hidden 属性会被上面的 display:grid 盖掉，这里补回） */
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"] + label.bz-flv-item[hidden] {
  display: none !important;
}

/* 口味 ≥10 个时 product-flavor-picker.js 在卡片上方加的分组标签 + 搜索框，配成卡片同一套风格 */
.bz-flv-fieldset .bz-flavor-picker--cards {
  margin: 0 0 calc(var(--u) * 9);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.bz-flv-fieldset .bz-flavor-picker--cards .bz-flavor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 5);
  margin: 0 0 calc(var(--u) * 8);
  padding: 0;
  border: 0;
  overflow: visible;
}
.bz-flv-fieldset .bz-flavor-picker--cards .bz-flavor-tab {
  height: calc(var(--u) * 22);
  margin: 0;
  padding: 0 calc(var(--u) * 9);
  border: 1px solid rgba(120, 89, 225, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #5e5470;
  font-family: inherit;
  font-size: calc(var(--u) * 7.5);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bz-flv-fieldset .bz-flavor-picker--cards .bz-flavor-tab:hover { border-color: rgba(120, 89, 225, 0.4); }
.bz-flv-fieldset .bz-flavor-picker--cards .bz-flavor-tab.is-active {
  border-color: transparent;
  background: #7558dc;
  color: #fff;
}
.bz-flv-fieldset .bz-flavor-picker--cards .bz-flavor-search {
  width: 100%;
  height: calc(var(--u) * 30);
  margin: 0;
  padding: 0 calc(var(--u) * 10);
  border: 1px solid rgba(120, 89, 225, 0.18);
  border-radius: calc(var(--u) * 9);
  background: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: calc(var(--u) * 8);
}
.bz-flv-fieldset .bz-flavor-empty {
  margin: calc(var(--u) * 8) 0 0;
  font-size: calc(var(--u) * 8);
  color: #8b8489;
}
@container (max-width: 460px) {
  .bz-flv-fieldset .bz-flavor-picker--cards .bz-flavor-tab {
    height: calc(var(--u) * 24);
    font-size: calc(var(--u) * 8.5);
  }
  .bz-flv-fieldset .bz-flavor-picker--cards .bz-flavor-search { font-size: calc(var(--u) * 9); }
}

/* 口味超过 10 个时折叠起来的卡片（product-flavor-picker.js 加 .is-folded） */
.bz-flv-fieldset.product-form__input .bz-flv-grid input[type="radio"] + label.bz-flv-item.is-folded {
  display: none !important;
}
/* 「Show all N flavors / Show fewer」 */
.bz-flv-fieldset .bz-flv-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  width: 100%;
  height: calc(var(--u) * 32);
  margin: calc(var(--u) * 9) 0 0;
  padding: 0;
  border: 1px dashed rgba(120, 89, 225, 0.35);
  border-radius: calc(var(--u) * 11);
  background: rgba(255, 255, 255, 0.55);
  color: #6a55c8;
  font-family: inherit;
  font-size: calc(var(--u) * 8);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bz-flv-fieldset .bz-flv-more[hidden] { display: none; }
.bz-flv-fieldset .bz-flv-more:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(120, 89, 225, 0.6); }
.bz-flv-fieldset .bz-flv-more::after {
  content: "";
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}
.bz-flv-fieldset .bz-flv-more.is-open::after { transform: translateY(25%) rotate(-135deg); }
@container (max-width: 460px) {
  .bz-flv-fieldset .bz-flv-more { height: calc(var(--u) * 36); font-size: calc(var(--u) * 9); }
}