/* ========================================
   БАЗОВЫЕ СТИЛИ (Base)
   ======================================== */

body {
    background-color: rgba(1, 119, 188, .368627451);
    font-size: 140%;
    font-family: Roboto, Arial, sans-serif;
    color: #434f61
}

a {
    cursor: pointer
}

.block-title {
    text-align: center;
    font-size: 1.8em;
    font-weight: 500;
    margin: 0 auto 1em
}

.visually-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden
}

.display-none {
    display: none
}


/* ========================================
   ГЛОБАЛЬНЫЕ МЕДИАЗАПРОСЫ ДЛЯ ШРИФТОВ
   ======================================== */

@media (max-width:1699px) {
    body {
        font-size: 125%
    }
}

@media (max-width:1439px) {
    body {
        font-size: 110%
    }
}

@media (max-width:1279px) {
    body {
        font-size: 85%
    }
}

@media (max-width:979px) {
    body {
        font-size: 60%
    }
}

@media (max-width:767px) {
    body {
        font-size: 85%
    }
}

@media (max-width:424px) {
    body {
        font-size: 60%
    }
}


/* ========================================
   ОБЩИЙ КОНТЕЙНЕР
   ======================================== */

.content-container {
    margin: 0 auto;
    padding: 2em;
    box-sizing: border-box;
    max-width: 2000px;
    background-color: #fff
}


/* ========================================
   ШАПКА САЙТА (Header)
   ======================================== */

.page-header__content-container {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.page-header__logo-social-wrapper {
    display: flex;
    align-items: center
}

.page-header__logo {
    display: block;
    width: 15em;
    margin-right: 1.5em
}

.page-header__logo-img {
    width: 100%
}

.page-header__contacts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.page-header__contacts-list-elmt:not(:last-child) {
    margin-right: 2em
}

.page-header__contacts-list-elmt--mail,
.page-header__contacts-list-elmt--phone {
    display: flex;
    align-items: center
}

.page-header__contacts-list-icon--mail {
    width: 1.5em;
    height: 1.5em;
    margin-right: .5em;
    background: url(../img/icons/mail.svg) 50%/contain no-repeat
}

.page-header__icon {
    width: 100%
}

.page-header__contacts-list-link {
    text-decoration: none;
    color: #0176bc;
    font-weight: 500
}

.page-header__contacts-list-link:focus,
.page-header__contacts-list-link:hover {
    outline: 0;
    text-decoration: underline
}

.page-header__contacts-list-link:active {
    opacity: .8
}

.page-header__contacts-list-link--button {
    display: block;
    background-color: #f1f0f5;
    padding: 1em 2em;
    color: #0176bc;
    font-size: .7em;
    border-radius: 25px
}

.page-header__contacts-list-link--button:focus,
.page-header__contacts-list-link--button:hover {
    color: #fff;
    background-color: #0176bc;
    text-decoration: none
}

.page-header__contacts-list-link--phone {
    margin: 0 .5em
}

.page-header__contacts-list-link--whatsapp {
    display: block;
    width: 2em;
    margin-top: .2em
}

.page-header__contacts-list-link--mail {
    display: flex;
    align-items: center
}

.page-header__two-phones-wrapper {
    display: flex;
    flex-direction: column
}

.page-header__contacts-list-link--phone--first {
    margin-bottom: .5em
}


/* ========================================
   АДАПТИВ ДЛЯ ШАПКИ
   ======================================== */

@media (max-width:767px) {
    .content-container {
        max-width: 550px
    }

    .page-header__content-container {
        display: block
    }

    .page-header__logo-social-wrapper {
        display: block;
        margin: 0 auto 2em;
        width: 80%
    }

    .page-header__logo {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 1em
    }

    .page-header__contacts-list {
        text-align: center;
        align-items: center;
        justify-content: center
    }

    .page-header__contacts-list-elmt:not(:last-child) {
        margin-right: 0
    }

    .page-header__contacts-list-elmt--phone {
        font-size: 1.1em;
        justify-content: center;
        margin-bottom: 1.5em
    }

    .page-header__contacts-list-elmt--mail {
        margin-bottom: 1.5em;
        margin-left: .2em
    }

    .page-header__contacts-list-elmt:last-child {
        margin-left: 1.5em
    }

    .page-header__contacts-list-link--button {
        display: block;
        background-color: #f1f0f5;
        padding: 1em 3em;
        color: #0176bc;
        font-size: 1em;
        border-radius: 25px
    }

    .page-header__contacts-list-link--whatsapp {
        width: 2em
    }

    .page-header__contacts-list-link--phone {
        margin: 0 1em;
        font-size: 1em
    }

    .page-header__contacts-list-icon--mail {
        width: 2.2em;
        height: 2.2em;
        margin-right: 0;
        background: url(../img/icons/mail.svg) 50% 25%/contain no-repeat
    }

    .page-header__contacts-list-link-span {
        display: none
    }
}

@media (max-width:424px) {
    .page-header__logo-social-wrapper {
        width: 70%
    }
}


/* ========================================
   СОЦИАЛЬНЫЕ КНОПКИ
   ======================================== */

.social-buttons__list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center
}

.social-buttons__list--footer {
    justify-content: center
}

.social-buttons__elmt {
    width: 2em;
    height: 2em
}

.social-buttons__elmt:not(:last-child) {
    margin-right: .7em
}

.social-buttons__link {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .8
}

.social-buttons__link--facebook {
    background: url(../img/social/facebook-icon.svg) 50%/100% no-repeat #fff;
    border-radius: 7px
}

.social-buttons__link--instagramm {
    background: url(../img/social/instagram-icon.svg) 50%/100% no-repeat
}

.social-buttons__link--youtube {
    background: url(../img/social/youtube-icon.svg) 50%/100% no-repeat
}

.social-buttons__link:focus,
.social-buttons__link:hover {
    outline: 0;
    opacity: 1
}

.social-buttons__link:active {
    opacity: .8
}


/* ========================================
   АДАПТИВ ДЛЯ СОЦКНОПОК
   ======================================== */

