/* Optional child-theme skin for the Omnisend Back in Stock form. */
.storefront-back-in-stock__form > [id^="omnisend-embedded-v2-"],
.storefront-back-in-stock__form > div[id^="omnisend-form-"],
.storefront-back-in-stock__form div[class*="-content"],
.storefront-back-in-stock__form div[class*="-content-inner"] {
    background: transparent;
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100%;
}

.storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"] {
    background: transparent;
    display: block;
    height: auto;
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100%;
}

.storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"]
    > div[class*="-section-"] {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    height: var(--storefront-button-height, 44px);
    margin: 0;
    padding: 0;
    width: 100%;
}

.storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"]
    > div[class*="-section-"] > .omnisend-mobile-container {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
}

.storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"]
    > div[class*="-section-"] > .omnisend-mobile-container:has(input[type="email"]) {
    flex: 1 1 auto;
}

.storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"]
    > div[class*="-section-"] > .omnisend-mobile-container:has(button) {
    flex: 0 0 200px;
    min-width: 200px;
}

.storefront-back-in-stock__form .omnisend-mobile-container:has(input[type="email"])
    div[class*="-field-container-"] {
    box-sizing: border-box;
    padding: 0;
    width: 100%;
}

.storefront-back-in-stock__form .omnisend-mobile-container:has(button)
    div[class*="-action-container-"] {
    box-sizing: border-box;
    display: flex;
    height: var(--storefront-button-height, 44px);
    padding: 0;
    width: 100%;
}

.storefront-back-in-stock__form input[type="email"] {
    background: #fff;
    border:1px solid #c7c7c7;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    color:#232323;
    flex: none;
    font:400 13px/22px "Montserrat", Arial, sans-serif;
    height: var(--storefront-button-height, 44px);
    margin: 0;
    max-height: var(--storefront-button-height, 44px);
    max-width: 380px;
    min-height: var(--storefront-button-height, 44px);
    min-width: 0;
    padding: var(--storefront-button-padding, 10px 15px);
    width: 100%;
}

.storefront-back-in-stock__form button {
    align-self: stretch;
    background:var(--storefront-color-primary, #ffc107);
    border:1px solid var(--storefront-color-primary-border, #000);
    border-radius:0;
    box-shadow: none;
    box-sizing: border-box;
    color:var(--storefront-color-primary-text, #000);
    flex: none;
    font: 700 14px/22px var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
    height: var(--storefront-button-height, 44px);
    margin: 0;
    max-height: var(--storefront-button-height, 44px);
    min-height: var(--storefront-button-height, 44px);
    min-width: 0;
    padding: var(--storefront-button-padding, 10px 15px);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
    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);
    width: 100%;
}

.single-product .summary .storefront-back-in-stock__form button,
.single-product .summary .storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"] button {
    border-radius: var(--storefront-button-radius, 0) !important;
}

.storefront-back-in-stock__form button:hover,
.storefront-back-in-stock__form button:active {
    background:var(--storefront-color-primary-hover, #000);
    border-color:var(--storefront-color-primary-border, #000);
    color:var(--storefront-color-primary-hover-text, #ffc107);
}

.storefront-back-in-stock__form button:focus,
.storefront-back-in-stock__form button:focus-visible {
    background:var(--storefront-color-primary, #ffc107);
    border-color:var(--storefront-color-primary-border, #000);
    color:var(--storefront-color-primary-text, #000);
}

/* Keep the Omnisend field stable while the button states remain visible. */
.single-product .summary .storefront-back-in-stock__form input[type="email"]:hover,
.single-product .summary .storefront-back-in-stock__form input[type="email"]:active,
.single-product .summary .storefront-back-in-stock__form input[type="email"]:focus,
.single-product .summary .storefront-back-in-stock__form input[type="email"]:focus-visible {
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    outline-offset: 0 !important;
    transform: none !important;
}

.single-product .summary .storefront-back-in-stock__form button:hover,
.single-product .summary .storefront-back-in-stock__form button:active {
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    text-decoration: none !important;
    transform: none !important;
}

.single-product .summary .storefront-back-in-stock__form button:focus,
.single-product .summary .storefront-back-in-stock__form button:focus-visible {
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    outline-offset: 0 !important;
    text-decoration: none !important;
    transform: none !important;
}

.storefront-back-in-stock__form button:is(:disabled, [aria-disabled="true"], .disabled) {
    background: var(--storefront-color-primary, #ffc107);
    border-color: var(--storefront-color-primary-border, #000);
    color: var(--storefront-color-primary-text, #000);
    opacity: .6;
    pointer-events: none;
}

.storefront-back-in-stock__form button:is(.is-loading, .loading, [aria-busy="true"]) {
    position: relative;
    background: var(--storefront-color-primary, #ffc107);
    border-color: var(--storefront-color-primary-border, #000);
    color: transparent;
    font-size: 0;
    opacity: 1;
    pointer-events: none;
    transition: none;
}

.storefront-back-in-stock__form button:is(.is-loading, .loading, [aria-busy="true"])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 46%;
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-color: #fc0 #4dd4c6 #f00 #f6f6f6;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: storefront-omnisend-submit-spin 1.4s linear infinite;
}

@keyframes storefront-omnisend-submit-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 550px) {
    .storefront-back-in-stock__form {
        height: 86px;
        min-height: 86px;
    }

    .storefront-back-in-stock__form > div[id^="omnisend-form-"],
    .storefront-back-in-stock__form div[class*="-content"],
    .storefront-back-in-stock__form div[class*="-content-inner"],
    .storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"] {
        height: 86px;
    }

    .storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"]
        > div[class*="-section-"] {
        align-content: flex-start;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 0;
        height: 86px;
        max-height: 86px;
        min-height: 86px;
        width: 100%;
    }

    .storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"]
        > div[class*="-section-"] > .omnisend-mobile-container:has(input[type="email"]) {
        flex: 0 0 min(380px, 100%);
        max-width: 380px;
        width: min(380px, 100%);
    }

    .storefront-back-in-stock__form form[id^="omnisend-form-"][id$="-submit-form"]
        > div[class*="-section-"] > .omnisend-mobile-container:has(button) {
        flex: 0 0 100%;
        min-width: 0;
        width: 100%;
    }

    .storefront-back-in-stock__form button {
        min-width: 0;
        width: 100%;
    }

    .storefront-back-in-stock__form input[type="email"],
    .storefront-back-in-stock__form button,
    .storefront-back-in-stock__form .omnisend-mobile-container:has(button) div[class*="-action-container-"] {
        height: 38px;
        max-height: 38px;
        min-height: 38px;
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-back-in-stock__form button {
        transition-duration: .01ms;
    }
}