*,
::after,
::before {
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    height: 100%
}

body {
    min-height: 100%;
    line-height: 1.25;
    width: 100%
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font: inherit;
    overflow-wrap: break-word
}

button,
input,
select,
textarea {
    background-color: transparent;
    font: inherit;
    color: inherit;
    border-radius: 0;
    border: 0
}

input[type='number'] {
    -moz-appearance: textfield;
}
input:disabled,
textarea:disabled {
    opacity: 1;
    -webkit-text-fill-color: inherit
}

button {
    cursor: pointer;
    box-shadow: none
}

textarea {
    resize: vertical
}

label {
    cursor: pointer
}

em {
    font-style: normal
}

ol,
ul {
    list-style: none
}

fieldset {
    border: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

blockquote,
q {
    quotes: none
}

dialog {
    color: inherit;
    border: none;
    max-width: 100%;
    max-height: 100%
}

a {
    text-decoration: none;
    color: inherit
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto
}

address {
    font-style: normal
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto !important
    }

    *,
    ::after,
    ::before {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important
    }
}

@media (max-width:568px) {
    .hidden-mobile-m {
        display: none !important
    }
}

@media (min-width:561px) {
    .visible-mobile-m {
        display: none !important
    }
}

@media (max-width:720px) {
    .hidden-mobile {
        display: none !important
    }
}

@media (min-width:721px) {
    .visible-mobile {
        display: none !important
    }
}

@media (max-width:1100px) {
    .hidden-tablet {
        display: none !important
    }
}

@media (min-width:1101px) {
    .visible-tablet {
        display: none !important
    }
}

@media (max-width:1200px) {
    .hidden-tablet-l {
        display: none !important
    }
}

@media (min-width:1201px) {
    .visible-tablet-l {
        display: none !important
    }
}

:root {
    --color-white: #fff;
    --color-light: #f2f2f2;
    --color-light2: #bfbfbf;
    --color-light3: #F5F4F1;
    --color-light4: #dcdcdc;
    --color-light5: #F5F5F5;
    --color-light6: #dfdede;
    --color-black: #353334;
    --color-black2: #010101;
    --color-dark: #3C4A57;
    --color-black-dark: #021323;
    --color-red: #ed4d33;
    --color-red2: #ff0a0a;
    --color-grey: #999;
    --color-accent-red: #ad3623;
    --color-accent-black: #232223;
    --color-fill: #f2f2f2;
    --color-green-dark: #20a525;
    --color-green: #7de881;
    --color-green-rgb: 125, 232, 129;
    --color-backdrop: rgba(153, 153, 153, 0.4);
    --container-width: 1348px;
    --container-width-medium: 1120px;
    --container-width-small: 920px;
    --container-padding-x: 40px;
    --section-padding-y: 30px;
    --dialog-padding-y: 30px;
    --header-height: 133px;
    --nav-height: 0px;
    --border-radius: 4px;
    --font-base: "Inter", sans-serif;
    --font-second: "Urbanist", sans-serif
}

@media (max-width:1100px) {
    :root {
        --container-padding-x: 25px;
        --header-height: 95px
    }
}

@media (max-width:720px) {
    :root {
        --container-padding-x: 16px;
        --header-height: 86px;
        --nav-height: 54px
    }
}

body {
    color: var(--color-black);
    font-family: var(--font-base);
    background-color: var(--color-white);
    min-width: 320px;
    font-size: 14px;
    line-height: 1.25;
    font-optical-sizing: auto;
    display: flex;
    flex-direction: column
}

main {
    flex-grow: 1
}

p:not(:first-child) {
    padding-top: 1em
}

strong {
    font-weight: 500
}

.container {
    --containerWidth: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-x);
    width: 100%;
    max-width: calc(var(--containerWidth) + var(--container-padding-x) * 2)
}

.container_medium {
    --containerWidth: var(--container-width-medium)
}

.container_small {
    --containerWidth: var(--container-width-small)
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden
}

.scroll-lock {
    overflow: hidden
}

.splide {
    visibility: hidden
}

.splide__track {
    overflow: hidden
}

.splide__list {
    display: flex
}

.splide__slide {
    flex-shrink: 0
}

.up-down-animation {
    transition: .4s ease;
    transition-property: max-height;
    will-change: max-height;
    max-height: 0;
    overflow: hidden;
    display: none
}

.link {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--color-black)
}

.link_accent {
    color: var(--color-red)
}

.link_white {
    color: var(--color-white)
}

.link_grey {
    font-weight: 500;
    color: var(--color-grey)
}

@media (hover:hover) {
    .link:hover {
        text-decoration: none
    }
}

@media (hover:none) {
    .link:active {
        text-decoration: none
    }
}

.bg-dots {
    --widthDots: 1246px;
    --topDots: -128px;
    position: relative;
    overflow: hidden
}

.bg-dots::before {
    content: "";
    position: absolute;
    top: var(--topDots);
    right: calc(var(--widthDots)/ 2 * -1);
    translate: 0 50%;
    width: var(--widthDots);
    aspect-ratio: 1246/281;
    background-image: url(../images/dots.svg);
    background-size: 100% auto;
    transform: rotate(27deg);
    z-index: 0;
    opacity: .8
}

.errorMessage {
    display: block;
    font-size: 12px;
    color: var(--color-red2);
    margin-top: 3px
}

.errorMessage_white {
    color: var(--color-light)
}

.form-error {
    font-size: 12px;
    color: var(--color-red2)
}

.form-error:not(.is-active) {
    display: none
}

.form-error_white {
    color: var(--color-light)
}

.field-label {
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--color-grey)
}

.h1 {
    font-size: clamp(18px, 2.2222222222vw, 32px);
    font-weight: 600;
    font-family: var(--font-second)
}

.h1_large {
    font-size: clamp(20px, 2.2222222222vw, 32px)
}

.h1 em {
    font-style: normal;
    color: var(--color-red)
}

.h2 {
    font-size: clamp(20px, 1.6666666667vw, 24px);
    font-weight: 700
}

.h2_large {
    font-size: 24px
}

.h2 em {
    font-weight: 600;
    font-style: normal;
    color: var(--color-red)
}

.h3 {
    font-family: var(--font-second);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-black-dark)
}

.button-icon {
    --backgroundColor: var(--color-light);
    --color: var(--color-black);
    aspect-ratio: 1;
    width: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    flex-shrink: 0;
    border-radius: var(--border-radius);
    background-color: var(--backgroundColor);
    color: var(--color);
    position: relative
}

@media (hover:hover) {
    .button-icon:hover {
        --backgroundColor: var(--color-light2)
    }
}

@media (hover:none) {
    .button-icon:active {
        --backgroundColor: var(--color-light2)
    }
}

@media (max-width:720px) {
    .button-icon {
        aspect-ratio: 1;
        width: 36px
    }
}

.button-icon__icon {
    aspect-ratio: 1;
    width: 16px
}

.button-icon_dark {
    --backgroundColor: var(--color-black);
    --color: var(--color-white);
    border: 1px solid var(--color-black)
}

@media (hover:hover) {
    .button-icon_dark:hover {
        --backgroundColor: var(--color-accent-black)
    }
}

@media (hover:none) {
    .button-icon_dark:active {
        --backgroundColor: var(--color-accent-black)
    }
}

.button-icon__quality {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 16px;
    min-width: 16px;
    padding: 2px;
    top: -7px;
    right: -3px;
    border-radius: 2px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 11px
}

.button-icon-text {
    --backgroundColor: var(--color-red);
    --color: var(--color-white);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    background-color: var(--backgroundColor);
    color: var(--color);
    column-gap: 10px;
    font-weight: 500;
    font-size: 13px;
    min-height: 42px;
    padding: 7px 24px;
    border-radius: var(--border-radius)
}

@media (hover:hover) {
    .button-icon-text:hover {
        --backgroundColor: var(--color-accent-red)
    }
}

@media (hover:none) {
    .button-icon-text:active {
        --backgroundColor: var(--color-accent-red)
    }
}

@media (max-width:720px) {
    .button-icon-text {
        min-height: 38px
    }
}

@media (max-width:568px) {
    .button-icon-text_full {
        width: 100%
    }
}

.button-icon-text__icon {
    aspect-ratio: 1;
    width: 14px;
    flex-shrink: 0
}

.button {
    --backgroundColor: var(--color-red);
    --color: var(--color-white);
    transition: .2s ease-out;
    transition-property: background-color, border-color, color, opacity;
    will-change: background-color, border-color, color, opacity;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--backgroundColor);
    color: var(--color);
    padding: 11px 24px;
    min-height: 46px;
    border-radius: var(--border-radius);
    font-size: 13px
}

@media (hover:hover) {
    .button:hover {
        --backgroundColor: var(--color-accent-red)
    }
}

@media (hover:none) {
    .button:active {
        --backgroundColor: var(--color-accent-red)
    }
}

.button_full {
    width: 100%
}

.button_long {
    max-width: 342px;
    width: 100%
}

.button_small {
    padding: 5px;
    min-height: 40px
}

.button_small-long {
    padding-left: 10px;
    padding-right: 10px
}

.button_small-narrow {
    padding: 5px 10px;
    min-height: 33px
}

.button_bold {
    font-weight: 500
}

.button_border {
    --backgroundColor: transparent;
    --color: var(--color-black);
    --colorBorder: var(--color-light2);
    border: 1px solid var(--colorBorder)
}

@media (hover:hover) {
    .button_border:hover {
        --colorBorder: var(--color-accent-black);
        --backgroundColor: transparent
    }
}

@media (hover:none) {
    .button_border:active {
        --colorBorder: var(--color-accent-black);
        --backgroundColor: transparent
    }
}

.button_border.is-active {
    --backgroundColor: var(--color-red);
    --color: var(--color-white);
    --colorBorder: transparent
}

.button_border-white {
    --color: var(--color-white);
    --colorBorder: var(--color-light)
}

@media (hover:hover) {
    .button_border-white:hover {
        --colorBorder: var(--color-light2)
    }
}

@media (hover:none) {
    .button_border-white:active {
        --colorBorder: var(--color-light2)
    }
}

.button_white {
    --backgroundColor: var(--color-white);
    --color: var(--color-black-dark);
    --colorBorder: transparent
}

@media (hover:hover) {
    .button_white:hover {
        --backgroundColor: var(--color-light2)
    }
}

@media (hover:none) {
    .button_white:active {
        --backgroundColor: var(--color-light2)
    }
}

.button_dark {
    --backgroundColor: var(--color-black)
}

@media (hover:hover) {
    .button_dark:hover {
        --backgroundColor: var(--color-accent-black)
    }
}

@media (hover:none) {
    .button_dark:active {
        --backgroundColor: var(--color-accent-black)
    }
}

.button[disabled] {
    opacity: .6;
    --backgroundColor: var(--color-light);
    --color: var(--color-grey)
}

.button-arrow {
    --paddingX: 24px;
    --backgroundColor: var(--color-red);
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--backgroundColor);
    color: var(--color-white);
    height: 44px;
    padding: 7px calc(var(--paddingX) + 24px) 7px var(--paddingX);
    border-radius: var(--border-radius)
}

@media (hover:hover) {
    .button-arrow:hover {
        --backgroundColor: var(--color-accent-red)
    }
}

@media (hover:none) {
    .button-arrow:active {
        --backgroundColor: var(--color-accent-red)
    }
}

.button-arrow_black {
    --backgroundColor: var(--color-black)
}

@media (hover:hover) {
    .button-arrow_black:hover {
        --backgroundColor: var(--color-accent-black)
    }
}

@media (hover:none) {
    .button-arrow_black:active {
        --backgroundColor: var(--color-accent-black)
    }
}

.button-arrow_small {
    font-size: 13px;
    height: 46px
}

.button-arrow[disabled] {
    --backgroundColor: var(--color-grey);
    --color: var(--color-light2)
}

.button-arrow::before {
    /*aspect-ratio: 1; убрал */
    width: 14px;
    height: 14px; /* добавил */
    content: "";
    position: absolute;
    /*top: 50%; убрал */
    top: calc(50% - 7px);/* добавил */
    right: var(--paddingX);
    /*translate: 0 -50%; 1; убрал */
    background-image: url(../images/arrow-right.svg);
    background-size: 100% auto
}

.header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    z-index: 1000
}

@media (max-width:1100px) {
    .header {
        border-bottom: 1px solid var(--color-light)
    }
}

.header__body {
    padding-top: 18px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 20px
}

@media (max-width:720px) {
    .header__body {
        padding-top: 16px;
        padding-bottom: 18px
    }
}

.header__main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1
}

@media (max-width:1100px) {
    .header__main {
        column-gap: 16px
    }
}

.header__button-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    width: 16px;
    height: 34px;
    flex-shrink: 0;
    position: relative
}

@media (hover:hover) {
    .header__button-icon:hover {
        color: var(--color-accent-red)
    }
}

@media (hover:none) {
    .header__button-icon:active {
        color: var(--color-accent-red)
    }
}

.header__button-icon-img {
    transition: .2s ease-out;
    transition-property: opacity, visibility;
    will-change: opacity, visibility;
    aspect-ratio: 1;
    width: 16px
}

.header__button-icon-img_close {
    aspect-ratio: 1;
    width: 13px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    opacity: 0;
    visibility: hidden
}

.header__button-icon[aria-expanded=true] .header__button-icon-img_open {
    visibility: hidden;
    opacity: 0
}

.header__button-icon[aria-expanded=true] .header__button-icon-img_close {
    visibility: visible;
    opacity: 1
}

.header__company {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 5px
}

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

@media (max-width:720px) {
    .header__company {
        row-gap: 5px
    }
}

.header__company-type {
    color: var(--color-grey);
    font-size: 12px
}

@media (max-width:720px) {
    .header__company-type {
        font-size: 10px
    }
}

.header__logo {
    width: 147px;
    flex-shrink: 0
}

@media (max-width:720px) {
    .header__logo {
        width: 120px
    }
}

.header__search-bar {
    margin-right: 10px;
    margin-left: 40px
}

.header__contacts {
    margin-right: 40px
}

.header__buttons {
    display: flex;
    align-items: center;
    column-gap: 10px
}

@media (max-width:1100px) {
    .header__buttons {
        column-gap: 12px
    }
}

.header__menu {
    padding: 8px 0;
    background: linear-gradient(90deg, rgba(245, 244, 241, 0) 0, #f5f4f1 100%)
}

.header__menu-list {
    display: flex;
    align-items: center;
    column-gap: 20px;
    row-gap: 10px
}

.header__menu-link {
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    font-weight: 500;
    font-size: 13px;
    color: var(--color-grey);
    padding: 0 14px
}

@media (hover:hover) {
    .header__menu-link:hover {
        color: var(--color-accent-black)
    }
}

@media (hover:none) {
    .header__menu-link:active {
        color: var(--color-accent-black)
    }
}

.dialog.is-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, .1)
}
.dialog.is-modal {
   background-color: rgba(0, 0, 0, .5);
   backdrop-filter: blur(3px);
}
.dialog[open] {
    animation: fadeInDialog .3s forwards
}

.dialog:not([open]) {
    display: none !important
}

.dialog.is-hide {
    animation: fadeOutDialog .3s forwards
}

.dialog::backdrop {
    background-color: transparent;
    display: none
}

.dialog__body {
    margin: auto
}

dialog {
    display: block;
    z-index: 100000
}

dialog.is-modal {
    position: fixed;
    top: 0 !important;
    left: 0
}

@keyframes fadeInDialog {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOutDialog {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.small-contacts {
    display: flex;
    align-items: center;
    column-gap: 10px
}

.small-contacts__icon {
    aspect-ratio: 1;
    width: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    background-color: var(--color-red);
    color: var(--color-white)
}

.small-contacts__icon-image {
    aspect-ratio: 1;
    width: 40%
}

.small-contacts__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--third-family);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    gap: 8px; /*добавил */
}

.small-contacts__email {
    color: var(--color-grey)
}

.search-bar {
    position: relative;
    font-size: 13px;
    width: 100%;
    max-width: 411px
}

.search-bar.is-open .search-bar__field {
    border-color: var(--color-light2)
}

.search-bar.is-open .search-bar__result {
    visibility: visible;
    opacity: 1
}

.search-bar_full {
    max-width: initial
}

.search-bar__field {
    transition: .2s ease-out;
    transition-property: border-color;
    will-change: border-color;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--color-light)
}

.search-bar__field-icon {
    aspect-ratio: 1;
    width: 16px;
    position: absolute;
    top: 50%;
    left: 12px;
    translate: 0 -50%;
    z-index: 100;
    pointer-events: none
}

.search-bar__field-input {
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    position: relative;
    height: 40px;
    background-color: var(--color-light);
    padding-left: 40px;
    padding-right: 12px;
    width: 100%;
    font-size: 14px;
    outline: 0;
    z-index: 0
}

.search-bar__field-input::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.search-bar__field-input::placeholder {
    color: var(--color-grey)
}

.search-bar__field-input:focus {
    background-color: var(--color-light2)
}

.search-bar__template-not-found,
.search-bar__template-result {
    display: none
}

.search-bar__result {
    transition: .2s ease-out;
    transition-property: visibility, opacity;
    will-change: visibility, opacity;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-light2);
    border-top: 0;
    margin-top: -4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    visibility: hidden;
    opacity: 0;
    z-index: 1000; 
    max-height: calc(61px * 6);
    overflow-y: scroll;
}

.search-bar__result::-webkit-scrollbar {
    height: 3px;
    width: 5px;
}
.search-bar__result::-webkit-scrollbar-track {
    background: #EDF1F4;
}
.search-bar__result::-webkit-scrollbar-thumb {
    background-color: var(--color-red);
    border-radius: 6px;
}

.search-bar__item:not(:last-child) {
    border-bottom: 1px solid var(--color-light)
}

.search-bar__item {
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    padding: 10px 6px;
    display: flex;
    align-items: center;
    column-gap: 10px;
    cursor: pointer
}

@media (hover:hover) {
    .search-bar__item:hover {
        background-color: var(--color-light6)
    }
}

@media (hover:none) {
    .search-bar__item:active {
        background-color: var(--color-light6)
    }
}

.search-bar__item[aria-selected=true] {
    background-color: var(--color-light6)
}

.search-bar__thumbnail {
    --borderColor: var(--color-light);
    aspect-ratio: 1;
    width: 40px;
    border: 1px solid var(--borderColor);
    border-radius: var(--border-radius);
    position: relative;
    flex-shrink: 0;
    overflow: hidden
}

.search-bar__thumbnail:not(.search-bar__thumbnail_category) {
    background-color: var(--color-black2)
}

.search-bar__thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.search-bar__thumbnail_category {
    --borderColor: var(--color-light2);
    display: flex;
    background-color: var(--color-white)
}

