:root {
   --red: #fc5a5b;
   --black: #211817;
   --brown: #a08771;
   --green: #008454;
}

#basket-icon {
   width: auto;
   height: auto;
   display: table;
   position: fixed;
   z-index: 12;
   top: 70px;
   right: 40px;
}

#basket-icon .button {
   width: 63px;
   height: 63px;
   display: block;
   border-radius: 255px;
   position: relative;
   float: right;
   z-index: 11;
   background: url("../images/basketIcon.png") no-repeat center center#FF7979;
}

#basket-icon .button span {
   width: 25px;
   height: 25px;
   background: #FFFFFF;
   display: block;
   text-align: center;
   font-weight: 400;
   font-size: 16px;
   line-height: 25px;
   color: #414141;
   text-decoration: none;
   border-radius: 255px;
   position: relative;
   float: right;
   top: -5px;
   right: -5px;
}

#basket-icon.active .button {
   background: url("../images/basketActiveIcon.png") no-repeat center center#FF7979;
}

#basket-icon .win {
   display: none;
   background: #FFFFFF;
   box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
   width: 434px;
   position: relative;
   top: 16px;
   right: -50px;
}

#basket-icon.active .win {
   display: table;
}

#basket-icon .win .title {
   width: 100%;
   height: auto;
   padding: 20px 20px 15px 20px;
   display: block;
   border-bottom: 1px solid rgba(65, 65, 65, 0.08);
   font-weight: 500;
   font-size: 25px;
   line-height: 30px;
   color: #414141;
}

#basket-icon .win .title span {
   font-weight: 400;
   font-size: 20px;
   line-height: 24px;
   color: rgba(65, 65, 65, 0.5);
}

#basket-icon .win .items {
   width: 100%;
   height: 400px;
   display: block;
   overflow-y: scroll;
   scrollbar-color: #FF7979 #F0F0F0;
   /* «цвет ползунка» «цвет полосы скроллбара» */
   scrollbar-width: thin;
   /* толщина */
}

/* полоса прокрутки (скроллбар) */
#basket-icon .win .items::-webkit-scrollbar {
   width: 10px;
   /* ширина для вертикального скролла */
   height: 8px;
   /* высота для горизонтального скролла */
   background-color: #F0F0F0;
}

/* ползунок скроллбара */
#basket-icon .win .items::-webkit-scrollbar-thumb {
   background-color: #FF7979;
   border-radius: 9em;
}

#basket-icon .win .items::-webkit-scrollbar-thumb:hover {
   background-color: #eb6b6b;
}

#basket-icon .win .items .item {
   width: 100%;
   height: auto;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   padding: 20px 15px;
   border-bottom: 1px solid rgba(65, 65, 65, 0.08);
}

#basket-icon .win .items .item picture {
   width: 131px;
   height: 123px;
   display: block;
   border-radius: 2px;
   margin-right: 15px;
}

#basket-icon .win .items .item picture img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#basket-icon .win .items .item .info {
   width: 50%;
}

#basket-icon .win .items .item .info .tit {
   font-weight: 500;
   font-size: 20px;
   line-height: 24px;
   display: table;
   color: #414141;
   margin-bottom: 10px;
}

#basket-icon .win .items .item .info .char {
   width: 100%;
   height: auto;
   display: table;
   margin-bottom: 7px;
   font-weight: 400;
   font-size: 16px;
   line-height: 19px;
   color: #868686;
}

#basket-icon .win .items .item .info .char span {
   color: rgba(65, 65, 65, 0.9);
   font-weight: 500;
}

#basket-icon .win .items .item .info .quantity {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 14px;
   width: 90px;
   height: auto;
}

#basket-icon .win .items .item .info .quantity .bInt {
   width: 25px;
   height: 25px;
   display: table;
   font-weight: 400;
   font-size: 16px;
   line-height: 25px;
   color: #575757;
   border-radius: 255px;
   background: #F0F0F0;
   text-align: center;
   cursor: pointer;
}

#basket-icon .win .items .item .info .quantity .bInt:hover {
   background: #FF7979;
   color: #fff;
}

#basket-icon .win .items .item .info .quantity .value {
   font-weight: 400;
   font-size: 16px;
   line-height: 19px;
   text-align: center;
   color: #575757;
   border: 0;
   width: 30px;
   outline: none;
}

#basket-icon .win .items .item .info .price {
   font-weight: 600;
   font-size: 20px;
   line-height: 24px;
   display: table;
   color: #414141;
}

#basket-icon .win .items .item .delete {
   width: 20px;
   height: 20px;
   background: url("../images/deleteTovarBasket.png") no-repeat center center;
}

