/* Upline Variation Swatches v2.5.9 */
/* Upline Variation Swatches — frontend styles */

/* ── Layout ─────────────────────────────────────────── */
.uvs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.uvs--loop   { justify-content: center; margin-bottom: 8px; }
.uvs--single { gap: 14px; }

/* Scroll strip mode: single row, horizontal scroll */
.uvs--scroll {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 4px;
}
.uvs--scroll::-webkit-scrollbar { display: none; }

/* .uvs-attr__row kept for back-compat but no longer used for ver-más layout */
.uvs-attr__row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.uvs-attr { margin: 10px 0 14px; }
.uvs-attr__label { font-weight: 700; margin-bottom: 8px; }
.uvs__more { font-size: 12px; opacity: .75; }

/* ── Hidden selects (keep in DOM for WC JS, invisible to users) ─── */
.uvs__select-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.uvs__select-hidden select {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Hide native WC variation table when swatches pack is present ── */
form.variations_form.uvs-has-swatches table.variations,
form.variations_form:has(.uvs-single-pack) table.variations {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Base swatch button ──────────────────────────────── */
.uvs__swatch {
  --uvs-size: 36px;
  all: unset;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--uvs-size) !important;
  height: var(--uvs-size) !important;
  min-width: var(--uvs-size) !important;
  min-height: var(--uvs-size) !important;
  flex-shrink: 0 !important;   /* don't squish in scroll strip */
  border-radius: 9999px !important;
  position: relative !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: none !important;
}
.uvs__swatch:focus { outline: none !important; }

/* Extra swatches hidden until "ver más" is clicked.
   NOTE: specificity must beat .uvs__swatch--button (0,1,0) which comes later
   in this file and also declares display:inline-flex !important.
   Using .uvs-attr ancestor raises specificity to (0,2,0) so it wins. */
.uvs-attr .uvs__swatch--extra {
  display: none !important;
}
.uvs-attr--expanded .uvs__swatch--extra {
  display: inline-flex !important;
}

/* ── Color / image inner circle ─────────────────────── */
.uvs__dot,
.uvs__swatch--image .uvs__img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 9999px !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(0, 0, 0, .18) !important;
}
.uvs__dot { background: var(--uvs-color, #ddd) !important; }
.uvs__swatch--image .uvs__img {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ── Button / size swatch ────────────────────────────── */
.uvs__swatch--button {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--uvs-size) !important;
  height: var(--uvs-size) !important;
  min-width: var(--uvs-size) !important;
  min-height: var(--uvs-size) !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
  position: relative !important;
  overflow: visible !important;
  background: #ffffff !important;
  border: 2px solid rgba(0, 0, 0, .18) !important;
}
.uvs__swatch--button:focus { outline: none !important; }
.uvs__swatch--button .uvs__text {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #111 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Multi-select: selected swatches get a stacking ring indicator */
.uvs-attr[data-uvs-multiselect="true"] .uvs__swatch.is-active + .uvs__swatch.is-active {
  /* subtle gap between consecutive active pills */
  margin-left: 2px !important;
}

/* ── "Ver más" button ────────────────────────────────── */
.uvs__ver-mas {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #444 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.uvs__ver-mas:hover {
  background: #f0f0f0 !important;
  border-color: rgba(0,0,0,0.4) !important;
}
.uvs__ver-mas[aria-expanded="true"] {
  /* "Ver menos" state */
  background: #f0f0f0 !important;
}

/* ── Tooltip ─────────────────────────────────────────── */
.uvs__tooltip {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 7px) !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  background: rgba(0, 0, 0, .82) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}
.uvs__tooltip::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 4px solid transparent !important;
  border-top-color: rgba(0, 0, 0, .82) !important;
}
.uvs__swatch:hover .uvs__tooltip { opacity: 1 !important; }

/* ── Duplicate price suppression (Elementor + theme) ── */
.uvs-hide-duplicate-price .summary .price { display: none !important; }
.uvs-hide-duplicate-price .elementor-widget-woocommerce-product-price .price { display: block !important; }

/* Hide WC variation price area to avoid duplicate display */
.woocommerce-variation-price,
.woocommerce-variation .price,
.single_variation .price { display: none !important; }

/* ── Multi-add-to-cart feedback ──────────────────────── */
.uvs-cart-feedback {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
  animation: uvs-fadein 0.2s ease;
}
@keyframes uvs-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}