.search-bar__thumbnail_category .search-bar__thumbnail-image,
.search-bar__thumbnail_category picture {
    width: 88%;
    height: auto;
    margin-left: auto;
    margin-top: auto
}

.search-bar__name {
    line-height: 1.23077
}

.search-bar__price {
    font-weight: 500;
    white-space: nowrap
}

.search-bar__category {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    overflow: hidden
}

.search-bar__category-item {
    display: flex;
    align-items: center;
    column-gap: 10px;
    white-space: nowrap
}

.search-bar__category-item:not(:last-child) {
    color: var(--color-grey);
    flex-shrink: 0
}

.search-bar__category-icon {
    aspect-ratio: 1;
    width: 14px;
    flex-shrink: 0;
    color: var(--color-grey)
}

.search-bar__category-item:first-child .search-bar__category-icon {
    display: none
}

.schedule {
    font-size: 12px;
    flex-shrink: 0
}

@media (max-width:720px) {
    .schedule {
        line-height: 1.16
    }
}

.schedule__label {
    color: var(--color-grey)
}

.schedule__time {
    font-weight: 500
}

.menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    opacity: .5;
    width: 100%;
    overflow: auto;
    padding: 20px var(--container-padding-x);
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    background-color: var(--color-white)
}

@media (min-width:1101px) {
    .menu {
        display: none
    }
}

.menu__body {
    width: 100%;
    height: 100%;
    background-color: var(--color-white)
}

.menu__search-bar {
    margin-bottom: 24px
}

.menu__navigation-list {
    display: flex;
    flex-direction: column;
    row-gap: 20px
}
.menu__navigation-list.category-list {
    row-gap: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: var(--color-light);
    padding: 10px;
    border-radius: 10px;
}

.menu__navigation-link {
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-grey)
}

@media (hover:hover) {
    .menu__navigation-link:hover {
        color: var(--color-accent-black)
    }
}

@media (hover:none) {
    .menu__navigation-link:active {
        color: var(--color-accent-black)
    }
}

.menu__footer {
    margin-top: auto;
    padding-top: 24px
}

.menu__contacts {
    margin-bottom: 10px
}
.arrow-item {
    aspect-ratio: 1;
    width: 18px;
    transition: .2s ease-out;
    transition-property: opacity, color;
    will-change: opacity, color;
    color: var(--color-white)
}

.arrow-item_prev {
    transform: rotate(180deg)
}

.arrow-item[disabled] {
    opacity: .4
}

@media (hover:hover) {
    .arrow-item:hover .arrow-item:not([disabled]) {
        color: var(--color-light2)
    }
}

@media (hover:none) {
    .arrow-item:active .arrow-item:not([disabled]) {
        color: var(--color-light2)
    }
}

.arrow-item path {
    fill: currentColor
}

.arrows-slider {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    column-gap: 16px;
    z-index: 100
}

@media (max-width:720px) {
    .arrows-slider {
        top: 20px;
        right: 20px
    }
}

.packages__main {
    --gap: 24px;
    margin-bottom: 28px
}

@media (max-width:1100px) {
    .packages__main {
        --gap: 18px
    }
}

@media (max-width:720px) {
    .packages__main {
        --gap: 12px
    }
}

.packages__body {
    display: flex;
    gap: var(--gap)
}

@media (max-width:1100px) {
    .packages__body {
        display: block
    }
}

.packages__slider-wrapper {
    border-radius: var(--border-radius);
    overflow: hidden;
    flex: 0 1 798px;
    background-color: var(--color-fill)
}

@media (max-width:1100px) {
    .packages__slider-wrapper {
        aspect-ratio: 2;
        margin-bottom: var(--gap)
    }
}

@media (max-width:930px) {
    .packages__slider-wrapper {
        aspect-ratio: initial;
        height: 439px
    }
}

.packages__slider {
    height: 100%
}

.packages__track {
    height: 100%
}

.packages__list {
    height: 100%
}

.packages__slide {
    position: relative;
    height: 100%
}

.packages__slide::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .7) 100%);
    z-index: 100;
    opacity: .1;
    z-index: 0
}

.packages__link {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: block
}

.packages__link:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(279.45% 102.5% at 47.78% 0, rgba(40, 40, 40, .5) 0, rgba(45, 45, 45, .3) 53.6%, rgba(52, 52, 52, .2) 99.5%, rgba(40, 40, 40, .9) 100%);
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover
}

.packages__link:focus-visible::before {
    display: block
}

.packages__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #00f;
    z-index: 500;
    display: none
}

.packages__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.packages__info {
    padding: 24px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 200;
    color: var(--color-white)
}

@media (max-width:720px) {
    .packages__info {
        padding: 20px
    }
}

.packages__title {
    margin-bottom: 16px
}

.packages__line {
    margin-bottom: 19px
}

@media (max-width:720px) {
    .packages__line {
        margin-bottom: 16px
    }
}

.packages__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    row-gap: 16px
}

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

.packages__description {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.14286
}

@media (max-width:720px) {
    .packages__description {
        font-size: 13px
    }
}

.packages__button {
    flex-shrink: 0
}

.packages__films {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    flex: 0 1 526px
}

@media (max-width:1100px) {
    .packages__films {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:720px) {
    .packages__films {
        grid-template-columns: 1fr
    }
}

.packages__films-button {
    --paddingX: 20px;
    --paddingY: 16px;
    --widthDots: 1170px;
    --topDots: -170px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: var(--color-white);
    background: linear-gradient(36deg, rgba(255, 0, 0, .7) 0, rgba(237, 77, 51, .7) 100%);
    border-radius: var(--border-radius)
}
.packages__films-button.black_packages__film {
    background: var(--color-black);
}
@media (max-width:1100px) {
    .packages__films-button {
        height: 100%;
        --paddingX: 16px;
        position: relative;
        padding: var(--paddingY) var(--paddingX);
        align-items: flex-start
    }
}

.packages__films-top {
    display: flex;
    align-items: center;
    column-gap: 15px;
    justify-content: space-between;
    padding: var(--paddingY) var(--paddingX) 0;
    margin-bottom: 34px;
    position: relative;
    z-index: 100;
    width: 100%
}

@media (max-width:1100px) {
    .packages__films-top {
        display: contents
    }
}

.packages__films-name {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-second)
}

@media (max-width:1100px) {
    .packages__films-name {
        margin-bottom: 12px
    }
}

.packages__films-price {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 6px 16px;
    font-weight: 500;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    color: var(--color-black);
    min-height: 38px;
    white-space: nowrap
}

@media (max-width:1100px) {
    .packages__films-price {
        position: relative;
        z-index: 100;
        order: 3;
        margin-top: auto
    }
}

@media (max-width:720px) {
    .packages__films-price {
        min-height: 33px;
        padding: 5px 12px;
        font-size: 13px
    }
}

.packages__films-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: 10px;
    margin-top: auto;
    position: relative;
    z-index: 100
}

@media (max-width:1100px) {
    .packages__films-body {
        display: contents
    }
}

.packages__films-description {
    line-height: 1.1;
    font-size: 14px;
    font-weight: 600;
    padding-left: var(--paddingX);
    padding-bottom: var(--paddingY)
}

@media (max-width:1100px) {
    .packages__films-description {
        padding: 0;
        margin-bottom: 91px
    }
}

.packages__films-image-wrap {
    flex-shrink: 0
}

.packages__films-image {
    width: 175px;
    flex-shrink: 0
}

@media (max-width:1100px) {
    .packages__films-image {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 160px;
        z-index: 0
    }
}
@media (max-width:767px) {
    .packages__films-image {
        width: 130px;
    }
}
.line-rhombuses {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-grey);
    position: relative;
    height: 1px;
    background-color: currentColor
}

.line-rhombuses::after,
.line-rhombuses::before {
    content: "";
    position: absolute;
    top: 50%;
    translate: 0 -50%
}

.line-rhombuses::before {
    left: 0
}

.line-rhombuses::after {
    right: 0
}

.line-rhombuses::after,
.line-rhombuses::before,
.line-rhombuses__center {
    aspect-ratio: 1;
    width: 5px;
    background-color: currentColor;
    transform: rotate(45deg);
    border-radius: 1px
}

.section {
    --paddingTop: var(--section-padding-y);
    --paddingBottom: var(--section-padding-y);
    padding-top: var(--paddingTop);
    padding-bottom: var(--paddingBottom)
}

.section:first-child:not(.section_top-small):not(.section_top-medium) {
    --paddingTop: 60px
}

.section_bottom-large {
    --paddingBottom: 60px
}
@media (max-width:720px) {
    .section_bottom-large {
        --paddingBottom: 30px
    }
}

.section_bottom-huge {
    --paddingBottom: 90px
}

@media (max-width:720px) {
    .section_bottom-huge {
        --paddingBottom: 70px
    }
    /* Добавил */
    .section:first-child:not(.section_top-small):not(.section_top-medium) {
        --paddingTop: 20px
    }
}
/* Добавил */
.section_bottom_none {
    --paddingBottom: 0px
}
.section_top_none {
    --paddingTop: 0px
}
/* END Добавил */

.section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 24px;
    row-gap: 16px;
    margin-bottom: 24px
}

@media (max-width:720px) {
    .section__head_no-button {
        justify-content: center;
        text-align: center
    }
}

@media (max-width:720px) {
    .section__head_column-mobile {
        text-align: center;
        flex-direction: column;
        align-items: center
    }
}

.section__head-line {
    flex-grow: 1;
    min-width: 200px
}

@media (max-width:720px) {
    .section__head-line {
        display: none
    }
}

.section__head-button {
    flex-shrink: 0
}

.section__head-center {
    text-align: center;
    margin-bottom: 24px
}

.types_fill {
    background-color: var(--color-light);
    padding: 14px 0
}

.types__list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px
}

@media (max-width:1100px) {
    .types__list {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:720px) {
    .types__list {
        grid-template-columns: repeat(2, 1fr)
    }
}

.types__list_large {
    grid-template-columns: repeat(3, 1fr)
}

@media (max-width:850px) {
    .types__list_large {
        grid-template-columns: repeat(2, 1fr)
    }
}

.types__link {
    --padding: 14px;
    --colorIcon: var(--color-grey);
    --backgroundItem: var(--color-light);
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    display: flex;
    column-gap: 14px;
    justify-content: space-between;
    background-color: var(--backgroundItem);
    position: relative;
    border-radius: var(--border-radius);
    height: 100%;
    min-height: 159px;
    overflow: hidden;
    padding: var(--padding)
}
@media (max-width: 767px) {
    .types__link {
        background-color: var(--color-white);
        border: 1px solid var(--colorIcon);
    }
}
@media (hover:hover) {
    .types__link:hover {
        --colorIcon: var(--color-accent-black);
        --backgroundItem: var(--color-light6)
    }
}

@media (hover:none) {
    .types__link:active {
        --colorIcon: var(--color-accent-black);
        --backgroundItem: var(--color-light6)
    }
}

@media (max-width:568px) {
    .types__link {
        flex-direction: column
    }
}

.types_fill .types__link {
    --backgroundItem: var(--color-white)
}

.types__list_large .types__link {
    min-height: 185px
}

@media (max-width:1100px) {
    .types__list_large .types__link {
        min-height: 160px
    }
}

@media (max-width:720px) {
    .types__list_large .types__link {
        --padding: 10px;
        min-height: 140px
    }
}

@media (max-width:568px) {
    .types__list_large .types__link {
        min-height: 100px
    }
}

.types__name {
    position: relative;
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 13px;
    z-index: 100
}

.types__list_large .types__name {
    font-size: 14px
}

@media (max-width:720px) {
    .types__list_large .types__name {
        font-size: 13px
    }
}

.types__icon {
    aspect-ratio: 1;
    width: 16px;
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    position: absolute;
    left: var(--padding);
    bottom: var(--padding);
    color: var(--colorIcon);
    z-index: 100
}

.types__image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 102px;
    z-index: 0
}

@media (max-width:1100px) {
    .types__image {
        right: -44px
    }
}

.types__image-full-wrap {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    flex-grow: 1
}

.types__image-full {
    flex-shrink: 0;
    position: relative;
    width: auto;
    height: 1px;
    min-height: 100%;
    border-radius: var(--border-radius);
    object-fit: cover;
    aspect-ratio: 115/154;
    z-index: 0
}

@media (max-width:568px) {
    .types__image-full {
        width: 100%;
        height: auto;
        min-height: initial;
        aspect-ratio: 146/81;
        margin-top: -15px;
        z-index: 200
    }
}

.types__list_large .types__image {
    width: 131px;
    right: 0
}

@media (max-width:1100px) {
    .types__list_large .types__image {
        width: 102px
    }
}

@media (max-width:720px) {
    .types__list_large .types__image {
        width: 79px;
        bottom: -12px;
        right: -15px
    }
}

.experience {
    background-color: var(--color-light3);
    padding: 60px 0
}

@media (max-width:720px) {
    .experience {
        padding: 40px 0
    }
}

.experience__title {
    text-align: center;
    margin-bottom: 40px
}

.experience__list {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 40px
}

@media (max-width:1100px) {
    .experience__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }
}

@media (max-width:720px) {
    .experience__list {
        grid-template-columns: 1fr;
        gap: 12px
    }
}

.experience__item {
    --borderWidth: 1px;
    min-height: 284px;
    background-image: linear-gradient(223deg, #b89393 0, #baa2a2 39.48%, #e88c64 100%);
    position: relative;
    padding: 59px 16px 16px;
    color: var(--color-white);
    border-radius: 8px;
    border: var(--borderWidth) solid var(--color-red)
}

@media (max-width:1100px) {
    .experience__item {
        min-height: initial;
        padding: 16px
    }
}

.experience__item::after {
    content: "";
    position: absolute;
    top: calc(var(--borderWidth) * -1);
    left: calc(var(--borderWidth) * -1);
    width: 51px;
    height: 50px;
    background-image: url(../images/experience-corner.svg);
    background-size: 100% auto;
    z-index: 0
}

@media (max-width:1100px) {
    .experience__item::after {
        display: none
    }
}

.experience__item::before {
    aspect-ratio: 1;
    width: 25px;
    content: "";
    position: absolute;
    right: calc(var(--borderWidth) * -1);
    bottom: calc(var(--borderWidth) * -1);
    background-color: var(--color-red);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    border-bottom-right-radius: 8px
}

.experience__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    width: 40px;
    position: absolute;
    top: 4px;
    left: 4px;
    background: linear-gradient(135deg, #ed4d33 0, #d82e12 100%);
    box-shadow: 0 0 15px 0 rgba(163, 169, 181, .2);
    border-radius: var(--border-radius);
    color: var(--color-white);
    z-index: 100;
    flex-shrink: 0
}

@media (max-width:1100px) {
    .experience__icon {
        position: static
    }
}

.experience__icon-image {
    aspect-ratio: 1;
    width: 20px
}

.experience__head {
    margin-bottom: 16px
}

@media (max-width:1100px) {
    .experience__head {
        display: flex;
        align-items: center;
        column-gap: 16px
    }
}

.experience__name {
    font-family: var(--font-second);
    font-weight: 600;
    font-size: 18px
}

@media (max-width:720px) {
    .experience__name {
        font-size: 16px
    }
}

.experience__description {
    font-size: 14px;
    line-height: 1.28571
}

.experience__button-wrapper {
    display: flex;
    justify-content: center
}

.consultation__inner {
    --widthDots: 1625px;
    --topDots: -155px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    row-gap: 15px;
    color: var(--color-white);
    border-radius: 8px;
    position: relative;
    background: linear-gradient(211deg, #f17662 0, #ed4d33 100%);
    overflow: hidden
}

@media (max-width:930px) {
    .consultation__inner {
        background: linear-gradient(43deg, #ed4d33 0, #f17662 100%);
        flex-direction: column
    }
}
.consultation__inner::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 459px;
    aspect-ratio: 459/225;
    border-radius: 100%;
    filter: blur(150px);
    background-color: var(--color-white);
    z-index: 0
}

@media (max-width:930px) {
    .consultation__inner::after {
        width: 277px;
        aspect-ratio: 1;
        bottom: 80px
    }
}

@media (max-width:720px) {
    .consultation__inner::after {
        bottom: 15px
    }
}

@media (max-width:930px) {
    .consultation__inner::before {
        top: initial;
        right: initial;
        bottom: var(--topDots);
        transform: rotate(225deg);
        left: calc(var(--widthDots)/ 2 * -1);
        translate: 0 -50%
    }
}

.consultation__body {
    position: relative;
    z-index: 100;
    padding: 28px;
    flex: 0 1 728px
}

@media (max-width:930px) {
    .consultation__body {
        flex: initial;
        width: 100%;
        padding: 20px 20px 20px
    }
}

.consultation__logo {
    margin-bottom: 20px;
    width: 135px
}

@media (max-width:720px) {
    .consultation__logo {
        width: 125px
    }
}

.consultation__title {
    margin-bottom: 40px
}

@media (max-width:930px) {
    .consultation__title {
        max-width: 580px
    }
}

@media (max-width:1100px) {
    .consultation__title {
        margin-bottom: 20px
    }
}

.consultation__image {
    position: relative;
    z-index: 100;
    width: 573px;
    min-width: 390px
}

@media (max-width:930px) {
    .consultation__image {
        min-width: initial;
        width: 400px
    }
}

@media (max-width:720px) {
    .consultation__image {
        width: 350px
    }
}

@media (max-width:568px) {
    .consultation__image {
        width: 290px
    }
}

.form__fields {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    gap: 6px
}

.form__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px
}
/* Добавил */
.form__columns.form__columns_2 .form__columns2-item {
 grid-column: span 2 / span 2;
}
/* END Добавил */
@media (max-width:568px) {
    .form__columns {
        grid-template-columns: 1fr
    }
    /* Добавил */
    .form__columns.form__columns_2 .form__columns2-item {
        grid-column: unset;
    }
    /* END Добавил */
}

.form__buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 25px;
    row-gap: 10px
}

.field {
    --paddingY: 16px;
    --backgroundColor: var(--color-white);
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    color: var(--color-black-dark);
    background-color: var(--backgroundColor);
    border-radius: var(--border-radius);
    padding: 0 var(--paddingY);
    font-weight: 500;
    outline: 0;
    width: 100%
}

@media (max-width:720px) {
    .field {
        font-size: 14px
    }
}

.field_small {
    --paddingY: 12px
}

.field_grey {
    --backgroundColor: var(--color-light)
}

.field_icon {
    padding-right: calc(var(--paddingY) + 16px + 12px)
}

.field:focus {
    background-color: var(--color-light2)
}

