/* Cyber 2026 — Bundle swatches: convierte variant-picker buttons en círculos de color */
:is(
  variant-picker[data-product-id="8704241828039"],
  variant-picker[data-product-id="8711409402055"],
  variant-picker[data-product-id="8711409565895"],
  variant-picker[data-product-id="8711196672199"],
  variant-picker[data-product-id="8711197491399"]
) {
  /* Layout fieldset flex */
  & fieldset.variant-option {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }

  & fieldset.variant-option legend {
    margin-bottom: 8px;
    width: 100%;
  }

  /* Esconder texto y pill */
  & .variant-option__button-label__text,
  & .variant-option__button-label__pill {
    display: none !important;
  }

  /* Convertir labels en círculos */
  & .variant-option__button-label {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.11);
    cursor: pointer;
    padding: 0;
    margin: 0;
    overflow: hidden;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  /* Estado checked: borde negro + halo blanco */
  & .variant-option__button-label:has(input:checked) {
    border: 2px solid #1a1111;
    box-shadow: 0 0 0 2px #fff inset;
  }

  /* Colores por value */
  & .variant-option__button-label:has(input[value="Blanco"]),
  & .variant-option__button-label:has(input[value="White"]) { background: #FFFFFF; }
  & .variant-option__button-label:has(input[value="Pink"])  { background: #FFC0CB; }
  & .variant-option__button-label:has(input[value="Gris Espacial"]) { background: #4a4a4a; }
  & .variant-option__button-label:has(input[value="Silver"]) { background: #C0C0C0; }
}