/* KEY_CUSTOMER_LOGIN_COMPACT_POLISH_V1_START */

.customer-auth-page {
    padding: 52px 0 60px;
}

.customer-auth-page__area {
    padding: 0 !important;
}

.customer-auth-page .loginarea__col {
    margin-inline: auto;
}

.customer-auth-card {
    min-height: 0 !important;
    margin: 0 auto;
    padding: 38px 42px 34px !important;
    border: 1px solid rgba(32, 36, 34, 0.08);
    border-radius: 18px;
    background: #fffdfa;
    box-shadow: 0 18px 45px rgba(31, 42, 36, 0.08);
}

.customer-auth-card .loginarea__heading {
    margin-bottom: 26px;
    text-align: center;
}

.customer-auth-card .login__title {
    margin: 0 0 10px;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.35;
}

.customer-auth-card .login__description {
    max-width: 430px;
    margin: 0 auto;
    color: #575d59;
    font-size: 0.98rem;
    line-height: 1.9;
}

.customer-auth-field {
    width: 100%;
}

.customer-auth-field .form__label {
    display: block;
    margin: 0 0 8px;
    color: #242925;
    font-weight: 700;
    text-align: right;
}

.customer-auth-card .form-group {
    margin: 0;
}

.customer-auth-card .common__login__input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 16px !important;
    border: 1px solid rgba(36, 41, 37, 0.18) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #202420 !important;
    font-size: 1rem;
    text-align: left;
    box-shadow: none !important;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.customer-auth-card .common__login__input::placeholder {
    color: #8a908c;
    opacity: 1;
}

.customer-auth-card .common__login__input:focus {
    border-color: #2f8d57 !important;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(47, 141, 87, 0.13) !important;
}

.customer-auth-card .help-block {
    min-height: 20px;
    margin-top: 6px;
    color: #b42318;
    font-size: 0.86rem;
    text-align: right;
}

.customer-auth-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px !important;
}

.customer-auth-submit {
    min-width: 184px;
    min-height: 48px;
    border-radius: 999px;
}

/*
 * Keep the accepted global footer—including its About and social sections—
 * without changing the layout context of the global drawer or backdrop.
 * Only the login page section receives extra minimum height.
 */
.customer-auth-page--login {
    min-height: clamp(560px, 62svh, 820px);
}

@media (max-width: 767.98px) {
    .customer-auth-page--login {
        min-height: max(760px, 58svh);
    }
}

@media (max-width: 767.98px) {
    .customer-auth-page {
        padding: 28px 0 38px;
    }

    .customer-auth-page > .customer-auth-page__area > .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .customer-auth-card {
        padding: 28px 20px 24px !important;
        border-radius: 16px;
    }

    .customer-auth-card .loginarea__heading {
        margin-bottom: 22px;
    }

    .customer-auth-card .login__title {
        font-size: 1.8rem;
    }

    .customer-auth-card .login__description {
        font-size: 0.94rem;
        line-height: 1.85;
    }

    .customer-auth-card .common__login__input {
        min-height: 50px;
    }

    .customer-auth-actions {
        margin-top: 12px !important;
    }

    .customer-auth-submit {
        width: 100%;
        min-width: 0;
    }
}



/* KEY_CUSTOMER_LOGIN_FOOTER_CONTINUITY_V1_START */

/*
 * This stylesheet is registered only on the customer login route.
 *
 * The global footer already owns the correct grey surface. On short viewport
 * combinations, the document can extend a small distance beyond <main>,
 * exposing the normal page surface beneath the footer. Paint that document
 * remainder with the footer surface, while explicitly keeping the actual
 * page wrapper on the selected site surface.
 *
 * No flex, grid, fixed positioning or overflow rule is applied to
 * .main_wrapper, so the accepted global drawer/backdrop layout context stays
 * unchanged.
 */
