variant-selects {
  display: block;
}

.product-version-selector {
  margin-top: 0;
}

.product-version-selector input[type='radio'] + label {
  min-width: 110px;
}

.product-version-selector [data-version-selected-value] {
  margin-left: 0.25rem;
}

.product--no-media .product-form__input--pill,
.product--no-media .product-form__input--swatch,
.product--no-media .product-form__input--dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.product--no-media .product-form__input.product-form__input--pill,
.product--no-media .product-form__input.product-form__input--swatch {
  flex-wrap: wrap;
  margin: 0 auto 1.2rem auto;
}

.product--no-media .product-form__input--dropdown {
  flex-direction: column;
  max-width: 100%;
}

:is(.product-form__input--pill, .product-form__input--swatch) .form__label {
  margin-bottom: 0.2rem;
  color: #000;
}

.product-form__input input[type='radio'] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.product-form__input input[type='radio']:not(.disabled):not(.visually-disabled)+label>.label-unavailable {
  display: none;
}

.product-form__input--dropdown {
  --swatch-input--size: 2rem;
  margin-bottom: 1.6rem;
}

.product-form__input--dropdown .dropdown-swatch+select {
  padding-left: calc(2.4rem + var(--swatch-input--size));
}

.product-form__input--dropdown .dropdown-swatch {
  position: absolute;
  left: 1.6rem;
  top: calc(50% - var(--swatch-input--size) / 2);
  width: var(--swatch-input--size);
  height: var(--swatch-input--size);
  z-index: 1;
}


.product-form__input--pill input[type='radio']+label {
  border: 2px solid #e2e2e2;
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground));
  border-radius: var(--variant-pills-radius);
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 1rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative;
}

/* Custom styles for Pill display type 
.product-form__input--pill input[type='radio'] + label {
  border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground));
  border-radius: var(--variant-pills-radius);
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative;
}*/

.product-form__input--pill input[type='radio']+label:before {
  content: '';
  position: absolute;
  top: calc(var(--variant-pills-border-width) * -1);
  right: calc(var(--variant-pills-border-width) * -1);
  bottom: calc(var(--variant-pills-border-width) * -1);
  left: calc(var(--variant-pills-border-width) * -1);
  z-index: -1;
  border-radius: var(--variant-pills-radius);
  box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset) var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
}

.product-form__input--pill input[type='radio']+label:hover {
  border-color: #bfbfbf;
  /*rgb(var(--color-foreground));*/
}

/* Product metafield-backed size labels: visible for reference, never selectable. */
.product-form__input--pill .virtual-size-option {
  border: 2px dashed #bfbfbf;
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground), 0.72);
  border-radius: var(--variant-pills-radius);
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 1rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.product-form__input--dropdown .virtual-size-option {
  display: inline-block;
  margin-top: 0.8rem;
}

/*.product-form__input--pill input[type='radio']:checked + label {
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}*/




/* 其他元素的样式 */
.product-form__input--pill:not(.button__Color) input[type='radio']:checked+label {
  border: 2px solid #cf3232;
  box-shadow: 0 0 0 3px rgba(207, 50, 50, 0.12);
}



@media screen and (forced-colors: active) {
  .product-form__input--pill input[type='radio']:checked+label {
    text-decoration: underline;
  }

  .product-form__input--pill input[type='radio']:focus-visible+label {
    outline: transparent solid 1px;
    outline-offset: 2px;
  }
}

.product-form__input--pill input[type='radio']:checked+label::selection {
  background-color: rgba(var(--color-background), 0.3);
}

.product-form__input--pill input[type='radio']:disabled+label,
.product-form__input--pill input[type='radio'].disabled+label {
  border-color: rgba(var(--color-foreground), 0.1);
  color: rgba(var(--color-foreground), 0.6);
  text-decoration: line-through;
  display: none;
}

.product-form__input--pill input[type='radio'].disabled:checked+label,
.product-form__input--pill input[type='radio']:disabled:checked+label {
  color: rgba(var(--color-background), 0.6);
}

.product-form__input--pill input[type='radio']:focus-visible+label {
  box-shadow: 0 0 0 3px rgba(207, 50, 50, 0.14);
}

/* Fallback */
.product-form__input--pill input[type='radio'].focused+label {
  box-shadow: 0 0 0 3px rgba(207, 50, 50, 0.14);
}

/* Custom styles for Swatch display type */
.product-form__input--swatch {
  display: flex;
  flex-wrap: wrap;
}

.product-form__input--swatch .swatch-input__input+.swatch-input__label {
  --swatch-input--size: 3.6rem;

  margin: 0.7rem 1.2rem 0.2rem 0;
}

@media screen and (min-width: 750px) {
  .product-form__input--swatch .swatch-input__input+.swatch-input__label {
    --swatch-input--size: 2.8rem;
  }
}

/* End custom styles for Swatch display type */

/* 悬停时显示 Tooltip */
.color-swatch {
  position: relative;
  /* 设置相对定位作为 tooltip 的参考点 */
}

