/* Custom color variables */
:root {
    --customBorderColor: #E9ECEF;
    --customBorderColorInput: #D9DDE1;
    --customColorPrimary: #0090D3;
    --customColorPrimaryHover: #007ab5;
    --customColorText: #212529;
    --customColorMuted: #7A7A7A;
    --customBgSubtle: #F5F5F5;
    --customBgButton: #EFF0F0;
    --customBorderColorCart: #0083C5;
    --customColorSuccess: #00B900;
}


/* Global edits */
body.product-template-default .single_add_to_cart_button,
body .add_to_cart_button {
    text-transform: uppercase;
}


/* Global hiding stuff */
body.woocommerce-cart .woocommerce-shipping-totals {
    .woocommerce-shipping-calculator,
    .woocommerce-shipping-methods {
        display: none;
    }
}

.widget_shopping_cart .woocommerce-mini-cart-item.mini_cart_item .remove {
    display: none;
}

.woocommerce {
    .woocommerce-message {
        outline: 0 !important;
    }
}

/* Cart styling */
body.woocommerce-cart {
    .site-content {

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

            @media (min-width: 1200px) {
                max-width: 1240px !important;
            }

            @media (max-width: 576px) {
                padding-top: 20px !important;
            }
        }
    }

    main .woocommerce {
        display: grid;
        grid-template-columns: 1fr min(330px, 100%);
        grid-template-areas:
        "notices notices"
        "form collaterals";
        column-gap: 50px;
        row-gap: 20px;

        @media (max-width: 992px) {
            grid-template-columns: 1fr;
            grid-template-areas:
            "notices"
            "form"
            "collaterals";
        }

        .wc-empty-cart-message {
            grid-column: 1 / -1;
        }

        h1.cart-title,
        .cart-collaterals .cart_totals h2 {
            margin-bottom: 30px;
            font-size: 26px;
            font-weight: 700;

            @media (max-width: 768px) {
                font-size: 22px;
            }
        }

        .woocommerce-notices-wrapper {
            grid-area: notices;
        }

        .woocommerce-cart-form {
            grid-area: form;

            .shop_table {
                thead,
                .product-price {
                    display: none;
                }

                &,
                tr,
                td {
                    border: none;
                    box-shadow: none;
                }

                .cart_item {
                    padding: 20px 0;
                    display: flex;
                    align-items: center;
                    gap: 30px;
                    border-bottom: 1px solid var(--customBorderColorCart);

                    @media (max-width: 768px) {
                        position: relative;
                        display: grid;
                        grid-template-columns: auto 1fr;
                        grid-template-rows: auto auto;
                        grid-template-areas:
                            "thumbnail name"
                            "subtotal quantity";
                        align-items: start;
                        gap: 10px 15px;
                    }

                    &:first-of-type {
                        border-top: 1px solid var(--customBorderColorCart);
                    }

                    .product-thumbnail {
                        padding: 10px;
                        width: 100px;
                        height: 100px;
                        border: 1px solid var(--customBorderColor);
                        border-radius: 5px;

                        @media (max-width: 768px) {
                            grid-area: thumbnail;
                            height: auto;
                            width: auto;
                            display: inline-block !important;

                            &::before {
                                display: none;
                            }
                        }
                    }

                    .product-name {
                        padding: 0;

                        @media (max-width: 768px) {
                            grid-area: name;
                            align-self: center;
                            text-align: left !important;
                            padding-right: 30px;

                            &::before {
                                display: none;
                            }
                        }

                        a {
                            font-size: 16px;
                            font-weight: 400;
                            color: var(--customColorMuted);

                            @media (max-width: 768px) {
                                font-size: 16px;
                            }
                        }
                    }

                    > * {
                        order: 1;
                    }

                    .product-quantity {
                        margin-left: auto;

                        @media (max-width: 768px) {
                            grid-area: quantity;
                            margin-left: 0;
                            justify-self: end;

                            &::before {
                                display: none;
                            }
                        }

                        .quantity {
                            display: flex !important;
                            align-items: center;
                            width: 112px;
                            border-color: var(--customBorderColor);
                            border-radius: 5px;

                            .minus,
                            .plus {
                                display: flex !important;
                                align-items: center;
                                justify-content: center;
                                width: 18px;
                                height: 18px;
                                border-radius: 100%;
                                transition: .3s;

                                &:hover {
                                    background-color: var(--customBorderColor);
                                }
                            }
                        }
                    }

                    .product-subtotal {
                        width: 90px;
                        font-family: "Roboto", sans-serif;
                        font-size: 16px;
                        font-weight: 700;
                        text-align: right;
                        color: var(--customColorText);

                        @media (max-width: 768px) {
                            grid-area: subtotal;
                            width: auto;
                            display: flex;
                            align-items: center;
                            gap: 5px;
                            align-self: center;
                            font-size: 16px;

                            &::before {
                                font-size: 16px;
                                font-weight: 400;
                                color: var(--customColorMuted);
                            }
                        }
                    }

                    .product-remove {
                        padding: 0;
                        order: 2;
                        display: flex;
                        align-items: center;

                        @media (max-width: 768px) {
                            position: absolute;
                            top: 20px;
                            right: 0;
                            order: unset;
                        }

                        a.remove {
                            display: block;
                            width: 38px;
                            height: 38px;
                            font-size: 0;
                            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuODEyOSA3LjAwODc1TDkuNzkzNTMgOUwxMS44MTI5IDEwLjk5MTNDMTEuODY5MSAxMS4wNDM5IDExLjkxMzkgMTEuMTA3NSAxMS45NDQ1IDExLjE3ODFDMTEuOTc1MiAxMS4yNDg3IDExLjk5MSAxMS4zMjQ5IDExLjk5MSAxMS40MDE5QzExLjk5MSAxMS40Nzg5IDExLjk3NTIgMTEuNTU1IDExLjk0NDUgMTEuNjI1N0MxMS45MTM5IDExLjY5NjMgMTEuODY5MSAxMS43NTk5IDExLjgxMjkgMTEuODEyNUMxMS43NjAzIDExLjg2NDYgMTEuNjk4IDExLjkwNTkgMTEuNjI5NSAxMS45MzM5QzExLjU2MDkgMTEuOTYxOSAxMS40ODc2IDExLjk3NjEgMTEuNDEzNSAxMS45NzU2QzExLjI2NiAxMS45NzUgMTEuMTI0NiAxMS45MTY0IDExLjAxOTggMTEuODEyNUw5LjAwMDQxIDkuNzkzMTNMNy4wMDkxNiAxMS44MTI1QzYuOTA0MzkgMTEuOTE2NCA2Ljc2Mjk3IDExLjk3NSA2LjYxNTQxIDExLjk3NTZDNi41NDEzOCAxMS45NzYxIDYuNDY3OTkgMTEuOTYxOSA2LjM5OTQ2IDExLjkzMzlDNi4zMzA5MyAxMS45MDU5IDYuMjY4NTkgMTEuODY0NiA2LjIxNjAzIDExLjgxMjVDNi4xMTEyNyAxMS43MDcxIDYuMDUyNDYgMTEuNTY0NSA2LjA1MjQ2IDExLjQxNTlDNi4wNTI0NiAxMS4yNjczIDYuMTExMjcgMTEuMTI0OCA2LjIxNjAzIDExLjAxOTRMOC4yMDcyOCA5TDYuMjE2MDMgNy4wMDg3NUM2LjEyMzg4IDYuOTAxMTUgNi4wNzU3MyA2Ljc2MjczIDYuMDgxMiA2LjYyMTE2QzYuMDg2NjYgNi40Nzk1OSA2LjE0NTM1IDYuMzQ1MyA2LjI0NTUzIDYuMjQ1MTJDNi4zNDU3MSA2LjE0NDk1IDYuNDggNi4wODYyNiA2LjYyMTU3IDYuMDgwNzlDNi43NjMxMyA2LjA3NTMyIDYuOTAxNTUgNi4xMjM0OCA3LjAwOTE2IDYuMjE1NjNMOS4wMDA0MSA4LjIwNjg4TDEwLjk5MTcgNi4yMTU2M0MxMS4wNDM3IDYuMTYxNzEgMTEuMTA1OSA2LjExODU3IDExLjE3NDcgNi4wODg2OEMxMS4yNDM0IDYuMDU4NzkgMTEuMzE3NCA2LjA0MjczIDExLjM5MjMgNi4wNDE0MkMxMS40NjczIDYuMDQwMTIgMTEuNTQxOCA2LjA1MzU5IDExLjYxMTUgNi4wODEwN0MxMS42ODEzIDYuMTA4NTQgMTEuNzQ0OSA2LjE0OTQ5IDExLjc5ODggNi4yMDE1N0MxMS44NTI4IDYuMjUzNjQgMTEuODk1OSA2LjMxNTgzIDExLjkyNTggNi4zODQ1OEMxMS45NTU3IDYuNDUzMzMgMTEuOTcxNyA2LjUyNzI5IDExLjk3MzEgNi42MDIyNUMxMS45NzQ0IDYuNjc3MiAxMS45NjA5IDYuNzUxNjggMTEuOTMzNCA2LjgyMTQzQzExLjkwNTkgNi44OTExOCAxMS44NjUgNi45NTQ4MyAxMS44MTI5IDcuMDA4NzVaTTE0LjU2OTIgMTQuNTY4OEMxMy40Njc4IDE1LjY3IDEyLjA2NDYgMTYuNDIgMTAuNTM3IDE2LjcyMzdDOS4wMDk0NCAxNy4wMjc1IDcuNDI2MDggMTYuODcxNSA1Ljk4NzE2IDE2LjI3NTVDNC41NDgyNCAxNS42Nzk0IDMuMzE4MzggMTQuNjcwMSAyLjQ1MzEgMTMuMzc1QzEuNTg3ODIgMTIuMDggMS4xMjU5OCAxMC41NTc1IDEuMTI1OTggOUMxLjEyNTk4IDcuNDQyNTEgMS41ODc4MiA1LjkxOTk5IDIuNDUzMSA0LjYyNDk3QzMuMzE4MzggMy4zMjk5NSA0LjU0ODI0IDIuMzIwNTkgNS45ODcxNiAxLjcyNDUzQzcuNDI2MDggMS4xMjg0NyA5LjAwOTQ0IDAuOTcyNDY3IDEwLjUzNyAxLjI3NjI2QzEyLjA2NDYgMS41ODAwNSAxMy40Njc4IDIuMzMgMTQuNTY5MiAzLjQzMTI1QzE1LjMwMDUgNC4xNjI1MyAxNS44ODA2IDUuMDMwNjkgMTYuMjc2NSA1Ljk4NjE5QzE2LjY3MjMgNi45NDE2OCAxNi44NzYgNy45NjU3OCAxNi44NzYgOUMxNi44NzYgMTAuMDM0MiAxNi42NzIzIDExLjA1ODMgMTYuMjc2NSAxMi4wMTM4QzE1Ljg4MDYgMTIuOTY5MyAxNS4zMDA1IDEzLjgzNzUgMTQuNTY5MiAxNC41Njg4Wk0xMy43NzYgNC4yMjQzOEMxMi44MzExIDMuMjgyNzIgMTEuNjI4MyAyLjY0MjE3IDEwLjMxOTYgMi4zODM2MkM5LjAxMDg2IDIuMTI1MDcgNy42NTQ4NyAyLjI2MDExIDYuNDIyODMgMi43NzE2OUM1LjE5MDggMy4yODMyNyA0LjEzNzk3IDQuMTQ4NDQgMy4zOTczMSA1LjI1Nzk3QzIuNjU2NjUgNi4zNjc0OSAyLjI2MTM2IDcuNjcxNiAyLjI2MTM2IDkuMDA1NjNDMi4yNjEzNiAxMC4zMzk3IDIuNjU2NjUgMTEuNjQzOCAzLjM5NzMxIDEyLjc1MzNDNC4xMzc5NyAxMy44NjI4IDUuMTkwOCAxNC43MjggNi40MjI4MyAxNS4yMzk2QzcuNjU0ODcgMTUuNzUxMSA5LjAxMDg2IDE1Ljg4NjIgMTAuMzE5NiAxNS42Mjc2QzExLjYyODMgMTUuMzY5MSAxMi44MzExIDE0LjcyODUgMTMuNzc2IDEzLjc4NjlDMTQuNDA1MyAxMy4xNTk4IDE0LjkwNDYgMTIuNDE0NiAxNS4yNDUzIDExLjU5NDJDMTUuNTg2IDEwLjc3MzcgMTUuNzYxNCA5Ljg5NDAyIDE1Ljc2MTQgOS4wMDU2M0MxNS43NjE0IDguMTE3MjMgMTUuNTg2IDcuMjM3NTggMTUuMjQ1MyA2LjQxNzFDMTQuOTA0NiA1LjU5NjYzIDE0LjQwNTMgNC44NTE0OCAxMy43NzYgNC4yMjQzOFoiIGZpbGw9IiM3QTdBN0EiLz48L3N2Zz4=');
                            background-repeat: no-repeat;
                            background-size: 18px 18px;
                            background-position: center;
                            transition: .2s;

                            &:hover {
                                background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuODEyOSA3LjAwODc1TDkuNzkzNTMgOUwxMS44MTI5IDEwLjk5MTNDMTEuODY5MSAxMS4wNDM5IDExLjkxMzkgMTEuMTA3NSAxMS45NDQ1IDExLjE3ODFDMTEuOTc1MiAxMS4yNDg3IDExLjk5MSAxMS4zMjQ5IDExLjk5MSAxMS40MDE5QzExLjk5MSAxMS40Nzg5IDExLjk3NTIgMTEuNTU1IDExLjk0NDUgMTEuNjI1N0MxMS45MTM5IDExLjY5NjMgMTEuODY5MSAxMS43NTk5IDExLjgxMjkgMTEuODEyNUMxMS43NjAzIDExLjg2NDYgMTEuNjk4IDExLjkwNTkgMTEuNjI5NSAxMS45MzM5QzExLjU2MDkgMTEuOTYxOSAxMS40ODc2IDExLjk3NjEgMTEuNDEzNSAxMS45NzU2QzExLjI2NiAxMS45NzUgMTEuMTI0NiAxMS45MTY0IDExLjAxOTggMTEuODEyNUw5LjAwMDQxIDkuNzkzMTNMNy4wMDkxNiAxMS44MTI1QzYuOTA0MzkgMTEuOTE2NCA2Ljc2Mjk3IDExLjk3NSA2LjYxNTQxIDExLjk3NTZDNi41NDEzOCAxMS45NzYxIDYuNDY3OTkgMTEuOTYxOSA2LjM5OTQ2IDExLjkzMzlDNi4zMzA5MyAxMS45MDU5IDYuMjY4NTkgMTEuODY0NiA2LjIxNjAzIDExLjgxMjVDNi4xMTEyNyAxMS43MDcxIDYuMDUyNDYgMTEuNTY0NSA2LjA1MjQ2IDExLjQxNTlDNi4wNTI0NiAxMS4yNjczIDYuMTExMjcgMTEuMTI0OCA2LjIxNjAzIDExLjAxOTRMOC4yMDcyOCA5TDYuMjE2MDMgNy4wMDg3NUM2LjEyMzg4IDYuOTAxMTUgNi4wNzU3MyA2Ljc2MjczIDYuMDgxMiA2LjYyMTE2QzYuMDg2NjYgNi40Nzk1OSA2LjE0NTM1IDYuMzQ1MyA2LjI0NTUzIDYuMjQ1MTJDNi4zNDU3MSA2LjE0NDk1IDYuNDggNi4wODYyNiA2LjYyMTU3IDYuMDgwNzlDNi43NjMxMyA2LjA3NTMyIDYuOTAxNTUgNi4xMjM0OCA3LjAwOTE2IDYuMjE1NjNMOS4wMDA0MSA4LjIwNjg4TDEwLjk5MTcgNi4yMTU2M0MxMS4wNDM3IDYuMTYxNzEgMTEuMTA1OSA2LjExODU3IDExLjE3NDcgNi4wODg2OEMxMS4yNDM0IDYuMDU4NzkgMTEuMzE3NCA2LjA0MjczIDExLjM5MjMgNi4wNDE0MkMxMS40NjczIDYuMDQwMTIgMTEuNTQxOCA2LjA1MzU5IDExLjYxMTUgNi4wODEwN0MxMS42ODEzIDYuMTA4NTQgMTEuNzQ0OSA2LjE0OTQ5IDExLjc5ODggNi4yMDE1N0MxMS44NTI4IDYuMjUzNjQgMTEuODk1OSA2LjMxNTgzIDExLjkyNTggNi4zODQ1OEMxMS45NTU3IDYuNDUzMzMgMTEuOTcxNyA2LjUyNzI5IDExLjk3MzEgNi42MDIyNUMxMS45NzQ0IDYuNjc3MiAxMS45NjA5IDYuNzUxNjggMTEuOTMzNCA2LjgyMTQzQzExLjkwNTkgNi44OTExOCAxMS44NjUgNi45NTQ4MyAxMS44MTI5IDcuMDA4NzVaTTE0LjU2OTIgMTQuNTY4OEMxMy40Njc4IDE1LjY3IDEyLjA2NDYgMTYuNDIgMTAuNTM3IDE2LjcyMzdDOS4wMDk0NCAxNy4wMjc1IDcuNDI2MDggMTYuODcxNSA1Ljk4NzE2IDE2LjI3NTVDNC41NDgyNCAxNS42Nzk0IDMuMzE4MzggMTQuNjcwMSAyLjQ1MzEgMTMuMzc1QzEuNTg3ODIgMTIuMDggMS4xMjU5OCAxMC41NTc1IDEuMTI1OTggOUMxLjEyNTk4IDcuNDQyNTEgMS41ODc4MiA1LjkxOTk5IDIuNDUzMSA0LjYyNDk3QzMuMzE4MzggMy4zMjk5NSA0LjU0ODI0IDIuMzIwNTkgNS45ODcxNiAxLjcyNDUzQzcuNDI2MDggMS4xMjg0NyA5LjAwOTQ0IDAuOTcyNDY3IDEwLjUzNyAxLjI3NjI2QzEyLjA2NDYgMS41ODAwNSAxMy40Njc4IDIuMzMgMTQuNTY5MiAzLjQzMTI1QzE1LjMwMDUgNC4xNjI1MyAxNS44ODA2IDUuMDMwNjkgMTYuMjc2NSA1Ljk4NjE5QzE2LjY3MjMgNi45NDE2OCAxNi44NzYgNy45NjU3OCAxNi44NzYgOUMxNi44NzYgMTAuMDM0MiAxNi42NzIzIDExLjA1ODMgMTYuMjc2NSAxMi4wMTM4QzE1Ljg4MDYgMTIuOTY5MyAxNS4zMDA1IDEzLjgzNzUgMTQuNTY5MiAxNC41Njg4Wk0xMy43NzYgNC4yMjQzOEMxMi44MzExIDMuMjgyNzIgMTEuNjI4MyAyLjY0MjE3IDEwLjMxOTYgMi4zODM2MkM5LjAxMDg2IDIuMTI1MDcgNy42NTQ4NyAyLjI2MDExIDYuNDIyODMgMi43NzE2OUM1LjE5MDggMy4yODMyNyA0LjEzNzk3IDQuMTQ4NDQgMy4zOTczMSA1LjI1Nzk3QzIuNjU2NjUgNi4zNjc0OSAyLjI2MTM2IDcuNjcxNiAyLjI2MTM2IDkuMDA1NjNDMi4yNjEzNiAxMC4zMzk3IDIuNjU2NjUgMTEuNjQzOCAzLjM5NzMxIDEyLjc1MzNDNC4xMzc5NyAxMy44NjI4IDUuMTkwOCAxNC43MjggNi40MjI4MyAxNS4yMzk2QzcuNjU0ODcgMTUuNzUxMSA5LjAxMDg2IDE1Ljg4NjIgMTAuMzE5NiAxNS42Mjc2QzExLjYyODMgMTUuMzY5MSAxMi44MzExIDE0LjcyODUgMTMuNzc2IDEzLjc4NjlDMTQuNDA1MyAxMy4xNTk4IDE0LjkwNDYgMTIuNDE0NiAxNS4yNDUzIDExLjU5NDJDMTUuNTg2IDEwLjc3MzcgMTUuNzYxNCA5Ljg5NDAyIDE1Ljc2MTQgOS4wMDU2M0MxNS43NjE0IDguMTE3MjMgMTUuNTg2IDcuMjM3NTggMTUuMjQ1MyA2LjQxNzFDMTQuOTA0NiA1LjU5NjYzIDE0LjQwNTMgNC44NTE0OCAxMy43NzYgNC4yMjQzOFoiIGZpbGw9IiNGRjAwMDAiLz48L3N2Zz4=');
                                background-color: transparent;
                            }
                        }
                    }
                }

                .actions {
                    padding: 30px 0 0 0;
                    background-color: transparent !important;

                    .button {
                        padding: 12px 20px;
                        font-family: "Roboto", sans-serif;
                        font-size: 16px;
                        font-weight: 700;
                        color: var(--customColorText) !important;
                        background-color: var(--customBgButton) !important;
                        border-radius: 5px;
                        transition: .3s;

                        &:hover {
                            transform: translateY(3px);
                        }
                    }
                }
            }
        }

        .cart-collaterals {
            font-family: "Roboto", sans-serif;
            grid-area: collaterals;

            .cart_totals {
                width: 100%;

                .cart-totals-table-wrapper {
                    border: 1px solid var(--customBorderColor);
                    border-radius: 5px;
                    overflow: hidden;
                }

                table {
                    border-collapse: collapse;
                    box-shadow: none !important;
                }

                tr {
                    th,
                    td {
                        padding: 15px 20px;
                        border-color: var(--customBorderColor);
                        box-shadow: none;
                        font-size: 16px;
                        font-weight: 400;
                        color: var(--customColorText);
                    }

                    th {
                        vertical-align: middle;
                    }

                    td {
                        text-align: right;
                    }

                    .woocommerce-shipping-destination {
                        font-size: 12px;
                        color: var(--customColorText);
                    }
                }

                .woocommerce-shipping-totals td {
                    background-color: transparent !important;
                }

                tr.cart-subtotal,
                tr.woocommerce-shipping-totals {
                    @media (max-width: 768px) {
                        display: flex;
                        align-items: stretch;
                    }

                    th,
                    td {
                        @media (max-width: 768px) {
                            flex: 1;
                            display: flex !important;
                            align-items: center;
                        }
                    }

                    td {
                        @media (max-width: 768px) {
                            flex: 1;
                            min-width: 0;

                            &::before {
                                display: none !important;
                            }
                        }
                    }
                }

                tr.woocommerce-shipping-totals td p {
                    @media (max-width: 768px) {
                        word-break: break-word;
                        overflow-wrap: break-word;
                    }
                }

                tr.order-total {
                    @media (max-width: 768px) {
                        display: flex;
                        align-items: stretch;
                    }

                    th,
                    td {
                        font-family: "Roboto", sans-serif;
                        font-size: 18px;
                        font-weight: 700;

                        @media (max-width: 768px) {
                            flex: 1;
                        }
                    }

                    th {
                        @media (max-width: 768px) {
                            display: flex !important;
                            align-items: center;
                        }
                    }

                    td {
                        display: flex;
                        flex-direction: column;

                        &::before {
                            display: none !important;
                        }

                        @media (max-width: 768px) {
                            flex: 0 0 auto;
                        }
                    }

                    small {
                        font-size: 12px;
                        font-weight: 400;
                        color: var(--customColorMuted);
                        opacity: 0.5;
                    }
                }

                .checkout-button {
                    font-family: "Roboto", sans-serif;
                    font-size: 16px;
                    font-weight: 700;
                    transition: .3s;

                    &:hover {
                        transform: translateY(3px);
                    }
                }

                .cart_totals_footer {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    p {
                        font-family: "Roboto", sans-serif;
                        font-size: 16px;
                        font-weight: 700;
                        color: var(--customColorText);
                    }

                    svg {
                        height: 20px;
                        width: 285px;
                    }
                }
            }
        }
    }
}


