@import "./node_modules/simplebar/dist/simplebar.min.css";
.sf-divider {
  display: var(--divider-display, block);
  margin: var(--divider-margin);
  max-width: var(--divider-max-width);
  width: var(--divider-width);
  border: var(--divider-border, var(--divider-border-style, solid) var(--divider-border-color, var(--c-light)));
  border-width: var(--divider-border-width, 1px);
}

.sf-input {
  position: relative;
  box-sizing: border-box;
  width: var(--input-width);
  height: var(--input-height);
  min-height: var(--input-height, calc( var(--spacer-base) + var(--spacer-2xs) + var(--input-label-font-size, var(--font-size--lg)) ));
}
.sf-input__label {
  position: absolute;
  display: var(--input-label-display);
  top: var(--input-label-top, 50%);
  left: var(--input-label-left);
  padding: var(--input-label-padding);
  color: var(--input-label-color, var(--c-link));
  text-transform: underline;
  background: var(--input-label-background);
  transform: var(--input-label-transform, translate3d(0, calc(var(--input-label-top, 50%) * -1), 0));
  transition: var(--input-label-transition, top 150ms linear, font-size 150ms linear);
  font: var(--input-label-font, var(--input-label-font-weight, var(--font-weight--normal)) var(--input-label-font-size, var(--font-size--lg))/var(--input-label-font-line-height, 1) var(--input-label-font-family, var(--font-family--secondary)));
}
.sf-input__label::after {
  content: var(--input-label-required);
  color: var(--input-label-color, var(--c-link));
}
.sf-input__bar {
  position: relative;
  display: var(--input-bar-display, block);
}
.sf-input__bar::before, .sf-input__bar::after {
  position: absolute;
  bottom: 0;
  width: var(--input-bar-width, 0);
  height: 1px;
  background: var(--input-bar-background, var(--c-primary));
  transition: width 150ms linear;
  content: "";
}
.sf-input__bar::before {
  left: 50%;
}
.sf-input__bar::after {
  right: 50%;
}
.sf-input__error-message {
  color: var(--input-error-message-color, var(--c-danger));
  min-height: calc(var(--font-size--xs) * 1.2);
  font: var(--input-error-message-font, var(--input-error-message-font-weight, var(--font-weight--medium)) var(--input-error-message-font-size, var(--font-size--xs))/var(--input-error-message-font-line-height, 1.2) var(--input-error-message-font-family, var(--font-family--secondary)));
}
.sf-input__wrapper,
.sf-input input {
  border-radius: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.sf-input__wrapper {
  position: relative;
  margin: var(--input-margin, 0 0 var(--spacer-xs) 0);
}
.sf-input input {
  display: block;
  box-sizing: border-box;
  padding: var(--input-padding, var(--spacer-sm) 0 var(--spacer-xs) 0);
  border: var(--input-border, var(--input-border-style, solid) var(--input-border-color, var(--c-link)));
  border-width: var(--input-border-width, 0 0 1px 0);
  background: var(--input-background);
  color: var(--input-color, var(--c-text));
  font: var(--input-font, var(--input-font-weight, var(--font-weight--normal)) var(--input-font-size, var(--font-size--lg))/var(--input-font-line-height, 1) var(--input-font-family, var(--font-family--secondary)));
  text-align: var(--input-text-align);
}
.sf-input input:focus ~ *, .sf-input input:placeholder-shown ~ *, .sf-input input:-webkit-autofill ~ *, .sf-input input:-webkit-autofill:hover ~ *, .sf-input input:-webkit-autofill:focus ~ * {
  --icon-color: var(--c-primary);
  --input-password-icon-background: var(--c-primary);
  --input-label-top: 0;
  --input-label-color: var(--c-primary);
  --input-label-font-size: var(--font-size--xs);
  --input-bar-width: 50%;
  --input-error-message-color: var(--c-primary);
}
.sf-input input:required ~ * {
  --input-label-required: " *";
}
.sf-input input:disabled {
  --input-border-color: var(--c-text-disabled);
  --input-color: var(--c-text-disabled);
  /* add to provide color on iOS */
  -webkit-text-fill-color: var(--c-text-disabled);
}
.sf-input input:disabled ~ * {
  --icon-color: var(--text-disabled);
  --input-label-color: var(--c-text-disabled);
}
.sf-input input[type=number] {
  -moz-appearance: textfield;
}
.sf-input input[type=number]::-webkit-inner-spin-button, .sf-input input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sf-input input[type=search] {
  -webkit-appearance: none;
}
.sf-input__password-button {
  --icon-size: 12px;
  --button-padding: 0;
  --button-background: transparent;
  position: absolute;
  top: var(--input-icon-top, 50%);
  right: var(--input-icon-right, var(--spacer-xs));
  transform: translate3d(0, -50%, 0);
}
.sf-input__password-button:hover {
  --button-background: transparent;
  --button-box-shadow: none;
}
.sf-input__password-icon {
  position: relative;
}
.sf-input__password-icon.hidden {
  --input-password-icon-scaleX: 1;
}
.sf-input__password-icon::after {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--input-password-icon-background, var(--c-black));
  transform: translate3d(0, -50%, 0) rotate(45deg) scaleX(var(--input-password-icon-scaleX, 0));
  transition: transform 150ms linear;
  content: "";
}
.sf-input.invalid {
  --input-label-color: var(--c-danger);
}
.sf-input.invalid input:focus ~ * {
  --input-bar-background: var(--c-danger);
  --input-label-color: var(--c-danger);
}
.sf-input.has-text,
.sf-input input[type=date] ~ *,
.sf-input input[type=time] ~ *,
.sf-input input[type=image] ~ *,
.sf-input input[type=file] ~ * {
  --input-label-top: 0;
  --input-label-font-size: var(--font-size--xs);
}
.sf-input--filled {
  --input-background: var(--c-light);
  --input-font-size: var(--font-size--xs);
  --input-padding: var(--spacer-xs);
  --input-label-left: var(--spacer-xs);
  --input-label-font-size: var(--font-size--xs);
  --input-label-color: var(--c-secondary-variant);
  --input-label-transition: color 150ms ease;
  --input-border: none;
}
.sf-input--filled.has-text {
  --input-label-display: none;
}
.sf-input--filled input:focus ~ * {
  --input-bar-width: unset;
  --input-label-top: 50%;
  --input-label-font-size: var(--font-size--xs);
  --input-label-color: var(--c-text);
}
.sf-input--outline {
  --input-label-left: var(--spacer-sm);
  --input-padding: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs)
    var(--spacer-sm);
  --input-border-color: var(--c-secondary-variant);
  --input-label-background: var(--c-white);
  --input-label-font-size: var(--font-size-base);
}
.sf-input--outline.sf-input--has-text {
  --input-label-top: -25%;
  --input-label-left: var(--spacer-xs);
  --input-label-padding: 0 var(--spacer-2xs);
}
.sf-input--outline.sf-input--invalid {
  --input-border-color: var(--c-danger);
  --input-label-color: var(--c-danger);
}
.sf-input--outline.sf-input--invalid input:focus ~ * {
  --input-label-color: var(--c-danger);
}
.sf-input--outline input {
  --input-border-width: 1px;
}
.sf-input--outline input:focus ~ * {
  --input-label-top: -25%;
  --input-label-left: var(--spacer-xs);
  --input-label-padding: 0 var(--spacer-2xs);
  --input-bar-width: 0;
  --input-label-color: var(--c-secondary-variant);
}

.sf-heading {
  box-sizing: border-box;
  padding: var(--heading-padding, 0 0 var(--spacer-xs) 0);
  text-align: var(--heading-text-align, center);
}
.sf-heading__title {
  margin: var(--heading-title-margin, 0);
  color: var(--heading-title-color, var(--c-text));
  font: var(--heading-title-font, var(--heading-title-font-weight, var(--font-weight--semibold)) var(--heading-title-font-size, var(--h1-font-size))/var(--heading-title-font-line-height, 1.6) var(--heading-title-font-family, var(--font-family--secondary)));
}
.sf-heading__title.h2 {
  font-size: var(--heading-title-font-size, var(--h2-font-size));
  font-weight: var(--heading-title-font-weight, var(--font-weight--normal));
}
.sf-heading__title.h3 {
  font-size: var(--heading-title-font-size, var(--h3-font-size));
  font-weight: var(--heading-title-font-weight, var(--font-weight--semibold));
}
.sf-heading__title.h4 {
  font-size: var(--heading-title-font-size, var(--h4-font-size));
  font-weight: var(--heading-title-font-weight, var(--font-weight--medium));
}
.sf-heading__title.h5 {
  font-size: var(--heading-title-font-size, var(--h5-font-size));
  font-weight: var(--heading-title-font-weight, var(--font-weight--normal));
}
.sf-heading__title.h6 {
  font-size: var(--heading-title-font-size, var(--h6-font-size));
  font-weight: var(--heading-title-font-weight, var(--font-weight--normal));
}
.sf-heading__description {
  margin: var(--heading-description-margin, var(--spacer-sm) 0 0);
  color: var(--heading-description-color, var(--c-text));
  font: var(--heading-description-font, var(--heading-description-font-weight, var(--font-weight--normal)) var(--heading-description-font-size, var(--font-size--base))/var(--heading-description-font-line-height, 1.6) var(--heading-description-font-family, var(--font-family--secondary)));
}
.sf-heading--underline {
  border: var(--heading-border, var(--heading-border-style, solid) var(--heading-border-color, var(--c-light)));
  border-width: var(--heading-border-width, 0 0 1px 0);
}
.sf-heading--left {
  --heading-text-align: left;
}
.sf-heading--right {
  --heading-text-align: right;
}

.sf-bullet {
  box-sizing: border-box;
  width: var(--bullet-width, var(--bullet-size, 0.5rem));
  height: var(--bullet-height, var(--bullet-size, 0.5rem));
  margin: var(--bullet-margin, var(--spacer-2xs));
  border-radius: var(--bullet-border-radius, 100%);
  background: var(--bullet-background, var(--c-gray));
  transition: transform 150ms linear, box-shadow 150ms linear;
  --bullet-box-shadow-opacity: 0;
}
.sf-bullet::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: var(--bullet-box-shadow-transition, opacity var(--bullet-box-shadow-transition-opacity-duration, 200ms) var(--bullet-box-shadow-transition-opacity-timing-function, ease-in-out), box-shadow var(--bullet-box-shadow-transition-box-shadow-duration, 200ms) var(--bullet-box-shadow-transition-box-shadow-timing-function, ease-in-out));
  opacity: var(--bullet-box-shadow-opacity);
  box-shadow: var(--bullet-box-shadow, var(--bullet-box-shadow-h-offset, 0px) var(--bullet-box-shadow-v-offset, 4px) var(--bullet-box-shadow-blur, 4px) var(--bullet-box-shadow-spread, 0px) var(--bullet-box-shadow-color, var(--c-black)));
  will-change: opacity, box-shadow;
}
.sf-bullet:hover, .sf-bullet.is-active {
  transform: scale3d(1.25, 1.25, 1);
  --bullet-box-shadow-opacity: 0.25;
}
.sf-bullet.is-active {
  --bullet-background: var(--c-primary);
  cursor: default;
}

.sf-bullets {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.sf-arrow {
  --button-width: 2.75rem;
  --button-height: 2.75rem;
  --button-padding: 0 0.625rem;
  --button-background: var(--c-light);
  --button-transition: background 150ms linear;
  --icon-color: var(--c-dark);
  --button-box-shadow: 0px 4px 4px var(--c-black);
  --box-shadow-transition-opacity-duration: 150ms;
  display: flex;
  align-items: center;
  justify-content: var(--arrow-justify-content, center);
}
.sf-arrow:hover {
  --button-background: var(--c-dark);
  --icon-color: var(--c-light);
  --button-box-shadow-opacity: 0.25;
}
.sf-arrow:active {
  --button-background: var(--c-link);
}
.sf-arrow:disabled {
  --button-background: var(--c-light);
  --icon-color: var(--c-text-disabled);
}
.sf-arrow__icon {
  transform: var(--arrow-icon-transform);
}
.sf-arrow--long {
  --button-width: 4.375rem;
  --button-height: 2.5rem;
  --button-background: var(--c-text-disabled);
  --button-transition: transform 150ms linear;
  --arrow-justify-content: flex-start;
}
.sf-arrow--long.sf-arrow--right {
  --arrow-justify-content: flex-end;
  --arrow-icon-transform: rotate(180deg) scale(0.855, 0.75);
}
.sf-arrow--long.sf-arrow--right:hover {
  transform-origin: center right;
}
.sf-arrow--transparent {
  --button-background: transparent;
  --button-box-shadow: none;
}
.sf-arrow--transparent:hover {
  --button-background: transparent;
  --icon-color: var(--c-dark);
}
.sf-arrow--transparent:disabled {
  --button-background: transparent;
  --icon-color: var(--c-text-disabled);
}
.sf-arrow--rounded {
  --button-border-radius: 100%;
}
.sf-arrow--no-shadow {
  --button-box-shadow: none;
}
.sf-arrow--right {
  --arrow-icon-transform: rotate(180deg);
}
.sf-arrow--top {
  --arrow-icon-transform: rotate(90deg);
}
.sf-arrow--down {
  --arrow-icon-transform: rotate(270deg);
}

.sf-image--wrapper {
  position: relative;
  display: inline-block;
}
.sf-image--wrapper:hover {
  --image-overlay-opacity: 1;
}

.sf-image {
  object-fit: cover;
  width: var(--image-width);
  height: var(--image-height, auto);
  display: flex;
}
.sf-image:not(.sf-image-loaded) {
  opacity: 0;
  position: absolute;
}
.sf-image:not([alt]), .sf-image[alt=""] {
  outline-color: red;
  outline-width: 1px;
  outline-style: dashed;
}

.sf-image--placeholder {
  display: inline-block;
}

.sf-image--overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--image-overlay-padding);
  background: var(--image-overlay-background, rgba(var(--c-dark-base), 0.6));
  color: var(--image-overlay-color, var(--c-white));
  opacity: var(--image-overlay-opacity, 0);
  transition: opacity 150ms ease-in-out;
  font-family: var(--font-family--secondary);
  font-weight: var(--font-weight--light);
}

.sf-icon {
  position: var(--icon-position, relative);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--icon-width, var(--icon-size, 1.625rem));
  height: var(--icon-height, var(--icon-size, 1.625rem));
  background: transparent;
  fill: var(--icon-color, var(--c-black));
}
.sf-icon svg,
.sf-icon img {
  width: inherit;
  height: inherit;
}
.sf-icon__badge {
  position: absolute;
  top: var(--icon-badge-top, 0);
  right: var(--icon-badge-right, 0);
}
.sf-icon.color-white {
  --icon-color: var(--c-white);
}
.sf-icon.color-black {
  --icon-color: var(--c-black);
}
.sf-icon.color-primary {
  --icon-color: var(--c-primary);
}
.sf-icon.color-primary-variant {
  --icon-color: var(--c-primary-variant);
}
.sf-icon.color-dark-secondary {
  --icon-color: var(--_c-dark-secondary);
}
.sf-icon.color-green-primary {
  --icon-color: var(--_c-green-primary);
}
.sf-icon.color-green-secondary {
  --icon-color: var(--_c-green-secondary);
}
.sf-icon.color-gray-primary {
  --icon-color: var(--_c-gray-primary);
}
.sf-icon.color-gray-secondary {
  --icon-color: var(--_c-gray-secondary);
}
.sf-icon.color-light-primary {
  --icon-color: var(--_c-light-primary);
}
.sf-icon.color-light-secondary {
  --icon-color: var(--_c-light-secondary);
}
.sf-icon.color-red-primary {
  --icon-color: var(--_c-red-primary);
}
.sf-icon.color-red-secondary {
  --icon-color: var(--_c-red-secondary);
}
.sf-icon.color-yellow-primary {
  --icon-color: var(--_c-yellow-primary);
}
.sf-icon.color-yellow-secondary {
  --icon-color: var(--_c-yellow-secondary);
}
.sf-icon.color-blue-primary {
  --icon-color: var(--_c-blue-primary);
}
.sf-icon.color-blue-secondary {
  --icon-color: var(--_c-blue-secondary);
}
.sf-icon.size-xxs {
  --icon-size: 1rem;
}
.sf-icon.size-xs {
  --icon-size: 1.4rem;
}
.sf-icon.size-sm {
  --icon-size: 1.625rem;
}
.sf-icon.size-md {
  --icon-size: 1.8rem;
}
.sf-icon.size-lg {
  --icon-size: 2rem;
}
.sf-icon.size-xl {
  --icon-size: 2.2rem;
}
.sf-icon.size-xxl {
  --icon-size: 2.5rem;
}
.sf-icon.size-xl3 {
  --icon-size: 2.8rem;
}
.sf-icon.size-xl4 {
  --icon-size: 3.25rem;
}