/* Tooltips */
.color-swatch .tooltip {
  text-align: center;
  background: #333;
  background: rgba(51, 51, 51, 0.9);
  /* 背景颜色带透明度 */
  color: #fff;
  bottom: 100%;
  /* 在元素上方 */
  padding: 5px 10px;
  display: block;
  position: absolute;
  width: 120px;
  font-size: 13px;
  left: 50%;
  /* 使用 50% 左对齐 */
  transform: translateX(-50%);
  /* 水平居中对齐 */
  margin-bottom: 15px;
  /* 与元素的距离 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease-out;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  /* 轻微阴影效果 */
  z-index: 10000;
  /* 确保 tooltip 显示在最上层 */
}

/* CSS 三角形箭头 */
.color-swatch .tooltip:after {
  content: "";
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  /* 三角形颜色与背景一致 */
  bottom: -10px;
  /* 将箭头放在 tooltip 底部 */
  left: 50%;
  /* 箭头居中 */
  transform: translateX(-50%);
  /* 确保箭头居中 */
  position: absolute;
  width: 0;
  height: 0;
}

/* 悬停时显示 tooltip */
.color-swatch:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  /* 悬停时 tooltip 上移到正确位置 */
}

/* 禁用状态 */
input[type="radio"]:disabled+.color-swatch {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 隐藏原生的 radio 按钮 */
.color-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 默认的颜色选项样式 */
.button__Color input[type='radio']+label {font-size: 0;
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* 使用50%确保总是圆形 */
  border: 1px solid rgb(var(--color-foreground));
  /*#d2d5d9 */
  cursor: pointer;
  transition: border-color 0.3s ease;
  position: relative;
  margin-right: 10px;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  /* 强制1:1的宽高比 */

}

/* 选中状态的样式，使用伪元素实现外边框 */
.color-radio:checked+.color-swatch {
  border-color: white;
  /* 内边框为白色 */
  padding: 0;
}

.color-radio:checked+.color-swatch::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  padding: 0;
  width: 40px;
  /* 36px + 2px * 2 (边框) */
  height: 40px;
  /* 36px + 2px * 2 (边框) */
  border-radius: 50%;
  border: 2px solid #cf3232;
  box-sizing: border-box;
}

/* 其他样式保持不变 */
.color-radio:disabled+.color-swatch {
  opacity: 0.5;
  padding: 0;
  cursor: not-allowed;
}

.color-swatch:hover {
  border-color: inherit;
  box-shadow: none;
  outline: none;
  padding: 0;
}

.color-radio:checked+.color-swatch:hover {
  border-color: white;
  box-shadow: none;
  outline: none;
  padding: 0;
}

/* Tooltip 样式可能需要微调 */
.color-swatch .tooltip {
  /* 其他样式保持不变 */
  margin-bottom: 12px;
  /* 可能需要调整，确保不遮挡颜色选择器 */
}


/* 表单标签样式 */
.form__label {
  display: block;
  font-weight: bold;
}


.uppercase-text {
  /*text-transform: uppercase;*/
}

.button__Color {
  margin-bottom: 0px !important;
}

.option-label .bestbadge,
.option-label .bestbadge {
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  color: #fff;
  background: #cf3232;
  border-radius: 8px;
  font-size: 11px;
  text-transform: capitalize;
  line-height: 1.5;
  padding: 2px 4px;
  white-space: nowrap;
  z-index: 1;
}

.option-label .bestbadge.baby {
  background: #0073b4;
}



.option-label .favoritebadge,
.option-label .favoritebadge {
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  color: #fff;
  background: #cf3232;
  border-radius: 8px;
  font-size: 11px;
  text-transform: capitalize;
  line-height: 1.5;
  padding: 2px 4px;
  white-space: nowrap;
  z-index: 1;
}

.option-label .favoritebadge.baby {
  background: #0073b4;
}
/* 圆形颜色色块：Color of Stamp / Ink Color */.product-form__input--pill.button__Color input[type='radio'] + label,.product-form__input--pill.button__Ink input[type='radio'] + label {  width: 36px;  height: 36px;  min-width: 36px;  padding: 0;  margin: 0.7rem 1rem 0.2rem 0;  border: 1px solid #e2e2e2;  border-radius: 50%;  box-sizing: border-box;  font-size: 0;  vertical-align: middle;}.product-form__input--pill.button__Color input[type='radio']:checked + label,.product-form__input--pill.button__Ink input[type='radio']:checked + label {  border: 2px solid #fff;  box-shadow: 0 0 0 3px #cf3232;}.product-form__input--pill.button__Color input[value='Black'] + label,.product-form__input--pill.button__Ink input[value='Black'] + label { background-color: #000; }.product-form__input--pill.button__Color input[value='Blue'] + label,.product-form__input--pill.button__Ink input[value='Blue'] + label { background-color: #a1c7df; }.product-form__input--pill.button__Color input[value='Red'] + label,.product-form__input--pill.button__Ink input[value='Red'] + label { background-color: #bb343e; }.product-form__input--pill.button__Color input[value='Yellow'] + label,.product-form__input--pill.button__Ink input[value='Yellow'] + label { background-color: #ffee8c; }.product-form__input--pill.button__Color input[value='Green'] + label,.product-form__input--pill.button__Ink input[value='Green'] + label { background-color: #008000; }.product-form__input--pill.button__Color input[value='Purple'] + label,.product-form__input--pill.button__Ink input[value='Purple'] + label { background-color: #981cb3; }