/* плашка */
.install-app-promo {
	background: linear-gradient(56deg, var(--orange) 82%, black 82%);
	height: 65px;	  
	position: relative;
	overflow: hidden;
	display: none;
}
.install-app-promo .app-banner {
	background-image: url('/image/banner_app_mobile.svg');
	position: absolute;
	bottom: 0;
	left: 16px;
	background-repeat: no-repeat;
	background-size: contain;
	width: 150px;
    height: 84%;
}
.install-app-promo img {
	position: absolute;
	bottom: 0;
	right: 74px;
	width: 74px;
	padding: 5px 0;
}
.install-app-promo .promo-text {
	padding-left: 92px;
}
.promo-text .text-white {
	font-size: 15px;
}
.pc-app-text {
	background-color: var(--orange);
	padding: 10px 5px;
}
.install-app-promo .close-btn {
	position: absolute;
	top: 20px;
	right: 16px;
	background: transparent;
	cursor: pointer;
}
.install-app-promo .close-btn::before,
.install-app-promo .close-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 24px;
	height: 2px;
	background-color: var(--gray);
}
.install-app-promo .close-btn::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.install-app-promo .close-btn::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* top */
#top {
	background-color: #EDEDED;
	height: 43px;
}
#top .nav{margin-top: 5px;}
#top .nav-link	{
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 12px;
	color: #6F6F6F;
	cursor: pointer;
}
#top a.callback, #phone-list a.callback{
	color: #8dbf33;
}
#top-phones a{
	margin-bottom: 10px;
	cursor: pointer;
}
.icon-whatsapp {
	color: #40C351;
}
.dropdown-item {color: #6F6F6F; font-size: 12px; font-weight: 500;}
.dropdown-r .dropdown-menu {right: 0px;}

#top-phones .icon-whatsapp {
	font-size: 23px;
}
#main-search input:hover, #main-search input:active, #main-search input:focus {
    box-shadow: none;
	border-color: #8dbf33;
    outline: none;
    color: #2B2A29;

}
#main-search form {height: 100%;}
/* top-phones */
.icon-telegram {
	color: #2AABEE;
}
#top-phones .icon-telegram {
	font-size: 23px;
	margin-left: 16px;
}
/* top-middle */
#top-middle {
	background-color: #F5F5F5;
	position: relative;
}
#whatsapp-sm svg{
    fill: #EF7F1A;
}
#whatsapp-sm .icon-whatsapp {
	font-size: 48px;
}
/* logo */

#location-sm{
    order: 1;
    width: 31%;
}
#location-sm span{
	color: var(--orange);
}
#whatsapp-sm{
    order: 3;
    width: 31%;
	justify-content: flex-end;
}
#btn-catalog{
    order: 4;
	width: 10%;
}
#top-logo{
    order: 2;
	width: 31%;
	display: flex;
	justify-content: center;
}
#top-logo img{
	width: 45px;
	height: 58px;
	margin-top: -14px;
}
.cat-btn {
	padding: 0px 0px 6px 0px;
    border: none;
    background-color: transparent;
}
.cat-btn svg{ fill: #EF7F1A; width: 38px; height: 38px;}
a:hover .animated-svg{
	animation: rotate 1.5s linear;
}
.top-city {
	color: var(--dark-gray);
	margin-left: 2px;
    margin-top: 3px;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-45deg);
    }
	100% {
        transform: rotate(0deg);
    }
}
#phone-list {
	position: relative;
	font-size: 14px;
}
#phone-list a{
	color: #6F6F6F;
	font-weight: 500;
	text-decoration: none;
	line-height: 12px;
}
#phone-list a:hover{
	color: #ef7f1a;
}
#plist-action{
	background-color: #f5f5f5;
	position: absolute;
	top: -14px; left: 0;
	width: 100%;
	height: 100%;
}
#plist-action button{
	border: none;
	display: block;
	border-radius: 6px;
	width: 100%;
	margin-top: 5px;
	background-color: #40C351;
	color: #FFF;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
#plist-action button:hover{
	background-color: #37B146;
}

#plist-action button.cancel{
	background-color: #ef7f1a;
	color: #fff;
}
#plist-action svg{
	fill: #fff;
}

.top-cart svg{
	fill: #EF7F1A;
}
.top-fav svg{
	fill: #fff;
}

.profile span{
	font-size: 10px;
	font-weight: 600;
} 
#top-search {
    width: 88%;
    order: 5;
}
#top-search input, #top-search-sm input{
	border: 1px solid #ededed;
	border-radius: 8px;
	height: 38px;
	line-height: 16px;
	padding: 0 10px 0 20px;
	font-size: 12px;
	font-weight: 300;
	color: #000;
	background-color: #EDEDED;
}
#top-search button, #top-search-sm button {
	position: absolute;
	right: 10px;
	border: none;
	height: 38px;
	padding: 0;
	background: transparent;
	z-index: 5;
}

