/* =========================================================
   SKS Account Auth Switcher
   WooCommerce My Account login/register
   New namespace: sks-account-auth-*
   ========================================================= */


/* Anti-flash before JS init */
body:not(.logged-in) #customer_login:not(.sks-account-auth-ready) {
    opacity: 0;
    visibility: hidden;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.18s ease;
}


/* Woo wrapper */
body:not(.logged-in) .elementor-widget-woocommerce-my-account .woocommerce {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* Main container */
body:not(.logged-in) #customer_login.sks-account-auth-ready {
    --sks-account-auth-primary: var(--skswf-color-primary, var(--e-global-color-primary, #1A1A1A));
    --sks-account-auth-accent: var(--skswf-color-accent, var(--e-global-color-accent, #1963CB));
    --sks-account-auth-text: var(--skswf-color-text, var(--e-global-color-text, #5F5E5E));
    --sks-account-auth-muted: var(--skswf-color-muted, var(--e-global-color-secondary, #A1A1AA));
    --sks-account-auth-soft: var(--skswf-color-surface-alt, #F5F5F5);
    --sks-account-auth-dark: var(--skswf-color-primary, #18181B);
    --sks-account-auth-border: var(--skswf-color-border, rgba(24, 24, 27, 0.10));
    --sks-account-auth-radius: var(--skswf-radius-large, 28px);

    position: relative;
    order: 1;
    display: block !important;

    width: 100%;
    max-width: 1120px;
    min-height: 600px;
    margin: 0 auto;
    overflow: hidden;

    background: var(--skswf-color-surface, #ffffff);
    border: var(--skswf-border-width, 1px) solid var(--sks-account-auth-border);
    border-radius: var(--sks-account-auth-radius);
    box-shadow: var(--skswf-shadow-medium, 0 24px 70px rgba(24, 24, 27, 0.10));
    perspective: 1400px;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready::after {
    display: none !important;
    content: none !important;
}


/* Desktop impact blur */
body:not(.logged-in) #customer_login.sks-account-auth-ready::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;

    display: block;
    width: 120px;
    height: 420px;

    border-radius: 999px;
    background: rgba(25, 99, 203, 0.10);
    filter: blur(28px);
    opacity: 0;
    pointer-events: none;

    transform: translate(-50%, -50%) scaleX(0.4);
}

body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active::before {
    animation: sksAccountAuthColumnImpact 0.72s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sksAccountAuthColumnImpact {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.2);
    }

    32% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scaleX(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(1.35);
    }
}


/* Desktop columns */
body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column1,
body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column2 {
    position: absolute;
    top: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    float: none !important;
    clear: none !important;
    width: 50% !important;
    max-width: none !important;
    min-height: 100%;
    margin: 0 !important;
    padding: 56px 64px !important;

    border: 0 !important;
    background: var(--skswf-color-surface, #ffffff) !important;
    box-shadow: none !important;

    will-change: opacity, transform, filter;
    transform-style: preserve-3d;

    transition:
        opacity 0.42s ease,
        visibility 0.42s ease,
        transform 0.68s cubic-bezier(.22, 1, .36, 1),
        filter 0.42s ease !important;
}


/* Login visible by default */
body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column1 {
    left: 50%;
    z-index: 3;

    opacity: 1 !important;
    visibility: visible !important;
    filter: blur(0) !important;
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg) !important;
    pointer-events: auto !important;
}


/* Register hidden by default */
body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column2 {
    left: 0;
    z-index: 2;

    opacity: 0 !important;
    visibility: hidden !important;
    filter: blur(12px) !important;
    transform: translate3d(74px, 0, -80px) scale(0.94) rotateY(-8deg) !important;
    pointer-events: none !important;
}


/* Desktop register active */
body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active .u-column1 {
    opacity: 0 !important;
    visibility: hidden !important;
    filter: blur(12px) !important;
    transform: translate3d(-74px, 0, -80px) scale(0.94) rotateY(8deg) !important;
    pointer-events: none !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active .u-column2 {
    opacity: 1 !important;
    visibility: visible !important;
    filter: blur(0) !important;
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg) !important;
    pointer-events: auto !important;
}


/* Desktop moving panel */
body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 50%;
    height: 100%;
    padding: 56px;
    overflow: hidden !important;

    color: var(--skswf-color-on-accent, #ffffff);

    background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,0.20) 0 0, transparent 34%),
        radial-gradient(circle at 84% 82%, rgba(255,255,255,0.14) 0 0, transparent 28%),
        linear-gradient(145deg, var(--sks-account-auth-accent), #124FA6 42%, var(--sks-account-auth-dark) 100%) !important;

    background-size: auto !important;
    background-position: center !important;
    filter: none !important;

    will-change: transform;
    transition:
        transform 0.78s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.35s ease !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active .sks-account-auth-panel {
    transform: translateX(100%);
    box-shadow: 0 26px 70px rgba(24, 24, 27, 0.18) !important;
}


/* Panel decoration */
body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel::before,
body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel::after {
    content: "";
    position: absolute;
    z-index: 0 !important;
    border-radius: 999px;
    pointer-events: none;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel::before {
    width: 420px !important;
    height: 420px !important;
    right: -180px !important;
    top: -160px !important;

    background: rgba(255, 255, 255, 0.12) !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel::after {
    width: 260px !important;
    height: 260px !important;
    left: -120px !important;
    bottom: -110px !important;

    background: rgba(248, 206, 71, 0.18) !important;
}


/* Panel content */
body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__inner {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 100%;
    max-width: 360px;
    min-height: 360px;
    overflow: hidden;
    text-align: center;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__content {
    grid-area: 1 / 1;
    width: 100%;
    max-width: 360px;
    text-align: center;

    will-change: opacity, transform, filter;

    transition:
        opacity 0.34s ease,
        transform 0.48s cubic-bezier(.2,.8,.2,1),
        filter 0.34s ease,
        visibility 0.34s ease !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__content--login {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    filter: blur(0) !important;
    pointer-events: auto !important;
    transition-delay: 0.22s !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__content--register {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(18px) scale(0.98) !important;
    filter: blur(7px) !important;
    pointer-events: none !important;
    transition-delay: 0s !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active .sks-account-auth-panel__content--login {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-18px) scale(0.98) !important;
    filter: blur(7px) !important;
    pointer-events: none !important;
    transition-delay: 0s !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active .sks-account-auth-panel__content--register {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    filter: blur(0) !important;
    pointer-events: auto !important;
    transition-delay: 0.22s !important;
}


/* Panel typography */
body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    margin: 0 0 18px;
    padding: 6px 12px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.92);

    font-family: var(--skswf-font-family-body, var(--e-global-typography-text-font-family, "Inter"));
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__title {
    margin: 0 0 14px;

    color: var(--skswf-color-on-accent, #ffffff);
    font-family: var(--skswf-font-family-heading, var(--e-global-typography-2aee83c-font-family, "Space Grotesk"));
    font-size: clamp(1.55rem, 1.25rem + 1vw, 2.1rem);
    font-weight: var(--skswf-font-weight-heading, 700);
    line-height: 1.08;
    text-transform: uppercase;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__text {
    max-width: 310px;
    margin: 0 auto 24px;

    color: rgba(255,255,255,0.78);
    font-family: var(--skswf-font-family-body, var(--e-global-typography-text-font-family, "Inter"));
    font-size: 15px;
    line-height: 1.6;
}


/* Form headings */
body:not(.logged-in) #customer_login.sks-account-auth-ready h2 {
    margin: 0 0 24px !important;

    color: var(--sks-account-auth-primary);
    font-family: var(--skswf-font-family-heading, var(--e-global-typography-2aee83c-font-family, "Space Grotesk"));
    font-size: clamp(1.55rem, 1.25rem + 1vw, 2.1rem);
    font-weight: var(--skswf-font-weight-heading, 700);
    line-height: 1.15;
    text-transform: uppercase;
}


/* Forms */
body:not(.logged-in) #customer_login.sks-account-auth-ready form.woocommerce-form {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready p {
    margin: 0 0 var(--skswf-spacing-md, 16px);
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .form-row {
    width: 100%;
    padding: 0 !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready label {
    display: block;
    margin: 0 0 var(--skswf-spacing-sm, 8px);

    color: var(--sks-account-auth-primary);
    font-family: var(--skswf-font-family-body, var(--e-global-typography-text-font-family, "Inter"));
    font-size: var(--skswf-font-size-small, 14px);
    font-weight: 700;
    line-height: 1.35;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .required {
    color: var(--sks-account-auth-accent);
}


/* Inputs */
body:not(.logged-in) #customer_login.sks-account-auth-ready input.input-text,
body:not(.logged-in) #customer_login.sks-account-auth-ready input.woocommerce-Input {
    width: 100% !important;
    min-height: var(--skswf-input-height, 50px);
    padding: 0 var(--skswf-input-padding-x, 16px) !important;

    border: var(--skswf-border-width, 1px) solid var(--sks-account-auth-border) !important;
    border-radius: var(--skswf-input-radius, 999px) !important;
    background: var(--sks-account-auth-soft) !important;
    color: var(--sks-account-auth-primary) !important;

    font-family: var(--skswf-font-family-body, var(--e-global-typography-text-font-family, "Inter"));
    font-size: var(--skswf-font-size-base, 15px);
    font-weight: 500;
    line-height: var(--skswf-input-height, 50px);

    outline: none !important;
    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready input.input-text:focus,
body:not(.logged-in) #customer_login.sks-account-auth-ready input.woocommerce-Input:focus {
    border-color: var(--sks-account-auth-accent) !important;
    background: var(--skswf-color-surface, #ffffff) !important;
    box-shadow: 0 0 0 4px rgba(25, 99, 203, 0.12) !important;
}


/* Password field */
body:not(.logged-in) #customer_login.sks-account-auth-ready .password-input {
    position: relative;
    display: block;
    width: 100%;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .password-input input {
    padding-right: 48px !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .show-password-input {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;

    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;

    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;

    color: var(--sks-account-auth-muted);
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;

    transform: translateY(-50%) !important;
    cursor: pointer;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .show-password-input:hover,
body:not(.logged-in) #customer_login.sks-account-auth-ready .show-password-input:focus,
body:not(.logged-in) #customer_login.sks-account-auth-ready .show-password-input:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}


/* Remember + lost password */
body:not(.logged-in) #customer_login.sks-account-auth-ready .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;

    color: var(--sks-account-auth-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .woocommerce-form-login__rememberme input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--sks-account-auth-accent);
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .lost_password {
    margin: 14px 0 0 !important;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready a {
    color: var(--sks-account-auth-accent);
    font-weight: 700;
    text-decoration: none;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready a:hover {
    text-decoration: underline;
}


/* Form buttons */
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-button,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-Button,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-form-login__submit,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-form-register__submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--skswf-button-padding-y, 0.85rem) var(--skswf-button-padding-x, 1.25rem) !important;

    border: var(--skswf-border-width, 1px) solid var(--skswf-color-accent, var(--e-global-color-accent, #1963CB)) !important;
    border-radius: var(--skswf-button-radius, var(--radius-sm, 999px)) !important;
    background-color: var(--skswf-color-accent, var(--e-global-color-accent, #1963CB)) !important;
    color: var(--skswf-color-on-accent, #ffffff) !important;

    font-family: var(--skswf-font-family-body, var(--e-global-typography-3ca9570-font-family, "Inter")) !important;
    font-size: var(--e-global-typography-3ca9570-font-size, 15px) !important;
    font-weight: var(--skswf-button-font-weight, var(--e-global-typography-3ca9570-font-weight, 700)) !important;
    text-transform: var(--skswf-button-text-transform, var(--e-global-typography-3ca9570-text-transform, none)) !important;
    line-height: var(--e-global-typography-3ca9570-line-height, 1.2) !important;
    letter-spacing: var(--e-global-typography-3ca9570-letter-spacing, 0) !important;

    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-button:hover,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-Button:hover,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-form-login__submit:hover,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-form-register__submit:hover,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-button:focus,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-Button:focus,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-form-login__submit:focus,
body:not(.logged-in) #customer_login.sks-account-auth-ready button.woocommerce-form-register__submit:focus {
    border-color: var(--skswf-color-primary, var(--e-global-color-primary, #1A1A1A)) !important;
    background-color: var(--skswf-color-primary, var(--e-global-color-primary, #1A1A1A)) !important;
    color: var(--skswf-color-on-accent, #ffffff) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}


/* Panel CTA */
body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--skswf-button-padding-y, 0.85rem) var(--skswf-button-padding-x, 1.25rem) !important;

    border: var(--skswf-border-width, 1px) solid rgba(255, 255, 255, 0.42) !important;
    border-radius: var(--skswf-button-radius, var(--radius-sm, 999px)) !important;
    background-color: transparent !important;
    color: var(--skswf-color-on-accent, #ffffff) !important;

    font-family: var(--skswf-font-family-body, var(--e-global-typography-3ca9570-font-family, "Inter")) !important;
    font-size: var(--e-global-typography-3ca9570-font-size, 15px) !important;
    font-weight: var(--skswf-button-font-weight, var(--e-global-typography-3ca9570-font-weight, 700)) !important;
    text-transform: var(--skswf-button-text-transform, var(--e-global-typography-3ca9570-text-transform, none)) !important;
    line-height: var(--e-global-typography-3ca9570-line-height, 1.2) !important;
    letter-spacing: var(--e-global-typography-3ca9570-letter-spacing, 0) !important;

    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__button:hover,
body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__button:focus,
body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__button:focus-visible {
    border-color: var(--skswf-color-on-accent, #ffffff) !important;
    background-color: var(--skswf-color-on-accent, #ffffff) !important;
    color: var(--skswf-color-accent, var(--e-global-color-accent, #1963CB)) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}


/* Registration info / privacy */
body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column2 > form > p:not(.form-row):not(.woocommerce-form-row),
body:not(.logged-in) #customer_login.sks-account-auth-ready .woocommerce-privacy-policy-text {
    margin: 0 0 16px;
    padding: var(--skswf-spacing-sm, 14px) var(--skswf-spacing-md, 16px);

    border: var(--skswf-border-width, 1px) solid rgba(25, 99, 203, 0.10);
    border-radius: var(--skswf-radius-medium, 18px);
    background: var(--skswf-color-surface-alt, #EEF3FA);
    color: var(--sks-account-auth-text);

    font-family: var(--skswf-font-family-body, var(--e-global-typography-text-font-family, "Inter"));
    font-size: var(--skswf-font-size-small, 13px);
    line-height: var(--skswf-line-height, 1.55);
}

body:not(.logged-in) #customer_login.sks-account-auth-ready .woocommerce-privacy-policy-text p {
    margin: 0;
}


/* =========================================================
   Mobile / tablet below 900px
   Vertical animation:
   default: login top, panel bottom
   active: panel top, register bottom
   ========================================================= */

@media (max-width: 899.98px) {
    body:not(.logged-in) #customer_login.sks-account-auth-ready {
        --sks-account-auth-mobile-panel-h: 45%;
        --sks-account-auth-mobile-form-h: 55%;

        max-width: 620px;
        min-height: clamp(760px, 112vh, 960px);
        padding: 0 !important;

        overflow: hidden !important;
        border-radius: 24px;
        perspective: 1200px;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready::before {
        content: "";
        position: absolute;
        top: var(--sks-account-auth-mobile-form-h);
        left: 50%;
        z-index: 9;

        display: block !important;
        width: 78%;
        height: 90px;

        border-radius: 999px;
        background: rgba(25, 99, 203, 0.10);
        filter: blur(26px);
        opacity: 0;
        pointer-events: none;

        transform: translate(-50%, -50%) scaleY(0.35);
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active::before {
        animation: sksAccountAuthRowImpact 0.72s cubic-bezier(.22, 1, .36, 1) both;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column1,
    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column2 {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        display: flex !important;
        flex-direction: column;
        justify-content: center;

        width: 100% !important;
        max-width: none !important;
        height: var(--sks-account-auth-mobile-form-h);
        min-height: 0 !important;

        margin: 0 !important;
        padding: 32px 34px !important;

        border: 0 !important;
        background: var(--skswf-color-surface, #ffffff) !important;
        box-shadow: none !important;

        overflow: auto;
        -webkit-overflow-scrolling: touch;

        will-change: opacity, transform, filter;
        transform-style: preserve-3d;

        transition:
            opacity 0.42s ease,
            visibility 0.42s ease,
            transform 0.68s cubic-bezier(.22, 1, .36, 1),
            filter 0.42s ease !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column1 {
        top: 0 !important;
        z-index: 3;

        opacity: 1 !important;
        visibility: visible !important;
        filter: blur(0) !important;
        transform: translate3d(0, 0, 0) scale(1) rotateX(0deg) !important;
        pointer-events: auto !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column2 {
        top: var(--sks-account-auth-mobile-panel-h) !important;
        z-index: 2;

        opacity: 0 !important;
        visibility: hidden !important;
        filter: blur(12px) !important;
        transform: translate3d(0, 56px, -70px) scale(0.95) rotateX(-6deg) !important;
        pointer-events: none !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active .u-column1 {
        opacity: 0 !important;
        visibility: hidden !important;
        filter: blur(12px) !important;
        transform: translate3d(0, -56px, -70px) scale(0.95) rotateX(6deg) !important;
        pointer-events: none !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active .u-column2 {
        opacity: 1 !important;
        visibility: visible !important;
        filter: blur(0) !important;
        transform: translate3d(0, 0, 0) scale(1) rotateX(0deg) !important;
        pointer-events: auto !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel {
        position: absolute !important;
        top: var(--sks-account-auth-mobile-form-h) !important;
        left: 0 !important;
        z-index: 10;

        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        height: var(--sks-account-auth-mobile-panel-h) !important;
        min-height: 0 !important;

        padding: 32px 24px !important;
        overflow: hidden !important;

        border-radius: 0 !important;
        transform: none !important;

        will-change: top;
        transition:
            top 0.78s cubic-bezier(.2,.8,.2,1),
            box-shadow 0.35s ease !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready.sks-account-auth-register-active .sks-account-auth-panel {
        top: 0 !important;
        transform: none !important;
        box-shadow: 0 26px 70px rgba(24, 24, 27, 0.18) !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__inner {
        width: 100%;
        max-width: 420px;
        height: 100%;
        min-height: 0 !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__content {
        transition:
            opacity 0.28s ease,
            transform 0.38s cubic-bezier(.2,.8,.2,1),
            filter 0.28s ease,
            visibility 0.28s ease !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__text {
        max-width: 340px;
    }
}

@keyframes sksAccountAuthRowImpact {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(0.2);
    }

    32% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scaleY(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(1.35);
    }
}


/* Small phones */
@media (max-width: 540px) {
    body:not(.logged-in) #customer_login.sks-account-auth-ready {
        --sks-account-auth-mobile-panel-h: 45%;
        --sks-account-auth-mobile-form-h: 55%;

        max-width: 100% !important;
        min-height: clamp(800px, 112vh, 960px);
        border-radius: 20px !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column1,
    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column2 {
        padding: 26px 18px !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel {
        padding: 26px 18px !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__eyebrow {
        margin-bottom: 12px;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__title {
        font-size: 1.35rem;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__text {
        margin-bottom: 18px;
        font-size: 14px;
        line-height: 1.5;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready h2 {
        margin-bottom: 18px !important;
        font-size: 1.35rem !important;
    }
}


/* Very small phones */
@media (max-width: 390px) {
    body:not(.logged-in) #customer_login.sks-account-auth-ready {
        --sks-account-auth-mobile-panel-h: 32%;
        --sks-account-auth-mobile-form-h: 68%;

        min-height: clamp(820px, 132vh, 1100px);
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column1,
    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column2 {
        padding: 22px 14px !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel {
        padding: 22px 14px !important;
    }

    body:not(.logged-in) #customer_login.sks-account-auth-ready input.input-text,
    body:not(.logged-in) #customer_login.sks-account-auth-ready input.woocommerce-Input {
        min-height: 48px;
        line-height: 48px;
    }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body:not(.logged-in) #customer_login.sks-account-auth-ready::before,
    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column1,
    body:not(.logged-in) #customer_login.sks-account-auth-ready .u-column2,
    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel,
    body:not(.logged-in) #customer_login.sks-account-auth-ready .sks-account-auth-panel__content {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}