/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
@media (min-width: 769px) {
  .shared-components-AppLanding-AppLanding__hero--2W3Zx {
    background: linear-gradient(to left, #FFFFFF 50%, #EF9EAE 50%);
  }
}
@media (max-width: 1200px) {
  .shared-components-AppLanding-AppLanding__hero_img--2zYkC {
    background-color: #EE9DAD;
    width: 40%;
  }
  .shared-components-AppLanding-AppLanding__hero_img--2zYkC > img {
    min-width: 590px;
  }
}
.shared-components-AppLanding-AppLanding__cat_container--1bC8_ {
  background-color: #F4D398;
  background-size: cover, auto;
  background-repeat: no-repeat;
  background-position: center left, bottom right;
}

.shared-components-AppLanding-AppLanding__img--Cs-UE {
  max-width: 570px;
  width: 100%;
}

.shared-components-AppLanding-AppLanding__text--1iFrB {
  max-width: 420px;
}

.shared-components-AppLanding-AppLanding__app_button--2JdAH {
  cursor: pointer;
}

.shared-components-AppLanding-AppLanding__alert--3v3YR {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
}

.shared-components-AppLanding-AppLanding__textPink--jkgsq {
  color: #f5869f;
}

.shared-components-AppLanding-AppLanding__textBrown--2Qnrx {
  color: #8c715a;
}

.shared-components-AppLanding-AppLanding__textPurple--2Bv-z {
  color: #A397E1;
}

.shared-components-AppLanding-AppLanding__textTile--ldPPW {
  color: #5ca9a9;
}

.shared-components-AppLanding-AppLanding__textGreen--2Rx-f {
  color: #59902f;
}

.shared-components-AppLanding-AppLanding__imgShop--3G4Mj {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.shared-components-AppLanding-AppLanding__imgShop--3G4Mj:after {
  opacity: 0;
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% - 12px);
  width: calc(100% - 12px);
  border: 6px solid white;
  border-radius: 100%;
  -webkit-animation: shared-components-AppLanding-AppLanding__ripple--aSjkL 2.5s 0s infinite;
          animation: shared-components-AppLanding-AppLanding__ripple--aSjkL 2.5s 0s infinite;
  -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
          animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.shared-components-AppLanding-AppLanding__imgShop--3G4Mj:before {
  opacity: 0;
  content: "";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% - 12px);
  width: calc(100% - 12px);
  border: 6px solid white;
  border-radius: 100%;
  -webkit-animation: shared-components-AppLanding-AppLanding__ripple--aSjkL 2.5s 0.5s infinite;
          animation: shared-components-AppLanding-AppLanding__ripple--aSjkL 2.5s 0.5s infinite;
  -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
          animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}

@-webkit-keyframes shared-components-AppLanding-AppLanding__ripple--aSjkL {
  0% {
    opacity: 0;
    transform: scale3d(0.4, 0.4, 1);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes shared-components-AppLanding-AppLanding__ripple--aSjkL {
  0% {
    opacity: 0;
    transform: scale3d(0.4, 0.4, 1);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale3d(1, 1, 1);
  }
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.node_modules--redbubble-design-system-react-Form-FieldSet-styles__fieldSet--33Ott {
  padding: 0;
  border: none;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: calc(100% + 16px);
  width: calc(100% + var(--ds-spacing-m));
  min-inline-size: unset;
  min-width: 0;
  margin-left: calc(8px * -1);
  margin-left: calc(var(--ds-spacing-xs) * -1);
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.node_modules--redbubble-design-system-react-Form-Field-styles__visuallyHidden--2cTfc {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.node_modules--redbubble-design-system-react-Form-Field-styles__label--1dkgC {
  max-width: 100%;
}
.node_modules--redbubble-design-system-react-Form-Field-styles__label--1dkgC.node_modules--redbubble-design-system-react-Form-Field-styles__disabled--hRjkH {
  cursor: not-allowed;
}

.node_modules--redbubble-design-system-react-Form-Field-styles__fieldTop--kh6Js {
  display: flex;
  margin: 0 0 8px;
  margin: 0 0 var(--ds-spacing-xs);
  align-items: center;
}

.node_modules--redbubble-design-system-react-Form-Field-styles__labelText--2v0xD {
  font-weight: 600;
  font-weight: var(--ds-font-weight-bold);
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.node_modules--redbubble-design-system-react-Form-Field-styles__actionSlot--1UcnC {
  margin-left: auto;
  padding-left: 16px;
  padding-left: var(--ds-spacing-m);
  overflow: hidden;
}

.node_modules--redbubble-design-system-react-Form-Field-styles__field--1f95x.node_modules--redbubble-design-system-react-Form-Field-styles__fluid--2e6Af .node_modules--redbubble-design-system-react-Form-Field-styles__label--1dkgC {
  width: 100%;
}

.node_modules--redbubble-design-system-react-Form-Field-styles__fieldRow--2zwnR {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.node_modules--redbubble-design-system-react-Form-Field-styles__fieldRow--2zwnR .node_modules--redbubble-design-system-react-Form-Field-styles__field--1f95x.node_modules--redbubble-design-system-react-Form-Field-styles__fluid--2e6Af {
  flex: 1;
  min-width: 0;
  width: 100%;
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
/**
 *
 * Themeable variables
 *
 * If you need to adjust one of these attributes
 * define it in the tokens.js file of your theme.
 *
 * var(--ds-textarea-border),
 * var(--ds-textarea-borderRadius),
 * var(--ds-textarea-padding),
 * var(--ds-textarea-color),
 * var(--ds-textarea-background),
 * var(--ds-textarea-error-borderColor),
 * var(--ds-textarea-error-boxShadow),
 * var(--ds-textarea-warning-borderColor),
 * var(--ds-textarea-warning-boxShadow),
 * var(--ds-textarea-success-borderColor),
 * var(--ds-textarea-success-boxShadow),
 * var(--ds-textarea-hover-background),
 * var(--ds-textarea-focus-borderColor),
 * var(--ds-textarea-focus-boxShadow),
 * var(--ds-textarea-placeholder-color),
 * var(--ds-textarea-disabled-background),
 * var(--ds-textarea-disabled-color),
 * var(--ds-textarea-disabled-borderColor),
**/
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt {
  border: var(--ds-size-border-width-small) solid var(--ds-color-border);
  border: var(--ds-textarea-border, var(--ds-size-border-width-small) solid var(--ds-color-border));
  font-size: 16px;
  font-size: var(--ds-font-size-body);
  line-height: 26px;
  line-height: var(--ds-line-height-body);
  font-weight: 400;
  font-weight: var(--ds-font-weight-body);
  border-radius: var(--ds-radius-medium);
  border-radius: var(--ds-textarea-borderRadius, var(--ds-radius-medium));
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
  padding: var(--ds-textarea-padding, var(--ds-spacing-xs) var(--ds-spacing-s));
  color: var(--ds-color-text);
  color: var(--ds-textarea-color, var(--ds-color-text));
  -webkit-appearance: none;
  background: var(--ds-color-background-ui);
  background: var(--ds-textarea-background, var(--ds-color-background-ui));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt > strong {
  font-weight: 600;
  font-weight: var(--ds-font-weight-bold);
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__error--xeWW9 {
  border-color: var(--ds-color-error-500);
  border-color: var(--ds-textarea-error-borderColor, var(--ds-color-error-500));
  box-shadow: 0 0 0 2px var(--ds-color-error-500);
  box-shadow: var(--ds-textarea-error-boxShadow, 0 0 0 2px var(--ds-color-error-500));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__warning--6BlKs {
  border-color: var(--ds-color-warning-500);
  border-color: var(--ds-textarea-warning-borderColor, var(--ds-color-warning-500));
  box-shadow: 0 0 0 2px var(--ds-color-warning-500);
  box-shadow: var(--ds-textarea-warning-boxShadow, 0 0 0 2px var(--ds-color-warning-500));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__success--K4gZ7 {
  border-color: var(--ds-color-success-500);
  border-color: var(--ds-textarea-success-borderColor, var(--ds-color-success-500));
  box-shadow: 0 0 0 2px var(--ds-color-success-500);
  box-shadow: var(--ds-textarea-success-boxShadow, 0 0 0 2px var(--ds-color-success-500));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt:hover, .node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt:active {
  background-color: var(--ds-color-state-hover-overlay);
  background-color: var(--ds-textarea-hover-background, var(--ds-color-state-hover-overlay));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt:active, .node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt:focus {
  outline: 0;
  border-color: var(--ds-color-state-focus-border);
  border-color: var(--ds-textarea-focus-borderColor, var(--ds-color-state-focus-border));
  box-shadow: 0 0 0 2px var(--ds-color-state-focus-border);
  box-shadow: var(--ds-textarea-focus-boxShadow, 0 0 0 2px var(--ds-color-state-focus-border));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt::-webkit-input-placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-textarea-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt::-moz-placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-textarea-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt:-ms-input-placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-textarea-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt::-ms-input-placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-textarea-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt::placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-textarea-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__disabled--Ps0-Y {
  opacity: 1;
  cursor: not-allowed !important;
  background-color: var(--ds-color-state-disabled-background);
  background-color: var(--ds-textarea-disabled-background, var(--ds-color-state-disabled-background));
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-textarea-disabled-color, var(--ds-color-state-disabled-text));
  border-color: var(--ds-color-transparent);
  border-color: var(--ds-textarea-disabled-borderColor, var(--ds-color-transparent));
  box-shadow: none;
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__disabled--Ps0-Y::-webkit-input-placeholder {
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-textarea-disabled-color, var(--ds-color-state-disabled-text));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__disabled--Ps0-Y::-moz-placeholder {
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-textarea-disabled-color, var(--ds-color-state-disabled-text));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__disabled--Ps0-Y:-ms-input-placeholder {
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-textarea-disabled-color, var(--ds-color-state-disabled-text));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__disabled--Ps0-Y::-ms-input-placeholder {
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-textarea-disabled-color, var(--ds-color-state-disabled-text));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__disabled--Ps0-Y::placeholder {
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-textarea-disabled-color, var(--ds-color-state-disabled-text));
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt.node_modules--redbubble-design-system-react-Form-TextArea-styles__fluid--2Ty_m {
  width: 100%;
}
.node_modules--redbubble-design-system-react-Form-TextArea-styles__textarea--zBkUt:not(.node_modules--redbubble-design-system-react-Form-TextArea-styles__resizable--2NnhR) {
  resize: none;
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
/**
 *
 * Themeable variables
 *
 * If you need to adjust one of these attributes
 * define it in the tokens.js file of your theme.
 *
 * var(--ds-input-border),
 * var(--ds-input-borderRadius),
 * var(--ds-input-height),
 * var(--ds-input-padding),
 * var(--ds-input-color),
 * var(--ds-input-background),
 * var(--ds-input-error-borderColor),
 * var(--ds-input-error-boxShadow),
 * var(--ds-input-warning-borderColor),
 * var(--ds-input-warning-boxShadow),
 * var(--ds-input-success-borderColor),
 * var(--ds-input-success-boxShadow),
 * var(--ds-input-hover-background),
 * var(--ds-input-focus-borderColor),
 * var(--ds-input-focus-boxShadow),
 * var(--ds-input-placeholder-color),
 * var(--ds-input-arrow-color),
 * var(--ds-input-disabled-background),
 * var(--ds-input-disabled-color),
 * var(--ds-input-disabled-borderColor),
 * var(--ds-input-selected-background),
 * var(--ds-input-selected-color),
 * var(--ds-input-disabled-background),
 * var(--ds-field-select-menu-background)
 *
**/
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD {
  border: var(--ds-size-border-width-small) solid var(--ds-color-border);
  border: var(--ds-input-border, var(--ds-size-border-width-small) solid var(--ds-color-border));
  font-size: 16px;
  font-size: var(--ds-font-size-body);
  line-height: 26px;
  line-height: var(--ds-line-height-body);
  font-weight: 400;
  font-weight: var(--ds-font-weight-body);
  border-radius: var(--ds-radius-medium);
  border-radius: var(--ds-input-borderRadius, var(--ds-radius-medium));
  height: var(--ds-size-dimension-xxl);
  height: var(--ds-input-height, var(--ds-size-dimension-xxl));
  padding: var(--ds-spacing-xs) var(--ds-spacing-xxs) var(--ds-spacing-xs) var(--ds-spacing-s);
  padding: var(--ds-input-padding, var(--ds-spacing-xs) var(--ds-spacing-xxs) var(--ds-spacing-xs) var(--ds-spacing-s));
  color: var(--ds-color-text);
  color: var(--ds-input-color, var(--ds-color-text));
  -webkit-appearance: none;
  background: var(--ds-color-background-ui);
  background: var(--ds-input-background, var(--ds-color-background-ui));
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD > strong {
  font-weight: 600;
  font-weight: var(--ds-font-weight-bold);
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD.node_modules--redbubble-design-system-react-Form-Select-styles__error--3BujU {
  border-color: var(--ds-color-error-500);
  border-color: var(--ds-input-error-borderColor, var(--ds-color-error-500));
  box-shadow: 0 0 0 2px var(--ds-color-error-500);
  box-shadow: var(--ds-input-error-boxShadow, 0 0 0 2px var(--ds-color-error-500));
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD.node_modules--redbubble-design-system-react-Form-Select-styles__warning--39HHD {
  border-color: var(--ds-color-warning-500);
  border-color: var(--ds-input-warning-borderColor, var(--ds-color-warning-500));
  box-shadow: 0 0 0 2px var(--ds-color-warning-500);
  box-shadow: var(--ds-input-warning-boxShadow, 0 0 0 2px var(--ds-color-warning-500));
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD.node_modules--redbubble-design-system-react-Form-Select-styles__success--1WBtB {
  border-color: var(--ds-color-success-500);
  border-color: var(--ds-input-success-borderColor, var(--ds-color-success-500));
  box-shadow: 0 0 0 2px var(--ds-color-success-500);
  box-shadow: var(--ds-input-success-boxShadow, 0 0 0 2px var(--ds-color-success-500));
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD:hover, .node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD:active {
  background-color: var(--ds-color-state-hover-overlay);
  background-color: var(--ds-input-hover-background, var(--ds-color-state-hover-overlay));
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD:active, .node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD:focus {
  outline: 0;
  border-color: var(--ds-color-state-focus-border);
  border-color: var(--ds-input-focus-borderColor, var(--ds-color-state-focus-border));
  box-shadow: 0 0 0 2px var(--ds-color-state-focus-border);
  box-shadow: var(--ds-input-focus-boxShadow, 0 0 0 2px var(--ds-color-state-focus-border));
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD::-webkit-input-placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-input-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD::-moz-placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-input-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD:-ms-input-placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-input-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD::-ms-input-placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-input-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD::placeholder {
  color: var(--ds-color-text-muted);
  color: var(--ds-input-placeholder-color, var(--ds-color-text-muted));
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD.node_modules--redbubble-design-system-react-Form-Select-styles__disabled--2sfTl {
  cursor: not-allowed !important;
  background-color: var(--ds-color-state-disabled-background);
  background-color: var(--ds-input-disabled-background, var(--ds-color-state-disabled-background));
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-input-disabled-color, var(--ds-color-state-disabled-text));
  border-color: var(--ds-color-transparent);
  border-color: var(--ds-input-disabled-borderColor, var(--ds-color-transparent));
  box-shadow: none;
}
.node_modules--redbubble-design-system-react-Form-Select-styles__input--3OteD.node_modules--redbubble-design-system-react-Form-Select-styles__fluid--3hg86 {
  width: 100%;
}

.node_modules--redbubble-design-system-react-Form-Select-styles__placeholderText--1rhkN {
  color: var(--ds-color-text-muted);
  color: var(--ds-input-placeholder-color, var(--ds-color-text-muted));
}

.node_modules--redbubble-design-system-react-Form-Select-styles__disabled--2sfTl .node_modules--redbubble-design-system-react-Form-Select-styles__placeholderText--1rhkN {
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-input-disabled-color, var(--ds-color-state-disabled-text));
}

.node_modules--redbubble-design-system-react-Form-Select-styles__list--2nCOW {
  list-style: none;
  margin: 0;
  padding-left: 0;
  cursor: pointer;
  overflow-x: hidden;
  overflow-y: auto;
}
.node_modules--redbubble-design-system-react-Form-Select-styles__list--2nCOW:focus {
  outline: none;
}

.node_modules--redbubble-design-system-react-Form-Select-styles__listItem--1L58f {
  padding: 8px 12px;
  padding: var(--ds-spacing-xs) var(--ds-spacing-s);
}

.node_modules--redbubble-design-system-react-Form-Select-styles__listItemHover--17W7- {
  background: rgba(26, 18, 57, 0.05);
  background: var(--ds-color-state-hover-overlay);
}

.node_modules--redbubble-design-system-react-Form-Select-styles__listItemActive--2vHsS {
  background-color: var(--ds-color-background-ui-contrast);
  background-color: var(--ds-input-selected-background, var(--ds-color-background-ui-contrast));
  color: var(--ds-color-text-contrast);
  color: var(--ds-input-selected-color, var(--ds-color-text-contrast));
}
.node_modules--redbubble-design-system-react-Form-Select-styles__listItemActive--2vHsS.node_modules--redbubble-design-system-react-Form-Select-styles__listItemHover--17W7- {
  background-color: var(--ds-color-background-ui-contrast);
  background-color: var(--ds-input-selected-background, var(--ds-color-background-ui-contrast));
  color: var(--ds-color-text-contrast);
  color: var(--ds-input-selected-color, var(--ds-color-text-contrast));
}

.node_modules--redbubble-design-system-react-Form-Select-styles__selectMenu--3n3yu {
  z-index: 2147483647;
  position: relative;
}

.node_modules--redbubble-design-system-react-Form-Select-styles__native--TZTbv {
  background: #FFFFFF url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI3cHgiIHZpZXdCb3g9IjAgMCAxMiA3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MCAoNTQ5ODMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPnNlbGVjdEFycm93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InNlbGVjdEFycm93IiBmaWxsPSIjNDAzNTRlIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMC41MTYsMC41NDggQzAuOTUyLDAuMTAyIDEuNTU5LDAuMDY3IDIuMDkyLDAuNTQ4IEw2LDQuMjk1IEw5LjkwOCwwLjU0OCBDMTAuNDQxLDAuMDY3IDExLjA0OSwwLjEwMiAxMS40ODIsMC41NDggQzExLjkxOCwwLjk5MyAxMS44OSwxLjc0NSAxMS40ODIsMi4xNjMgQzExLjA3NiwyLjU4MSA2Ljc4Nyw2LjY2NSA2Ljc4Nyw2LjY2NSBDNi41Nyw2Ljg4OCA2LjI4NSw3IDYsNyBDNS43MTUsNyA1LjQzLDYuODg4IDUuMjExLDYuNjY1IEM1LjIxMSw2LjY2NSAwLjkyNCwyLjU4MSAwLjUxNiwyLjE2MyBDMC4xMDgsMS43NDUgMC4wOCwwLjk5MyAwLjUxNiwwLjU0OCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat;
  background: var(--ds-color-background-ui) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI3cHgiIHZpZXdCb3g9IjAgMCAxMiA3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MCAoNTQ5ODMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPnNlbGVjdEFycm93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InNlbGVjdEFycm93IiBmaWxsPSIjNDAzNTRlIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMC41MTYsMC41NDggQzAuOTUyLDAuMTAyIDEuNTU5LDAuMDY3IDIuMDkyLDAuNTQ4IEw2LDQuMjk1IEw5LjkwOCwwLjU0OCBDMTAuNDQxLDAuMDY3IDExLjA0OSwwLjEwMiAxMS40ODIsMC41NDggQzExLjkxOCwwLjk5MyAxMS44OSwxLjc0NSAxMS40ODIsMi4xNjMgQzExLjA3NiwyLjU4MSA2Ljc4Nyw2LjY2NSA2Ljc4Nyw2LjY2NSBDNi41Nyw2Ljg4OCA2LjI4NSw3IDYsNyBDNS43MTUsNyA1LjQzLDYuODg4IDUuMjExLDYuNjY1IEM1LjIxMSw2LjY2NSAwLjkyNCwyLjU4MSAwLjUxNiwyLjE2MyBDMC4xMDgsMS43NDUgMC4wOCwwLjk5MyAwLjUxNiwwLjU0OCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat;
  background-size: calc(4px * 3);
  background-size: var(--ds-size-dimension-xs);
  background-position: right 16px center;
  background-position: right var(--ds-spacing-m) center;
}
.node_modules--redbubble-design-system-react-Form-Select-styles__native--TZTbv.node_modules--redbubble-design-system-react-Form-Select-styles__disabled--2sfTl {
  background: var(--ds-color-state-disabled-background) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI3cHgiIHZpZXdCb3g9IjAgMCAxMiA3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MCAoNTQ5ODMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPnNlbGVjdEFycm93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InNlbGVjdEFycm93IiBmaWxsPSIjYjhiZmNhIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMC41MTYsMC41NDggQzAuOTUyLDAuMTAyIDEuNTU5LDAuMDY3IDIuMDkyLDAuNTQ4IEw2LDQuMjk1IEw5LjkwOCwwLjU0OCBDMTAuNDQxLDAuMDY3IDExLjA0OSwwLjEwMiAxMS40ODIsMC41NDggQzExLjkxOCwwLjk5MyAxMS44OSwxLjc0NSAxMS40ODIsMi4xNjMgQzExLjA3NiwyLjU4MSA2Ljc4Nyw2LjY2NSA2Ljc4Nyw2LjY2NSBDNi41Nyw2Ljg4OCA2LjI4NSw3IDYsNyBDNS43MTUsNyA1LjQzLDYuODg4IDUuMjExLDYuNjY1IEM1LjIxMSw2LjY2NSAwLjkyNCwyLjU4MSAwLjUxNiwyLjE2MyBDMC4xMDgsMS43NDUgMC4wOCwwLjk5MyAwLjUxNiwwLjU0OCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat;
  background: var(--ds-input-disabled-background, var(--ds-color-state-disabled-background)) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI3cHgiIHZpZXdCb3g9IjAgMCAxMiA3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MCAoNTQ5ODMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPnNlbGVjdEFycm93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9InNlbGVjdEFycm93IiBmaWxsPSIjYjhiZmNhIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMC41MTYsMC41NDggQzAuOTUyLDAuMTAyIDEuNTU5LDAuMDY3IDIuMDkyLDAuNTQ4IEw2LDQuMjk1IEw5LjkwOCwwLjU0OCBDMTAuNDQxLDAuMDY3IDExLjA0OSwwLjEwMiAxMS40ODIsMC41NDggQzExLjkxOCwwLjk5MyAxMS44OSwxLjc0NSAxMS40ODIsMi4xNjMgQzExLjA3NiwyLjU4MSA2Ljc4Nyw2LjY2NSA2Ljc4Nyw2LjY2NSBDNi41Nyw2Ljg4OCA2LjI4NSw3IDYsNyBDNS43MTUsNyA1LjQzLDYuODg4IDUuMjExLDYuNjY1IEM1LjIxMSw2LjY2NSAwLjkyNCwyLjU4MSAwLjUxNiwyLjE2MyBDMC4xMDgsMS43NDUgMC4wOCwwLjk5MyAwLjUxNiwwLjU0OCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat;
  background-size: calc(4px * 3);
  background-size: var(--ds-size-dimension-xs);
  background-position: right 16px center;
  background-position: right var(--ds-spacing-m) center;
}

.node_modules--redbubble-design-system-react-Form-Select-styles__nativePlaceholder--2xSlO {
  color: var(--ds-color-text-muted);
  color: var(--ds-input-placeholder-color, var(--ds-color-text-muted));
}

.node_modules--redbubble-design-system-react-Form-Select-styles__disabledIcon--w6WIk {
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-input-disabled-color, var(--ds-color-state-disabled-text));
}

.node_modules--redbubble-design-system-react-Form-Select-styles__isVisuallyHidden--3Yh47 {
  opacity: 0;
  pointer-events: none;
}

.node_modules--redbubble-design-system-react-Form-Select-styles__innerText--17lEP {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/**
 *
 * Themeable variables
 *
 * If you need to adjust one of these attributes
 * define it in the tokens.js file of your theme.
 *
 * var(--ds-field-button-toggle-border),
 * var(--ds-field-button-toggle-background),
 * var(--ds-field-button-toggle-focus-borderColor),
 * var(--ds-field-button-toggle-hover-background),
 * var(--ds-field-button-toggle-height)),
 * var(--ds-field-button-toggle-color),
 * var(--ds-field-button-toggle-background),
 * var(--ds-field-button-toggle-active-color),
 * var(--ds-field-button-toggle-active-borderColor),
 * var(--ds-field-button-toggle-active-background),
 * var(--ds-field-button-toggle-focus-borderColor),
 * var(--ds-field-button-toggle-focus-boxShadow),
 * var(--ds-field-button-toggle-focus-background),
 * var(--ds-field-button-toggle-focus-borderColor),
 * var(--ds-field-button-toggle-disabled-color),
 * var(--ds-field-button-toggle-disabled-background),
 *
**/
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__group--gY36K {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__visuallyHidden--2BJT7 {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  -webkit-appearance: none;
  border-radius: 0;
  /* Safari Mobile requires this */
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  border: var(--ds-size-border-width-small) solid var(--ds-color-border);
  border: var(--ds-field-button-toggle-border, var(--ds-size-border-width-small) solid var(--ds-color-border));
  background: var(--ds-color-background-ui);
  background: var(--ds-field-button-toggle-background, var(--ds-color-background-ui));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg:focus, .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg:active {
  outline: none;
  border-color: var(--ds-color-state-focus-border);
  border-color: var(--ds-field-button-toggle-focus-borderColor, var(--ds-color-state-focus-border));
  z-index: 4;
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg:hover {
  background: var(--ds-color-state-hover-overlay);
  background: var(--ds-field-button-toggle-hover-background, var(--ds-color-state-hover-overlay));
}

.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9 {
  overflow: hidden;
  /* Ensures equal sized buttons */
  flex: 1;
  font-size: 16px;
  font-size: var(--ds-font-size-display5);
  line-height: 26px;
  line-height: var(--ds-line-height-display5);
  font-weight: 600;
  font-weight: var(--ds-font-weight-display5);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  padding: 0 var(--ds-spacing-xs);
  height: 40px;
  height: var(--ds-size-dimension-xl);
  height: var(--ds-field-button-toggle-height, var(--ds-size-dimension-xl));
  margin-left: -2px;
  margin-right: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: var(--ds-color-text);
  color: var(--ds-field-button-toggle-color, var(--ds-color-text));
  background-color: var(--ds-color-background-ui);
  background-color: var(--ds-field-button-toggle-background, var(--ds-color-background-ui));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9 > strong {
  font-weight: 600;
  font-weight: var(--ds-font-weight-bold);
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:first-of-type {
  margin-left: 0;
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__active--1JGgB {
  z-index: 2;
  color: var(--ds-color-text-contrast);
  color: var(--ds-field-button-toggle-active-color, var(--ds-color-text-contrast));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__active--1JGgB .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  border-color: var(--ds-color-background-ui-contrast);
  border-color: var(--ds-field-button-toggle-active-borderColor, var(--ds-color-background-ui-contrast));
  background-color: var(--ds-color-background-ui-contrast);
  background-color: var(--ds-field-button-toggle-active-background, var(--ds-color-background-ui-contrast));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__active--1JGgB .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg:focus, .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__active--1JGgB .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg:active {
  border-color: var(--ds-color-state-focus-border);
  border-color: var(--ds-field-button-toggle-focus-borderColor, var(--ds-color-state-focus-border));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__error--3DMHt {
  box-shadow: 0 0 0 2px var(--ds-color-error-500);
  box-shadow: var(--ds-input-error-boxShadow, 0 0 0 2px var(--ds-color-error-500));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__error--3DMHt .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  border-color: var(--ds-color-error-500);
  border-color: var(--ds-input-error-borderColor, var(--ds-color-error-500));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__warning--1-nhv {
  box-shadow: 0 0 0 2px var(--ds-color-warning-500);
  box-shadow: var(--ds-input-warning-boxShadow, 0 0 0 2px var(--ds-color-warning-500));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__warning--1-nhv .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  border-color: var(--ds-color-warning-500);
  border-color: var(--ds-input-warning-borderColor, var(--ds-color-warning-500));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__success--yFtZe {
  box-shadow: 0 0 0 2px var(--ds-color-success-500);
  box-shadow: var(--ds-input-success-boxShadow, 0 0 0 2px var(--ds-color-success-500));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__success--yFtZe .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  border-color: var(--ds-color-success-500);
  border-color: var(--ds-input-success-borderColor, var(--ds-color-success-500));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:active, .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:focus-within {
  z-index: 4;
  outline: none;
  box-shadow: 0 0 0 2px var(--ds-color-state-focus-border);
  box-shadow: var(--ds-field-button-toggle-focus-boxShadow, 0 0 0 2px var(--ds-color-state-focus-border));
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:active .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg, .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:focus-within .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  outline: none;
  border-color: var(--ds-color-state-focus-border);
  border-color: var(--ds-field-button-toggle-focus-borderColor, var(--ds-color-state-focus-border));
  z-index: 4;
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__disabled--37Rf0 {
  opacity: 1;
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-field-button-toggle-disabled-color, var(--ds-color-state-disabled-text));
  box-shadow: none;
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__disabled--37Rf0 .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  opacity: 1;
  background-color: var(--ds-color-state-disabled-background);
  background-color: var(--ds-field-button-toggle-disabled-background, var(--ds-color-state-disabled-background));
}

.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__labelText--pDaaA {
  position: relative;
  pointer-events: none;
  z-index: 5;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  justify-content: center;
  padding: 0 16px;
  padding: 0 var(--ds-spacing-m);
}

.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__stacked--HaM0v {
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__stacked--HaM0v .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9 {
  margin-left: 0;
  margin-top: -2px;
  padding: 0;
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__stacked--HaM0v .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:first-of-type {
  margin-top: 0;
}
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__stacked--HaM0v .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9 .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__labelText--pDaaA {
  justify-content: flex-start;
  padding: 0 12px;
  padding: 0 var(--ds-spacing-s);
}

.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__group--gY36K .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:first-of-type,
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__group--gY36K .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:first-of-type .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  border-radius: 8px 0 0 8px;
  border-radius: var(--ds-spacing-xs) 0 0 var(--ds-spacing-xs);
}

.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__group--gY36K .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:last-of-type,
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__group--gY36K .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:last-of-type .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  border-radius: 0 8px 8px 0;
  border-radius: 0 var(--ds-spacing-xs) var(--ds-spacing-xs) 0;
}

.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__group--gY36K.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__stacked--HaM0v .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:first-of-type,
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__group--gY36K.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__stacked--HaM0v .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:first-of-type .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  border-radius: 8px 8px 0 0;
  border-radius: var(--ds-spacing-xs) var(--ds-spacing-xs) 0 0;
}

.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__group--gY36K.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__stacked--HaM0v .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:last-of-type,
.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__group--gY36K.node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__stacked--HaM0v .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__label--3S7o9:last-of-type .node_modules--redbubble-design-system-react-Form-ButtonToggleField-styles__radio--FyaKg {
  border-radius: 0 0 8px 8px;
  border-radius: 0 0 var(--ds-spacing-xs) var(--ds-spacing-xs);
}
/**
 *
 * Themeable variables
 *
 * If you need to adjust one of these attributes
 * define it in the tokens.js file of your theme.
 *
 * var(--ds-field-radio-padding),
 * var(--ds-field-radio-color),
 * var(--ds-field-radio-borderRadius),
 * var(--ds-spacing-s);
 * var(--ds-spacing-s);
 * var(--ds-field-radio-disabled-color),
 *
**/
.node_modules--redbubble-design-system-react-Form-RadioField-styles__group--1jBwV {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.node_modules--redbubble-design-system-react-Form-RadioField-styles__stacked--uhdqz {
  flex-direction: column;
  align-items: flex-start;
}

.node_modules--redbubble-design-system-react-Form-RadioField-styles__visuallyHidden---1eUM {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.node_modules--redbubble-design-system-react-Form-RadioField-styles__radio--2ppJU {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: var(--ds-spacing-xs) 0;
  padding: var(--ds-field-radio-padding, var(--ds-spacing-xs) 0);
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: var(--ds-color-text);
  color: var(--ds-field-radio-color, var(--ds-color-text));
  border-radius: var(--ds-radius-small);
  border-radius: var(--ds-field-radio-borderRadius, var(--ds-radius-small));
}
.node_modules--redbubble-design-system-react-Form-RadioField-styles__radio--2ppJU:first-of-type {
  margin-left: 0;
}
.node_modules--redbubble-design-system-react-Form-RadioField-styles__radio--2ppJU.node_modules--redbubble-design-system-react-Form-RadioField-styles__fluid--Zgjno {
  width: 100%;
}

.node_modules--redbubble-design-system-react-Form-RadioField-styles__radioInput--2vJJK {
  margin-top: 2px;
  margin-right: 12px;
  margin-right: var(--ds-spacing-s);
}

.node_modules--redbubble-design-system-react-Form-RadioField-styles__radioLabel--2Hw-D {
  display: inline-block;
  position: relative;
  margin-right: 12px;
  margin-right: var(--ds-spacing-s);
  width: 100%;
}

/* Focus States */
.node_modules--redbubble-design-system-react-Form-RadioField-styles__radio--2ppJU:active,
.node_modules--redbubble-design-system-react-Form-RadioField-styles__radio--2ppJU:focus-within {
  z-index: 4;
  outline: none;
}

/* Selected States */
.node_modules--redbubble-design-system-react-Form-RadioField-styles__radio--2ppJU.node_modules--redbubble-design-system-react-Form-RadioField-styles__selected--MNWdG {
  z-index: 2;
}

/* Disabled States */
.node_modules--redbubble-design-system-react-Form-RadioField-styles__radio--2ppJU.node_modules--redbubble-design-system-react-Form-RadioField-styles__disabled--3QZfw {
  opacity: 1;
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-field-radio-disabled-color, var(--ds-color-state-disabled-text));
}
/**
 *
 * Themeable variables
 *
 * If you need to adjust one of these attributes
 * define it in the tokens.js file of your theme.
 *
 * var(--ds-field-checkbox-padding),
 * var(--ds-field-checkbox-color),
 * var(--ds-field-checkbox-background),
 * var(--ds-spacing-s);
 * var(--ds-field-checkbox-disabled-color),
 *
**/
.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__group--2BX6Z {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__stacked--28hi1 {
  flex-direction: column;
  align-items: flex-start;
}

.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__visuallyHidden--33wgS {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__checkbox--L626B {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: var(--ds-spacing-xs) 0;
  padding: var(--ds-field-checkbox-padding, var(--ds-spacing-xs) 0);
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: var(--ds-color-text);
  color: var(--ds-field-checkbox-color, var(--ds-color-text));
}
.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__checkbox--L626B:first-of-type {
  margin-left: 0;
}
.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__checkbox--L626B.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__fluid--2Aef- {
  width: 100%;
}

.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__checkboxInput--2MbLL {
  margin-top: 2px;
  margin-right: 12px;
  margin-right: var(--ds-spacing-s);
}

.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__checkboxLabel--BNm_v {
  display: inline-block;
  position: relative;
  pointer-events: none;
  width: 100%;
}

/* Focus States */
.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__checkbox--L626B:active,
.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__checkbox--L626B:focus-within {
  z-index: 4;
  outline: none;
}

.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__selected--1JCsr.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__checkbox--L626B {
  z-index: 2;
}

.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__disabled--E2FDp {
  opacity: 1;
}
.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__disabled--E2FDp.node_modules--redbubble-design-system-react-Form-CheckboxField-styles__checkbox--L626B {
  color: var(--ds-color-state-disabled-text);
  color: var(--ds-field-checkbox-disabled-color, var(--ds-color-state-disabled-text));
}
/**
 *
 * Themeable variables
 *
 * If you need to adjust one of these attributes
 * define it in the tokens.js file of your theme.
 *
 * var(--ds-button-borderRadius),
 *
 * var(--ds-button-focus-boxShadow),
 *
 * var(--ds-color-swatch-borderRadius),
 *
 * var(--ds-color-swatch-border),
 * var(--ds-color-swatch-bordered-border),
 * var(--ds-color-swatch-focus-border),
 *
 * var(--ds-color-swatch-small-width),
 * var(--ds-color-swatch-small-height),
 * var(--ds-color-swatch-medium-width),
 * var(--ds-color-swatch-medium-height),
 * var(--ds-color-swatch-large-width),
 * var(--ds-color-swatch-large-height),
**/
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.node_modules--redbubble-design-system-react-ColorSwatch-styles__colorSwatch--3D15M {
  border: var(--ds-size-border-width-small) solid transparent;
  border: var(--ds-color-swatch-border, var(--ds-size-border-width-small) solid transparent);
  border-radius: var(--ds-radius-pill);
  border-radius: var(--ds-color-swatch-borderRadius, var(--ds-radius-pill));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-appearance: none;
}
.node_modules--redbubble-design-system-react-ColorSwatch-styles__colorSwatch--3D15M:focus {
  outline: 0;
}

.node_modules--redbubble-design-system-react-ColorSwatch-styles__bordered--kAk2y {
  border: var(--ds-size-border-width-small) solid var(--ds-color-border);
  border: var(--ds-color-swatch-bordered-border, var(--ds-size-border-width-small) solid var(--ds-color-border));
}

.node_modules--redbubble-design-system-react-ColorSwatch-styles__small--3RJZn {
  width: var(--ds-size-dimension-l);
  width: var(--ds-color-swatch-small-width, var(--ds-size-dimension-l));
  height: var(--ds-size-dimension-l);
  height: var(--ds-color-swatch-small-height, var(--ds-size-dimension-l));
}

.node_modules--redbubble-design-system-react-ColorSwatch-styles__medium--2eYU_ {
  width: var(--ds-size-dimension-xl);
  width: var(--ds-color-swatch-medium-width, var(--ds-size-dimension-xl));
  height: var(--ds-size-dimension-xl);
  height: var(--ds-color-swatch-medium-height, var(--ds-size-dimension-xl));
}

.node_modules--redbubble-design-system-react-ColorSwatch-styles__large--1qnLN {
  width: var(--ds-size-dimension-xxl);
  width: var(--ds-color-swatch-large-width, var(--ds-size-dimension-xxl));
  height: var(--ds-size-dimension-xxl);
  height: var(--ds-color-swatch-large-height, var(--ds-size-dimension-xxl));
}

.node_modules--redbubble-design-system-react-ColorSwatch-styles__fluid--hMItQ {
  height: 100%;
  width: 100%;
}

.node_modules--redbubble-design-system-react-ColorSwatch-styles__colorSwatch--3D15M:focus .node_modules--redbubble-design-system-react-ColorSwatch-styles__focus--TWmrD,
.node_modules--redbubble-design-system-react-ColorSwatch-styles__selected--1y4Oa .node_modules--redbubble-design-system-react-ColorSwatch-styles__focus--TWmrD {
  display: block;
}

.node_modules--redbubble-design-system-react-ColorSwatch-styles__focus--TWmrD {
  display: none;
  border: var(--ds-size-border-width-small) solid var(--ds-color-neutral-800);
  border: var(--ds-color-swatch-focus-border, var(--ds-size-border-width-small) solid var(--ds-color-neutral-800));
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: var(--ds-radius-pill);
  border-radius: var(--ds-color-swatch-borderRadius, var(--ds-radius-pill));
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.node_modules--redbubble-design-system-react-Form-ColorField-styles__group--2OdeU {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 320px;
  /* TODO: Why is this 320px? */
}

.node_modules--redbubble-design-system-react-Form-ColorField-styles__fluid--1ujVB {
  max-width: 100%;
}

.node_modules--redbubble-design-system-react-Form-ColorField-styles__color--3CYj2 {
  margin-right: 12px;
  margin-right: var(--ds-spacing-s);
  margin-bottom: 12px;
  margin-bottom: var(--ds-spacing-s);
}

.node_modules--redbubble-design-system-react-Form-ColorField-styles__disabled--1D6Tm {
  display: none;
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5 {
  border-radius: var(--ds-radius-small);
  border-radius: var(--ds-alert-borderRadius, var(--ds-radius-small));
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-width: 0;
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5 a {
  /* TODO tokenize */
  color: inherit;
  font-weight: 600;
  font-weight: var(--ds-font-weight-bold);
  text-decoration: underline;
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5:not(.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7).node_modules--redbubble-design-system-react-Alert-styles__success--2n2z7 {
  color: var(--ds-color-success-700);
  color: var(--ds-alert-success-color, var(--ds-color-success-700));
  background: var(--ds-color-success-100);
  background: var(--ds-alert-success-backgroundColor, var(--ds-color-success-100));
  border-color: var(--ds-color-success-100);
  border-color: var(--ds-alert-success-borderColor, var(--ds-color-success-100));
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7.node_modules--redbubble-design-system-react-Alert-styles__success--2n2z7 {
  background: var(--ds-color-background-alt-100);
  background: var(--ds-alert-success-subtle-backgroundColor, var(--ds-color-background-alt-100));
  border-color: var(--ds-color-background-alt-100);
  border-color: var(--ds-alert-success-subtle-borderColor, var(--ds-color-background-alt-100));
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5:not(.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7).node_modules--redbubble-design-system-react-Alert-styles__error--NoF3s {
  color: var(--ds-color-error-700);
  color: var(--ds-alert-error-color, var(--ds-color-error-700));
  background: var(--ds-color-error-100);
  background: var(--ds-alert-error-backgroundColor, var(--ds-color-error-100));
  border-color: var(--ds-color-error-100);
  border-color: var(--ds-alert-error-borderColor, var(--ds-color-error-100));
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7.node_modules--redbubble-design-system-react-Alert-styles__error--NoF3s {
  background: var(--ds-color-background-alt-100);
  background: var(--ds-alert-error-subtle-backgroundColor, var(--ds-color-background-alt-100));
  border-color: var(--ds-color-background-alt-100);
  border-color: var(--ds-alert-error-subtle-borderColor, var(--ds-color-background-alt-100));
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5:not(.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7).node_modules--redbubble-design-system-react-Alert-styles__information--1920F {
  color: var(--ds-color-information-700);
  color: var(--ds-alert-information-color, var(--ds-color-information-700));
  background: var(--ds-color-information-100);
  background: var(--ds-alert-information-backgroundColor, var(--ds-color-information-100));
  border-color: var(--ds-color-information-100);
  border-color: var(--ds-alert-information-borderColor, var(--ds-color-information-100));
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7.node_modules--redbubble-design-system-react-Alert-styles__information--1920F {
  background: var(--ds-color-background-alt-100);
  background: var(--ds-alert-information-subtle-backgroundColor, var(--ds-color-background-alt-100));
  border-color: var(--ds-color-background-alt-100);
  border-color: var(--ds-alert-information-subtle-borderColor, var(--ds-color-background-alt-100));
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5:not(.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7).node_modules--redbubble-design-system-react-Alert-styles__warning--2yorW {
  color: var(--ds-color-warning-700);
  color: var(--ds-alert-warning-color, var(--ds-color-warning-700));
  background: var(--ds-color-warning-100);
  background: var(--ds-alert-warning-backgroundColor, var(--ds-color-warning-100));
  border-color: var(--ds-color-warning-100);
  border-color: var(--ds-alert-warning-borderColor, var(--ds-color-warning-100));
}
.node_modules--redbubble-design-system-react-Alert-styles__alert--2zNZ5.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7.node_modules--redbubble-design-system-react-Alert-styles__warning--2yorW {
  background: var(--ds-color-background-alt-100);
  background: var(--ds-alert-warning-subtle-backgroundColor, var(--ds-color-background-alt-100));
  border-color: var(--ds-color-background-alt-100);
  border-color: var(--ds-alert-warning-subtle-borderColor, var(--ds-color-background-alt-100));
}

.node_modules--redbubble-design-system-react-Alert-styles__container--3Jz9a {
  padding: 16px;
  padding: var(--ds-spacing-m);
}
.node_modules--redbubble-design-system-react-Alert-styles__container--3Jz9a.node_modules--redbubble-design-system-react-Alert-styles__dismissable--1IXBH {
  padding-right: 32px;
  padding-right: var(--ds-spacing-xl);
}

.node_modules--redbubble-design-system-react-Alert-styles__centered--qjUSS {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7 {
  border-width: var(--ds-size-border-width-small);
  border-width: var(--ds-alert-subtle-borderWidth, var(--ds-size-border-width-small));
}
.node_modules--redbubble-design-system-react-Alert-styles__subtle--31DM7.node_modules--redbubble-design-system-react-Alert-styles__banner--3iDRv {
  border: none;
}

.node_modules--redbubble-design-system-react-Alert-styles__banner--3iDRv {
  /* TODO solve for theming? */
  border: none;
  border-radius: 0;
}

.node_modules--redbubble-design-system-react-Alert-styles__title--2T1ge {
  margin-bottom: 4px;
  margin-bottom: var(--ds-spacing-xxs);
}
.node_modules--redbubble-design-system-react-Alert-styles__title--2T1ge:only-child {
  margin: 0;
}

.node_modules--redbubble-design-system-react-Alert-styles__close--1Jz8m {
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  position: absolute;
  top: 16px;
  top: var(--ds-spacing-m);
  right: 16px;
  right: var(--ds-spacing-m);
  cursor: pointer;
  padding: 0;
}
.node_modules--redbubble-design-system-react-Alert-styles__close--1Jz8m:focus {
  outline: none;
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.shared-components-SellYourArt-CustomerSection-CustomerSection__CustomerSectionContainer---ZI5V {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 32px;
  padding: var(--ds-spacing-09);
  padding-bottom: 72px;
  overflow: hidden;
}

.shared-components-SellYourArt-CustomerSection-CustomerSection__CustomerSectionVideo--3V_wZ {
  padding-top: 32px;
  padding-top: var(--ds-spacing-09);
  padding-bottom: 32px;
  padding-bottom: var(--ds-spacing-09);
  margin: auto;
  position: relative;
  z-index: 1;
  width: 100%;
}

.shared-components-SellYourArt-CustomerSection-CustomerSection__cloud2--3WZSc {
  display: none;
}

.shared-components-SellYourArt-CustomerSection-CustomerSection__cloud3--2kTF7 {
  position: absolute;
  top: -80px;
}

@media only screen and (min-width: 1024px) {
  .shared-components-SellYourArt-CustomerSection-CustomerSection__CustomerSectionContainer---ZI5V {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    align-items: center;
    height: 765px;
    overflow: unset;
  }

  .shared-components-SellYourArt-CustomerSection-CustomerSection__CustomerSectionText--244YC {
    max-width: 510px;
    margin: auto;
  }

  .shared-components-SellYourArt-CustomerSection-CustomerSection__CustomerSectionVideo--3V_wZ {
    padding: 32px;
    padding: var(--ds-spacing-09);
  }

  .shared-components-SellYourArt-CustomerSection-CustomerSection__cloud2--3WZSc {
    display: block;
    position: absolute;
    left: 53%;
    top: -150px;
    width: 510px;
  }

  .shared-components-SellYourArt-CustomerSection-CustomerSection__cloud3--2kTF7 {
    right: 32px;
    bottom: 70px;
    top: auto;
  }
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.shared-components-SellYourArt-HeroSection-HeroSection__HeroSectionContainer--3pGp5 {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 32px;
  padding: var(--ds-spacing-09);
  overflow: hidden;
}

.shared-components-SellYourArt-HeroSection-HeroSection__avatarContainer--XEH1U {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 16px;
}

.shared-components-SellYourArt-HeroSection-HeroSection__avatar--SW717 {
  margin: 8px;
  cursor: pointer;
  opacity: 0.6;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 80px;
}
.shared-components-SellYourArt-HeroSection-HeroSection__avatar--SW717:hover {
  opacity: 1;
}

.shared-components-SellYourArt-HeroSection-HeroSection__productImageContainer--S8jQ4 {
  position: relative;
  z-index: 1;
}

.shared-components-SellYourArt-HeroSection-HeroSection__HeroSectionText--3nHkY {
  position: relative;
  z-index: 1;
  margin: auto;
  padding-top: 32px;
  padding-top: var(--ds-spacing-09);
  padding-bottom: 32px;
  padding-bottom: var(--ds-spacing-09);
}

.shared-components-SellYourArt-HeroSection-HeroSection__cloud1--26Lfe {
  position: absolute;
  top: 170px;
}

.shared-components-SellYourArt-HeroSection-HeroSection__productSelector--3_ZzY {
  margin-top: -24px;
  text-align: center;
}

@media only screen and (min-width: 1024px) {
  .shared-components-SellYourArt-HeroSection-HeroSection__HeroSectionContainer--3pGp5 {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    align-items: center;
    padding: 0;
    overflow: unset;
  }

  .shared-components-SellYourArt-HeroSection-HeroSection__avatarContainer--XEH1U {
    flex-direction: column;
    position: absolute;
    top: 0;
    right: -48px;
    z-index: 2;
    height: 100%;
    margin-top: 0;
  }

  .shared-components-SellYourArt-HeroSection-HeroSection__HeroSectionText--3nHkY {
    max-width: 520px;
    padding: 32px;
    padding: var(--ds-spacing-09);
    padding-left: 56px;
  }

  .shared-components-SellYourArt-HeroSection-HeroSection__cloud1--26Lfe {
    position: absolute;
    top: auto;
    right: 32px;
    bottom: -100px;
  }

  .shared-components-SellYourArt-HeroSection-HeroSection__productSelector--3_ZzY {
    position: absolute;
    bottom: 47px;
    left: 0;
    right: 0;
  }
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.node_modules--redbubble-design-system-react-Dropdown-styles__popover--2swqa {
  z-index: 999999999;
  max-width: calc(100vw - 2 * 16px);
  max-width: calc(100vw - 2 * var(--ds-spacing-m));
  padding-top: 4px;
  padding-top: var(--ds-spacing-xxs);
  padding-bottom: 16px;
  padding-bottom: var(--ds-spacing-m);
  max-height: 90vh;
}

.node_modules--redbubble-design-system-react-Dropdown-styles__popoverScrollContainer--X6ebg {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  max-height: calc(90vh - 16px - 4px);
  max-height: calc(90vh - var(--ds-spacing-m) - var(--ds-spacing-xxs));
}

.node_modules--redbubble-design-system-react-Dropdown-styles__menuItems--16QaO:focus {
  outline: none;
}

.node_modules--redbubble-design-system-react-Dropdown-styles__popover--2swqa[data-popper-placement=bottom] .node_modules--redbubble-design-system-react-Dropdown-styles__animation--2hiWk {
  transform-origin: top;
}

.node_modules--redbubble-design-system-react-Dropdown-styles__popover--2swqa[data-popper-placement=bottom-start] .node_modules--redbubble-design-system-react-Dropdown-styles__animation--2hiWk {
  transform-origin: left top;
}

.node_modules--redbubble-design-system-react-Dropdown-styles__popover--2swqa[data-popper-placement=bottom-end] .node_modules--redbubble-design-system-react-Dropdown-styles__animation--2hiWk {
  transform-origin: right top;
}
/**
 *
 * Themeable variables
 *
 * If you need to adjust one of these attributes
 * define it in the tokens.js file of your theme.
 *
 * var(--ds-menu-item-focus-boxShadow),
 * var(--ds-menu-item-padded-focus-boxShadow),
 *
**/
.node_modules--redbubble-design-system-react-Menu-styles__item--1xGLX {
  cursor: pointer;
  border-radius: 4px;
  border-radius: var(--ds-radius-small);
  padding: 8px;
  padding: var(--ds-spacing-xs);
  text-decoration: none;
  color: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  margin-bottom: 2px;
  margin-bottom: var(--ds-spacing-xxxs);
}

.node_modules--redbubble-design-system-react-Menu-styles__sectionHeading--2OuIG {
  letter-spacing: 0.03em;
  padding-left: 8px;
  padding-left: var(--ds-spacing-xs);
  padding-right: 8px;
  padding-right: var(--ds-spacing-xs);
}

.node_modules--redbubble-design-system-react-Menu-styles__activeItem--Jcf5b,
.node_modules--redbubble-design-system-react-Menu-styles__item--1xGLX:hover {
  background: rgba(26, 18, 57, 0.05);
  background: var(--ds-color-state-hover-overlay);
}

.node_modules--redbubble-design-system-react-Menu-styles__item--1xGLX:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--ds-color-state-focus-border);
  box-shadow: var(--ds-menu-item-focus-boxShadow, 0 0 0 4px var(--ds-color-state-focus-border));
  z-index: 1;
}

.node_modules--redbubble-design-system-react-Menu-styles__section--Zpqro {
  margin-left: calc(-1 * 8px);
  margin-left: calc(-1 * var(--ds-spacing-xs));
  margin-right: calc(-1 * 8px);
  margin-right: calc(-1 * var(--ds-spacing-xs));
}

/* Account for 1px gutter in icon viewbox */
.node_modules--redbubble-design-system-react-Menu-styles__iconBefore--3mZVv {
  margin-left: -1px;
}

/* Account for 1px gutter in icon viewbox */
.node_modules--redbubble-design-system-react-Menu-styles__iconAfter--KDur0 {
  margin-right: -1px;
}

.node_modules--redbubble-design-system-react-Menu-styles__padded--3XepT {
  margin-left: 0;
  margin-right: 0;
}
.node_modules--redbubble-design-system-react-Menu-styles__padded--3XepT .node_modules--redbubble-design-system-react-Menu-styles__sectionHeading--2OuIG,
.node_modules--redbubble-design-system-react-Menu-styles__padded--3XepT .node_modules--redbubble-design-system-react-Menu-styles__item--1xGLX {
  border-radius: 0;
  padding-left: 16px;
  padding-left: var(--ds-spacing-m);
  padding-right: 16px;
  padding-right: var(--ds-spacing-m);
}
.node_modules--redbubble-design-system-react-Menu-styles__padded--3XepT .node_modules--redbubble-design-system-react-Menu-styles__item--1xGLX:focus,
.node_modules--redbubble-design-system-react-Menu-styles__padded--3XepT .node_modules--redbubble-design-system-react-Menu-styles__highlighted--UrYTg {
  border-radius: 2px;
  box-shadow: 0 0 0 4px var(--ds-color-state-focus-border), inset 4px 0 0 0 var(--ds-color-state-focus-border), inset -4px 0 0 0 var(--ds-color-state-focus-border);
  box-shadow: var(--ds-menu-item-padded-focus-boxShadow, 0 0 0 4px var(--ds-color-state-focus-border), inset 4px 0 0 0 var(--ds-color-state-focus-border), inset -4px 0 0 0 var(--ds-color-state-focus-border));
}
.node_modules--redbubble-design-system-react-Menu-styles__padded--3XepT .node_modules--redbubble-design-system-react-Menu-styles__highlighted--UrYTg:hover {
  box-shadow: none;
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.shared-components-SellYourArt-HowItWorksSection-HowItWorksSection__HowItWorksSectionContainer--290YW {
  position: relative;
  padding: 32px;
  padding: var(--ds-spacing-09);
  padding-top: 48px;
  padding-bottom: 64px;
}

.shared-components-SellYourArt-HowItWorksSection-HowItWorksSection__instructions--3qY7V {
  display: flex;
  flex-direction: row;
  padding-bottom: 32px;
}

.shared-components-SellYourArt-HowItWorksSection-HowItWorksSection__instructionsImage--3QxA0 {
  height: 60px;
  width: 60px;
  margin-right: 16px;
}

@media only screen and (min-width: 768px) {
  .shared-components-SellYourArt-HowItWorksSection-HowItWorksSection__HowItWorksSectionContainer--290YW {
    padding-top: 112px;
    padding-bottom: 116px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .shared-components-SellYourArt-HowItWorksSection-HowItWorksSection__instructionsContainer--ipiIn {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-direction: row;
    margin-bottom: 100px;
    max-width: 1300px;
    width: 100%;
  }

  .shared-components-SellYourArt-HowItWorksSection-HowItWorksSection__instructions--3qY7V {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 240px;
    padding: 16px;
  }

  .shared-components-SellYourArt-HowItWorksSection-HowItWorksSection__instructionsImage--3QxA0 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    width: 100%;
    margin-bottom: 32px;
    margin-right: 0;
  }
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.shared-components-SellYourArt-ProductsSection-ProductsSection__ProductsSectionContainer--2651B {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 32px;
  padding: var(--ds-spacing-09);
  padding-bottom: 72px;
}

.shared-components-SellYourArt-ProductsSection-ProductsSection__ProductsSectionImage--3oQVy {
  max-width: 500px;
  margin: auto;
  margin-bottom: 32px;
  text-align: center;
}

@media only screen and (min-width: 1024px) {
  .shared-components-SellYourArt-ProductsSection-ProductsSection__ProductsSectionContainer--2651B {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    align-items: center;
    height: 765px;
  }

  .shared-components-SellYourArt-ProductsSection-ProductsSection__ProductsSectionText--25OH7 {
    max-width: 550px;
  }

  .shared-components-SellYourArt-ProductsSection-ProductsSection__ProductsSectionImage--3oQVy {
    max-width: 500px;
    margin: auto;
  }
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.shared-components-SellYourArt-Features-Features__layout--jd-uv {
  text-align: center;
  padding: 64px 32px;
}

.shared-components-SellYourArt-Features-Features__image--16FJK {
  margin: 0 auto;
  width: 200px;
  height: 200px;
}

@media only screen and (min-width: 768px) {
  .shared-components-SellYourArt-Features-Features__layout--jd-uv {
    padding: 128px 64px;
  }
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.shared-components-ArtistCard-ArtistCard__coverImage--2meu7 {
  min-width: 220px;
  min-height: 220px;
  max-height: 220px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
}

.shared-components-ArtistCard-ArtistCard__artistCardBody--1QW4P {
  position: relative;
  padding: 16px;
  padding-top: 48px;
  padding-bottom: 24px;
}

.shared-components-ArtistCard-ArtistCard__avatarImage--1s8QR {
  position: absolute;
  top: -32px;
  left: calc(50% - 32px);
  border-radius: 50%;
  height: 64px;
  width: 64px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 0 0;
     object-position: 0 0;
  outline: 0;
  border: 2px solid #FFFFFF;
}

.shared-components-ArtistCard-ArtistCard__artistName--1Mj3S {
  text-align: center;
  margin-bottom: 8px;
}

.shared-components-ArtistCard-ArtistCard__artistcoverImageLink--3AanS {
  outline: 0;
}

.shared-components-ArtistCard-ArtistCard__artistAvatarLink--1idtY {
  outline: 0;
}

.shared-components-ArtistCard-ArtistCard__artistNameLink--1E_yb {
  outline: 0;
  text-decoration: none;
}

.shared-components-ArtistCard-ArtistCard__artistNameText--QcZt4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1A1239;
  text-align: center;
}

.shared-components-ArtistCard-ArtistCard__artistSubtitle--mDkGl {
  line-height: 16px;
  text-align: center;
}
.shared-components-ArtistCard-ArtistCard__artistSubtitle--mDkGl span {
  display: block;
}
.shared-components-ArtistCard-ArtistCard__artistSubtitle--mDkGl span:last-child {
  margin-top: 4px;
}

.shared-components-ArtistCard-ArtistCard__followButton--3_l-t {
  text-align: center;
  margin: 16px;
  margin-bottom: 0;
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.shared-components-SellYourArt-FeaturedArtists-FeaturedArtists__layout--2gwJm {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  padding: 64px 32px;
}

.shared-components-SellYourArt-FeaturedArtists-FeaturedArtists__content--2hLoK {
  padding-top: 32px;
}

@media only screen and (min-width: 768px) {
  .shared-components-SellYourArt-FeaturedArtists-FeaturedArtists__layout--2gwJm {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    align-items: center;
    padding: 128px 64px;
  }

  .shared-components-SellYourArt-FeaturedArtists-FeaturedArtists__content--2hLoK {
    padding: 0 128px 0 96px;
  }
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.shared-components-SellYourArt-Ready-Ready__layout--J-QcO {
  display: grid;
  grid-template-rows: repeat(2, auto);
  place-content: center;
  place-items: center;
  row-gap: 32px;
  padding: 64px 16px;
}

@media only screen and (min-width: 768px) {
  .shared-components-SellYourArt-Ready-Ready__layout--J-QcO {
    padding: 128px 64px;
    row-gap: 48px;
  }
}
/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.shared-components-SellYourArt-SellYourArt__ready_section--1RBGv {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #ffd7dc;
}

.shared-components-SellYourArt-SellYourArt__layout--1lcHM {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  position: relative;
}

@media only screen and (min-width: 1024px) {
  .shared-components-SellYourArt-SellYourArt__layout--1lcHM {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    align-items: center;
  }
}

/*# sourceMappingURL=app-landing.13051.css.map*/