.page-layout-checkout,
.checkout-cart-index {
    .block.crosssell {
        display: none;
    }
    .block.cart-wishlist {
        margin-top: 20px;
        .block-content {
            margin-top: 15px;
            .product-items {
                display: flex;
                @include phone {
                    flex-direction: column;
                }
                .product-item {
                    display: flex;
                    @include phone {
                        margin-bottom: 30px;
                        &:not(:first-child) {
                            padding-top: 30px;
                            border-top: 1px solid $grayfilet;
                        }
                    }
                    .product-item-photo {
                        @include phone {
                            max-width: 80px;
                        }
                    }
                    .product-item-options {
                        @include phone {
                            display: none;
                        }
                    }
                    .product-item-details {
                        display: flex;
                        flex-direction: column;
                        padding: 0px 20px;
                        .product-name {
                            font-size: 17px;
                            margin: 0;
                            margin-top: 5px;
                            @include phone {
                                margin-top: 0;
                            }
                        }
                        span {
                            font-size: 15px;
                            line-height: 23px;
                            color: $gray4;
                        }
                        a.action.tocart {
                            margin-top: 15px;
                            text-decoration: underline;
                            span {
                                color: $darkgray;
                            }
                        }
                        .price-box {
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
    .select2-container--open {
        display: block;
        z-index: 100000 !important;
    }

    input[type='text'],
    input[type='password'],
    input[type='url'],
    input[type='tel'],
    input[type='search'],
    input[type='number'],
    input[type='datetime'],
    input[type='email'],
    .select2-container--default .select2-selection--single {
        background: transparent;
    }

    .select2-container {
        max-width: 100% !important;
    }

    .page-main {
        @include phone {
            overflow-x: hidden;
            padding-left: 16px;
            padding-right: 16px;
        }
    }

    .header .logo-image {
        @include phone {
            width: 114px !important;
            height: 37px !important;
        }
    }
    .page-header {
        position: sticky
    }
    .mobile-locator,
    .nav-toggle {
        display: none;
    }
    header {
        @include phone {
            height: 72px;
            background: white;
        }
        .header.content {
            margin: 0;
            @include phone {
                padding-top: 15px;
            }
        }
    }
    .main-wrapper {
        margin-top: 0;
    }
    .cart-heading {
        display: flex;
        align-items: center;
        color: $darkgray;
        .number-class {
            margin-left: 8px;
            margin-bottom: 4px;
            color: $gray4;
        }
    }

    .cart-banner {
        color: $darkgray;
        background-color: #f9f9f9;
        padding: 10px 16px;
        margin-bottom: 15px;
    }

    .opc-sidebar {
        margin-top: 0;
        margin-right: -20px;
        margin-bottom: 0;
        padding: 10px 15px 20px;
        float: none;
        background: white;
        box-sizing: content-box;
        max-width: 40%;
        @include phone {
            padding: 20px;
            max-width: 100%;
            width: 100%;
            margin: 0 -20px;
        }
        .cart-summary {
            float: none;
            width: 100%;
            background: transparent;
            border: 1px solid $grayfilet;
            margin: 0;
            @include phone {
                border: none;
            }
        }
        .modal-inner-wrap {
            margin: 0 auto;
            @include phone {
                max-width: 100%;
            }
        }
        .modal-header {
            display: none;
        }
    }
    .opc-container-cart,
    .opc-container {
        padding-top: 10px;
        padding-bottom: 20px;
        padding-right: 20px;
        width: 100%;
        @include phone {
            position: relative;
            z-index: 1;
            padding: 80px 0 20px;
        }
    }
    .opc-container-cart {
        padding: 10px 0% 0;
        @include phone {
            flex-direction: column;
            margin: 0;
            padding: 0;
        }
    }
    .opc-wrapper {
        float: none;
        width: auto;
        display: flex;
        padding: 0;
        justify-content: space-between;
        @include phone {
            flex-direction: column;
            padding: 0;
            margin: 0;
        }
        #checkoutSteps {
            max-width: 450px;
            width: 100%;
            color: $darkgray;
            @include phone {
                max-width: none;
            }
        }
    }
    .opc-checkout-cart-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        @include phone {
            max-width: none;
        }
        .form-cart {
            width: 100%;
        }
    }
    .cart-container {
        margin-bottom: 0;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        @include phone {
            flex-direction: column;
        }
    }
    .opc-block-summary {
        background: transparent;
    }
    .authentication-wrapper {
        display: none;
    }

    // Reset native styles images
    .product-image-photo {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
    }

    .product-item-options {
        display: flex;
        flex-direction: row;
        margin-bottom: 18px;
        @include phone {
            margin-bottom: 8px;
            flex-direction: column;
        }

        .product-item-qty {
            display: flex;
            flex-direction: row;
        }

        .item-options {
            display: flex;
            flex-direction: row;
            @include phone {
                flex-direction: column;
            }
            margin-right: 15px;
            > :not(:first-child) {
                margin-left: 15px;
                @include phone {
                    margin-left: 0;
                }
            }
        }
    }

    .product-item-qty-control {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        padding-left: 5px;

        .qty-icon-trigger {
            padding: 5px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            @include icon-svg('arrow_down_black', 16px, 16px);
        }

        input[type='number'] {
            line-height: 24px;
            max-width: 24px;
            text-align: center;
        }
    }

    .product-item-qty-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10;
        background: white;
        border: 1px solid #DDD;
        box-shadow: 10px 10px 15px 0 #0000000D;
        min-width: 60px;
        margin-top: 5px;

        ul {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
                padding: 8px 6px;
                cursor: pointer;
                text-align: center;
                margin-bottom: 0;

                &.qty-selected,
                &:hover {
                    background-color: #FAFAFA;
                }
            }
        }
    }
}

//STEP ONE

.checkout-cart-index .opc-sidebar:before {
    content: none;
}

//CART
#shopping-cart-table {
    table tr:nth-child(odd) td {
        background: transparent;
    }
}

.opc-checkout-cart-wrapper {
    .cart.table-wrapper thead .col:not(.item) {
        @include phone {
            display: table-cell;
        }
    }
    .cart.table-wrapper .items thead + .item,
    .cart.table-wrapper .items > .item {
        border: none;
    }
    .cart.table-wrapper .product-item-photo {
        padding-right: 0;
    }
    .cart.table-wrapper {
        table tr:nth-child(odd) td {
            background: transparent;
        }
        th {
            &.col {
                padding: 0 0 45px;
            }
        }
        .cart.item:not(:last-child) {
            border-bottom: 1px solid $grayfilet;
        }
        .cart.item .item-info .col {
            padding-top: 20px;
            @include deskB2;
            span {
                @include deskB2;
            }
            &.subtotal {
                padding-right: 20px;
            }
        }
        .col {
            padding-top: 0;
            &.photo {
                padding: 0 0 60px;
                width: 168px;
                @include phone {
                    padding: 0 0 15px;
                    width: 80px;
                }
                .product-item-photo {
                    top: 0;
                    position: relative;
                    @include phone {
                        max-width: 80px;
                    }
                }
                .image {
                    width: 100%;
                    height: auto;
                }
            }
            &.actions {
                padding-right: 0;
            }
            .item-actions {
                margin-top: 5px;
                display: flex;
                row-gap: 4px;
                justify-content: space-between;
                @include phone {
                    flex-direction: column;
                    align-items: flex-end;
                }
                .item-action {
                    padding-right: 3px;
                }
            }
        }
        .item .col.item {
            padding: 0 0 0 23px;
            display: flex;
            flex-direction: column;
            min-height: 120px;
            @include phone {
                padding: 0 0 16px 16px;
            }
        }
        .product-item-name {
            margin-top: 5px;
            margin-bottom: 0;
            @include phone {
                font-size: 1.2rem;
            }
            a {
                color: $darkgray;
            }
        }
        .product-material {
            color: $gray4;
            margin-bottom: 18px;
            @include phone {
                margin-bottom: 8px;
            }
        }
        .item-action {
            a.action-delete {
                display: block;
                background: url(../images/icons/bin.svg) center no-repeat;
                height: 20px;
                width: 20px;
            }
        }
        .item-options {
            margin-bottom: 0;
            dt,
            dd {
                color: $darkgray;
                font-size: 15px;
                font-weight: normal;
            }
            dt {
                &.no-after {
                    &:after {
                        content: '';
                        display: none;
                    }
                }
            }
        }
        .col.qty {
            @include phone {
                padding-left: 46px;
                &:before {
                    content: none;
                }
            }
            .input-text {
                margin-top: 0;
                width: 40px;
                background: transparent;
            }
        }
        .subtotal {
            @include phone {
                float: right;
                margin-top: 18px;
                margin-bottom: 30px;
                &[data-th]:before {
                    content: none !important;
                }
            }
        }
        .price-including-tax .price,
        .price-excluding-tax .price {
            font-weight: normal;
            color: $darkgray;
            white-space: nowrap;
        }
    }
    .cart-gift-wrapper {
        display: flex;
        white-space: nowrap;
        gap: 40px;
        .cart-gifts {
            width: 100%;
        }
        .continue {
            @extend .btn-link;
            margin-top: 10px;
            cursor: pointer;
            @include phone {
                display: none;
            }
            &::before {
                @include icon-svg('arrow_left_black', 16px, 16px);
                content: '';
                margin-right: 8px;
                vertical-align: middle;
            }
        }
    }
}

.cart-empty {
    .continue {
        &::before {
            @include icon-svg('arrow_left_black', 16px, 16px);
            content: '';
            margin-right: 8px;
            vertical-align: middle;
        }
    }
}

//GIFTS
.gift-item-block {
    @include phone {
        border: none;
    }
    .content {
        border: none;
        padding: 0;
    }
    .control {
        @include phone {
            margin: 0;
        }
    }
    .check-gift {
        display: flex;
        align-items: center;
        .name-gift {
            font-size: 15px;
            color: $darkgray;
        }
        .price-gift {
            margin-left: auto;
        }
    }
    .name-gift {
        @include phone {
            font-size: 1.2rem;
        }
    }
    .price-gift {
        color: $gray4;
        font-size: 15px;
        margin-left: auto;
        @include phone {
            align-self: flex-end;
        }
    }
    .control {
        float: none;
    }
}

.gift-message-block {
    .control {
        @include phone {
            margin: 0;
        }
    }
    .control input[type='checkbox'] + label {
        @include phone {
            font-size: 1.2rem;
        }
    }
}

.gift-wrap-block {
    @include phone {
        margin-bottom: 0;
    }
    .gift-item-block {
        display: flex;
        align-items: center;
    }
    .control input[type='checkbox'] + label {
        display: flex;
    }
}

.cart-container .cart-gift-item {
    width: 100%;
}

.gift-message {
    .gift-options-title {
        font-size: 1.4rem;
        letter-spacing: 0.14rem;
    }
    .gift-message {
        height: 48px;
        padding: 8px;
    }
}

.gift-message-block {
    .gift-options .actions-toolbar {
        .action-cancel {
            margin-top: 0;
            border-radius: 0;
            background: black;
            border: 1px solid black;
            color: white;
            text-transform: uppercase;
            font-weight: 700;
            padding: 18px 25px;
            font-size: 1.1rem;
            letter-spacing: 0.25rem;
            text-decoration: none;
            &:focus,
            &:active,
            &:hover {
                background: $gray3;
                border-color: $gray3;
                text-decoration: none;
            }
        }
    }
}

//SUMMARY STEP ONE
.checkout-cart-index {
    .cart-summary {
        max-width: 350px;
        padding: 32px 22px 16px;
        margin: 0 auto;
        @include phone {
            padding: 0;
            max-width: 100%;
        }
    }
    .cart-totals {
        border: none;
        .totals.shipping .value {
            display: none;
        }
    }

    .alma-cart-eligibility {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        padding: 4px 15px 8px !important;
        background: $graybutton;
        border-color: $graybutton;
        .alma-cart-eligibility--message {
            color: $darkgray;
            @include deskUI3;
        }
        img {
            width: 53px;
            height: auto;
        }
    }

    .cart-container .checkout-methods-items {
        margin-top: 30px;
        text-align: left;

        .action.primary {
            font-size: 1.1rem;
            letter-spacing: 0.25rem;
            text-align: center;
        }
        .multicheckout {
            display: none;
        }
        .item + .item {
            margin-top: 16px;
        }
    }
    .columns .column.main {
        padding-bottom: 0;
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
}

//MODAL ADDRESS
.page-layout-checkout,
.checkout-cart-index {
    .modal-popup {
        .modal-content,
        .modal-footer,
        .modal-header {
            position: relative;
            padding: 20px;
        }
        header {
            height: auto;
        }
        .modal-title {
            border: none;
            padding-bottom: 0;
            font-size: 2rem;
            letter-spacing: 0.2rem;
            margin-bottom: 0px;
            font-weight: 500;
            text-transform: none;
        }
    }
}

//STEP TWO AND THREE
//OPC

.opc-wrapper .step-title,
.opc-block-shipping-information .shipping-information-title,
.opc-block-summary > .title,
.checkout-agreements-items .checkout-agreements-item-title {
    border: none;
    padding-bottom: 0;
    font-size: 2rem;
    letter-spacing: 0.2rem;
    margin-bottom: 24px;
    font-weight: 500;
    text-transform: none;
    @include phone {
        font-size: 1.6rem;
        letter-spacing: 0.16rem;
        margin-bottom: 20px;
    }
}

.checkout-agreements-block .checkout-agreement.field.required {
    margin-bottom: 0;

    label {
        padding-left: 28px;

        &::after {
            content: "";
            margin-left: 0;
        }

        button {
            color: $darkgray;
            text-decoration: none;
            text-align: left;

            span {
                text-transform: none;
                font-size: 17px;
                font-family: 'Jost';
                font-weight: 400;
                line-height: 17px;
                letter-spacing: 0;
            }
        }
    }
}

.page-layout-checkout,
.checkout-cart-index {
    .fieldset {
        display: flex;
        flex-wrap: wrap;
    }
    .field {
        width: 100%;
        margin: 0 0 10px;
        &.required,
        &._required {
            & > label {
                display: inline-block;
                text-align: left;
            }
        }
        &:not(.choice) > .label {
            display: inline-block;
            text-align: left;
        }
        .control {
            margin: 0;
            margin-top: 8px;
            .control {
                margin-top: 0;
            }
        }
        .additional {
            margin: 0;
        }
    }
    .street {
        .control {
            label,
            .label {
                display: none !important;
            }
        }
    }

    .shipping-address-items {
        display: flex;
        flex-direction: column;
    }

    .shipping-address-item {
        width: 100%;
        color: $gray4;
        display: flex;
        border: none;
        padding: 0;
        @include deskB2;
        .address-street {
            color: $darkgray;
        }
        a {
            color: $gray4;
            @include deskB2;
        }
        &:before, &:after {
            content: none !important;
        }
    }
}

#checkout-step-shipping {
    .action-show-popup {
        @extend .btn-link;
        margin: 0;
        text-align: left;
        & > span:before {
            content: none;
        }
    }
}

//SHIPPING METHODS
.table-checkout-shipping-method {
    width: 100%;
    min-width: auto;
    & tbody {
        td {
            color: $darkgray;
            background: transparent !important;
            border: none;
            padding-bottom: 8px;
            padding-top: 8px;
            @include phone {
                padding-right: 0;
            }
        }
        tr {
            &.row-method {
                box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
                @include phone {
                    display: flex;
                    flex-wrap: wrap;
                }
                &:nth-child(odd) td,
                td {
                    background: white;
                }
            }
            &.row-space {
                td {
                    padding: 0;
                }
                .col-space {
                    height: 20px;
                }
            }
        }
    }
    .method_title {
        color: black;
        text-transform: uppercase;
        font-size: 1.3rem;
        letter-spacing: 0.13rem;
        font-weight: 600;
        @include phone {
            font-size: 1.1rem;
        }
    }
    .col-shipping-radio {
        @include phone {
            width: 50px !important;
        }
    }
    .col-shipping-method {
        @include phone {
            width: calc(100% - 50px);
        }
    }
    .col-price,
    .carrier_title {
        font-size: 1.4rem;
        letter-spacing: 0.13rem;
        font-weight: 500;
        @include phone {
            font-size: 1.2rem;
        }
    }
    .col-price {
        padding-right: 0;
        text-align: right;
        white-space: nowrap;
        .price {
            @include phone {
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
            }
        }
    }
    .col-method {
        padding-left: 12px;
    }
    .col-method-name {
        @include deskB1;
    }
    .col-carrier {
        @include deskB2;
        color: $gray4;
    }
    .control {
        margin: 0;
        input[type='radio'] + label {
            margin: 2px 4px;
            padding-left: 0;
        }
    }
}

#opc-shipping_method {
    @include phone {
        background: white;
        padding: 20px;
        margin: 0 -20px;
    }
}

