/* Native shared select remains the sole interactive and accessible control. */
.field > .ip-wrap-select { display: contents; font: inherit; }
.field .ip-wrap-select > select { font-weight: 400; }
.ip-wrap-select > .ip-wrap-select-value,
.ip-wrap-select > .ip-wrap-select-chevron { display: none; }
@media (max-width: 600px) {
  .field > .ip-wrap-select {
    position: relative;
    display: grid;
    min-width: 0;
    width: 100%;
    font: inherit;
  }
  .field .ip-wrap-select > select {
    grid-area: 1 / 1;
    align-self: stretch;
    height: 100%;
    min-height: 3rem;
    min-width: 0;
    font-size: 1rem;
    appearance: none;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .field .ip-wrap-select > select option {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
  }
  .field .ip-wrap-select > .ip-wrap-select-value {
    display: block;
    grid-area: 1 / 1;
    z-index: 1;
    align-self: center;
    min-width: 0;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
  }
  .ip-wrap-select > .ip-wrap-select-chevron {
    display: block;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 1rem;
    height: 1rem;
    color: var(--text);
    pointer-events: none;
  }
  .ip-wrap-select:has(> select:disabled) > .ip-wrap-select-value,
  .ip-wrap-select:has(> select:disabled) > .ip-wrap-select-chevron { opacity: 0.6; }
}