.sf-color {
  box-sizing: border-box;
  position: relative;
  width: var(--color-width, var(--color-size, 2.5rem));
  height: var(--color-height, var(--color-size, 2.5rem));
  background: var(--color-background);
  border-radius: var(--color-border-radius);
  --color-box-shadow-opacity: 0;
  --color-box-shadow-transition-duration: 150ms;
  transition: transform 150ms linear;
}
.sf-color::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: var(--color-box-shadow-transition, opacity var(--color-box-shadow-transition-opacity-duration, 200ms) var(--color-box-shadow-transition-opacity-timing-function, ease-in-out), box-shadow var(--color-box-shadow-transition-box-shadow-duration, 200ms) var(--color-box-shadow-transition-box-shadow-timing-function, ease-in-out));
  opacity: var(--color-box-shadow-opacity);
  box-shadow: var(--color-box-shadow, var(--color-box-shadow-h-offset, 0px) var(--color-box-shadow-v-offset, 4px) var(--color-box-shadow-blur, 4px) var(--color-box-shadow-spread, 0px) var(--color-box-shadow-color, var(--c-black)));
  will-change: opacity, box-shadow;
}
.sf-color__badge {
  --badge-padding: var(--spacer-2xs);
  --badge-border-radius: 100%;
  position: absolute;
}
.sf-color--rounded {
  --color-border-radius: 100%;
}

.sf-quantity-selector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: var(--quantity-selector-justify-content);
  box-sizing: border-box;
  height: var(--quantity-selector-height, 3.25rem);
  width: var(--quantity-selector-width, 6.75rem);
  background: var(--quantity-selector-background, var(--c-light));
  font: var(--quantity-selector-font, var(--quantity-selector-font-weight, var(--font-weight--normal)) var(--quantity-selector-font-size, var(--font-size--lg))/var(--quantity-selector-font-line-height, 1.6) var(--quantity-selector-font-family, var(--font-family--primary)));
  border: var(--quantity-selector-border, var(--quantity-selector-border-style, solid) var(--quantity-selector-border-color, var(--c-light)));
  border-width: var(--quantity-selector-border-width, 0);
}
.sf-quantity-selector__button {
  --button-height: 100%;
  --button-padding: var(--spacer-2xs) var(--spacer-xs) 0;
  --button-background: transparent;
  --button-color: var(--c-text);
}
.sf-quantity-selector__button:hover {
  --button-background: transparent;
  --button-box-shadow: none;
  text-shadow: var(--quantity-selector-text-shadow, 0px 4px 4px rgba(0, 0, 0, 0.25));
}
.sf-quantity-selector__input {
  --input-bar-display: none;
  --input-height: var(--quantity-selector-height, 3.25rem);
  --input-padding: 0;
  --input-margin: 0;
  --input-border: 0;
  --input-text-align: center;
}
.sf-quantity-selector__input input {
  font-family: inherit;
}
.sf-quantity-selector--secondary {
  --quantity-selector-background: transparent;
  --quantity-selector-border-width: 0 0 1px 0;
  --quantity-selector-width: 100%;
  --quantity-selector-justify-content: center;
  --quantity-selector-text-shadow: none;
}
.sf-quantity-selector--secondary .sf-quantity-selector__button {
  --button-background: var(--c-light);
  --button-border-radius: 100%;
  --button-padding: 0;
  --button-size: 1.625rem;
  flex: none;
}
.sf-quantity-selector--secondary .sf-quantity-selector__input {
  --input-width: 9rem;
}
.sf-quantity-selector--transparent {
  --quantity-selector-background: transparent;
}

.sf-cimage:not([alt]), .sf-cimage[alt=""] {
  outline-color: red;
  outline-width: 1px;
  outline-style: dashed;
}