#shipping-method-buttons-container {
    margin-top: 40px;
    &.actions-toolbar .action.primary {
        @include deskBtn1;
        margin: 0;
        width: 100%;
    }
}

.checkout-shipping-method {
    .actions-toolbar > .primary {
        float: none;
        width: 100%;
    }
    .step-title {
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid $grayfilet;
    }
}

//SIDEBAR

.step-number {
    background: black;
    color: white;
    display: inline-block;
    text-align: center;
    line-height: 18px;
    vertical-align: text-top;
    font-size: 0.99rem;
    width: 18px;
    height: 18px;
    border-radius: 100%;
}

.opc-block-summary {
    padding: 0;
    display: flex;
    flex-direction: column;
    .title {
        display: inline-block;
        margin-right: 8px;
        text-transform: none;
    }
    .summary-title {
        order: 1;
    }
    .items-in-cart {
        order: 2;
        .title {
            display: none;
        }
        .product {
            display: flex;
            &.options {
                flex-direction: column;
                .optiondetail {
                    display: flex;
                }
            }
        }
        margin-bottom: 0;
    }
    .minicart-items-wrapper {
        @include phone {
            margin: 0;
            padding-right: 0;
            overflow: hidden;
            max-height: none;
        }
    }
    .table-totals {
        order: 3;
        margin-top: 16px;
        position: relative;
        .totals .label {
            @include deskB1;
        }
    }
    .product-subtitle {
        font-weight: 400;
        color: $gray1;
        font-size: 1.2rem;
        letter-spacing: 0;
        display: block;
        margin-bottom: 10px;
    }
    .product-image-container {
        width: auto !important;
        height: auto !important;
    }
    .product-image-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f5f5f5;
    }
    .minicart-items {
        .product-item {
            padding-bottom: 16px;
            border-bottom: 1px solid $grayfilet;
            &:not(:first-child) {
                padding-top: 16px;
                border-top: none;
            }
        }
        .product-item-details {
            display: flex;
            padding-left: 20px;
            width: 100%;
        }
        .label {
            padding: 0 5px 0 0;
        }
    }
}

