.product-content-new {

    .product-content-new-wrapper {
        .product-content-new-content {
            display: flex;
            flex-direction: column;
            gap: 20px;

            margin-bottom: 104px;

            @media (max-width: 1024px) {
                margin-bottom: 64px;
            }

            h2 {
                margin: 0;
                padding: 24px 32px;
                color: #1F140C;
                font-size: 136px;
                font-style: normal;
                font-weight: 700;
                line-height: 75%;
                letter-spacing: -6px;

                border-radius: 5px;
                border: 1px solid #181818;
                background: #FFFAEE;

                @media (max-width: 1366px) {
                    font-size: 126px;
                }

                @media (max-width: 1280px) {
                    font-size: 114px;
                }

                @media (max-width: 1024px) {
                    text-align: center;
                    font-size: 36px;
                    letter-spacing: -1.44px;
                    white-space: nowrap;
                    padding: 24px;
                }
            }

            p {

                max-width: 55%;
                margin: 0 40px;
                color: #181818;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%;
                letter-spacing: -0.36px;

                @media (max-width: 1024px) {
                    max-width: unset;
                    margin: 0 auto;
                }

                span {
                    font-weight: 600;
                }
            }
        }

    }

    .shoe-tree-container {
        overflow: hidden;

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

    .product-content-new-shoe-tree {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 44px;

        .shoe-top {
            max-width: 288px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                bottom: -45px;
                left: 50%;
                width: 1px;
                height: 60px;
                background-color: #181818;
                pointer-events: none;
            }

            width: fit-content;

            figure {
                width: fit-content;
                margin: 0;
                padding: 0;
            }
        }

        .scroll-container {
            width: 100%;
            padding: 26px 0 80px 0;
            scroll-behavior: smooth;

            @media (max-width: 1366px) {
                overflow: auto;
            }
        }

        .shoe-bottom {
            position: relative;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 22px;

            &::before {
                content: '';
                position: absolute;
                top: -26px;
                left: 76px;
                width: calc(1200px - 151.5px);
                height: 1px;
                background-color: #181818;
                pointer-events: none;


                @media (max-width: 1366px) {
                    overflow: auto;
                    top: -25px;
                    left: 76px;
                    width: calc(1200px - 161.5px);
                }
            }


            .shoe-bottom-item {

                position: relative;
                border-radius: 5px;
                border: 1px solid transparent;
                background: #FFFAEE;

                &::before {
                    content: '';
                    position: absolute;
                    top: -26px;
                    left: 50%;
                    width: 1px;
                    height: 26px;
                    background-color: #181818;
                    pointer-events: none;
                }

                .shadow-content {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    justify-content: center;
                    align-items: center;
                    padding: 12px;
                    border-radius: 5px;
                    border: 1px solid transparent;
                    box-shadow: 81.888px 101.386px 36.557px 0 rgba(0, 0, 0, 0.00), 52.642px 64.828px 33.145px 0 rgba(0, 0, 0, 0.01), 29.733px 36.557px 28.271px 0 rgba(0, 0, 0, 0.03), 13.161px 16.085px 20.96px 0 rgba(0, 0, 0, 0.04), 3.412px 3.899px 11.698px 0 rgba(0, 0, 0, 0.05);
                    transition: box-shadow 0.3s ease, border-color 0.3s ease;

                    @media (max-width: 1366px) {
                        box-shadow: 66.186px 81.945px 29.548px 0 rgba(0, 0, 0, 0.00), 42.548px 52.398px 26.79px 0 rgba(0, 0, 0, 0.01), 24.032px 29.548px 22.85px 0 rgba(0, 0, 0, 0.03), 10.637px 13.001px 16.941px 0 rgba(0, 0, 0, 0.04), 2.758px 3.152px 9.455px 0 rgba(0, 0, 0, 0.05);
                    }

                    &.viewport {
                        box-shadow: none;
                        border-color: var(--c-gray-900);
                    }
                }

                .border-content {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    justify-content: center;
                    align-items: center;
                    padding: 12px;
                    border-radius: 5px;
                    border: 1px solid transparent;
                    border: 1px solid #181818;
                }

                span {
                    color: #000;
                    text-align: center;
                    font-family: Inter;
                    font-size: 13.263px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 105%;
                    letter-spacing: -0.265px;
                    text-transform: uppercase;
                }

                figure {
                    width: 123px;
                    height: 136px;
                    margin: 0;
                    padding: 0;
                    border-radius: 5px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }

    .info {
        max-width: 600px;
        margin: -40px 0 0 0;

        @media (max-width: 1024px) {
            max-width: unset;
            margin: 0;
        }

        p {
            color: #000;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            letter-spacing: -0.36px;
        }
    }
}