* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    list-style: none;
    text-decoration: none;
}


/* .main {
width: 1050px;
margin: 0 auto;
@media (max-width: 997px) {
width: 100%;
padding: 0 15px;
}
} */

.section {
    margin-bottom: 44px;
    @media screen and (max-width: 997px) {
        margin-bottom: 28px;
    }
}

.banner img {
    width: 100%;
    border-radius: 20px;
}

.section-timer {
    outline: 3px solid #339E54;
    border-radius: 12px;
    height: 90px;
    display: flex;
    color: #339E54;
    @media screen and (max-width: 997px) {
        flex-direction: column;
        height: auto;
    }
}

.section-timer .time {
    font-weight: 600;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    grid-gap: 17px;
    display: flex;
    width: 448px;
    .time-num {
        font-size: 60px;
        @media screen and (max-width: 1440px) {
            font-size: 40px;
        }
        @media screen and (max-width: 997px) {
            font-size: 40px;
        }
    }
    @media screen and (max-width: 997px) {
        width: 100%;
        font-size: 18px;
        height: 70px;
    }
    @media screen and (max-width: 1440px) {
        font-size: 20px;
    }
}

.section-timer .title {
    background: url('images/bg-timer.png') no-repeat;
    width: 992px;
    height: 90px;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    padding-left: 35px;
    font-weight: 600;
    font-size: 30px;
    color: #fff;
    @media screen and (max-width: 997px) {
        width: 100%;
        border-radius: 8px 8px 0 0;
        font-size: 18px;
        height: 70px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.section-title {
    font-weight: 600;
    font-size: 30px;
    margin-bottom: 33px;
    @media screen and (max-width: 1440px) {
        font-size: 26px;
    }
    @media screen and (max-width: 997px) {
        font-size: 18px;
        margin-bottom: 24px;
    }
}

#section3 .cards {
    display: flex;
    grid-gap: 28px;
    justify-content: space-between;
    @media screen and (max-width: 997px) {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media screen and (max-width: 997px) {
    #section3 .cards .card {
        flex: 1 1 calc(50% - 10px);
    }
    #section3 .cards .card:nth-child(3) {
        flex: 1 1 100%;
    }
}

#section3 .cards .card {
    border-radius: 20px;
    height: 80px;
    flex: 1 1 calc(100% / 43);
    display: flex;
    justify-content: space-between;
    background-color: #F6F6F6;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    @media screen and (max-width: 997px) {
        height: 60px;
    }
}

#section3 .cards .card-cat:hover {
    background-color: #66B428;
    .card-title {
        color: #fff;
    }
}

#section3 .cards .card-dog:hover {
    background-color: #2DA5DC;
    .card-title {
        color: #fff;
    }
}

#section3 .cards .card-all:hover {
    background-color: #FF5967;
    .card-title {
        color: #fff;
    }
}

#section3 .cards .card svg {
    position: absolute;
    bottom: 0;
    right: 0;
    @media screen {
        bottom: -11px;
        right: -6px;
        transform: scale(0.7);
    }
}

#section3 .cards .card.card-all svg {
    bottom: 10px;
    right: 10px;
    @media screen and (max-width: 997px) {
        bottom: 1px;
        right: 4px;
    }
}

#section3 .cards .card-title {
    font-size: 26px;
    color: #000;
    font-weight: 600;
    margin: 15px 20px;
    @media screen and (max-width: 1440px) {
        font-size: 22px;
    }
    @media screen and (max-width: 997px) {
        font-size: 14px;
        margin: 15px;
    }
}

#section3 .cards .card.card-dog.card-active {
    background-color: #2DA5DC;
}

#section3 .cards .card.card-cat.card-active {
    background-color: #66B428;
}

#section3 .cards .card.card-all.card-active {
    background-color: #FF5967;
}

#section3 .cards .card.card-active .card-title {
    color: #fff;
}

#section4 .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: flex-start;
    @media screen and (max-width: 1440px) {
        gap: 14px;
    }
    /* не розтягуємо примусово */
}

#section4 .cards .card {
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 144px;
    height: 113px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    flex: 0 0 144px;
    @media screen and (max-width: 1440px) {
        width: 138px;
        flex: 0 0 138px;
    }
    /* фіксована ширина */
}


/* остання картка займає всю решту місця в ряду */

#section4 .cards .card:last-child {
    flex: 1;
    /* заповнює залишок */
    min-width: 144px;
    /* щоб не стискалася надто сильно */
}


/* адаптивність */