.sf-button {
  --link-color: var(--button-color, var(--c-light-variant));
  box-sizing: border-box;
  position: relative;
  width: var(--button-size, var(--button-width));
  height: var(--button-size, var(--button-height));
  display: var(--button-display, flex);
  align-items: center;
  justify-content: center;
  padding: var(--button-padding, var(--spacer-sm) var(--spacer-base));
  color: var(--button-color, var(--c-light-variant));
  background: var(--button-background, var(--c-primary));
  transition: var(--button-transition, background 0.8s);
  background-position: center;
  text-transform: var(--button-text-transform, uppercase);
  text-decoration: var(--button-text-decoration);
  cursor: var(--button-cursor, pointer);
  border-radius: var(--button-border-radius, 0);
  white-space: var(--button-wrap, nowrap);
  font: var(--button-font, var(--button-font-weight, var(--font-weight--semibold)) var(--button-font-size, var(--font-size--base))/var(--button-font-line-height, 1.2) var(--button-font-family, var(--font-family--secondary)));
  border: var(--button-border, var(--button-border-style, solid) var(--button-border-color, var(--c-primary)));
  border-width: var(--button-border-width, 0);
  --button-box-shadow-opacity: 0;
}
.sf-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: var(--button-box-shadow-transition, opacity var(--button-box-shadow-transition-opacity-duration, 200ms) var(--button-box-shadow-transition-opacity-timing-function, ease-in-out), box-shadow var(--button-box-shadow-transition-box-shadow-duration, 200ms) var(--button-box-shadow-transition-box-shadow-timing-function, ease-in-out));
  opacity: var(--button-box-shadow-opacity);
  box-shadow: var(--button-box-shadow, var(--button-box-shadow-h-offset, 4px) var(--button-box-shadow-v-offset, 12px) var(--button-box-shadow-blur, 24px) var(--button-box-shadow-spread, 0px) var(--button-box-shadow-color, var(--c-gray)));
  will-change: opacity, box-shadow;
}
.sf-button.color-black {
  --button-background: var(--c-dark);
}
.sf-button.color-black:hover {
  --button-background: var(--c-dark)
    radial-gradient(circle, transparent 1%, var(--c-dark) 1%)
    center/15000%;
}
.sf-button.color-black:active {
  --button-background: var(--c-dark)
    radial-gradient(circle, transparent 40%, var(--c-dark) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-white {
  --button-background: var(--c-white);
}
.sf-button.color-white:hover {
  --button-background: var(--c-white)
    radial-gradient(circle, transparent 1%, var(--c-white) 1%)
    center/15000%;
}
.sf-button.color-white:active {
  --button-background: var(--c-white)
    radial-gradient(circle, transparent 40%, var(--c-white) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-primary {
  --button-background: var(--c-primary);
}
.sf-button.color-primary:hover {
  --button-background: var(--c-primary)
    radial-gradient(circle, transparent 1%, var(--c-primary-variant) 1%)
    center/15000%;
}
.sf-button.color-primary:active {
  --button-background: var(--c-primary)
    radial-gradient(circle, transparent 40%, var(--c-primary-variant) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-secondary {
  --button-background: var(--c-secondary);
}
.sf-button.color-secondary:hover {
  --button-background: var(--c-secondary)
    radial-gradient(circle, transparent 1%, var(--c-secondary-variant) 1%)
    center/15000%;
}
.sf-button.color-secondary:active {
  --button-background: var(--c-secondary)
    radial-gradient(circle, transparent 40%, var(--c-secondary-variant) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light {
  --button-background: var(--c-light);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-light-variant) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-light-variant) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-dark {
  --button-background: var(--c-dark);
}
.sf-button.color-dark:hover {
  --button-background: var(--c-dark)
    radial-gradient(circle, transparent 1%, var(--c-dark-variant) 1%)
    center/15000%;
}
.sf-button.color-dark:active {
  --button-background: var(--c-dark)
    radial-gradient(circle, transparent 40%, var(--c-dark-variant) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-info {
  --button-background: var(--c-info);
}
.sf-button.color-info:hover {
  --button-background: var(--c-info)
    radial-gradient(circle, transparent 1%, var(--c-info-variant) 1%)
    center/15000%;
}
.sf-button.color-info:active {
  --button-background: var(--c-info)
    radial-gradient(circle, transparent 40%, var(--c-info-variant) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-success {
  --button-background: var(--c-success);
}
.sf-button.color-success:hover {
  --button-background: var(--c-success)
    radial-gradient(circle, transparent 1%, var(--c-success-variant) 1%)
    center/15000%;
}
.sf-button.color-success:active {
  --button-background: var(--c-success)
    radial-gradient(circle, transparent 40%, var(--c-success-variant) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-warning {
  --button-background: var(--c-warning);
}
.sf-button.color-warning:hover {
  --button-background: var(--c-warning)
    radial-gradient(circle, transparent 1%, var(--c-warning-variant) 1%)
    center/15000%;
}
.sf-button.color-warning:active {
  --button-background: var(--c-warning)
    radial-gradient(circle, transparent 40%, var(--c-warning-variant) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-danger {
  --button-background: var(--c-danger);
}
.sf-button.color-danger:hover {
  --button-background: var(--c-danger)
    radial-gradient(circle, transparent 1%, var(--c-danger-variant) 1%)
    center/15000%;
}
.sf-button.color-danger:active {
  --button-background: var(--c-danger)
    radial-gradient(circle, transparent 40%, var(--c-danger-variant) 1%)
    center/15000%;
}
.sf-button.color-light {
  color: var(--c-gray);
}
.sf-button.color-light:hover {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 1%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button.color-light:active {
  --button-background: var(--c-light)
    radial-gradient(circle, transparent 40%, var(--c-text-disabled) 1%)
    center/15000%;
}
.sf-button:hover {
  --button-box-shadow-opacity: 0.25;
  --button-background: var(--c-primary)
    radial-gradient(circle, transparent 1%, var(--c-primary-variant) 1%)
    center/15000%;
}
.sf-button:active {
  --button-box-shadow: none;
  --button-background: var(--c-primary)
    radial-gradient(circle, transparent 40%, var(--c-primary-variant) 1%)
    center/15000%;
  --button-transition: background 0s;
  --button-text-decoration: underline;
  background-size: 100%;
}
.sf-button--pure {
  --button-padding: 0;
  --button-background: transparent;
  --button-color: var(--c-text);
  --button-text-transform: none;
  --button-wrap: normal;
  --button-box-shadow: none;
}
.sf-button--pure:active, .sf-button--pure:hover {
  --button-background: transparent;
  --button-text-decoration: none;
}
.sf-button--full-width {
  --button-width: 100%;
}
.sf-button--outline {
  --button-border-width: 1px;
  --button-background: transparent;
  --button-color: var(--c-text);
}
.sf-button--outline:hover {
  --button-background: transparent;
}
.sf-button--outline:active {
  --button-border-color: var(--c-primary-variant);
  --button-background: transparent;
  --button-transition: color 150ms linear;
}
.sf-button--outline.color-black {
  --button-border-color: var(--c-dark);
  --button-background: transparent;
}
.sf-button--outline.color-black:active {
  --button-background: transparent;
}
.sf-button--outline.color-white {
  --button-border-color: var(--c-white);
  --button-background: transparent;
}
.sf-button--outline.color-white:active {
  --button-background: transparent;
}
.sf-button--outline.color-primary {
  --button-border-color: var(--c-primary);
  --button-background: transparent;
}
.sf-button--outline.color-primary:active {
  --button-background: transparent;
}
.sf-button--outline.color-secondary {
  --button-border-color: var(--c-secondary);
  --button-background: transparent;
}
.sf-button--outline.color-secondary:active {
  --button-background: transparent;
}
.sf-button--outline.color-light {
  --button-border-color: var(--c-light);
  --button-background: transparent;
}
.sf-button--outline.color-light:active {
  --button-background: transparent;
}
.sf-button--outline.color-dark {
  --button-border-color: var(--c-dark);
  --button-background: transparent;
}
.sf-button--outline.color-dark:active {
  --button-background: transparent;
}
.sf-button--outline.color-info {
  --button-border-color: var(--c-info);
  --button-background: transparent;
}
.sf-button--outline.color-info:active {
  --button-background: transparent;
}
.sf-button--outline.color-success {
  --button-border-color: var(--c-success);
  --button-background: transparent;
}
.sf-button--outline.color-success:active {
  --button-background: transparent;
}
.sf-button--outline.color-warning {
  --button-border-color: var(--c-warning);
  --button-background: transparent;
}
.sf-button--outline.color-warning:active {
  --button-background: transparent;
}
.sf-button--outline.color-danger {
  --button-border-color: var(--c-danger);
  --button-background: transparent;
}
.sf-button--outline.color-danger:active {
  --button-background: transparent;
}
.sf-button--text {
  --button-border-width: 0;
  --button-padding: 0;
  --button-background: transparent;
  --button-color: var(--c-text);
  --button-text-transform: none;
  --button-text-decoration: underline;
  --button-font-size: var(--font-size--sm);
  --button-font-weight: var(--font-weight--medium);
  --button-box-shadow: none;
  display: inline;
}
.sf-button--text:hover {
  --button-background: transparent;
  --button-color: var(--c-primary);
}
.sf-button--text:active {
  --button-color: var(--c-gray);
}
.sf-button--text.color-black {
  --button-background: transparent;
}
.sf-button--text.color-black:hover {
  --button-color: var(--c-dark);
}
.sf-button--text.color-black:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button--text.color-white {
  --button-background: transparent;
}
.sf-button--text.color-white:hover {
  --button-color: var(--c-white);
}
.sf-button--text.color-white:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button--text.color-primary {
  --button-background: transparent;
}
.sf-button--text.color-primary:hover {
  --button-color: var(--c-primary);
}
.sf-button--text.color-primary:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button--text.color-secondary {
  --button-background: transparent;
}
.sf-button--text.color-secondary:hover {
  --button-color: var(--c-secondary);
}
.sf-button--text.color-secondary:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button--text.color-light {
  --button-background: transparent;
}
.sf-button--text.color-light:hover {
  --button-color: var(--c-light);
}
.sf-button--text.color-light:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button--text.color-dark {
  --button-background: transparent;
}
.sf-button--text.color-dark:hover {
  --button-color: var(--c-dark);
}
.sf-button--text.color-dark:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button--text.color-info {
  --button-background: transparent;
}
.sf-button--text.color-info:hover {
  --button-color: var(--c-info);
}
.sf-button--text.color-info:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button--text.color-success {
  --button-background: transparent;
}
.sf-button--text.color-success:hover {
  --button-color: var(--c-success);
}
.sf-button--text.color-success:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button--text.color-warning {
  --button-background: transparent;
}
.sf-button--text.color-warning:hover {
  --button-color: var(--c-warning);
}
.sf-button--text.color-warning:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button--text.color-danger {
  --button-background: transparent;
}
.sf-button--text.color-danger:hover {
  --button-color: var(--c-danger);
}
.sf-button--text.color-danger:active {
  --button-color: var(--c-gray);
  --button-background: transparent;
}
.sf-button.is-disabled--button, .sf-button.is-disabled--button:hover {
  --button-color: var(--c-text-disabled);
  --button-border-color: transparent;
  --button-background: var(--c-light);
  --button-box-shadow: none;
  pointer-events: none;
  cursor: default;
}
.sf-button.is-disabled--button.sf-button--text, .sf-button.is-disabled--button:hover.sf-button--text {
  --button-background: transparent;
  --button-color: var(--c-gray-variant);
}
.sf-button.is-disabled--button.sf-button--outline, .sf-button.is-disabled--button:hover.sf-button--outline {
  --button-border-color: var(--c-light);
  --button-background: transparent;
}
.sf-button--underlined {
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
  --button-background: transparent;
  --button-color: var(--c-text-muted);
  --button-box-shadow: none;
}
.sf-button--underlined:active {
  --button-background: var(--c-gray-variant);
  --button-color: var(--c-light-variant);
}
.sf-button--underlined:hover {
  --button-background: var(--c-gray-variant);
  --button-color: var(--c-white);
}
.sf-button--underlined.color-black {
  --button-background: transparent;
}
.sf-button--underlined.color-black:active {
  --button-background: var(--c-dark);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}
.sf-button--underlined.color-white {
  --button-background: transparent;
}
.sf-button--underlined.color-white:active {
  --button-background: var(--c-white);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}
.sf-button--underlined.color-primary {
  --button-background: transparent;
}
.sf-button--underlined.color-primary:active {
  --button-background: var(--c-primary);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}
.sf-button--underlined.color-secondary {
  --button-background: transparent;
}
.sf-button--underlined.color-secondary:active {
  --button-background: var(--c-secondary);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}
.sf-button--underlined.color-light {
  --button-background: transparent;
}
.sf-button--underlined.color-light:active {
  --button-background: var(--c-light);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}
.sf-button--underlined.color-dark {
  --button-background: transparent;
}
.sf-button--underlined.color-dark:active {
  --button-background: var(--c-dark);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}
.sf-button--underlined.color-info {
  --button-background: transparent;
}
.sf-button--underlined.color-info:active {
  --button-background: var(--c-info);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}
.sf-button--underlined.color-success {
  --button-background: transparent;
}
.sf-button--underlined.color-success:active {
  --button-background: var(--c-success);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}
.sf-button--underlined.color-warning {
  --button-background: transparent;
}
.sf-button--underlined.color-warning:active {
  --button-background: var(--c-warning);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}
.sf-button--underlined.color-danger {
  --button-background: transparent;
}
.sf-button--underlined.color-danger:active {
  --button-background: var(--c-danger);
  --button-border-width: 0 0 1px 0;
  --button-border-color: var(--c-light);
}

.sf-link {
  --button-width: var(--spacer-3xl);
}
.sf-link.is-disabled--link, .sf-link.is-disabled--link:hover {
  --button-box-shadow: none;
  --button-border-color: transparent;
  --button-background: var(--c-light);
  pointer-events: none;
  cursor: default;
}
.sf-link.is-disabled--link.sf-button, .sf-link.is-disabled--link:hover.sf-button {
  --button-color: var(--c-text-disabled);
}
.sf-link.is-disabled--link.sf-button--text, .sf-link.is-disabled--link:hover.sf-button--text {
  --button-background: transparent;
  --link-color: var(--c-gray-variant);
}
.sf-link.is-disabled--link.sf-button--outline, .sf-link.is-disabled--link:hover.sf-button--outline {
  --button-border-color: var(--c-light);
  --button-background: transparent;
}

.sf-badge {
  display: inline-block;
  box-sizing: border-box;
  width: var(--badge-width);
  min-width: var(--badge-min-width);
  height: var(--badge-height);
  min-height: var(--badge-min-height);
  padding: var(--badge-padding, var(--spacer-xs) var(--spacer-sm));
  background: var(--badge-background, var(--c-primary));
  border: var(--badge-border);
  border-radius: var(--badge-border-radius);
  color: var(--badge-color, var(--c-white));
  text-align: var(--badge-text-align, center);
  font: var(--badge-font, var(--badge-font-weight, var(--font-weight--semibold)) var(--badge-font-size, var(--font-size--xs))/var(--badge-font-line-height, 1.6) var(--badge-font-family, var(--font-family--secondary)));
}
.sf-badge--full-width {
  --badge-width: 100%;
}
.sf-badge--number {
  --badge-min-width: 1.25rem;
  --badge-min-height: 1.25rem;
  --badge-padding: 2px var(--spacer-2xs);
  --badge-border-radius: calc(var(--badge-line-height) * 1rem);
  --badge-background: var(--c-danger);
  --badge-font-size: var(--font-size--xs);
  --badge-line-height: 1;
  --badge-font-family: var(--font-family--primary);
}
.sf-badge.color-black {
  --badge-background: var(--c-dark);
}
.sf-badge.color-white {
  --badge-background: var(--c-white);
}
.sf-badge.color-primary {
  --badge-background: var(--c-primary);
}
.sf-badge.color-secondary {
  --badge-background: var(--c-secondary);
}
.sf-badge.color-light {
  --badge-background: var(--c-light);
}
.sf-badge.color-dark {
  --badge-background: var(--c-dark);
}
.sf-badge.color-info {
  --badge-background: var(--c-info);
}
.sf-badge.color-success {
  --badge-background: var(--c-success);
}
.sf-badge.color-warning {
  --badge-background: var(--c-warning);
}
.sf-badge.color-danger {
  --badge-background: var(--c-danger);
}

.sf-price {
  display: flex;
  flex-wrap: var(--price-flex-wrap, wrap);
  flex-direction: var(--price-flex-direction, row);
  align-items: var(--price-align-items, flex-end);
  justify-content: var(--price-justify-content);
}
.sf-price__regular {
  margin: var(--price-regular-margin, 0);
  color: var(--price-regular-color, var(--c-text));
  font: var(--price-regular-font, var(--price-regular-font-weight, var(--font-weight--medium)) var(--price-regular-font-size, var(--font-size--lg))/var(--price-regular-font-line-height, 1.6) var(--price-regular-font-family, var(--font-family--secondary)));
  text-decoration: var(--price-regular-text-decoration, none);
}
.sf-price__special {
  margin: var(--price-special-margin, 0);
  color: var(--price-special-color, var(--c-text));
  font: var(--price-special-font, var(--price-special-font-weight, var(--font-weight--medium)) var(--price-special-font-size, var(--font-size--lg))/var(--price-special-font-line-height, 1.6) var(--price-special-font-family, var(--font-family--secondary)));
  text-decoration: var(--price-special-text-decoration, none);
}
.sf-price__old {
  margin: var(--price-old-margin, 0 var(--spacer-xs) 0 0);
  color: var(--price-old-color, var(--c-danger));
  font: var(--price-old-font, var(--price-old-font-weight, var(--font-weight--normal)) var(--price-old-font-size, var(--font-size--lg))/var(--price-old-font-line-height, 1.6) var(--price-old-font-family, var(--font-family--secondary)));
  text-decoration: var(--price-old-text-decoration, line-through);
  /* todo refactor to resolve PostCSS issue where this is not recognized and causes build to fail
  /* --price-old-font-size: var(--font-size--xs); */
}

.sf-textarea {
  box-sizing: border-box;
  position: var(--textarea-position, relative);
}
.sf-textarea textarea {
  resize: var(--textarea-resize, auto);
  color: var(--textarea-color);
  font: var(--textarea-font, var(--textarea-font-weight, var(--font-weight--normal)) var(--textarea-font-size, var(--font-size--base))/var(--textarea-font-line-height, 1) var(--textarea-font-family, var(--font-family--secondary)));
  height: var(--textarea-height);
  width: var(--textarea-width);
  padding: var(--textarea-padding, var(--spacer-sm));
  border: var(--textarea-border, var(--textarea-border-style, solid) var(--textarea-border-color, var(--c-link)));
  border-width: var(--textarea-border-width, 1px);
}
.sf-textarea textarea:focus {
  --textarea-border-color: var(--c-primary);
}
.sf-textarea textarea:focus ~ * {
  --textarea-label-padding: 0;
  --textarea-label-color: var(--c-primary);
  --textarea-label-transform: translate3d(0, -1rem, 0);
  --textarea-label-font-size: var(--font-size--xs);
}
.sf-textarea textarea:disabled {
  --textarea-border-color: var(--c-text-disabled);
  --textarea-color: var(--c-text-disabled);
}
.sf-textarea textarea:disabled ~ * {
  --textarea-label-color: var(--c-text-disabled);
}
.sf-textarea textarea:required ~ * {
  --textarea-label-required: " *";
}
.sf-textarea textarea:placeholder-shown ~ * {
  --textarea-label-padding: 0;
  --textarea-label-transform: translate3d(0, -1rem, 0);
}
.sf-textarea__label {
  font: var(--textarea-label-font, var(--textarea-label-font-weight, var(--font-weight--normal)) var(--textarea-label-font-size, var(--font-size--base))/var(--textarea-label-font-line-height, 1) var(--textarea-label-font-family, var(--font-family--secondary)));
  position: var(--textarea-label-position, absolute);
  padding: var(--textarea-label-padding, var(--spacer-sm));
  top: var(--textarea-label-top);
  bottom: var(--textarea-label-bottom);
  left: var(--textarea-label-left, 0);
  right: var(--textarea-label-right);
  transform: var(--textarea-label-transform);
  color: var(--textarea-label-color, var(--c-link));
  transition: var(--textarea-label-transition, transform 150ms linear, font-size 150ms linear);
}
.sf-textarea__label::after {
  content: var(--textarea-label-required);
  --textarea-label-color: var(--c-primary);
}
.sf-textarea--has-text {
  --textarea-border-color: var(--c-text);
  --textarea-color: var(--c-text);
  --textarea-label-top: 0;
  --textarea-label-font-size: var(--font-size--xs);
  --textarea-label-transform: translate3d(0, -1rem, 0);
  --textarea-label-padding: 0;
}
.sf-textarea--invalid {
  --textarea-border-color: var(--c-danger);
  --textarea-label-color: var(--c-danger);
}
.sf-textarea__error-message {
  color: var(--textarea-error-message-color, var(--c-danger));
  min-height: calc(var(--font-size--xs) * 1.2);
  font: var(--textarea-error-message-font, var(--textarea-error-message-font-weight, var(--font-weight--medium)) var(--textarea-error-message-font-size, var(--font-size--xs))/var(--textarea-error-message-font-line-height, 1.2) var(--textarea-error-message-font-family, var(--font-family--secondary)));
}

.sf-rating {
  display: flex;
}
.sf-rating__icon {
  --icon-size: 0.875rem;
  --icon-color: var(--c-primary);
  --icon-color-negative: var(--c-gray-variant);
}
.sf-rating__icon--negative {
  --icon-color: var(--icon-color-negative);
}

.sf-loader {
  position: relative;
  width: 100%;
  height: 100%;
}
.sf-loader__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--loader-overlay-background, var(--c-white));
}
.sf-loader__spinner {
  stroke: var(--loader-spinner-stroke, var(--c-primary));
}

.sf-link {
  color: var(--link-color, var(--c-text));
  font: var(--link-font, var(--link-font-weight, var(--font-weight--medium)) var(--link-font-size, var(--font-size--sm))/var(--link-font-line-height, 1.4) var(--link-font-family, var(--font-family--secondary)));
  text-decoration: var(--link-text-decoration, underline);
}
.sf-link:visited {
  --link-color: var(--c-link);
}
.sf-link:hover {
  --link-color: var(--c-primary);
}
.sf-link:active {
  --link-color: var(--c-link);
}

.sf-chevron {
  position: var(--chevron-position, relative);
  width: var(--chevron-size, 1.25rem);
  height: var(--chevron-size, 1.25rem);
  cursor: pointer;
}
.sf-chevron__bar {
  position: absolute;
  top: 50%;
  background: var(--chevron-background, transparent);
  transition: transform 300ms cubic-bezier(0.25, 1.7, 0.35, 0.8);
}
.sf-chevron__bar:after {
  content: "";
  display: block;
  width: calc(var(--chevron-size, 1.25rem) / 2);
  height: calc(var(--chevron-size, 1.25rem) / 10);
  background: var(--chevron-color, var(--c-black));
}
.sf-chevron__bar--left {
  left: calc(var(--chevron-size, 1.25rem) / 10);
  transform: translate3d(var(--chevron-translateX, 0), var(--chevron-translateY, -50%), 0) rotate(var(--chevron-rotate, 45deg));
}
.sf-chevron__bar--right {
  right: calc(var(--chevron-size, 1.25rem) / 10);
  transform: translate(var(--chevron-translateX, 0), var(--chevron-translateY, -50%)) rotate calc(var(--chevron-rotate, 45deg) * -1);
}
.sf-chevron--top {
  --chevron-rotate: -45deg;
}
.sf-chevron--left .sf-chevron__bar--left {
  --chevron-rotate: 45deg;
  --chevron-translateY: 150%;
}
.sf-chevron--left .sf-chevron__bar--right {
  --chevron-rotate: 45deg;
  --chevron-translateX: -60%;
  --chevron-translateY: -150%;
}
.sf-chevron--right .sf-chevron__bar--left {
  --chevron-rotate: 45deg;
  --chevron-translateX: 60%;
  --chevron-translateY: -150%;
}
.sf-chevron--right .sf-chevron__bar--right {
  --chevron-rotate: 45deg;
  --chevron-translateY: 150%;
}

.sf-property {
  display: flex;
  color: var(--property-color, var(--c-text));
}
.sf-property__name {
  margin: var(--property-name-margin, 0 var(--spacer-xs) 0 0);
  color: var(--property-name-color, var(--c-secondary-variant));
  text-transform: var(--property-name-text-transform);
  font: var(--property-name-font, var(--property-name-font-weight, var(--font-weight--normal)) var(--property-name-font-size, var(--font-size--base))/var(--property-name-font-line-height, 1.2) var(--property-name-font-family, var(--font-family--secondary)));
}
.sf-property__name::after {
  content: var(--property-name-content, ":");
}
.sf-property__value {
  color: var(--property-value-color);
  font: var(--property-value-font, var(--property-value-font-weight, var(--font-weight--semibold)) var(--property-value-font-size, var(--font-size--base))/var(--property-value-font-line-height, 1.2) var(--property-value-font-family, var(--font-family--secondary)));
}
.sf-property--large {
  --property-name-font-size: var(--font-size--lg);
  --property-name-font-weight: var(--font-weight--medium);
  --property-value-font-size: var(--font-size--lg);
  --property-value-font-weight: var(--font-weight--semibold);
}
.sf-property--full-width {
  justify-content: space-between;
  width: 100%;
}
.sf-property--value-in-middle .sf-property__name,
.sf-property--value-in-middle .sf-property__value {
  flex: 1;
}
.sf-property--without-suffix {
  --property-name-content: "";
}

.sf-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}
.sf-breadcrumbs__list-item:not(:last-child)::after {
  padding: var(--breadcrumbs-list-item-before-padding, 0 var(--spacer-sm));
  content: var(--breadcrumbs-list-item-seperator, "|");
  color: var(--breadcrumbs-list-item-before-color, var(--c-text-muted));
}
.sf-breadcrumbs__breadcrumb {
  font: var(--breadcrumbs-font, var(--breadcrumbs-font-weight, var(--font-weight--normal)) var(--breadcrumbs-font-size, var(--font-size--xs))/var(--breadcrumbs-font-line-height, 1.6) var(--breadcrumbs-font-family, var(--font-family--secondary)));
  --link-color: var(--c-text-muted);
  --link-text-decoration: none;
}
.sf-breadcrumbs__breadcrumb:hover {
  --link-color: var(--c-text);
}
.sf-breadcrumbs__breadcrumb.current {
  --link-color: var(--c-text);
  cursor: default;
}

.sf-circle-icon {
  --icon-color: var(--c-white);
  --button-padding: 0;
  --icon-size: 1.5rem;
  --button-size: 3.25rem;
  --button-background: var(--c-primary);
  --button-border-radius: 100%;
  position: var(--circle-icon-position, relative);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-primary);
}
.sf-circle-icon:hover {
  --button-background: var(--c-primary);
  --button-box-shadow-opacity: 0.3;
}
.sf-circle-icon:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-primary);
}
.sf-circle-icon:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon__icon {
  --icon-position: static;
}
.sf-circle-icon.color-black {
  --button-background: var(--c-black);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-black);
}
.sf-circle-icon.color-black:hover {
  --button-background: var(--c-black-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-black:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-black);
}
.sf-circle-icon.color-black:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon.color-white {
  --button-background: var(--c-white);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-white);
}
.sf-circle-icon.color-white:hover {
  --button-background: var(--c-white-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-white:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-white);
}
.sf-circle-icon.color-white:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon.color-primary {
  --button-background: var(--c-primary);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-primary);
}
.sf-circle-icon.color-primary:hover {
  --button-background: var(--c-primary-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-primary:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-primary);
}
.sf-circle-icon.color-primary:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon.color-secondary {
  --button-background: var(--c-secondary);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-secondary);
}
.sf-circle-icon.color-secondary:hover {
  --button-background: var(--c-secondary-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-secondary:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-secondary);
}
.sf-circle-icon.color-secondary:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon.color-light {
  --button-background: var(--c-light);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-light);
}
.sf-circle-icon.color-light:hover {
  --button-background: var(--c-light-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-light:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-light);
}
.sf-circle-icon.color-light:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon.color-dark {
  --button-background: var(--c-dark);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-dark);
}
.sf-circle-icon.color-dark:hover {
  --button-background: var(--c-dark-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-dark:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-dark);
}
.sf-circle-icon.color-dark:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon.color-info {
  --button-background: var(--c-info);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-info);
}
.sf-circle-icon.color-info:hover {
  --button-background: var(--c-info-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-info:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-info);
}
.sf-circle-icon.color-info:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon.color-success {
  --button-background: var(--c-success);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-success);
}
.sf-circle-icon.color-success:hover {
  --button-background: var(--c-success-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-success:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-success);
}
.sf-circle-icon.color-success:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon.color-warning {
  --button-background: var(--c-warning);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-warning);
}
.sf-circle-icon.color-warning:hover {
  --button-background: var(--c-warning-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-warning:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-warning);
}
.sf-circle-icon.color-warning:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon.color-danger {
  --button-background: var(--c-danger);
  --button-box-shadow: 0 0 0 0.3125rem var(--c-danger);
}
.sf-circle-icon.color-danger:hover {
  --button-background: var(--c-danger-lighten);
  --button-box-shadow-opacity: 0.08;
}
.sf-circle-icon.color-danger:active {
  --button-box-shadow: 0 0 0 0.5rem var(--c-danger);
}
.sf-circle-icon.color-danger:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small {
  --icon-size: 8px;
  --button-size: 1.625rem;
  --button-transition: background 150ms ease;
}
.sf-circle-icon--small:hover {
  --button-background: var(--c-primary);
  --button-box-shadow: 0 0 0 0.1875rem var(--c-primary);
}
.sf-circle-icon--small:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-primary);
}
.sf-circle-icon--small:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-black:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-black);
}
.sf-circle-icon--small.color-black:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-black);
}
.sf-circle-icon--small.color-black:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-white:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-white);
}
.sf-circle-icon--small.color-white:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-white);
}
.sf-circle-icon--small.color-white:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-primary:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-primary);
}
.sf-circle-icon--small.color-primary:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-primary);
}
.sf-circle-icon--small.color-primary:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-secondary:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-secondary);
}
.sf-circle-icon--small.color-secondary:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-secondary);
}
.sf-circle-icon--small.color-secondary:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-light:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-light);
}
.sf-circle-icon--small.color-light:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-light);
}
.sf-circle-icon--small.color-light:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-dark:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-dark);
}
.sf-circle-icon--small.color-dark:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-dark);
}
.sf-circle-icon--small.color-dark:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-info:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-info);
}
.sf-circle-icon--small.color-info:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-info);
}
.sf-circle-icon--small.color-info:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-success:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-success);
}
.sf-circle-icon--small.color-success:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-success);
}
.sf-circle-icon--small.color-success:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-warning:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-warning);
}
.sf-circle-icon--small.color-warning:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-warning);
}
.sf-circle-icon--small.color-warning:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}
.sf-circle-icon--small.color-danger:hover {
  --button-box-shadow: 0 0 0 0.1875rem var(--c-danger);
}
.sf-circle-icon--small.color-danger:active {
  --button-box-shadow: 0 0 0 0.25rem var(--c-danger);
}
.sf-circle-icon--small.color-danger:disabled {
  --button-box-shadow: 0px 4px 11px var(--c-light);
  --button-box-shadow-opacity: 1;
  --icon-color: var(--c-text-disabled);
  --button-background: var(--c-light);
}

.sf-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--overlay-z-index, 1);
  background: var(--overlay-background, rgba(var(--c-gray-base), 0.7));
}