#basket-icon .win .items .item .delete:hover {
   opacity: 0.8;
}

#basket-icon .win .amount {
   width: 100%;
   height: auto;
   display: table;
   padding: 15px 20px;
}

#basket-icon .win .amount del {
   width: 100%;
   text-align: right;
   display: table;
   font-weight: 500;
   font-size: 18px;
   line-height: 22px;
   color: rgba(65, 65, 65, 0.49);
}

#basket-icon .win .amount .value {
   width: 100%;
   text-align: right;
   margin-top: 2px;
   font-weight: 400;
   font-size: 20px;
   line-height: 24px;
   color: rgba(65, 65, 65, 0.5);
}

#basket-icon .win .amount .value span {
   font-weight: 700;
   font-size: 25px;
   line-height: 30px;
   color: #414141;
   margin-left: 10px;
}

#basket-icon .win .bOrder {
   width: 393px;
   margin: 0 auto 25px;
   height: auto;
   display: table;
   background: #FF5A5A;
   border-radius: 7px;
   text-decoration: none;
   font-weight: 700;
   font-size: 20px;
   line-height: 24px;
   color: #FFFFFF;
   padding: 18px 0;
   text-align: center;
}

#basket-icon .win .bOrder:hover {
   background: #FF2727;
}

#basket-icon .win .sale {
   width: 393px;
   height: 83px;
   display: table;
   background: url("../images/bgSaleBasket.jpg") no-repeat center center;
   margin: 0 auto;
   font-weight: 400;
   font-size: 22px;
   line-height: 30px;
   color: #FFFFFF;
   padding: 11px 20px;
   margin-bottom: 31px;
   padding-right: 90px;
}

.textInformation {
   width: 100%;
   height: auto;
   display: table;
   text-align: center;
   color: #414141;
   font-size: 24px;
   margin: 30px 0;
   padding: 0px 15px;
}

a.orderInformation {
   width: 300px;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 9px 18px;
   border: 1px solid #B9B9B9;
   border-radius: 3px;
   font-weight: 400;
   font-size: 18px;
   line-height: 22px;
   color: #B9B9B9;
   text-decoration: none;
   text-align: center;
   border-radius: 3px;
   margin: 0 auto;
}

a.orderInformation:hover {
   border: 1px solid #FF7979;
   background: #FF7979;
   color: #fff;
}

.profile {
   width: auto;
   height: auto;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 15px;
}

.profile picture {
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border-radius: 255px;
   width: 70px;
   height: 70px;
   border: 2px solid rgba(0, 0, 0, 0);
}

.profile picture img {
   object-fit: cover;
   width: 100%;
   height: 100%;
}

.profile:hover picture {
   border: 2px solid var(--red);
}

.profile .name {
   width: auto;
   height: auto;
   font-weight: 500;
   font-size: 15px;
   line-height: 140%;
   display: table;
   text-align: left;
   color: #414141;
   max-width: 150px;
   margin-bottom: 5px;
   text-decoration: none;
}

.profile .exit {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 5px;
   color: var(--brown);
   text-decoration: none;
   font-size: 15px;
   padding: 3px 10px;
   border: 1px solid var(--brown);
   border-radius: 5px;
   width: min-content;
}

.profile .exit i {
   font-size: 24px;
}

.profile .exit:hover {
   color: var(--red);
   border-color: var(--red);
}

.bScrollTop {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
   border: 1px solid #FF7979;
   background: rgba(255, 255, 255, 0.5);
   color: #FF7979;
   font-size: 20px;
   position: fixed;
   bottom: 20px;
   right: 20px;
   cursor: pointer;
}

.bScrollTop:hover {
   background: #FF7979;
   color: #fff;
}

@media only screen and (max-width: 700px) {
   
   #basket-icon.active {
      top: 0;
      right: 0;
      width: 100%;
   }

   #basket-icon .win {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100vh;
      border-radius: 0px;
   }

   #basket-icon .button {
      width: 45px;
      height: 45px;
      top: 15px;
      right: 15px;
      position: absolute;
   }
}

@media only screen and (max-width: 480px) {

   #basket-icon:not(.active) .button {
      display: none;
   }

   header .profile {
      gap: 5px;
      margin-bottom: 5px;
   }

   header .profile picture {
		width: 30px;
		height: 30px;
	}

   header .profile .info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
   }

   .profile .name {
      margin: 0;
   }

   .profile .exit {
      font-size: 16px;
      padding: 3px 5px;
   }

   .profile .exit i {
      font-size: 18px;
   }
}