@media (max-width:767px) {
    .social-buttons__list {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .social-buttons__elmt {
        width: 2.5em;
        height: 2.5em
    }

    .social-buttons__elmt:not(:last-child) {
        margin-right: 2em
    }
}


/* ========================================
   ПРОМОБЛОК (Hero)
   ======================================== */

.promotion__content-container {
    background: url(../img/promo.jpg) 50% 10%/cover no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7em 2em;
    /* Добавляем стили */
    flex-wrap: wrap;
    justify-content: center;
    padding: 4em 2em;
}

.promotion__content-container--inner {
    padding: 15em 0
}

.promotion__content-container--architectural {
    background: url(../img/spheres/2000/architectural.jpg) 50% 85%/cover no-repeat
}

.promotion__content-container--industrial {
    background: url(../img/spheres/2000/industrial.jpg) 50% 85%/cover no-repeat
}

.promotion__content-container--automotive {
    background: url(../img/spheres/2000/automotive.jpg) 0 100%/cover no-repeat
}

.promotion__content-container--interior {
    background: url(../img/spheres/2000/interior.jpg) 50% 85%/cover no-repeat
}

.promotion__content-container--decorative {
    background: url(../img/spheres/2000/decorative.jpg) 50% 85%/cover no-repeat
}

.promotion__content-container--sports-equipment {
    background: url(../img/spheres/2000/sports-equipment.jpg) 50%/cover no-repeat
}

.promotion__content-container--termoplast {
    background: url(../img/spheres/2000/termoplast.jpg) 50%/cover no-repeat
}

.promotion__content-container--anti-corrosion {
    background: url(../img/spheres/2000/anti-corrosion.jpg) 50%/cover no-repeat
}

/* .promotion__losung {
    font-weight: 600;
    margin: 0;
    padding: 2em;
    background-color: rgba(255, 255, 255, .758);
    border-radius: 10px;
    font-size: 1.4em;
    width: 55%
} */

.promotion__losung {
    font-weight: 600;
    margin: 0;
    padding: 2em;
    background-color: rgba(255, 255, 255, .758);
    border-radius: 10px;
    font-size: 1.6em;
    width: 80%;
    text-align: center;
}

.promotion__telegram {
    font-size: 0.8em;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0;
    color: #0176bc;
}

.promotion__telegram span {
    text-align: left;
}

.promotion__telegram-img {
    width: 65px;
    margin-left: 0.6em;
    transition-duration: 0.3s;
}

.promotion__telegram-img:hover,
.promotion__telegram-img:focus {
    transform: scale(1.15);
    outline: none;
}

.promotion__telegram-img:active {
    transform: scale(0.9);
}

.promotion__losung--inner {
    width: 100%;
    text-align: center;
    background-color: #0176bc;
    border-radius: 0;
    color: #fff;
    font-weight: 500;
    font-size: 2em;
    padding: .5em
}

.promotion__utp {
    display: block;
    font-weight: 600;
    color: #0176bc;
    font-size: 1.8em;
    margin: .3em 0
}

.promotion_get-price-link {
    width: 30%;
    box-sizing: border-box;
    padding: 2em;
    text-align: center;
    background-color: #0176bc;
    border-radius: 10px;
    border: 2px solid #fff;
    color: #fff;
    font-size: 1em;
    text-decoration: none;
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .533), inset 1px 1px 1px 1px rgba(255, 255, 255, .533);

    /* Добавляем стили */
    font-size: 0.7em;
    margin-top: 2em;
}

.promotion_get-price-link:focus,
.promotion_get-price-link:hover {
    outline: 0;
    color: #fcee21
}

.promotion_get-price-link:active {
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .533);
    color: #d3d3d3
}

.promotion__link-title {
    display: block;
    font-size: 1.7em;
    font-weight: 500
}

.promotion__download-icon {
    fill: #fff;
    display: block;
    margin: 1em auto 0;
    width: 10%
}

.promotion_get-price-link:focus .promotion__download-icon,
.promotion_get-price-link:hover .promotion__download-icon {
    fill: #fcee21
}

.promotion_get-price-link:active .promotion__download-icon {
    fill: #d3d3d3
}


/* ========================================
   АДАПТИВ ДЛЯ ПРОМОБЛОКА
   ======================================== */

