* {padding: 0; margin: 0; font-family: inherit; font-size: inherit;}
:root {
    --c1: rgba(207, 209, 211, .6);
    --c2: #9746FD;
    --c3: #a756FD;
}
html, body{ background: #131117; font-family: 'Overpass', sans-serif; color: #fff; font-size: 14px; line-height: 1; }
a, a:visited{  color: #fff; text-decoration: none; }
a:hover, a:active, a.active{ color: var(--c2); }
p{margin: 0 0 2% 0;  line-height: 1.3; }
h1{ font-size: 200%; }
h2{ font-size: 150%; }
.center{ text-align: center; }
.hidden{ display: none !important; }
.wrapper{ margin: 0 auto; max-width: 1350px; min-width: 360px; box-sizing: border-box; }
.wrapper-inner{margin: 0 3%; }
.close-btn{ position: absolute; top: 25px; right: 25px; fill: #fff; width: 16px;  height: 16px; }
.page-content{ line-height: 1.3; }
.page-content h1{ padding-bottom: 3%; }
svg.checked{width: 20px; height: 22px; fill: #5cb85c; vertical-align: middle; margin-right: 10px;}
.price-val:after{ content: "₽"; margin-left: 5px; }

.site-title{ border-top: 1px solid rgba(255, 255, 255, .08); padding: min(3%, 28px) 0; margin: 0 3%; text-align: center; color: var(--c1); line-height: 1.2; position: relative;}
.site-title > div{ color: #fff; font-size: 165%; font-weight: 600; cursor: pointer; }
.site-title > span{ position: absolute; top: 50%; display: none; transform: translate(0, -50%); }
.site-title > span.city{ left: 0; }
.site-title > span.popup-contacts-btn{ right: 0; cursor: pointer;}
.site-title > span svg{ fill: var(--c1); height: 20px; width: 20px; vertical-align: middle; border: 1px solid #444; margin-left: 10px; border-radius: 3px;}

.nav{padding: 2% 0; color: #999; font-size: 85%; }
.nav :is(a, a:visited){ color: #999; }
.nav :is(a:hover, a:active){ color: #fff; text-decoration: underline;}

.popup-menu{ position: fixed; left: 0; top: 0; bottom: 0; width: 100%; box-sizing: border-box; padding: 28px 16px; z-index: 100; background: #131117; }
.popup-menu .list{ display: flex; flex-direction: column; font-size: 110%; }
.popup-menu .list a{ margin-bottom: 20px; }
.popup-menu .list span{ font-weight: 600; border-bottom: 1px solid #444; padding-bottom: 20px; margin-bottom: 23px; }
.popup-contacts{ background: rgba(0, 0, 0, 0.5);  position: fixed; left: 0; top: 0; bottom: 0; right: 0; }
.popup-contacts > div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #131117; padding: 30px 40px; width: 250px; vertical-align: middle; } 
.popup-contacts > div > div{ padding: 5px 0; }
.popup-contacts > div > div > svg{ fill: #999; width: 30px; height: 30px; margin-right: 15px; vertical-align: middle;}
.popup-contacts > div > div > a{ color: var(--c2); border-bottom: 1px solid var(--c2); }
.popup-cart{ background: rgba(0, 0, 0, 0.5);  position: fixed; left: 0; top: 0; bottom: 0; right: 0; }
.popup-cart > div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #131117; padding: 50px 40px 40px 40px; width: 250px; text-align: center; } 
.popup-cart a{ color: var(--c2); }

header .wrapper-inner{display: flex; justify-content: space-between; padding: min(2%, 12px) 0;}
header .wrapper-inner > div{ align-self: center; }
header svg{ height: 32px; width: 32px; fill: #fff; vertical-align: middle;}
header .menu-btn{ margin-right: 15px; }
header .menu{ display: none; }
header .menu :is(a, a:visited){ margin-right: 20px; }
header .cart-count{ color: #fff; display: inline-block; background: var(--c2); border-radius: 50%; width: 30px; height: 30px; line-height: 33px; text-align: center; vertical-align: middle;}

footer{ background: #000; text-align: center; margin-top: 7%; padding-bottom: 2em;}
footer > div:first-child{border-bottom: 1px solid #191919; padding: 7% 0;}
footer > div:first-child .phone{ font-size: 200%; padding-bottom: 3%; font-weight: 600; }
footer .menu{ display: flex; justify-content: center; line-height: 1.3;}
footer .menu a{ margin: 0 2%; border-bottom: 1px solid transparent; }
footer .menu a:is(:hover, :active){ border-bottom: 1px solid var(--c2); }
footer .copyright{ color: #777; padding-top: 2em; font-size: 80%; }
    
.banner{ height: 40vw; max-height: 50vh; background: url(images/banner.jpg) 50% 50% no-repeat; background-size: cover;}
.products-menu{display: flex; justify-content: center; position: sticky; top: 0; background: #131117; border-bottom: 1px solid #191919;}
.products-menu :is(a, a:visited){  margin: max(2%, 15px) 2%; }
.index-page .section-title{ text-align: center; padding-top: max(70px, 7%); }
.index-page .section-title :is(a, a:visited){ font-size: 300%; }
.index-page .info{font-size: 150%; text-align: center; padding-top: max(70px, 7%);}
.index-page .info p{ font-style: italic;}

.contacts-ico{ display: inline-block; background: var(--c2); border-radius: 50%; width: 36px; height: 36px; text-align: center; vertical-align: middle; margin: -3px 15px 0 0;}
.contacts-ico img{ width: 100%; }

.product, .product .info{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.product .image{ margin-bottom: 3%; }
.product .image img{ max-width: 100%; border-radius: 5px; }
.product .price-val{ font-size: 150%; font-weight: 600; }
.product > div, .product > div > div{width: 100%;}
.product .text{ text-align: justify; padding-bottom: 20px; }

.cart .item{ border-bottom: 1px solid #444; padding-bottom: 1.5%; margin-bottom: 1.5%; display: flex; justify-content: space-between; flex-wrap: wrap; }
.cart .item .image{ width: 30%; }
.cart .item .info{ width: 67%; }
.cart .item .price{font-size: 150%; padding: 2% 0;} 
.cart .item .image img{ max-width: 100%; max-height: 300px; }
.cart .price-inp{ width: 3em; text-align: center; background: #444; color: #fff; font-size: inherit; padding: 0 10px; border: 1px solid #000; border-radius: 3px; outline: none; line-height: 1.5; }
.cart input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
}
.cart input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {	display: none; }
.cart .form{ margin: 5% auto 0 auto; width: 350px; line-height: 1.5; }
.cart .inp{ margin-bottom: 10px; width: 100%; box-sizing: border-box; background: #444; color: #fff; font-size: inherit; padding: 5px 10px; border: 1px solid #000; border-radius: 3px; outline: none; line-height: 1.5; }
.cart .inp.err{ border-color: #f00; }
    
.products{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.products .item{
    width: 49%;
    margin-top: max(4%, 30px);
    font-size: 115%;
    display: flex;
    flex-direction: column;
}
.products .item:nth-child(2n){ 
    margin-left: 2%; 
}
.products .item > div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 6em;
}
.products .item .image{
    display: block;
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    padding-top: 100%;
    border-radius: 5px;
    margin-bottom: 20px;
}
.products .item .price{
    display: flex;
    justify-content: space-between;
}
.products .item .price > span{
    font-size: 120%;
    font-weight: 600;
    align-self: center;
}

.add-to-cart, .btn{
    background: var(--c2);
    color: #fff !important;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
}
.add-to-cart svg{
    max-width: 1.5em;
    max-height: 1.5em;
    fill: #fff;
    vertical-align: middle;
}
.add-to-cart:hover, .add-to-cart:active{
    background: var(--c3);
}
.add-to-cart span{
    display: none;
    margin-right: 7px;
}

@media (pointer: fine) {
    /*
    .products .item .add-to-cart{ opacity: 0; }
    .products .item:hover .add-to-cart{ opacity: 1; }
    */
}

@media (min-width: 480px){
    .popup-menu{ width: 360px; }
}

 @media (min-width: 640px){
    html, body{ font-size: 16px; }
    .add-to-cart span{ display: inline;}
    header .menu, .site-title > span{ display: block; }
    header .menu-btn, header .phone-btn, .popup-menu{ display: none; }
    .product .image{ width: 38%; margin: 0;}
    .product .info{ width: 59%; }
    .cart .item .info{ font-size: 130%; }
}
 
 @media (min-width: 800px){
    .products .item{ width: 32%; }
    .products .item:nth-child(2n){ margin-left: 0; }
    .products .item:nth-child(3n-1){ margin-left: 2%;  margin-right: 2%; }
    .product .image{ width: 33%; }
    .product .info{ width: 65%; }
    .product .text{ width: 67%; }
    .product .price{ width: 30%; }
    .product .add-to-cart{ display: block; }
    .product .image{ width: 20%; margin: 0;}
    .product .info{ width: 77%; }
    .cart .form{ margin-left: 0; }
}