@import url("font/lato/stylesheet.css");

:root{
    --black:#28292A;
    --blue:#00A7E1;
    --red:#E05C55;
    --green: #00E19D;
    --shadow:  0 4px 7px -3px rgba(0,0,0,0.2);

}

BODY{ font-family: Lato, sans-serif; font-size:14px; font-weight: 400; line-height: 1.4; color: var(--black)}
h1{ font-size: 28px; margin: 15px 0 10px 0; line-height: 1.2}
h2{ font-size: 22px; margin: 10px 0;}
p{ margin: 0; margin-bottom: 7px;}

.page h1{ font-size: 24px; }
.page h1.center{text-align: center}

.__wrapper{ padding-top: 100px;  max-width: 2000px; margin: auto}

.section-products .__container,
.catalog .__container
    { max-width: 1420px;}

header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000 }
.header{ background: #fff;}
.header .header-top{ padding: 10px 0; height: 26px}

.header .header-logo{ width: 80px}
.header .header-item-logo span{ font-size: 13px; line-height: 1.2; font-weight: 300; padding-left: 20px }

.header .header-top-phone{ background-image: url(../images/sprite-icons.svg#phone-icon);  background-repeat: no-repeat;
    background-position: left center; background-size: 18px;  padding: 7px 0 7px 24px; line-height: 1; font-weight: 600}
.header .header-top-time{ background-image: url(../images/sprite-icons.svg#times-icon);  background-repeat: no-repeat;
    background-position: left center; background-size: 18px;  padding: 7px 0 7px 24px; line-height: 1; }

.header .header-bottom{ background: var(--blue); padding: 10px 0; margin: auto; /* max-width: 1240px;*/}

.header .header-search{ flex: 1; max-width: 480px;}
.header .header-search input{ border: 1px solid #254054; background-color: #fff;  border-radius: 6px; padding: 7px 10px; padding-right: 35px; font-size: 13px; line-height: 1; width: 100%}
.header .header-search .search-button{ background-color: transparent; border:none; background-image: url(../images/sprite-icons.svg#search-button);  background-repeat: no-repeat;
background-position: center; background-size: 18px; display: block; position: absolute; top:0; bottom: 0; right: 0; width: 30px;}



/***/
.header-menu-button{ margin-right: 40px; height: 100%; position: static}
.menu-button{ display:block;   height:22px; z-index: 7100;  -webkit-transition: all 0.5s ease; transition: all 0.5s ease; right: 0; position: relative;}
.menu-button .menu-icon{ display:block; width:22px;position:absolute; height:2px;  top:0; bottom:0; left:0; right:auto; margin:auto;
    background: #fff;border-radius: 2px;}
.menu-button .menu-icon:before,
.menu-button .menu-icon:after{ display:block; content:""; position:absolute; height:2px; width:100%; left:0;
    margin:auto; background: #fff; -webkit-transition: all .3s ease; transition: all 0.3s ease; border-radius: 2px;}
.menu-button .menu-icon:before{ top:7px;}
.menu-button .menu-icon:after{ bottom:7px;}
.menu-button.is_open .menu-icon, .menu-button.is_open .menu-icon:before, .menu-button.is_open .menu-icon:after{  background: #fff;}
.menu-button.is_open .menu-icon{ -webkit-transform: rotate(-180deg)}
.menu-button.is_open .menu-icon{ height:0; }
.menu-button.is_open .menu-icon:before{-webkit-transform: rotate(-45deg);    transform: rotate(-45deg);      width: 100%;   top: 0; bottom:0;}
.menu-button.is_open .menu-icon:after{-webkit-transform: rotate(45deg);    transform: rotate(45deg);      width: 100%;   top: 0; bottom:0;}
.menu-button span{padding-left: 35px;  line-height: 22px;  color: #fff;}

.popup-menu{ display: none; box-sizing: border-box; padding: 30px 40px; font-size: 16px;}
.popup-menu a, .popup-menu .menu-cat-img{ display: flex; align-items: center; margin-right: 10px; }
.popup-menu .menu-cat-img img{ width: 36px; height: auto; max-width: unset }
.popup-menu ul{ list-style: none; margin: 0; padding: 0}
.popup-menu ul li{ margin-bottom: 15px}
.popup-menu ul li a{ border: 1px solid #d5d5d5; border-radius: 6px; padding: 7px}


.over-content  .popup-menu{ display: block}
.header-menu-button .over-container{ top:100px}

/***/
.mobile-toolbar-container{ position: fixed; z-index: 500; bottom: 0; left: 0; width: 100%; height: 55px; background: #fff; box-shadow: 0 -3px 5px 0 rgba(0,0,0,0.1); z-index: 9000}
.mobile-toolbar{ height: 100%; padding: 0 20px;  	display: flex; align-items: center; }
.toolbar-item{padding: 5px; border-radius: 4px; margin-right: 15px}
.toolbar-item a{ display: block;  position: relative; }
.toolbar-item a .title{ display: block; text-align: center; font-size: 10px; color: var(--black) ; line-height: 14px; margin-top: 2px;}
.toolbar-item a .count{ display: block; position: absolute; width: 15px; height: 15px; line-height: 15px; text-align: center; font-size: 11px; opacity:0;
    background: var(--red); color:#fff; border-radius: 50%; top: -6px; right: -11px; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }
.toolbar-item a .count.is-show{ opacity: 1 }
.toolbar-item a:hover{ color: var(--blue);}
.toolbar-item-icon-wrap{width: 18px; margin: auto}
.toolbar-item-icon{ background-size:18px; height: 18px; width: 18px; background-repeat: no-repeat; background-position: center; filter: grayscale(1);  transition: all 0.3s ease; margin: auto }
.toolbar-item.catalog .toolbar-item-icon{ background-image: url(../images/sprite-icons.svg#catalog-icon);}
.toolbar-item.basket .toolbar-item-icon{ background-image: url(../images/sprite-icons.svg#basket-icon-b);}
.toolbar-item.washlist .toolbar-item-icon{ background-image: url(../images/sprite-icons.svg#favorites-icon-b);}
.toolbar-item.personal .toolbar-item-icon{ background-image: url(../images/sprite-icons.svg#user-icon-b);}

/***/
.button{ display: block; border-radius: 10px; padding: 0 15px; height: 46px; line-height: 46px; background: var(--blue); text-align: center; min-width: 180px; color: #fff; border: none; box-shadow: 0px 16px 7px -9px rgb(43 65 92 / 18%); box-sizing: border-box; cursor: pointer; transition: all 0.3s ease; }
.button:hover{ background-color: #0077a1}
    /***/
.form-item-input{ margin-bottom: 10px;}
.form-item-input input,
.form-item-input textarea
    { box-sizing: border-box; width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--blue); background: #fff;  box-shadow: var(--shadow)}

.section-notice{background: rgb(224 92 85 / 30%); box-shadow: 0px 0px 30px -10px #00000024;padding: 15px;margin: 15px 0;border-radius: 10px; text-align: center}
.section-notice h4{ font-size: 16px; margin: 10px 0}

/***/
.footer{  padding-bottom: 90px;  background: var(--black);  color: rgb(255 255 255 / 70%);}
.footer-items{ padding: 20px 0;}
.footer-logo{ width: 100px;}
.footer-contacts{ margin: 20px 0}
.footer-menu{ margin: 10px 0;}
.footer-menu .menu-items a{ text-align: center}
.footer-menu .menu-items{ flex-wrap: wrap; align-items: center; justify-content: center}

/***/
.acms_popup_wrapper{ border-radius: 10px;}
.acms_popup_case{ padding: 20px;}

/***/
.message{ padding: 30px 20px; border: 1px solid #d5d5d5; border-radius: 6px;  margin: auto; margin: 20px 0; box-shadow: var(--shadow) }

.section-title{ padding-left: 15px; display: flex; justify-content: space-between; align-items: center}
.section-title h2{ font-size: 18px;}
.section-title:before{ content: ""; display: block; position: absolute; top: 12px; width: 10px; height: 10px; left: 0px; background: var(--blue)}
.section-title .section-link{ font-size: 13px; color: var(--blue); text-decoration: underline; }
/***/
.catalog-container{}
.catalog .mobile-section-header{ display: flex; justify-content: space-between; align-items: center}
.catalog .mobile-section-header h1{ font-size: 16px;}
.catalog .mobile-section-header .catalog-filter-icon{ display: block; background: none; border: none; width: 26px; height: 26px; background: url(../images/sprite-icons.svg#filter-icon);
background-position: center; background-repeat: no-repeat; background-size: contain;  }
.catalog .desctop-section-header{ display: none; font-weight: bold; font-size: 24px}

.catalog .catalog-sidebar{ display: none;}
.catalog .over-container .catalog-sidebar{ display: block;}
.catalog .over-container{ top:100px}
.catalog .over-container .overheight_close_button{ position: absolute}

.sidebar-content{padding: 20px;}

/***/
.section-products {margin-bottom: 30px;}
.products-list{ display: flex; flex-wrap: wrap; }
.products-list .products-item{ flex-basis:50%; border: 1px solid rgb(0 0 0 / 10%); box-sizing: border-box;     padding: 10px 5px 25px; border-left-color: transparent; margin-bottom: -1px;   transition: all 0.3s ease;     display: flex; flex-direction: column;}

.products-list .products-item:nth-child(odd){border-left-color: rgb(0 0 0 / 10%);  }
.products-list .products-item:hover{ border: 1px solid var(--blue) !important}
.products-list .product-favorite button {  position: absolute; width: 18px; height: 18px; top: 0px; right: 0px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; z-index: 10; cursor: pointer}
.products-list .product-favorite svg { display: block; width: 100%; max-height: 100%; fill: transparent}
.products-list .product-favorite .is-active svg {fill: var(--blue)}
.products-list .product-content{ flex: 1; display: flex; flex-direction: column; padding: 0 10px }
.products-list .product-content h3{ flex: 1;}

.products-item .product-stykers{position: absolute; top:10px; left: 10px; z-index: 10}
.products-item .product-stykers >div{  font-size: 12px; font-weight: 500; color: #fff; background-image: url(../images/sprite-icons.svg#fire); background-repeat: no-repeat; background-position: 3px center; background-size: 14px 14px; padding: 3px 10px 3px 20px; border-radius: 10px 2px 10px 2px}
.products-item .product-styker-sale{ background-color: #E83437}

.elem-detale .favorites-link button {   width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; z-index: 10; cursor: pointer}
.elem-detale .favorites-link svg { display: block; width: 100%; max-height: 100%; fill: transparent}
.elem-detale .favorites-link .is-active svg {fill: var(--blue)}

.products-list .product-img{  padding-top: 10px}
.products-list .product-img img{ width: 100%;  object-fit: cover}
.products-list .products-item h3{ font-size: 14px; font-weight: 600; line-height: 1.2; margin: 10px 0}
.products-list .product-sale{ display: flex; justify-content: space-between; align-items: center}
.products-list .product-price { display: flex; align-items: flex-end; line-height: 1;}
.products-list .product-price .price{ font-size: 20px; font-weight: 900}
.products-list .product-price .old-price{ font-size: 14px; font-weight: 900; margin-left: 10px; color: #969696; position: relative}
.products-list .product-price .old-price:after{content:""; display: block; position: absolute; height: 1px; background: #969696;     top: 0; left: -3px;margin: auto;right: -3px;bottom: 0;}
.products-list .product-price .curency{ font-weight: 700}
.products-list .product-price .percent{ color: #E83437; font-weight: 700; padding-left: 10px;}

.products-list .product-link{position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; margin: auto; cursor: pointer; z-index: 5}


.quantity-variable-container {display: none; position: absolute; height: 100%; width: 100%; top: 0; left: 0 }
.quantity-variable-container.is-show{display: block;}
.quantity-variable-wrapper{display: flex; align-items: stretch; justify-content: space-between; gap:10px}
.quantity-variable-button{ flex-grow: 1}
.quantity-variable-button a{ display: flex; flex-direction: column; align-items: center; justify-content: center; background: #1ba35f; border-radius: 6px; color: #fff;     padding: 0 10px;min-width: 80px; height: 100%;}
.quantity-variable-button a span:first-child{ font-weight: bold}
.quantity-variable-button a span:last-child{font-size: 12px;}
.quantity-variable{display: flex; align-items: center; justify-content: space-between}
.quantity-variable > div{ width: 46px; height: 46px; border-radius: 6px; background: #eaf4f7; font-size: 28px; flex-shrink: 0;
    display: flex;align-items: center;justify-content: center; color: #00a7e1}
.quantity-variable > div.quantity-variable-value{ background: none; color: #333; font-size: 14px; flex-grow: 1}

.product-action{z-index: 10; height: 36px; margin: 0 10px;}
.product-action .quantity-variable-button a { padding: 0; width: 36px; height: 36px; min-width: 0; width: 100%;
    background-repeat: no-repeat; background-position: center; background-size: 22px; background-image: url(../images/sprite-icons.svg#basket-icon-w)}
.product-action .quantity-variable-button a span{ display: none}
.product-action .quantity-variable > div{ width: 28px; height: 36px;}
.product-action .quantity-variable > div:first-child, .product-action .quantity-variable > div:last-child { cursor: pointer}


.product-action .button{min-width: auto; height: 36px; line-height:36px; font-size: 12px;border-radius: 4px; position: relative;  z-index: 50; display: none}
.product-action .button.is-show{display: block}


.filter-title{ font-weight: bold; margin-bottom: 15px;}
.filter-section a, .filter-section .cat-img{ display: flex; align-items: center; margin-right: 10px; }
.filter-section .cat-img img{ width: 36px; height: auto; max-width: unset }
.filter-section .ul{ list-style: none; margin: 0;  padding: 0}
.filter-section .ul .li{ margin-bottom: 15px}
.filter-section .ul .li a{   border-radius: 6px; }
.filter-section .ul .li.current a{ font-weight: bold; color: var(--blue)}

.basket-popup-title{ font-weight: bold; font-size: 18px; text-align: center; margin-bottom: 20px;}
.basket-popup-product .product-img{ width: 140px; height: 140px; background-repeat: no-repeat; background-position: center; background-size: contain; margin: auto; margin-bottom: 20px}
.basket-popup-product .product-title{ font-size: 18px; text-align: center; margin-bottom: 20px}
.basket-popup-actions .button{ margin-bottom: 15px; max-width: 200px; margin: auto}
.basket-popup-actions{ margin: 15px 0;  display: flex;  flex-direction: column;  gap: 15px;}
.basket-popup-actions .button.to-catalog{ background: var(--black)}

.section.page{ margin-bottom: 40px;}

.page-blocks{}
.page-blocks-item{ width: 100%; box-sizing: border-box; background: #fff;border-radius: 5px;box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.05);padding: 25px; margin-bottom: 30px}
.page-blocks-item h2:first-child{ margin-top:0 }

.fancybox__container{ z-index: 11000 !important}
.fancybox__nav{ position: static}

.registration-content{ max-width: 600px; margin: auto}

/***/
.form h2{ text-align: center; font-size: 22px; font-weight: bold; line-height: 1.2; margin-bottom: 20px;}
.form .form-description{ font-size: 16px; margin-bottom: 20px}
.form .__form-row{ padding-bottom: 20px;  }
.form .__form-row input, .form .__form-row textarea{ border: none; border-bottom: 1px solid var(--blue); padding: 10px 0}

.form_tpl_ask_price{ max-width: 460px; margin: auto}

.message-box{ text-align: center; padding: 20px;}
.message-box-title{font-size: 2em; font-weight: bold; margin-bottom: 10px }
.message-box-link{ margin-top: 20px; display: flex; justify-content: center; gap: 15px;}
.message-box-link .button{ width: 180px}

footer{ margin-top: 10px;}
@media only screen and (min-width: 480px) {
}

@media only screen and (min-width: 600px) {
    .products-list .products-item{ flex-basis: 25%;}
    .products-list .products-item:nth-child(odd){ border-left-color: transparent   }
    .products-list .products-item:nth-child(3n+1){border-left-color: rgb(0 0 0 / 10%);  }

}

@media only screen and (min-width: 768px) {

    .__wrapper {padding-top: 110px;}

    .mobile-toolbar-container{display: none}
    .menu-button span{ font-size: 14px;}

    .header .header-top{  height: 34px}
    .header .header-logo{ width: 100px}
    .header-toolbar{ display: flex; gap: 20px; margin-left: 40px; justify-content: flex-end;}
    .header-toolbar .toolbar-item{ margin: 0; padding: 0;}
    .header-toolbar .toolbar-item.basket .toolbar-item-icon{ background-image: url(../images/sprite-icons.svg#basket-icon-w);}
    .header-toolbar .toolbar-item.washlist .toolbar-item-icon{ background-image: url(../images/sprite-icons.svg#favorites-icon-w);}
    .header-toolbar .toolbar-item.personal .toolbar-item-icon{ background-image: url(../images/sprite-icons.svg#user-icon-w);}
    .header-toolbar .toolbar-item a span{color: #fff; font-size: 12px}

    .header-menu-button .over-container{ position: absolute; width: max-content; top:44px; bottom: auto; left: 0; right: 0; height: auto;  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);  border-radius: 0 0 6px 6px;   transform: translateY(-20px);  transition: opacity 0.3s ease, transform 0.3s ease, z-index 0s ease 0s;   z-index: -1;}
    .header-menu-button .over-container.is_show{  max-height: unset; height: auto;  transform: translateY(0px);  z-index: 1;
        transition: opacity 0.3s ease, transform 0.3s ease, z-index 0s ease .5s;}
    .header-menu-button .over-container .over-content{ background: #f8f8f8}
    .popup-menu { padding: 20px; padding-bottom: 5px}
    .popup-menu ul{ }
    .popup-menu ul li{  margin-bottom: 15px;}
    .popup-menu ul li a{ height: 100%; box-sizing: border-box; padding-right: 20px;  background: #fff }
    .popup-menu ul li a:hover{ border-color: var(--blue)}

    .page h1 { font-size: 32px}

    /***/
    .footer{  padding-bottom: 20px;}
    .footer-contacts{ margin: 0}
    .footer-items{ gap:20px; line-height: 1.7 }
    .footer-menu{ margin: 0;}
    .footer-menu .menu-items{ flex-direction: column; justify-content: flex-start; align-items: flex-start}
    .footer-menu .menu-items a{ text-align: left }
    .footer-menu .menu-items a:hover{ text-decoration: underline}
    .footer-company{border-top: 1px solid rgb(255 255 255 / 10%);padding-top: 20px;}


    /***/
    .acms_popup_case{ padding: 40px 50px }

    /***/
    .basket-popup-title{font-size: 24px;}
    .basket-popup-product .product-title{font-size: 22px;}

    .basket-popup-actions{flex-direction: row;  gap: 15px; margin-bottom: 0}

    /**/
    .form.popup{ padding: 20px; }
}

@media only screen and (min-width: 1024px) {

    h1{ font-size: 34px;}
    h2{ font-size: 26px;}

    .__wrapper {padding-top: 140px;}
    .header .header-top {padding: 20px 0; }
    .header .header-logo{ width: 120px}

    .header-toolbar{  gap: 35px;}
    .header-toolbar .toolbar-item-icon {background-size: 24px;height: 28px;width: 28px;}
    .header-toolbar .toolbar-item-icon-wrap{ width: 30px}
    .header-toolbar .toolbar-item a .count {width: 18px;height: 18px;line-height: 19px;}
    .header-toolbar .toolbar-item a span{font-size: 13px}

    .header-menu-button .over-container{ top:54px;}

    /***/
    .footer{ border-radius: 6px 6px 0 0 }
    .footer-logo{ width: 120px;}


    .catalog .over-container{ top:54px}
    .catalog .mobile-section-header{ display: none}
    .catalog .desctop-section-header{ display: block; }
    .catalog .catalog-container{ display: flex; }
    .catalog .catalog-sidebar{ display: block; flex-basis: 260px}
    .catalog .catalog-products{ flex-basis: 100%}

    .sidebar-content{ min-height: 100px; margin-right: 20px; border: 1px solid rgb(0 0 0 / 10%); }

    /**/
    .section-products .products-list .products-item h3{ font-size: 15px;}
    .section-products .products-list .product-price .price{ font-size: 22px; }
    .section-products .products-list .product-price .curency{ }
    .section-products .products-list .products-item{ flex-basis: 25%; padding: 10px; padding-bottom: 30px;}
    .section-products .products-list .products-item:nth-child(3n+1){ border-left-color: transparent   }
    .section-products .products-list .products-item:nth-child(4n+1){border-left-color: rgb(0 0 0 / 10%);  }
    .section-products .products-list .product-action .button { font-size: 14px;}

    /**/
    .page-blocks{ display: flex; justify-content: space-between;}
    .page-blocks.n2 .page-blocks-item{ width: calc(50% - 10px); box-sizing: border-box  }
}

@media only screen and (min-width: 1280px) {

     .header .header-logo{ width: 140px}
    .header .header-item-logo span{ font-size: 16px; padding-left: 40px}
    .header .header-bottom{ border-radius: 6px}
    .header .header-search{  max-width:540px;}
    .header-bottom .__line-blocks > *{ flex-basis: 20%}

    /**/
    .catalog .catalog-sidebar{ display: block; flex-basis: 320px}
    .sidebar-content{ margin-right: 30px}

    .section-products .products-list .products-item{ flex-basis: 16.66%;}


    .catalog .products-list .products-item h3{  }
    .catalog .products-list .product-price .price{ font-size: 22px; }
    .catalog .products-list .product-price .curency{ }
    .catalog .products-list .products-item{ flex-basis:20%; padding: 10px;padding-bottom: 30px;}
    .catalog .products-list .products-item:nth-child(3n+1){ border-left-color: transparent   }
    .catalog .products-list .products-item:nth-child(4n+1){border-left-color: rgb(0 0 0 / 10%);  }
    .catalog .products-list .product-action .button { font-size: 14px;}

    /**/
    .page-blocks.n2 .page-blocks-item{ width: calc(50% - 20px);}


}