.sf-address {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--c-light);
  transition: border 150ms linear;
  font: var(--address-font, var(--address-font-weight, var(--font-weight--normal)) var(--address-font-size, var(--font-size--base))/var(--address-font-line-height, 1.6) var(--address-font-family, var(--font-family--primary)));
  color: var(--c-link);
}
.sf-address span {
  display: block;
}
.sf-address__icon-container {
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  position: absolute;
  right: var(--spacer-sm);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 150ms linear;
}
.sf-address__icon {
  --icon-color: var(--c-white);
  --icon-size: 0.875rem;
}
.sf-address.sf-radio {
  --radio-content-margin: 0;
}
.sf-address.sf-radio--is-active {
  --radio-background: transparent;
}
.sf-address.sf-radio input[style*="outline: none"]:focus + .sf-address__icon-container {
  outline: none;
}
.sf-address.sf-radio input:focus + .sf-address__icon-container {
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
}
.sf-address.is-active {
  border: 1px solid var(--c-primary);
  --icon-color: var(--c-white);
  --radio-background: var(--c-white);
}
.sf-address.is-active .sf-address__icon-container {
  background: var(--c-primary);
}

.sf-category-card {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 12.375rem;
  height: 9.0625rem;
}
.sf-category-card__details {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: var(--c-primary);
  padding: var(--spacer-xs);
}
.sf-category-card__label, .sf-category-card__count {
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--medium);
  color: var(--c-white);
}

.sf-banner {
  box-sizing: border-box;
  display: var(--banner-display, flex);
  justify-content: var(--banner-justify-content, flex-start);
  width: var(--banner-width, 100%);
  min-height: var(--banner-height, 21.4375rem);
  background: var(--banner-background, var(--banner-background-image, var(--_banner-background-image)) var(--banner-background-color, var(--_banner-background-color, transparent)) no-repeat var(--banner-background-position, 0% 0%));
  background-size: var(--banner-background-size, cover);
  --banner-background-position: 60%;
}
.sf-banner__wrapper {
  display: flex;
  align-items: var(--banner-align-items, flex-start);
  justify-content: var(--banner-wrapper-justify-content, flex-start);
  flex-direction: var(--banner-wrapper-flex-direction, column);
  padding: var(--banner-padding, var(--spacer-xl));
  flex: 0 0 var(--banner-wrapper-width, 100%);
  text-decoration: none;
}
.sf-banner__wrapper.sf-button, .sf-banner__wrapper.sf-button:hover, .sf-banner__wrapper.sf-button:active {
  --button-background: transparent;
  --button-box-shadow-opacity: 0;
}
.sf-banner__subtitle {
  margin: var(--banner-subtitle-margin, 0);
  color: var(--banner-color, var(--banner-subtitle-color, var(--c-dark-variant)));
  text-transform: var(--banner-subtitle-text-transform, uppercase);
}
.sf-banner__title {
  margin: var(--banner-title-margin, var(--spacer-2xs) 0 0 0);
  color: var(--banner-color, var(--banner-title-color, var(--c-text)));
  text-transform: var(--banner-title-text-transform, uppercase);
}
.sf-banner__description {
  display: var(--banner-description-display, none);
  margin: var(--banner-description-margin, var(--spacer-sm) 0 var(--spacer-base) 0);
  color: var(--banner-color, var(--banner-description-color, var(--c-text)));
  text-align: var(--banner-description-text-align, left);
}
.sf-banner__call-to-action {
  --button-color: var(--c-light-variant);
  display: var(--banner-display-call-to-action, none);
}

.sf-modal__container {
  position: fixed;
  top: var(--modal-top, 0);
  right: var(--modal-right, 0);
  bottom: var(--modal-bottom, 0);
  left: var(--modal-left, 0);
  z-index: var(--modal-index, 1);
  transform: var(--modal-transform);
  display: flex;
  flex-direction: var(--modal-flex-direction, column);
  align-content: space-between;
  box-sizing: border-box;
  width: var(--modal-width);
  height: var(--modal-height);
  border: var(--modal-border);
  max-height: var(--modal-max-height);
  background-color: var(--modal-background, var(--c-white));
}
.sf-modal__container::-webkit-scrollbar {
  width: 0;
}
.sf-modal__content {
  overflow-y: auto;
  padding: var(--modal-content-padding, var(--spacer-base) var(--spacer-sm));
}
.sf-modal__close {
  position: absolute;
  right: var(--modal-close-right, var(--spacer-sm));
  top: var(--modal-close-top, var(--spacer-sm));
}

.sf-call-to-action {
  display: var(--banner-display, flex);
  box-sizing: border-box;
  flex-direction: var(--call-to-action-flex-direction, column);
  align-items: var(--call-to-action-align-items);
  justify-content: var(--call-to-action-justify-content, left);
  min-height: var(--call-to-action-height, auto);
  padding: var(--call-to-action-padding, var(--spacer-lg));
  background: var(--call-to-action-background, var(--call-to-action-background-image, var(--_call-to-action-background-image)) var(--call-to-action-background-color, var(--_call-to-action-background-color, transparent)) no-repeat var(--call-to-action-background-position, 0% 0%));
  background-size: var(--call-to-action-background-size, cover);
  --call-to-action-background-position: 60%;
}
.sf-call-to-action__text-container {
  display: flex;
  justify-content: var(--call-to-action-text-container-justify-content, flex-start);
  flex-direction: var(--call-to-action-text-container-flex-direction, column);
  width: var(--call-to-action-text-container-width);
  margin: var(--call-to-action-text-container-margin);
}
.sf-call-to-action__title {
  margin: var(--call-to-action-title-margin, 0 0 var(--spacer-base) 0);
  color: var(--call-to-action-color, var(--call-to-action-title-color, var(--c-white)));
  text-transform: var(--call-to-action-title-text-transform, none);
}
.sf-call-to-action__description {
  margin: var(--call-to-action-description-margin, 0 0 var(--spacer-base) 0);
  color: var(--call-to-action-color, var(--call-to-action-description-color, var(--c-white)));
}

.sf-alert {
  --icon-size: 1.25rem;
  display: flex;
  align-items: center;
  color: var(--alert-color);
  font: var(--alert-font, var(--alert-font-weight, var(--font-weight--normal)) var(--alert-font-size, var(--font-size--base))/var(--alert-font-line-height, 1.6) var(--alert-font-family, var(--font-family--primary)));
}
.sf-alert__message {
  margin: var(--alert-message-margin, 0 0 0 var(--spacer-xs));
}
.sf-alert.color-black {
  --icon-color: var(--c-dark);
  --alert-color: var(--c-dark);
}
.sf-alert.color-white {
  --icon-color: var(--c-white);
  --alert-color: var(--c-white);
}
.sf-alert.color-primary {
  --icon-color: var(--c-primary);
  --alert-color: var(--c-primary);
}
.sf-alert.color-secondary {
  --icon-color: var(--c-secondary);
  --alert-color: var(--c-secondary);
}
.sf-alert.color-light {
  --icon-color: var(--c-light);
  --alert-color: var(--c-light);
}
.sf-alert.color-dark {
  --icon-color: var(--c-dark);
  --alert-color: var(--c-dark);
}
.sf-alert.color-info {
  --icon-color: var(--c-info);
  --alert-color: var(--c-info);
}
.sf-alert.color-success {
  --icon-color: var(--c-success);
  --alert-color: var(--c-success);
}
.sf-alert.color-warning {
  --icon-color: var(--c-warning);
  --alert-color: var(--c-warning);
}
.sf-alert.color-danger {
  --icon-color: var(--c-danger);
  --alert-color: var(--c-danger);
}

.sf-range {
  position: relative;
  width: 100%;
  height: 7px;
  margin: var(--spacer-xl);
  background-color: var(--c-light);
  border: none;
  box-shadow: none;
}
.sf-range .noUi-handle {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  transform: translate3d(0, -20%, 0);
  box-shadow: none;
  border: var(--range-handle-border, var(--range-handle-border-style, solid) var(--range-handle-border-color, var(--c-primary)));
  border-width: var(--range-handle-border-width, 1px);
  background-color: var(--c-white);
}
.sf-range .noUi-handle::before, .sf-range .noUi-handle::after {
  display: none;
}
.sf-range .noUi-handle:focus {
  outline: none;
}
.sf-range .noUi-handle.noUi-active .noUi-touch-area {
  background-color: var(--c-primary);
}
.sf-range .noUi-connect {
  background-color: var(--c-primary);
}
.sf-range .noUi-touch-area {
  background-color: var(--c-white);
  border-radius: 50%;
}
.sf-range .noUi-touch-area:hover {
  background-color: var(--c-primary-variant);
}
.sf-range .noUi-tooltip {
  bottom: -120%;
  color: var(--c-secondary-variant);
  font: var(--range-tooltip-font, var(--range-tooltip-font-weight, var(--font-weight--normal)) var(--range-tooltip-font-size, var(--font-size--xs))/var(--range-tooltip-font-line-height, 1.2) var(--range-tooltip-font-family, --font-family--secondary));
  border: var(--range-tooltip-border, var(--range-tooltip-border-style, none) var(--range-tooltip-border-color, var(--c-primary)));
  border-width: var(--range-tooltip-border-width, 0);
}
.sf-range[disabled=disabled] .noUi-handle {
  border-color: var(--c-text-disabled);
}
.sf-range[disabled=disabled] .noUi-connect {
  background-color: var(--c-text-disabled);
}
.sf-range[disabled=disabled] .noUi-touch-area:hover {
  background-color: var(--c-base);
}
.sf-range[disabled=disabled] .noUi-tooltip {
  display: none;
}

.noUi-vertical {
  height: 300px;
  width: 7px;
}
.noUi-vertical .noUi-handle {
  transform: translate3d(20%, 0, 0);
}

.sf-bottom-modal {
  position: var(--bottom-modal-position, fixed);
  width: var(--bottom-modal-width, 100%);
  top: var(--bottom-modal-top);
  bottom: var(--bottom-modal-bottom, 0);
  right: var(--bottom-modal-right, 0);
  transform: var(--bottom-modal-transform);
  --characteristic-description-font-size: var(--font-size--base);
}
.sf-bottom-modal__container {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  padding: var(--bottom-modal-container-padding);
  background: var(--bottom-modal-background, var(--c-white));
}
.sf-bottom-modal__title {
  --heading-title-font-weight: var(--font-weight--normal);
  padding: var(--bottom-modal-title-padding, var(--spacer-sm) var(--spacer-lg));
  color: var(--bottom-modal-title-color, var(--c-text));
  text-align: var(--bottom-modal-title-text-align, center);
}
.sf-bottom-modal__close {
  --button-display: none;
  position: absolute;
  top: var(--spacer-xs);
  right: var(--spacer-xs);
}
.sf-bottom-modal__cancel {
  --button-display: flex;
  --button-background: var(--_c-light-primary);
  --button-color: var(--c-text-muted);
}

.sf-bar {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--bar-height, 3.125rem);
  flex: 0 0 var(--bar-height, 3.125rem);
  padding: var(--bar-padding, 0 var(--spacer-base));
  background-color: var(--bar-background, var(--c-light));
  font: var(--bar-font, var(--bar-font-weight, var(--font-weight--medium)) var(--bar-font-size, var(--font-size--base))/var(--bar-font-line-height, 1.6) var(--bar-font-family, var(--font-family--secondary)));
}
.sf-bar__icon {
  --icon-width: 0.875rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.sf-filter {
  --checkbox-order: 1;
  --checkbox-border-radius: 100%;
  --color-size: 1.5rem;
  width: 100%;
  --checkbox-border-color: transparent;
}
.sf-filter__color {
  margin: var(--filter-color-margin, 0 var(--spacer-sm) 0 0);
}
.sf-filter__label {
  display: var(--filter-label-display, flex);
  align-items: var(--filter-label-align-items, center);
  margin: var(--filter-label-margin, 0);
  color: var(--filter-label-color, var(--c-link));
  text-decoration: var(--filter-label-text-decoration);
  transition: transform 150ms ease-in-out;
  transform: var(--filter-label-transform);
  transform-origin: center left;
}
.sf-filter__count {
  display: var(--filter-count-display);
  margin: var(--filter-count-margin, 0 var(--spacer-sm) 0 auto);
  color: var(--filter-count-color, var(--c-text-muted));
}
.sf-filter--active {
  --filter-count-color: var(--c-primary);
  --filter-label-color: var(--c-primary);
}
.sf-color-picker {
  box-sizing: border-box;
  position: var(--color-picker-position, absolute);
  z-index: 1;
  top: var(--color-picker-top);
}
.sf-color-picker__colors {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: var(--color-picker-colors-height);
  flex-direction: var(--color-picker-flex-direction, row);
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: var(--color-picker-justify-content, center);
  padding: var(--color-picker-padding, var(--spacer-xs));
}
.sf-color-picker__colors__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  --overlay-z-index: auto;
  --overlay-background: rgba(var(--c-black-base), 0.8);
}
.sf-color-picker__label {
  position: relative;
  flex: 0 0 100%;
  margin: var(--color-picker-label-margin, 0 0 var(--spacer-xs));
  color: var(--color-picker-label-color, var(--c-white));
  text-align: center;
}
.sf-color-picker__button {
  --button-width: 100%;
  --button-padding: var(--spacer-xs) var(--spacer-sm);
  --button-font-weight: var(--font-weight--light);
  --button-text-transform: capitalize;
  width: 100%;
  opacity: var(--color-picker-opacity, 0.8);
  padding: var(--color-picker-open-padding);
}
.sf-color-picker__button-open {
  transform-origin: var(--color-picker-open-button-transform-origin);
  transform: var(--color-picker-open-button-transform);
}
.sf-color-picker__close {
  --icon-color: var(--c-white);
  --icon-size: 0.875rem;
  --button-padding: 0;
  --button-width: initial;
  --button-background: transparent;
  margin: var(--color-picker-close-margin);
}

.sf-dropdown {
  position: var(--dropdown-position, fixed);
  top: var(--dropdown-top);
  bottom: var(--dropdown-bottom);
  transform: var(--dropdown-transform);
}
.sf-dropdown__container {
  position: var(--dropdown-container-position, relative);
  top: var(--dropdown-container-top);
  bottom: var(--dropdown-container-bottom);
  width: var(--dropdown-container-width, 100%);
  z-index: 1;
  background: var(--dropdown-background, var(--c-white));
  box-shadow: var(--dropdown-box-shadow);
}
.sf-dropdown__title {
  padding: var(--dropdown-title-padding, var(--spacer-sm) var(--spacer-lg));
  color: var(--c-primary);
  text-align: center;
}
.sf-dropdown__cancel {
  --button-background: var(--c-light);
  --button-color: var(--c-text-muted);
}
.sf-dropdown__cancel:hover {
  --button-background: var(--c-light-primary);
}
.sf-dropdown-enter-active {
  animation: var(--dropdown-animation-enter, dropdown 150ms);
}
.sf-dropdown-leave-active {
  animation: var(--dropdown-animation-leave, dropdown 150ms reverse);
}

@keyframes dropdown {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.sf-product-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: var(--product-option-font, var(--product-option-font-weight, var(--font-weight--light)) var(--product-option-font-size, var(--font-size--sm))/var(--product-option-font-line-height, normal) var(--product-option-font-family, var(--font-family--primary)));
}
.sf-product-option__color {
  box-sizing: border-box;
  width: var(--product-option-size, 1.5rem);
  height: var(--product-option-size, 1.5rem);
  margin: var(--product-option-color-margin, 0 var(--spacer-sm) 0 0);
  border: var(--product-option-border, var(--product-option-border-style, solid) var(--product-option-border-color, var(--c-light)));
  border-width: var(--product-option-border-width, 0);
  border-radius: var(--product-option-border-radius);
}
.sf-product-option__label {
  flex: 1;
}

.sf-component-select-option {
  display: flex;
  box-sizing: border-box;
  padding: var(--component-select-option-padding, var(--spacer-sm));
  border: var(--component-select-option-border, var(--component-select-option-border-style, solid) var(--component-select-option-border-color, var(--c-light)));
  border-width: var(--component-select-option-border-width, 1px 0 0 0);
  background: var(--component-select-option-background);
  color: inherit;
  min-height: var(--component-select-height, calc( var(--spacer-base) + var(--spacer-2xs) + var(--component-select-label-font-size, var(--font-size--lg)) ));
  font: var(--component-select-option-font, var(--component-select-option-font-weight, var(--font-weight--light)) var(--component-select-option-font-size, var(--font-size--sm))/var(--component-select-option-font-line-height, 1.2) var(--component-select-option-font-family, var(--font-family--primary)));
}
.sf-component-select-option.is-active {
  --component-select-option-background: var(--c-light);
}