.field::placeholder {
    color: var(--color-grey)
}

input.field {
    height: 46px
}

textarea.field {
    padding-top: 14px;
    padding-bottom: 14px;
    min-height: 110px
}

textarea.field_small {
    min-height: 90px
}

select.field {
    height: 46px;
    appearance: none;
    background-image: url(../images/arrow-down.svg);
    background-size: 16px;
    background-position: right 12px center;
    background-repeat: no-repeat
}

select.field:not(.is-selected) {
    color: var(--color-grey)
}

select.field option {
    background-color: var(--color-white);
    color: var(--color-black)
}

.buy-previews__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

@media (max-width:1200px) {
    .buy-previews__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px
    }
}

@media (max-width:850px) {
    .buy-previews__list {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:720px) {
    .buy-previews__list {
        gap: 16px
    }
}

@media (max-width:568px) {
    .buy-previews__list {
        grid-template-columns: 1fr
    }
}

.product-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    padding: 10px 14px 12px;
    height: 100%
}

@media (max-width:850px) {
    .product-card {
        height: auto
    }
}

@media (max-width:720px) {
    .product-card_small-mobile {
        padding: 6px
    }
}

.product-card__body {
    display: flex;
    flex-direction: column;
    padding: 0 6px;
    flex-grow: 1
}

@media (max-width:720px) {
    .product-card_small-mobile .product-card__body {
        padding: 0
    }
}

.product-card__image {
    border-radius: 4px;
    margin-bottom: 21px;
    overflow: hidden
}

@media (max-width:720px) {
    .product-card__image {
        margin-bottom: 12px
    }
}

.product-card__image {
    width: 100%;
    background-color: var(--color-black)
}

.product-card__name {
    font-size: 14px;
    line-height: 1.14286;
    margin-bottom: 10px
}

@media (max-width:720px) {
    .product-card_small-mobile .product-card__name {
        font-size: 12px;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden
    }
}

.product-card__price {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 16px
}

@media (max-width:720px) {
    .product-card_small-mobile .product-card__price {
        font-size: 13px
    }
}

.product-card__details {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 5px;
    margin-bottom: 16px
}

.product-card__details::before {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-light2);
    order: 1
}

.product-card__details-column {
    font-weight: 400;
    font-size: 12px;
    order: 2
}

.product-card__details-column:first-child {
    order: 0
}

.product-card__tooltip {
    margin-bottom: 16px
}

.product-card__buttons {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto
}

.product-card__button {
    flex: 1 0 calc((100% - 10px)/ 2);
    white-space: nowrap
}

.add-cart {
    position: relative;
    min-height: 46px
}

.add-cart_small {
    min-height: 40px
}

.add-cart.is-open .add-cart__button {
    visibility: hidden
}

.add-cart.is-open .add-cart__switch {
    visibility: visible
}

.add-cart__button {
    --backgroundColor: var(--color-red);
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    padding: 5px 10px;
    background-color: var(--backgroundColor);
    color: var(--color-white);
    border-radius: var(--border-radius)
}

@media (hover:hover) {
    .add-cart__button:hover {
        --backgroundColor: var(--color-accent-red)
    }
}

@media (hover:none) {
    .add-cart__button:active {
        --backgroundColor: var(--color-accent-red)
    }
}

.add-cart__button-icon {
    aspect-ratio: 1;
    width: 16px
}

.add-cart__switch {
    visibility: hidden;
    height: 100% !important
}

.quantity-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    min-height: 40px;
    padding: 4px 6px
}

.quantity-switch_mobile-small {
    min-height: 30px
}

.quantity-switch_grey {
    border: 1px solid var(--color-light2);
    background-color: var(--color-light);
    border-radius: 2px
}

.quantity-switch__button-grey {
    transition: .2s ease-out;
    transition-property: color, opacity;
    will-change: color, opacity;
    flex-shrink: 0;
    color: var(--color-grey);
    height: 100%
}

.quantity-switch__button-grey[disabled] {
    opacity: .5
}

@media (hover:hover) {
    .quantity-switch__button-grey:not([disabled]):hover {
        color: var(--color-accent-balck)
    }
}

@media (hover:none) {
    .quantity-switch__button-grey:not([disabled]):active {
        color: var(--color-accent-balck)
    }
}

.quantity-switch__button-grey-icon {
    aspect-ratio: 1;
    width: 20px
}

.quantity-switch__field {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    height: 100%;
    column-gap: 2px;
    min-width: 47px
}

.quantity-switch__input {
    max-width: 100%;
    width: 1em;
    min-width: 1em;
    text-align: center;
    height: 100%;
    border: .1rem solid transparent;
    outline: 0
}

.quantity-switch__input:focus {
    border-color: var(--color-light2);
    background-color: var(--color-light)
}

.quantity-switch__input::-webkit-inner-spin-button,
.quantity-switch__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.quantity-switch_all-visible .quantity-switch__delete {
    margin-right: 6px
}

.quantity-switch:not(.quantity-switch_all-visible) .quantity-switch__reduce {
    display: none
}

.quantity-switch.is-more-one:not(.quantity-switch_all-visible) .quantity-switch__reduce {
    display: block
}

.quantity-switch.is-more-one:not(.quantity-switch_all-visible) .quantity-switch__delete {
    display: none
}

.articles-preview {
    overflow: hidden
}

.articles-preview_fill {
    padding: 60px 0;
    background-color: var(--color-light)
}
@media (max-width:720px) {
    .articles-preview_fill {
        padding: 30px 0;
    }
}
.articles-preview_last {
    padding: 60px 0;
    margin-bottom: calc(var(--section-padding-y) * -2)
}

@media (max-width:720px) {
    .articles-preview_last {
        background-color: var(--color-light)
    }
}

.articles-preview__slider {
    --spaceBetween: 6px;
    margin: 0 calc(var(--spaceBetween) * -1)
}

@media (max-width:720px) {
    .articles-preview__slider {
        --spaceBetween: 8px
    }
}

.articles-preview__track {
    overflow: visible
}

@media (min-width:1101px) {
    .articles-preview__list {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr)
    }
}

.articles-preview__item {
    padding: 0 var(--spaceBetween)
}

@media (max-width:1100px) {
    .articles-preview__item {
        width: 28.5714285714%
    }
}

@media (max-width:850px) {
    .articles-preview__item {
        width: 40%
    }
}

@media (max-width:568px) {
    .articles-preview__item {
        width: 66.6666666667%
    }
}

.articles__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

@media (max-width:1100px) {
    .articles__list {
        gap: 16px
    }
}

@media (max-width:930px) {
    .articles__list {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:568px) {
    .articles__list {
        grid-template-columns: 1fr
    }
}

.articles__pagination {
    margin-top: 32px
}

@media (max-width:720px) {
    .articles__pagination {
        margin-top: 24px
    }
}

.article-card {
    display: inline-block;
    padding: 10px;
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    height: 100%;
    width: 100%
}

@media (max-width:720px) {
    .article-card_mobile-transparent {
        padding: 10px;
        border-radius: 0;
        background-color: transparent
    }

    .articles-preview__item:first-child .article-card_mobile-transparent {
        padding-left: 0
    }

    .articles-preview__item:last-child .article-card_mobile-transparent {
        padding-right: 0
    }
}

@media (hover:hover) {
    .article-card:hover .article-card__image {
        transform: scale(1.1)
    }
}

@media (hover:none) {
    .article-card:active .article-card__image {
        transform: scale(1.1)
    }
}

.article-card__image-wrapper {
    overflow: hidden;
    width: 100%;
    max-height: 160px;
    border-radius: var(--border-radius);
    background-color: var(--color-light2);
    margin-bottom: 12px
}

.article-card__image {
    transition: .2s ease-out;
    transition-property: transform;
    will-change: transform;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.article-card__date {
    display: block;
    color: var(--color-grey);
    font-size: 12px;
    margin-bottom: 12px
}

.article-card__name {
    font-weight: 600
}

.article-card__excerpt {
    font-size: 13px;
    color: var(--color-grey);
    margin-top: 10px
}

.faq__list {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
}
.faq_one_line .faq__list {
   grid-template-columns: 1fr
}
.faq_one_line.faq_max_4 .faq__list .faq__item:nth-child(n+5) {
    display: none; /* Скрываем все элементы, начиная с 5-го */
}
@media (max-width:930px) {
    .faq__list {
        grid-template-columns: 1fr
    }
}

.faq__item {
    position: relative;
}

.faq__button {
    --color: var(--color-grey);
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 20px;
    padding-bottom: 15px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color);
    text-align: left
}

/* отключил, переделал на box-shadow
.faq__button::before {  
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color)
}
*/
.faq__item {
 /* border-bottom: 1px solid var(--color-grey);*/
 box-shadow: 0px 1px var(--color-grey);
}

.faq__button[aria-expanded=true] {
    --color: var(--color-black)
}

.faq__arrow {
    transition: .4s ease;
    transition-property: transform;
    will-change: transform;
    aspect-ratio: 1;
    width: 16px;
    flex-shrink: 0
}

.faq__button[aria-expanded=true] .faq__arrow {
    transform: rotate(90deg)
}

.faq__text {
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 15px
}

.footer {
    position: relative;
    margin-top: var(--section-padding-y);
    background-color: var(--color-light);
    padding: 24px 0;
    overflow: hidden;
    flex-shrink: 0
}

.footer::before {
    content: "";
    position: absolute;
    bottom: -66px;
    right: -54px;
    opacity: .05;
    width: 297px;
    aspect-ratio: 297/292;
    background-image: url(../images/logo-only.svg);
    z-index: 0
}

@media (max-width:720px) {
    .footer::before {
        right: -72px;
        bottom: 170px
    }
}

.footer__body {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 30px;
    row-gap: 40px;
    margin-bottom: 40px
}

@media (max-width:1100px) {
    .footer__body {
        flex-wrap: wrap
    }
}

.footer__about {
    flex: 0 1 136px
}

@media (max-width:1100px) {
    .footer__about {
        flex: initial;
        width: 100%
    }
}

@media (max-width:568px) {
    .footer__about {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 136px;
        margin: 0 auto
    }
}

.footer__logo {
    width: 147px
}

.footer__company {
    display: flex;
    row-gap: 5px;
    column-gap: 15px;
    flex-shrink: 0;
    flex-direction: column
}

@media (max-width:1100px) {
    .footer__company {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        width: 100%
    }
}

.footer__company-type {
    color: var(--color-grey);
    font-size: 12px
}
.footer__company-text {
    max-width: 150px;
    color: var(--color-grey);
    font-size: 12px;
}
/* Добавил */
@media (max-width:720px) {
    .footer__company-text {
       max-width: unset;
   }
}
/* END Добавил */
.footer__label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px
}

@media (max-width:720px) {
    .footer__label {
        margin-bottom: 16px
    }
}

.footer__navigation {
    --columnGap: 40px;
    display: flex;
    row-gap: 24px;
    column-gap: var(--columnGap);
    justify-content: space-between
}

@media (max-width:1100px) {
    .footer__navigation {
        flex: 0 0 100%
    }
}

@media (max-width:850px) {
    .footer__navigation {
        flex-direction: column;
        width: 100%
    }
}

@media (max-width:720px) {
    .footer__navigation {
        --columnGap: 24px
    }
}

.footer__menu {
    display: flex;
    column-gap: var(--columnGap);
    flex-grow: 1
}

@media (max-width:720px) {
    .footer__menu {
        justify-content: space-between
    }
}

@media (max-width:720px) {
    .footer__menu-column {
        flex: 0 1 167px
    }
}

.footer__menu-column:last-child {
    margin: 0 auto
}

@media (max-width:720px) {
    .footer__menu-column:last-child {
        margin: 0
    }
}

.footer__menu-list {
    display: flex;
    flex-direction: column;
    gap: 14px
}

@media (max-width:720px) {
    .footer__menu-list {
        gap: 10px
    }
}

.footer__menu-link {
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    font-size: 13px;
    color: var(--color-grey)
}

@media (hover:hover) {
    .footer__menu-link:hover {
        color: var(--color-black)
    }
}

@media (hover:none) {
    .footer__menu-link:active {
        color: var(--color-black)
    }
}

@media (max-width:720px) {
    .footer__menu-link {
        font-size: 12px
    }
}

.footer__form {
    flex: 0 1 265px
}

@media (max-width:1100px) {
    .footer__form {
        flex: 1 0 215px;
        max-width: 265px
    }
}

@media (max-width:568px) {
    .footer__form {
        flex: 0 0 100%;
        max-width: initial
    }
}

.footer__bottom {
    position: relative;
    z-index: 100;
    border-top: 1px solid var(--color-grey);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px
}

.footer__copyright {
    display: block;
    font-size: 12px;
    color: var(--color-grey);
    order: -1
}

.footer__docs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 5px
}

.footer__docs-link {
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    color: var(--color-grey);
    font-size: 12px
}

@media (hover:hover) {
    .footer__docs-link:hover {
        color: var(--color-black)
    }
}

@media (hover:none) {
    .footer__docs-link:active {
        color: var(--color-black)
    }
}

.list-icons {
    display: flex;
    flex-direction: column;
    row-gap: 14px
}

@media (max-width:720px) {
    .list-icons {
        row-gap: 10px
    }
}

.list-icons__body {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 13px
}

@media (max-width:720px) {
    .list-icons__body {
        font-size: 12px
    }
}

.list-icons__icon {
    aspect-ratio: 1;
    width: 14px;
    flex-shrink: 0
}

@media (max-width:720px) {
    .list-icons__icon {
        aspect-ratio: 1;
        width: 12px
    }
}

.list-icons:not(.list-icons_dark) .list-icons__icon {
    color: var(--color-red)
}

.breadcrumbs {
    padding: 14px 0
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    column-gap: 14px;
    color: var(--color-grey)
}

.breadcrumbs__item:last-child {
    color: var(--color-black)
}

.breadcrumbs__icon {
    aspect-ratio: 1;
    width: 14px
}

.breadcrumbs__page_link {
    transition: .2s ease-out;
    transition-property: color;
    will-change: color
}

@media (hover:hover) {
    .breadcrumbs__page_link:hover {
        color: var(--color-black)
    }
}

@media (hover:none) {
    .breadcrumbs__page_link:active {
        color: var(--color-black)
    }
}

.text {
    line-height: 1.23;
    font-size: 13px
}

.text_small {
    max-width: var(--container-width-medium)
}

.text h1 {
    font-weight: 700;
    font-size: 24px
}

.text h2 {
    font-weight: 700;
    font-size: 20px
}

.text h1,
.text h2 {
    margin-bottom: 16px
}

.text .green-highligh:not(:first-child),
.text p:not(:first-child) {
    padding-top: .6em
}

.text ol,
.text ul {
    display: flex;
    flex-direction: column;
    row-gap: .5em;
    padding-left: .6em;
    padding-top: .6em
}

.text ol {
    counter-reset: num
}