/* Checkout styling */
body.woocommerce-checkout {
    --checkSize: 18px;

    .site-content .container {
        max-width: 100% !important;

        @media (min-width: 1200px) {
            max-width: 1240px !important;
        }
    }

    form.woocommerce-checkout {
        margin-top: 0;
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 50px;

        @media (max-width: 1000px) {
            flex-direction: column;
            gap: 30px;
        }

        @media (max-width: 600px) {
            padding-top: 30px;
        }

        > #order_review_heading {
            display: none;
        }

        h3 {
            font-size: 26px;

            @media (max-width: 600px) {
                font-size: 22px;
            }
        }

        .woocommerce-billing-fields__field-wrapper,
        .woocommerce-shipping-fields__field-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .form-row-wide {
                width: 100%;
            }

            .form-row-first,
            .form-row-last,
            #billing_postcode_field,
            #billing_city_field,
            #billing_phone_field,
            #billing_email_field,
            #shipping_postcode_field,
            #shipping_city_field {
                width: 48%;

                @media (max-width: 500px) {
                    width: 100%;
                }
            }
        }

        .form-row {
            margin: 0 0 15px;

            @media (max-width: 500px) {
                margin: 0 0 10px;
            }

            label {
                font-family: "Roboto", sans-serif;
                font-size: 16px;
                font-weight: 600;
            }

            input.input-text,
            textarea,
            select,
            .select2-container--default .select2-selection--single {
                border: 1px solid var(--customBorderColor) !important;
                box-shadow: none !important;
            }

            textarea {
                resize: none;
                height: 100px;
            }

            &.create-account,
            &.mailchimp-newsletter {
                margin-bottom: 0;

                label {
                    font-weight: 400;
                }
            }
        }

        #customer_details {
            flex: 1;
            display: flex;
            flex-direction: column;

            .col-1,
            .col-2 {
                display: flex;
                flex-direction: column;
                width: 100%;
            }
        }

        #ship-to-different-address {
            input {
                margin: -2px 8px 0 3px;
            }

            label {
                padding-left: 5px;
                font-family: "Roboto", sans-serif;
                font-size: 16px;
                font-weight: 400;
                color: var(--customColorText);
                letter-spacing: initial;

                &::before,
                &::after {
                    top: 2px;
                    left: 3px;
                }
            }
        }

        .woocommerce-shipping-fields {
            margin-top: 10px;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--customBorderColor);
        }

        .woocommerce-checkout-review-order {
            font-family: "Roboto", sans-serif;
            flex: 0 0 380px;
            position: sticky;
            top: 105px;

            h3,
            #order_review_heading {
                margin-top: 0;
                margin-bottom: 30px;
                font-size: 26px;
                font-weight: 700;
                
                @media (max-width: 600px) {
                    font-size: 22px;
                }
            }

            .cart-totals-table-wrapper {
                border: 1px solid var(--customBorderColor);
                border-radius: 5px;
                overflow: hidden;
            }

            table {
                border-collapse: collapse;
                box-shadow: none !important;

                thead {
                    display: none;
                }

                tr {
                    th,
                    td {
                        padding: 15px 20px;
                        border-color: var(--customBorderColor);
                        box-shadow: none;
                        font-size: 16px;
                        font-weight: 400;
                        color: var(--customColorText);
                    }

                    th {
                        vertical-align: middle;
                    }

                    td {
                        text-align: right;
                    }
                }

                tbody tr.cart_item {
                    td.product-name {
                        margin-top: -1px;
                        text-align: left;
                        color: var(--customColorMuted);
                    }
                }

                tr.woocommerce-shipping-totals {

                    .woocommerce-shipping-methods {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        text-align: right;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;

                        li {
                            position: relative;

                            input[type="radio"] {
                                position: absolute;
                                opacity: 0;
                                inset: 0;
                                z-index: 2;
                                width: 100%;
                                height: 100%;
                                cursor: pointer;
                                margin: 0 !important;
                            }

                            label {
                                display: block;
                                min-height: var(--checkSize);
                                padding-left: calc(var(--checkSize) + 8px);
                                position: relative;
                                cursor: pointer;
                                font-weight: 400;

                                &::before,
                                &::after {
                                    content: "";
                                    display: block;
                                    pointer-events: none;
                                    position: absolute;
                                    top: 50%;
                                    left: 0;
                                    width: var(--checkSize);
                                    aspect-ratio: 1;
                                    border-radius: 100%;
                                    transition: .2s;
                                }

                                &::before {
                                    transform: translateY(-50%);
                                    background-color: #fff;
                                    border: 1px solid var(--customBorderColorInput);
                                }

                                &::after {
                                    --whiteSpace: 3px;
                                    transform: translateY(-50%) scale(0);
                                    opacity: 0;
                                    left: var(--whiteSpace);
                                    width: calc(var(--checkSize) - var(--whiteSpace) * 2);
                                    background: var(--customColorPrimary);
                                }
                            }

                            &:has(input:focus) label::before {
                                border-color: var(--customColorPrimary);
                            }

                            &:has(input:checked) label::after {
                                opacity: 1;
                                transform: translateY(-50%) scale(1);
                            }
                        }
                    }
                }

                tr.order-total {

                    th,
                    td {
                        font-family: "Roboto", sans-serif;
                        font-size: 18px;
                        font-weight: 700;
                    }

                    td {
                        display: flex;
                        flex-direction: column;

                        &::before {
                            display: none !important;
                        }
                    }

                    small {
                        font-size: 12px;
                        font-weight: 400;
                        color: var(--customColorMuted);
                        opacity: 0.5;
                    }
                }
            }

            .cart_totals_footer {
                margin-top: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;

                p {
                    padding: 5px 10px;
                    width: 100%;
                    font-family: "Roboto", sans-serif;
                    font-size: 16px;
                    font-weight: 700;
                    text-align: center;
                    color: var(--customColorText);
                    background-color: var(--customBgSubtle);
                    border-radius: 5px;
                }

                svg {
                    height: 25px;
                    width: 355px;

                    @media (max-width: 400px) {
                        height: 20px;
                        width: 285px;
                    }
                }
            }
        }
    }

    .woocommerce-checkout-payment {
        border: 1px solid var(--customBorderColor) !important;
        box-shadow: none !important;

        .payment_methods {
            padding: 30px 30px 0 30px !important;

            @media (max-width: 600px) {
                padding: 20px 20px 0 20px !important;
            }

            .wc_payment_method {
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                &:not(:last-child) {
                    margin-bottom: 10px !important;
                }

                img {
                    max-height: 25px;
                }
            }

            label {
                font-family: "Roboto", sans-serif;
                font-size: 16px;
                font-weight: 400;
                color: var(--customColorText);
            }
        }

        > .form-row {
            padding: 30px !important;

            @media (max-width: 600px) {
                padding: 20px !important;
            }
        }

        .form-row.place-order {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .woocommerce-terms-and-conditions-wrapper {
        padding-top: 30px;
        border-top: 1px solid var(--customBorderColor);

        label {
            font-family: "Roboto", sans-serif;
            font-size: 16px;
            font-weight: 400;

            &::before,
            &::after {
                top: 4px;
            }
        }

        .validate-required {
            padding: 0;
            margin-left: -5px !important;

            label {
                span {
                    padding-left: calc(var(--checkSize) + 17px);

                    a {
                        color: var(--customColorPrimary);
                        text-decoration: underline !important;
                        transition: .3s;

                        &:hover {
                            text-decoration-color: transparent !important;
                        }
                    }
                }

                &::before,
                &::after {
                    top: 4px;
                    left: 5px;
                }
            }
        }
    }

    /* Custom checkboxes */
    .woocommerce-form__label-for-checkbox {
        display: flex !important;
        align-items: flex-start;
        position: relative;
        cursor: pointer;

        input[type="checkbox"],
        input[type="radio"] {
            position: absolute !important;
            opacity: 0 !important;
            top: 2px;
            left: 0;
            z-index: 2;
            width: var(--checkSize) !important;
            height: var(--checkSize) !important;
            cursor: pointer;
            margin: 0 !important;
        }

        span {
            display: block;
            min-height: var(--checkSize);
            padding-left: calc(var(--checkSize) + 12px);
        }

        &::before,
        &::after {
            content: "";
            display: block;
            pointer-events: none;
            position: absolute;
            top: 8px;
            left: 0;
            width: var(--checkSize);
            aspect-ratio: 1;
            transition: .2s;
        }

        &::before {
            background-color: #fff;
            border: 1px solid var(--customBorderColorInput);
            border-radius: 3px;
        }

        &::after {
            opacity: 0;
            transform: scale(0);
            background: var(--customColorPrimary);
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 274.3 211.8'%3E%3Cpath fill='currentColor' d='M105.8 154.5L27.5 79.9 0 108.9l108.1 102.9L274.3 26.7 244.6 0z'/%3E%3C/svg%3E");
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: auto calc(var(--checkSize) / 2);
        }

        &:has(input:focus)::before {
            border-color: var(--customColorPrimary);
        }

        &:has(input:checked)::after {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Payment method radios */
    .wc_payment_methods li.wc_payment_method {
        display: flex;
        align-items: center;
        position: relative;

        input[type="radio"] {
            position: absolute;
            opacity: 0;
            inset: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            cursor: pointer;
            margin: 0 !important;
        }

        label {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: var(--checkSize);
            padding-left: calc(var(--checkSize) + 12px);
            position: relative;
            cursor: pointer;

            &::before,
            &::after {
                content: "";
                display: block;
                pointer-events: none;
                position: absolute;
                top: 50%;
                left: 0;
                width: var(--checkSize);
                aspect-ratio: 1;
                border-radius: 100%;
                transition: .2s;
            }

            &::before {
                transform: translateY(-50%);
                background-color: #fff;
                border: 1px solid var(--customBorderColorInput);
            }

            &::after {
                --whiteSpace: 3px;
                transform: translateY(-50%) scale(0);
                opacity: 0;
                left: var(--whiteSpace);
                width: calc(var(--checkSize) - var(--whiteSpace) * 2);
                background: var(--customColorPrimary);
            }
        }

        &:has(input:focus) label::before {
            border-color: var(--customColorPrimary);
        }

        &:has(input:checked) label::after {
            opacity: 1;
            transform: translateY(-50%) scale(1);
        }
    }

    .woocommerce-form-coupon-toggle {
        margin-top: 30px;
    }

    .woocommerce-form-login-toggle .woocommerce-info,
    .woocommerce-form-coupon-toggle .woocommerce-info {
        padding: 10px 20px;
        font-size: 16px;
        color: var(--customColorText);
        background-color: var(--customBgSubtle) !important;
        box-shadow: none !important;
        border-radius: 0 !important;

        a {
            color: var(--customColorPrimary);
            text-decoration: underline !important;
        }

        &::before {
            display: none;
        }
    }

    .woocommerce-form-login,
    .woocommerce-form-coupon {
        margin-top: -20px !important;
        padding: 20px !important;
        font-size: 16px;
        background-color: var(--customBgSubtle) !important;
        border-radius: 0 !important;

        .form-row-first,
        .form-row-last {
            width: 48%;

            @media (max-width: 600px) {
                width: 100%;
            }
        }

        input {
            border: 1px solid var(--customBorderColor) !important;
            box-shadow: none !important;
        }

        .button,
        .woocommerce-form-login__submit {
            margin-left: 0 !important;
            background-color: var(--customColorPrimary) !important;
            border-color: var(--customColorPrimary) !important;

            &:hover {
                background-color: var(--customColorPrimaryHover) !important;
                border-color: var(--customColorPrimaryHover) !important;
            }
        }

        .login-form-footer {
            display: flex;
            align-items: center;
            gap: 16px;

            @media (max-width: 600px) {
                flex-direction: column;
                align-items: flex-start;
            }

            &__left {
                display: flex;
                align-items: center;
                gap: 16px;
            }

            .lost_password {
                margin-left: auto;
                font-size: 16px;
                color: var(--customColorPrimary);
                text-decoration: underline;

                @media (max-width: 600px) {
                    margin-left: 0;
                }
            }
        }
    }

    #place_order {
        margin-bottom: 0 !important;
    }
}


body.woocommerce-order-received {
    article.page {
        max-width: 710px;
        margin: 0 auto;
    }

    .woocommerce-notice--success {
        color: var(--customColorSuccess) !important;
    }

    .woocommerce-order {
        display: flex;
        flex-direction: column;

        > * {
            order: 1;
        }

        .custom-order-received-notice {
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 5px;
            background-color: #E5F8E5;

            p {
                margin-bottom: 10px;
                font-family: "Roboto", sans-serif;
                font-size: 16px;
                color: var(--customColorSuccess);

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .woocommerce-order-overview {
            padding: 0;

            li {
                margin-right: 0;
                padding: 15px 20px;
                font-family: "Roboto", sans-serif;
                font-size: 16px;
                font-weight: 700;
                text-transform: initial;
                color: var(--customColorText);

                strong {
                    margin-top: 5px;
                    font-family: "Roboto", sans-serif;
                    font-size: 16px;
                    font-weight: 400 !important;
                    color: var(--customColorMuted);
                }
            }
        }

        .woocommerce-customer-details,
        .woocommerce-order-details {
            font-family: "Roboto", sans-serif;
            font-size: 16px;
            margin-top: 20px;
            color: var(--customColorMuted);
        }

        .woocommerce-customer-details {
            order: 2;

            .woocommerce-column {
                padding: 0;
            }

            .woocommerce-customer-details--phone,
            .woocommerce-customer-details--email {
                padding-left: 0;
                font-weight: 700;

                &::before {
                    display: none;
                }
            }

            address {
                padding: 15px;
            }
        }

        .woocommerce-order-details {
            order: 3;
        }
    }

    .woocommerce-order-details {
        font-family: "Roboto", sans-serif;

        .woocommerce-table--order-details {
            border: 1px solid var(--customBorderColor);
            border-radius: 5px;
            overflow: hidden;
            border-collapse: collapse;
            box-shadow: none !important;

            tr {
                th,
                td {
                    padding: 15px 20px;
                    border-color: var(--customBorderColor);
                    box-shadow: none;
                    font-size: 16px;
                    font-weight: 400;
                    color: var(--customColorText);
                }

                th {
                    vertical-align: middle;
                }

                td {
                    text-align: right;
                }
            }

            thead tr th {
                font-weight: 700;
                font-size: 13px;
                color: var(--customColorMuted);
            }

            thead tr th.product-name {
                text-align: left;
            }

            tbody tr.woocommerce-table__line-item {
                td.product-name {
                    text-align: left;
                    font-weight: 400;
                    color: var(--customColorMuted);

                    a,
                    strong {
                        font-weight: 400;
                    }
                }

                td.product-total {
                    font-weight: 700;
                }
            }

            tfoot tr {
                th[scope="row"] {
                    text-align: left;
                }
            }

            tfoot tr.order-total {
                th,
                td {
                    font-family: "Roboto", sans-serif;
                    font-size: 18px;
                    font-weight: 700;
                }

                td {
                    display: flex;
                    flex-direction: column;

                    &::before {
                        display: none !important;
                    }
                }

                small {
                    font-size: 12px;
                    font-weight: 400;
                    color: var(--customColorMuted);
                    opacity: 0.5;
                }
            }

            .order-actions-button {
                background-color: var(--customColorPrimary) !important;
                border-color: var(--customColorPrimary) !important;
                color: #fff !important;

                &:hover {
                    background-color: var(--customColorPrimaryHover) !important;
                    border-color: var(--customColorPrimaryHover) !important;
                }
            }
        }

        .woocommerce-order-details__title {
            font-size: 22px;
        }
    }

    .woocommerce-column__title {
        font-size: 22px;
    }
}

.widget_shopping_cart .woocommerce-mini-cart__buttons .button:not(.checkout) {
    color: var(--customColorText) !important;
    background-color: var(--customBgButton) !important;
}