.sf-component-select {
  position: relative;
  box-sizing: border-box;
  width: var(--component-select-width);
  height: var(--component-select-height);
  padding: var(--component-select-padding, 0 0 calc(var(--font-size--xs) * 1.2) 0);
  color: var(--component-select-color, var(--c-text));
  cursor: default;
}
.sf-component-select__label {
  position: absolute;
  top: var(--component-select-label-top, 50%);
  left: var(--component-select-label-left, 0);
  color: var(--component-select-label-color, var(--c-secondary-variant));
  transform: var(--component-select-label-transform, translate3d(0, calc(var(--component-select-label-top, 50%) * -1), 0));
  transition: var(--component-select-label-transition, top 150ms linear, font-size 150ms linear);
}
.sf-component-select__label::after {
  content: var(--component-select-label-required);
  color: var(--component-select-label-color, var(--c-primary));
}
.sf-component-select__chevron {
  --chevron-position: absolute;
  display: var(--chevron-display, block);
  right: var(--spacer-xs);
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
.sf-component-select__selected {
  --product-option-font-size: var(--font-size--lg);
  --component-select-option-font-size: var(--font-size--lg);
  box-sizing: border-box;
  display: flex;
  align-items: var(--component-select-selected-align-items, center);
  justify-content: var(--component-select-selected-justify-content, flex-start);
  padding: var(--component-select-selected-padding, var(--spacer-sm) var(--spacer-lg) var(--spacer-xs) 0);
  margin: var(--component-select-margin, 0 0 var(--spacer-xs) 0);
  background: var(--component-select-background);
  color: var(--component-select-color, var(--c-text));
  border: var(--component-select-border, var(--component-select-border-style, solid) var(--component-select-border-color, transparent));
  border-width: var(--component-select-border-width, 0);
}
.sf-component-select__dropdown {
  box-sizing: border-box;
  position: var(--component-select-dropdown-position, fixed);
  top: var(--component-select-dropdown-top, auto);
  left: 0;
  bottom: var(--component-select-dropdown-bottom, 0);
  z-index: var(--component-select-dropdown-z-index, 1);
  width: 100%;
  background: var(--component-select-dropdown-background, var(--c-white));
  box-shadow: var(--component-select-dropdown-box-shadow, 0 4px 11px rgba(var(--c-dark-base), 0.1));
}
.sf-component-select__options {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: auto;
}
.sf-component-select__options::-webkit-scrollbar {
  width: 0;
}
.sf-component-select__error-message {
  --component-select-border-color: var(--c-danger);
  color: var(--component-select-error-message-color, var(--c-danger));
  min-height: var(--component-select-error-message-height, calc(var(--font-size--xs) * 1.2));
}
.sf-component-select__cancel {
  --button-background: var(--c-light);
  --button-color: var(--c-dark-variant);
}
.sf-component-select__cancel:hover {
  --button-background: var(--c-light);
}
.sf-component-select--underlined {
  --component-select-border-width: 0 0 1px 0;
  --component-select-border-color: var(--c-link);
}
.sf-component-select.is-selected {
  --component-select-label-top: 0;
  --component-select-label-font-size: var(--font-size--xs);
}
.sf-component-select.is-invalid {
  --component-select-border-color: var(--c-danger);
}
.sf-component-select.is-active {
  --chevron-color: var(--c-primary);
  --component-select-label-color: var(--c-text);
  --component-select-border-color: var(--c-primary);
}
.sf-component-select.is-disabled {
  --chevron-color: var(--c-text-disabled);
  --component-select-color: var(--c-text-disabled);
  --component-select-border-color: var(--c-text-disabled);
  --component-select-label-color: var(--c-text-disabled);
}
.sf-component-select.is-required {
  --component-select-label-required: " *";
}
.sf-component-select--no-chevron {
  --chevron-display: none;
}
.sf-component-select-enter-active {
  animation: var(--component-select-animation-enter, ssmobile 150ms);
}
.sf-component-select-leave-active {
  animation: var(--component-select-animation-leave, ssmobile 150ms reverse);
}

@keyframes ssdesktop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ssmobile {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
.sf-checkbox {
  --icon-size: 1.25rem;
}
.sf-checkbox__container {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--checkbox-padding);
  width: var(--checkbox-container-width);
  cursor: var(--checkbox-cursor, pointer);
}
.sf-checkbox__checkmark {
  box-sizing: border-box;
  display: var(--checkbox-display, flex);
  align-items: center;
  justify-content: center;
  order: var(--checkbox-order);
  width: var(--checkbox-size, 1.5rem);
  height: var(--checkbox-size, 1.5rem);
  border: var(--checkbox-border, var(--checkbox-border-style, solid) var(--checkbox-border-color, var(--c-link)));
  border-width: var(--checkbox-border-width, 1px);
  border-radius: var(--checkbox-border-radius);
  background: var(--checkbox-background, transparent);
  transition: background 150ms linear, border-color 150ms linear;
}
.has-error .sf-checkbox__checkmark {
  --checkbox-border-color: var(--c-danger);
}
.sf-checkbox__checkmark:hover {
  --checkbox-border-color: var(--c-black);
}
.has-error .sf-checkbox__checkmark:hover {
  --checkbox-border-color: var(--c-danger);
}
.is-disabled .sf-checkbox__checkmark:hover {
  --checkbox-border-color: var(--c-text-disabled);
}
.is-disabled .sf-checkbox__checkmark {
  --checkbox-border-color: var(--c-text-disabled);
}
.is-disabled .sf-checkbox__checkmark.is-active {
  --checkbox-background: var(--c-text-disabled);
}
.sf-checkbox__label {
  flex: 1;
  margin: var(--checkbox-label-margin, 0 0 0 var(--spacer-xs));
  color: var(--checkbox-label-color, var(--c-link));
  transition: color 150ms linear;
}
.sf-checkbox__label:hover {
  --checkbox-label-color: var(--c-black);
}
.sf-checkbox--is-disabled .sf-checkbox__label:hover {
  --checkbox-label-color: var(--c-text-disabled);
}
.sf-checkbox.is-active {
  --checkbox-border-color: var(--c-primary);
  --checkbox-background: var(--c-primary);
}
.sf-checkbox.is-active.has-error {
  --checkbox-border-color: var(--c-danger);
  --checkbox-background: var(--c-danger);
  --checkbox-label-color: var(--c-text);
  --checkbox-message-color: var(--c-danger);
}
.sf-checkbox.is-active.is-disabled {
  --checkbox-border-color: var(--c-text-disabled);
  --checkbox-background: var(--c-text-disabled);
}
.sf-checkbox.is-required {
  --checkbox-message-color: var(--c-text);
}
.sf-checkbox.is-required.has-error {
  --checkbox-message-color: var(--c-danger);
}
.sf-checkbox.is-disabled {
  --checkbox-label-color: var(--c-text-disabled);
  --checkbox-border-color: var(--c-text-disabled);
}
.sf-checkbox__message {
  margin: var(--checkbox-message-margin, var(--spacer-2xs) 0 0 0);
  color: var(--checkbox-message-color, var(--c-danger));
}
.sf-checkbox__message .sf-checkbox__message--info {
  color: var(--checkbox-message-color, var(--c-primary));
}
.sf-checkbox input {
  position: absolute;
  opacity: 0;
  left: -1000%;
  width: 1px;
  height: 1px;
}
.sf-checkbox input[style*="outline: none"]:focus + .sf-checkbox__checkmark {
  outline: none;
}
.sf-checkbox input:focus + .sf-checkbox__checkmark {
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
}

.sf-menu-item {
  --link-text-decoration: none;
  --button-width: 100%;
  display: flex;
  align-items: center;
  text-transform: var(--menu-item-text-transform);
  cursor: pointer;
  font: var(--menu-item-font, var(--menu-item-font-weight, var(--font-weight--normal)) var(--menu-item-font-size, var(--font-size--base))/var(--menu-item-font-line-height, 1.4) var(--menu-item-font-family, var(--font-family--secondary)));
}
.sf-menu-item__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.sf-menu-item__icon {
  --icon-color: var(--c-gray);
  margin: var(--menu-item-icon-margin, 0 var(--spacer-xs) 0 0);
}
.sf-menu-item__count {
  margin: var(--menu-item-count-margin, 0 0 0 auto);
  color: var(--menu-item-count-color, var(--c-gray));
}
.sf-menu-item__mobile-nav-icon {
  display: var(--menu-item-mobile-nav-icon-display, flex);
  margin: var(--menu-item-mobile-nav-icon-margin, 0 0 0 var(--spacer-base));
}
.sf-menu-item__label {
  color: var(--menu-item-label-color, var(--c-dark-variant));
  text-align: left;
}
.sf-menu-item.is-active {
  --menu-item-label-color: var(--c-primary);
}
.sf-menu-item:hover {
  --menu-item-label-color: var(--c-primary);
}

.sf-notification {
  position: relative;
  display: flex;
  align-items: var(--notification-align-items, center);
  box-sizing: border-box;
  max-width: var(--notification-max-width, 20.9375rem);
  padding: var(--notification-padding, var(--spacer-sm) var(--spacer-xs));
  box-shadow: var(--notification-box-shadow, 0 4px 11px rgba(var(--c-dark-base), 0.1));
  border-radius: var(--notification-border-radius, 5px);
  background: var(--notification-background);
  color: var(--notification-color, var(--c-white));
  font: var(--notification-font, var(--notification-font-weight, var(--font-weight--medium)) var(--notification-font-size, var(--font-size--lg))/var(--notification-font-line-height, normal) var(--notification-font-family, var(--font-family--secondary)));
}
.sf-notification__title {
  display: var(--notification-title-display, block);
}
.sf-notification__title::after {
  content: " ";
}
.sf-notification__message {
  display: block;
}
.sf-notification__action {
  display: var(--notification-action-display, none);
  color: var(--notification-action-color);
  font: var(--notification-action-font, inherit);
  text-decoration: var(--notification-action-text-decoration, underline);
}
.sf-notification__icon {
  --icon-color: var(--c-white);
  margin: var(--notification-icon-margin, 0 var(--spacer-xs) 0 0);
}
.sf-notification__close {
  --icon-size: 0.85rem;
  position: absolute;
  top: var(--notification-close-top, var(--spacer-xs));
  right: var(--notification-close-right, var(--spacer-xs));
}
.sf-notification.color-black {
  --notification-background: var(--c-dark);
}
.sf-notification.color-white {
  --notification-background: var(--c-white);
}
.sf-notification.color-primary {
  --notification-background: var(--c-primary);
}
.sf-notification.color-secondary {
  --notification-background: var(--c-secondary);
}
.sf-notification.color-light {
  --notification-background: var(--c-light);
}
.sf-notification.color-dark {
  --notification-background: var(--c-dark);
}
.sf-notification.color-info {
  --notification-background: var(--c-info);
}
.sf-notification.color-success {
  --notification-background: var(--c-success);
}
.sf-notification.color-warning {
  --notification-background: var(--c-warning);
}
.sf-notification.color-danger {
  --notification-background: var(--c-danger);
}

.sf-section {
  margin: var(--section-margin, calc(var(--spacer-lg) * 2) 0 var(--spacer-lg) 0);
}
.sf-section__content {
  margin: var(--section-content-margin, calc(var(--spacer-lg) * 2) 0 0 0);
}

.sf-characteristic {
  display: flex;
  align-items: center;
}
.sf-characteristic__icon {
  --icon-color: var(--c-primary);
  --icon-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--characteristic-margin, 0 var(--spacer-xs) 0 0);
}
.sf-add-to-cart {
  display: flex;
}
.sf-add-to-cart__button {
  --button-font-weight: var(--font-weight--semibold);
  --button-width: 100%;
  align-items: center;
}
.sf-add-to-cart__button:disabled {
  color: var(--c-text-disabled);
}
.sf-add-to-cart__select-quantity {
  --add-to-cart-select-quantity-margin: 0 var(--spacer-base) 0 0;
  flex: none;
  margin: var(--add-to-cart-select-quantity-margin, 0 0 0 var(--spacer-xs));
}

.sf-pagination {
  display: flex;
  align-items: center;
}
.sf-pagination__item {
  --link-text-decoration: none;
  color: var(--pagination-item-color, var(--c-gray-variant));
  width: var(--pagination-item-width);
  height: var(--pagination-item-height);
  margin: var(--pagination-item-margin, 0 var(--spacer-2xs));
}
.sf-pagination__item.prev, .sf-pagination__item--next {
  --pagination-item-width: 1.125rem;
  --pagination-item-height: 1.125rem;
}
.sf-pagination__item.prev {
  --pagination-item-margin: 0 var(--spacer-base) 0 0;
}
.sf-pagination__item.next {
  --pagination-item-margin: 0 0 0 var(--spacer-base);
}
.sf-pagination__item.current {
  --pagination-item-color: var(--c-text);
  cursor: default;
}
.sf-pagination__item:hover {
  --pagination-item-color: var(--c-primary);
}

.sf-card {
  box-sizing: border-box;
  position: relative;
  width: 100%;
}
.sf-card__image {
  display: block;
  --image-width: 100%;
}
.sf-card__details {
  background: var(--c-light);
  text-align: center;
  padding: var(--spacer-sm) var(--spacer-sm) var(--spacer-lg);
}
.sf-card__title {
  padding: 0 0 var(--spacer-sm);
  --heading-title-font-weight: var(--font-weight--bold);
  --heading-title-font-size: var(--h3-font-size);
  --heading-title-font-family: var(--font-family--secondary);
}
.sf-card__description {
  margin: 0;
  color: var(--c-link);
}
.sf-card__action {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -1.5625rem);
}

.sf-steps__header {
  position: relative;
  width: 100%;
  display: flex;
  border: var(--steps-border, var(--steps-border-style, solid) var(--steps-border-color, var(--c-light)));
  border-width: var(--steps-border-width, 0);
  box-shadow: 0px 4px 11px rgba(var(--c-black-base), 0.1);
}
.sf-steps__step {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  background: var(--steps-step-background);
  padding: var(--steps-step-padding, var(--spacer-sm) var(--spacer-2xs));
  color: var(--steps-step-color, var(--c-link));
  cursor: var(--steps-step-cursor, pointer);
}
.sf-steps__step.current, .sf-steps__step.done {
  --steps-step-color: var(--c-primary);
  --steps-step-cursor: default;
  --step-font-weight: var(--font-weight--normal);
}
.sf-steps__step.is-done {
  --steps-step-cursor: pointer;
}
.sf-steps__step.is-disabled {
  --steps-step-cursor: not-allowed;
}
.sf-steps__progress {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--steps-progress-bottom, -2px);
  display: block;
  width: var(--steps-progress-width, var(--_steps-progress-width));
  height: var(--steps-progress-height, 2px);
  background: var(--steps-progress-background, var(--c-primary));
  transform: var(--steps-progress-transform, scale3d(calc(var(--_steps-progress-active-step) - 0.5), 1, 1));
  transform-origin: 0 50%;
  transition: var(--steps-progress-transition, transform 150ms ease-in-out);
}
.sf-steps__title {
  text-align: center;
}
.sf-steps__content {
  padding: var(--steps-content-padding, var(--spacer-base) 0 0 0);
}

.sf-banner-grid {
  --banner-align-items: flex-start;
  --banner-container-width: 100%;
  --banner-description-margin: var(--spacer-xl) 0;
}
.sf-banner-grid__row {
  display: var(--banner-grid-row-display, block);
  flex: var(--banner-grid-row-flex);
  margin: var(--banner-grid-row-margin, 0);
}
.sf-banner-grid__col {
  display: var(--banner-grid-col-display, block);
  flex: var(--banner-grid-col-flex);
  margin: var(--banner-grid-col-margin, 0);
}
.sf-banner-grid__col + .sf-banner-grid__col {
  --banner-grid-col-margin: var(--spacer-sm) 0 0 0;
}