.text ol li::before {
    counter-increment: num;
    content: counters(num, ".") ". "
    }

    .text ul li {
        position: relative;
        padding-left: .8em
    }

    .text ul li::before {
        aspect-ratio: 1;
        width: 3px;
        counter-increment: none;
        content: "";
        position: absolute;
        top: .5em;
        left: 0;
        border-radius: 50%;
        background-color: currentColor
    }

    .text .green-highlight {
        display: block;
        padding: 16px 0 16px 16px !important;
        background-color: rgba(var(--color-green-rgb), .2);
        border-left: 2px solid var(--color-green)
    }

    .text .green-highlight:not(:first-child) {
        margin-top: 24px
    }

    .text strong {
        font-weight: 700
    }

    .manufacture__about {
        text-align: center;
        margin: 0 auto 80px;
        max-width: 900px
    }

    @media (max-width:720px) {
        .manufacture__about {
            margin-bottom: 60px;
            text-align: left
        }
    }

    .manufacture__about-title {
        margin-bottom: 24px
    }

    @media (max-width:720px) {
        .manufacture__about-title {
            margin-bottom: 20px
        }
    }

    @media (max-width:720px) {
        .manufacture__about-description {
            font-size: 13px;
            margin-bottom: 20px
        }
    }

    .manufacture__head {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 24px;
        color: var(--color-red);
        margin-bottom: 24px
    }

    @media (max-width:720px) {
        .manufacture__head {
            justify-content: flex-start;
            margin-bottom: 20px
        }
    }

    .manufacture__head-line {
        flex-grow: 1
    }

    .manufacture__list {
        display: flex;
        flex-direction: column;
        row-gap: 20px
    }

    .manufacture__item {
        --padding: 24px;
        --imageWidth: 821px;
        --color: var(--color-white);
        --backgroundColor: var(--color-black);
        --colorDescription: var(--color-light2);
        --colorBlur: var(--color-white);
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        color: var(--color);
        background-color: var(--backgroundColor);
        border-radius: var(--border-radius);
        overflow: hidden
    }

    .manufacture__item:nth-child(5n+2) {
        --imageWidth: 568px;
        --color: var(--color-black);
        --backgroundColor: var(--color-light);
        --colorDescription: var(--color-black);
        --colorBlur: var(--color-light2)
    }

    .manufacture__item:nth-child(5n+3) {
        --imageWidth: 540px;
        --color: var(--color-black);
        --backgroundColor: var(--color-white);
        --colorDescription: var(--color-black);
        border: 1px solid var(--color-light)
    }

    .manufacture__item:nth-child(5n+4) {
        --imageWidth: 547px;
        --color: var(--color-black);
        --backgroundColor: var(--color-light4);
        --colorDescription: var(--color-black)
    }

    .manufacture__item:nth-child(5n+5) {
        --imageWidth: 775px
    }

    @media (max-width:1100px) {
        .manufacture__item {
            align-items: center
        }
    }

    @media (max-width:720px) {
        .manufacture__item {
            --padding: 16px;
            flex-direction: column;
            border-radius: 4px
        }
    }

    .manufacture__body {
        flex: 0 1 490px;
        padding: var(--padding);
        align-self: center
    }

    @media (max-width:720px) {
        .manufacture__body {
            width: 100%;
            flex: initial;
            margin-bottom: 24px;
            padding-bottom: 0
        }
    }

    .manufacture__name {
        font-weight: 600;
        font-size: 24px;
        margin-bottom: 40px
    }

    @media (max-width:1100px) {
        .manufacture__name {
            font-size: 20px;
            margin-bottom: 24px
        }
    }

    @media (max-width:720px) {
        .manufacture__name {
            font-size: 16px;
            margin-bottom: 16px
        }
    }

    .manufacture__description {
        font-size: 14px;
        line-height: 1.42857;
        letter-spacing: .01em;
        color: var(--colorDescription)
    }

    @media (max-width:1100px) {
        .manufacture__description {
            font-size: 13px
        }
    }

    .manufacture__description strong {
        color: var(--color)
    }

    .manufacture__image {
        width: var(--imageWidth)
    }

    @media (min-width:1201px) {
        .manufacture__image_high {
            margin-bottom: -52px
        }
    }

    .manufacture__image-mobile-wrap {
        position: relative;
        flex-shrink: 0;
        margin: var(--padding);
        margin-left: 0
    }

    @media (max-width:1100px) {
        .manufacture__image-mobile-wrap::before {
            content: "";
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            filter: blur(100px);
            translate: 0 50%;
            aspect-ratio: 345/206;
            background-color: var(--colorBlur);
            z-index: 0
        }
    }

    @media (max-width:720px) {
        .manufacture__image-mobile-wrap {
            margin: 0 var(--padding) var(--padding)
        }
        .custom_manufacture__image-mobile-wrap {
            margin:0;
        }
        .manufacture__image-mobile-wrap.custom_manufacture__image-mobile-wrap::before {
            display: none;
        }
    }

    .manufacture__image-mobile {
        position: relative;
        z-index: 100;
        width: 300px;
        flex-shrink: 0;
        border: 3px solid var(--color-white);
        border-radius: 6px
    }

    @media (max-width:720px) {
        .manufacture__image-mobile {
            width: 326px
        }
    }

    .manufacture__image-mobile-full-wrap {
        position: relative;
        flex-shrink: 0;
        z-index: 100;
        align-self: flex-end
    }

    .manufacture__image-mobile-full {
        width: 338px;
        flex-shrink: 0
    }

    @media (max-width:720px) {
        .manufacture__image-mobile-full {
            width: 358px
        }
    }

    .list {
        display: flex;
        flex-direction: column;
        row-gap: .5em;
        padding-left: .6em
    }

    .list__item {
        position: relative;
        padding-left: .8em
    }

    .list__item::before {
        aspect-ratio: 1;
        width: 3px;
        content: "";
        position: absolute;
        top: .5em;
        left: 0;
        border-radius: 50%;
        background-color: currentColor
    }

    .offer-previews__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px
    }

    @media (max-width:1100px) {
        .offer-previews__list {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media (max-width:720px) {
        .offer-previews__list {
            gap: 10px
        }
    }

    @media (max-width:568px) {
        .offer-previews__list {
            grid-template-columns: 1fr
        }
    }

    .offer-previews__button {
        display: flex;
        justify-content: center;
        margin-top: 24px
    }

    .offer-card {
        display: block;
        background: linear-gradient(48deg, #ed4d33 0, #f17662 100%);
        padding: 16px;
        color: var(--color-white);
        border-radius: 8px;
        height: 100%
    }

    @media (max-width:720px) {
        .offer-card {
            padding: 12px
        }
    }

    .offer-card__wrapper {
        position: relative;
        z-index: 100;
        display: flex;
        flex-direction: column;
        height: 100%
    }

    .offer-card__name {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 700
    }

    @media (max-width:720px) {
        .offer-card__name {
            font-size: 16px;
            margin-bottom: 12px
        }
    }

    @media (max-width:720px) {

        .offer-card__image,
        .offer-card__image-wrapper {
            order: -1
        }
    }

    .offer-card__image {
        width: 100px;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 10px;
        background-color: var(--color-white);
        box-shadow: 0 0 15px 0 rgba(152, 152, 152, .2);
        margin: 0 auto 20px
    }

    @media (max-width:720px) {
        .offer-card__image {
            margin-bottom: 12px;
            width: 100%
        }
    }

    .offer-card__list {
        font-weight: 500;
        font-size: 13px;
        margin-bottom: 10px
    }

    @media (max-width:720px) {
        .offer-card__list {
            margin-bottom: 12px
        }
    }

    .offer-card__details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: 15px;
        margin-top: auto;
        margin-bottom: 20px
    }

    @media (max-width:720px) {
        .offer-card__details {
            margin-bottom: 12px
        }
    }

    .offer-card__details-name {
        font-size: 13px;
        color: var(--color-light)
    }

    .offer-card__price {
        font-weight: 500;
        font-size: 18px
    }

    @media (max-width:720px) {
        .offer-card__price {
            font-size: 16px
        }
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 14px
    }

    @media (max-width:720px) {
        .pagination {
            column-gap: 6px
        }
    }

    .pagination__button {
        transition: .2s ease-out;
        transition-property: opacity, color;
        will-change: opacity, color;
        aspect-ratio: 1;
        width: 36px;
        display: inline-flex;
        justify-content: center;
        align-items: center
    }

    @media (hover:hover) {
        .pagination__button:hover:not([disabled]) {
            color: var(--color-accent-black)
        }
    }

    @media (hover:none) {
        .pagination__button:active:not([disabled]) {
            color: var(--color-accent-black)
        }
    }

    @media (max-width:720px) {
        .pagination__button {
            aspect-ratio: 1;
            width: 33px
        }
    }

    .pagination__button-icon {
        aspect-ratio: 1;
        width: 16px
    }

    .pagination__button_prev .pagination__button-icon {
        transform: rotate(180deg)
    }

    .pagination__button[disabled] {
        opacity: .2;
        cursor: default
    }

    .pagination__pages {
        display: flex;
        align-items: flex-end;
        column-gap: 6px;
        font-weight: 500;
        font-size: 13px;
        color: var(--color-grey)
    }

    .pagination__page {
        --backgroundColor: transparent;
        transition: .2s ease-out;
        transition-property: background-color, color;
        will-change: background-color, color;
        aspect-ratio: 1;
        width: 36px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: var(--border-radius);
        background-color: var(--backgroundColor)
    }

    @media (max-width:720px) {
        .pagination__page {
            aspect-ratio: 1;
            width: 33px
        }
    }

    @media (hover:hover) {
        .pagination__page:not(.pagination__page_current):hover {
            --backgroundColor: var(--color-light);
            color: var(--color-accent-black)
        }
    }

    @media (hover:none) {
        .pagination__page:not(.pagination__page_current):active {
            --backgroundColor: var(--color-light);
            color: var(--color-accent-black)
        }
    }

    .pagination__page_current {
        --backgroundColor: var(--color-black);
        color: var(--color-white) !important
    }

    .article__wrapper {
        max-width: var(--container-width-small)
    }

    .article__head {
        display: flex;
        align-items: flex-start;
        column-gap: 20px;
        margin-bottom: 24px;
        border-radius: var(--border-radius);
        max-width: 820px
    }

    @media (max-width:720px) {
        .article__head {
            flex-direction: column
        }
    }

    .article__head-image,
    .article__head-image-wrap {
        flex-shrink: 0
    }

    .article__head-image {
        width: 269px;
        border-radius: var(--border-radius)
    }

    @media (max-width:720px) {
        .article__head-image {
            margin-bottom: 20px
        }
    }

    @media (max-width:568px) {
        .article__head-image {
            width: 100%
        }
    }

    @media (max-width:720px) {
        .article__head-body {
            display: contents
        }
    }

    .article__head-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 16px
    }

    @media (max-width:720px) {
        .article__head-title {
            order: -1;
            margin-bottom: 20px
        }
    }

    .delivery__types {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px
    }

    @media (max-width:930px) {
        .delivery__types {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, 1fr)
        }
    }

    .delivery__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 10px;
        background-color: var(--color-light);
        border-radius: var(--border-radius)
    }

    .delivery__item_white {
        background-color: var(--color-white);
        border: 1px solid var(--color-light)
    }

    .delivery__name {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 20px
    }

    .delivery__list {
        width: 100%
    }

    .delivery__name-main {
        margin-top: 20px;
        text-align: center;
        font-weight: 600;
        font-size: 18px
    }

    .delivery__description {
        font-size: 13px
    }

    .delivery__address {
        display: flex;
        align-items: center;
        column-gap: 10px;
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--color-light2);
        font-size: 13px;
        width: 100%
    }

    .delivery__address-icon {
        aspect-ratio: 1;
        width: 14px;
        flex-shrink: 0
    }

    .square-icon {
        aspect-ratio: 1;
        width: 40px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--border-radius);
        background-color: var(--color-white);
        box-shadow: 0 0 15px 0 rgba(163, 169, 181, .2)
    }

    .square-icon__img {
        aspect-ratio: 1;
        width: 16px;
        color: var(--color-red);
        flex-shrink: 0
    }

    .list-lines {
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    .list-lines__item {
        display: flex;
        align-items: center;
        column-gap: 12px;
        background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, 0) 100%);
        border-radius: var(--border-radius);
        overflow: hidden
    }

    .payment__types {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    @media (max-width:930px) {
        .payment__types {
            grid-template-columns: 1fr
        }
    }

    .payment__item {
        position: relative;
        min-height: 361px;
        overflow: hidden;
        background-color: var(--color-fill);
        border-radius: var(--border-radius)
    }

    .payment__item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #f7eedd 0, rgba(247, 238, 221, 0) 53.43%, #353334 100%);
        z-index: 100
    }

    .payment__background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0
    }

    .payment__body {
        position: relative;
        z-index: 200;
        height: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 40px 10px 20px
    }

    .payment__name {
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 24px
    }

    .payment__description {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: auto;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.14286;
        color: var(--color-white);
        min-height: 64px
    }

    .work {
        padding: 60px 0;
        background-color: var(--color-light)
    }

    .work__list {
        --arrowsHeight: 53px;
        --gap: 12px;
        --columns: 5;
        display: flex;
        gap: var(--gap);
        flex-wrap: wrap;
        padding: var(--arrowsHeight) 0
    }

    @media (max-width:1100px) {
        .work__list {
            --columns: 3;
            padding: 0
        }
    }

    @media (max-width:720px) {
        .work__list {
            --columns: 2
        }
    }

    @media (max-width:568px) {
        .work__list {
            --columns: 1
        }
    }

    .work__item {
        display: flex;
        align-items: center;
        flex-direction: column;
        row-gap: 20px;
        padding: 20px 7px;
        border-radius: var(--border-radius);
        background: var(--color-white);
        position: relative;
        text-align: center;
        flex: 1 0 calc((100% - var(--gap) * (var(--columns) - 1))/ var(--columns))
    }

    .work__item::before {
        aspect-ratio: 1;
        width: 16px;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--color-red);
        clip-path: polygon(100% 0, 0 0, 0 100%);
        border-top-left-radius: var(--border-radius)
    }

    @media (max-width:1100px) {
        .work__item::after {
            display: none
        }
    }

    .work__item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        translate: 50% 0;
        height: var(--arrowsHeight);
        aspect-ratio: 82/53;
        background-image: url(../images/dotted-arrow.svg);
        background-size: 100% auto
    }

    .work__item:not(:last-child):nth-child(2n)::after {
        top: initial;
        bottom: 100%;
        transform: scale(1, -1)
    }

    .contacts__body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    @media (max-width:850px) {
        .contacts__body {
            grid-template-columns: 1fr
        }
    }

    .contacts__item-map {
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        overflow: hidden
    }

    .contacts__name {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--color-black-dark)
    }

    @media (max-width:720px) {
        .contacts__name {
            font-size: 14px
        }
    }

    .contacts__address {
        font-size: 13px
    }

    .contacts__schedule {
        display: flex;
        align-items: center;
        column-gap: 10px;
        margin-top: 10px;
        font-size: 13px
    }

    .contacts__schedule-icon {
        aspect-ratio: 1;
        width: 14px;
        flex-shrink: 0
    }

    .contacts__map {
        background-color: var(--color-white);
        height: 234px
    }

    @media (max-width:568px) {
        .contacts__map {
            height: 184px
        }
    }

    .contacts__map iframe {
        width: 100%;
        height: 100%
    }

    .contacts__item {
        display: flex;
        flex-direction: column;
        background-color: var(--color-light);
        border-radius: 8px;
        padding: 10px
    }

    .contacts__info {
        padding: 15px;
        background-color: var(--color-light);
        flex-grow: 1
    }

    .contacts__info-name {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px
    }

    .contacts__info-name_bottom-large {
        margin-bottom: 16px
    }

    .contacts__list {
        margin-bottom: 32px
    }

    .contacts__soc1al {
        margin-top: auto
    }

    .contacts__requisites {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 16px
    }

    .contacts__requisites-body {
        flex-grow: 1
    }

    .details-list {
        display: grid;
        grid-template-columns: min-content 1fr;
        column-gap: 13px;
        row-gap: 7px;
        font-size: 13px
    }

    .details-list__term {
        color: var(--color-grey);
        white-space: nowrap
    }

    .soc1al {
        display: flex;
        column-gap: 14px
    }

    .soc1al__link {
        transition: .2s ease-out;
        transition-property: color;
        will-change: color
    }

    @media (hover:hover) {
        .soc1al__link:hover {
            color: var(--color-accent-black)
        }
    }

    @media (hover:none) {
        .soc1al__link:active {
            color: var(--color-accent-black)
        }
    }

    .soc1al__icon {
        aspect-ratio: 1;
        width: 18px
    }

    .js_cart_container.empty_cart > * {
        display: none;
    }
    .empty_cart_info {
        display: none;
        align-items: center;
        flex-direction: column;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
        padding: 20px;
        margin-bottom: 20px;
        gap: 30px;
        text-align: center;
    }
    .js_cart_container.empty_cart > .empty_cart_info {
        display: flex;
    }
    .empty_cart_info .name {
        font-size: 22px;
        font-weight: 700;
    }

    .cart__list {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
        margin-bottom: 24px
    }

    @media (max-width:720px) {
        .cart__list {
            row-gap: 10px
        }
    }

    .cart__message:not(.is-visible) {
        display: none
    }

    .characteristics {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        font-size: 13px
    }

    .characteristics__item {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: 6px;
        row-gap: 2px;
        position: relative
    }

    @media (max-width:720px) {
        .characteristics__item {
            font-size: 12px
        }
    }

    .characteristics__item::before {
        content: "";
        flex-grow: 1;
        height: 1px;
        background-color: var(--color-light);
        order: 1
    }

    .characteristics_dark .characteristics__item::before {
        background-color: rgba(191, 191, 191, .4)
    }

    .characteristics__name {
        display: flex;
        align-items: center;
        gap: 6px;
        order: 0
    }

    .characteristics__value {
        display: flex;
        align-items: center;
        gap: 6px;
        text-align: right;
        order: 2
    }
    .characteristics__item .characteristics__value[data-input="configurator-width"], .characteristics__item .characteristics__value[data-input="configurator-height"], .characteristics__item .characteristics__value[data-input="configurator-flap"] {
        gap: 3px;
    }
    .characteristics__item .characteristics__value[data-input="configurator-width"]:after, .characteristics__item .characteristics__value[data-input="configurator-height"]:after , .characteristics__item .characteristics__value[data-input="configurator-flap"]:after {
        content: 'см';
    }

    .available {
        display: flex;
        align-items: center;
        padding: 4px;
        border-radius: 2px;
        background-color: var(--color-green-dark);
        color: var(--color-white);
        column-gap: 8px;
        font-size: 12px
    }

    @media (max-width:720px) {
        .available {
            font-size: 10px
        }
    }

    .available__icon {
        aspect-ratio: 1;
        width: 14px
    }

    @media (max-width:720px) {
        .available__icon {
            aspect-ratio: 1;
            width: 10px
        }
    }

    .attention {
        display: flex;
        column-gap: 16px;
        row-gap: 10px;
        border-radius: var(--border-radius);
        background-color: var(--color-light);
        color: var(--color-black);
        padding: 16px
    }

    @media (max-width:720px) {
        .attention:not(.attention_horizontal) {
            padding: 10px;
            align-items: center;
            flex-direction: column
        }
    }

    .attention__icon {
        aspect-ratio: 1;
        width: 16px;
        color: var(--color-red);
        flex-shrink: 0
    }

    @media (max-width:720px) {
        .attention__icon {
            aspect-ratio: 1;
            width: 14px
        }
    }

    .attention__text {
        line-height: 1.23077;
        font-weight: 500;
        font-size: 13px
    }

    @media (max-width:720px) {
        .attention:not(.attention_horizontal) .attention__text {
            text-align: center
        }
    }

    .questionnaire {
        display: flex;
        flex-direction: column;
        max-width: 800px;
        row-gap: 24px;
        margin: 0 auto
    }

    .questionnaire__group {
        padding: 16px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
        background-color: var(--color-white)
    }

    .questionnaire__group-name {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 500
    }

    .questionnaire__fields {
        display: flex;
        flex-direction: column;
        row-gap: 10px
    }

    .questionnaire__columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 6px
    }

    @media (max-width:720px) {
        .questionnaire__columns {
            row-gap: 10px;
            grid-template-columns: 1fr
        }
    }

    .questionnaire__error {
        text-align: center
    }

    .questionnaire__button {
        display: flex;
        justify-content: center
    }

    .field-grey {
        transition: .2s ease-out;
        transition-property: background-color, color;
        will-change: background-color, color;
        background-color: var(--color-light);
        border-radius: var(--border-radius);
        font-size: 13px;
        width: 100%;
        outline: 0;
        height: 41px;
        padding: 0 12px;
        font-weight: 500
    }

    @media (max-width:720px) {
        .field-grey {
            font-size: 12px
        }
    }

    .field-grey:focus {
        background-color: var(--color-light2)
    }

    .field-grey::placeholder {
        font-weight: 500;
        color: var(--color-grey)
    }

    textarea.field-grey {
        padding: 14px 16px;
        min-height: 110px
    }

    select.field-grey {
        appearance: none;
        background-image: url(../images/arrow-down.svg);
        background-size: 16px;
        background-position: right 12px center;
        background-repeat: no-repeat
    }

    select.field-grey:not(.is-selected) {
        color: var(--color-grey)
    }

    .attachment.is-attach .attachment__label {
        display: none
    }

    .attachment.is-attach .attachment__file-name {
        display: block
    }

    .attachment__body {
        display: inline-flex;
        align-items: center;
        column-gap: 10px;
        font-weight: 500;
        font-size: 13px
    }

    @media (max-width:720px) {
        .attachment__body {
            font-size: 12px
        }
    }

    .attachment__emulator {
        transition: .2s ease-out;
        transition-property: background-color;
        will-change: background-color;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1;
        width: 46px;
        border-radius: var(--border-radius);
        background-color: var(--color-light5);
        flex-shrink: 0
    }

    .attachment_dark .attachment__emulator {
        background-color: rgba(153, 153, 153, .1)
    }

    .attachment__icon {
        aspect-ratio: 1;
        width: 16px
    }

    .attachment__field:focus-visible+.attachment__body .attachment__emulator {
        outline: 2px solid var(--color-light2);
        outline-offset: 2px
    }

    .attachment__field {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        white-space: nowrap;
        clip-path: inset(100%);
        clip: rect(0 0 0 0);
        overflow: hidden
    }

    .attachment__file-name {
        display: none
    }

    .list-docs {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 40px;
        row-gap: 24px
    }

    @media (max-width:720px) {
        .list-docs_mobile-small {
            row-gap: 10px
        }
    }

    .list-docs__link {
        transition: .2s ease-out;
        transition-property: color;
        will-change: color;
        color: var(--color-grey);
        text-align: center;
        font-size: 12px
    }

    @media (hover:hover) {
        .list-docs__link:hover {
            color: var(--color-black)
        }
    }

    @media (hover:none) {
        .list-docs__link:active {
            color: var(--color-black)
        }
    }

    .form-account {
        max-width: 416px;
        width: 100%;
        margin: 0 auto;
        background-color: var(--color-light);
        border-radius: var(--border-radius);
        padding: 24px 16px
    }

    .form-account__title {
        text-align: center;
        margin-bottom: 24px;
        color: var(--color-black-dark)
    }

    .form-account__title_bottom-small {
        margin-bottom: 9px
    }

    .form-account__head-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 9px;
        margin-bottom: 24px
    }

    .form-account__head-button-label {
        text-align: center
    }

    .form-account__description {
        text-align: center;
        font-size: 13px;
        line-height: 1.23077;
        margin-bottom: 24px;
        color: var(--color-dark)
    }

    .form-account__fields {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        margin-bottom: 16px
    }

    .form-account__buttons {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: 15px;
        row-gap: 10px;
        margin-bottom: 24px
    }

    .form-account__button-center {
        display: flex;
        justify-content: center
    }

    .form-account__bottom {
        padding-top: 16px;
        border-top: 1px solid var(--color-light2)
    }

    .form-account__bottom-text {
        text-align: center
    }

    .form-account__common-error {
        font-size: 12px;
        color: var(--color-red2)
    }

    .form-account__error {
        text-align: center
    }

    .hidden-field {
        position: relative
    }

    .hidden-field__button {
        --color: var(--color-grey);
        --colorHover: var(--color-black);
        aspect-ratio: 1;
        width: 41px;
        height: 41px; /* добавил */
        display: inline-flex;
        justify-content: center;
        align-items: center;
        transition: .2s ease-out;
        transition-property: color;
        will-change: color;
        position: absolute;
        /*top: 50%; убрал */
        top: calc(50% - 20.5px);/* добавил */
        right: 0;
        /*translate: 0 -50%;убрал */
        color: var(--color)
    }

    .hidden-field__button::before {
        transition: .2s ease-out;
        transition-property: opacity, visibility;
        will-change: opacity, visibility;
        content: "";
        position: absolute;
        /*top: 50%; убрал */
        top: calc(50% - 1px);/* добавил */
        /*left: 50%;убрал */
        left: calc(50% - 10px);/* добавил */
        width: 20px;
        height: 2px;
        /*translate: -50% -50%;*/
        background-color: currentColor;
        transform: rotate(-45deg);
        border-radius: 2px;
        opacity: 0;
        visibility: hidden;
        z-index: 100
    }

    .hidden-field__button[aria-pressed=true] {
        --color: var(--color-black);
        --colorHover: var(--color-black-dark)
    }

    .hidden-field__button[aria-pressed=true]::before {
        opacity: 1;
        visibility: visible
    }

    @media (hover:hover) {
        .hidden-field__button:hover {
            --color: var(--colorHover)
        }
    }

    @media (hover:none) {
        .hidden-field__button:active {
            --color: var(--colorHover)
        }
    }

    .hidden-field__icon {
        aspect-ratio: 1;
        width: 16px;
        position: relative;
        z-index: 0
    }

    .checkbox_large .checkbox__emulator {
        aspect-ratio: 1;
        width: 16px
    }

    .checkbox_large .checkbox__icon {
        aspect-ratio: 1;
        width: 12px
    }

    .checkbox__field {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        white-space: nowrap;
        clip-path: inset(100%);
        clip: rect(0 0 0 0);
        overflow: hidden
    }

    .checkbox__body {
        display: flex;
        align-items: center;
        column-gap: 6px
    }

    .checkbox__emulator {
        --borderColor: var(--color-grey);
        --backgroundColor: transparent;
        aspect-ratio: 1;
        width: 14px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        transition: .2s ease-out;
        transition-property: border-color, background-color;
        will-change: border-color, background-color;
        border: 2px solid var(--borderColor);
        background-color: var(--backgroundColor);
        border-radius: 3px;
        flex-shrink: 0;
        color: var(--color-white)
    }

    .checkbox__emulator_white {
        color: var(--color-black)
    }

    .checkbox__icon {
        transition: .2s ease-out;
        transition-property: opacity, visibility;
        will-change: opacity, visibility;
        aspect-ratio: 1;
        width: 10px;
        opacity: 0;
        visibility: hidden
    }

    .checkbox__text {
        font-size: 12px
    }

    .checkbox__text_small-mobile {
        font-size: 11px
    }

    .checkbox_large .checkbox__text:not(.checkbox__text_small-mobile) {
        font-size: 13px
    }

    .checkbox__field:checked+.checkbox__body .checkbox__emulator {
        --backgroundColor: var(--color-black);
        --borderColor: var(--color-black)
    }

    .checkbox__field:checked+.checkbox__body .checkbox__emulator_white {
        --backgroundColor: var(--color-white);
        --borderColor: var(--color-white)
    }

    .checkbox__field:checked+.checkbox__body .checkbox__icon {
        opacity: 1;
        visibility: visible
    }

    .checkbox__field:focus-visible+.checkbox__body .checkbox__emulator {
        outline: 1px solid var(--color-black);
        outline-offset: 2px
    }

    .checkbox__field:focus-visible+.checkbox__body .checkbox__emulator_white {
        outline-color: var(--color-white)
    }

    .steps-form__item {
        display: none
    }

    .steps-form__item.is-visible {
        display: block
    }

    .popup {
        background-color: var(--color-backdrop);
        padding: var(--dialog-padding-y) var(--container-padding-x)
    }

    @media (max-width:720px) {
        .popup {
            padding-left: 10px;
            padding-right: 10px
        }
    }

    .popup__body {
        --padding: 16px;
        background-color: var(--color-white);
        border-radius: 8px;
        width: 100%;
        max-width: 418px
    }

    .popup__body_large {
        max-width: 608px
    }

    .popup__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 30px;
        padding: var(--padding);
        border-bottom: 1px solid var(--color-light)
    }

    .popup__close {
        transition: .2s ease-out;
        transition-property: color;
        will-change: color;
        aspect-ratio: 1;
        width: 18px;
        overflow: hidden
    }

    .popup__close-icon {
        aspect-ratio: 1;
        width: 100%
    }

    @media (hover:hover) {
        .popup__close:hover {
            color: var(--color-accent-black)
        }
    }

    @media (hover:none) {
        .popup__close:active {
            color: var(--color-accent-black)
        }
    }

    .popup__main {
        padding: var(--padding);
        padding-top: 24px
    }

    .form-small {
        width: 100%
    }

    .form-small__fields {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        margin-bottom: 24px
    }

    .form-small__checkbox {
        margin-top: 16px
    }

    .notice {
        background-color: var(--color-backdrop);
        padding: var(--dialog-padding-y) var(--container-padding-x)
    }

    @media (max-width:720px) {
        .notice {
            padding-left: 10px;
            padding-right: 10px
        }
    }

    .notice__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px;
        border: 1px solid var(--color-light2);
        background: linear-gradient(180deg, #ffe2de 0, #fff 100%);
        border-radius: var(--border-radius);
        max-width: 300px;
        width: 100%
    }

    @media (max-width:568px) {
        .notice__body {
            max-width: initial
        }
    }

    .notice__image {
        width: 200px;
        margin-bottom: 24px
    }

    .notice__line {
        margin-bottom: 16px;
        width: 100%
    }

    .notice__title {
        text-align: center;
        margin-bottom: 16px
    }
    .notice__text {
     text-align: center;
     margin-bottom: 16px
 }

 .product {
    border: 1px solid var(--color-light);
    background: var(--color-white);
    border-radius: var(--border-radius)
}

