/* Product page controls (ACSS-friendly) */
.sfpp-select { position: relative; width: 100%; }
.sfpp-select__button {
  display: inline-flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-size: var(--text-m); line-height: var(--btn-line-height); letter-spacing: var(--btn-letter-spacing);
  border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-border-radius);
  min-inline-size: var(--btn-min-width);
  background: var(--base-2, #fff); color: inherit; border: 1px solid var(--border-color, #ddd);
}
.sfpp-select__chevron { margin-left: .5em; }
/* remove bullets + default spacing */
.sfpp-select__list {
  position: absolute; left: 0; right: 0; top: calc(100% + .25rem); z-index: 20; display: none;
  background: var(--base-2, #fff); border: 1px solid var(--border-color, #ddd); border-radius: var(--btn-border-radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  max-height: 16rem; overflow: auto;
  list-style: none; margin: 0; padding: 0;
}
.sfpp-select__option { padding: var(--btn-padding-block) var(--btn-padding-inline); cursor: pointer; }
.sfpp-select__option[aria-selected="true"] { background: var(--base-3, #f5f5f5); }

/* Input matches select skin */
.sfpp__input { width: 100%; padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-size: var(--text-m); line-height: var(--btn-line-height); letter-spacing: var(--btn-letter-spacing);
  border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--btn-border-radius);
  min-inline-size: var(--btn-min-width); border-color: var(--border-color, #ddd);
}
.sfpp__name .sfpp__required { margin-left: .25em; }