/* ======================================================================
   UBD Visual UX · PRODUCT SELECT ARROW FORCE 1.6.16

   Diagnóstico real contra WebArchive:
   - v1.6.15 SÍ estaba cargada.
   - El select real es:
       .product-variants-item > select.form-control.form-control-select
   - El tema ubd_modular carga después una hoja tardía que fuerza:
       background-image:none!important;
   - Por eso el chevron hecho como background del select quedaba invisible.

   Corrección:
   - No dependemos ya del background-image del <select>.
   - Dibujamos un indicador visual independiente con ::after sobre el
     .product-variants-item que CONTIENE un select.
   - :has(> select) da además mayor especificidad que las reglas tardías.
   ====================================================================== */

html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select.form-control-select),
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select.form-control),
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select) {
  position: relative !important;
}

/* Asegura espacio para el indicador. */
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select.form-control-select) > select,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select.form-control) > select,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select) > select {
  padding-right: 58px !important;
  cursor: pointer !important;
}

/* Indicador circular moderno, independiente del background del select. */
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select.form-control-select)::after,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select.form-control)::after,
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select)::after {
  content: "⌄" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: absolute !important;
  right: 12px !important;
  bottom: 7px !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 0 0 5px !important;

  border: 0 !important;
  border-radius: 999px !important;
  outline: 0 !important;

  background: #EAF3EC !important;
  background-color: #EAF3EC !important;
  background-image: none !important;

  color: #2F6B57 !important;
  -webkit-text-fill-color: #2F6B57 !important;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;

  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

/* El select recibe un feedback visual ligero al enfocarse/abrirse. */
html.ubd-product-ready body#product.ubd-modular-page
#wrapper #main form#add-to-cart-or-refresh
.product-variants .product-variants-item:has(> select) > select:focus {
  border-color: rgba(47,107,87,.40) !important;
  box-shadow: 0 0 0 3px rgba(47,107,87,.08) !important;
}

/* Móvil: indicador ligeramente mayor para que la affordance sea obvia. */
@media (max-width: 767px) {
  html.ubd-product-ready body#product.ubd-modular-page
  #wrapper #main form#add-to-cart-or-refresh
  .product-variants .product-variants-item:has(> select) > select {
    padding-right: 60px !important;
  }

  html.ubd-product-ready body#product.ubd-modular-page
  #wrapper #main form#add-to-cart-or-refresh
  .product-variants .product-variants-item:has(> select)::after {
    right: 10px !important;
    bottom: 6px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 27px !important;
  }
}