.product_shadown {
    border: 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
}

.product__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px
}

@media (max-width:720px) {
    .product__head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 12px;
        row-gap: 6px
    }
}

.product__name {
    font-weight: 500;
    font-size: 16px
}

@media (max-width:720px) {
    .product__name {
        font-size: 14px
    }
}

.product__characteristics {
    font-size: 12px
}
@media (min-width: 768px) {
    .cart__list .product__characteristics {
        max-width: 50%;
    }
}

.product__composition {
    padding: 12px
}

.product__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 16px;
    padding: 12px;
    background-color: var(--color-light)
}

@media (max-width:568px) {
    .product__bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
        row-gap: 0
    }
}

.product__price {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 10px;
    flex-grow: 1
}

@media (max-width:720px) {
    .product__price {
        column-gap: 32px
    }
}

.product__price_small {
    column-gap: 24px
}

.product__price_small .product__price-value {
    font-size: 12px
}

.product__price-name {
    font-size: 12px;
    color: var(--color-grey);
    margin-bottom: 4px
}

@media (max-width:720px) {
    .product__price-name {
        font-size: 10px
    }
}

.product__price-value_bold {
    font-size: 16px;
    font-weight: 600
}

.product__quantity {
    min-width: 114px
}

@media (max-width:720px) {
    .product__quantity {
        min-width: 108px
    }
}

@media (max-width:568px) {
    .product__quantity {
        margin-bottom: 16px
    }
}

.account__tablist {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px
}

@media (min-width:1101px) {
    .account__tablist {
        display: none
    }
}

.account__body {
    display: flex;
    align-items: flex-start;
    column-gap: 24px
}

@media (min-width:1101px) {
    .account__tabpanel {
        display: block !important
    }
}

.account__personal {
    flex: 0 1 416px
}

@media (max-width:1100px) {
    .account__personal {
        flex: 0 0 100%
    }
}

.account__sidebar {
    display: flex;
    flex-direction: column;
    row-gap: 14px
}

.account__history {
    flex: 0 1 908px;
    position: relative
}

.account__history::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(0, #fff, rgba(255, 255, 255, 0))
}

.account__history-scroll {
    overflow: auto;
    max-height: 1393px
}

@media (max-width:720px) {
    .account__history-scroll {
        max-height: 930px
    }
}

@media (max-width:1100px) {
    .account__history {
        flex: 0 0 100%
    }
}

.orders {
    border: 1px solid var(--color-light);
    border-radius: var(--border-radius);
    background-color: var(--color-light);
    padding: 16px
}

@media (max-width:720px) {
    .orders {
        padding: 12px
    }
}

.orders__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 10px;
    margin-bottom: 16px
}

.orders__head-contcts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px
}

.orders__head-contcts-name {
    font-weight: 500;
    font-size: 12px;
    color: var(--color-grey)
}

.orders__button {
    margin-bottom: 16px
}

.orders__list {
    display: flex;
    flex-direction: column;
    row-gap: 10px
}

.orders__item {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: 16px
}

.orders__item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 30px;
    row-gap: 10px;
    margin-bottom: 16px
}

.orders__item-title {
    color: var(--color-red)
}

.orders__item-total {
    display: flex;
    align-items: center;
    column-gap: 16px;
    font-size: 14px
}

@media (max-width:720px) {
    .orders__item-total {
        font-size: 13px;
        column-gap: 12px
    }
}

.orders__item-quantity {
    font-weight: 500
}

.orders__item-sum {
    font-weight: 500;
    color: var(--color-red)
}

.orders__item-goods {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    margin-bottom: 16px
}

.orders__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-black);
    border-radius: var(--border-radius);
    color: var(--color-white);
    column-gap: 30px;
    row-gap: 16px;
    padding: 10px
}

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

.orders__total_delivered {
    background-color: var(--color-light);
    color: var(--color-black)
}

.orders__total_delivered .orders__total-name {
    color: var(--color-grey)
}

.orders__total-info {
    font-size: 12px
}

.orders__total-name {
    margin-bottom: 6px
}

.orders__total-date {
    font-weight: 500
}

.orders__total-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

@media (max-width:720px) {
    .orders__total-buttons {
        width: 100%
    }
}

@media (max-width:720px) {
    .orders__total-button {
        flex-grow: 1
    }
}

.contacts-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px
}

.contacts-list__body {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    column-gap: 4px
}

.contacts-list__icon {
    aspect-ratio: 1;
    width: 14px;
    flex-shrink: 0;
    color: var(--color-black-dark)
}

.form-edit {
    border: 1px solid var(--color-light);
    border-radius: var(--border-radius);
    padding: 16px
}

@media (max-width:720px) {
    .form-edit {
        padding: 12px
    }
}

.form-edit__title {
    margin-bottom: 10px
}

@media (max-width:720px) {
    .form-edit__title {
        margin-bottom: 16px
    }
}

.form-edit__fields {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin-bottom: 10px
}

.tablist__tabpanel:not(.is-active) {
    display: none
}

.total {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 16px;
    border-radius: var(--border-radius);
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 14px 16px
}

.total__amount {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%
}

.total__amount-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 5px;
    font-size: 13px
}

.total__amount-value {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    column-gap: 6px;
    font-weight: 500
}

.total__amount-attention {
    transition: .2s ease-out;
    transition-property: visibility, opacity;
    will-change: visibility, opacity;
    aspect-ratio: 1;
    width: 14px;
    opacity: 0;
    color: var(--color-red);
    flex-shrink: 0;
    visibility: hidden
}

.total__amount-attention.is-visible {
    opacity: 1;
    visibility: visible
}

.total__message {
    width: 100%
}

.order-details {
    display: flex;
    flex-direction: column;
    row-gap: 16px
}

@media (max-width:720px) {
    .order-details {
        row-gap: 24px
    }
}

.order-details__composition {
    position: relative
}

.order-details__composition::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0, rgba(217, 217, 217, .6) 100%);
    z-index: 100;
    pointer-events: none
}

.order-details__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    overflow: auto;
    max-height: 367px
}

.order-details__contacts {
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    padding: 16px
}

.order-details__name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px
}

@media (max-width:720px) {
    .not-found {
        text-align: center
    }
}

.not-found__description {
    margin-bottom: 16px
}

.catalog__filter {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 16px;
    margin-bottom: 24px
}

@media (max-width:1100px) {
    .catalog__filter {
        flex-direction: column-reverse;
        row-gap: 0
    }
}

@media (max-width:720px) {
    .catalog__filter {
        padding-bottom: 16px;
        border-bottom: 1px solid var(--color-light)
    }
}

.catalog__filter-item-select {
    display: flex;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    flex-wrap: wrap
}

@media (max-width:720px) {
    .catalog__filter-item-select {
        column-gap: 10px
    }
}

.catalog__filter-item-sort {
    display: flex;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    flex-shrink: 0
}

@media (max-width:1100px) {
    .catalog__filter-item-sort {
        width: 100%;
        margin-bottom: 16px
    }
}

@media (max-width:720px) {
    .catalog__filter-item-sort {
        flex-wrap: wrap
    }
}

.catalog__filter-drop-down {
    flex-grow: 1
}

.catalog__filter-checkbox {
    padding: 0 12px
}

@media (max-width:720px) {
    .catalog__filter-checkbox {
        margin-top: 6px;
        width: 100%
    }
}

.catalog__filter-sort {
    padding: 0 8px
}

.catalog__filter-icon {
    aspect-ratio: 1;
    width: 44px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    background-color: var(--color-light);
    border-radius: 2px
}

.catalog__filter-icon-img {
    aspect-ratio: 1;
    width: 14px
}

.catalog__products-item:not(.is-active) {
    display: none
}

.catalog__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

@media (max-width:1100px) {
    .catalog__cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px
    }
}

@media (max-width:850px) {
    .catalog__cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:720px) {
    .catalog__cards {
        gap: 10px
    }
}

.catalog__pagination {
    margin-top: 32px
}

.switch-buttons {
    display: flex;
    border-radius: 2px;
    background-color: var(--color-light);
    position: relative
}

.switch-buttons__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    width: 40px;
    height: 45px;
    color: var(--color-grey)
}

.switch-buttons__button[aria-pressed=true] {
    color: var(--color-black)
}

.switch-buttons__button-icon {
    aspect-ratio: 1;
    width: 16px
}

.switch-buttons::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 50%;
    translate: -50% 0;
    width: 1px;
    background-color: var(--color-light2)
}

.checkbox-filter__field {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden
}

.checkbox-filter__body {
    display: flex;
    align-items: center;
    column-gap: 6px
}

.checkbox-filter__label {
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    font-size: 13px;
    color: var(--color-grey)
}

.checkbox-filter__field:checked+.checkbox-filter__body .checkbox-filter__label {
    color: var(--color-accent-black)
}

.checkbox-filter__body .checkbox-filter__icon {
    transition: .3s all linear!important;
}
.checkbox-filter__field:checked+.checkbox-filter__body .checkbox-filter__icon {
    color: var(--color-accent-black);
    transform: rotate(180deg);
}

.checkbox-filter__field:focus-visible+.checkbox-filter__body {
    outline: 2px solid #00f;
    border-radius: 2px
}

.checkbox-filter__icon {
    aspect-ratio: 1;
    width: 14px;
    flex-shrink: 0
}

.tooltip {
    --color: var(--color-grey);
    --colorHover: var(--color-accent-black);
    display: flex;
    position: relative;
    flex-shrink: 0
}

.tooltip_dark {
    --color: var(--color-black);
    --colorHover: var(--color-black-dark)
}

.tooltip_hover-white {
    --colorHover: var(--color-accent-white)
}

.tooltip__button {
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    color: var(--color)
}

@media (hover:hover) {
    .tooltip__button:hover {
        color: var(--colorHover)
    }
}

@media (hover:none) {
    .tooltip__button:active {
        color: var(--colorHover)
    }
}

.tooltip__button-icon {
    aspect-ratio: 1;
    width: 16px
}

.tooltip__hint {
    --offsetX: 8px;
    --backgroundColor: var(--color-light6);
    transition: .2s ease-out;
    transition-property: visibility, opacity;
    will-change: visibility, opacity;
    position: absolute;
    right: 0;
    translate: var(--offsetX) 0;
    margin-bottom: 12px;
    bottom: 100%;
    text-align: center;
    width: 180px;
    font-size: 12px;
    visibility: hidden;
    opacity: 0;
    border-radius: var(--border-radius);
    background-color: var(--backgroundColor);
    color: var(--color-black);
    padding: 5px
}