@media screen and (max-width: 997px) {
    #section4 .cards {
        gap: 10px;
    }
    #section4 .cards .card {
        flex: 0 0 calc(33.333% - 10px);
        width: calc(33.333% - 10px);
        height: auto;
        font-size: 14px;
    }
    #section4 .cards .card:last-child {
        flex: 1;
        min-width: calc(33.333% - 10px);
    }
}

#section4 .cards .card:hover {
    outline: 2px solid #8FBA3E;
}

#section4 .cards .card img {
    width: 100%;
}


/* 
#section5 .banner-bg-ad {
    background: #A6D64D;
}

#section6 .banner-bg-ad {
    background: #F9A017;
}

#section7 .banner-bg-ad {
    background: #EE4C8C;
}

#section9 .banner-bg-ad {
    background: #2DA5DC;
}

#section10 .banner-bg-ad {
    background: #BA3EAC;
}

#section11 .banner-bg-ad {
    background: #4E9450;
}

#section12 .banner-bg-ad {
    background: #EA7E00;
}

#section13 .banner-bg-ad {
    background: #22C3BA;
} */

.banner-bg-ad {
    border-radius: 20px;
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 35px;
    margin-bottom: 60px;
    justify-content: center;
    @media screen and (max-width: 1440px) {
        margin-bottom: 40px;
    }
    @media screen and (max-width: 997px) {
        height: 128px;
        padding: 0 28px;
        margin-bottom: 28px;
    }
}

.banner-bg-ad img {
    @media screen and (max-width: 997px) {
        height: 100%;
    }
}

.ad-products {
    display: flex;
    justify-content: space-between;
    grid-gap: 26px;
    @media screen and (max-width: 997px) {
        flex-wrap: wrap;
        gap: 15px;
        flex-direction: column;
    }
}

.ad-products .product {
    width: 20%;
    height: 431px;
    border-radius: 20px;
    border: 1px solid #F6F6F6;
    padding: 15px;
    position: relative;
    @media screen and (max-width: 997px) {
        flex: 1 1 100%;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
    }
}

.ad-products .product .product-image {
    width: 100%;
    height: 220px;
    border-radius: 7px;
    background-color: #F5F5F5;
    padding: 30px;
    margin-bottom: 15px;
    @media screen and (max-width: 997px) {
        width: 132px;
        height: 132px;
        padding: 15px;
        margin-top: 14px;
        border-radius: 16px;
        margin-bottom: 0;
    }
}

.ad-products .product .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ad-products .product .product-sticker.sticker1 {
    background-image: url('images/stiker1.svg');
}

.ad-products .product .product-sticker.sticker2 {
    background-image: url('images/stiker2.svg');
}

.ad-products .product .product-sticker {
    width: 60px;
    height: 72px;
    content: "";
    position: absolute;
    right: 30px;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    @media screen and (max-width: 997px) {
        left: 90px;
        top: 29px;
        width: 35px;
        background-size: 35px;
        background-repeat: no-repeat;
        font-size: 12px;
    }
}

.ad-products .product .product-sticker span {
    margin-top: 10px;
}

.ad-products .product .product-wishlist {
    background-image: url('data:image/svg+xml,<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.4022 0.810547C9.20371 0.810547 8.15443 1.31942 7.50037 2.17957C6.8463 1.31942 5.79702 0.810547 4.59858 0.810547C3.6446 0.811609 2.73001 1.18627 2.05545 1.85235C1.38088 2.51842 1.00144 3.4215 1.00037 4.36347C1.00037 8.37483 7.02389 11.6217 7.28041 11.7558C7.34802 11.7917 7.42359 11.8105 7.50037 11.8105C7.57714 11.8105 7.65271 11.7917 7.72032 11.7558C7.97684 11.6217 14.0004 8.37483 14.0004 4.36347C13.9993 3.4215 13.6198 2.51842 12.9453 1.85235C12.2707 1.18627 11.3561 0.811609 10.4022 0.810547ZM7.50037 10.8275C6.44063 10.2178 1.92894 7.44018 1.92894 4.36347C1.92986 3.66463 2.21142 2.99467 2.71188 2.50051C3.21233 2.00636 3.89083 1.72834 4.59858 1.72743C5.72738 1.72743 6.6751 2.32111 7.0709 3.27467C7.10588 3.35875 7.16539 3.43067 7.24186 3.48128C7.31833 3.5319 7.40831 3.55892 7.50037 3.55892C7.59243 3.55892 7.68241 3.5319 7.75888 3.48128C7.83535 3.43067 7.89485 3.35875 7.92983 3.27467C8.32563 2.31939 9.27336 1.72743 10.4022 1.72743C11.1099 1.72834 11.7884 2.00636 12.2889 2.50051C12.7893 2.99467 13.0709 3.66463 13.0718 4.36347C13.0718 7.4356 8.55894 10.2172 7.50037 10.8275Z" fill="%238F8F8F" stroke="%238F8F8F" stroke-width="0.5"/></svg>');
    width: 15px;
    height: 13px;
    display: block;
    content: "";
    @media screen and (max-width: 997px) {
        position: absolute;
        bottom: 20px;
        width: 20px;
        height: 17px;
        background-size: 20px;
        background-repeat: no-repeat;
        right: 158px;
    }
}

