.storefront-form-section {
  box-sizing: border-box;
  width: min(1200px, 100vw);
  max-width: none;
  margin: 0 0 0 calc((100% - min(1200px, 100vw)) / 2);
  padding: 42px 15px 65px;
  color: rgb(35, 35, 35);
  font: 400 13px/22px Montserrat;
  letter-spacing: 0.02em;
  text-align: left;
}

.storefront-form-section,
.storefront-form-section *,
.storefront-form-section *::before,
.storefront-form-section *::after {
  box-sizing: border-box;
}

.storefront-form-section .storefront-form-section__heading {
  width: 100%;
  margin: 0;
  padding: 37px 0 35px;
  color: rgb(35, 35, 35);
  font: 700 20px/20px Montserrat;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;
}

.storefront-form-section .storefront-form-section__intro {
  width: 100%;
  margin: 0;
  padding: 0;
  color: rgb(35, 35, 35);
  font: 400 13px/22px Montserrat;
  letter-spacing: 0.02em;
  text-align: left;
}

.storefront-form-section .storefront-form-section__section-heading {
  width: 100%;
  margin: 57px 0 58px;
  padding: 0 15px;
  color: rgb(35, 35, 35);
  font: 700 30px/28px Jost;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
}

.storefront-form-section .storefront-form-section__columns {
  display: block;
  width: calc(100% + 30px);
  margin: 0 -15px;
  padding: 0;
  font-size: 0;
  letter-spacing: normal;
}

.storefront-form-section .storefront-form-section__main,
.storefront-form-section .storefront-form-section__aside {
  display: inline-block;
  min-width: 0;
  vertical-align: top;
}

.storefront-form-section .storefront-form-section__main {
  width: calc(100% - 550px);
  margin: 55px 0 0;
  padding: 0 15px;
}

.storefront-form-section .storefront-form-section__form-heading,
.storefront-form-section .storefront-form-section__aside-heading {
  margin: 0;
  color: rgb(35, 35, 35);
  font: 600 14px/22px Montserrat;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
}

.storefront-form-section .storefront-form-section__form-heading {
  padding: 0 0 14px;
}

.storefront-form-section .storefront-form-section__form-text {
  margin: 0 0 30px;
  padding: 0;
  color: rgb(35, 35, 35);
  font: 400 13px/22px Montserrat;
  letter-spacing: normal;
}

.storefront-form-section .storefront-form-section__aside {
  width: 470px;
  margin: 0 0 0 62px;
  padding: 55px;
  background: rgb(250, 250, 250);
}

.storefront-form-section .storefront-form-section__aside-heading {
  padding: 0 0 10px;
}

.storefront-form-section .storefront-form-section__aside-text {
  margin: 0 0 33px;
  padding: 0;
  color: rgb(35, 35, 35);
  font: 400 13px/22px Montserrat;
  letter-spacing: 0.02em;
}