.tooltip__hint::before {
    aspect-ratio: 1;
    width: 9px;
    content: "";
    position: absolute;
    background-color: var(--backgroundColor);
    top: 100%;
    right: var(--offsetX);
    translate: -50% -50%;
    transform: rotate(45deg);
    border-bottom-right-radius: 1px
}

.tooltip_left .tooltip__hint {
    right: initial;
    left: 0;
    translate: calc(var(--offsetX) * -1) 0
}

.tooltip_left .tooltip__hint::before {
    right: initial;
    left: var(--offsetX);
    translate: 50% -50%
}

.tooltip.is-visible .tooltip__hint {
    visibility: visible;
    opacity: 1
}

.drop-down {
    position: relative;
    display: inline-block;
    min-width: 200px;
    min-height: 49px;
    color: var(--color-black)
}

@media (max-width:720px) {
    .drop-down {
        min-width: 174px;
        min-height: 44px
    }
}

.drop-down::before {
    aspect-ratio: 1;
    width: 16px;
    content: "";
    background-image: url(../images/arrow-down.svg);
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    right: 12px;
    translate: 0 -50%;
    /* Добавил */
    pointer-events: none;
}

@media (max-width:720px) {
    .drop-down::before {
        aspect-ratio: 1;
        width: 14px
    }
}

.drop-down__label {
    position: absolute;
    top: 8px;
    left: 12px;
    right: 12px;
    font-size: 13px;
    display: block;
    pointer-events: none
}

@media (max-width:720px) {
    .drop-down__label {
        font-size: 12px;
        left: 8px;
        right: 8px
    }
}

.drop-down__select {
    --backgroundColor: var(--color-light);
    width: 100%;
    color: var(--color-grey);
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    padding-top: 25px;
    padding-bottom: 7px;
    padding-left: 12px;
    padding-right: 34px;
    border-radius: var(--border-radius);
    background: var(--backgroundColor);
    outline: 0;
    height: 100%;

    /*добавил*/
    cursor: pointer;
}

.drop-down__select:focus {
    --backgroundColor: var(--color-light2) !important
}

@media (max-width:720px) {
    .drop-down__select {
        padding-top: 24px;
        font-size: 12px;
        padding-left: 8px;
        padding-right: 28px
    }
}

.drop-down__select.is-selected {
    font-weight: 500;
    color: var(--color-black)
}

.drop-down__select option {
    background-color: var(--color-white);
    color: var(--color-black)
}

.drop-down_white .drop-down__select {
    --backgroundColor: var(--color-white)
}

.tooltip-group {
    display: flex;
    align-items: center;
    column-gap: 4px
}

.products-list {
    --widthHead: 700px
}

@media (max-width:1300px) {
    .products-list {
        --widthHead: 530px
    }
}

.products-list__head {
    padding: 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-light)
}

.products-list__head-inner {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 10px;
    max-width: var(--widthHead);
    width: 100%
}

.products-list__head-name {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
    min-height: 44px
}

.products-list__body {
    display: flex;
    flex-direction: column;
    row-gap: 10px
}

.products-list__item {
    display: flex;
    align-items: center;
    column-gap: 20px;
    justify-content: space-between;
    border: 1px solid var(--color-light);
    border-radius: var(--border-radius);
    background: var(--color-light);
    padding: 10px
}

@media (max-width:1100px) {
    .products-list__item {
        align-items: stretch
    }
}

@media (max-width:568px) {
    .products-list__item {
        flex-direction: column;
        row-gap: 15px
    }
}

.products-list__main {
    display: contents
}

@media (max-width:1100px) {
    .products-list__main {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        max-width: 420px;
        width: 100%;
        max-width: initial
    }
}

.products-list__specifications {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    flex: 0 0 var(--widthHead)
}

@media (max-width:1100px) {
    .products-list__specifications {
        flex: initial;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: auto
    }
}

.products-list__cell {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    text-align: center
}

@media (max-width:568px) {
    .products-list__cell {
        flex: 1 0 calc(33.3333333333% - 20px)
    }
}

.products-list__name {
    font-size: 12px
}

@media (min-width:1101px) {
    .products-list__name:not(.products-list__name_visible) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        white-space: nowrap;
        clip-path: inset(100%);
        clip: rect(0 0 0 0);
        overflow: hidden
    }
}

@media (min-width:1101px) {
    .products-list__name_visible {
        order: 2
    }
}

@media (max-width:1100px) {
    .products-list__name {
        font-size: 11px;
        color: var(--color-grey);
        margin-bottom: 2px
    }
}

.products-list__value {
    font-weight: 500
}

@media (max-width:720px) {
    .products-list__value {
        font-size: 12px
    }
}

.products-list__buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0
}
@media (min-width: 1024px) {
    .products-list__body .products-list__buttons { /*добавил */
        min-width: 266px;
        justify-content: right;
    }
}
@media (max-width:1100px) {
    .products-list__buttons {
        flex-direction: column
    }
}

@media (max-width:568px) {
    .products-list__buttons {
        align-items: flex-end;
        flex-direction: row;
        justify-content: space-between
    }
}

.products-list__link-button {
    font-size: 13px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--color-grey);
    font-weight: 500;
    margin-bottom: auto
}

@media (max-width:568px) {
    .products-list__link-button {
        margin-bottom: 0
    }
}

.products-list__add {
    width: 130px;
    flex-shrink: 0
}

.card__body {
    display: flex;
    align-items: flex-start;
    column-gap: 20px
}

@media (max-width:850px) {
    .card__body {
        flex-direction: column;
        align-items: stretch
    }
}

.card__images {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    flex: 0 1 591px;
    min-width: 370px
}

@media (max-width:850px) {
    .card__images {
        flex: initial;
        margin-bottom: 20px;
        min-width: initial
    }
}

.card__slider {
    border-radius: var(--border-radius);
    overflow: hidden;
    /*aspect-ratio: 1*/
}

.card__slider.custom_galery_plenka {
  aspect-ratio: unset;
}
.card__slider-slide {
    background-color: var(--color-fill)
}

.card__slider-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--color-black2)
}

.card__slider-chart-body {
    max-width: 450px
}

@media (max-width:850px) {
    .card__slider-chart-body {
        max-width: 600px
    }
}

.card__slider-characteristic {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 100
}

@media (max-width:1100px) {
    .card__slider-characteristic {
        left: 5px;
        bottom: 5px
    }
}

.card__slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

}
/* Добавил */ 
@media (max-width: 767px){
    .card__slider-image {
       aspect-ratio: 1;
   }
}
/* END Добавил */ 
.card__thumbnails {
    margin: 0 -5px
}

.card__thumbnails-slide {
    padding: 0 5px;
    cursor: pointer
}

.card__thumbnails-image {
    transition: .2s ease-out;
    transition-property: opacity;
    will-change: opacity;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--color-light);
    border-radius: var(--border-radius);
    object-fit: cover;
    opacity: .3
}

.card__thumbnails-slide.is-active .card__thumbnails-image {
    opacity: 1
}

.card__info {
    display: flex;
    flex-direction: column;
    padding-top: 14px;
    flex: 0 1 737px
}

@media (max-width:850px) {
    .card__info {
        width: 100%;
        flex: initial;
        display: contents
    }
}

.card__title {
    font-size: 18px;
    line-height: .88889;
    color: var(--color-black-dark);
    margin-bottom: 24px
}

@media (max-width:850px) {
    .card__title {
        order: -1;
        margin-bottom: 20px;
        font-size: 22px
    }
}

@media (max-width:720px) {
    .card__title {
        font-size: 18px
    }
}

.card__price {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    row-gap: 7px
}

.card__price-cost {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    font-size: 32px;
    font-weight: 500
}
.card__price-cost .card__price-item:first-child { /* Добавил */
    color: var(--color-green-dark);
}
@media (max-width:720px) {
    .card__price-cost {
        font-size: 24px
    }
}

.card__characteristics {
    margin-bottom: 24px
}
@media (min-width: 851px) {
    .card__characteristics {
        max-width: 376px;
    }
}
.card__availability {
    margin-bottom: 24px
}

.card__checkbox {
    margin-bottom: 24px
}

.card__buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 24px
}

@media (max-width:720px) {
    .card__buttons {
        flex-wrap: wrap
    }
}

.card__add-cart {
    flex: 0 1 172px
}

@media (max-width:720px) {
    .card__add-cart {
        flex: 1 1 calc((100% - 10px)/ 2)
    }
}

.card__button {
    flex: 0 1 194px;
    white-space: nowrap
}

@media (max-width:720px) {
    .card__button {
        flex: 1 1 calc((100% - 10px)/ 2)
    }
}

.card__attention {
    margin-bottom: 24px
}

.characteristic {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-white);
    background-color: rgba(242, 242, 242, .1);
    border-radius: 4px;
    padding: 10px
}

@media (max-width:1100px) {
    .characteristic {
        font-size: 12px;
        padding: 8px;
        border-radius: 2px
    }
}

.characteristic__icon {
    aspect-ratio: 1;
    width: 16px
}

@media (max-width:720px) {
    .characteristic__icon {
        aspect-ratio: 1;
        width: 14px
    }
}

.chart {
    padding: 44px;
    background-color: var(--color-black2)
}

@media (max-width:720px) {
    .chart_small-mobile {
        padding: 18px
    }
}

.chart__wrapper {
    position: relative
}

.chart__line {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--w);
    transform: rotate(var(--rotate));
    border-radius: 60px;
    background-color: rgba(153, 153, 153, .5);
    height: 1%;
    z-index: 100
}

@media (max-width:720px) {
    .chart__line {
        row-gap: 4px
    }
}

.chart__line-label {
    --offsetY: 6px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50% 0;
    transform: translateY(calc(var(--offsetY) * -1));
    text-align: center;
    color: var(--color-white);
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap
}

@media (max-width:720px) {
    .chart__line-label {
        --offsetY: 4px;
        font-size: 10px
    }
}

.chart__line_reverse .chart__line-label {
    top: 100%;
    bottom: initial;
    transform: translateY(var(--offsetY))
}

.chart_small-mobile .chart__line-label {
    font-size: 8px
}

.chart__image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain
}
.card__slider.custom_galery_plenka .chart__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset;
}

.color {
    aspect-ratio: 1;
    width: 14px;
    background-color: var(--color);
    border: 1px solid var(--color-light2);
    border-radius: 50%;
    flex-shrink: 0
}

.other-sizes__title {
    font-family: var(--font-second);
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px
}

.settings {
    position: relative
}

.settings__line {
    --height: 2px;
    transition: .2s ease-out;
    transition-property: opacity, visibility;
    will-change: opacity, visibility;
    border-radius: 60px;
    background-color: rgba(153, 153, 153, .5)
}

.settings__line:not(.settings__line_vertical) {
    height: var(--height)
}

.settings__line.is-hidden {
    opacity: 0;
    visibility: hidden
}

.settings__line_vertical {
    width: var(--height)
}

.settings__line_top {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    margin-bottom: 4px
}

.settings__line_left {
    position: absolute;
    top: 13%;
    bottom: 0;
    right: 100%;
    margin-right: 7px
}

.settings__line_right {
    position: absolute;
    top: 0;
    height: 11%;
    left: 100%;
    margin-left: 7px
}

.settings__line-label {
    position: absolute;
    text-align: center;
    font-weight: 500;
    font-size: 10px;
    white-space: nowrap
}

.settings__line:not(.settings__line_vertical) .settings__line-label {
    bottom: 100%;
    left: 50%;
    translate: -50% 0;
    margin-bottom: 3px
}

.settings__line_vertical .settings__line-label {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    top: 50%;
    width: 1px;
    height: 1px;
    transform: rotate(-90deg)
}

.settings__line_vertical .settings__line-label:not(.settings__line_vertical.settings__line-label_right) {
    right: 100%;
    margin-right: 3px
}

.settings__line_vertical .settings__line-label_right {
    transform: rotate(90deg);
    left: 100%;
    margin-left: 3px
}

.settings__range-top {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 100%;
    margin-bottom: 6px;
    z-index: 100
}

.settings__range-left {
    position: absolute;
    top: 7%;
    bottom: -4%;
    right: 100%;
    height: auto;
    margin-right: 3px;
    z-index: 0
}

.settings__range-right {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 5px;
    height: 11%;
    z-index: 0
}

.settings__images {
    position: relative
}

.settings__image-characteristic {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    font-weight: 500;
    font-size: 13px;
    z-index: 100;
    white-space: nowrap
}

.settings__image-characteristic_small {
    font-size: 11px
}

@media (max-width:720px) {
    .settings__image-characteristic {
        font-size: 10px
    }
}

.settings__image-wrapper {
    transition: .2s ease-out;
    transition-property: visibility, opacity;
    will-change: visibility, opacity;
    position: relative;
    z-index: 0;
    display: none
}

.settings__image-wrapper.is-visible {
    display: block
}

.settings__image {
    min-width: 100%;
    background-color: var(--color-black)
}

.slider-range {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--color-white);
    row-gap: 4px
}

.slider-range_vertical {
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: column
}

.slider-range__value {
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap
}

@media (max-width:720px) {
    .slider-range__value {
        font-size: 10px
    }
}

.slider-range__body {
    --height: 5px;
    --handleWidth: 12px;
    transition: .2s ease-out;
    transition-property: opacity, visibility;
    will-change: opacity, visibility;
    background: rgba(153, 153, 153, .2);
    border-radius: 60px;
    border: 0;
    box-shadow: none
}

.slider-range__body.is-hidden {
    opacity: 0;
    visibility: hidden
}

.slider-range__body.noUi-target {
    border: 0;
    box-shadow: none
}

.slider-range__body .noUi-handle {
    background-color: var(--color-white);
    cursor: pointer;
    outline-offset: 2px
}

.slider-range__body .noUi-handle::after,
.slider-range__body .noUi-handle::before {
    display: none
}

.slider-range__body .noUi-tooltip {
    border: 0;
    font-size: 12px;
    background: var(--color-black2);
    border-radius: var(--border-radius);
    color: var(--color-white)
}

@media (max-width:720px) {
    .slider-range__body .noUi-tooltip {
        font-size: 10px
    }
}

.slider-range__body .noUi-touch-area {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    width: auto;
    height: auto
}
.slider-range:not(.slider-range_vertical) .slider-range__body {
    flex: 0 0 100%;
    height: var(--height);
    padding: 0 calc(var(--handleWidth)/ 2)
}

.slider-range:not(.slider-range_vertical) .slider-range__body .noUi-origin {
    top: initial;
    bottom: 0
}

.slider-range:not(.slider-range_vertical) .slider-range__body .noUi-handle {
    top: initial;
    bottom: 0;
    width: var(--handleWidth);
    height: var(--height);
    right: 0;
    translate: 50% 0
}

.slider-range:not(.slider-range_vertical) .slider-range__body .noUi-tooltip {
    padding: 2px 21px;
    margin-bottom: 3px
}

@media (max-width:720px) {
    .slider-range:not(.slider-range_vertical) .slider-range__body .noUi-tooltip {
        padding-left: 15px;
        padding-right: 15px
    }
}

.slider-range:not(.slider-range_vertical) .slider-range__body .noUi-tooltip::after,
.slider-range:not(.slider-range_vertical) .slider-range__body .noUi-tooltip::before {
    aspect-ratio: 1;
    width: 14px;
    content: "";
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    background-image: url(../images/arrow-right.svg);
    background-size: 100% auto
}

@media (max-width:720px) {

    .slider-range:not(.slider-range_vertical) .slider-range__body .noUi-tooltip::after,
    .slider-range:not(.slider-range_vertical) .slider-range__body .noUi-tooltip::before {
        aspect-ratio: 1;
        width: 10px
    }
}

.slider-range:not(.slider-range_vertical) .slider-range__body .noUi-tooltip::after {
    transform: rotate(180deg);
    left: 2px
}

.slider-range:not(.slider-range_vertical) .slider-range__body .noUi-tooltip::before {
    right: 2px
}

.slider-range_vertical .slider-range__body {
    padding: calc(var(--handleWidth)/ 2) 0;
    width: var(--height);
    height: 100%
}

.slider-range_vertical .slider-range__body .noUi-origin {
    left: initial;
    right: 0
}

.slider-range_vertical .slider-range__body .noUi-handle {
    left: initial;
    right: 0;
    width: var(--height);
    height: var(--handleWidth);
    bottom: 0;
    translate: 0 50%
}

.slider-range_vertical .slider-range__body .noUi-tooltip {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 21px 2px;
    margin: 0 3px;
    width: 3.5em
}

@media (max-width:720px) {
    .slider-range_vertical .slider-range__body .noUi-tooltip {
        padding-top: 15px;
        padding-bottom: 15px
    }
}

.slider-range_vertical .slider-range__body .noUi-tooltip::after,
.slider-range_vertical .slider-range__body .noUi-tooltip::before {
    aspect-ratio: 1;
    width: 14px;
    content: "";
    position: absolute;
    left: 50%;
    translate: -50% 0;
    background-image: url(../images/arrow-right.svg);
    background-size: 100% auto
}

@media (max-width:720px) {

    .slider-range_vertical .slider-range__body .noUi-tooltip::after,
    .slider-range_vertical .slider-range__body .noUi-tooltip::before {
        aspect-ratio: 1;
        width: 10px
    }
}

.slider-range_vertical .slider-range__body .noUi-tooltip::after {
    transform: rotate(270deg);
    top: 2px
}

.slider-range_vertical .slider-range__body .noUi-tooltip::before {
    transform: rotate(90deg);
    bottom: 2px
}

.slider-range_vertical-right .slider-range__body .noUi-tooltip {
    left: 100%
}

.configurator__body {
    display: flex;
    align-items: flex-start;
    column-gap: 20px;
    row-gap: 10px;
    margin-bottom: 24px
}

@media (max-width:1100px) {
    .configurator__body {
        flex-direction: column
    }
}

.configurator__settings {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 1 668px;
    min-height: 647px;
    background-color: var(--color-black2);
    border-radius: var(--border-radius);
    color: var(--color-white)
}

@media (max-width:1100px) {
    .configurator__settings {
        flex: initial;
        width: 100%;
        min-height: initial
    }
}

@media (max-width:720px) {
    .configurator__settings {
        aspect-ratio: 1
    }
}

.configurator__settings-body {
    max-width: 235px;
    margin: 70px 70px 55px
}

@media (max-width:1100px) {
    .configurator__settings-body {
        max-width: 200px
    }
}

@media (max-width:568px) {
    .configurator__settings-body {
        max-width: 170px
    }
}

.configurator__form {
    flex: 0 1 680px;
    padding: 14px 0
}

@media (max-width:1100px) {
    .configurator__form {
        flex: initial;
        width: 100%
    }
}

.configurator__description {
    font-weight: 500;
    margin-bottom: 24px
}