@media (max-width:1599px) {
    .promotion__content-container--architectural {
        background: url(../img/spheres/1600/architectural.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--industrial {
        background: url(../img/spheres/1600/industrial.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--automotive {
        background: url(../img/spheres/1600/automotive.jpg) 0 100%/cover no-repeat
    }

    .promotion__content-container--interior {
        background: url(../img/spheres/1600/interior.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--decorative {
        background: url(../img/spheres/1600/decorative.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--sports-equipment {
        background: url(../img/spheres/1600/sports-equipment.jpg) 50%/cover no-repeat
    }

    .promotion__content-container--termoplast {
        background: url(../img/spheres/1600/termoplast.jpg) 50%/cover no-repeat
    }

    .promotion__content-container--anti-corrosion {
        background: url(../img/spheres/1600/anti-corrosion.jpg) 50%/cover no-repeat
    }
}

@media (max-width:1400px) {
    .promotion__content-container--architectural {
        background: url(../img/spheres/1400/architectural.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--industrial {
        background: url(../img/spheres/1400/industrial.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--automotive {
        background: url(../img/spheres/1400/automotive.jpg) 0 100%/cover no-repeat
    }

    .promotion__content-container--interior {
        background: url(../img/spheres/1400/interior.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--decorative {
        background: url(../img/spheres/1400/decorative.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--sports-equipment {
        background: url(../img/spheres/1400/sports-equipment.jpg) 50%/cover no-repeat
    }

    .promotion__content-container--termoplast {
        background: url(../img/spheres/1400/termoplast.jpg) 50%/cover no-repeat
    }

    .promotion__content-container--anti-corrosion {
        background: url(../img/spheres/1400/anti-corrosion.jpg) 50%/cover no-repeat
    }
}

@media (max-width:1199px) {
    .promotion__content-container--architectural {
        background: url(../img/spheres/1200/architectural.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--industrial {
        background: url(../img/spheres/1200/industrial.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--automotive {
        background: url(../img/spheres/1200/automotive.jpg) 0 100%/cover no-repeat
    }

    .promotion__content-container--interior {
        background: url(../img/spheres/1200/interior.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--decorative {
        background: url(../img/spheres/1200/decorative.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--sports-equipment {
        background: url(../img/spheres/1200/sports-equipment.jpg) 50%/cover no-repeat
    }

    .promotion__content-container--termoplast {
        background: url(../img/spheres/1200/termoplast.jpg) 50%/cover no-repeat
    }

    .promotion__content-container--anti-corrosion {
        background: url(../img/spheres/1200/anti-corrosion.jpg) 50%/cover no-repeat
    }
}

@media (max-width:979px) {
    .promotion__content-container {
        display: block
    }

    .promotion__content-container--architectural {
        background: url(../img/spheres/980/architectural.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--industrial {
        background: url(../img/spheres/980/industrial.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--automotive {
        background: url(../img/spheres/980/automotive.jpg) 0 100%/cover no-repeat
    }

    .promotion__content-container--interior {
        background: url(../img/spheres/980/interior.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--decorative {
        background: url(../img/spheres/980/decorative.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--sports-equipment {
        background: url(../img/spheres/980/sports-equipment.jpg) 50%/cover no-repeat
    }

    .promotion__content-container--termoplast {
        background: url(../img/spheres/980/termoplast.jpg) 50%/cover no-repeat
    }

    .promotion__content-container--anti-corrosion {
        background: url(../img/spheres/980/anti-corrosion.jpg) 50%/cover no-repeat
    }

    .promotion__losung {
        width: 90%;
        text-align: center;
        box-sizing: border-box;
        margin: 0 auto 2em;
        font-size: 2.2em;
    }

    .promotion__losung--inner {
        margin-bottom: 0;
        width: 100%
    }

    .promotion_get-price-link {
        display: block;
        width: 40%;
        position: relative;
        text-align: center;
        margin: 0 auto;
        font-size: 1.5em;
        font-weight: 500
    }

    .promotion__download-icon {
        position: absolute;
        width: 2em;
        top: 50%;
        margin-top: -1.2em;
        left: 5%
    }

    .promotion__link-title {
        display: inline;
        font-size: 1em;
        font-weight: 500
    }
}

@media (max-width:767px) {
    .promotion__content-container {
        padding: 3em 2em
    }

    .promotion__content-container--inner {
        padding: 20em 0 0
    }

    .promotion__content-container--architectural {
        background: url(../img/spheres/550/architectural.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--industrial {
        background: url(../img/spheres/550/industrial.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--automotive {
        background: url(../img/spheres/550/automotive.jpg) 0 100%/cover no-repeat
    }

    .promotion__content-container--interior {
        background: url(../img/spheres/550/interior.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--decorative {
        background: url(../img/spheres/550/decorative.jpg) 50% 85%/cover no-repeat
    }

    .promotion__content-container--sports-equipment {
        background: url(../img/spheres/550/sports-equipment.jpg) 0 100%/cover no-repeat
    }

    .promotion__content-container--termoplast {
        background: url(../img/spheres/550/termoplast.jpg) 50%/cover no-repeat
    }

    .promotion__content-container--anti-corrosion {
        background: url(../img/spheres/550/anti-corrosion.jpg) 50%/cover no-repeat
    }

    .promotion__losung {
        width: 100%;
        font-size: 1.3em
    }

    .promotion__losung--inner {
        margin-bottom: 0;
        width: 100%;
        padding: 1em;
        font-size: 1.5em;
        background-color: rgba(1, 119, 188, .7882352941)
    }

    .promotion_get-price-link {
        width: 80%;
        text-align: center;
        font-size: 1.2em;
    }

    .promotion__download-icon {
        left: 8%
    }
}


/* ========================================
   ПРЕИМУЩЕСТВА
   ======================================== */

.advantages__content-container {
    padding: 4em 2em
}

.advantages__content-container--inner {
    width: 100%;
    font-size: .8em;
    padding: 2.5em 2em
}

.advantages__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.advantages__list-elmt {
    width: 20%;
    position: relative;
    text-align: center
}

.advantages__list-elmt--arrow::after {
    content: "";
    font-size: 1em;
    width: 3em;
    height: 3em;
    background: url(../img/icons/arrow.svg) 50%/cover no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -1.5em;
    right: -30%
}

.advantages__icon {
    display: block;
    margin: 0 auto .8em;
    width: 4em;
    fill: #0176bc
}

.advantages__icon--inner {
    width: 6em
}

.advantages__losung {
    text-align: center;
    margin: 2em 0 0;
    font-size: 1.8em;
    color: #0176bc
}


/* ========================================
   АДАПТИВ ДЛЯ ПРЕИМУЩЕСТВ
   ======================================== */

@media (max-width:767px) {
    .advantages__content-container--inner {
        width: 100%;
        font-size: .8em;
        padding: 2.5em 2em
    }

    .advantages__icon {
        opacity: 1
    }

    .advantages__list-elmt {
        width: 45%
    }

    .advantages__list-elmt:first-child {
        margin-bottom: 2em
    }

    .advantages__list-elmt--arrow::after {
        right: -20%
    }

    .advantages__list-elmt--arrrow-mobile::after {
        display: none
    }

    .advantages__list-elmt--3:last-child {
        flex-grow: 1
    }
}


/* ========================================
   СФЕРЫ ПРИМЕНЕНИЯ
   ======================================== */

.application-sphere__content-container {
    padding-top: 0
}

.application-sphere__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.application-sphere__elmt {
    width: 60%;
    margin-bottom: 2%
}

.application-sphere__elmt:nth-child(2),
.application-sphere__elmt:nth-child(3),
.application-sphere__elmt:nth-child(6) {
    width: 38%
}

.application-sphere__elmt:nth-child(5),
.application-sphere__elmt:nth-child(6) {
    margin-bottom: 0
}

.application-sphere__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 20em;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: #fff
}

.application-sphere__link--architecture {
    background: url(../img/spheres/architecture.jpg) 50%/cover no-repeat
}

.application-sphere__link--industry {
    background: url(../img/spheres/industry.jpg) 50%/cover no-repeat
}

.application-sphere__link--auto {
    background: url(../img/spheres/auto.jpg) 50%/cover no-repeat
}

.application-sphere__link--interior {
    background: url(../img/spheres/interior.jpg) 0 100%/cover no-repeat
}

.application-sphere__link--decoration {
    background: url(../img/spheres/decoration.jpg) 0 80%/cover no-repeat
}

.application-sphere__link--sport {
    background: url(../img/spheres/sport.jpg) 0 80%/cover no-repeat
}

.application-sphere__link--termoplast {
    background: url(../img/spheres/termoplast.jpg) 0 80%/cover no-repeat
}

.application-sphere__link--anti-corrosion {
    background: url(../img/spheres/anti-corrosion.jpg) 0 80%/cover no-repeat
}

.application-sphere__link:focus,
.application-sphere__link:hover {
    outline: 0;
    filter: grayscale(10%)
}

.application-sphere__link:focus .application-sphere__description,
.application-sphere__link:hover .application-sphere__description {
    display: block
}

.application-sphere__link:active {
    opacity: .8
}

.application-sphere__description {
    text-align: center;
    font-size: 1.8em;
    font-weight: 500;
    padding: .5em;
    background-color: #0176bc;
    display: none
}


/* ========================================
   АДАПТИВ ДЛЯ СФЕР
   ======================================== */

@media (max-width:767px) {
    .application-sphere__elmt {
        width: 100%;
        margin-bottom: 4%
    }

    .application-sphere__elmt:nth-child(2),
    .application-sphere__elmt:nth-child(3),
    .application-sphere__elmt:nth-child(6) {
        width: 100%
    }

    .application-sphere__elmt:nth-child(5) {
        margin-bottom: 4%
    }

    .application-sphere__description {
        display: block;
        background-color: rgba(1, 119, 188, .6588235294)
    }

    .application-sphere__link {
        justify-content: flex-end
    }
}


/* ========================================
   НОВОСТИ
   ======================================== */

.news__content-container {
    padding: 3em 2em 3em 20em;
    background: url(../img/icons/news-icon.svg) 7em 50%/5em auto no-repeat #e2dfdf;
}

.news__content-container--foto {
    padding: 3em 2em 3em 2em;
    background: #e2dfdf;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.news__image-container {
    
    width: 20%;
    margin-right: 2em;
}

.news_text-container-with-img {
    width: 70%;
}

.news_image {
    width: 100%;
}

.news__description {
    font-family: "Roboto Slab", serif
}

.news-link {
    display: block;
    margin-left: auto;
    margin-top: 3em;
    padding: 1em 2em;
    text-align: center;
    width: 40%;
    color: #fff;
    text-decoration: none;
    background-color: #0176bc;
    border-radius: 30px;
    max-width: 350px
}

.news-link:focus,
.news-link:hover {
    color: #fcee21;
    outline: 0
}

.news-link:active {
    opacity: .7
}

.news__list {
    margin: 2em auto
}


/* ========================================
   АДАПТИВ ДЛЯ НОВОСТЕЙ
   ======================================== */

@media (max-width:767px) {
    .news__content-container {
        padding-left: 10em;
        background: url(../img/icons/news-icon.svg) 3em 50%/4em auto no-repeat #e2dfdf
    }

    .news-link {
        width: 60%;
        max-width: none
    }

    .news__content-container--foto {
        padding: 3em 2em 3em 2em;
        background: #e2dfdf;
        display: block;
        align-items: top;
    }

    .news__image-container {
        padding-right: 0;
        width: 70%;
        padding-top: 0;
        margin: 0 auto;
    }

    .news_text-container-with-img {
    width: 100%;
}
}


/* ========================================
   КОМАНДА (Staff)
   ======================================== */

.staff__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap
}

.staff__elmt {
    width: 20%;
    padding: 0 1em;
    box-sizing: border-box
}

.staff__photo {
    width: 80%;
    border-radius: 50%
}

.staff__help-description {
    text-align: center;
    font-weight: 500;
    margin-bottom: 2em
}

.staff__consultation-link {
    display: block;
    width: 50%;
    margin: 0 auto;
    padding: 1.5em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    background-color: #0176bc;
    border-radius: 30px
}

.staff__consultation-link:focus,
.staff__consultation-link:hover {
    color: #fcee21;
    outline: 0
}

.staff__consultation-link:active {
    opacity: .7
}

.staff__consultation-link--mobile {
    display: none;
}


/* ========================================
   АДАПТИВ ДЛЯ КОМАНДЫ
   ======================================== */

@media (max-width:767px) {
    .staff__elmt {
        width: 45%
    }

    .staff__elmt:not(:last-child) {
        margin-bottom: 2em
    }

    .staff__elmt:nth-child(2n) {
        margin-left: auto
    }

    .staff__consultation-link {
        width: 80%;
        font-size: .8em
    }

    .staff__consultation-link--pc {
        display: none;
    }

    .staff__consultation-link--mobile {
        display: block;
    }
}


/* ========================================
   КОНТАКТЫ
   ======================================== */

.contacts__content-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center
}

.contacts__title {
    width: 100%
}

.contacts__map-container {
    width: 60%;
    height: 20em
}

.contacts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 35%
}

.contacts__elmt:not(:last-child) {
    margin-bottom: 1.5em
}

.contacts__link {
    text-decoration: none;
    color: #0176bc;
    font-weight: 500
}

.contacts__link--phone {
    font-size: 1.5em;
    color: #434f61
}

.contacts__link--mail {
    font-size: 1.2em
}

.contacts__link:focus,
.contacts__link:hover {
    text-decoration: underline;
    outline: 0
}

.contacts__link:active {
    color: #d3d3d3
}

.contacts__sub-title {
    text-align: center;
    font-weight: 400;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 2em
}


/* ========================================
   АДАПТИВ ДЛЯ КОНТАКТОВ
   ======================================== */

@media (max-width:767px) {
    .contacts__map-container {
        width: 100%;
        height: 35em;
        margin-bottom: 2em
    }

    .contacts__list {
        width: 100%;
        text-align: center
    }

    .contacts__link--phone {
        font-size: 1.8em
    }

    .contacts__link--mail {
        font-size: 1.5em
    }
}


/* ========================================
   ПРЕДСТАВИТЕЛИ
   ======================================== */

.representatives-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.representatives-list__elmt {
    box-sizing: border-box;
    padding: 0 2em;
    width: 30%
}

.representatives-list__elmt:not(:last-child) {
    border-right: 1px solid #0176bc
}

.representatives-list__mail,
.representatives-list__phones,
.representatives-list__staff {
    list-style: none;
    margin: 0;
    padding: 0
}

.representatives-list__title {
    display: block;
    font-weight: 500;
    margin-bottom: 1em;
    font-size: 1.3em;
    text-align: center;
}

.representatives-list__phones,
.representatives-list__staff {
    min-height: 3em;
    margin-bottom: 1em;
    text-align: center;
}

.representatives-list__sub-list-title {
    display: block;
    margin-bottom: .5em;
    text-align: center;
}

.representatives-list__link {
    text-decoration: none;
    color: #0176bc;
    font-weight: 500;
    display: block;
    margin-bottom: .3em;
    text-align: center;
}

.representatives-list__link:focus,
.representatives-list__link:hover {
    outline: 0;
    text-decoration: underline
}

.representatives-list__link:active {
    color: #d3d3d3
}


/* ========================================
   АДАПТИВ ДЛЯ ПРЕДСТАВИТЕЛЕЙ
   ======================================== */

@media (max-width:767px) {
    .representatives-list__elmt {
        padding: 0 2em;
        width: 60%;
    }

    .representatives-list__elmt:not(:last-child) {
        border-right: none
    }

    .representatives-list__elmt:first-child,
    .representatives-list__elmt:nth-child(2),
    .representatives-list__elmt:nth-child(3) {
        border-right: 1px solid #0176bc
    }

    .representatives-list__elmt:first-child,
    .representatives-list__elmt:nth-child(2) {
        margin-bottom: 2em
    }
}

@media (max-width:424px) {
    .representatives-list__elmt {
        padding: 0 2em;
        width: 80%;
        font-size: 12px;
    }
}


/* ========================================
   FAQ
   ======================================== */

.faq__content-container {
    background-color: #0176bc;
    display: flex;
    justify-content: space-around;
    align-items: center
}

.faq__list {
    list-style: none;
    margin: 0;
    padding: 0
}

.faq__elmt:not(:last-child) {
    margin-bottom: .8em
}

.faq__link {
    text-decoration: none;
    color: #fcee21
}

.faq__link:focus,
.faq__link:hover {
    outline: 0;
    text-decoration: underline
}

.faq__link:active {
    color: #d3d3d3
}

.faq__contacts-title {
    font-size: 1em;
    text-align: center;
    color: #fff
}

.faq__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #fff
}

.faq__contactst-elmt:not(:last-child) {
    margin-bottom: .8em
}

.faq__contacts-link {
    text-decoration: none;
    color: #fff
}

.faq__contacts-link:focus,
.faq__contacts-link:hover {
    outline: 0;
    text-decoration: underline
}

.faq__contacts-link:active {
    color: #d3d3d3
}

.faq__contacts-link--callme {
    text-transform: uppercase;
    color: #fcee21;
    font-weight: 500
}


/* ========================================
   АДАПТИВ ДЛЯ FAQ
   ======================================== */

@media (max-width:767px) {
    .faq__content-container {
        display: block
    }

    .faq__list {
        text-align: center;
        margin-bottom: 2em
    }
}


/* ========================================
   МОДАЛЬНОЕ ОКНО ФОРМЫ + ЗАТЕМНЕНИЕ
   ======================================== */

.blackout {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: .4;
    z-index: 90
}

.site-form {
    z-index: 100;
    position: fixed;
    right: 0;
    background-color: #0176bc;
    padding: 2em 3em;
    box-sizing: border-box;
    top: 50%;
    width: 70%;
    max-width: 1200px;
    box-sizing: border-box;
    left: 50%;
    transform: translate(-50%, -50%)
}

.site-form__title {
    color: #fff;
    font-size: 1.2em
}

.site-form__form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.site-form__form--hide {
    display: none
}

.site-form__label {
    width: 30%;
    margin-bottom: 1.5em;
    font-size: .8em
}

.site-form__label--text {
    width: 100%
}

.site-form__label--hide {
    display: none
}

.site-form__input {
    padding: .5em;
    box-sizing: border-box;
    width: 100%
}

.site-form__input--text {
    width: 100%
}

.site-form__input--hide {
    display: none
}

.site-form__submit {
    padding: .5em 1em;
    margin: 0 auto;
    box-sizing: border-box;
    width: 70%;
    background-color: #fcee21;
    border-radius: 8px
}

.close-button {
    display: block;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    top: .5em;
    right: .5em
}

.close-button::after,
.close-button::before {
    content: "";
    width: 100%;
    height: 5px;
    background-color: #fcee21;
    position: absolute;
    top: 50%;
    margin-top: -1.5px;
    left: 0
}

.close-button::before {
    transform: rotate(45deg)
}

.close-button::after {
    transform: rotate(-45deg)
}

.close-button:focus::after,
.close-button:focus::before,
.close-button:hover::after,
.close-button:hover::before {
    background-color: red
}

.close-button:active::after,
.close-button:active::before {
    opacity: .8
}

.site-form__success {
    color: #fff;
    text-align: center;
    font-size: 1.3em;
    display: none
}

.site-form__success--show {
    display: block
}


/* ========================================
   АДАПТИВ ДЛЯ ФОРМЫ
   ======================================== */

@media (max-width:767px) {
    .site-form {
        max-width: 540px
    }

    .site-form__form {
        flex-direction: column
    }

    .site-form__label {
        width: 100%;
        font-size: 1em
    }

    .close-button::after,
    .close-button::before {
        height: 3px
    }
}


/* ========================================
   ОСНОВНАЯ НАВИГАЦИЯ
   ======================================== */

.site-navigation__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.site-navigation__elmt {
    margin-bottom: 1em
}

.site-navigation__elmt:not(:last-child) {
    margin-right: 2em
}

.site-navigation__link {
    color: #fff;
    text-decoration: none;
    font-size: 1.3em;
    display: block;
    text-align: center;
    padding: .5em 1.5em;
    border-radius: 30px;
    background-color: rgba(1, 119, 188, .7882352941)
}

.site-navigation__link:focus,
.site-navigation__link:hover {
    outline: 0;
    color: #fcee21;
    background-color: #0176bc
}

.site-navigation__link:active {
    color: #d3d3d3;
    text-decoration: none
}

.site-navigation__link--active {
    color: #fcee21;
    background-color: #0176bc
}

.site-navigation__sandwich {
    display: none;
    position: relative;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.5em
}

.site-navigation__sandwich::after,
.site-navigation__sandwich::before {
    content: "";
    width: 10%;
    height: 4px;
    background-color: #fff;
    box-shadow: 0 12px 0 0 #fff, 0 24px 0 0 #fff;
    position: absolute;
    top: 50%;
    margin-top: -15px
}

.site-navigation__sandwich::after {
    right: 1%
}

.site-navigation__sandwich::before {
    left: 1%
}


/* ========================================
   АДАПТИВ ДЛЯ НАВИГАЦИИ
   ======================================== */

@media (max-width:767px) {
    .site-navigation__content-container {
        background-color: #0176bc
    }

    .site-navigation__sandwich {
        display: block
    }

    .site-navigation__list {
        display: none
    }

    .site-navigation__list--open {
        display: block;
        margin-top: 2em
    }

    .site-navigation__link {
        padding: 1em;
        font-size: 1.5em;
        border-radius: 0
    }

    .site-navigation__link--active {
        background-color: #fff;
        color: #0176bc
    }
}

@media (max-width:424px) {

    .site-navigation__sandwich::after,
    .site-navigation__sandwich::before {
        content: "";
        width: 12%;
        height: 3px;
        background-color: #fff;
        box-shadow: 0 10px 0 0 #fff, 0 20px 0 0 #fff;
        margin-top: -12px
    }
}


/* ========================================
   АССОРТИМЕНТ
   ======================================== */

.assortment__content-container {
    padding-bottom: 0
}

.assortment__content-container--inner {
    padding-top: 0
}

.assortment__navigation-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center
}

.assortment__navigation-elmt {
    margin-bottom: 1em
}

.assortment__navigation-elmt:not(:last-child) {
    margin-right: 1em
}

.assortment__navigation-link {
    display: block;
    padding: 1em 1.5em;
    background-color: #0176bc;
    text-decoration: none;
    color: #fff;
    border-radius: 30px
}

.assortment__navigation-link:focus,
.assortment__navigation-link:hover {
    color: #fcee21;
    outline: 0
}

.assortment__navigation-link:active {
    opacity: .7
}

.assortment__navigation-link--current,
.assortment__navigation-link--current:focus,
.assortment__navigation-link--current:hover {
    background-color: #fcee21;
    color: #434f61
}

.assortment__navigation-link--sphere {
    padding: 1em 1.5em;
    font-size: .9em
}

.assortment__list {
    list-style: none;
    margin: 2em 0 0;
    padding: 0;
    width: auto
}

.assortment__list--inner {
    margin-top: 0
}

.assortment__list-elmt {
    border-top: 1px solid #434f61;
    border-bottom: 1px solid #434f61;
    padding: 3em
}

.assortment__list-elmt--inner {
    border-top: none;
    padding: 3em 0
}

.assortment__elmt-tile {
    text-align: center;
    font-size: 1.5em;
    font-weight: 300;
    color: #0176bc;
    margin: 0 auto
}

.assortment__elmt-text {
    text-align: center;
    width: 75%;
    margin: 1em auto;
}

.assortment__inner-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center
}

.assortment__inner-elmt {
    padding-left: 1em;
    position: relative
}

.assortment__inner-elmt:not(:last-child) {
    margin-bottom: .5em
}

.assortment__inner-elmt::before {
    content: "";
    width: .3em;
    height: .3em;
    background-color: #0176bc;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-top: -.15em;
    left: 0
}

.assortment__elmt-temperature-regime {
    background: url(../img/icons/time.svg) 25% 50%/5em no-repeat, url(../img/icons/temperature.svg) 78% 50%/5em no-repeat
}

.assortment__elmt-sub-title {
    text-align: center;
    margin: .8em auto
}

.assortment__temperature-regime {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0
}

.assortment__temperature-regime-elmt:not(:last-child) {
    margin-bottom: .5em
}

.assortment__price-link {
    display: block;
    margin: 3em auto 0;
    width: 25%;
    text-align: center;
    border-radius: 30px;
    background-color: #0176bc;
    padding: 1em;
    text-decoration: none;
    color: #fff
}

.assortment__price-link:focus,
.assortment__price-link:hover {
    color: #fcee21;
    outline: 0
}

.assortment__price-link:active {
    opacity: .7
}


/* ========================================
   АДАПТИВ ДЛЯ АССОРТИМЕНТА
   ======================================== */

@media (max-width:979px) {
    .assortment__elmt-temperature-regime {
        background: url(../img/icons/time.svg) 20% 50%/5em no-repeat, url(../img/icons/temperature.svg) 83% 50%/5em no-repeat
    }

    .assortment__navigation-link--sphere {
        padding: 1em 1.5em;
        font-size: .8em
    }
}

@media (max-width:767px) {
    .assortment__content-container {
        padding-bottom: 1em
    }

    .assortment__content-container--inner {
        padding-top: 0
    }

    .assortment__navigation-menu {
        display: block
    }

    .assortment__navigation-elmt {
        margin-bottom: 1em
    }

    .assortment__navigation-elmt:not(:last-child) {
        margin-right: 0
    }

    .assortment__navigation-link {
        text-align: center
    }

    .assortment__navigation-link--sphere {
        font-size: 1em
    }

    .assortment__elmt-temperature-regime {
        background: 0 0/3em
    }

    .assortment__price-link {
        width: 50%
    }
}

.inner-menu__nav {
    padding: 2em 1em 1em
}

@media (max-width:767px) {
    .inner-menu__nav {
        padding-bottom: 1em
    }
}


/* ========================================
   УВЕДОМЛЕНИЕ О КУКАХ
   ======================================== */

@-webkit-keyframes cookie-show {
    0% {
        bottom: -10em
    }

    100% {
        bottom: 0
    }
}

@keyframes cookie-show {
    0% {
        bottom: -10em
    }

    100% {
        bottom: 0
    }
}

.cookie {
    position: fixed;
    bottom: 0;
    width: 100%;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: cookie-show;
    animation-name: cookie-show
}

.cookie--hide {
    display: none
}

.cookie__content-container {
    padding: 1em 3em;
    border-top: 1px solid #434f61;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: .8em;
    background-color: #e4e1e1;
    color: #434f61
}

.cookie-info {
    margin: 0 2em 0 0
}

.cookie__submit {
    border: 0;
    padding: .5em 2em;
    background-color: #434f61;
    color: #e4e1e1;
    cursor: pointer;
    font-size: .9em
}

.cookie__submit:focus,
.cookie__submit:hover {
    outline: 0;
    color: #fff
}

.cookie__submit:active {
    opacity: .7
}


/* ========================================
   АДАПТИВ ДЛЯ КУКОВ
   ======================================== */

@media (max-width:767px) {
    .cookie-info {
        text-align: center;
        font-size: 1.5em;
        margin-right: 0;
        width: 100%;
        margin-bottom: 1em
    }

    .cookie__submit {
        font-size: 1.2em;
        padding: .8em 3em
    }
}


/* ========================================
   ПРИМЕРЫ РАБОТ (Samples)
   ======================================== */

.samples-list {
    width: 80%;
    margin: 2em auto;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3em;
    padding: 0;
}

.samples-list__elmt {
    width: 350px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    box-shadow: 3px 5px 5px 2px rgba(67, 79, 97, 0.55);
}

.samples-list__img-container {
    width: 100%;
    height: 125px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #f5f5f5;
}

.samples-list__img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    object-fit: cover;
}

.samples-list__title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
    font-size: 0.7em;
    color: white;
    font-weight: 500;
    background-color: #0176bc;
    padding: 10px 0;
    opacity: 0;
}

.samples-list__elmt:hover .samples-list__title {
    opacity: 1;
}


/* ========================================
   АДАПТИВ ДЛЯ ПРИМЕРОВ
   ======================================== */

@media (max-width: 979px) {
    .samples-list__title {
        opacity: 1;
        font-size: 0.9em;
    }
}

@media (max-width: 767px) {
    .samples-list {
        gap: 2em;
    }
}

@media (max-width: 425px) {
    .samples-list__elmt {
        width: 100%;
    }
}


/* ========================================
   НАВИГАЦИЯ ПО КАТЕГОРИЯМ С ИЗОБРАЖЕНИЯМИ
   ======================================== */

.category-navigation__menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5em;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    margin-top: 2em;
}

.category-navigation__elmt {
    width: 500px;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 3px 5px 5px 2px rgba(67, 79, 97, 0.55);
    transition: transform 0.3s ease;
}

.category-navigation__elmt--telegramm {
    background-color: #2ca5e0;
}

.category-navigation__elmt:hover,
.category-navigation__elmt:focus-within {
    transform: translateY(-10px);
}

.category-navigation__elmt--form {
    padding: 0;
}

.category-navigation__link {
    display: block;
    box-sizing: border-box;
    height: 100%;
    text-decoration: none;
    color: #d3d3d3;
}

.category-navigation__link--telegramm {
    color: #434f61;
    text-align: center;
    position: relative;
    text-align: left;
    display: flex;
    align-items: center;
    min-height: 120px;
}

.category-navigation__telegram-icon {
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translate(0, -50%);
    width: 150px;
}




.category-navigation__telegram-icon {
    position: absolute;
    top: 50%;
    left: -3%;
    transform: translate(0, -50%);
    width: 30%;
}


.category-navigation__link:hover,
.category-navigation__link:focus {
    color: #fcee21;
}

.category-navigation__form-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #d3d3d3;
    font-weight: bold;
    height: 100%;
    width: 100%;
    background: #0176bc;
    padding: 1em;
    box-sizing: border-box;
    font-size: 28px;
}

.category-navigation__form-link:hover,
.category-navigation__form-link:focus {
    color: #fcee21;
}

.category-navigation__promo-container {
    display: flex;
    gap: 10px;
    box-sizing: border-box;
}

.category-navigation__promo-img-container {
    flex-grow: 1;
    box-sizing: border-box;
    height: 125px;
}

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

.category-navigation__title {
    display: block;
    text-align: center;
    padding: 0.5em;
    font-size: 20px;
    background: #0176bc;
    margin-bottom: 10px;
}

.category-navigation__text-list {
    color: #434f61;
    height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
}

.category-navigation__text {
    font-size: 18px;
    color: #434f61;
    text-align: center;
}

.category-navigation__text--telegramm {
    margin: 0;
    margin-left: 25%;
    z-index: 5;
    color: #f1f0f5;
    text-align: left;
    font-weight: 600;
}

/* ========================================
   АДАПТИВ ДЛЯ КАТЕГОРИЙ
   ======================================== */

@media (max-width: 979px) {
    .category-navigation__title {
        font-size: 16px;
    }

    .category-navigation__elmt {
        width: 350px;
    }

    .category-navigation__text-list {
        height: 100px;
        font-size: 14px;
    }

    .category-navigation__promo-img-container {
        height: 100px;
    }

    .category-navigation__form-link {
        font-size: 20px;
    }

    .category-navigation__elmt:hover,
    .category-navigation__elmt:focus-within {
        transform: translateY(0);
    }

    .category-navigation__elmt--telegramm {
        width: 60%;
    }
}

@media (max-width: 767px) {
    .category-navigation__elmt--telegramm {
        width: 350px;
        margin-top: 1em;
    }

    .category-navigation__telegram-icon {
        position: absolute;
        top: 50%;
        left: -2%;
        transform: translate(0, -50%);
        width: 25%;
    }

    .category-navigation__text--telegramm {
        font-size: 1em;
    }

    .category-navigation__link--telegramm {

        min-height: auto;
        padding: 8px 5px;
    }
}



@media (max-width: 425px) {
    .category-navigation__title {
        font-size: 14px;
    }

    .category-navigation__elmt {
        width: 300px;
    }

    .category-navigation__promo-img-container {
        height: 80px;
    }

    .category-navigation__text-list {
        height: auto;
        display: block;
        font-size: 14px;
    }

    .category-navigation__text {
        font-size: 14px;
    }

    .category-navigation__form-link {
        font-size: 16px;
    }
}

.category-img-list {
    display: flex;
    justify-content: center;
    gap: 1em;
    width: 80%;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.category-img-list__item {
    width: 40%;
}

.category-img-list__img {
    width: 100%;
}

@media (max-width: 767px) {
    .category-img-list {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .category-img-list__item {
        width: 100%;
    }

    .category-navigation__text {
        padding-top: 0;
    }
}





/* ============ ТАБЛИЦА РАСПРОДАЖИ ============ */
.sale-table-container {
    overflow-x: auto;
    margin: 30px 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    width: 100%;
}

.sale-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

.sale-table thead {
    background-color: #0176bc;
    color: white;
}

.sale-table th {
    padding: 18px 15px;
    text-align: left;
    font-weight: bold;
    border-bottom: 3px solid #e74c3c;
}

.sale-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
}

.sale-table tbody tr:hover {
    background-color: #f9f9f9;
}

.sale-table td {
    padding: 15px;
    vertical-align: top;
}

/* Ячейка со статусом - центрируем содержимое */
.sale-table td:last-child {
    text-align: center;
}

.color-preview {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin-right: 10px;
    vertical-align: middle;
}

.old-price {
    text-decoration: line-through;
    color: #95a5a6;
    font-size: 0.9em;
    display: block;
}

.sale-price {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.2em;
}

.sale-badge {
    display: inline-block;
    background: linear-gradient(to right, #e74c3c, #ff7675);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
    text-align: center;
    margin: 0 auto;
}

/* ============ МОБИЛЬНАЯ ВЕРСИЯ (Компактные карточки) ============ */
@media (max-width: 768px) {
    .sale-table-container {
        box-shadow: none;
        margin: 15px 0;
        overflow-x: visible;
        padding: 0 5px;
    }

    .sale-table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .sale-table thead {
        display: none;
    }

    .sale-table tbody,
    .sale-table tr,
    .sale-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .sale-table tr {
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px 12px;
        background: white;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        width: 100%;
    }

    .sale-table td {
        padding: 8px 0;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        font-size: 0.95em;
        width: 100%;
        flex-wrap: nowrap;
    }

    .sale-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
        text-align: left;
        /* На мобильных возвращаем левое выравнивание */
        justify-content: space-between;
        /* На мобильных сохраняем распределение */
    }

    .sale-table td:first-child {
        padding-top: 0;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }

    .sale-table td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #0176bc;
        margin-right: 10px;
        flex-shrink: 0;
        font-size: 0.85em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Блок с кодом цвета - делаем более компактным */
    .sale-table td[data-label="Код цвета"] {
        align-items: center;
        flex-direction: row;
    }

    .sale-table td[data-label="Код цвета"]::before {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Настройка цветового индикатора и кода */
    .color-preview {
        width: 25px;
        height: 25px;
        margin-right: 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
        flex-shrink: 0;
    }

    .sale-table td[data-label="Код цвета"] strong {
        font-size: 1em;
        font-weight: bold;
    }

    /* Упрощаем категорию - сокращаем текст */
    .sale-table td[data-label="Категория"] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-grow: 1;
        text-align: right;
        min-width: 0;
    }

    /* Делаем цены в одну строку */
    .sale-table td[data-label="Цена"] {
        flex-direction: row;
        align-items: center;
    }

    .sale-table td[data-label="Цена"]::before {
        margin-bottom: 0;
    }

    .old-price,
    .sale-price {
        display: inline;
        font-size: 1em;
    }

    .old-price {
        display: none;
        margin-right: 10px;
        font-size: 0.9em;
    }

    /* Производитель - уменьшаем */
    .sale-table td[data-label="Производитель"] {
        font-size: 0.9em;
        text-align: left;
    }

    /* Статус - компактный бейдж */
    .sale-table td[data-label="Статус"] {
        justify-content: space-between;
    }

    .sale-badge {
        padding: 4px 10px;
        font-size: 0.8em;
        margin-left: 10px;
        margin: 0;
        /* На мобильных убираем авто-отступы */
    }
}


/* ========================================
   БАННЕР РАСПРОДАЖИ (Sale Banner) - ЦЕНТРИРОВАННЫЙ
   ======================================== */
.sale_banner__content_container {
    padding: 0;
}

.sale-banner {
    background: linear-gradient(90deg, #0176bc, #ff6b6b);
    color: white;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.sale-banner__content {
    max-width: 2000px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    /* Центрируем все элементы */
    align-items: center;
    gap: 15px;
    position: relative;
    min-height: 50px;
}

.sale-banner__fire {
    font-size: 1.2em;
    animation: fire-pulse 1.5s infinite;
    flex-shrink: 0;
}

@keyframes fire-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.sale-banner__text {
    margin: 0;
    font-size: 1.1em;

    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    /* Чтобы текст не переносился */
}

.sale-banner__text strong {
    font-weight: 700;
}

.sale-banner__link {
    background-color: white;
    color: #e74c3c;
    text-decoration: none;
    padding: 6px 20px;
    border-radius: 20px;
    font-weight: 700;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    font-size: 0.95em;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.sale-banner__link:hover,
.sale-banner__link:focus {
    background-color: #fcee21;
    color: #e74c3c;
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.sale-banner__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Адаптив для баннера */
@media (max-width: 979px) {
    .sale-banner__content {
        padding: 10px 15px;
        gap: 12px;
        flex-wrap: nowrap;
        /* Не переносить элементы */
        justify-content: center;
    }

    .sale-banner__text {
        font-size: 1em;
        white-space: normal;
        /* Разрешаем перенос на мобильных */
        text-align: center;
        max-width: 400px;
        /* Ограничиваем ширину */
    }

    .sale-banner__link {
        padding: 5px 15px;
        font-size: 0.9em;
    }
}

@media (max-width: 767px) {
    .sale-banner__content {
        padding: 8px 10px;
        gap: 10px;
        flex-wrap: wrap;
        /* Переносим на мобильных */
        justify-content: center;
        text-align: center;
    }

    .sale-banner__text {
        font-size: 0.9em;
        line-height: 1.3;
        white-space: normal;
        width: 100%;
        order: 1;
        margin-bottom: 5px;
    }

    .sale-banner__fire {
        order: 0;
    }

    .sale-banner__link {
        order: 2;
        padding: 4px 12px;
        font-size: 0.85em;
    }
}

@media (max-width: 424px) {
    .sale-banner__content {
        padding: 6px 8px;
        gap: 8px;
    }

    .sale-banner__text {
        font-size: 0.85em;
    }

    .sale-banner__link {
        padding: 3px 10px;
        font-size: 0.8em;
    }
}