.ss-main,
.ss-content {
  --ss-main-height: 55px;
  --ss-border-radius: 2px;
  --ss-border-color: #f5f5f4;
  --ss-font-color: var(--secondary);
  font-size: var(--text-m);
  --ss-bg-color: #f5f5f4;
  --ss-content-height: 208px;
}
.ss-main:hover,
.ss-main.ss-open-below,
.ss-content.ss-open-below {
  --ss-border-color: var(--secondary);
}
.ss-main.ss-main,
.ss-content.ss-content {
  border-width: 2px;
}
.ss-main.ss-main {
  padding: 5px 24px;
  transition: border-color var(--transition-duration) var(--transition-timing);
}
@media (max-width: 767px) {
  .ss-main.ss-main {
    padding: 5px 14px;
  }
}
.ss-content.ss-open-below  {
  margin: 0 !important;
  border-top: none;
}
.ss-main.ss-main .ss-values .ss-single {
  margin: auto 0;
}
.ss-main.ss-main .ss-values .ss-placeholder {
  opacity: 1;
}
.ss-main.ss-main .ss-values .ss-single,
.ss-main.ss-main .ss-values .ss-placeholder {
  padding: 0;
  color: inherit;
}
.ss-main.ss-main .ss-arrow {
  flex-shrink: 0;
  margin: auto 0 auto 8px;
  min-height: auto;
  min-width: auto;
  width: 9px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5' fill='none'%3E%3Cpath d='M4.69995 4.40003L0.699951 0.133362H8.69995L4.69995 4.40003Z' fill='%23414141'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.ss-main.ss-main.ss-open-below .ss-arrow {
  transform: rotate(180deg);
}
.ss-main.ss-main .ss-arrow *,
.ss-main.ss-main .ss-deselect {
  display: none;
}
.ss-content.ss-content .ss-list {
  padding: 0;
}
.ss-content.ss-content .ss-list .ss-option {
  padding: 8px 24px;
  transition: all var(--transition-duration) var(--transition-timing);
}
@media (max-width: 767px) {
  .ss-content.ss-content .ss-list .ss-option {
    padding: 8px 14px;
  }
}
.ss-content.ss-content .ss-list .ss-option:hover {
  background-color: var(--secondary-dark);
  color: var(--primary-hover);
}
.ss-content.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  background-color: var(--secondary);
  color: var(--primary-hover);
}

.ss-main.ss-main.ss-invalid:not(.ss-open-below) {
  border: 1px solid var(--bricks-text-danger);
}

.ss-main.variations-select,
.ss-content.variations-select {
  --ss-main-height: 40px;
  --ss-border-radius: 0px;
  --ss-border-color: var(--secondary);
  --ss-bg-color: var(--primary-light);
}
.ss-main.ss-main.variations-select,
.ss-content.ss-content.variations-select {
  border-width: 1px;
}
.ss-main.ss-main.variations-select {
  padding: 5px 12px;
}
.ss-content.ss-content.variations-select .ss-list .ss-option {
  padding: 5px 12px;
}