.opc-estimated-wrapper {
    display: none;
}

//PAYMENT STEP:

.checkout-payment-method {
    .payment-method-title {
        margin: 0;
        position: relative;
        padding: 15px 0;
        @include tablet {
            display: flex;
            align-items: center;
        }
        input[type='radio'] {
            @include customRadio;
            @include phone {
                position: absolute;
                left: 22px;
                top: 20px;
            }
        }
        label {
            display: flex;
            align-items: center;
            @include deskB1;

            > *:first-child {
                margin-right: 20px;
            }

            > * + span,
            > * + .payment-label {
                @include phone {
                    margin-top: 10px;
                }
            }

            .payment-label {
                display: flex;
                flex-direction: column;
            }
            span {
                @include phone {
                    display: block;
                    margin-top: 2px;
                    letter-spacing: 0.11rem;
                }
            }
            .action-help {
                color: $gray1;
                font-size: 1.3rem;
                text-decoration: underline;
                text-transform: none;
                letter-spacing: 0;
                margin-left: 0;
            }
        }
    }
    .payment-methods {
        margin: 0;
    }
    .payment-method-content {
        padding: 0;
    }
    .checkout-billing-address {
        label {
            font-size: 1.4rem;
            letter-spacing: 0.14rem;
        }
    }
    .actions-toolbar {
        margin-bottom: 15px;
    }
    .discount-code {
        display: none;
    }
    .payment-method-billing-address {
        padding-top: 10px;
    }
    .payment-method + .payment-method .payment-method-title {
        border-top: none;
    }
    @include phone {
        .step-title {
            padding: 0;
        }
    }
}