.sf-accordion-item {
  will-change: height;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.sf-accordion-item__header {
  display: flex;
  justify-content: var(--accordion-item-header-justify, space-between);
  padding: var(--accordion-item-header-padding, var(--spacer-sm));
  color: var(--accordion-item-header-color);
  transition: color 150ms ease-in-out;
  text-align: left;
  width: 100%;
  border: var(--accordion-item-header-border, var(--accordion-item-header-border-style, solid) var(--accordion-item-header-border-color, var(--c-light)));
  border-width: var(--accordion-item-header-border-width, 0 0 1px 0);
}
.sf-accordion-item__header.is-open {
  --accordion-item-header-border-width: 0;
  --accordion-item-header-color: var(--c-primary);
  --chevron-color: var(--c-primary);
}
.sf-accordion-item__content {
  padding: var(--accordion-item-content-padding, var(--spacer-base) var(--spacer-sm));
  color: var(--accordion-item-content-color, var(--c-text));
  border: var(--accordion-item-content-border, var(--accordion-item-content-border-style, solid) var(--accordion-item-content-border-color, var(--c-light)));
  border-width: var(--accordion-item-content-border-width, 1px 0);
}
.sf-accordion-item__chevron {
  display: var(--accordion-item-chevron-display, none);
  flex: 0 0 auto;
}

.sf-accordion.has-chevron {
  --accordion-item-chevron-display: flex;
}

.sf-review {
  position: relative;
  display: var(--review-display, block);
  max-width: var(--review-max-width, 343px);
  padding: var(--review-padding, 0 0 8px);
  border: var(--review-border, var(--review-border-style, solid) var(--review-border-color, var(--c-light)));
  border-width: var(--review-border-width, 0 0 1px 0);
}
.sf-review__icon {
  --icon-size: 1.5rem;
  --icon-color: var(--c-primary);
  margin: var(--review-icon-margin, 0 var(--spacer-2xs) 0 0);
}
.sf-review__author {
  display: flex;
  align-items: center;
  color: var(--review-author-color, var(--c-text));
  text-transform: var(--review-author-text-transform, capitalize);
}
.sf-review__rating {
  display: var(--review-rating-display, inline-block);
  --icon-size: 16px;
}
.sf-review__info {
  margin: var(--review-info-margin, var(--spacer-xs) 0 0 0);
}
.sf-review__date {
  display: var(--review-date-display, block);
  margin: var(--review-date-margin, var(--spacer-xs) 0 var(--spacer-sm) 0);
  text-transform: var(--review-date-text-transform, capitalize);
  color: var(--review-date-color, var(--c-text-muted));
}
.sf-review__message {
  display: var(--review-message-display);
  margin: var(--review-message-margin, var(--spacer-sm) 0);
  color: var(--review-message-color, var(--c-text));
  vertical-align: middle;
}
.sf-review__read-more {
  margin: var(--review-read-more-margin, 0 0 0 var(--spacer-xs));
  --button-padding: 0;
  --button-font-weight: var(--font-weight--medium);
  --button-font-size: var(--font-size--sm);
}

.sf-gallery {
  display: flex;
  flex-direction: var(--gallery-flex-direction, column);
}
.sf-gallery__thumbs {
  display: var(--gallery-thumbs-display, flex);
  flex: var(--gallery-thumbs-flex);
  flex-direction: var(--gallery-thumbs-flex-direction);
  margin: var(--gallery-thumbs-margin, var(--spacer-xs) 0 0 0);
  order: var(--gallery-thumbs-order);
  overflow: auto;
}
.sf-gallery__thumbs::-webkit-scrollbar {
  width: 0;
}
.sf-gallery__item {
  display: flex;
  flex: 0 0 var(--gallery-thumb-width, 10rem);
  margin: var(--gallery-item-margin, 0 var(--spacer-xs) 0 0);
  opacity: var(--gallery-item-opacity, 0.5);
  transition: var(--gallery-item-transition, opacity 150ms ease-in-out);
  cursor: var(--gallery-item-cursor, pointer);
}
.sf-gallery__item:last-child {
  --gallery-item-margin: 0;
}
.sf-gallery__item--selected {
  --gallery-item-opacity: 1;
  --gallery-item-cursor: default;
}
.sf-gallery__stage {
  flex: 1;
  max-width: var(--gallery-stage-width, 26.375rem);
}
.sf-gallery__zoom {
  position: absolute;
  left: 50%;
  top: 0;
}
.sf-gallery .glide__slide {
  flex: 1;
}
.sf-gallery .glide__slides {
  margin: 0;
}

.sf-search-bar {
  box-sizing: border-box;
  position: relative;
  display: var(--search-bar-display, flex);
  align-items: center;
  background: var(--search-bar-background);
  padding: var(--search-bar-padding);
  width: var(--search-bar-width);
  height: var(--search-bar-height, 2rem);
}
.sf-search-bar__button {
  position: absolute;
  bottom: var(--spacer-xs);
  right: var(--search-bar-button-right, 0);
}
.sf-search-bar__icon {
  --icon-size: 1.25rem;
  display: var(--search-bar-icon-display, block);
}
.sf-search-bar__input {
  position: relative;
  flex-grow: 1;
  background: transparent;
  text-align: var(--search-bar-input-text-align);
  width: 100%;
  height: 100%;
  border: var(--search-bar-border, var(--search-bar-border-style, solid) var(--search-bar-border-color, var(--c-dark-variant)));
  border-width: var(--search-bar-border-width, 0 0 2px 0);
}
.sf-search-bar__input::-webkit-input-placeholder {
  color: var(--search-bar-placeholder-color, var(--c-gray));
  transition: var(--search-bar-placeholder-transition, color 0.2s ease-in);
  font: inherit;
}
.sf-search-bar__input::-moz-placeholder {
  color: var(--search-bar-placeholder-color, var(--c-gray));
  transition: var(--search-bar-placeholder-transition, color 0.2s ease-in);
  font: inherit;
}
.sf-search-bar__input:-ms-input-placeholder {
  color: var(--search-bar-placeholder-color, var(--c-gray));
  transition: var(--search-bar-placeholder-transition, color 0.2s ease-in);
  font: inherit;
}
.sf-search-bar__input:focus {
  --search-bar-border-color: var(--c-primary);
}
.sf-search-bar__input:focus::-webkit-input-placeholder {
  color: var(--search-bar-placeholder-color-focus, transparent);
}
.sf-search-bar__input:focus::-moz-placeholder {
  color: var(--search-bar-placeholder-color-focus, transparent);
}
.sf-search-bar__input:focus:-ms-input-placeholder {
  color: var(--search-bar-placeholder-color-focus, transparent);
}
.sf-search-bar__input::-webkit-search-cancel-button {
  opacity: 0;
}
.sf-search-bar__input[type=search] {
  -webkit-appearance: none;
}
.sf-search-bar__input::-ms-clear {
  opacity: 0;
}
.sf-search-bar--position-center {
  flex-direction: var(--search-bar-icon-flex-direction, row);
}
.sf-search-bar--position-center .sf-search-bar__input {
  --search-bar-input-text-align: center;
}
.sf-search-bar--position-center .sf-search-bar__input::placeholder {
  text-align: center;
}
.sf-search-bar--no-icon {
  --search-bar-icon-display: none;
}

.sf-tile {
  position: relative;
  display: block;
  width: 6.25rem;
  height: 7.5rem;
  margin: 0;
}
.sf-tile__title {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  text-transform: uppercase;
  margin: 0 0 var(--spacer-2xs);
  color: var(--c-black);
  transition: color 150ms ease-in-out;
}
.sf-tile:active {
  box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
}

.sf-scrollable__content {
  max-height: var(--scrollable-max-height, var(--_scrollable-max-height, 5rem));
}
.sf-scrollable__content .simplebar-scrollbar:before {
  width: 4px;
  background: var(--c-gray-variant);
  border-radius: 10px;
}
.sf-scrollable.is-open {
  --scrollable-max-height: auto;
}
.sf-scrollable__view-all {
  margin: var(--scrollable-button-margin, var(--spacer-sm) 0 0 0);
}

.sf-grouped-product-item {
  position: relative;
  display: var(--grouped-product-item-display);
  box-sizing: border-box;
  padding: var(--grouped-product-item-padding, var(--spacer-xs));
  border: var(--grouped-product-item-border, var(--grouped-product-item-border-style, solid) var(--grouped-product-item-border-color, var(--c-light)));
  border-width: var(--grouped-product-item-border-width, 0);
  font: var(--grouped-product-item-font, var(--grouped-product-item-font-weight, var(--font-weight--normal)) var(--grouped-product-item-font-size, var(--font-size--xs))/var(--grouped-product-item-font-line-height, 1.6) var(--grouped-product-item-font-family, var(--font-family--primary)));
}
.sf-grouped-product-item__aside {
  position: var(--grouped-product-item-aside-position, relative);
  flex: var(--grouped-product-item-flex);
  display: flex;
}
.sf-grouped-product-item__image {
  background: var(--grouped-product-item-image-background, var(--c-light));
}
.sf-grouped-product-item__image img {
  mix-blend-mode: darken;
}
.sf-grouped-product-item__quantity-selector {
  --quantity-selector-background: var(--c-light);
  display: var(--grouped-product-item-quantity-selector-display, flex);
  position: absolute;
  bottom: var(--grouped-product-item-quantity-selector-bottom, var(--spacer-sm));
  left: var(--grouped-product-item-quantity-selector-left, 50%);
  right: var(--grouped-product-item-quantity-selector-right);
  transform: var(--grouped-product-item-quantity-selector-transfrom, translate3d(-50%, 0, 0));
  margin: var(--grouped-product-item-quantity-selector-margin);
  z-index: 1;
}
.sf-grouped-product-item__description {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--grouped-product-item-description-margin);
}
.sf-grouped-product-item__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  margin: var(--grouped-product-item-info-margin);
}
.sf-grouped-product-item__title {
  color: var(--grouped-product-item-title-color, var(--c-link));
  padding: var(--grouped-product-item-title-margin, var(--spacer-xs) 0);
  display: inline-block;
  --link-text-decoration: none;
}
.sf-grouped-product-item__price {
  margin: var(--grouped-product-item-price-margin);
}

.sf-grouped-product .glide__slides {
  margin: 0;
}
.sf-grouped-product.without-carousel {
  --grouped-product-item-display: flex;
  --grouped-product-item-aside-position: static;
  --grouped-product-item-quantity-selector-bottom: var(--spacer-xs);
  --grouped-product-item-quantity-selector-left: auto;
  --grouped-product-item-quantity-selector-right: var(--spacer-xs);
  --grouped-product-item-quantity-selector-transfrom: translate3d(0, 0, 0);
  --grouped-product-item-border-width: 0 0 1px 0;
  --grouped-product-item-flex: 0 0 5.125rem;
  --grouped-product-item-description-margin: 0 0 0 var(--spacer-sm);
  --grouped-product-item-price-margin: 0 0 0 auto;
}
.sf-grouped-product.without-carousel .glide__slides {
  display: block;
  width: auto;
  transform: unset;
}
.sf-grouped-product.without-carousel .glide__slide--clone {
  display: none;
}
.sf-grouped-product.without-carousel .sf-grouped-product-item__quantity-selector {
  --quantity-selector-background: var(--c-light);
}
.sf-grouped-product.without-quantity {
  --grouped-product-item-quantity-selector-display: none;
}

.sf-select {
  position: relative;
  box-sizing: border-box;
  width: var(--select-width);
  height: var(--select-height, 4.25rem);
  padding: var(--select-padding, var(--spacer-sm) 0 var(--spacer-sm) 0);
  color: var(--select-color, var(--c-text));
  cursor: default;
  font: var(--input-error-message-font, var(--input-error-message-font-weight, var(--font-weight--medium)) var(--input-error-message-font-size, var(--font-size--xs))/var(--input-error-message-font-line-height, 1.2) var(--input-error-message-font-family, var(--font-family--secondary)));
}
.sf-select__label {
  position: absolute;
  top: var(--select-label-top, 30%);
  left: var(--select-label-left, 0);
  padding: 0 0 0 4px;
  height: 0.625rem;
  color: var(--select-label-color, var(--c-secondary-variant));
}
.sf-select__label::after {
  content: var(--select-label-required);
  color: var(--select-label-color, var(--c-primary));
}
.sf-select__dropdown {
  width: 100%;
  height: 1.625rem;
  margin: 0 0 var(--spacer-2xs) 0;
  overflow-y: scroll;
  box-shadow: none;
  color: var(--select-dropdown-color, var(--c-secondary-variant));
  background: var(--c-white);
  border: var(--select-dropdown-border, var(--select-dropdown-border-style, solid) var(--select-dropdown-border-color, var(--c-secondary)));
  border-width: var(--select-dropdown-border-width, 0 0 0 0);
}
.sf-select__option {
  background: var(--select-option-background, var(--c-white));
}
.sf-select .sf-select__dropdown:active {
  --select-label-color: var(--c-text-muted);
  --select-dropdown-border-color: var(--c-primary);
  --select-dropdown-color: var(--c-link);
}
.sf-select__label .sf-select__dropdown:active {
  top: 0;
}
.sf-select::-ms-expand {
  display: none;
}
.sf-select__error-message {
  color: var(--select-error-message-color, var(--c-danger));
  min-height: -select-error-message-height, calc(var(--font-size--xs) * 1.2);
}
.sf-select--underlined {
  --select-dropdown-border-width: 0 0 1px 0;
  --select-border-width: 0 0 1px 0;
  --select-border-color: var(--c-light);
}
.sf-select.is-selected {
  --select-label-top: 0;
  --select-label-font-size: var(--font-size--xs);
  --select-dropdown-color: var(--c-secondary-variant);
}
.sf-select.is-invalid {
  --select-dropdown-border-color: var(--c-danger);
}
.sf-select.is-disabled,
.sf-select select[disabled] {
  --select-dropdown-color: var(--c-text-disabled);
  --select-dropdown-border-color: var(--c-text-disabled);
  --select-label-color: var(--c-text-disabled);
  color: var(--c-text-disabled);
}
.sf-select.is-disabled .sf-select__dropdown:active,
.sf-select select[disabled] .sf-select__dropdown:active {
  --select-dropdown-border-color: var(--c-text-disabled);
}
.sf-select.is-required {
  --select-label-required: " *";
}

.sf-sliding-section {
  display: var(--sliding-section-display, inline);
  margin: var(--sliding-section-margin, 0);
}
.sf-sliding-section__static {
  flex: 1;
  overflow: hidden;
  height: var(--sliding-section-static-height, auto);
  transition: var(--sliding-section-static-transition, height 150ms ease-in-out);
}
.sf-sliding-section__sliding {
  flex: 1;
  padding: var(--sliding-section-sliding-padding, 0 var(--spacer-xl));
}
.sf-sliding-section__mobile-bar {
  display: var(--sliding-section-mobile-bar-display, none);
  padding: var(--sliding-section-mobile-bar-padding, var(--spacer-lg) 0);
}
.sf-sliding-section--has-scroll-lock {
  overflow: hidden;
}
.sf-sliding-section.is-active {
  --sliding-section-static-height: 0;
  --sliding-section-mobile-bar-display: block;
}

.sf-mega-menu-column {
  --list-item-padding: var(--spacer-sm) var(--spacer-sm) var(--spacer-sm)
    var(--spacer-lg);
  --list-item-border-width: 0 0 1px 0;
  --menu-item-font-size: var(--font-size--sm);
  flex: 1;
  width: 100%;
}
.sf-mega-menu-column__header {
  --menu-item-font-size: var(--font-size--base);
  --menu-item-font-weight: var(--font-weight--medium);
  --menu-item-text-transform: uppercase;
  display: var(--mega-menu-column-header-display, flex);
  padding: var(--mega-menu-column-header-padding, var(--spacer-sm));
  margin: var(--mega-menu-column-header-margin, 0);
  border: var(--mega-menu-column-header-border, var(--mega-menu-column-header-border-style, solid) var(--mega-menu-column-header-border-color, var(--c-light)));
  border-width: var(--mega-menu-column-header-border-width, 0 0 1px 0);
}
.sf-mega-menu-column__content {
  position: var(--mega-menu-column-content-position, absolute);
  top: var(--mega-menu-column-content-top, 0);
  display: var(--mega-menu-column-content-display, none);
  width: 100%;
  transform: var(--mega-menu-column-content-transform, translateX(100%));
}
.sf-mega-menu-column.is-active {
  --mega-menu-column-content-display: block;
}

.sf-mega-menu {
  width: 100%;
  background: var(--mega-menu-background, var(--c-white));
  position: var(--mega-menu-position, static);
  height: var(--mega-menu-height, 100vh);
}
.sf-mega-menu__bar.sf-bar {
  display: var(--mega-menu-bar-display, flex);
}
.sf-mega-menu__content {
  display: var(--mega-menu-content-display, flex);
  flex-direction: var(--mega-menu-content-flex-direction, column);
  justify-content: var(--mega-menu-content-justify-content, space-between);
  align-items: var(--mega-menu-content-align-items, flex-start);
  max-width: var(--mega-menu-content-width, 77.5rem);
  margin: var(--mega-menu-content-margin, auto);
  padding: var(--mega-menu-content-padding);
  transform: var(--mega-menu-content-transform);
  transition: transform 150ms ease-in-out;
}
.sf-mega-menu__menu {
  display: var(--mega-menu-menu-display, flex);
  flex-direction: var(--mega-menu-menu-flex-direction, column);
  justify-content: var(--mega-menu-menu-justify-content, space-between);
  align-items: var(--mega-menu-menu-align-items, flex-start);
  flex: 1;
  width: 100%;
  overflow: hidden;
}
.sf-mega-menu__aside {
  flex: 1;
  width: 100%;
}
.sf-mega-menu__aside-header {
  --menu-item-font-size: var(--font-size--base);
  --menu-item-font-weight: var(--font-weight--medium);
  --menu-item-text-transform: uppercase;
  display: var(--mega-menu-column-header-display, flex);
  padding: var(--mega-menu-column-header-padding, var(--spacer-sm));
  margin: var(--mega-menu-column-header-margin, 0);
  border: var(--mega-menu-column-header-border, var(--mega-menu-column-header-border-style, solid) var(--mega-menu-column-header-border-color, var(--c-light)));
  border-width: var(--mega-menu-column-header-border-width, 0 0 1px 0);
}
.sf-mega-menu.is-active {
  --mega-menu-content-transform: translateX(-100%);
}
.sf-mega-menu.is-absolute {
  --mega-menu-position: absolute;
  top: var(--mega-menu-top, 100%);
  left: var(--mega-menu-left, 0);
}

