main {
    margin-bottom: 180px;
    .breadcrumbs {
        margin-bottom: 32px;
        a {
            font-weight: 400;
            line-height: 170%;
        }
        p {
            color: #1f222b;
            font-weight: 700;
            line-height: 170%;
        }
    }
    h1 {
        font-size: 24px;
        font-weight: 700;
        line-height: 140%;
        text-align: left;
        margin-bottom: 25px;
        padding-left: 0;
    }
    .good-slider {
        overflow-x: hidden;
        .items {
            position: relative;
            display: flex;
            flex-wrap: nowrap;
            gap: 20px;
            /* overflow: auto; */
            /* scrollbar-width: none; */
            /* scroll-snap-type: x mandatory; */
            /* scroll-behavior: smooth; */
            margin-bottom: 16px;
            /* &::-webkit-scrollbar {
                height: 0;
            } */
        }
        .slide {
            width: 100%;
            min-width: 381px;
            border-radius: 8px;
            img {
                width: 100%;
            }
        }
        .options {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .images {
                width: 90%;
                display: flex;
                gap: 6%;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                scrollbar-width: none;
                &::-webkit-scrollbar {
                    display: none;
                }
                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 4px;
                    cursor: pointer;
                    &.active {
                        border: 1px solid #006df0;
                    }
                }
            }
            :is(.arrow-l, .arrow-r) {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                width: 24px;
                height: 24px;
                &::before {
                    content: '\e006';
                    position: relative;
                    font: 18px / 1 Icon;
                    color: #606469;
                }
            }
            .arrow-l:before {
                transform: rotate(90deg);
            }
            .arrow-r:before {
                transform: rotate(-90deg);
            }
        }
    }
    .params {
        padding-left: 16px;
        .colors {
            margin-bottom: 24px;
            input {
                display: none;
            }
            > p {
                color: #606469;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.7;
                span {
                    color: #1f222b;
                    font-size: inherit;
                    font-weight: inherit;
                    line-height: inherit;
                }
            }
        }
        .radio-box {
            display: flex;
            align-items: center;
            gap: 8px;
            input[type=radio] {
                + label {
                    position: relative;
                    width: 40px;
                    height: 40px;
                    margin-right: 0;
                    border-radius: 4px;
                    border: 1px solid #cccfd0;
                    &::before {
                        content: '';
                        display: block;
                        width: 24px;
                        height: 24px;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
                &:checked + label {
                    border-color: #006df0;
                    &::after {
                        display: none;
                    }
                }

            }
            label {
                &:nth-child(2)::before {
                    background-color: #6fcf97;
                    border-color: #6fcf97;
                }
                &:nth-child(4)::before {
                    background-color: #56ccf2;
                    border-color: #56ccf2;
                }
                &:nth-child(6)::before {
                    background-color: #cccfd0;
                    border-color: #cccfd0;
                }
                &:nth-child(8)::before {
                    background-color: #fff;
                    border-color: #000;
                }
                &:nth-child(10)::before {
                    background-color: #f2c94c;
                    border-color: #f2c94c;
                }
            }
        }
    }
    .box {
        display: grid;
        grid-template-columns: 381px 1fr 216px;
        gap: 16px;
        .table {
            display: grid;
            grid-template-columns: 103px 1fr 332px;
            align-items: end;
            row-gap: 8px;
            span,
            p,
            a {
                font-size: 14px;
                font-weight: 400;
                line-height: 1.7;
            }
            span {
                grid-column: 1/2;
                color: #606469;
            }
            p {
                grid-column: 3/4;
                color: #1f222b;
            }
            a {
                grid-column: span 2;
                max-width: 135px;
                padding: 6px 0;
                font-weight: 500;
                color: #0056cf;
            }
        }
    }
    .calc {
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-width: 200px;
        margin-left: 16px;
        padding: 24px;
        align-items: flex-start;
        border-radius: 8px;
        align-self: start;
        box-shadow: 0px 0px 8px -4px rgba(31, 34, 43, 0.03), 0px 0px 24px -4px rgba(31, 34, 43, 0.08);
        background: #fff;
        p:first-child {
            color: #1f222b;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.5;
        }
        > p:nth-child(2) {
            color: #027a48;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.7;
        }
        .mob-box {
            display: contents;
        }
        .count {
            display: grid;
            grid-template-columns: 40px 1fr 40px;
            height: 40px;
            width: 100%;
            :is(.left, .right) {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: 8px;
                background: #f2f9ff;
                font-size: 25px;
                color: #0056cf;
                cursor: pointer;
            }
            p:nth-child(2) {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                line-height: 142%;
                color: #1f222b;
            }
        }
        button {
            width: 100%;
            height: 40px;
            padding-inline: 16px;
            border-radius: 20px;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
            &.disabled {
                opacity: 0.3;
                pointer-events: none;
            }
        }
        input[type=checkbox] {
            + label {
                display: flex;
                align-items: center;
                gap: 8px;
                text-align: center;
                font-size: 16px;
                font-weight: 500;
                line-height: 1.5;
                cursor: pointer;
                color: #0056CF;
                &::before {
                    content: '\e013';
                    font-family: Icon;
                }
            }
            &:checked + label::before {
                content: '\e015';
                color: #d92d20;
            }
        }
        &:has(button.disabled) .count {
            opacity: .3;
            pointer-events: none;
        }
    }
}
#favourites {
    display: none;
}
.slider1 {
    margin-top: 32px;
    h2 {
        margin-bottom: 16px;
        text-align: left;
        font-size: 24px;
        font-weight: 700;
        line-height: 34px;
    }
    .slider {
        position: relative;
        .slider-wrapper {
            overflow: hidden;
            .items {
                position: relative;
                display: flex;
                gap: 10px;
                .slide {
                    position: relative;
                    min-width: 225px;
                    max-width: 225px;
                    height: 520px;
                    display: flex;
                    flex-direction: column;
                    .favorites {
                        position: absolute;
                        top: 8px;
                        right: 12px;
                        display: block;
                        &::after {
                            content: '\e013';
                            font: 20px / 1 Icon;
                            color: #606469;
                            cursor: pointer;
                        }
                        &.active::after {
                            content: '\e015';
                            color: #d92d20;
                        }
                    }
                    & > span {
                        position: absolute;
                        top: 6px;
                        left: 8px;
                        display: none;
                        padding: 0 10px;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 24px;
                        border-radius: 16px;
                    }
                    &.discount span.discount {
                        display: block;
                        color: #b42318;
                        background: #fef3f2;
                    }
                    &.order span.order {
                        display: block;
                        color: #b54708;
                        background: #fffaeb;
                    }
                    &.new span.new {
                        display: block;
                        color: #027a48;
                        background: #ecfdf3;
                    }
                    img {
                        width: 100%;
                        min-height: 185px;
                        max-height: 185px;
                        margin-bottom: 4px;
                    }
                    h3,
                    p {
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 24px;
                    }
                    h3 {
                        white-space: normal;
                        word-wrap: break-word;
                        min-height: 130px;
                    }
                    p:first-of-type {
                        margin-bottom: 4px;
                    }
                    p.price {
                        font-size: 20px;
                        font-weight: 700;
                        line-height: 30px;
                        color: #1f222b;
                    }
                    &.discount p.price {
                        color: #d92d29;
                    }
                    &.order p.price {
                        color: #dc6803;
                    }
                    p.count {
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 24px;
                        color: #027a48;
                    }
                    &.order p.count {
                        display: none;
                    }
                    div.count {
                        margin-top: 16px;
                        margin-bottom: 16px;
                        button {
                            justify-content: center;
                        }
                    }
                    & > button {
                        margin-bottom: 16px;
                        margin-top: auto;
                        &.disabled {
                            opacity: 0.3;
                            cursor: not-allowed;
                        }
                    }
                }
            }
        }
    }
    .options {
        position: absolute;
        top: calc(50% - 20px);
        width: 100%;
        display: flex;
        justify-content: space-between;
        .arrow-l,
        .arrow-r {
            position: relative;
            left: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            border: 1px solid #a1a4a7;
            background: #fff;
            z-index: 1;
            cursor: pointer;
            &.none {
                display: none;
            }
            &::before {
                content: '\e018';
                color: #4a4e55;
                font: 16px / 1 Icon;
            }
        }
        .arrow-l {
            left: -20px;
            &::before {
                transform: rotate(180deg);
            }
        }
    }
}
.blocks {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 100px;
    .block {
        position: relative;
        width: 100%;
        max-width: 580px;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        overflow: hidden;
        a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        img {
            height: 100%;
            min-height: 508px;
            max-height: 508px;
            filter: sepia(1);
            transition: 0.5s;
        }
        .text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            padding: 70px 40px 50px;
            h2 {
                margin-bottom: 50px;
                margin-left: 0;
                font-size: 50px;
                text-align: left;
                color: #fff;
                text-shadow: 1px 0 10px rgba(0, 0, 0, 0.6);
            }
            p {
                color: #fff;
                line-height: 30px;
                text-shadow: 1px 0 10px rgba(0, 0, 0, 0.9);
            }
        }
    }
}
@media screen and (max-width: 1280px) {
    main .box .table {
        grid-template-columns: 103px 1fr;
        column-gap: 20px;
        a {
            grid-column: span 3
        }
    }
    .blocks .block {
        width: 49%;
        .text {
            padding: 50px 25px 40px;
            h2 {
                font-size: 25px;
                margin-bottom: 35px;
            }
            p {
                font-size: 13px;
                line-height: 25px;
            }
        }
    }
}
@media screen and (max-width: 1020px) {
    main {
        .box {
            grid-template-columns: 1fr 216px;
            grid-template-areas: 'A A'
                'B C';
            row-gap: 24px;
            .good-slider {
                grid-area: A;
                .slide {
                    text-align: center;
                    img {
                        width: 100%;
                        max-width: 450px;
                    }
                }
            }
            .params {
                grid-area: B;
            }
            .calc {
                grid-area: C;
            }
        }
        .calc {
            padding: 0;
            box-shadow: none;
            &:has(.mob-box) .mob-box {
                position: fixed;
                left: 0;
                bottom: 70px;
                width: 100%;
                display: flex;
                gap: 20px;
                z-index: 5;
                padding: 10px;
                border-radius: 16px 16px 0 0;
                background: #fff;
                .count {
                    margin-top: 0;
                    max-width: 200px;
                }
                .btn-blue {
                    margin-left: auto;
                    max-width: 200px;
                }
                label {
                    position: relative;
                    width: 40px;
                    flex-shrink: 0;
                    font-size: 1px;
                    color: transparent;
                    &::before {
                        color: #006df0;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 18px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    main {
        .breadcrumbs p {
            display: none;
        }
        .box {
            display: flex;
            flex-direction: column;
            margin-bottom: 24px;
            .good-slider {
                .items {
                    gap: 5px;
                }
                .slide {
                    border-radius: 0px;
                    min-width: 240px;
                    max-width: 240px;
                    img {
                        max-width: 100%;
                    }
                }
                .options {
                    display: none;
                }
            }
            .table {
                p {
                    grid-column: 2/4
                }
                a {
                    margin-top: 16px;
                }
            }
        }
        .calc:not(:has(.mob-box)) {
            width: 100%;
            max-width: initial;
            gap: 0;
            margin-left: 0;
            :is(.count, button),
            input[type=checkbox] + label {
                display: none;
            }
        }
    }
    .blocks {
        flex-wrap: wrap;
        .block {
            width: 100%;
            img {
                min-height: 300px;
                max-height: 300px;
                height: 300px;
            }
            .text {
                padding: 20px 25px 20px;
                h2 {
                    font-size: 20px;
                    margin-bottom: 20px;
                    margin-top: 0;
                }
                p {
                    font-size: 13px;
                    line-height: 18px;
                }
            }
        }
    }
}
@media screen and (max-width: 578px) {
    main {
        .slider .options {
            top: calc(50% - 15px);
            .arrow-l,
            .arrow-r {
                width: 30px;
                height: 30px;
                left: 10px;
                &::before {
                    font-size: 14px;
                    line-height: 14px;
                }
            }
            .arrow-l {
                left: -10px;
            }
        }
        .calc:has(.mob-box) .mob-box {
            gap: 10px;
            .count {
                margin-top: 0;
                min-width: 140px;
            }
        }
    }
}
@media (hover: hover) {
    .blocks .block:hover img {
        filter: sepia(0);
    }
}