/* Ocultamos solo los selects que vamos a reemplazar */
.mi-hide-select { display: none !important; }

/* ----- Peso del diamante: tarjetas ----- */
.mi-peso-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px){ .mi-peso-grid{ grid-template-columns: 1fr 1fr; } }

.mi-peso-card {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 6px;
  padding: 14px 12px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .04s ease, border-color .15s ease, background .15s ease;
  text-align: center;
  min-height: 66px;
}
.mi-peso-card:hover { transform: translateY(-1px); }
.mi-peso-card.is-active {
  background: #e6f4ea;            /* verde suave como en tu ejemplo */
  border-color: #9ad1b1;
  box-shadow: 0 0 0 2px rgba(52,168,83,.18);
}
.mi-peso-card.is-disabled {
  opacity: .45; cursor: not-allowed;
}

.mi-peso-ct { font-weight: 700; font-size: 16px; line-height: 1.2; }
.mi-peso-price { font-size: 14px; color: #4b5563; }

/* ----- Grosor: radios (estilo limpio) ----- */
.mi-grosor-radios { display: grid; gap: 8px; }
.mi-grosor-item {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  user-select: none;
}
.mi-grosor-item input { accent-color: #111827; } /* neutro oscuro */
.mi-grosor-item.is-active { font-weight: 600; }

/* ----- Ajustes para el bloque original de Woo ----- */
.variations .label label { font-weight: 600; }




/* ====== Selector de color (Woo Variation Swatches) ====== */
.variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px){
  .variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Cada ítem */
.variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded li.variable-item {
  width: 44px !important;
  height: 44px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
  position: relative;
  background: #fff;
}
.variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded li.variable-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded li.variable-item.selected{
  border-color: #111827 !important;
  box-shadow: 0 0 0 3px rgba(17,24,39,.15);
}

/* Círculo de color */
.variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded li.variable-item .variable-item-contents,
.variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded li.variable-item .swatch-anchor {
  border-radius: 9999px !important;
  overflow: hidden;
}

/* Check de seleccionado */
.variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded li.variable-item.selected::after{
  content: "✓";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 20px; height: 20px;
  font-size: 12px; line-height: 20px; text-align: center;
  background: #111827; color: #fff;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Disabled */
.variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded li.variable-item.disabled,
.variable-items-wrapper.image-variable-items-wrapper.wvs-style-rounded li.variable-item.unavailable {
  opacity: .45; cursor: not-allowed;
}

/* Etiqueta bajo cada color */
.mi-color-label {
  display: block;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  margin-top: 6px;
  color: #374151;
}

/* Línea de “Color: …” compacta */
.variations .label label {
  display: inline-block;
  margin-right: 8px;
}
/* Texto actual elegido junto a la etiqueta */
.mi-color-current {
  font-weight: 600;
}