/* Modern login page */
.auth-page {
    padding: 64px 0 100px;
}

.auth-card {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    border: 1px solid #3D0B20;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 18px 45px rgba(35, 31, 32, .08);
}

.auth-card__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 450px;
    padding: 56px;
    background: #3D0B20;
    color: #fff;
}

.auth-kicker {
    margin-bottom: 16px;
    color: #E24285;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    line-height: 1.2;
    text-transform: uppercase;
}

.auth-card__intro h1 {
    margin: 0;
    color: #fff;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 68px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: .95;
}

.auth-card__intro p {
    max-width: 300px;
    margin: 22px 0 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
}

.auth-card__accent {
    width: 54px;
    height: 3px;
    margin-top: 32px;
    background: #E24285;
}

.auth-card__intro .auth-card__checkout-note {
    margin-top: 24px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.auth-card__content {
    padding: 56px;
}

.auth-form {
    margin: 0;
}

.auth-field {
    margin: 0 0 26px;
}

.auth-field__label {
    display: block;
    padding-bottom: 10px;
    color: #3D0B20;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    line-height: 1.2;
    text-transform: uppercase;
}

.auth-field__input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #231f20;
    border-radius: 0;
    background: #fff;
    color: #231f20;
    font-family: 'Roboto', Arial, sans-serif !important;
    font-size: 17px;
}

.auth-field__input:focus {
    outline: 2px solid rgba(61, 11, 32, .15);
    border-color: #3D0B20;
}

.auth-field .help-block {
    margin-top: 7px;
    color: #E24285;
    font-size: 13px;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 34px;
}

.auth-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid #3D0B20;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    transition: background-color .25s, border-color .25s, color .25s;
}

.auth-action--primary {
    width: 100%;
    background: #3D0B20;
    color: #fff;
    cursor: pointer;
}

.auth-action--primary:hover,
.auth-action--primary:focus {
    border-color: #E24285;
    background: #E24285;
    color: #fff;
}

.auth-action--guest {
    display: flex;
    width: 100%;
    margin-top: 20px;
    background: #fceaf1;
    border-color: #E24285;
    color: #3D0B20;
    font-size: 15px;
}

.auth-action--guest:hover,
.auth-action--guest:focus {
    background: #E24285;
    color: #fff;
}

.auth-action--checkout {
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    color: #3D0B20;
}

.auth-action--checkout span {
    color: #3D0B20;
    font-size: 22px;
    line-height: 1;
}

.auth-action--checkout:hover,
.auth-action--checkout:focus {
    border-color: #E24285;
    background: #E24285;
    color: #fff;
}

.auth-action--checkout:hover span,
.auth-action--checkout:focus span {
    color: #fff;
}

.auth-actions__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

.auth-action--secondary {
    border-color: #231f20;
    color: #231f20;
}

.auth-action--secondary:hover,
.auth-action--secondary:focus {
    border-color: #E24285;
    color: #E24285;
}

@media screen and (max-width: 800px) {
    .auth-card {
        grid-template-columns: 1fr;
    }

    .auth-card__intro {
        min-height: 0;
        padding: 42px 36px;
    }

    .auth-card__intro h1 {
        font-size: 58px;
    }

    .auth-card__content {
        padding: 42px 36px;
    }
}

@media screen and (max-width: 480px) {
    .auth-page {
        padding: 40px 0 60px;
    }

    .auth-card__intro,
    .auth-card__content {
        padding: 32px 22px;
    }

    .auth-card__intro h1 {
        font-size: 50px;
    }

    .auth-actions__links {
        grid-template-columns: 1fr;
    }
}


