/* =========================================================================
   Selectores de variación en chips.

   Los <select> originales de WooCommerce siguen en el DOM y solo se ocultan
   cuando el JS ha construido los chips (.has-variation-chips), de modo que sin
   JavaScript el formulario continúa siendo usable.
   ========================================================================= */

.variations_form.has-variation-chips .variations {
  display: none;
}

.variations_form.has-variation-chips .reset_variations {
  display: inline-block;
  margin: 2px 0 0;
  color: #7d7368;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Grupo -------------------------------------------------------------------- */
.variation-chip-group {
  position: relative;
  margin: 0 0 22px;
}

.variation-chip-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  color: #45423e;
  font-size: 12px;
}

.variation-chip-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid #c3b9ac;
  border-radius: 50%;
  color: #8b7c68;
  font-size: 9px;
  line-height: 1;
}

.variation-chip-title {
  letter-spacing: .02em;
}

.variation-chip-current {
  color: #8b7c68;
  font-size: 12px;
}

.variation-chip-current:not(:empty)::before {
  content: "· ";
}

/* Carril desplazable -------------------------------------------------------
   Con 14 medidas o 18 colores los chips no caben: en vez de romper el bloque
   en varias filas, el carril se desplaza en horizontal. */
.variation-chip-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.variation-chip-viewport::-webkit-scrollbar {
  display: none;
}

.variation-chip-track {
  display: flex;
  gap: 8px;
  width: max-content;
  padding: 2px 0;
}

/* Aviso visual de que el carril continúa. */
.variation-chip-viewport.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 100%);
}

.variation-chip-viewport.has-fade-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
}

.variation-chip-viewport.has-fade-start {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px);
  mask-image: linear-gradient(90deg, transparent 0, #000 46px);
}

.variation-chip-viewport.has-fade-start.has-fade-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
}

/* Chip --------------------------------------------------------------------- */
.variation-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #cec6bb;
  border-radius: 2px;
  background: #fff;
  color: #24211f;
  font: 400 12px/1.2 "DM Sans", sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.variation-chip:hover:not(:disabled):not(.is-selected) {
  border-color: #8b7c68;
}

.variation-chip:focus-visible {
  outline: 2px solid var(--store-accent, #9a7b5a);
  outline-offset: 2px;
}

.variation-chip.is-selected {
  background: #242320;
  border-color: #242320;
  color: #fff;
}
.variations_form.has-custom-area .variation-chip-group:not(.variation-chip-group--swatch) .variation-chip.is-selected{background:#fff;border-color:#bcb4aa;color:#2d2a27}
.variation-chip-group--manual-only{display:none!important}

/* No disponible con la combinación elegida: se mantiene visible para no
   descolocar el carril, pero se marca claramente y deja de ser pulsable. */
.variation-chip.is-unavailable {
  border-color: #e4ded6;
  background: #faf8f5;
  color: #b3aca2;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.variation-chip-extra {
  color: #8b7c68;
  font-size: 11px;
}

.variation-chip.is-selected .variation-chip-extra {
  color: rgba(255, 255, 255, .72);
}

/* Muestras de color --------------------------------------------------------
   La miniatura es la foto real de una variación con ese color, no un valor
   inventado (ningún atributo del catálogo guarda un código de color). */
.variation-chip-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(36, 33, 31, .14);
  border-radius: 2px;
  background-color: #efeae3;
  background-position: center;
  background-size: cover;
  flex: none;
}

.variation-chip-group--swatch .variation-chip {
  padding-left: 8px;
}

.variation-chip.is-unavailable .variation-chip-swatch {
  opacity: .38;
}

/* Caja de precio -----------------------------------------------------------
   Con la combinación completa manda el precio real de la variación; el
   "Precio desde" del tema se retira para no mostrar dos cifras a la vez. */
.product-purchase.has-selection .product-price-box {
  display: none;
}

.variations_form.has-variation-chips .single_variation_wrap {
  margin-top: 4px;
}

.variation-price-box:has(.single_variation:not(:empty)) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 15px 17px;
  border: 1px solid #ded8d0;
  background: #faf8f5;
}

.variation-price-box .single_variation {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: auto;
}

.variation-summary:empty {
  display: none;
}

.variation-summary {
  margin: 0;
  color: #45423e;
  font-size: 13px;
}

.variations_form.has-variation-chips .woocommerce-variation-price {
  margin-left: auto;
}

.variations_form.has-variation-chips .woocommerce-variation-price .price,
.variations_form.has-variation-chips .woocommerce-variation-price .amount {
  color: #24211f;
  font-size: 19px;
  font-weight: 500;
}

.variations_form.has-variation-chips .woocommerce-variation-availability {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
}

.variations_form.has-variation-chips .single_variation p[role="alert"] {
  margin: 0;
  color: #8a5b40;
  font-size: 12px;
}

/* Flechas ------------------------------------------------------------------ */
.variation-chip-controls {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.variation-chip-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #d7cfc4;
  border-radius: 50%;
  background: #fff;
  color: #45423e;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}

.variation-chip-nav:hover {
  border-color: #8b7c68;
  color: #24211f;
}

.variation-chip-nav[hidden] {
  display: none;
}

@media (max-width: 820px) {
  .variation-chip-group {
    margin-bottom: 20px;
  }

  .variation-chip-label {
    margin-bottom: 9px;
  }

  .variation-chip-step {
    width: 20px;
    height: 20px;
  }

  .variation-chip {
    min-height: 46px;
    padding: 0 14px;
    font-size: 12px;
  }

  .variation-chip-group--swatch .variation-chip {
    padding-left: 7px;
  }

  .variation-chip-swatch {
    width: 30px;
    height: 30px;
  }

  .variation-chip-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .variation-chip-viewport {
    scroll-behavior: auto;
  }
}