.sf-header-navigation-item {
  position: var(--header-navigation-item-position, relative);
  display: flex;
  flex: var(--header-navigation-item-flex, 0);
}
.sf-header-navigation-item__content {
  position: var(--header-navigation-item-content-position, fixed);
  top: var(--header-navigation-item-content-position, 0);
  width: var(--header-navigation-item-content-width, 100%);
  z-index: var(--header-navigation-item-content-position, 2);
  --header-navigation-item-padding: 0;
}
.sf-header-navigation-item__link {
  --link-text-decoration: var(--header-navigation-item-text-decoration, none);
}
.sf-header-navigation-item > .sf-header-navigation-item__menu-item {
  --menu-item-font-size: var(--font-size--base);
  --menu-item-font-weight: var(--font-weight--medium);
  --menu-item-text-transform: uppercase;
  display: var(--header-navigation-item-menu-item-display, flex);
  padding: var(--header-navigation-item-menu-item-padding, var(--spacer-sm));
  margin: var(--header-navigation-item-menu-item-margin, 0);
  border: var(--header-navigation-item-menu-item-border, var(--header-navigation-item-menu-item-border-style, solid) var(--header-navigation-item-menu-item-border-color, var(--c-light)));
  border-width: var(--header-navigation-item-menu-item-border-width, 0 0 1px 0);
}
.sf-header-navigation-item:hover > *:not(.sf-mega-menu) {
  --header-navigation-item-color: var(--c-primary);
  --header-navigation-item-border-color: var(--c-primary);
}
.sf-header-navigation-item:hover > *:not(.sf-mega-menu):active {
  --header-navigation-item-color: var(--c-primary);
}
.sf-header-navigation-item.is-active:hover > *:not(.sf-mega-menu) {
  --header-navigation-item-color: var(--c-primary);
}
.sf-header-navigation-item--not-stretched {
  --header-navigation-item-flex: 0;
}
.sf-header-navigation-item__item {
  display: var(--header-navigation-item-display, flex);
}
.sf-header-navigation-item__item--desktop > *:not(.sf-mega-menu) {
  --link-color: var(
    --header-navigation-item-color,
    var(--c-dark-variant)
  );
  box-sizing: border-box;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: var(--header-navigation-item-padding, calc(var(--spacer-sm) - 1px) var(--spacer-sm));
  margin: var(--header-navigation-item-margin, 0);
  border: var(--header-navigation-item-border, var(--header-navigation-item-border-style, solid) var(--header-navigation-item-border-color, transparent));
  border-width: var(--header-navigation-item-border-width, 0 0 2px 0);
  transition: var(--header-navigation-item-transition, border-color 150ms ease-in-out, color 150ms ease-in-out);
  color: var(--header-navigation-item-color, var(--c-dark-variant));
  text-transform: uppercase;
  text-decoration: initial;
  text-align: center;
}
.sf-header-navigation-item__item--desktop > *:not(.sf-mega-menu):focus {
  --header-navigation-item-color: var(--c-text);
  --header-navigation-item-border-color: var(--c-primary);
}
.sf-header-navigation-item__item--mobile {
  --header-navigation-item-padding: 0;
  --header-navigation-item-border: none;
  width: var(--header-navigation-item-width, 100%);
}
.sf-header-navigation-item__item--mobile > .sf-header-navigation-item__menu-item {
  --menu-item-font-size: var(--font-size--base);
  --menu-item-font-weight: var(--font-weight--medium);
  --menu-item-text-transform: uppercase;
  display: var(--header-navigation-item-menu-item-display, flex);
  padding: var(--header-navigation-item-menu-item-padding, var(--spacer-sm));
  margin: var(--header-navigation-item-menu-item-margin, 0);
  border: var(--header-navigation-item-menu-item-border, var(--header-navigation-item-menu-item-border-style, solid) var(--header-navigation-item-menu-item-border-color, var(--c-light)));
  border-width: var(--header-navigation-item-menu-item-border-width, 0 0 1px 0);
}

.sf-header-navigation__menu {
  display: var(--header-navigation-menu-display, none);
}
.sf-header-navigation__sidebar {
  --sidebar-content-padding: 0;
  display: var(--header-navigation-sidebar-display, flex);
}

.sf-header {
  position: relative;
}
.sf-header__wrapper {
  position: var(--header-wrapper-position);
  z-index: var(--header-wrapper-z-index, 1);
  width: 100%;
  background: var(--header-background, #ffffff);
  transition: var(--header-wrapper-transition, transform 150ms ease-in-out);
  transform: var(--header-wrapper-transform);
  box-shadow: var(--header-box-shadow);
}
.sf-header__header {
  display: flex;
  flex-wrap: var(--header-flex-wrap, wrap);
  align-items: center;
  justify-content: center;
  padding: var(--header-padding, 0 var(--spacer-sm));
  max-width: var(--header-width, 77.5rem);
  margin: var(--header-margin, 0 auto);
}
.sf-header__logo {
  --image-width: var(--header-logo-width, auto);
  --image-height: var(--header-logo-height, 2.125rem);
  flex: 0 0 var(--header-logo-width, auto);
  margin: var(--header-logo-margin, var(--spacer-xs) 0);
}
.sf-header__title {
  margin: var(--header-title-margin, var(--spacer-xs) 0);
}
.sf-header__aside:not(:empty) {
  margin: var(--header-aside-margin, 0 0 0 auto);
}
.sf-header__actions {
  flex: 100%;
  display: flex;
  flex-wrap: var(--header-actions-flex-wrap, wrap);
  align-items: center;
  justify-content: flex-end;
}
.sf-header__navigation {
  order: 1;
  display: var(--header-navigation-display, none);
  flex: 0 0 calc(100% + var(--spacer-sm) * 2);
  margin: var(--header-navigation-margin, 0 calc(var(--spacer-sm) * -1));
}
.sf-header__navigation.is-visible {
  --header-navigation-display: flex;
}
.sf-header__search {
  --search-bar-display: none;
  flex: var(--header-search-flex, 0 0 100%);
  margin: var(--spacer-xs) 0;
}
.sf-header__icons {
  order: var(--header-icons-order);
  display: var(--header-icons-display, none);
  margin: var(--header-icons-margin);
}
.sf-header__icon {
  --icon-color: var(--c-dark-variant);
  --icon-badge-top: -0.5rem;
  --icon-badge-right: -0.5rem;
}
.sf-header__icon:hover {
  --icon-color: var(--c-text);
  filter: var(--header-icon-filter, drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)));
}
.sf-header__icon.is-active {
  --icon-color: var(--c-primary);
}
.sf-header__action {
  margin: var(--header-action-margin, 0 0 0 var(--spacer-xl));
}
.sf-header-height {
  box-sizing: border-box;
}
.sf-header.is-sticky {
  --header-wrapper-position: fixed;
}
.sf-header.is-hidden {
  --header-wrapper-transform: translate3d(0, -100%, 0);
  --header-wrapper-transition: transform 300ms ease-in-out;
}
.sf-header--has-mobile-search, .sf-header--has-mobile-navigation {
  --header-box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
}
.sf-header--has-mobile-search .sf-header__search {
  --search-bar-display: flex;
}
.sf-header--has-mobile-navigation {
  --header-navigation-display: flex;
}
.sf-product-card {
  box-sizing: border-box;
  position: relative;
  z-index: var(--product-card-z-index);
  max-width: var(--product-card-max-width, 10.625rem);
  flex: 0 1 var(--product-card-max-width, 10.625rem);
  height: var(--product-card-height);
  padding: var(--product-card-padding, var(--spacer-xs));
  background-color: var(--product-card-background, var(--c-white));
}
.sf-product-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: var(--product-card-transition);
  box-shadow: var(--product-card-box-shadow);
}
.sf-product-card:hover {
  --product-card-image-opacity: 1;
  --product-card-image-even-opacity: 1;
  --product-card-wishlist-icon-opacity: 1;
  --product-card-add-button-opacity: 1;
  --product-card-z-index: 1;
  --product-card-box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
}
.sf-product-card:active {
  --product-card-box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
}
.sf-product-card__link {
  display: block;
  width: 100%;
  line-height: 0;
  text-decoration: none;
  margin: var(--product-card-link-margin, 0);
  text-align: left;
}
.sf-product-card__title {
  color: var(--product-card-title-color, var(--c-link));
  margin: var(--product-card-title-margin, var(--spacer-xs) 0 0 0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-product-card__image-wrapper {
  position: relative;
}
.sf-product-card__image, .sf-product-card__picture {
  transition: var(--product-card-image-transition, opacity 150ms ease-in-out);
  opacity: var(--product-card-image-opacity);
}
.sf-product-card__image:nth-child(even), .sf-product-card__picture:nth-child(even) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: var(--product-card-image-even-opacity, 0);
}
.sf-product-card__image .sf-image, .sf-product-card__picture .sf-image {
  --image-width: 100%;
  --image-height: auto;
}
.sf-product-card__badge {
  position: absolute;
  top: var(--product-card-badge-top, var(--spacer-xs));
  left: var(--product-card-badge-left, 0);
}
.sf-product-card__add-button {
  --circle-icon-position: absolute;
  --button-box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
  right: var(--product-card-add-button-right, 1rem);
  bottom: var(--product-card-add-button-bottom, 0);
  display: var(--product-card-add-button-display, none);
  transform: var(--product-card-add-button-transform, translate3d(0, 50%, 0));
  opacity: var(--product-card-add-button-opacity, 0);
}
.sf-product-card__add-button:focus {
  --product-card-add-button-opacity: 1;
}
.sf-product-card__price {
  margin: var(--product-card-margin, 0);
}
.sf-product-card__reviews {
  display: flex;
  align-items: center;
}
.sf-product-card__rating {
  display: flex;
}
.sf-product-card__reviews-count {
  margin: var(--product-card-reviews-count-margin, 0 0 0 var(--spacer-xs));
  color: var(--product-card-reviews-count-color, var(--c-text));
  text-decoration: none;
}
.sf-product-card__wishlist-icon {
  --icon-color: var(--c-dark-variant);
  position: absolute;
  top: var(--product-card-wishlist-icon-top, var(--spacer-xs));
  right: var(--product-card-wishlist-icon-right, var(--spacer-xs));
  padding: var(--product-card-wishlist-icon-padding, 0);
  opacity: var(--product-card-wishlist-icon-opacity, 1);
  transition: var(--product-card-wishlist-icon-transition, opacity 150ms ease-in-out);
  cursor: pointer;
}
.sf-product-card__wishlist-icon:focus {
  --product-card-wishlist-icon-opacity: 1;
}
.sf-product-card.on-wishlist {
  --product-card-wishlist-icon-opacity: 1;
}

.sf-bottom-navigation {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--bottom-navigation-z-index, 1);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  width: 100%;
  height: var(--bottom-navigation-height, 3.75rem);
  padding: var(--bottom-navigation-padding, 0 var(--spacer-sm));
  background: var(--bottom-navigation-background, var(--c-white));
  box-shadow: var(--bottom-navigation-box-shadow, 0px -2px 10px rgba(var(--_c-gray-secondary-base), 0.15));
}

.sf-bottom-navigation-item {
  --icon-color: var(--c-link);
  background: transparent;
  border: 0;
  top: var(--bottom-navigation-item-top);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: var(--bottom-navigation-item-align-self);
  margin: var(--bottom-navigation-item-margin);
  padding: var(--bottom-navigation-item-padding, var(--spacer-xs) 0 var(--spacer-xs) 0);
  color: var(--bottom-navigation-item-color, var(--c-link));
  font: var(--bottom-navigation-item-font, var(--bottom-navigation-item-font-weight, var(--font-weight--light)) var(--bottom-navigation-item-font-size, var(--font-size--xs))/var(--bottom-navigation-item-font-line-height, 1) var(--bottom-navigation-item-font-family, var(--font-family--primary)));
}
.sf-bottom-navigation-item .sf-circle-icon {
  --button-size: 4.125rem;
}
.sf-bottom-navigation-item__label {
  margin: var(--bottom-navigation-item-label-margin);
}
.sf-bottom-navigation-item.is-active {
  --icon-color: var(--c-primary);
  --bottom-navigation-item-color: var(--c-primary);
  --bottom-navigation-item-font-weight: var(--font-weight--normal);
}
.sf-bottom-navigation-item .has-margin {
  --bottom-navigation-item-label-margin: var(--spacer-xs) 0 0 0;
}
.sf-bottom-navigation-item__icon {
  background: transparent;
  padding: 0;
}
.sf-bottom-navigation-item.is-floating {
  --icon-color: var(--c-white);
}
.sf-bottom-navigation-item.is-floating .sf-circle-icon {
  --circle-icon-position: absolute;
  top: 0;
  transform: translate3d(0, -50%, 0);
}
.sf-bottom-navigation-item.center {
  --bottom-navigation-item-align-self: center;
}

.sf-carousel {
  position: relative;
}
.sf-carousel__wrapper {
  max-width: var(--carousel-width, calc(100% - var(--carousel-controls-size)));
  padding: var(--carousel-padding);
  margin: auto;
  overflow: hidden;
}
.sf-carousel__slides {
  margin: 0;
}
.sf-carousel__controls {
  position: var(--carousel-controls-position, absolute);
  top: var(--carousel-controls-top, 50%);
  left: var(--carousel-controls-left, 0);
  transform: var(--carousel-controls-transform, translate3d(0, -50%, 0));
  display: var(--carousel-controls-display, none);
  justify-content: var(--carousel-controls-justify-content, space-between);
  width: var(--carousel-controls-width, 100%);
}
.sf-carousel .glide__track, .sf-carousel .glide__slides, .sf-carousel .glide__slide {
  overflow: unset;
}
.sf-carousel .glide__slide {
  display: flex;
  justify-content: center;
}
.sf-carousel .glide__slide > * {
  flex: 1;
}
.sf-carousel .glide__slides {
  margin: 0;
}

.sf-store {
  display: flex;
  flex-wrap: wrap;
  padding: var(--store-padding, 0 0 var(--spacer-sm) 0);
  margin: var(--store-margin, var(--spacer-sm) 0 0 0);
  border: var(--store-border, var(--store-border-style, solid) var(--store-border-color, var(--c-light)));
  border-width: var(--store-border-width, 0 0 1px 0);
}
.sf-store__distance {
  flex: var(--store-distance-flex, 0 0 100%);
  order: var(--store-distance-order);
  margin: var(--store-distance-margin, 0 0 var(--spacer-xs) 0);
  text-align: var(--store-distance-text-align, left);
  color: var(--c-text);
}
.sf-store__distance span {
  font-weight: var(--store-distance-span, var(--font-weight--normal));
  color: var(--c-text);
}
.sf-store__btn {
  display: flex;
  justify-content: flex-start;
}
.sf-store__media {
  flex: var(--store-media-flex, 0 0 5.125rem);
  margin: var(--store-media-margin, 0 var(--spacer-xs) 0 0);
}
.sf-store__icon {
  margin: var(--store-icon-padding, var(--spacer-xl));
}
.sf-store__address {
  margin: var(--store-item-addres-margin, 0 0 var(--spacer-base) 0);
  color: var(--c-link);
}
.sf-store__name {
  margin: var(--store-item-name-margin, 0);
  color: var(--store-item-name-color, var(--c-text));
}
.sf-store__property {
  display: flex;
  align-items: center;
  margin: var(--store-item-property-margin, 0 0 var(--spacer-sm) 0);
  color: var(--c-dark-variant);
}
.sf-store__property:last-child {
  margin: var(--store-item-property-margin, 0);
}
.sf-store__property-link {
  color: var(--c-link);
  text-decoration: none;
}

.sf-store-locator__wrapper {
  display: flex;
  flex-direction: var(--store-locator-wrapper-flex-direction, column-reverse);
  justify-content: var(--store-locator-wrapper-justify-content, flex-start);
  align-items: var(--store-locator-wrapper-align-items, flex-start);
}
.sf-store-locator__list {
  flex: var(--store-locator-list-flex);
  padding: var(--store-locator-list-padding, 0 var(--spacer-sm));
  margin: var(--store-locator-list-margin);
}
.sf-store-locator__map-wrapper {
  position: relative;
  flex: var(--store-locator-map-flex, 0 0 60vh);
  width: var(--store-locator-map-width, 100%);
  height: var(--store-locator-map-height);
}
.sf-store-locator__map {
  position: absolute;
  height: 100%;
  z-index: 0;
}
.sf-store-locator__stores {
  width: var(--store-locator-stores-width, 100%);
  padding: var(--store-locator-stores-padding, var(--spacer-sm) 0 var(--spacer-sm) var(--spacer-sm));
  margin: var(--store-locator-stores-margin);
  border: var(--store-locator-stores-border, var(--store-locator-stores-border-style, solid) var(--store-locator-stores-border-color, var(--c-primary)));
  border-width: var(--store-locator-stores-border-width, 0 0 2px 0);
  color: var(--store-locator-store-color, var(--c-text));
}
.sf-store-locator__stores span {
  font-weight: var(--font-weight--bold);
  color: var(--c-text);
}

.sf-radio {
  display: var(--radio-display, flex);
  transition: var(--radio-transition, background-color 0.25s cubic-bezier(1, 0.5, 0.8, 1));
}
.sf-radio__label {
  display: var(--radio-label-display, flex);
  color: var(--radio-label-color);
}
.sf-radio__checkmark {
  box-sizing: border-box;
  width: var(--radio-checkmark-size, 1.5rem);
  height: var(--radio-checkmark-size, 1.5rem);
  border: var(--radio-checkmark-border, var(--radio-checkmark-border-style, solid) var(--radio-checkmark-border-color, var(--c-gray-variant)));
  border-width: var(--radio-checkmark-border-width, 1px);
  border-radius: var(--radio-checkmark-border-radius, 100%);
  transition: var(--radio-checkmark-transition, border 0.25s cubic-bezier(1, 0.5, 0.8, 1));
}
.sf-radio__checkmark.is-active {
  --radio-checkmark-border-width: 9px;
  --radio-checkmark-border-color: var(--c-primary);
}
.sf-radio input {
  position: absolute;
  opacity: 0;
  left: -1000%;
  width: 1px;
  height: 1px;
}
.sf-radio input[style*="outline: none"]:focus + .sf-radio__checkmark {
  outline: none;
}
.sf-radio input:focus + .sf-radio__checkmark {
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
}
.sf-radio__container {
  position: relative;
  display: var(--radio-container-display, flex);
  align-items: var(--radio-container-align-items);
  flex: 1;
  padding: var(--radio-container-padding, var(--spacer-sm) var(--spacer-lg) var(--spacer-sm) var(--spacer-sm));
  cursor: var(--radio-container-cursor, pointer);
}
.sf-radio:hover {
  --radio-checkmark-border-color: var(--c-black);
}
.sf-radio__content {
  flex: 1;
  margin: var(--radio-content-margin, 0 0 0 var(--spacer-sm));
}
.sf-radio__details {
  margin: var(--radio-details-margin, var(--spacer-xs) 0 0 0);
  color: var(--radio-details-color, var(--c-text-muted));
  font: var(--radio-details-font, var(--radio-details-font-weight, var(--font-weight--light)) var(--radio-details-font-size, var(--font-size--sm))/var(--radio-details-font-line-height, 1.2) var(--radio-details-font-family, var(--font-family--primary)));
}
.sf-radio__description {
  margin: var(--radio-description-margin, var(--spacer-xs) 0 0 0);
  color: var(--radio-description-margin);
}
.sf-radio.is-active {
  background: var(--radio-background, var(--c-light));
}
.sf-radio.is-disabled {
  --radio-checkmark-border-color: var(--c-text-disabled);
  --radio-details-color: var(--c-text-disabled);
  --radio-description-margin: var(--c-text-disabled);
  --radio-label-color: var(--c-text-disabled);
  --radio-container-cursor: default;
}
.sf-radio.is-disabled:hover {
  --radio-checkmark-border-color: var(--c-text-disabled);
}
.sf-radio--transparent.is-active {
  --radio-background: transparent;
}