/* добавил фон для текста конфигуратора*/
.configurator__description {
    overflow: hidden;
    max-width: 48.6%;
    color: var(--color-white);
    background: var(--color-black);
    position: relative;
    padding: 20px;
    border-radius: var(--border-radius);
}
.configurator__description::after {
        content: "";
    position: absolute;
    right: 0px;
    left: 0px;
    margin: auto;
    bottom: -90px;
    width: 160px;
    height: 106px;
    filter: blur(70px);
    background-color: var(--color-white);
    z-index: 0;
    border-radius: 100%;
}
@media (max-width: 1100px) {
    .configurator__description {
        max-width: 100%;
        text-align: center;
    }
}
/* END добавил фон для текста конфигуратора*/

.configurator__options {
    margin-bottom: 16px
}

.configurator__options-body {
    padding: 12px;
    color: var(--color-white);
    border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
    background-color: var(--color-black)
}

.configurator__fields {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 24px
}
@media (max-width:568px) {
    .configurator__fields {
        grid-template-columns: 1fr
    }
}

.configurator__checkboxes {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-bottom: 24px
}
.price_configurator {
    font-weight: bold;
    display: block;
    margin-bottom: 24px
}
.configurator__radio-group {
    margin-bottom: 24px
}

.configurator__radio-group.margin_custom {
   margin-bottom: 0px;
   margin-left: 5px;
}
.configurator__radio-group.margin_custom .radio-group__emulator {
   padding: 4px 10px!important;
   min-height: 0;
}
@media (max-width: 390px) {
    .configurator__radio-group.margin_custom .radio-group__emulator {
        padding: 4px 6px!important;
        min-height: 0;
    }
}
.configurator__color:not(.is-visible) {
    display: none
}

.configurator__attachment {
    padding-top: 12px;
    border-top: 1px solid rgba(153, 153, 153, .2)
}

.radio-tabs {
    display: flex;
    column-gap: 10px
}

.radio-tabs__field {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden
}

.radio-tabs__emulator {
    --backgroundColor: transparent;
    --borderColor: var(--color-light2);
    --color: var(--color-grey);
    transition: .2s ease-out;
    transition-property: background-color, color, border;
    will-change: background-color, color, border;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--color);
    padding: 4px 12px;
    min-height: 38px;
    min-width: 107px;
    background-color: var(--backgroundColor);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border: 1px solid var(--borderColor);
    border-bottom: 0
}

.radio-tabs__field:checked+.radio-tabs__emulator {
    --backgroundColor: var(--color-black);
    --borderColor: var(--color-black);
    --color: var(--color-white)
}

.radio-tabs__field:focus-visible+.radio-tabs__emulator {
    outline: 2px solid var(--color-black);
    outline-offset: 2px
}

.radio-group {
    transition: .2s ease-out;
    transition-property: opacity;
    will-change: opacity
}

.radio-group[disabled] {
    opacity: .7
}

.radio-group__name {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--color-grey)
}

.radio-group__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.radio-group__field {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden
}

.radio-group__emulator {
    --backgroundColor: rgba(153, 153, 153, 0.1);
    --color: var(--color-white);
    transition: .2s ease-out;
    transition-property: background-color, color;
    will-change: background-color, color;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--color);
    padding: 4px 10px;
    min-height: 33px;
    font-weight: 500;
    background-color: var(--backgroundColor);
    border-radius: var(--border-radius)
}

.radio-group__field:checked+.radio-group__emulator {
    --backgroundColor: var(--color-white);
    --color: var(--color-black)
}

.radio-group__field:focus-visible+.radio-group__emulator {
    outline: 2px solid var(--color-white);
    outline-offset: 2px
}

.field-range {
    position: relative;
    height: 49px;
    padding: 8px 12px;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    overflow: hidden
}

@media (max-width:720px) {
    .field-range {
        padding: 8px 8px;
        height: 46px
    }
}

.field-range__body {
    flex-grow: 1
}

.field-range__label {
    position: relative;
    font-size: 13px;
    display: block;
    margin-bottom: 3px;
    z-index: 100
}

@media (max-width:720px) {
    .field-range__label {
        font-size: 12px
    }
}

.field-range__field {
    display: flex;
    align-items: center
}

.field-range__input {
    position: relative;
    z-index: 100;
    font-weight: 500;
    font-size: 14px;
    width: 100%;
    outline: 0;
    width: .9em;
    min-width: .9rem
}

.field-range__input::-webkit-inner-spin-button,
.field-range__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.field-range__units {
    position: relative;
    z-index: 100
}

.field-range__outline {
    transition: .2s ease-out;
    transition-property: opacity;
    will-change: opacity;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-light2);
    z-index: 0;
    opacity: 0
}

.field-range__input:focus+.field-range__outline {
    opacity: 1
}

.field-range__input[disabled]+.field-range__outline {
    opacity: .6;
    z-index: 500
}

.field-range__limits {
    display: flex;
    row-gap: 6px;
    font-size: 12px;
    text-align: right;
    color: var(--color-grey);
    flex-direction: column;
    position: relative;
    z-index: 100
}

.field-range__limit-value {
    white-space: nowrap
}

.order__settings {
    display: flex;
    justify-content: center;
    color: var(--color-white);
    background-color: var(--color-black2);
    border-radius: var(--border-radius);
    margin-bottom: 24px
}

.order__settings-body {
    margin: 30px 30px 20px;
    max-width: 70px
}

.order__characteristics {
    margin-bottom: 24px
}

.order__hidden-characteristic:not(.is-visible) {
    display: none
}

.order__amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    padding: 10px 16px;
    background-color: var(--color-light);
    border-radius: var(--border-radius);
    margin-bottom: 10px
}

.order__amount-quantity {
    display: flex;
    align-items: center;
    column-gap: 10px;
    flex-grow: 1
}

.order__amount-switch {
    min-width: 124px
}

.order__amount-package {
    font-size: 12px
}

.order__amount-price {
    font-weight: 500;
    font-size: 16px
}

.order__comment {
    margin-bottom: 24px
}

.order__total {
    padding: 14px 16px;
    color: var(--color-white);
    border-radius: var(--border-radius);
    background-color: var(--color-black)
}

.order__total-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 16px
}

.order__total-buttons {
    display: flex;
    flex-direction: column;
    row-gap: 6px
}

.order__error {
    text-align: center;
    margin-top: 10px
}

.cookie {
    position: fixed;
    bottom: 23px;
    left: 0;
    z-index: 1000;
    width: 100%;
    background-color: transparent
}

@media (max-width:720px) {
    .cookie {
        bottom: 12px
    }
}

.cookie__body {
    background-color: var(--color-white);
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .15);
    border: 1px solid var(--color-light);
    border-radius: var(--border-radius);
    padding: 20px 24px
}

@media (max-width:720px) {
    .cookie__body {
        padding: 12px 14px;
        text-align: center;
    }
}

.cookie__title {
    line-height: 1.8;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px
}

@media (max-width:720px) {
    .cookie__title {
        font-size: 18px;
        margin-bottom: 5px
    }
}

.cookie__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 40px;
    row-gap: 15px
}

@media (max-width:720px) {
    .cookie__bottom {
        flex-direction: column
    }
    .cookie__bottom > * {
        width: 100%;
    }
    .cookie__bottom > .button:focus, .cookie__bottom > .button:focus-visible, .cookie__bottom > .button:hover {
        outline: none!important;
    }
}

.cookie__text {
    font-size: 13px
}

.scroll-up {
    --backgroundColor: var(--color-white);
    --bottom: 23px;
    aspect-ratio: 1;
    width: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: .2s ease-out;
    transition-property: opacity, visibility, background-color;
    will-change: opacity, visibility, background-color;
    position: sticky;
    bottom: calc(var(--nav-height) + var(--bottom));
    right: var(--container-padding-x);
    margin-left: auto;
    z-index: 900;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .25);
    border-radius: var(--border-radius);
    background-color: var(--backgroundColor);
    visibility: hidden;
    opacity: 0
}

@media (hover:hover) {
    .scroll-up:hover {
        --backgroundColor: var(--color-light)
    }
}

@media (hover:none) {
    .scroll-up:active {
        --backgroundColor: var(--color-light)
    }
}

@media (max-width:720px) {
    .scroll-up {
        --bottom: 12px
    }
}

.scroll-up.is-visible {
    opacity: 1;
    visibility: visible
}

.scroll-up__icon {
    aspect-ratio: 1;
    width: 18px;
    transform: rotate(-90deg)
}

.nav-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-light)
}

.nav-mobile__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 6px;
    height: var(--nav-height)
}

@media (min-width:721px) {
    .nav-mobile__list {
        display: none
    }
}

.nav-mobile__link {
    transition: .2s ease-out;
    transition-property: color;
    will-change: color;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    row-gap: 5px
}
.nav-mobile__link.nav-mobile__link_cart {
    position: relative;
}
.nav-mobile__link.nav-mobile__link_cart:before {
    content: attr(data-count-cart);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 16px;
    min-width: 16px;
    padding: 2px;
    top: -7px;
    right: -3px;
    border-radius: 2px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 11px;
}
@media (hover:hover) {
    .nav-mobile__link:hover {
        color: var(--color-red)
    }
}

@media (hover:none) {
    .nav-mobile__link:active {
        color: var(--color-red)
    }
}

.nav-mobile__icon {
    aspect-ratio: 1;
    width: 17px
}

.nav-mobile__name {
    font-size: 12px
}

.availability {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-size: 13px
}

.availability::before {
    --backgroundColor: var(--color-green-dark);
    aspect-ratio: 1;
    width: 8px;
    content: "";
    border-radius: 50%;
    background-color: var(--backgroundColor)
}

.availability_no::before {
    --backgroundColor: var(--color-red)
}

.article_or_news_new .article__head-title {
    text-align: center
}

.article_or_news_new .article__head-image-wrap {
    float: left;
    margin-right: 20px;
    width: 50%
}

.article_or_news_new .article__head-image-wrap .article__main-image,
.article_or_news_new .article__head-image-wrap source {
    width: 100%
}

@media(max-width:768px) {
    .article_or_news_new .article__head-image-wrap {
        margin-bottom: 20px;
        width: 100%
    }
}

/* Еще один вариант новости */
.article_or_news_new_double_content .text h1, .article_or_news_new_double_content .text h2 {
    margin-bottom: 6px;
}
.article_or_news_new_double_content .article__head-image-wrap {
    float: left;
    margin-right: 20px;
    width: 50%;
    max-width: 360px;
}

.article_or_news_new_double_content .article__head-image-wrap .article__main-image,
.article_or_news_new_double_content .article__head-image-wrap source {
    width: 100%
}
.article_or_news_new_double_content .text_img_block {
    padding-bottom: 0.6em;
}
@media(max-width:768px) {
    .article_or_news_new_double_content .article__head-image-wrap {
        max-width: unset;
        margin-bottom: 20px;
        width: 100%
    }
}
@media (min-width: 768px) {
    .article_or_news_new_double_content .text_img_block {
        display: flex;
    }
}


.other_sizes_js_load .title_block {
    display: flex;
    justify-content: space-between
}

.other_sizes_js_load .title_block .catalog__filter-item-select {
    display: inline-flex
}

.other_sizes_js_load .load_more {
    display: flex;
    justify-content: center;
    margin-top: 15px
}

@media(max-width:768px) {
    .other_sizes_js_load .title_block {
        flex-direction: column;
        margin-bottom: 20px
    }

    .other_sizes_js_load .title_block .other-sizes__title {
        text-align: center
    }
}

@media (max-width:720px) {
    .section .text .container_list .column {
        padding: 2px;
        width: 33% !important
    }

    .section .text .container_list .column ol,
    .section .text .container_list .column ul {
        padding-left: 1px;
        word-break: break-word
    }
}

@media (max-width:960px) {
    .jv-mobile-or-tablet>* {
        zoom: 0 !important
    }
}

@media (max-width:720px) {
    .section .text .container_list .column {
        padding: 2px;
        width: 33% !important
    }

    .section .text .container_list .column ol,
    .section .text .container_list .column ul {
        padding-left: 1px;
        word-break: break-word
    }
}

@media (max-width:960px) {
    .jv-mobile-or-tablet>* {
        zoom: 0 !important
    }
}

@media (max-width:720px) {
    .section .text .container_list .column {
        padding: 2px;
        width: 33% !important
    }

    .section .text .container_list .column ol,
    .section .text .container_list .column ul {
        padding-left: 1px;
        word-break: break-word
    }
}

@media (max-width:960px) {
    .jv-mobile-or-tablet>* {
        zoom: 0 !important
    }
}

@media (max-width:720px) {

    .pagination,
    .pagination .pagination__item .pagination__page {
        width: 100%
    }

    .pagination .pagination__button {
        width: unset;
        max-width: 33px;
        flex: 1
    }

    .pagination .pagination__item {
        flex: 1;
        max-width: 33px
    }
}

@media (max-width:720px) {
    .section .text .container_list .column {
        padding: 2px;
        width: 33% !important
    }

    .section .text .container_list .column ol,
    .section .text .container_list .column ul {
        padding-left: 1px;
        word-break: break-word
    }
}

@media (max-width:960px) {
    .jv-mobile-or-tablet>* {
        zoom: 0 !important;
        bottom: 100px !important;
    }

    .jv-mobile-or-tablet * {
        z-index: 999 !important
    }
    .jv-mobile-or-tablet [class^="button_"] {
        margin-right: 10px!important
    }
}

@media (orientation: landscape) and (min-width:768px) and (max-width:960px) {
    .jv-mobile-or-tablet>* {
        bottom: 10px !important;
    }
}

@media (max-width:1100px) {
    .js-catalog__filter .catalog__filter-item-sort {
        transition: .4s all linear !important;
    }

    .js-catalog__filter.close .catalog__filter-item-sort {
        margin-bottom: 0px;
    }

    .js-catalog__filter .catalog__filter-icon {
        background-color: var(--color-red);
        color: var(--color-white);
        transition: .4s all linear !important;
        position: relative;
    }

    .js-catalog__filter .catalog__filter-icon:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .js-catalog__filter .catalog__filter-icon svg {
        transition: .4s all linear !important;
        -webkit-filter: invert(0%);
        filter: invert(0%);
    }

    .js-catalog__filter.close .catalog__filter-icon {
        background-color: var(--color-light);
    }

    .js-catalog__filter.close .catalog__filter-icon svg {

        -webkit-filter: invert(100%);
        filter: invert(100%);
    }

    .js-catalog__filter .catalog__filter-item-select {
        /*overflow: hidden;*/
        transition: .4s all linear !important;
        opacity: 1;
    }

    .js-catalog__filter.close .catalog__filter-item-select {
        opacity: 0;
    }
}


/* Изначально скрываем обе кнопки */
.js-cart-button {
    display: none;
}

/* Показываем кнопку "перейти в корзину" когда есть класс is-in-cart */
.added_to_cart .js-cart-button {
    display: block !important;
}

.added_to_cart .js-order-sample-button  {
    display: none !important;
}


/* Для кнопок перехода на страницу корзина после добавления товара  */
a.js-cart-button {
    --backgroundColor: var(--color-red);
    transition: .2s ease-out;
    transition-property: background-color;
    will-change: background-color;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    padding: 5px 10px;
    background-color: var(--backgroundColor);
    color: var(--color-white);
    border-radius: var(--border-radius);
    border: transparent;
}
.added_to_cart a.js-cart-button {
    display: inline-flex!important;
}
@media (hover:hover) {
    .added_to_cart a.js-cart-button:hover {
        --backgroundColor: var(--color-accent-red)
    }
}




/* Добавил стили для телефона и почты */
.main a[href^="tel:"], .main a[href^="mailto:"] {
 color: var(--color-red);
 text-decoration: underline;
 text-decoration-skip-ink: none;
 margin-left: 5px;
 font-weight: 500;
}
.main a[href^="tel:"].list-icons__body, .main a[href^="mailto:"].list-icons__body {
 margin-left: 0px;
}
.text a[href^="tel:"], .text a[href^="mailto:"], .text a  {
 color: var(--color-red);
 text-decoration: underline;
 text-decoration-skip-ink: none;
 margin-left: 5px;
 font-weight: 500;
}



/* Кастомные выпадающие фильтра */
.drop-down .custom-dropdown {
    position: absolute;
    visibility: hidden;
    width: 100%;
    opacity: 0;
    transition: transform 0.3s ease-in-out 0.2s, opacity 0.1s ease-in 0.2s, visibility 0.3s ease-in-out!important;
    z-index: 999;
    border-radius: var(--border-radius);
    background: var(--color-light);
    box-shadow: 0px 4px 16px #2727275c;
    margin-top: 10px;
    transform: translateY(-10px);
}


.drop-down .custom-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
}
.drop-down .custom-dropdown .custom-dropdown__search {
    padding: 10px 5px 5px;
}
.drop-down .custom-dropdown .custom-dropdown__search .custom-dropdown__input {
    width: 100%;
    background: var(--color-white);
    padding: 5px;
    border-radius: 5px;
}
.drop-down .custom-dropdown .custom-dropdown__search .custom-dropdown__input:focus-visible {
    border: none;
    outline: none;
}
/* Стилизация для WebKit (Chrome, Safari) */
.drop-down .custom-dropdown .custom-dropdown__search .custom-dropdown__input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-red);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    cursor: pointer;
}
/* Стилизация для Firefox */
.drop-down .custom-dropdown .custom-dropdown__search .custom-dropdown__input[type="search"]::-moz-search-cancel-button {
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-red);
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.drop-down .custom-dropdown .custom-dropdown__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: calc(61px * 6);
    overflow-y: scroll;
}
.drop-down .custom-dropdown .custom-dropdown__list::-webkit-scrollbar {
    height: 3px;
    width: 5px;
}
.drop-down .custom-dropdown .custom-dropdown__list::-webkit-scrollbar-track {
    background: #EDF1F4;
}
.drop-down .custom-dropdown .custom-dropdown__list::-webkit-scrollbar-thumb {
    background-color: var(--color-red);
    border-radius: 6px;
}

.drop-down .custom-dropdown .custom-dropdown__list:not(:last-child) {
    border-bottom: 1px solid var(--color-light)
}

.drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item {
 width: 100%;
 transition: 0.3s all linear!important;
 text-align: left;
 cursor: pointer;
 padding:6px 7px;
 /*border-bottom: 1px solid var(--color-light);*/
}
.drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item:not(.reset) {
    display: inline-flex;
    align-items: center;

}
.drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item:not(.reset):before {
    content: '';
    display: inline-block;
    margin-right: 5px;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--color-black);
    opacity: .8;
    border-radius: 2px;
}
.drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item.selected:not(.reset):before{
    opacity: 1;
    background: var(--color-black);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}