.payment-method {
    .allowed-payment-icon {
        margin-right: 18px;
    }
    .payment-method-checkbox {
        margin-left: 64px;
        font-size: 1.4rem;
        letter-spacing: 0.14rem;
        font-weight: 500;
        @include phone {
            margin-left: 0;
            font-size: 1.3rem;
            letter-spacing: 0.13rem;
        }
        .label {
            a {
                text-decoration: underline;
            }
            @include phone {
                font-size: 1.3rem;
                letter-spacing: 0.13rem;
            }
        }
    }

    &.alma.payment-method {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-top: 1px solid #cccccc;

        .alma-method-logo {
            position: initial;
            padding: 0;
        }

        .payment-method-title {
            border: none;
            flex-basis: fit-content;
            max-width: 80%;
        }

        .payment-method-content {
            @include phone {
                padding: 0 20px;
            }

            .alma-plan-choices label {
                width: initial;
                margin-right: 10px;
            }
        }
    }
}

.checkout-payment-method
    .payment-method-content
    > .actions-toolbar
    > .primary
    .action.primary {
    font-size: 1.1rem;
    letter-spacing: 0.25rem;
}

.checkout-payment-method .actions-toolbar {
    .primary {
        margin-top: 12px;
        float: none;
        width: 100%;
        .action {
            margin-top: 0;
        }
    }
}

