@font-face {
font-family: "sans-serif";
src: url("./fonts/sans-serif.ttf") format("truetype");
}
* {
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 0.2px;
}
body {
width: 100%;
font-family: sans-serif;
}
.header-container {
font-family: sans-serif;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
height: 178px;
}
/*---------------------h-block-1------------------------*/
.h-block-1 {
display: flex;
justify-content: space-between;
width: 100%;
height: 80px;
}
.h-logo {
width: 220px;
min-width: 220px;
cursor: pointer;
}
.h-logo > a > img {
padding: 0;
margin: 0;
width: 100%;
}
.h-top-menu {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.h-top-menu > ul {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 500px;
}
.h-top-menu > ul > li a {
position: relative;
font-weight: 400;
color: var(--color-graphite);
line-height: 3;
text-decoration: none;
font-size: 17px;
}
.h-top-menu > ul > li:nth-child(1) a {
 color: red;
}
.h-top-menu > ul > li a:before {
position: absolute;
content: "";
top: 22px;
left: 0;
width: 100%;
height: 2px;
border-radius: 1.5px;
transition: 0.33s linear;
}
.h-top-menu > ul > li a:hover {
color: var(--color-blue);
}
.h-top-menu > ul > li:hover a:before {
background-color: var(--color-blue);
}
.h-block-1-lang-phone {
display: flex;
flex-direction: row; 
justify-content: center; 
align-items: center; 
}
.lang {
position: relative;
width: 34px; 
height: 34px; 
display: flex;
}
.lang-title {
width: 100%; 
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border: 1px solid var(--color-graphite); 
border-radius: 17px;
cursor: pointer;
}
.lang:hover > .lang-wripper {
display: flex; 
}
.lang-wripper {
display: none;
flex-direction: column;
position: absolute;
right: -10px; 
top: 34px; 
width: 111px;
height: auto; 
}
.lang-list {
margin-top: 10px;
padding: 5px 0;
border: 1px solid var(--color-blue);  
background-color: white;
border-radius: 5px;
}
.lang-country {
padding: 22px 10px; 
width: 100%;
height: 36px;
background-color: white;
display: flex;
flex-direction: row; 
justify-content: space-between;
align-items: center; 
}
.lang-country > img {
width: 32px;
height: 32px;
border: 1px solid gray; 
border-radius: 16px;
}
.lang-country > a { 
text-decoration: none;
color: var(--color-graphite); 
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 34px;
font-size: 14px;
}
.lang-country > a:hover {
background-color: lightgray; 
}
.h-phone {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
min-width: 210px;
height: 34px;
}
.h-phone > div {
height: 100%;
}
.h-phone > div a {
padding-left: 34px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 15px;
font-weight: 400;
text-decoration: none;
line-height: 2;
color: var(--color-graphite);
height: 100%;
}
.h-phone > div a:hover {
color: var(--color-blue);
}
.h-phone > div a:before {
content: "";
position: absolute;
left: 0;
width: 34px;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
.h-phone > .h-kievstar a:before {
background-image: var(--img-kievstar);
background-size: 26px 26px;
}
.h-phone > .h-vodafone a:before {
background-image: var(--img-vodafone);
background-size: 24px 24px;
}
/*---------------------h-block-2------------------------*/
.h-block-2 {
margin-top: 10px;
width: 100%;
height: 98px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: #515151;
}
 /*---------------------------------------------*/
 .h-sect-search {
width: 420px;
height: 40px;
position: relative;
margin-right: 15px;
margin-left: 15px;
}
.h-searchbar {
height: 40px;
position: relative;
font-size: 17px;
width: 100%;
border: 1px solid white;
border-radius: 2px;
padding: 10px;
padding-right: 45px;
outline: none;
}
.h-btn-seach {
margin: 0;
width: 40px;
height: 40px;
padding: 6px;
top: 0;
right: 0;
position: absolute;
border-radius: 10px;
background-color: white;
cursor: pointer;
}
.h-btn-seach:hover {
padding: 8px;
}
.h-searchbar::placeholder {
opacity: 0.5;
}
/*---------------------------------------------*/
.korzina {
display: flex;
justify-content: flex-start;
margin-right: 10px;
width: 300px !important;
height: 65px !important;
}
.h-like-product {
display: flex;
justify-content: center;
align-items: center;
width: 65px;
height: 65px;
background-color: #515151;
background-image: var(--img-like-white);
background-size: 44px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
border-radius: 2px;
background-color: white;
}
.h-label-place {
margin-left: 20px;
background-color: white;
}
.mycart-cart-label {
height: 65px;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}
.mycart-total-cnt {
width: 65px;
height: 65px;
max-height: 65px;
text-align: center;
padding-top: 7px;
font-size: 19px;
background-image: var(--img-koshik-main);
background-size: 54px 54px;
background-repeat: no-repeat;
background-position: 50% 85%;
border: 1px solid #848484;
}
.korzina-logo {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding-left: 15px;
width: 145px;
max-height: 65px;
height: 65px;
background-color: white;
font-size: 18px;
cursor: pointer;
line-height: 1.1;
color: var(--color-blue);
border: 1px solid #848484;
font-weight: 400;
}
/* --------------------Кнопка--Мобільне меню-------------------------*/
.h-sect-menu {
display: flex;
flex-direction: column;
align-items: center;
visibility: hidden;
}
.open-btn {
font-size: 30px;
font-weight: bold;
width: 52px;
height: 52px;
cursor: pointer;
background-color: white;
color: black;
border-radius: 2px;
display: flex;
flex-direction: row;
justify-content: center;
margin-left: 8px;
border: 1px solid red;
background-image: url(/img/main/icon-mobi-menu-open.svg);
background-size: 80% 80%;
background-position: center;
}
/*---------------------------------------------*/
.header-menu {
visibility: hidden;
position: absolute;
}
@media screen and (max-width: 1152px) {
.h-top-menu {
 display: none;
}
}
@media screen and (max-width: 800px) {
.header-container {
margin-top: -15px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 160px;
}
.h-block-1 {
display: flex;
justify-content: space-between;
width: 100%;
height: 90px;
}
.h-top-menu > ul > li a {
font-size: 18px;
}
.h-block-1-lang-phone {
display: none;
}
/*---------------------------------------------*/
.h-block-2 {
margin-top: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 70px;
}
.h-sect-search{
width: 100%;
}
.h-searchbar {
visibility: hidden;
}
/*---------------------------------------------*/
.h-sect-menu {
visibility: visible;
}
/*---------------------------------------------*/
.korzina-logo{
display: none;
}
.korzina {
height: 52px !important;
width: 115px !important;
}
.h-like-product {
width: 52px;
height: 52px;
min-width: 52px;
min-height: 52px;
background-size: 38px;
border: 1px solid grey;
border-radius: 2px;
}
.h-label-place {
margin-left: 10px;
width: 52px;
height: 52px;
border: 1px solid red;
border-radius: 2px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.mycart-cart-label {
width: 52px;
height: 52px;
}
.mycart-total-cnt {
width: 52px;
height: 52px;
padding-top: 5px;
border: none;
font-size: 19px;
background-size: 46px;
}
/*---------------------------------------------*/
.header-menu {
margin-top: 160px;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0px;
width: 100%;
height: auto;
background-color: white;
visibility: hidden;
border: 1px solid red;
overflow-y: auto;
z-index: 99;
}
.header-overlay {
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
background-color: white;
}
.header-ul-1,
.header-ul-2,
.header-ul-back {
position: absolute;
line-height: 1.25;
width: calc(100%-2px);
cursor: pointer;
}
.header-ul-1 {
top: 0;
right: 10px;
left: 10px;
}
.header-ul-2 {
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.header-ul-back {
left: 10px;
right: 10px;
top: 3px;
}
.header-ul-1 > li,
.header-ul-2 > li,
.header-ul-back > li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 18px;
font-weight: 400;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 7px;
list-style-type: none;
cursor: pointer;
}
.header-li-1 a,
.header-li-2 a{
width: 100%;
display: flex;
color: #272929;
text-decoration: none;
cursor: pointer;
}
/* ---li-1 з ссилкою--- */
.header-li-1 a > span,
.header-li-2 a > span{
display: block;
width: 100%;
height: 100%;
margin-left: 18px;
 }
/* ---li-1 без ссилки--- */
.header-li-1 > span > span {
margin-left: 18px;
 }
li.header-katalog-li-1 {
font-weight: bold;
color: var(--color-blue);
font-size: 18px;
padding-left: 35px;
outline: 1px solid lightgrey;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 20px;
}
li.header-katalog-li-1 > a {
width: 100%;
color: var(--color-blue);
text-decoration: none;
font-weight: bold;
}
.header-arrow-1 {
position: absolute;
width: 18px;
height: 18px;
font-size: 18px;
background-image: var(--img-arrow);
background-repeat: no-repeat;
background-size: 18px 12px;
background-position: center;
opacity: 0.6;
right: 5px;
}
.header-arrow-2 {
position: absolute;
width: 18px;
height: 18px;
font-size: 18px;
background-image: var(--img-arrow);
background-repeat: no-repeat;
background-size: 18px 12px;
background-position: center;
opacity: 0.6;
right: 0;
left: 5px;
transform: rotate(180deg);
}
.header-li-1:active,
.header-li-2:active,
.header-katalog-li-1:active{
background-color: lightblue;
}
.h-akcia{
margin-left: 5px;
font-weight: 600;
}
/* -------------- Підменю Контакти --------------- */
.header-phone::before {
position: absolute;
content: "";
display: inline-block;
width: 26px;
height: 26px;
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: center;
margin-top: -2px;
}
.header-kievstar::before {
background-image: var(--img-kievstar);
}
.header-vodafone::before {
background-image: var(--img-vodafone);
}
.header-viber::before {
background-image: var(--img-viber);
background-size: 24px 24px;
}
.header-instagram > a > span {
margin-left: 6px;
}
.header-instagram::before {
background-image: var(--img-instagram);
background-size: 24px 24px;
}
li.header-phone a {
margin-left: 40px;
text-decoration: none;
color: black;
}
}