@charset "UTF-8";
.mini-basket {
  z-index: 201;
  background: #ffffff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.13);
  position: absolute;
  top: calc(100% + 3rem);
  right: 0;
  width: 100%;
  max-width: 80rem;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease; }
  .mini-basket__inner {
    max-height: calc(100vh - 25rem);
    position: relative;
    padding: 4rem 2.4rem 3.6rem 3.6rem; }
    .mini-basket__inner:after, .mini-basket__inner:before {
      content: '';
      position: absolute;
      left: 1.6rem;
      right: 1.6rem;
      bottom: 1.6rem;
      top: 1.6rem;
      pointer-events: none;
      border: 1px solid #E4E4E4;
      transition: all ease .3s; }
    .mini-basket__inner:after {
      left: 2rem;
      bottom: 2rem;
      right: 2rem;
      top: 2rem; }
  .mini-basket:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 100%;
    height: 3rem; }
  .mini-basket--empty {
    max-height: none; }
    .mini-basket--empty .mini-basket__inner {
      padding: 4rem;
      padding-top: 6rem; }
  .mini-basket.active {
    top: calc(100% + 20px);
    opacity: 1;
    visibility: visible; }
  @media (max-width: 1023px) {
    .mini-basket-container {
      display: none !important; } }
  .mini-basket__inner {
    display: flex;
    flex-direction: column; }
  .mini-basket__body {
    flex-grow: 1;
    overflow: auto;
    padding-right: 1.6rem;
    padding-bottom: 1rem; }
    .mini-basket__body::-webkit-scrollbar {
      width: 4px;
      /* ширина для вертикального скролла */
      height: 4px;
      /* высота для горизонтального скролла */
      border-radius: 0px;
      background-color: #f5f5f5;
      transition: all ease .3s; }
    .mini-basket__body::-webkit-scrollbar-thumb {
      background-color: #8B8B8B;
      border-radius: 0;
      transition: all ease .3s; }
      .mini-basket__body::-webkit-scrollbar-thumb:hover {
        background-color: #121219; }
  .mini-basket__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 1.6rem;
    margin-bottom: 2.4rem; }
  .mini-basket__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 1.6rem;
    padding-top: 2rem;
    border-top: 1px solid #E4E4E4; }
  .mini-basket__total {
    display: flex;
    align-items: center; }
    .mini-basket__total-title {
      color: #8B8B8B;
      margin-right: 1rem; }
  .mini-basket__control {
    display: flex;
    align-items: center; }
  .mini-basket__clear {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #8B8B8B;
    fill: #8B8B8B;
    transition: all ease .3s; }
    @media (min-width: 1024px) {
      .mini-basket__clear {
        cursor: pointer; }
        .mini-basket__clear:hover {
          color: #121219;
          fill: #121219; } }
    .mini-basket__clear:active {
      transform: translateY(2px); }
  .mini-basket__link {
    margin-left: 2rem; }
  .mini-basket__empty-image {
    margin-bottom: 2rem; }
  .mini-basket__empty-title {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 16px;
    text-align: center; }
  .mini-basket__empty-descr {
    text-align: center;
    max-width: 46rem;
    margin: auto; }
  .mini-basket__empty-control {
    padding-top: 2.2rem;
    display: flex;
    justify-content: center;
    margin-top: 3rem; }
  @media (min-width: 1024px) {
    .mini-basket .header-notification__control:hover {
      cursor: pointer;
      color: #FFC422; }
      .mini-basket .header-notification__control:hover .icon {
        fill: #FFC422; } }
  @media (max-width: 767px) {
    .mini-basket {
      display: none; } }
  .mini-basket.mini-basket--fixed {
    display: block !important;
    position: fixed;
    top: var(--headerMidHeight);
    right: 20rem;
    z-index: 100; }

.search-active .mini-basket-container {
  z-index: 200; }