.ad-products .product .product-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
    @media screen and (max-width: 997px) {
        height: 0;
        margin: 0;
    }
}

.ad-products .product .product-brand {
    font-size: 12px;
    color: #8F8F8F;
    text-transform: uppercase;
    font-weight: 600;
    @media screen and (max-width: 997px) {
        position: absolute;
        left: 43px;
        top: 7px;
    }
}

.products-view-all-link {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    @media screen and (max-width: 997px) {
        font-size: 12px;
    }
}

.products-view-all-link::after {
    content: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" transform="matrix(-1.8369701987210297e-16,-1,1,-1.8369701987210297e-16,0,0)"><path d="M5 7.91016L10 12.9102L15 7.91016" stroke="%23C5C5C5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
    margin-left: 6px;
    font-weight: bold;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.products-view-all-link.expanded::after {
    transform: rotate(90deg);
}

.products-view-all {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.ad-products .product .product-name {
    font-size: 14px;
    line-height: 140%;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15px;
    @media screen and (max-width: 997px) {
        margin-bottom: 23px;
    }
}

.ad-products .product .product-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    @media screen and (max-width: 997px) {
        align-items: end;
    }
}

.ad-products .product .product-price {
    font-size: 18px;
    font-weight: 600;
    color: #E35241;
    margin-bottom: 13px;
    @media screen and (max-width: 997px) {
        margin-right: 46px;
    }
}

.ad-products .product .product-button {
    height: 30px;
    width: 100%;
    text-align: center;
    background: #8FBA3E;
    border: unset;
    color: #fff;
    cursor: pointer;
    border-radius: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    @media screen and (max-width: 997px) {
        width: 132px;
    }
}

.ad-products .product .product-button::before {
    background-image: url('data:image/svg+xml,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 17.4395C7.57843 17.4395 8.25 16.7679 8.25 15.9395C8.25 15.111 7.57843 14.4395 6.75 14.4395C5.92157 14.4395 5.25 15.111 5.25 15.9395C5.25 16.7679 5.92157 17.4395 6.75 17.4395Z" stroke="white" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 17.4395C16.5784 17.4395 17.25 16.7679 17.25 15.9395C17.25 15.111 16.5784 14.4395 15.75 14.4395C14.9216 14.4395 14.25 15.111 14.25 15.9395C14.25 16.7679 14.9216 17.4395 15.75 17.4395Z" stroke="white" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.0025 4.68945H18L16.74 10.982C16.5984 11.6946 15.9665 12.2034 15.24 12.1895H7.3125C6.55461 12.1959 5.911 11.6359 5.8125 10.8845L4.6725 2.24445C4.57472 1.49865 3.93969 0.940592 3.1875 0.939453H1.5" stroke="white" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    content: "";
    width: 19px;
    height: 19px;
    display: inline-flex;
    margin-right: 10px;
}

.ad-products .product .product-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    @media screen and (max-width: 997px) {
        width: calc(100% - 132px);
        flex: 1 1 calc(100% - 132px);
        padding-left: 10px;
    }
}

#section8 .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    @media screen and (max-width: 997px) {
        gap: 12px;
    }
}

#section8 .cards .card img {
    max-width: none;
}

#section8 .cards .card:nth-child(-n+2) {
    flex: 1 1 calc(50% - 44px);
    @media screen and (max-width: 997px) {
        height: 268px;
        flex: 1 1 calc(50% - 12px);
        width: calc(50% - 12px);
    }
}

#section8 .cards .card:nth-child(-n+2)::after {
    @media screen and (max-width: 997px) {
        background-position: bottom center;
    }
}


/* наступні три – по третині */