.sign-in-top.block { padding-top: 132px; background: #3D0B20; }
.sign-in-top .container { padding-top: 1px; padding-bottom: 28px; }
.sign-in-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; color: #fff; font-size: 14px; letter-spacing: 1px; line-height: 1.3; text-transform: uppercase; }
.sign-in-breadcrumbs a { color: #fff; }
.sign-in-breadcrumbs [aria-current] { color: #E24285; }
.auth-page { padding-top: 55px; }
.auth-card { grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr); }
.auth-card__intro { padding: 60px; }
.auth-card__content { padding: 60px; }
.auth-field__label { font-size: 18px; letter-spacing: 1px; }
.auth-field__input { height: 58px; font-size: 20px; }
.auth-field .help-block { font-size: 16px; }
.auth-action { min-height: 58px; font-size: 18px; }
.auth-actions__links .auth-action { min-height: 52px; font-size: 15px; }
.auth-card__intro .auth-card__checkout-note { font-size: 18px; }
.auth-login-success { margin-bottom: 24px; padding: 15px 18px; border-left: 4px solid #2b8052; background: #eef7f1; color: #225138; }
.auth-login-success strong { display: block; font-family: 'Roboto', Arial, sans-serif !important; font-size: 17px; font-weight: 700; }
.auth-login-success p { margin: 4px 0 0; font-family: 'Roboto', Arial, sans-serif !important; font-size: 16px; line-height: 1.45; }
.auth-reset-modal .modal-content { border: 1px solid #3D0B20; border-radius: 0; box-shadow: 0 18px 45px rgba(35, 31, 32, .18); font-family: 'Roboto', Arial, sans-serif; }
.auth-reset-modal .modal-header { align-items: flex-start; padding: 25px 28px 17px; border-bottom: 1px solid rgba(61, 11, 32, .12); }
.auth-reset-modal .modal-title { margin: 3px 0 0; color: #3D0B20; font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 32px; font-weight: 600; letter-spacing: 0 !important; line-height: 1.1; text-transform: none !important; }
.auth-reset-modal__eyebrow { color: #9d4867; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.auth-reset-modal .modal-body { height: auto !important; min-height: 0 !important; overflow-y: visible; padding: 22px 28px 28px; }
.auth-reset-modal__description { margin: 0 0 22px; color: #5d5558; font-family: 'Roboto', Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.auth-reset-modal .auth-field { margin-bottom: 18px; }
.auth-reset-modal .auth-field__label { padding-bottom: 7px; font-size: 14px; }
.auth-reset-modal .auth-field__input { width: 100%; max-width: none; height: 50px; margin-right: 0; box-sizing: border-box; font-size: 17px; }
.auth-reset-modal .auth-field__input::placeholder { color: #999 !important; font-family: 'Roboto', Arial, sans-serif !important; opacity: 1; }
.auth-reset-modal .auth-field .help-block { margin-top: 6px; font-size: 15px; line-height: 1.35; }
.auth-reset-modal__feedback { margin: 0 0 16px; color: #a32142; font-size: 15px; line-height: 1.4; }
.auth-reset-modal__feedback.is-success { color: #236b43; }
.auth-reset-modal__submit { width: 100%; }
.auth-reset-modal :is(.auth-reset-modal__eyebrow, .auth-reset-modal__description, .auth-field__label, .auth-field .help-block, .auth-reset-modal__feedback, .auth-reset-modal__submit) { font-family: 'Roboto', Arial, sans-serif !important; }
@media screen and (max-width: 575px) {
    .auth-reset-modal .modal-dialog { margin: 16px; }
    .auth-reset-modal .modal-header { padding: 22px 20px 15px; }
    .auth-reset-modal .modal-title { font-size: 27px; line-height: 1.1; }
    .auth-reset-modal .modal-body { padding: 19px 20px 22px; }
}
@media screen and (max-width: 960px) {
    .sign-in-top.block { padding-top: 115px; }
    .sign-in-breadcrumbs { justify-content: center; }
    .auth-page { padding: 40px 0 64px; }
    .auth-card { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); }
    .auth-card__intro, .auth-card__content { padding: 36px; }
}
@media screen and (max-width: 800px) { .auth-card { grid-template-columns: 1fr; } }
@media screen and (max-width: 480px) {
    .sign-in-top.block { padding-top: 160px; }
    .auth-page { padding: 28px 0 50px; }
    .auth-card__intro, .auth-card__content { padding: 30px 22px; }
}

/* Keep the customer sign-in fields consistent with the public checkout forms. */
.auth-login-page .auth-field {
    margin: 0 0 20px;
}

.auth-login-page .auth-field__label {
    display: block;
    padding: 0;
    margin: 0 0 9px;
    color: #3d0b20;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
}

.auth-login-page .auth-field__input {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 54px;
    height: auto;
    padding: 11px 14px;
    margin: 0;
    border: 1px solid #c9bbc1;
    border-radius: 4px;
    background: #fff;
    color: #30272b;
    font-family: 'Roboto', Arial, sans-serif !important;
    font-size: 18px;
    line-height: 1.4;
    box-shadow: none;
}

.auth-login-page .auth-field__input::placeholder {
    color: #8c8085;
    opacity: 1;
    font-family: 'Roboto', Arial, sans-serif !important;
    font-size: 16px;
}

.auth-login-page .auth-field__input::-webkit-input-placeholder {
    color: #8c8085;
    opacity: 1;
    font-family: 'Roboto', Arial, sans-serif !important;
    font-size: 16px;
}

.auth-login-page .auth-field__input::-moz-placeholder {
    color: #8c8085;
    opacity: 1;
    font-family: 'Roboto', Arial, sans-serif !important;
    font-size: 16px;
}

.auth-login-page .auth-field__input:-ms-input-placeholder {
    color: #8c8085;
    opacity: 1;
    font-family: 'Roboto', Arial, sans-serif !important;
    font-size: 16px;
}

.auth-login-page .auth-field__input:focus {
    border-color: #b82d67;
    outline: 2px solid rgba(226, 66, 133, .15);
    box-shadow: none;
}

.auth-login-page .auth-field__input:focus-visible {
    outline: 2px solid #b82d67;
    outline-offset: 3px;
}

.auth-login-page .auth-field.has-error .auth-field__input,
.auth-login-page .auth-field__input.is-invalid {
    border-color: #a92043;
    background: #fff9fa;
}

.auth-login-page .auth-field .help-block,
.auth-login-page .auth-field .invalid-feedback {
    display: block;
    margin: 7px 0 0;
    color: #a92043;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
}

.auth-login-page .auth-action--primary {
    display: flex;
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    border: 1px solid #3d0b20;
    border-radius: 0;
    background: #3d0b20;
    color: #fff;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
}

.auth-login-page .auth-action--primary:hover,
.auth-login-page .auth-action--primary:focus-visible {
    border-color: #e24285;
    background: #e24285;
    color: #fff;
}

.auth-login-page .auth-action--primary:focus-visible,
.auth-login-page .auth-action--secondary:focus-visible,
.auth-login-page .auth-action--guest:focus-visible {
    outline: 2px solid #b82d67;
    outline-offset: 3px;
}

.auth-login-page .auth-actions__links {
    column-gap: 12px;
    row-gap: 16px;
    margin-top: 16px;
}
