.hiro.title {
  background-color: var(--gr);
  border-radius: 16px;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 29px 45px 28px 36px;
  margin-bottom: 36px;
}

.category-background {
  height: 140px;
}

.category-background.flat {
  background-color: #D9FAEE;
  background-image: none;
}

.hiro.title h1 {
  font-size: 36px;
  color: white;
  font-family: 'Syne', sans-serif;
}

main .cart {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

main .cart .buttons {
  border-top: 0px;
}

main .cart .summary {
  margin-left: 44px;
  padding: 24px 24px 37px;
  box-sizing: border-box;
  box-shadow: 0 6px 8px #00000018;
  border-radius: 16px;
  border: solid 1px #eaeaea;
  min-height: 522px;
  display: flex;
  flex-direction: column;
}

main .cart .summary h1 {
  font-family: 'Syne', sans-serif;
  font-size: 30px;
  line-height: 89%;
  font-weight: 600;
  margin: 0;
  border-bottom: solid 1px #eaeaea;
  padding-bottom: 14px;
  margin-bottom: 20px;
}

main .cart .summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

main .cart .summary li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 6px;
  border-bottom: solid 1px #eaeaea;
}

main .cart .summary li span {
  font-size: 14px;
  max-width: 200px;
}
main .cart .summary li .price {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

main .cart .summary .total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #eaeaea;
}

main .cart .summary .total > span {
  font-size: 26px;
  line-height: 89%;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  color: var(--gr);
}

main .cart .summary .total > .price {
  color: var(--gr);
  font-size: 32px;
  font-weight: bold;
  margin: 0;
}

main .cart .summary .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
main .cart .summary .buttons button {
  height: 40px;
  width: 180px;
  font-weight: 900;
  font-size: 15px;
  padding: 0;
  border-radius: 8px;
  background-color: #eaeaea;
  color: #747474;
}

main .cart .summary .buttons .purchase {
  background-color: var(--gr);
  color: white;
}

.bonus {
  margin-top: 102px;
}

section.methods {
  margin-bottom: 82px;
}

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

  main .cart {
    grid-template-columns: 100%;
    gap: 21px;
  }

  main .cart .summary {
    margin-left: 0px;
    min-height: auto;
    padding-bottom: 15px;
  }

  main .cart .summary h1 {
    font-size: 20px;
  }

  main .cart .summary li span {
    font-size: 12px;
  }
  main .cart .summary li .price {
    font-size: 18px;
  }
  main .cart .summary .total > .price{
    font-size: 20px;
  }
  main .cart .summary .total {
    margin-top: 39px;
  }
  main .cart .summary .total > span{
    font-size: 20px;
  }
  main .cart .summary .buttons{
    flex-direction: column-reverse;
  }
  main .cart .summary .buttons button {
    width: 100%;
  }

}

@media screen and (max-width: 600px) {
  .hiro.title {
    border-radius: 0px;
    height: 60px;
    width: calc(100% + 48px);
    padding: 0 24px;
  }
  .hiro.title h1 {
    font-size: 24px;
  }
  .bonus {
    margin-top: 10px;
  }
  section.methods {
    flex-wrap: wrap;
    margin-bottom: 60px;
  }
  section.cart.empty .products {
    min-height: 260px;
  }
}

.cart.empty  {
  align-items: start
}

.cart.empty .products {
  background-color: #f8f8f8;
  border-radius: 12px;
  min-height: 344px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.cart.empty .products img {
  filter: brightness(0) invert(0.9);
  user-select: none;
  width: 78px;
  pointer-events: none;
}

.cart.empty .products p {
  margin-top: 17px;
  margin-bottom: 20px;
}

.cart.empty .products button {
  width: 180px;
  height: 40px;
  background-color: var(--gr);
  font-weight: 900;
  font-size: 15px;
  border-radius: 8px;
  color: white;
  user-select: none;
}

.cart.empty .summary {
  min-height: auto;
  padding-bottom: 24px;
}

.cart.empty .summary h1, .cart.empty .summary p {
  color: #B9B9B9;
}
.cart.empty .summary p {
  margin: 0px;
}