#section8 .cards .card:nth-child(n+3) {
    flex: 1 1 calc(33.333% - 44px);
    @media screen and (max-width: 997px) {
        height: 268px;
        width: 100%;
        flex: 1 1 100%;
        flex-direction: row;
        height: 128px;
    }
}

#section8 .cards .card {
    height: 200px;
    border-width: 4px;
    border-style: solid;
    border-radius: 20px;
    padding: 15px 26px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
    color: #000;
    @media screen and (max-width: 997px) {
        flex-direction: column;
        padding: 12px;
    }
}

#section8 .cards .card::after {
    content: '';
    display: block;
    width: 224px;
    height: 100%;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.3s ease;
    @media screen and (max-width: 997px) {
        width: 100%;
    }
}

#section8 .cards .card:hover {
    color: #fff;
}

#section8.all .cards .card1 {
    border-color: #FF6A37;
}

#section8.all .cards .card1::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/mega-wyprzedaz-all.svg');
}

#section8.all .cards .card1:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/mega-wyprzedaz-all-hover.svg');
}

#section8.all .cards .card1:hover {
    background-color: #FF6A37;
}

#section8.all .cards .card2 {
    border-color: #66B428;
}

#section8.all .cards .card2::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/bestsellery-psy.svg');
}

#section8.all .cards .card2:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/bestsellery-psy-hover.svg');
}

#section8.all .cards .card2:hover {
    background-color: #66B428;
}

#section8.all .cards .card3 {
    border-color: #FF5967;
}

#section8.all .cards .card3::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/bestsellery-koty.svg');
}

#section8.all .cards .card3:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/bestsellery-koty-hover.svg');
}

#section8.all .cards .card3:hover {
    background-color: #FF5967;
}


/* ----------------------------------------------- */

#section8.kota .cards .card1 {
    border-color: #BA3EAC;
}

#section8.kota .cards .card1::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/mega-wyprzedaz-koty.svg');
}

#section8.kota .cards .card1:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/mega-wyprzedaz-koty-hover.svg');
}

#section8.kota .cards .card1:hover {
    background-color: #BA3EAC;
}

#section8.kota .cards .card2 {
    border-color: #FF5967;
}

#section8.kota .cards .card2::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/bestsellery-koty.svg');
}

#section8.kota .cards .card2:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/bestsellery-koty-hover.svg');
}

#section8.kota .cards .card2:hover {
    background-color: #FF5967;
}

#section8.psa .cards .card1 {
    border-color: #FF6A37;
}

#section8.psa .cards .card1::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/mega-wyprzedaz-psy.svg');
}

#section8.psa .cards .card1:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/mega-wyprzedaz-psy-hover.svg');
}

#section8.psa .cards .card1:hover {
    background-color: #FF6A37;
}

#section8.psa .cards .card2 {
    border-color: #66B428;
}

#section8.psa .cards .card2::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/bestsellery-psy.svg');
}

#section8.psa .cards .card2:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/bestsellery-psy-hover.svg');
}

#section8.psa .cards .card2:hover {
    background-color: #66B428;
}

#section8.psa .cards .card3 {
    border-color: #22C3BA;
}

#section8.psa .cards .card3::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/w-zestawie-psy.svg');
}

#section8.psa .cards .card3:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/w-zestawie-psy-hover.svg');
}

#section8.psa .cards .card3:hover {
    background-color: #22C3BA;
}

#section8.psa .cards .card4 {
    border-color: #FF5967;
}

#section8.psa .cards .card4::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/oferta-miesiaca-psy.svg');
}

#section8.psa .cards .card4:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/oferta-miesiaca-psy-hover.svg');
}

#section8.psa .cards .card4:hover {
    background-color: #FF5967;
}

#section8.psa .cards .card5 {
    border-color: #F9A017;
}

#section8.psa .cards .card5::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/ostatnie-sztuki-psy.svg');
}

#section8.psa .cards .card5:hover::after {
    background-image: url('https://unizoo.pl/data/include/cms/landings/unizoodays/images/ostatnie-sztuki-psy-hover.svg');
}

#section8.psa .cards .card5:hover {
    background-color: #F9A017;
}

#section8 .cards .card .card-title {
    font-size: 30px;
    font-weight: 600;
    @media screen and (max-width: 1440px) {
        font-size: 22px;
    }
    @media screen and (max-width: 997px) {
        font-size: 14px;
    }
}

#section14 .newsletter-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    @media screen and (max-width: 997px) {
        flex-direction: column;
        gap: 20px;
    }
}

