/* ======================================================================
   UBD Visual UX · PRODUCT CHOICE PALETTE 1.6.12

   Objetivo:
   - Sustituir el encabezado oscuro de los selectores de producto por una
     paleta más integrada con las fichas actuales del catálogo.
   - Mantener una apariencia más moderna, ligera y coherente.
   - Conservar intacta toda la funcionalidad de selects/radios/inputs.

   Sólo CSS. No modifica HTML, hooks, JS ni lógica funcional.
   ====================================================================== */

html.ubd-product-ready body#product {
  --ubd-pc-ink: #17383e;
  --ubd-pc-soft-line: rgba(23,56,62,.10);
  --ubd-pc-1: #F2C45C; /* mostaza cálida */
  --ubd-pc-2: #A7C77A; /* verde suave */
  --ubd-pc-3: #E98A57; /* naranja coral */
  --ubd-pc-4: #9CCFC3; /* menta aqua */
  --ubd-pc-1-soft: #F8E7B1;
  --ubd-pc-2-soft: #D5E8BD;
  --ubd-pc-3-soft: #F6C3AB;
  --ubd-pc-4-soft: #CDE9E3;
}

/* Base: encabezados claros, ya no oscuros. */
html.ubd-product-ready body#product :is(.product-variants-item, .product-customization-item) > :is(label, span.control-label, .control-label:first-child) {
  color: var(--ubd-pc-ink) !important;
  -webkit-text-fill-color: var(--ubd-pc-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(23,56,62,.04) !important;
}

html.ubd-product-ready body#product :is(.product-variants-item, .product-customization-item) > :is(label, span.control-label, .control-label:first-child) * {
  color: var(--ubd-pc-ink) !important;
  -webkit-text-fill-color: var(--ubd-pc-ink) !important;
  text-shadow: none !important;
}

/* Alternar tonos inspirados en las fichas del catálogo. */
html.ubd-product-ready body#product .product-variants-item:nth-of-type(4n+1) > :is(label, span.control-label, .control-label:first-child),
html.ubd-product-ready body#product .product-customization-item:nth-of-type(4n+1) > :is(label, span.control-label, .control-label:first-child) {
  background: linear-gradient(180deg, var(--ubd-pc-1-soft) 0%, var(--ubd-pc-1) 100%) !important;
  background-color: var(--ubd-pc-1) !important;
}

html.ubd-product-ready body#product .product-variants-item:nth-of-type(4n+2) > :is(label, span.control-label, .control-label:first-child),
html.ubd-product-ready body#product .product-customization-item:nth-of-type(4n+2) > :is(label, span.control-label, .control-label:first-child) {
  background: linear-gradient(180deg, var(--ubd-pc-2-soft) 0%, var(--ubd-pc-2) 100%) !important;
  background-color: var(--ubd-pc-2) !important;
}

html.ubd-product-ready body#product .product-variants-item:nth-of-type(4n+3) > :is(label, span.control-label, .control-label:first-child),
html.ubd-product-ready body#product .product-customization-item:nth-of-type(4n+3) > :is(label, span.control-label, .control-label:first-child) {
  background: linear-gradient(180deg, var(--ubd-pc-3-soft) 0%, var(--ubd-pc-3) 100%) !important;
  background-color: var(--ubd-pc-3) !important;
}

html.ubd-product-ready body#product .product-variants-item:nth-of-type(4n+4) > :is(label, span.control-label, .control-label:first-child),
html.ubd-product-ready body#product .product-customization-item:nth-of-type(4n+4) > :is(label, span.control-label, .control-label:first-child) {
  background: linear-gradient(180deg, var(--ubd-pc-4-soft) 0%, var(--ubd-pc-4) 100%) !important;
  background-color: var(--ubd-pc-4) !important;
}

/* Campo / valor elegido se mantiene limpio y ligeramente más integrado. */
html.ubd-product-ready body#product :is(.product-variants-item, .product-customization-item)
:is(select, .form-control, .custom-select, .input-group, .selector, .bootstrap-select, .dropdown-toggle) {
  border: 1px solid var(--ubd-pc-soft-line) !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* Color mantel y similares: dejarles respirar visualmente */
html.ubd-product-ready body#product :is(.product-variants-item, .product-customization-item) .input-color,
html.ubd-product-ready body#product :is(.product-variants-item, .product-customization-item) .radio-label {
  box-shadow: none !important;
}

@media (max-width: 767px) {
  html.ubd-product-ready body#product :is(.product-variants-item, .product-customization-item) > :is(label, span.control-label, .control-label:first-child) {
    min-height: 40px !important;
    border-radius: 17px !important;
  }
}