header{
	color: var(--graphite);
}

.header-cont{
	position: fixed;
	z-index: 3;
	background: transparent;
	width: 100%;
	transition: .5s all ease-in-out;
}


.header-block{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 0;
}

.header-logo-block a{
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-logo-block a svg{
	height: auto;
}

.header-group-block{
	display: flex;
	align-items: center;
	gap: 60px;
	flex: 0 0 calc(50% - 142px);
}

.header-group-block:last-child{
	justify-content: flex-end;
	gap: 40px;
}

.header-menu{
	display: flex;
	align-items: center;
	gap: 20px;
	font-weight: 400;
	font-size: 18px;
	line-height: 100%;
	color: var(--white);
	cursor: pointer;
}

.header-menu:hover{
	color: var(--peach);
}

.header-menu .icon{
	display: flex;
	align-items: center;
}

.header-link{
	color: var(--white);
	font-weight: 400;
	font-size: 18px;
	line-height: 100%;
}

.header-link:hover{
	color: var(--peach);
}

.language-block{
	position: relative;	
	font-weight: 600;
	font-size: 18px;
	line-height: 100%;
	color: var(--white);
}

.language-current{
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}

.language-current .icon{
	display: flex;
	align-items: center;
}

.language-block.opened .language-current svg{
	rotate: 180deg;
}

.header-icons-group{
	display: flex;
	align-items: center;
	gap: 40px;
	padding-right: 14px;
}

.header-icon-link{
	color: var(--white);
	position: relative;
}

.header-icon-link:hover{
	color: var(--peach);
}

.language-dropdown{
	position: absolute;
	top: 100%;
	display: none;
}

.language-block.opened .language-dropdown{
	display: block;
} 

.language-dropdown a{
	color: var(--white);
}

.language-dropdown a:hover{
	color: var(--peach);
}

.header-icon-counter{
	position: absolute;
	top: -7px;
	right: -14px;
	border-radius: 50%;
	background: var(--peach);
	color: var(--white);
	font-weight: 600;
	font-size: 14px;
	line-height: 100%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.search-mob-cont{
	display: none;
}

header.white-header{
	height: 76px;
}

header.white-header.main-header-pos{
	height: auto;
}

header.white-header .header-cont{
	background: var(--white);
	border-bottom: 1px solid var(--border-head);
}

.white-header .header-logo-block a,
.white-header .header-menu, .white-header .header-icon-link,
.white-header .header-icon-counter, .white-header .header-link,
.white-header .language-block,
.white-header .language-dropdown a{
	color: var(--graphite);
}

header.personal-opened .header-cont{
	background: var(--graphite);
	border-bottom: 1px solid var(--pho);
}

.personal-opened .header-logo-block a ,
.personal-opened .header-menu,.personal-opened .header-icon-link,
.personal-opened .header-icon-counter,.personal-opened .header-link,
.personal-opened .search-mob-cont input,
.personal-opened .search-mob-cont input::placeholder,
.personal-opened .language-block,
.personal-opened .language-dropdown a{
	color: var(--white);
}

.white-header .header-bonus-link{
	color: var(--peach);
}

.header-menu-canvas.offcanvas{
	width: 100%;
	border: none;
	background: var(--graphite);
	color: var(--white);
}

.offcanvas-header-cont{
	padding: 20px 0;
	border-bottom: 1px solid var(--gray);
}

.header-menu-canvas .offcanvas-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

.header-menu-canvas .offcanvas-header .btn-close{
	padding: 0;
	margin: 0;
	width: auto;
	height: auto;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--white);
	font-weight: 400;
	font-size: 18px;
	line-height: 100%;
	box-shadow: none;
	outline: none;
	opacity: 1;
}

.header-menu-canvas .language-block{
	display: none;
}

.header-menu-canvas .offcanvas-body{
	padding: 0;
	position: relative;
	display: flex;
	flex-direction: column;
}

.header-menu-body{
	margin: 0 auto;
	max-width: 1600px;
	padding: 0 40px;
	width: 100%;
	display: flex;
	flex-grow: 1;
	position: relative;
}

.header-menu-list{
	display: flex;
	flex-direction: column;
	gap: 40px;
	border-right: 1px solid var(--gray);
	flex: 0 0 33%;
	max-width: 33%;
	min-width: 375px;
}

.header-menu-group{
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding-top: 40px;
}

.header-menu-group.bordered{
	position: relative;
	gap: 30px;
}

.header-menu-group.bordered:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 1px;
	left: -200%;
	background: var(--gray);
}