.storefront-form-section .storefront-form-section__contact-action {
  display: block;
  width: 205px;
  height: 44px;
  min-height: 44px;
  margin: 22px auto 32px 0;
  padding: 10px 15px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 0;
  background: rgb(255, 193, 7);
  box-shadow: none;
  color: rgb(35, 35, 35);
  font: 700 14px/22px Montserrat;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.storefront-form-section .storefront-form-section__contact-action:hover,
.storefront-form-section .storefront-form-section__contact-action:active {
  border-color: rgb(0, 0, 0);
  background: rgb(0, 0, 0);
  color: rgb(255, 193, 7);
}

.storefront-form-section .storefront-form-section__benefits {
  width: 100%;
  margin: 13px 0;
  padding: 0 0 0 40px;
  color: rgb(35, 35, 35);
  font: 400 13px/26px Montserrat;
  letter-spacing: normal;
}

.storefront-form-section .storefront-form-section__benefits li {
  margin: 0;
  padding: 0;
  font: 400 13px/26px Montserrat;
  letter-spacing: normal;
}

.storefront-form-section .storefront-form {
  width: 100%;
  margin: 22px 0 0;
  padding: 0;
  color: rgb(35, 35, 35);
  font: 400 0/22px Montserrat;
  letter-spacing: normal;
  text-align: left;
}

.storefront-form-section .storefront-form .storefront-field {
  width: 100%;
  margin: 0;
  padding: 0;
  font: 400 0/22px Montserrat;
  letter-spacing: normal;
}

.storefront-form-section .storefront-form .storefront-field + .storefront-field {
  margin-top: 17px;
}

.storefront-form-section .storefront-form .storefront-form__label {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  color: rgb(35, 35, 35);
  font: 500 13px/22px Montserrat;
  letter-spacing: 0.02em;
  text-align: left;
  transition: all;
  text-transform: capitalize;
}

.storefront-form-section .storefront-form .storefront-form__input {
  display: block;
  width: 100%;
  max-width: none;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid rgb(199, 199, 199);
  border-radius: 0;
  outline: 0;
  background: rgb(255, 255, 255);
  box-shadow: none;
  color: rgb(35, 35, 35);
  font: 400 13px/22px Montserrat;
  letter-spacing: 0.02em;
  text-align: left;
  transition: all;
}

.storefront-form-section .storefront-form textarea.storefront-form__input {
  height: 216px;
  min-height: 216px;
  resize: vertical;
}

.storefront-form-section .storefront-form .storefront-form__actions {
  width: 100%;
  margin: 23px 0 0;
  padding: 0;
  font: 400 0/22px Montserrat;
  letter-spacing: normal;
}

.storefront-form-section .storefront-form .storefront-form__submit {
  display: block;
  width: 227px;
  height: 44px;
  min-height: 44px;
  margin: 5px auto 0 0;
  padding: 10px 15px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 0;
  outline: 0;
  background: rgb(255, 193, 7);
  box-shadow: none;
  color: rgb(0, 0, 0);
  font: 700 14px/22px Montserrat;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.storefront-form-section .storefront-form .storefront-form__submit:not(:disabled):hover,
.storefront-form-section .storefront-form .storefront-form__submit:not(:disabled):active {
  border-color: rgb(0, 0, 0);
  background: rgb(0, 0, 0);
  color: rgb(255, 193, 7);
}

.storefront-form-section .storefront-form .storefront-form__input:focus,
.storefront-form-section .storefront-form .storefront-form__submit:focus,
.storefront-form-section .storefront-form-section__contact-action:focus {
  outline: 0;
  box-shadow: none;
}

@media (max-width: 1349px) {
  .storefront-form-section .storefront-form-section__main {
    margin-top: 0;
    width: calc(100% - 550px);
  }

  .storefront-form-section .storefront-form-section__aside {
    width: 450px;
    margin-left: 70px;
    padding: 25px;
  }
}

@media (max-width: 1023px) {
  .storefront-form-section .storefront-form-section__heading {
    padding-bottom: 25px;
  }

  .storefront-form-section .storefront-form-section__aside {
    width: 50%;
    margin-left: 0;
    padding: 0 15px;
    background: transparent;
  }

  .storefront-form-section .storefront-form-section__main {
    width: calc(100% - 550px);
  }
}

@media (max-width: 991px) {
  .storefront-form-section .storefront-form-section__main,
  .storefront-form-section .storefront-form-section__aside {
    width: 50%;
    margin-left: 0;
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (max-width: 1199px) {
  .storefront-form-section {
    width: calc(100vw - 15px);
    margin-left: calc((100% - (100vw - 15px)) / 2);
  }
}

@media (max-width: 1024px) {
  .storefront-form-section {
    padding-bottom: 25px;
  }
}

@media (max-width: 767px) {
  .storefront-form-section .storefront-form-section__columns {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .storefront-form-section .storefront-form-section__main,
  .storefront-form-section .storefront-form-section__aside {
    display: block;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .storefront-form-section .storefront-form-section__aside {
    margin-top: 50px;
    background: transparent;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  .storefront-form-section .storefront-form-section__aside {
    width: 350px;
  }
}

@media (max-width: 551px) {
  .storefront-form-section {
    padding-right: 10px;
    padding-left: 10px;
  }

  .storefront-form-section .storefront-form-section__heading {
    padding-top: 10px;
    padding-bottom: 15px;
  }

  .storefront-form-section .storefront-form-section__contact-action,
  .storefront-form-section .storefront-form .storefront-form__submit {
    height: 38px;
    min-height: 38px;
    padding: 7px 15px;
  }
}

@media (max-width: 550px) {
  .storefront-form-section .storefront-form-section__section-heading {
    padding-right: 0;
    padding-left: 0;
  }
}

/*
 * Public panel shortcodes add this context when rendered outside the composite.
 * The modifier only neutralizes the composite's two-column geometry.
 */
.storefront-form-section.storefront-form-section--standalone {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.storefront-form-section.storefront-form-section--standalone .storefront-form-section__main,
.storefront-form-section.storefront-form-section--standalone .storefront-form-section__aside {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.storefront-form-section.storefront-form-section--standalone .storefront-form-section__main {
  padding: 0;
}

.storefront-form-section.storefront-form-section--standalone .storefront-form-section__aside {
  padding: 55px;
  background: rgb(250, 250, 250);
}

.storefront-form-section.storefront-form-section--standalone .storefront-form-section__contact-action {
  max-width: 100%;
}

/*
 * Backward-compatible standalone form and runtime-state presentation.
 * The composite rules above remain more specific inside the section.
 */
.storefront-form {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--storefront-color-ink, #232323);
  font: 400 13px/22px var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  letter-spacing: .02em;
  text-align: left;
}

.storefront-form .storefront-field {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0 0 17px;
  padding: 0;
}

.storefront-form .storefront-form__label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  color: var(--storefront-color-ink, #232323);
  font: 500 13px/22px var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  letter-spacing: .02em;
}

.storefront-form .storefront-form__label .required {
  margin-left: 3px;
  color: var(--storefront-color-required, #e95144);
}

.storefront-form .storefront-form__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid var(--storefront-color-field-border, #c7c7c7);
  border-radius: var(--storefront-field-radius, 0);
  outline: 0;
  background-color: var(--storefront-color-surface, #fff);
  box-shadow: none;
  color: var(--storefront-color-ink, #232323);
  font: 400 13px/22px var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  letter-spacing: .02em;
  transition: var(--storefront-field-transition, border-color 300ms ease, background-color 300ms ease);
}

.storefront-form textarea.storefront-form__input {
  height: 216px;
  min-height: 216px;
  resize: vertical;
}

.storefront-form .storefront-form__input::placeholder {
  color: var(--storefront-color-placeholder, #868686);
  opacity: 1;
}

.storefront-form .storefront-form__input:focus {
  border-color: var(--storefront-color-field-border, #c7c7c7);
  outline: 0;
  box-shadow: none;
}

.storefront-form .storefront-form__input:disabled,
.storefront-form .storefront-form__input[readonly] {
  background-color: var(--storefront-color-surface, #fff);
  cursor: auto;
  opacity: 1;
}

.storefront-form .storefront-form__input[aria-invalid="true"],
.storefront-form .storefront-field.is-error .storefront-form__input {
  border-color: var(--storefront-color-error, #d93333);
}

.storefront-form .storefront-form__actions {
  box-sizing: border-box;
  width: 100%;
  margin: 5px 0 0;
  padding: 0;
}

.storefront-form .storefront-form__submit {
  display: inline-block;
  box-sizing: border-box;
  width: 227px;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: 10px 15px;
  border: 1px solid var(--storefront-color-primary-border, #000);
  border-radius: var(--storefront-button-radius, 0);
  outline: 0;
  background: var(--storefront-color-control-primary, #ffc107);
  box-shadow: none;
  color: var(--storefront-color-control-primary-text, #000);
  font: 700 14px/22px var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  transition: var(--storefront-button-transition, all 500ms ease);
  cursor: pointer;
}

.storefront-form .storefront-form__submit:not(:disabled):hover,
.storefront-form .storefront-form__submit:not(:disabled):active {
  border-color: var(--storefront-color-primary-border, #000);
  background: var(--storefront-color-control-primary-hover, #000);
  color: var(--storefront-color-control-primary-hover-text, #ffc107);
}

.storefront-form .storefront-form__submit:focus,
.storefront-form .storefront-form__submit:focus-visible {
  border-color: var(--storefront-color-primary-border, #000);
  outline: none;
  outline-offset: 0;
  background: var(--storefront-color-control-primary, #ffc107);
  box-shadow: none;
  color: var(--storefront-color-control-primary-text, #000);
}

.storefront-form .storefront-form__submit:disabled {
  border-color: var(--storefront-color-primary-border, #000);
  background: var(--storefront-color-control-primary, #ffc107);
  color: var(--storefront-color-control-primary-text, #000);
  cursor: default;
  opacity: .6;
}

.storefront-form__status {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 22px;
  padding: 13px 15px;
  border: 0;
  border-radius: 0;
  background: var(--storefront-color-info-bg, #fff2dd);
  color: var(--storefront-color-info, #202020);
  font: 400 13px/22px var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  letter-spacing: .02em;
}

.storefront-form__status.is-error {
  background: var(--storefront-color-error-bg, #fceeee);
  color: var(--storefront-color-error, #d93333);
}

.storefront-form__status.is-success {
  background: var(--storefront-color-success-bg, #dff0d8);
  color: var(--storefront-color-success, #5a5a5a);
}

.storefront-form-section .storefront-form-section__email-placeholder {
  display: block;
  color: var(--storefront-color-ink, #232323);
  font: 400 13px/22px var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  overflow-wrap: anywhere;
}

/*
 * Reusable full-width form block. Runtime providers supply semantic fields and
 * behavior; this theme owns only the neutral visual roles used by those forms.
 */
.storefront-form-block {
  display: block;
  box-sizing: border-box;
  width: calc(100vw - 35px);
  max-width: none;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: calc((100% - calc(100vw - 35px)) / 2);
  padding: 0;
  color: rgb(35, 35, 35);
  font: 400 0/22px Montserrat;
  letter-spacing: normal;
  text-align: start;
}

.storefront-form-block,
.storefront-form-block *,
.storefront-form-block *::before,
.storefront-form-block *::after {
  box-sizing: border-box;
}

.storefront-form-block .storefront-form-block__title {
  width: 100%;
  margin: 57px 0 58px;
  padding: 0;
  color: rgb(35, 35, 35);
  font: 700 30px/28px Jost;
  letter-spacing: .5px;
  text-align: center;
  text-transform: uppercase;
}

.storefront-form-block .storefront-form-block__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font: 400 0/22px Montserrat;
  letter-spacing: normal;
  text-align: start;
  vertical-align: baseline;
}

.storefront-form-block .storefront-form {
  width: 100%;
  max-width: none;
  margin: 22px 0 0;
  padding: 0;
  color: rgb(35, 35, 35);
  font: 400 0/22px Montserrat;
  letter-spacing: normal;
  text-align: start;
}

.storefront-form-block .storefront-form .storefront-field {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: 400 0/22px Montserrat;
  letter-spacing: normal;
  text-align: start;
}

.storefront-form-block .storefront-form .storefront-field + .storefront-field {
  margin-top: 17px;
}

.storefront-form-block .storefront-form .storefront-form__label {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  color: rgb(35, 35, 35);
  font: 500 13px/22px Montserrat;
  letter-spacing: .02em;
  text-align: left;
  text-transform: capitalize;
  transition: all;
}

.storefront-form-block .storefront-form .storefront-form__required,
.storefront-form-block .storefront-form .storefront-form__label .required {
  margin-left: 0;
  color: rgb(241, 21, 47);
}

.storefront-form-block .storefront-form .storefront-form__input {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 48px;
  min-height: 0;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid rgb(199, 199, 199);
  border-radius: 0;
  outline-color: rgb(35, 35, 35);
  outline-style: none;
  outline-width: 3px;
  background: rgb(255, 255, 255);
  box-shadow: none;
  color: rgb(35, 35, 35);
  font: 400 13px/22px Montserrat;
  letter-spacing: .02em;
  text-align: left;
  transition: all;
  vertical-align: baseline;
}

.storefront-form-block .storefront-form textarea.storefront-form__input {
  height: 216px;
  min-height: 216px;
  resize: vertical;
}

.storefront-form-block .storefront-form .storefront-form__actions {
  width: 100%;
  margin: 23px 0 0;
  padding: 0;
  font: 400 0/22px Montserrat;
  letter-spacing: normal;
  text-align: start;
}

.storefront-form-block .storefront-form .storefront-form__submit {
  display: block;
  width: 227px;
  max-width: none;
  min-width: 130px;
  height: 44px;
  min-height: 0;
  margin: 5px auto 0 0;
  padding: 10px 15px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 0;
  outline-color: rgb(0, 0, 0);
  outline-style: none;
  outline-width: 3px;
  background: rgb(255, 193, 7);
  box-shadow: none;
  color: rgb(0, 0, 0);
  font: 700 14px/22px Montserrat;
  letter-spacing: .05em;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  text-transform: uppercase;
  transition: color .5s cubic-bezier(.25, .46, .45, .94), background .5s cubic-bezier(.25, .46, .45, .94), background-color .5s cubic-bezier(.25, .46, .45, .94), border .5s cubic-bezier(.25, .46, .45, .94);
}

.storefront-form-block .storefront-form .storefront-form__submit:not(:disabled):hover,
.storefront-form-block .storefront-form .storefront-form__submit:not(:disabled):active {
  border-color: rgb(0, 0, 0);
  background: rgb(0, 0, 0);
  color: rgb(255, 193, 7);
}

.storefront-form-block .storefront-form .storefront-form__input:focus,
.storefront-form-block .storefront-form .storefront-form__submit:focus,
.storefront-form-block .storefront-form .storefront-form__submit:focus-visible {
  outline-style: none;
  box-shadow: none;
}

.storefront-form-block .storefront-form .storefront-form__protection[hidden],
.storefront-form-block .storefront-form .storefront-form__status[hidden] {
  display: none !important;
}

@media (min-width: 551px) {
  .storefront-form-block .storefront-form-block__title {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 552px) and (max-width: 767px) {
  .storefront-form-block {
    width: calc(100vw - 45px);
    margin-left: calc((100% - calc(100vw - 45px)) / 2);
  }
}

@media (min-width: 768px) {
  .storefront-form-block {
    width: min(1200px, calc(100vw - 15px));
    max-width: none;
    margin-right: 0;
    margin-left: calc((100% - min(1200px, calc(100vw - 15px))) / 2);
  }

  .storefront-form-block .storefront-form-block__item {
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    vertical-align: top;
  }
}

@media (max-width: 551px) {
  .storefront-form-block .storefront-form .storefront-form__submit {
    height: 38px;
    padding: 7px 15px;
  }
}

/* Reusable asynchronous form state presentation. */
.storefront-form {
  position: relative;
  isolation: isolate;
}

.storefront-form::before,
.storefront-form::after {
  position: absolute;
  z-index: 20;
  content: "";
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.storefront-form::before {
  inset: 0;
  background: rgba(35, 35, 35, .12);
}

.storefront-form::after {
  top: calc(50% - 22px);
  left: calc(50% - 22px);
  width: 44px;
  height: 44px;
  border: 3px solid rgba(35, 35, 35, .2);
  border-top-color: var(--storefront-color-ink, #232323);
  border-radius: 50%;
}

.storefront-form.is-submitting,
.storefront-form[aria-busy="true"],
.storefront-form[data-storefront-form-state="submitting"] {
  cursor: progress;
}

.storefront-form.is-submitting::before,
.storefront-form.is-submitting::after,
.storefront-form[aria-busy="true"]::before,
.storefront-form[aria-busy="true"]::after,
.storefront-form[data-storefront-form-state="submitting"]::before,
.storefront-form[data-storefront-form-state="submitting"]::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.storefront-form.is-submitting::before,
.storefront-form[aria-busy="true"]::before,
.storefront-form[data-storefront-form-state="submitting"]::before {
  pointer-events: auto;
}

.storefront-form.is-submitting::after,
.storefront-form[aria-busy="true"]::after,
.storefront-form[data-storefront-form-state="submitting"]::after {
  animation: storefront-form-spinner 700ms linear infinite;
}

@keyframes storefront-form-spinner {
  to {
    transform: rotate(1turn);
  }
}

.storefront-form-success {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  width: 100%;
  max-width: 100%;
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--storefront-color-success, #4c7a4c);
  border-radius: 0;
  background: var(--storefront-color-success-bg, #edf7ef);
  color: var(--storefront-color-ink, #232323);
  font: 400 13px/22px var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  letter-spacing: .02em;
  opacity: 1;
  transform: translateY(0);
  animation: storefront-form-success-enter 360ms ease-out both;
  transition: opacity 300ms ease, transform 300ms ease;
}

@keyframes storefront-form-success-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.storefront-form-success__icon {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--storefront-color-success, #4c7a4c);
  color: var(--storefront-color-surface, #fff);
}

.storefront-form-success__icon::after {
  position: absolute;
  top: 8px;
  left: 11px;
  width: 8px;
  height: 13px;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  content: "";
  transform: rotate(45deg);
}

.storefront-form-success__message {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
}

.storefront-form-success.is-dismissing {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

@media (max-width: 551px) {
  .storefront-form::after {
    top: calc(50% - 19px);
    left: calc(50% - 19px);
    width: 38px;
    height: 38px;
  }

  .storefront-form-success {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    margin-top: 17px;
    padding: 13px 15px;
  }

  .storefront-form-success__icon {
    width: 28px;
    height: 28px;
  }

  .storefront-form-success__icon::after {
    top: 7px;
    left: 10px;
    width: 7px;
    height: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storefront-form::before,
  .storefront-form::after,
  .storefront-form-success,
  .storefront-form-success.is-dismissing {
    animation: none;
    transition: none;
  }
}