.siz3r-interface--same-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.siz3r-button-wrapper {
  display: none !important;
  box-sizing: border-box;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  --siz3r-padding-block: 14px;
  --siz3r-padding-inline: 22px;
  --siz3r-font-size: 16px;
  --siz3r-logo-height: 18px;
}

.siz3r-button-wrapper.is-ready {
  display: block !important;
}

.siz3r-button-wrapper--full {
  width: 100%;
}

.siz3r-button {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--siz3r-padding-block) var(--siz3r-padding-inline);
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(135deg, #5e3f86 0%, #704b9b 48%, #8d67be 100%);
  box-shadow: none !important;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--siz3r-font-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.siz3r-button.is-loading,
.siz3r-button.is-disabled {
  cursor: default;
}

.siz3r-button.is-loading {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(135deg, #727985 0%, #868d99 52%, #9aa1ac 100%);
  color: rgba(255, 255, 255, 0.96);
}

.siz3r-button.is-disabled {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(135deg, #7a6b8e 0%, #8a7a9f 52%, #998aad 100%);
  color: rgba(255, 255, 255, 0.96);
}

.siz3r-button-wrapper--full .siz3r-button {
  width: 100%;
}

.siz3r-size-suggestion-wrapper {
  box-sizing: border-box;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 10px;
  margin-left: auto;
}

.siz3r-size-suggestion-wrapper--full {
  width: 100%;
}

.siz3r-size-suggestion {
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  /* width: 100%; */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(60, 25, 146, 0.16);
  border-radius: 12px;
  background: rgba(60, 25, 146, 0.06);
  color: #25113f;
  font-family: inherit;
}

.siz3r-size-suggestion[hidden] {
  display: none;
}

.siz3r-size-suggestion__label {
  font-size: 0.86rem;
  font-weight: 600;
  opacity: 0.76;
}

.siz3r-size-suggestion__logo {
  display: block;
  width: auto;
  max-width: 90px;
  max-height: 18px;
  flex: 0 0 auto;
}

.siz3r-size-suggestion__value {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.siz3r-size-suggestion__spinner {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid rgba(112, 75, 155, 0.22);
  border-top-color: #704b9b;
  border-radius: 999px;
  animation: siz3r-spin 700ms linear infinite;
  vertical-align: -0.16em;
}

.siz3r-suggested-size-option {
  position: relative !important;
  z-index: 0;
  box-shadow: 0 8px 18px rgba(0, 210, 120, 0.14) !important;
}

.siz3r-suggested-size-option::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 2;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #704b9b, #00d278);
  -webkit-mask:
    linear-gradient(#ffffff 0 0) content-box,
    linear-gradient(#ffffff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.siz3r-suggested-size-variant-button {
  isolation: isolate;
}

.siz3r-suggested-size-variant-button::before {
  border-radius: var(--variant-picker-button-radius, 14px);
}

.siz3r-suggested-size-variant-button .variant-option__button-label__pill,
.siz3r-suggested-size-variant-button [data-key="variant-option-pill"] {
  box-shadow: 0 8px 18px rgba(0, 210, 120, 0.14) !important;
}

.siz3r-suggested-size-select {
  border-color: transparent !important;
  background:
    linear-gradient(
        var(--siz3r-surface, #ffffff),
        var(--siz3r-surface, #ffffff)
      )
      padding-box,
    linear-gradient(135deg, #704b9b, #00d278) border-box !important;
}

.siz3r-variant-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(112, 75, 155, 0.16);
  border-radius: 999px;
  background: #ffffff;
  color: #25113f;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 6px 16px rgba(37, 17, 63, 0.1);
}

.siz3r-variant-badge img {
  display: block;
  width: auto;
  height: 12px;
}

.siz3r-suggested-size-menu-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.siz3r-variant-option-logo {
  display: inline-block;
  width: auto;
  height: 13px;
  margin-left: auto;
  flex: 0 0 auto;
  pointer-events: none;
}

.siz3r-button:not(.is-loading):not(.is-disabled):hover {
  transform: translateY(-1px);
  filter: saturate(1.04);
}

.siz3r-button:focus-visible {
  outline: 3px solid rgba(12, 182, 255, 0.28);
  outline-offset: 3px;
}

.siz3r-button:disabled {
  cursor: inherit;
}

.siz3r-button__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.siz3r-button__label {
  white-space: nowrap;
}

.siz3r-button__logo {
  display: block;
  width: auto;
  height: var(--siz3r-logo-height);
  max-width: 100%;
  pointer-events: none;
}

.siz3r-button__spinner {
  display: none;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid rgba(255, 255, 255, 0.26);
  border-top-color: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  animation: siz3r-spin 700ms linear infinite;
}

.siz3r-button__status {
  display: none;
  white-space: nowrap;
  font-size: 0.88em;
  font-weight: 600;
  opacity: 0.9;
}

.siz3r-button.is-loading .siz3r-button__spinner {
  display: inline-flex;
}

.siz3r-button.is-disabled .siz3r-button__spinner {
  display: none;
}

@keyframes siz3r-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 749px) {
  .siz3r-button {
    border-radius: 16px;
  }

  .siz3r-button.is-loading,
  .siz3r-button.is-disabled {
    flex-wrap: wrap;
  }
}