.payment-method .payment-method-title .label .allowed-payment-icon {
    float: none;
    margin-top: 0;
    .payment-icon {
        &.payment_method_monetico_cb {
            @extend .cb-icon;
            content: none;
        }
        &.payment_method_monetico_american {
            @extend .american-icon;
        }
    }
}

.checkout-payment-method {
    .checkout-privacy-policy-container {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid $grayfilet;

        a {
            text-decoration: underline;
        }
    }
}

//SUMMARY SUBTOTALS
.cart-summary .table.totals,
.opc-block-summary .table-totals {
    & > tfoot > tr > th,
    & > tfoot > tr > td {
        padding: 0;
        line-height: 2.4rem;
    }

    & > tbody > tr > th,
    & > tbody > tr > td {
        background: transparent;
        padding: 0;
        padding-bottom: 8px;
    }
}

.cart-summary .table.totals {
    th,
    td,
    .label,
    .amount > span {
        @include deskB2;
        color: $gray4;
    }
    .label {
        padding: 0;
    }
    tr.grand.totals {
        td span,
        th strong {
            @include deskB2;
            color: $darkgray;
        }
    }
}

.opc-block-summary .table-totals {
    th,
    td,
    .label,
    .amount > span {
        @include deskB1;
    }

    tr.grand.totals {
        th span,
        td span {
            color: $darkgray;
        }
    }
}

