/* Contenedor */
.sort{ display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center;}
.sort__label, .grid_header__total_products { font-weight: normal !important; }

/* Wrapper del custom select */
.sort__wrapper{ position:relative; width:100%; min-width: 190px; }

/* Trigger (caja visible) */
.sort__trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border:1px solid #E5E7EB; border-radius:8px; background:#fff;
  cursor:pointer; font-size: var(--cml-body-size); color:var(--cml-gray_primary-color); line-height:1.2;
}
.sort__trigger:focus{ outline:2px solid var(--cml-green-500); outline-offset:2px; }
.sort__chevron{ margin-left:8px; color: var(--cml-gray_primary-color); }

/* Lista desplegable */
.sort__list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  background:#fff; border:1px solid #E5E7EB; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:6px; margin:0; list-style:none; max-height:260px; overflow:auto;
  opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .15s ease, transform .15s ease;
}
.sort__wrapper[aria-expanded="true"] .sort__list{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* Opciones */
.sort__option{
  padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--cml-gray_primary-color);
}
.sort__option:hover, .sort__option[aria-selected="true"]{ background:#F3F4F6; }
.sort__option.is-active{ background:var(--cml-green-50); }

/* Select nativo oculto pero funcional para formularios (si envías el form) */
.sort__native{
  position:absolute !important; inset:auto auto 0 0; width:1px; height:1px; opacity:0; pointer-events:none;
}

/* Responsive */
@media (max-width:640px){
  .sort{ grid-template-columns:1fr; max-width:100%; }
  .sort__label{
      display: none;
  }
  
  .sort__trigger {
        width: auto;
        padding: 0;
        border: 0px;
  }
  
  .sort__wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        min-width: 0;
  }
  
  .sort-trigger-text.ci-icon {
      font-size: 100%;
  }
  
  .sort__list {
    width: auto;
    left: auto;
  }
  
  .sort__option {
/*      text-align: right;*/
  }
  
}