#top-middle .nav-link{
	padding-top: 14px;
	font-size: 26px;
	color: #EF7F1A;
}
#top-middle .profile{
	color: #8DBF33;
	line-height: 5px;
}
.top-middle {
	height: 104px;
	display: flex;
	flex-direction: row;
	align-items: center;
    justify-content: space-between;
    margin-top: 10px;
	flex-wrap: wrap;
	position: relative;
}
/* search */
#main-search svg{
	fill: #EF7F1A;
}
#main-search .input-lg {
	height: 40px;
	line-height: 20px;
	padding: 0 10px;
}
#main-search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	text-shadow: 0 1px 0 #FFF;
}
/* cart */
.top-cart, .top-fav {
	position: relative;
}
.top-cart span, .top-fav span {
	position: absolute;
	top: 30px;
	right: 9px;
	font-size: 9px;
	line-height: 18px;
	background-color: #8DBF33;
	color: #fff;
	border-radius: 50%;
	padding: 0px 6px;
}
#cart {
	margin-bottom: 10px;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
	overflow-y: auto;
	max-height: 800px;
	scrollbar-width: thin;
	overflow-x: hidden;
}

#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
#top-menu {
    padding: 24px 0px !important;
	border-top: 2px #ddd solid;
}
.top-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
	gap: 10px;
}
.top-menu > a {
    box-sizing: border-box;
    text-decoration: none;
	font-weight: 800;
	font-size: 13px;
	color: #2B2A29;
    padding: 5px 0px;
}
.top-menu a:first-child,
.top-menu a:last-child {
    flex: none;
}
.menubtn-mobile {display: inline;}
.menubtn {display: none;}
.top-middle .profile{
	position: relative;
}

.customer-account__gift {
	position:absolute;
	white-space: unset;
	left: unset;
	top: -20px;
	min-width: 160px;
	box-shadow:4px 15px 30px rgba(0, 0, 0, 0.08);
	color:var(--orange);
	right: 18px;
}
.cc-speech {
    border: 1px solid var(--gray);
    background-color: var(--white);
    border-radius: 6px;
    padding: 7px 6px 5px;
    position: relative;
    margin-bottom: 0 !important;
    text-align: center;
    line-height: 12px;
    font-size: 10px;
    font-weight: 600;
}

.cc-speech:before {
	content: ' ';
	position: absolute;       
	right: 4px;
	top: 100%;
	width: 4px;
	height: 4px;
	border: 4px solid;
	border-width: 11px 11px 0px 0px;
	border-color:  transparent var(--gray) transparent var(--gray);
	transform: rotate(270deg);
	left: unset;
 }
 .cc-speech:after {
	content: ' ';
	position: absolute;       
	right: 6px;
	top: 100%;       
	width: 6px;
	height: 6px;
	border: 3px solid;
	border-width: 10px 10px 0px 0px;
	border-color:  transparent var(--white) transparent var(--white);
	transform: rotate(270deg);
	left: unset;
 }