//SHIPPING INFORMATION SIDEBAR

.opc-block-shipping-information {
    margin-top: 50px;
    padding: 0;
    .shipping-information-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        .title {
            @include deskH2;
            &:after {
                content: ':';
            }
        }
    }
    .action {
        @extend .btn-link;
    }
    .ship-to {
        .shipping-address {
            display: flex;
            flex-direction: column;
        }
        span {
            @include deskBody2;
        }
        margin-bottom: 30px;
        color: $gray4;
        .address-name {
            @include deskHeading4;
            color: $darkgray;
            margin-bottom: 10px;
        }
        .address-phone {
            margin-top: 10px;
        }
    }
}

//EMPTY CART
.checkout-cart-index {
    .cart-empty {
        color: $gray4;
        a {
            text-decoration: underline;
        }
    }
}

//CHECKOUT SUCCESS & FAILURE
.checkout-onepage-failure,
.checkout-onepage-success {
    .page-main {
        margin: 0 auto;
        padding: 0;
    }
    .bg-banner {
        margin-top: -$header-height;
        display: flex;
        justify-content: center;
        .banner-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .page-title {
            @include deskH1;
        }
        a.continue {
            margin-top: 21px;
            @include deskBtn1;
        }
        p {
            @include deskB1;
            margin-bottom: 0;
        }
    }
}

.checkout-onepage-failure {
    .column.main {
        padding-bottom: 0;
    }
    .failure-bg {
        min-height: 832px;
        align-items: flex-end;
        background-image: url('../images/banners/failure-banner.jpeg');
        background-size: cover;
        @include phone {
            background-image: url('../images/banners/failure-banner-mobile.jpeg');
        }
        .failure-content {
            margin-bottom: 70px;
            padding: 0 16px;
            text-align: center;
        }
    }
}

