/* variables */
:root {
    --main-color-dark: #54636E;
    --main-color: #2B2B2B;
    --text-color: #5C5C5C;
    --grey-color: #B4B4B4;
    --white-color: #FFFFFF;

    --accent-color: #9E0C0C;
    --bg-color: #F4F1EE;
    
    --input-bg-color:#808E60;
    --social-icon-bg: #FFFFFF;
   
    --social-icon-text: #000D0B;
    --body-color: #FFFFFF; 

}

/* header */
.header .nav .list .item{
    color:var(--main-color);
}

.header .logo{
    width: 200px;
    height: 50px;

    background-image: url("/assets/images-tea/tee_harmony_logo_red.svg");
}

.header .nav .logo{
    width: 260px;
    height: 80px;

    background-image: url("/assets/images-tea/tee_harmony_logo_white.svg");
}

/* cart */

.cart::before {
    width: 30px;
    height: 25px;
    background-image: url('/assets/images-tea/icons/cart.svg');
}

/* home */

.grid .banner {
    background-image: url("/assets/images-tea/main-first-banner-desktop.jpg");
}
.social .list .link.ig{
    background-image: url('/assets/images-tea/icons/ig.svg');
}
.social .list .link.tg{
    background-image: url('/assets/images-tea/icons/tg.svg');
}
.social .list .link.vk{
    background-image: url('/assets/images-tea/icons/vk.svg');
}

/* social banner */

.social .wrapper {
    background-image: url("/assets/images-tea/bg-subscribe-banner.jpg");
}

.social .title,.social .text{
    color: white;
}

/* footer */
.footer{
    background-color: #1B1F23;
}

.footer .logo{
    width: 200px;
    height: 50px;


    background-image: url("/assets/images-tea/tee_harmony_logo_white.svg");
}


@media screen and (max-width:768px) {
    .header .nav{
        background-color: var(--accent-color);
    }
    .social .wrapper{
        background-image: url("/assets/images-tea/subscribe-banner-mobile.jpg");
        height: 275px;
    }
    .header .nav .list .item{
        color:#fff;
    }

    .grid .banner{
        background-image: url("/assets/images-tea/main-first-banner-mobile.jpg");
        height: 223px;

    }

    .page-grid .block>.img {
        aspect-ratio: 24/9;
    }

    .social .wrapper{
        background-image: url("/assets/images-tea/subscribe-banner-mobile.jpg");
        background-position: center bottom;
        aspect-ratio: 27/19;
    }

    .header .box .logo {
        width: 200px;
        height: 50px;
    }

    .footer .logo {
        width: 108px;
        height: 118px;
    }
}

.product-slider .slider .img {
    height: auto;
    aspect-ratio: 1 / 1;
}