.newsletter-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.newsletter-left img,
.newsletter-right img {
    height: auto;
    width: 100%;
    @media screen and (max-width: 997px) {
        width: 100%;
    }
}

.newsletter-form {
    flex: 1;
    max-width: 500px;
    text-align: left;
}

.newsletter-form p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.newsletter-form form {
    display: flex;
    flex-direction: column;
    margin: 0 100px;
    align-items: center;
    @media screen and (max-width: 997px) {
        margin: 0;
    }
}

.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.newsletter-form .checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 30px;
}

.newsletter-form button {
    padding: 12px;
    background-color: #1d5c3b;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    width: 190px;
    cursor: pointer;
}

.newsletter-form button:hover {
    background-color: #16462d;
}


/* Ховаємо стандартний чекбокс */

.checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}


/* Контейнер */

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    position: relative;
}


/* Перед span малюємо коробочку */

.checkbox span {
    position: relative;
    padding-left: 28px;
    /* місце під чекбокс */
    cursor: pointer;
    display: inline-block;
}


/* Порожня коробочка */

.checkbox span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border: 2px solid #1d5c3b;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    transition: 0.2s;
}


/* червоний при помилці */

.checkbox.error span::before {
    border-color: red;
}


/* Галочка */

.checkbox input[type="checkbox"]:checked+span::after {
    content: "✔";
    position: absolute;
    left: 1px;
    top: 3px;
    font-size: 16px;
    color: #1d5c3b;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-columns {
    display: flex;
    gap: 40px;
    @media screen and (max-width: 997px) {
        flex-direction: column;
        gap: 0;
    }
}

.faq-column {
    flex: 1;
}

.faq-item {
    border-bottom: 1px solid #ddd;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    transition: max-height 0.4s ease, padding 0.4s ease;
    color: #444;
    padding: 0 1rem;
}

.faq-answer.open {
    max-height: 200px;
    /* достатньо для тексту */
    margin-bottom: 10px;
}

.faq-note {
    margin-top: 30px;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.faq-note .icon {
    color: red;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    /* достатньо для тексту */
    padding: 0.5rem 1rem;
}

.faq-question {
    width: 100%;
    text-align: left;
    border: none;
    padding: 0.8rem 1rem;
    cursor: pointer;
    font-size: 18px;
    position: relative;
    margin-bottom: 0.3rem;
    background: none;
    @media screen and (max-width: 997px) {
        padding: 0.8rem 0;
        font-size: 14px;
    }
}

.faq-question::after {
    content: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.91016L10 12.9102L15 7.91016" stroke="%23C5C5C5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    position: absolute;
    right: 1rem;
    transition: transform 0.3s ease;
    @media screen and (max-width: 997px) {
        right: 0;
    }
}

.faq-item.active .faq-question::after {
    content: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12.9102L10 7.91016L5 12.9102" stroke="%23C5C5C5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

#section16 {
    color: #E35241;
    font-size: 14px;
    display: flex;
    align-items: center;
}

#section16 a {
    color: #E35241;
    margin-left: 3px;
}

#section16 .icon {
    margin-right: 8px;
}

#blog_item_associated .products {
    grid-gap: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    @media screen and (max-width: 1440px) {
        grid-gap: 16px !important;
    }
}

.faq-answer-txt {
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.faq-quest-btn.active~div>div.faq-answer-txt {
    height: max-content;
    max-height: 1500px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.faq-quest-btn.active::after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}

.faq-quest-btn {
    font-size: 17px !important;
    font-weight: 600;
    padding: 15px 0;
    text-align: left;
    width: 100%;
    position: relative;
    cursor: pointer;
    color: #000000;
    box-sizing: border-box;
    border-top: 1px solid #DADADA;
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media (max-width: 991px) {
        font-size: 14px !important;
    }
}

.ranking-content-faq {
    border-bottom: 1px solid #DADADA;
}

.faq-answer-txt a {
    text-decoration: underline;
}

.faq-answer-txt p,
.faq-answer-txt ul {
    margin-bottom: 15px;
    line-height: 130%;
    font-size: 15px !important;
    @media (max-width: 991px) {
        font-size: 12px !important;
    }
}

.faq-quest-btn::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 6.5L6 1.5L1 6.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    width: 12px;
    height: 8px;
    display: block;
    background-repeat: no-repeat;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    flex: none;
    margin-left: 20px;
}

.cm {
    overflow: unset !important;
}

.product:hover {
    box-shadow: none !important;
}

.product__prices .price.--convert {
    display: none !important;
}