.checkout-onepage-success {
    .success-bg {
        min-height: 584px;
        align-items: center;
        background-image: url('../images/banners/success-banner.jpg');
        background-size: cover;
        @include phone {
            background-image: url('../images/banners/success-banner-mobile.jpg');
        }
    }
    .checkout-success {
        text-align: center;
        padding: 60px 16px;
        color: white;
        margin-top: $header-height;
        a.continue {
            color: white !important;
        }

    }
    .success-content {
        padding: 50px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .actions-toolbar {
            margin-top: 20px;
        }
    }
    .registration-content {
        padding: 30px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .action.primary {
            margin-top: 20px;
        }
    }
}

.checkout-container {
    .steps-cart {
        display: flex;
        justify-content: center;
        border-top: 1px solid $grayfilet;
        border-bottom: 1px solid $grayfilet;
        padding: 23px;
        gap: 40px;
        .step {
            display: inline-flex;
            @include deskBtn1;
            color: $gray4;
            &::before {
                content: '';
                margin-right: 12px;
                @include icon-svg('ellipse-empty', 12px, 12px);
            }
            &.step-selected {
                color: $darkgray;
                &::before {
                    @include icon-svg('ellipse', 12px, 12px);
                }
            }
        }
    }
    .opc-container {
        margin-top: 45px;
        padding: 0;
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 120px;
        @include phone {
            padding: 15px;
        }
        .opc-wrapper {
            .form-login {
                margin: 0;
                #customer-email-fieldset {
                    border-bottom: 1px solid $grayfilet;
                    margin: 0;
                    padding-bottom: 22px;

                }
            }
            #checkout-step-shipping {
                .note, .note span {
                    margin-top: 0;
                    padding-bottom: 6px;
                    color: $gray4;
                    @include deskB2;
                }
            }
            .step-title {
                @include deskH2;
            }
            .opc-summary-wrapper {
                margin: 0;
                padding: 0;
                max-width: 450px;
                padding-right: 15px;
                width: 100%;
                position: sticky;
                top: 20px;
                max-height: fit-content;
                @include phone {
                    max-width: none;
                }
            }
            #co-payment-form hr {
                display: none;
            }
        }
        .opc-block-summary {
            color: $darkgray;
            .title {
                @include deskH2;
            }
            .minicart-items {
                margin: 0;
                .minicart-items-wrapper {
                    padding: 0;
                    padding-top: 24px;
                    max-height: none;
                    margin: 0;
                    &.gift {
                        padding-top: 16px;
                    }
                }
                .product-item-name {
                    @include DeskBody1;
                    margin: 0;
                }
                .product-subtitle {
                    margin: 0;
                }
                .product.options {
                    margin-top: 10px;
                }
                .product-subtitle,
                .details-qty span,
                .optiondetail span {
                    @include deskB2;
                }
                span.price {
                    @include deskB1;
                }
                .details-summary {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    margin-top: 10px;
                }
                .product-item-inner {
                    margin: 0;
                    .product-item-name-block {
                        padding: 0;
                    }
                }
            }
            .product-image-wrapper {
                width: 168px;
                height: 168px;
            }
            .table-totals {
                th,
                td {
                    @include deskB1;
                }
                .totals.sub {
                    th,
                    td {
                        color: $darkgray;
                    }
                    .amount {
                        padding-bottom: 8px;
                    }
                }
                .totals.shipping {
                    .title {
                        @include deskB2;
                        padding-bottom: 16px;
                    }
                    .amount {
                        color: $gray4;
                    }
                }
                .mark {
                    padding: 0;
                }
                .grand.totals {
                    border-top: 1px solid $grayfilet;
                    .mark,
                    .amount {
                        padding-top: 15px;
                    }
                }
            }
        }
    }
}
.page-layout-checkout {
    .page-main {
        padding: 0;
    }
    .shipping-address-item {
        .control {
            margin: 0;

            input[type='radio'] + label {
                margin: 2px 4px;
                padding-left: 25px;
            }

            input[type="radio"]:checked + label:after {
                opacity: 0;
                -moz-transform: scale(0);
                -ms-transform: scale(0);
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            input[type="radio"][checked="true"] + label:after {
                filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
                opacity: 1;
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        .edit-address-link {
            margin-top: 5px;

            span {
                text-transform: none;
                color: $darkgray;
                text-decoration: underline;
            }
        }
    }
}

.steps-cart > :last-child.step-selected + .opc-container .block.items-in-cart {
    display: none;
}