html {
    min-height: 100%;
    background: var(--greyColor, #e7e7e7);
}

body.storefront-shared-shell {
    min-height: 100svh;
    background: var(--greyColor, #e7e7e7);
}

body.storefront-shared-shell .main_wrapper {
    background: var(--site-surface, #ffffff);
}

/*
 * Establish a formatting context so the final copyright text margin cannot
 * escape the footer box and reveal the page surface beneath it.
 */
body.storefront-shared-shell .footer {
    display: flow-root;
    margin-bottom: 0;
    background: var(--greyColor, #e7e7e7);
}

body.storefront-shared-shell .footer__bottom,
body.storefront-shared-shell .footer__bottom h5,
body.storefront-shared-shell .footer__bottom p {
    margin-bottom: 0;
}

/* KEY_CUSTOMER_LOGIN_FOOTER_CONTINUITY_V1_END */

/* KEY_CUSTOMER_LOGIN_COMPACT_POLISH_V1_END */

/* KEY_CUSTOMER_LOGIN_COMPACT_VIEWPORT_BUTTON_V2_START */

/*
 * The login route has one small card, so it must not reserve a large
 * percentage of the viewport before the shared footer.
 */
.customer-auth-page--login {
    min-height: 0 !important;
    padding: clamp(30px, 4.3vh, 48px) 0
        clamp(34px, 4.7vh, 54px) !important;
}

.customer-auth-page--login .customer-auth-card {
    margin-block: 0;
}

/*
 * The generic theme button builds its hover with independent pseudo-element
 * edges. They become visible as disconnected lines after the fill fades.
 * This route-specific button instead transitions as one real border box.
 */
.customer-auth-submit {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border:
        1px solid
        var(--site-primary, #d94f70) !important;
    background-color:
        var(--site-primary, #d94f70) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition:
        background-color 320ms ease,
        border-color 320ms ease,
        color 280ms ease,
        box-shadow 280ms ease,
        transform 180ms ease !important;
}

.customer-auth-submit::before,
.customer-auth-submit::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
}

.customer-auth-submit:hover,
.customer-auth-submit:focus-visible {
    border-color: var(--site-text, #222222) !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--site-text, #222222) !important;
    box-shadow: none !important;
    transform: none !important;
}

.customer-auth-submit:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--site-primary, #d94f70) 22%,
            transparent
        );
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .customer-auth-page--login {
        min-height: 0 !important;
        padding: 26px 0 32px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-auth-submit {
        transition-duration: 0.01ms !important;
    }
}

/* KEY_CUSTOMER_LOGIN_COMPACT_VIEWPORT_BUTTON_V2_END */

/* KEY_LOGIN_SWEEP_CONFLICT_ISOLATION_V2_START */

/*
 * Loaded after the global appearance stylesheet, so this final route rule
 * neutralizes the older instant/transparent customer-auth hover block and
 * reproduces the accepted Blogs sweep exactly.
 */
.customer-auth-page--login
.customer-auth-actions
.customer-auth-submit {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border:
        1px solid
        var(--site-primary, #d94f70) !important;
    border-radius: var(--site-radius, 8px) !important;
    background-color:
        var(--site-primary, #d94f70) !important;
    background-image:
        linear-gradient(
            var(--site-surface, #ffffff),
            var(--site-surface, #ffffff)
        ) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 0% 100% !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    will-change: background-size;
    transition:
        background-size 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 360ms ease,
        color 360ms ease !important;
}

.customer-auth-page--login
.customer-auth-actions
.customer-auth-submit::before,
.customer-auth-page--login
.customer-auth-actions
.customer-auth-submit::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    transform: none !important;
}

.customer-auth-page--login
.customer-auth-actions
.customer-auth-submit:hover,
.customer-auth-page--login
.customer-auth-actions
.customer-auth-submit:focus-visible {
    border-color:
        var(--site-primary, #d94f70) !important;
    background-color:
        var(--site-primary, #d94f70) !important;
    background-image:
        linear-gradient(
            var(--site-surface, #ffffff),
            var(--site-surface, #ffffff)
        ) !important;
    background-position: left center !important;
    background-size: 100% 100% !important;
    color:
        var(
            --site-primary-dark,
            var(--site-primary, #d94f70)
        ) !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
}

.customer-auth-page--login
.customer-auth-actions
.customer-auth-submit:focus-visible {
    outline: 2px solid var(--site-primary, #d94f70);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .customer-auth-page--login
    .customer-auth-actions
    .customer-auth-submit {
        transition-duration: 0.01ms !important;
    }
}

/* KEY_LOGIN_SWEEP_CONFLICT_ISOLATION_V2_END */