@media (hover:hover) {
    .drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item:hover {
       background-color: var(--color-light6);
   }
}
.drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item.reset {
   color: var(--color-grey);
    /*
    text-align: center;
    color: #fff;
    background: var(--color-red);
    */
}
@media (hover:hover) {
    .drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item.reset:hover {
     color: var(--color-red);
     background-color: transparent;
 }
}
.other-sizes .drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item.reset {
    display: none;
}
.drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item.reset.hidden {
    display: none;
}
.drop-down .custom-dropdown .custom-dropdown__list .custom-dropdown__item.selected {
 background-color: var(--color-light6);
 color: var(--color-black);
 font-weight: bold;
}



/* Преимущества с цифрами без иконки */
.experience__list_count_icon {
    counter-reset: css-counter 0;
}
.experience__list_count_icon .experience__item {
    counter-increment: css-counter 1;
    padding-top: 15px;
    border: 0;
}
.experience__list_count_icon .experience__item::before, .experience__list_count_icon .experience__item::after {
    display: none;
}
@media (min-width: 1100px) {
    .experience__list_count_icon .experience__item .experience__icon {
        position: unset;
        margin-bottom: 15px;
    }
}
.experience__list_count_icon .experience__item .experience__icon svg {
    display: none;
}
.experience__list_count_icon .experience__item .experience__icon:before {
    background: none;
    content: "0"counter(css-counter);
    color: var(--white);
    font-weight: bold;
    width: unset;
    height: unset;
}



/* Преимущества новый вид с иконками */
.experience__list_new_icon {
}
.experience__list_new_icon .experience__item {
    padding-top: 15px;
    border: 0;
}
.experience__list_new_icon .experience__item::before, .experience__list_new_icon .experience__item::after {
    display: none;
}
@media (min-width: 1100px) {
    .experience__list_new_icon .experience__item .experience__icon {
        position: unset;
        margin-bottom: 15px;
    }
}


/* Мобильная Шапка */
@media (min-width: 721px) and (max-width: 1100px) {
   .header__main .header__button-icon.open-menu {
    width: 40px;
    border-radius: var(--border-radius);
    aspect-ratio: 1;
    height: auto;
    background: var(--color-red);
}
.header__main .header__button-icon.open-menu .header__button-icon-img {
  color: var(--color-white);
}
.header__main .header__button-icon.open-menu .header__button-icon-img_open {
    width: 16px;
}
}
@media (max-width: 720px) {
    .header__main .header__button-icon.open-menu {
        border-radius: var(--border-radius);
        width: 12vw;
        aspect-ratio: 1;
        height: auto;
        background: var(--color-red);
    }
    .header__main .header__button-icon.open-menu .header__button-icon-img {
        color: var(--color-white);
    }
    .header__main .header__button-icon.open-menu .header__button-icon-img_open {
       width: 5.5vw;
   }
   .header__buttons .header__button-icon{
    border: 1.9px solid;
    border-radius: var(--border-radius);
}
.header__buttons .header__button-icon, .header__buttons .button-icon {
    width: 12vw;
    aspect-ratio: 1;
    height: auto;
}
.header__buttons .header__button-icon .header__button-icon-img, .header__buttons .button-icon .button-icon__icon {
    width: 5.5vw;
}
.header__buttons .button-icon .button-icon__icon {
 color: var(--color-red);
}
.header__buttons .button-icon { /* Скрыл на мобилке*/
    display: none;
}
}


/* Скрытие меню в футере на мобильно */

@media (max-width: 720px) {
    .footer__menu-column.hidden_mob {
        display: none;
    }
}

/* Категории каталога */@media (min-width: 1100px) {
 .packages__types .types__link {
    grid-template-columns: repeat(4,1fr);
}
}
.packages__types .types__link,
.types__list_large .types__link {
    min-height: 285px;
    flex-wrap: wrap;
    background-color:var(--color-white);
    /* border: 1px solid var(--colorIcon);*/
    padding-bottom: 0;

    padding: 0;
    border: none;
}
.packages__types .types__link { 
    border: transparent;
}
.packages__types .types__link .types__name,
.types__list_large .types__link .types__name {
  width: 100%;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  margin-bottom: auto;

  padding: 15px;
} 
.packages__types .types__link .types__name .text_name,
.types__list_large .types__link .types__name .text_name {
    max-width: calc(100% - (16px + 10px));
}
.packages__types .types__link .types__name .types__icon,
.types__list_large .types__link .types__name .types__icon {
    margin-top: 5px;
    position: unset;
    box-sizing: border-box;
}
.packages__types .types__link > picture,
.types__list_large .types__link > picture {
    padding-top: 10px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.packages__types .types__link > picture source,
.types__list_large .types__link > picture source {
    display: none;
}
.packages__types .types__link > picture img,
.types__list_large .types__link > picture img{
    /*width: 80%;*/
    width: 100%;
    position: unset;
}
@media (max-width: 720px) {
    .packages__types .types__link,
    .types__list_large .types__link {
       min-height: 100px;
       height: 100%;
   }
   .packages__types .types__link .types__name,
   .types__list_large .types__link .types__name {
    font-size: 14px;
}
}


.configurator__form .attention {
    margin-top: 16px;
}



@keyframes right_move {
    0% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    25% {
        -webkit-transform: translate(-2%, 0%);
        transform: translate(-2%, 0%);
    }
    50% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    75% {
        -webkit-transform: translate(2%, 0%);
        transform: translate(2%, 0%);
    }
    100% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
}
.noUi-horizontal .noUi-base {
 animation: right_move 2s infinite linear!important;
}
.noUi-horizontal .noUi-base:hover{
    animation-play-state: paused!important;
}

@keyframes bootom_move {
    0% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    25% {
        -webkit-transform: translate(0%, -2%);
        transform: translate(0%, -2%);
    }
    50% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    75% {
        -webkit-transform: translate(0%, 2%);
        transform: translate(0%, 2%);
    }
    100% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
}
.slider-range_vertical .noUi-base {
 animation: bootom_move 2.5s infinite linear!important;
}
.slider-range_vertical .noUi-base:hover {
  animation-play-state: paused!important;
}

@keyframes bootom_move_short {
    0% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    25% {
        -webkit-transform: translate(0%, -10%);
        transform: translate(0%, -10%);
    }
    50% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    75% {
        -webkit-transform: translate(0%, 10%);
        transform: translate(0%, 10%);
    }
    100% {
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
}
.slider-range_vertical-right .noUi-base {
    animation: bootom_move_short 1.5s infinite linear!important;
}

@-webkit-keyframes slide_right {
    0% { left: -30px; margin-left: 0px; }
    30% { left: 110%; margin-left: 80px; }
    100% { left: 110%; margin-left: 80px; } 
}
.settings__range-top .noUi-connects:before {
    content: "";
    display: block;
    width: 20px;
    height: 300px;
    margin-left: 60px;
    background: #fff;
    opacity: 0.4;
    position: absolute;
    left: -40px;
    top: -150px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-animation-name: slide_right!important;
    animation-name: slide_right!important;
    -webkit-animation-duration: 3s!important;
    animation-duration: 3s!important;
    -webkit-animation-delay: 0.05s!important;
    animation-delay: 0.05s!important;
    -webkit-animation-timing-function: ease-in-out!important;
    animation-timing-function: ease-in-out!important;
    -webkit-animation-iteration-count: infinite!important;
    animation-iteration-count: infinite!important;
}

@-webkit-keyframes slide_bottom {
    0% { top: -10%; }
    30% { top: 110%; }
    100% { top: 110%; } 
}
.settings__range-left .noUi-connects:before {
 content: "";
 display: block;
 width: 50px;
 height: 20px;
 background: #fff;
 opacity: 0.4;
 position: absolute;
 left: -26px;
 top: 0%;
 z-index: 1;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transition: all 0.1s;
 transition: all 0.1s;
 -webkit-animation-name: slide_bottom!important;
 animation-name: slide_bottom!important;
 -webkit-animation-duration: 3s!important;
 animation-duration: 3s!important;
 -webkit-animation-delay: 0.09s!important;
 animation-delay: 0.09s!important;
 -webkit-animation-timing-function: ease-in-out!important;
 animation-timing-function: ease-in-out!important;
 -webkit-animation-iteration-count: infinite!important;
 animation-iteration-count: infinite!important;
}

.js-catalog .load_more_block {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.js-catalog .load_more_block .articles__pagination {
    margin-top: 0;
}
@media (max-width: 720px) {
    .js-catalog .load_more_block {
        margin-top: 24px;
        align-items: unset;
        flex-direction: column;
    }
    .js-catalog .load_more_block .pagination__pages {
        order: 2;
    }
    .js-catalog .load_more_block .load_more_catalog {
        order: 1;
        margin-bottom: 16px;
    }
}



.dialog#search-modal .popup__body {
        margin-top: 0;
}
.dialog#search-modal .popup__body .search-bar.is-open .search-bar__result {
    position: unset!important;
}


/* добавил для формы на главной */
.black_form .consultation__inner {
    background: var(--color-black);
}
.black_form .consultation__inner .button-arrow_black {
    --backgroundColor: var(--color-red);
}
.black_form .consultation__inner .checkbox__field:checked+.checkbox__body .checkbox__emulator {
    --backgroundColor: var(--color-red);
    --borderColor: var(--color-red);
}
/* END добавил для формы на главной */

/* Для плашки в катлоге  */
@media (max-width:767px) {
    .js-catalog .card__attention .attention__text {
        font-size: 11px;
    }
    .js-catalog .card__attention .attention__text br {
        display: none;
    }
}
/* END Для плашки в катлоге  */

.notice_cart .notice__body .button:not(:last-child) {
    margin-bottom: 10px;
}



.breadcrumbs {
    border-bottom: 1px solid var(--color-light);
}
.delivery_new_design .section__head {
    margin-bottom: 37px;
}
.delivery_new_design .delivery__types {
    display: flex;
    gap: 44px;
    justify-content: center;
}
.delivery_new_design .delivery__item {
    max-width: 580px;
    width: 50%;
    justify-content: flex-start;
    padding: 18px 10px;
}
.delivery_new_design .delivery__name {
    text-align: left;
    width: 100%;
    margin-bottom: 41px;
}
.delivery_new_design .delivery__description {
    width: 100%;
}
.delivery_new_design .list-lines__item {
    padding: 10px;
}
.delivery_new_design .square-icon {
    width: 34px;
    margin-right: 5px;
}
.delivery_new_design .line-rhombuses:before,
.delivery_new_design .line-rhombuses:after,
.delivery_new_design .line-rhombuses .line-rhombuses__center {
    display: none;
}
@media (max-width: 930px) {
    .delivery_new_design .delivery__name {
        margin-bottom: 20px;
    }
    .delivery_new_design .delivery__types {
        flex-direction: column;
        gap: 12px;
    }
    .delivery_new_design .delivery__item {
        width: 100%;
        max-width: 100%;
    }
}

.work_new .line-rhombuses {
    display: none;
}
.work_new .work__list {
    justify-content: center;
    gap: 38px 12px;
}
.work_new .work__item {
    max-width: 340px;
    width: 33%;
    flex: unset;
}
.work_new .work__item::after {
    display: none;
}
@media (max-width: 930px) {
    .work_new .work__list {
        gap: 12px;
    }
    .work_new .work__item {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width:721px) {
    .cart .total {
        flex-wrap: wrap;
        flex-direction: unset;
    }
    .cart .total .total__amount {
        width: 40%;
        max-width: 200px;
        margin-right: 50px;
    }
}

.product-card {
    position: relative;
}

.product-stickers {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.product-stickers__item {
    margin-bottom: 10px;
    padding: 4px 8px;
    background-color: #20a525;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
}

.product-stickers__item--sale {
    background-color: #ed4d33;
}

.product-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.product-card__price .old {
    font-size: 13px;
    color: #999;
    font-weight: 400;
    text-decoration: line-through;
    margin-right: 8px;
}

.product-card__price .old + .current {
    color: #ed4d33;
}

.mt-60 {
    margin-top: 60px;
}

.ya-reviews > div {
    width: 100% !important;
    max-width: 760px;
    margin: 0 auto;
}

.product-video {
    display: flex;
    width: 50px;
    height: 37px;
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 24px;
    border-radius: 4px;
    background-color: #ed4d33;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 496.158 496.158'%3E%3Cpath fill='transparent' d='M496.158,248.085c0-137.021-111.07-248.082-248.076-248.082C111.07,0.002,0,111.062,0,248.085 c0,137.002,111.07,248.071,248.083,248.071C385.088,496.155,496.158,385.086,496.158,248.085z'/%3E%3Cpath fill='%23ffffff' d='M370.805,235.242L195.856,127.818c-4.776-2.934-11.061-3.061-15.951-0.322 c-4.979,2.785-8.071,8.059-8.071,13.762v214c0,5.693,3.083,10.963,8.046,13.752c2.353,1.32,5.024,2.02,7.725,2.02 c2.897,0,5.734-0.797,8.205-2.303l174.947-106.576c4.657-2.836,7.556-7.986,7.565-13.44 C378.332,243.258,375.452,238.096,370.805,235.242z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: background-color 0.3s ease-in-out;
}

.product-video:hover,
.product-video:focus {
    background-color: #ad3623;

}

.cookie#cookie {
    display: none;
}

.cookie#cookie.show {
    display: block;
    animation: fadeInDialog .3s forwards;
}

/*Блог сео*/

.blog-filters {
    background: #ffffff;
    margin-bottom: 32px;
}

.blog-filters__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.blog-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
}

.filter-item {
    position: relative;
}

.filter-item__button {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: #f7f7f5;
    border: 0.5px solid #999999;
    border-radius: 25px;
    color: #999999;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .filter-item__button {
        padding: 6px 12px;
    }
}

.filter-item__button:hover {
    color: #232223;
}

.filter-item__button.active {
    background: #ed4d33;
    border-color: #ed4d33;
    color: #ffffff;
}

.filter-item__button.active:hover {
    background: #ed4d33;
    border-color: #ed4d33;
    color: #ffffff;
}

.filter-item__count {
    margin-left: 8px;
    background: rgba(153, 153, 153, 0.5);
    color: #ffffff;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-item__button.active .filter-item__count {
    background: rgba(255, 255, 255, 0.2);
}

.js-blog-post {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-blog-post.hidden {
    display: none;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.article__time {
    font-size: 12px;
    color: #232223;
    font-weight: 500;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.article__time::before {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232223' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m12 6 0 6 4 2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.articles-slider.splide {

}

.articles-slider .splide__track {
    overflow: visible;
}

.articles-slider.splide {
/*    padding: 0 20px;*/
}

.articles-slider.splide .splide__track {
    overflow: hidden;
}

.articles-slider.splide .splide__list {
    list-style: none;
}

.articles-slider.splide .splide__slide {
/*    padding: 0 12px;*/
}

/* Articles list styles */
.articles-slider.splide .articles__list {
    display: flex;
    gap: initial;
    list-style: none;
/*    margin: 0 -12px;*/
    padding: 0;
}

.articles-slider.splide .articles__item {
/*    height: 100%;*/
}

.articles-slider.splide .splide__arrows {
    position: absolute;
    bottom: calc(100% + 22px);
    right: 0;
    display: flex;
    justify-content: space-between;
    width: 75px;
    height: 36px;
}

.articles-slider.splide .splide__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    pointer-events: all;
    background: #f7f7f5;
    border: 0.5px solid #999999;
    transition: all 0.2s ease;
}

.articles-slider.splide .splide__arrow:hover {
    opacity: 1;
    
    border-color: #d1d5db;
}

.articles-slider.splide .splide__arrow--prev {
    transform: scaleX(-1);
}

.articles-slider.splide .splide__arrow--next {
   
}

.articles-slider.splide .splide__arrow[disabled] {
    opacity: 0.2;
    pointer-events: none;
}

.articles-slider.splide .splide__arrow svg {
    width: 20px;
    height: 20px;
    fill: #6b7280;
}

.articles-slider.splide .splide__arrow:hover svg {
    fill: #374151;
}

.section-slider {
    position: relative;
    padding-top: 60px;
}

.section-slider .section__head {
    padding-right: 100px;
}

@media (max-width: 720px) {
    .section-slider .section__head_no-button {
        justify-content: flex-start;
        text-align: left;
        padding-right: 85px;
    }
}

.comments {
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    padding: 32px 0;
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .comments {
        padding-bottom: 0;
    }
}

.comments__inner {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 50px;
}

@media (max-width: 991px) {
    .comments__inner {
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .comments__inner {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 50px;
    }
}

.comments__title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

@media (max-width: 991px) {
    .comments__title {
        font-size: 22px;
    }
}

.comments__count {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 32px;
}

@media (max-width: 460px) {
    .comments__count {
        margin-bottom: 12px;
    }
}

.comments__list {
    list-style: none;
    flex-grow: 2;
}

.comment {
    padding: 24px 0;
    border-bottom: 1px solid #f0f0f0;
}

.comment:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comment__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.comment__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.comment__meta {
    flex: 1;
}

.comment__author {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}

.comment__date {
    font-size: 12px;
    color: #6c757d;
}

.comment__content {
    font-size: 15px;
    line-height: 1.6;
    color: #495057;
    margin-left: 56px;
}

@media (max-width: 767px) {
    .comments__right {
        padding: 36px 25px;
        background-color: #f2f2f2;
        margin: 0 -25px;
        width: calc(100% + 50px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 720px) {
    .comments__right {
        padding: 36px 16px;
        margin: 0 -16px;
        width: calc(100% + 32px);
    }
}

.comments__form {
    position: sticky;
    top: 160px;
    background-color: #f2f2f2;
    padding: 36px;
    border-radius: 16px;
    width: 400px;
    max-width: 100%;
}

@media (max-width: 1100px) {
    .comments__form {
        top: 120px;
        width: 360px;
    }
}

@media (max-width: 991px) {
    .comments__form {
        width: 300px;
        padding: 24px 16px;
    }
}

@media (max-width: 767px) {
    .comments__form {
        position: relative;
        top: 0;
        padding: 0;
    }
}

.comments__form .comments__title {
    margin-bottom: 24px;
}


.comments__form .form-small__checkbox {
    margin-bottom: 10px;
}

.comments__note {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
    padding-top: 8px;
}

.comments__form .button {
    width: 100%;
}

.comments__anchor {
    display: none;
}

@media (max-width: 767px) {
    .comments__anchor {
        position: absolute;
        display: inline-flex;
        right: 0;
        top: 9px;
    }
}

@media (max-width: 460px) {
    .comments__anchor {
        position: static;
        margin-bottom: 24px;
    }
}