@import url(./fonts.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: "SairaStencilOne", sans-serif;
  font-weight: 400;
}

:root {
  --viollet: #3e284f;
  --white: #fff;
  --green: #00a441;
  --black: #404040;
  --lightGrey: #f4f4f4;
  --os: "OpenSans", sans-serif;
}

button {
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
}

.container {
  max-width: 1320px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

.wrapper__nav {
  background: var(--viollet);
  box-shadow: 0px 0px 20px 0px #3e284f80;
  padding: 24px 0;
}

.wrapper__navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: var(--white);
  font-weight: 400;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.wrapper__navbar-right {
  position: relative;
}

.wrapper__navbar-btn {
  position: relative;
  z-index: 10;
}

.wrapper__navbar-btn_count {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--white);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--os);
  font-weight: 400;
  font-size: 10px;
  border-radius: 50%;
  border: 1px solid var(--viollet);
  transform: scale(0);
  transition: 0.3s;
}

.wrapper__navbar-btn_count.active {
  transform: scale(1);
}

.wrapper__nav-basket {
  position: absolute;
  top: 70px;
  right: -7px;
  width: 357px;
  height: 391px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0px 4px 10px #0000001a;
  transform: translateY(-150%);
  opacity: 0;
  transition: 0.3s linear;
  z-index: 10;
  background: var(--white);
}

.wrapper__nav-basket.active {
  transform: translateY(0%);
  opacity: 1;
}

.wrapper__nav-basket::before {
  content: url(../images/arrow-basket.svg);
  position: absolute;
  top: -16px;
  right: 11px;
  z-index: -1;
}

.wrapper__nav-basket_top {
  padding: 14px 16px;
  background: #775197;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px 10px 0 0;
  color: var(--white);
}

.wrapper__nav-basket_top-close {
  position: relative;
  width: 24px;
  height: 24px;
}

.wrapper__nav-basket_top-close::before {
  content: "";
  width: 14px;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--white);
  transform: translate(-50%, -50%) rotate(45deg);
}

.wrapper__nav-basket_top-close::after {
  content: "";
  width: 14px;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--white);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.wrapper__nav-basket_bottom {
  padding: 14px 16px;
  background: var(--green);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 10px 10px;
  color: var(--white);
}

.wrapper__nav-basket_top-h,
.wrapper__nav-basket_bottom-h,
.wrapper__nav-basket_bottom-totalprice {
  font-family: var(--os);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
}

.wrapper__view {
  position: relative;
  z-index: -2;
  margin: 20px auto 74px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper__view img {
  width: 80%;
  height: 100%;
}

.wrapper__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(255px, 1fr));
  gap: 24px;
  grid-auto-rows: 194px;
  place-items: center;
}

.wrapper__list-card {
  position: relative;
  background: var(--lightGrey);
  border-radius: 10px;
  box-shadow: 0px 20px 20px -15px #00000040;
  padding: 16px;
  min-width: 306px;
  width: 100%;
  text-align: center;
}

.wrapper__list-card_count {
  position: absolute;
  top: -15px;
  right: -15px;
  z-index: 5;
  width: 30px;
  height: 30px;
  background: var(--viollet);
  font-family: var(--os);
  font-weight: 400;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--white);
  opacity: 0;
  transition: 0.3s linear;
  color: var(--white);
}

.wrapper__list-card_count.active {
  opacity: 1;
}

.wrapper__list-card_img {
  margin-top: -85px;
}

.wrapper__list-card_title {
  font-weight: 400;
  font-size: 18px;
  color: var(--black);
  margin-top: 18px;
}

.wrapper__list-card_bottom {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wrapper__list-card_bottom-price {
  font-family: var(--os);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  padding: 10px;
  background: var(--viollet);
  border-radius: 10px;
}

.wrapper__list-card_bottom-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: var(--viollet);
  border-radius: 10px;
  transition: 0.3s;
}

.wrapper__list-card_bottom-btn:hover {
  background: var(--green);
}


.wrapper__nav-basket_cheklist {
  padding: 16px;
  height: 100%;
  background: var(--white);
}

.wrapper__navbar-product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.wrapper__navbar-product_info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wrapper__navbar-product_info-image {
  width: 70px;
  height: 54px;
}

.wrapper__navbar-product_info-sub {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrapper__navbar-product_info-sub-name {
  font-weight: 400;
  font-size: 16px;
  color: var(--black);
}

.wrapper__navbar-product_info-sub-price {
  font-family: var(--os);
  font-weight: 400;
  font-size: 16px;
  color: #000;
}

.wrapper__navbar-product_option {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  background: #bbb;
}

.wrapper__navbar-product_option-symbol {
  background-color: transparent;
  font-family: var(--os);
  font-weight: 700;
  font-size: 16px;
  width: 25px;
  height: 25px;
  transition: 0.3s;
}

.wrapper__navbar-product_option-count {
  background: #eee;
  width: 40px;
  height: 25px;
  border: 1px solid #bbb;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa-minus:hover {
  background: red;
  color: var(--white);
}

.fa-plus:hover {
  background: var(--green);
  color: var(--white);
}