.sf-sidebar__aside {
  position: fixed;
  top: var(--sidebar-top, 0);
  left: var(--sidebar-left, 0);
  right: var(--sidebar-right, 0);
  bottom: var(--sidebar-bottom, 0);
  z-index: var(--sidebar-z-index, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--sidebar-width);
  height: 100%;
  background-color: var(--sidebar-background, var(--c-white));
  box-shadow: var(--sidebar-box-shadow, 0px 4px 11px rgba(29, 31, 34, 0.1));
}
.sf-sidebar__top {
  padding: var(--sidebar-top-padding, var(--spacer-sm) var(--spacer-sm) 0 var(--spacer-sm));
}
.sf-sidebar__content {
  overflow: auto;
  display: var(--sidebar-content-display, flex);
  flex-direction: var(--sidebar-content-flex-direction, column);
  box-sizing: border-box;
  width: var(--sidebar-content-width);
  height: 100%;
  scrollbar-color: var(--c-gray-variant) var(--c-light);
  scrollbar-width: thin;
  padding: var(--sidebar-content-padding, var(--spacer-base) var(--spacer-sm));
  color: var(--sidebar-content-color, var(--c-text));
}
.sf-sidebar__content::-webkit-scrollbar {
  width: 0;
}
.sf-sidebar__title {
  --heading-title-color: var(--c-dark-variant);
  --heading-title-font-size: var(--font-size--xl);
  --heading-title-font-weight: var(--font-weight--semibold);
  --heading-description-font-size: var(--font-size--xl);
  display: var(--sidebar-title-display);
  margin: var(--sidebar-title, 0 0 var(--spacer-lg) 0);
}
.sf-sidebar__bottom {
  position: sticky;
  top: 0;
  bottom: auto;
  padding: var(--sidebar-bottom-padding, var(--spacer-sm));
}
.sf-sidebar__circle-icon {
  --circle-icon-position: absolute;
  z-index: 1;
  display: var(--sidebar-circle-icon-display, flex);
  left: var(--sidebar-circle-icon-left);
  top: var(--sidebar-circle-icon-top, var(--spacer-xl));
  right: var(--sidebar-circle-icon-right, 0);
  transform: var(--sidebar-circle-icon-transform, translate3d(50%, 0, 0));
}

.sf-collected-product {
  position: relative;
  box-sizing: border-box;
  display: flex;
  max-width: var(--collected-product-width);
  padding: var(--collected-product-padding, var(--spacer-xs));
  background: var(--collected-product-background);
  z-index: var(--collected-product-z-index);
}
.sf-collected-product::after {
  content: "";
}
.sf-collected-product:hover {
  --collected-product-background: var(--c-white);
}
.sf-collected-product__remove {
  position: absolute;
  opacity: var(--collected-product-remove-opacity);
  right: var(--collected-product-remove-right, var(--spacer-xs));
  transition: var(--collected-product-remove-transition);
}
.sf-collected-product__remove:focus {
  --collected-product-remove-opacity: 1;
}
.sf-collected-product__remove--circle-icon {
  top: var(--collected-product-remove-top);
  display: var(--collected-product-remove-circle-icon-display, none);
  transform: var(--collected-product-remove-circle-icon-transform);
  background: var(--c-primary);
}
.sf-collected-product__remove--circle-icon .sf-icon {
  --icon-color: var(--c-white);
}
.sf-collected-product__remove--text {
  bottom: var(--collected-product-remove-bottom, var(--spacer-xs));
  display: var(--collected-product-remove-text-display);
}
.sf-collected-product__more-actions {
  position: absolute;
  top: var(--collected-product-remove-top);
  right: var(--collected-product-remove-right, var(--spacer-xs));
}
.sf-collected-product__aside {
  order: -1;
  position: relative;
  flex: 0 0 8.75rem;
  line-height: 0;
}
.sf-collected-product__image {
  background: var(--collected-product-image-background, var(--c-light));
}
.sf-collected-product__quantity-wrapper {
  position: absolute;
  box-sizing: border-box;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--spacer-sm);
}
.sf-collected-product__quantity-selector {
  --quantity-selector-background: var(--c-light);
}
.sf-collected-product__main {
  flex: 1;
  margin: var(--collected-product-main-margin, 0 0 0 var(--spacer-sm));
  display: flex;
  flex-direction: var(--collected-product-main-flex-direction, column);
}
.sf-collected-product__details, .sf-collected-product__actions {
  display: flex;
  flex-direction: column;
}
.sf-collected-product__title {
  display: inline-block;
  margin: var(--collected-product-title-margin, 0 var(--spacer-base) var(--spacer-sm) 0);
  color: var(--collected-product-title-color, var(--c-link));
  --link-text-decoration: none;
}

.sf-hero-item {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  color: var(--c-text);
  background-repeat: no-repeat;
  background-size: cover;
}
.sf-hero-item__wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 14rem;
  padding: var(--spacer-sm);
  text-decoration: none;
}
.sf-hero-item__wrapper.sf-button, .sf-hero-item__wrapper.sf-button:hover, .sf-hero-item__wrapper.sf-button:active, .sf-hero-item__wrapper.sf-link {
  --button-background: transparent;
  --button-box-shadow-opacity: 0;
  --button-wrap: normal;
  text-align: left;
}
.sf-hero-item__subtitle {
  margin: 0;
  color: var(--c-gray);
  width: 60%;
  text-transform: uppercase;
}
.sf-hero-item__title {
  margin: var(--spacer-xs) 0 0 0;
  color: var(--c-text);
  width: 60%;
  letter-spacing: 0.1px;
  text-transform: none;
}
.sf-hero-item__button {
  display: none;
}
.sf-hero-item--align-right {
  justify-content: flex-end;
}
.sf-hero-item--position-bg-top-right {
  background-position: top right;
}
.sf-hero-item--position-bg-bottom-right {
  background-position: bottom right;
}
.sf-hero-item--position-bg-bottom-left {
  background-position: bottom left;
}

.sf-hero {
  position: relative;
}
.sf-hero__control--left, .sf-hero__control--right {
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  display: none;
  padding: 0 var(--spacer-sm);
}
.sf-hero__control--right {
  right: 0;
}
.sf-hero__bullets {
  position: absolute;
  bottom: var(--spacer-xl);
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  display: none;
}
.sf-hero .glide__slides {
  margin: 0;
}

.sf-footer-column {
  color: var(--c-white);
  box-sizing: border-box;
}
.sf-footer-column__title {
  color: var(--c-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 0;
  padding: var(--spacer-base);
  background: var(--c-secondary);
  text-transform: uppercase;
  cursor: default;
}
.sf-footer-column__chevron {
  --chevron-color: var(--c-white);
}
.sf-footer-column .sf-list__item {
  --list-item-margin: var(--spacer-base) var(--spacer-xs);
  --menu-item-label-color: var(--c-white);
}

.sf-footer {
  background: var(--c-secondary);
}
.sf-footer__container {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.sf-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--spacer-xs) 0;
  padding: 0 0 var(--spacer-xl) 0;
}
.sf-footer__bottom-logo {
  --image-width: auto;
  --image-height: 2.125rem;
  flex: 0 0 auto;
  padding: var(--spacer-xl) 0 0 0;
}

.sf-list {
  list-style: var(--list-list-style, none);
  padding: var(--list-padding, 0);
  margin: var(--list-margin, 0);
}
.sf-list .sf-list__item {
  margin: var(--list-item-margin, 0);
  padding: var(--list-item-padding, 0);
  color: var(--list-item-color, var(--c-text));
  border: var(--list-item-border, var(--list-item-border-style, solid) var(--list-item-border-color, var(--c-light)));
  border-width: var(--list-item-border-width, 0);
}

.sf-table {
  box-sizing: border-box;
  width: var(--table-width, 100%);
  border: none;
  border-spacing: var(--table-border-spacing, 0);
}
.sf-table__heading, .sf-table__row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.sf-table__heading {
  align-items: center;
  padding: var(--table-heading-padding, var(--spacer-sm) 0);
  background-color: var(--table-heading-background, transparent);
  border: var(--table-border-heading, var(--table-border-heading-style, solid) var(--table-border-heading-color, var(--c-primary)));
  border-width: var(--table-border-heading-width, 0 0 2px 0);
}
.sf-table__header {
  color: var(--table-header-color, var(--c-text));
}
.sf-table__row {
  padding: var(--table-row-padding, var(--spacer-xs) 0);
  background-color: var(--table-row-background);
  box-shadow: var(--table-row-box-shadow);
  border: var(--table-row-border, var(--table-row-border-style, solid) var(--table-row-border-color, var(--c-light)));
  border-width: var(--table-row-border-width, 0 0 2px 0);
}
.sf-table__data {
  color: var(--table-data-color, var(--c-dark-variant));
}
.sf-table__data, .sf-table__header {
  box-sizing: border-box;
  flex: var(--table-column-flex, 0 0 calc(100% / var(--_table-column-width)));
  padding: var(--table-column-padding, 0);
  text-align: var(--table-column-text-align, left);
}
.sf-table__data:nth-child(even), .sf-table__header:nth-child(even) {
  order: var(--_table-column-order, 1);
}
.sf-table--no-border {
  --table-row-border-width: 0;
}

.sf-product-card-horizontal {
  display: flex;
  box-sizing: border-box;
  padding: var(--product-card-horizontal-padding, var(--spacer-xs));
  background-color: var(--product-card-horizontal-background, var(--c-white));
  --property-value-font-weight: var(--font-weight--normal);
}
.sf-product-card-horizontal__link {
  color: inherit;
  text-decoration: inherit;
}
.sf-product-card-horizontal__link--image {
  display: block;
  line-height: 0;
}
.sf-product-card-horizontal__image-wrapper {
  flex: 0 0 var(--product-card-horizontal-image-width, 5.3125rem);
  position: relative;
}
.sf-product-card-horizontal__image-wrapper:hover {
  --product-card-horizontal-image-opacity: 1;
  --product-card-horizontal-image-even-opacity: 1;
}
.sf-product-card-horizontal__image, .sf-product-card-horizontal__picture {
  transition: var(--product-card-horizontal-image-transition, opacity 150ms ease-in-out);
  opacity: var(--product-card-horizontal-image-opacity);
}
.sf-product-card-horizontal__image:nth-child(even), .sf-product-card-horizontal__picture:nth-child(even) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: var(--product-card-horizontal-image-even-opacity, 0);
}
.sf-product-card-horizontal__main {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: var(--product-card-horizontal-flex-direction, column);
  padding: var(--product-card-horizontal-main-padding, 0 0 0 var(--spacer-sm));
}
.sf-product-card-horizontal__details, .sf-product-card-horizontal__actions-wrapper {
  display: flex;
  flex-direction: column;
}
.sf-product-card-horizontal__actions-wrapper {
  flex: 1;
  align-items: var(--product-card-horizontal-actions-wrapper, flex-start);
  margin: var(--product-card-horizontal-actions-wrapper-margin, var(--spacer-sm) 0 0 0);
}
.sf-product-card-horizontal__title {
  margin: 0;
  color: var(--c-link);
  color: var(--product-card-horizontal-title-color, var(--c-link));
}
.sf-product-card-horizontal__description {
  margin: var(--product-card-horizontal-description-margin, var(--spacer-sm) 0);
  color: var(--product-card-horizontal-description-color, var(--c-text-muted));
}
.sf-product-card-horizontal__configuration {
  margin: var(--product-card-horizontal-configuration-margin, 0);
}
.sf-product-card-horizontal__reviews {
  display: flex;
  align-items: center;
  margin: var(--product-card-horizontal-review-margin, auto 0 0 0);
}
.sf-product-card-horizontal__reviews-count {
  --button-font-size: var(--font-size--sm);
  --button-font-weight: var(--font-weight--light);
  color: var(--c-text);
  text-decoration: none;
  margin: 0 0 0 var(--spacer-xs);
}
.sf-product-card-horizontal__actions {
  margin: var(--product-card-horizontal-actions-margin, 0);
}
.sf-product-card-horizontal__add-to-cart {
  margin: var(--product-card-horizontal-add-to-cart-margin, 0);
}
.sf-product-card-horizontal__wishlist-icon {
  --icon-color: var(--c-dark-variant);
  position: absolute;
  top: 0;
  right: 0;
}
.sf-product-card-horizontal:hover {
  box-shadow: var(--product-card-horizontal-box-shadow, 0px 4px 11px rgba(29, 31, 34, 0.1));
}

.sf-top-bar {
  background-color: var(--top-bar-background, var(--c-light));
}
.sf-top-bar__container {
  padding: var(--top-bar-padding, 0 var(--spacer-base));
  box-sizing: border-box;
  justify-content: var(--topbar-justify-content, space-between);
  max-width: var(--sf-topbar-width, 77.5rem);
  height: var(--top-bar-height, 2.5rem);
  margin: 0 auto;
}
.sf-top-bar__container, .sf-top-bar__right, .sf-top-bar__left, .sf-top-bar__center {
  display: flex;
  align-items: center;
}

.sf-tabs {
  display: flex;
  flex-wrap: wrap;
}
.sf-tabs__title {
  z-index: var(--tabs-title-z-index);
  display: var(--tabs-title-display, flex);
  box-sizing: border-box;
  flex: var(--tabs-title-flex, 0 0 100%);
  justify-content: space-between;
  margin: var(--tabs-title-margin);
  padding: var(--tabs-title-padding, var(--spacer-sm));
  background: var(--tabs-title-background);
  border: var(--tabs-title-border, var(--tabs-title-border-style, solid) var(--tabs-title-border-color, var(--c-light)));
  border-width: var(--tabs-title-border-width, 0 0 1px 0);
  color: var(--tabs-title-color);
  transition: color 150ms ease-in-out;
}
.sf-tabs__title.is-active {
  --tabs-title-border-width: 0;
  --tabs-title-color: var(--c-primary);
  --chevron-color: var(--c-primary);
}
.sf-tabs__title.is-active + .sf-tabs__content {
  --tabs-content-border-width: var(
    --tabs-content-border-width,
    1px 0 0 0
  );
}
.sf-tabs__content {
  flex: 0 0 100%;
  order: var(--tabs-content-order);
  border: var(--tabs-content-border, var(--tabs-content-border-style, solid) var(--tabs-content-border-color, var(--c-light)));
  border-width: var(--tabs-content-border-width, 0);
  color: var(--tabs-content-color, var(--c-text));
}
.sf-tabs__content__tab {
  padding: var(--tabs-content-tab-padding, var(--spacer-base) var(--spacer-sm));
}
.sf-tabs__tab {
  display: contents;
}
.sf-tabs__chevron {
  display: var(--tabs-chevron-display);
}

.sf-content-page {
  font: var(--content-pages-content-page-font, var(--content-pages-content-page-font-weight, var(--font-weight--light)) var(--content-pages-content-page-font-size, var(--font-size--base))/var(--content-pages-content-page-font-line-height, 1.6) var(--content-pages-content-page-font-family, var(--font-family--primary)));
}

.sf-content-pages {
  display: flex;
  flex-direction: column;
  height: var(--content-pages-height, 100vh);
  overflow: hidden;
}
.sf-content-pages__section {
  display: flex;
  flex: 1;
  margin: var(--content-pages-section-margin, var(--spacer-base) 0);
  transition: var(--content-pages-transition, transform 150ms ease-in-out);
}
.sf-content-pages__section.is-active {
  transform: var(--content-pages-section-active-transform, translate3d(-100%, 0, 0));
}
.sf-content-pages__content, .sf-content-pages__sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  height: calc(100vh - 5rem);
}
.sf-content-pages__sidebar {
  flex: var(--content-pages-sidebar-flex, 0 0 100%);
  padding: var(--content-pages-sidebar-padding);
  background: var(--content-pages-sidebar-background);
}
.sf-content-pages__content {
  flex: var(--content-pages-content-flex, 0 0 100%);
  padding: var(--content-pages-content-padding);
}
.sf-content-pages__title {
  margin: var(--content-pages-sidebar-title-margin, 0 0 var(--spacer-xl) 0);
}
.sf-content-pages__category-title {
  margin: var(--content-pages-sidebar-category-title-margin, var(--spacer-sm) 0);
}
.sf-content-pages__list-item {
  --list-item-padding: var(--spacer-sm) var(--spacer-sm) var(--spacer-sm);
  --list-item-border-width: 0 0 1px 0;
}

/*# sourceMappingURL=lightswitch-storefront-ui.ssr.css.map */