#mobile-menu {background-color: #ededed;width: 100%;border: none;}
#mobile-menu .offcanvas-header{background-color: #fff;}
#mobile-menu .accordion-button, #mobile-menu .accordion-item {background-color: #fff; border: none;}
#mobile-menu .accordion-button::after {transform: rotate(-90deg);}
#mobile-menu .accordion-button:not(.collapsed){color: #ef7f1a;}
#mobile-menu .accordion-button:not(.collapsed)::after {transform: rotate(0deg);}
#mobile-menu .accordion{border: none;padding-top: 1rem;padding-bottom: 1rem;background-color: #fff;}
#mobile-menu .offcanvas-body{padding: 0 0 55px 0;}
#mobile-menu .nav-tabs{border-bottom: #ef7f1a 4px solid;}
#mobile-menu .accordion-button {padding: 0.6rem 0.5rem;color: #464646;font-size: 16px;font-weight: 600;}
#mobile-menu .accordion-button > svg{margin-right: 9px;}
#mobile-menu .accordion-link::after {display: none;}
#mobile-menu a{text-decoration: none;}
#mobile-menu .nav-item > button{color: #ef7f1a; background-color: #fff;font-size: 14px; font-weight: 600;}
#mobile-menu .nav-item > button.active{color: #fff; background-color: #ef7f1a;border-color: #ef7f1a;}
#mobile-menu .offcanvas-header .btn-close {margin: 0;}
#mobile-menu .offcanvas-header .input-group svg {fill: #ef7f1a;}
#mobile-menu  .text-qty {padding: 4px 0;}
#mobile-menu  button.btn-minus, #mobile-menu  button.btn-plus {padding: 4px 8px;}
#mobile-menu .offcanvas-header .input-group input {border: 1px solid #ededed;border-radius: 8px;height: 32px;line-height: 16px;padding: 0 10px 0 20px;font-size: 12px;font-weight: 300;color: #000;background-color: #ededed;}
#mobile-menu .input-group button {position: absolute;right: 10px;border: none;height: 32px;padding: 0;background: transparent;z-index: 5;}
#mobileTabsContent a{color: #464646; font-weight: 600;}
#mobileTabsContent ul{padding: 0;margin: 0;}
#mobileTabsContent .accordion-body{padding: 0 0 0 20px;margin: 0;}
#mobileTabsContent .accordion-body li{padding: 0 0 10px 20px;}
#mobile-menu-products .product-thumb{background-color: transparent;border-radius:0;}
#mobile-menu-products .product-thumb .image a img {border-radius: 12px;}
#mobile-menu-products button.add-cart {padding: 5px 12px;border-radius: 6px;border: none;background: var(--orange);color: #fff;font-size: 12px;}
#mobile-menu-products .product-thumb a {color: #000;}
#mobile-menu-products .category-price{font-size: 15px;}
#mobile-menu-products .price-old {font-size: 12px;}
#mobile-menu-products .product-title {overflow: hidden;}
.accordion-header.sticky-header {position: sticky;top: -1px;z-index: 1000;background: #fff;}
#top-search > form {position: static;}
.custom-offcanvas-left {
position: fixed;
top: var(--top-offset, 60px);
left: 0;
height: calc(100vh - var(--top-offset, 60px));
width: 100%;
z-index: 1045;
background-color: #fff;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
overflow-y: auto;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
.custom-offcanvas-left.show {transform: translateX(0);}

#slideshow0 .swiper-button-prev,#slideshow0 .swiper-rtl .swiper-button-next {left: var(--swiper-navigation-sides-offset, 16px);right: auto}
#slideshow0 .swiper-button-next,#slideshow0 .swiper-rtl .swiper-button-prev {right: var(--swiper-navigation-sides-offset,16px);left: auto}

.fixed-top-custom {position: fixed !important;top: 0;left: 0;width: 100%;z-index: 1060;}
.fixed-top-middle-custom {position: fixed !important;top: 43px;left: 0;width: 100%;z-index: 1059;}
#catalogOffcanvas .list-group a.active, #catalogOffcanvas .list-group a.active:hover, #catalogOffcanvas .list-group a:hover {color: #fff;background: #8DBF33;text-shadow: 0 1px 0 #FFF;border-radius: 6px;}
#catalogOffcanvas .list-group a {border: none;display: flex; flex-direction: row; justify-content: flex-start; gap: 10px;align-items: center;}
#catalogOffcanvas .icon-hover {display: none;}
#catalogOffcanvas .list-group-item.list-group-item-action:hover .icon-default {display: none;}
#catalogOffcanvas .list-group-item.list-group-item-action:hover .icon-hover {display: inline;fill: #fff;}
#catalogOffcanvas .banner-swiper, #catalogOffcanvas .banner-swiper img{border-radius: 12px;}
body.offcanvas-open {overflow: hidden;}
@media screen and (max-width: 380px) {
	.promo-text .text-white {
		font-size: 14px;
	}
	.promo-text p {
		font-size: 13px;
	}
}

@media screen and (max-width: 479px) {
    #mobile-menu .top-navigation__container {
        padding: 12px 0px 12px 0 !important;
    }
}
@media (min-width: 576px) {
	#top-search > form {position: relative;}
    .top-middle {height: 117px; position: relative;}
    .menubtn-mobile{display: none;}
    .menubtn{display: inline;}
    .cat-btn {
        border: none;
        border-radius: 12px;
        background-color: var(--orange);
        box-sizing: border-box;
        text-align: center;
		padding: 2px 10px;
        color: var(--white);
        font-size: 16px;
        line-height: 16px;
        height: 42px;
    }
    .cat-btn:hover {background-color: #8DBF33;}
    .cat-btn svg{
        fill: #fff;
        vertical-align: middle;
        width: 22px;
        height: 22px;
    }
    .cat-btn span{
        font-weight: 400;
        font-size: 16px;
        padding: 0;
        margin: 0;
        vertical-align: middle;
    }
	.dropdown-menu li > a:hover {
		text-decoration: none;
		color: #000;
		background-color: transparent;
		background-image: none;
	}
}
@media (min-width: 768px) {
	#btn-catalog, #top-logo{order: initial;}
	#btn-catalog{margin: 0 5px;width: auto;}
    .top-middle {height: 90px; margin-top:0px; position: static; gap:10px;}
    #top-search {width: 100%; top:75px; position: static; width: auto; flex: 1 1 auto; order: unset; }
	#top-logo{width: auto;}
    .top-menu > a {padding: 0px;}
	.install-app-promo {height: 84px; background: linear-gradient(62deg, var(--orange) 12%, var(--orange) 12%, black 12%, black 88%);}
	.install-app-promo .app-banner {left:20px;background-image: url('/image/banner_app_desktop.svg');}
	.install-app-promo .close-btn {top:28px; right: 30px;}
}
@media (min-width: 992px) {
    .top-menu > a {font-size: 16px;}
	.customer-account__gift {right: 20px;}
}
@media (min-width: 1200px) {
	.install-app-promo .app-banner {left:70px;}
	.install-app-promo img {right:106px;}
	.install-app-promo .pc-app-text {font-size: 18px;}
}
@media (min-width: 1400px) {

}
@media (min-width: 1600px) {

}

@media (min-width: 768px) and (max-width: 1024px) {
    .tablet-only {
        display: block; /* Элемент будет виден на планшетах */
    }
}

@media (max-width: 767px), (min-width: 1025px) {
    .tablet-only {
        display: none; /* Элемент будет скрыт на других устройствах */
    }
}