.header-menu-dropdown{
	position: absolute;
	right: 40px;
	top: 0;
	bottom: 0;
}

.header-menu-link{
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--white-o);
	font-weight: 400;
	font-size: 30px;
	line-height:1;
	transition: .3s all ease-in-out;
}

.header-menu-link .icon{
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-menu-link:hover{
	 color:  var(--white);
	 font-weight: 700;
}

.header-menu-item.little .header-menu-link{
	font-size: 24px;
	line-height: 31px;
}

.header-menu-group.social{
	flex-direction: row;
	gap: 10px;
	padding-bottom: 40px;
}

.header-menu-semi-control{
	display: none;
}

.header-menu-dropdown{
	width: 67%;
	max-width: calc(100% - 455px);
	gap: 95px;
	display: flex;
	gap: 20px;
	padding: 33px 0 33px clamp(20px, 5vw, 33%);
    justify-content: space-between;
}

.header-menu-semi-block{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 80px;
	max-width: 370px;
}

.header-menu-img{
	flex: 0 0 47%;
	max-width: 507px;
}

.header-menu-semi-list{
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: flex-start;
}

.header-menu-semi-link{
	color: var(--white-o);
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	transition: .3s all ease-in-out;
}

.header-menu-semi-link:hover{
	color: var(--white);
	font-weight: 700;
}

.header-menu-text{
	color: var(--white-o);
	font-weight: 400;
	font-size: 18px;
	line-height: 150%;
}

.header-bonus-block{
	position: relative;
	display: flex;
	align-items: center;
}

.header-bonus-link{
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 400;
	font-size: 18px;
	line-height: 100%;
	text-decoration: underline;
	text-decoration-style: dotted;
	color: var(--white);
}

.header-bonus-link .icon{
	display: flex;
	align-items: center;
}

.header-bonus-dropdown-cont{
	position: absolute;
	top: 100%;
	right: -50px;
	z-index: 2;
	padding-top: 15px;
	display: none;
}

.header-bonus-block:hover .header-bonus-dropdown-cont{
	display: block;
}

.header-bonus-dropdown{
	padding: 7px 12px;
	border: 1px solid var(--peach);
	color: var(--graphite);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	background: var(--white);
	width: 188px;
	position: relative;
}

.header-bonus-dropdown:before{
	position: absolute;
	content: "";
	z-index: 1;
	border-bottom: 16px solid var(--peach);
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	bottom: 100%;
	right: 52px;
}

.header-bonus-dropdown:after{
	z-index: 2;
	position: absolute;
	content: "";
	border-bottom: 14px solid var(--white);
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	bottom: 100%;
	right: 53px;
}

@media(max-width: 1000px){
	.header-block{
		padding: 10px 0;
	}

	.header-menu{
		font-size: 0;
		gap: 0;
	}

	.header-icons-group{
		gap: 30px;
	}

	.header-group-block{
		gap: 30px;
		flex: 0 0 calc(50% - 95px);
	}

	.header-group-block:last-child .language-block{
		display: none;
	}

	.header-logo-block a{
		max-width: 170px;
	}

	.header-link svg{
		max-height: 20px;
		width: auto;
	}

	.header-icon-link svg{
		max-height: 20px;
		width: auto;
	}

	.header-link{
		font-weight: 400;
		font-size: 16px;
	}

	header.white-header{
		height: 53px;
	}

	.header-menu-canvas .language-block{
		display: block;
	}

	.header-menu-group:first-child{
		padding-top: 85px;
	}

	.header-menu-group.social{
		padding-top: 45px;
		padding-bottom: 100px;
	}

	.header-menu-dropdown{
		flex-direction: column;
		gap: 47px;
		padding: 72px 0 0 20px;
		justify-content: flex-start;
	}

	.header-menu-semi-block{
		flex-grow: 0;
		gap: 25px;
		max-width: 100%;
	}

	.header-menu-img{
		max-width: 333px;
		flex: 0 0 auto;
	}

	.header-bonus-link{
		gap: 4px;
		color: var(--peach);
		font-size: 14px;
	}

	.header-group-block:last-child{
		gap: 30px;
	}

	.header-bonus-link .icon svg{
		width: 20px;
		height: auto;
	}
}

@media(max-width: 700px){
	header.white-header.header-cont-authorized{
		height: 81px;
	}
}

@media(max-width: 600px){

}

.offcanvas.basket-header-canvas{
	background: var(--white);
	box-shadow: 0px 4px 17px 0px #00000026;
	border: none;
	max-width: 550px;
	width: 100%;
	max-height: 756px;
}

.basket-header-canvas .offcanvas-header{
	padding: 16px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.basket-header-canvas  .btn-close{
	margin: 0;
	padding: 0;
	height: auto;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	opacity: 1;
}

.basker-header-title{
	color: var(--black);
	font-family: var(--family2);
	font-weight: 400;
	font-size: 30px;
	line-height: 100%;
}

.basket-header-canvas .offcanvas-body{
	padding: 0 30px;
}

.basket-header-canvas .offcanvas-footer{
	padding: 24px 30px 18px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.basket-header-list{
	padding: 17px 0 35px;
	display: flex;
	flex-direction: column;
	gap: 23px;
}

.basket-header-list-cont{
	position: relative;
	z-index: 2;
}

.basket-header-canvas .offcanvas-footer, .basket-header-canvas .offcanvas-header{
	position: relative;
}

.basket-header-canvas .offcanvas-footer:before{
	position: absolute;
	content: "";
	left: 30px;
	right: 30px;
	top: 0;
	z-index: 1;
	height: 1px;
	background: var(--border-h);
}

.basket-header-canvas .offcanvas-header:after{
	position: absolute;
	content: "";
	left: 30px;
	right: 30px;
	bottom: 0;
	z-index: 1;
	height: 1px;
	background: var(--border-h);
}

.basket-header-item{
	display: flex;
	justify-content: space-between;
	gap: 50px;
}

.basket-header-img{
	display: flex;
	flex: 0 0 133px;
	width: 133px;
	min-height: 197px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--white);
	background: var(--white-semi);
}

.basket-header-img img{
	max-width: 100%;
	max-width: 100%;
}

.basket-header-info-block{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

.basket-header-info{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 50px;
}

.basket-header-prop{
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.basket-header-item-name{
	color: var(--graphite);
	font-weight: 600;
	font-size: 16px;
	line-height: 150%;
}

.basket-header-item-size{
	color: var(--breadcrambs);
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
}

.basket-header-item-color{
	color: var(--breadcrambs);
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	display: flex;
	align-items: center;
	gap: 5px;
}

.basket-header-item-color span{
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.basket-header-total{
	display: flex;
	align-items: center;
	justify-content: space-between;
	white-space: nowrap;
	color: var(--graphite);
	font-weight: 700;
	font-size: 18px;
	line-height: 100%;
}

.basket-header-btn{
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.basket-header-btn .info-btn{
	border-width: 2px;
	width: 100%;
}

.basket-header-control{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.basket-header-counter{
	display: flex;
}

.basket-header-counter input{
	border: 1px solid var(--lightgray);
	text-align: center;
	color: var(--black);
	background: transparent;
	outline: none;
	box-shadow: none;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	border-right: 0;
	border-left: 0;
	flex: 0 0 51px;
	width: 51px;
	padding: 7px 0;
}

.basket-header-counter-btn{
	background: var(--graphite);
	border: 0;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	height: 38px;
	width: 38px;
	border-radius: 0;
}

.basket-header-item-delete{
	color: var(--del);
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	text-decoration: underline;
	white-space: nowrap;
}

.basket-header-price-block{
	white-space: nowrap;
}

.basket-header-item-price{
	font-weight: 700;
	font-size: 16px;
	line-height: 100%;
	color: var(--del);
}

.basket-header-item-price-bonus{
	display: flex;
	gap: ;
	align-items: center;
	color: var(--peach);
	font-weight: 700;
	font-size: 18px;
	line-height: 100%;
	gap: 4px;
}

.basket-header-item-price-bonus .icon{
	display: flex;
	align-items: center;
	justify-content: center;
}

.basket-header-item-bonus .basket-header-img{
	border-color: var(--peach);
}

.personal-menu-cont{
	position: fixed;
	top: -120%;
	left: 0;
	right: 0;
	z-index: 3;
	background: var(--graphite);
	padding: 40px 0;
	transition: .5s all ease-in-out;
}

.personal-menu-cont.opened{
	top: 75px;
}


.personal-menu-block{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.personal-menu-bonus-block{
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 15px;
	background: var(--white-semi);
}

.personal-menu-bonus-img{
	display: flex;
}

.personal-menu-bonus-info{
	margin: 0 auto;
	max-width: 333px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 25px;
}

.personal-menu-bonus-text{
	color: var(--graphite);
	font-family: var(--family2);
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 1px;
	text-align: center;
}

.personal-menu-list{
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: flex-end;
}

.personal-menu-item{
	color: var(--biege2);
	font-weight: 400;
	font-size: 18px;
	line-height: 150%;
	text-align: right;
	text-transform: uppercase;
}

.header-menu-group.social a {
	color: var(--social-c);
}

.header-menu-group.social a:hover {
	color: var(--peach);
}

@media(max-width: 1000px){
	.personal-menu-bonus-block{
		flex-direction: column;
		flex: 0 0 334px;
		max-width: 334px;
		gap: 19px;
		padding: 14px;
	}

	.personal-menu-item{
		font-size: 16px;
	}

	.personal-menu-bonus-text{
		font-size: 20px;
	}

	.personal-menu-bonus-info, .personal-menu-bonus-img{
		max-width: 275px;
	}

	.personal-menu-cont.opened{
		top: 53px;
	}
}

@media(max-width: 700px){
	.header-menu-dropdown{
		padding: 27px 15px;
		max-width: 100%;
		width: 100%;
		right: -100%;
		transition: .5s all ease-in-out;
		background: var(--graphite);
		z-index: 2;
	}

	.header-menu-img{
		display: none;
	}

	.header-menu-semi-control{
		display: flex;
		align-items: center;

	}

	.header-menu-group:first-child{
		padding-top: 27px;
	}

	.header-menu-group{
		gap: 25px;
	}

	.header-menu-link{
		font-weight: 400;
		font-size: 22px;
		line-height: 24px;
	}

	.header-menu-item.little .header-menu-link{
		font-weight: 400;
		font-size: 16px;
		line-height: 31px;
	}

	.header-menu-group.bordered{
		gap: 12px;
	}

	.header-menu-group.social{
		gap: 10px;
		padding-top: 25px;
		padding-bottom: 35px;
	}

	.header-menu-body{
		padding: 0 15px;
	}

	.header-menu-list{
		flex: 0 0 100%;
		max-width: 100%;
	}

	.header-menu-item.opened .header-menu-dropdown{
		right: 0;
	}

	.header-bonus-block{
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--graphite);
		left: 0;
		right: 0;
		top: 0;
		height: 23px;
	}

	.header-bonus-link{
		gap: 6px;
	}

	.header-bonus-link .icon svg{
		width: 16px;
	}

	.header-bonus-block:hover .header-bonus-dropdown-cont{
		display: none;
	}

	.header-cont-authorized .header-cont{
		padding-top: 23px;
	}
    .personal-menu-cont.opened {
        top: 81px;
    }
}

@media(max-width: 600px){
	.search-mob-cont{
		display: flex;
	}

	.header-group-block .header-link{
		display: none;
	}

	.header-cont{
		background: var(--white);
	}

	.header-logo-block{
		max-width: 141px;
	}

	.header-logo-block a, .header-menu, .header-icon-link, .header-icon-counter{
		color: var(--graphite);
	}

	.header-block{
		padding: 15px 0;
	}

	.header-menu .icon svg{
		width: 25px;
	}

	.header-icon-link svg{
		max-height: 22px;
	}

	.header-icon-link:first-child{
		display: none;
	}

	.header-icons-group{
		gap: 15px;
	}

	.header-group-block{
		flex: 0 0 calc(50% - 81px);
	}

	.search-mob-cont{
		padding: 15px 0 20px;
	}

	.search-mob-cont input{
		width: 100%;
		background: transparent;
		border: 1px solid var(--border-h);
		font-weight: 400;
		font-size: 14px;
		line-height: 100%;
		color: var(--graphite);
		border-radius: 50px;
		outline: none;
		box-shadow: none;
		padding: 13px 22px;
	}

	.search-mob-cont input::placeholder{
		color: var(--color-h);
	}

	header{
		height: 137px;
	}

	header.header-cont-authorized{
		height: 163px;
	}

	header.white-header.header-cont-authorized{
		height: 81px;
	}

	header.white-header{
		height: 57px;
	}

	.white-header .search-mob-cont{
		display: none;
	}

	.header-menu-semi-list{
		flex-grow: 1;
		overflow: auto;
	}

	.header-menu-semi-block{
		flex-grow: 1;
	}

	.offcanvas.basket-header-canvas{
		max-width: 100%;
		max-height: 100%;
	}

	.basket-header-item{
		gap: 20px;
	}

	.basket-header-info{
		gap: 10px;
		flex-direction: column;
	}

	.basket-header-prop{
		display: contents;
	}

	.basket-header-prop .basket-header-item-name{
		order: 1;
	}

	.basket-header-prop > div{
		order: 3;
	}

	.basket-header-price-block{
		order: 2;
	}

	.basket-header-info-block{
		gap: 14px;
	}

	.basket-header-control{
		flex-direction: column;
		align-items: flex-start;
		gap: 23px;
	}

	.basket-header-canvas .offcanvas-body, .basket-header-canvas .offcanvas-footer, .basket-header-canvas .offcanvas-header{
		padding-right: 15px;
		padding-left: 15px;
	}

	.basket-header-img{
		flex: 0 0 100px;
		width: 100px;
		min-height: 148px;
	}

	.personal-menu-cont{
		padding: 34px 0 24px;
	}

	.personal-menu-block{
		flex-direction: column-reverse;
	    align-items: stretch;
	    gap: 48px;

	}


	.personal-menu-bonus-info{
		display: contents;
	}

	header:not(.white-header) ~ .personal-menu-cont.opened{
		top: 81px;
	}

	.personal-menu-list{
		gap: 30px;
		align-items: center;
	}

	.basket-header-canvas .offcanvas-footer:before, .basket-header-canvas .offcanvas-header:after{
		left: 15px;
		right: 15px;
	}

	.personal-menu-bonus-block{
		flex-direction: row;
		flex-wrap: wrap;
		gap: 13px 10px;
		align-items: center;
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	.personal-menu-bonus-img{
		flex: 0 0 158px;
		max-width: 158px;
		order: 1;
	}

	.personal-menu-bonus-text{
		order: 2;
		flex: 0 0 calc(100% - 169px);
		max-width: calc(100% - 169px);
		font-size: 18px;
		text-align: left;
	}

	.personal-menu-bonus-btn{
		flex: 0 0 100%;
		max-width: 100%;
		order: 3;
	}

	.personal-menu-bonus-btn .info-btn{
		width: 100%;

	}

}