:root {
  --font-default: "Kumbh Sans", sans-serif;
  --primary-1: hsl(26, 100%, 55%);
  --primary-2: hsl(25, 100%, 94%);
  --neutral-1: hsl(220, 13%, 13%);
  --neutral-2: hsl(219, 9%, 45%);
  --neutral-3: hsl(220, 14%, 75%);
  --neutral-4: hsl(223, 64%, 98%);
  --neutral-5: hsl(0, 0%, 100%);
  --neutral-6: hsl(0, 0%, 0%);
}
* {
  box-sizing: border-box;
}

/* || GENERAL - desktop */

html {
  font-size: 100%;
}
body {
  font-family: var(--font-default);
  color: var(--neutral-2);
  max-width: 1440px;
  margin: auto;
  margin-top: 3rem;
}
main {
  margin: auto;
  max-width: 1200px;
  display: flex;
  margin-top: 2rem;
}
section {
  padding: 4rem;
  margin: auto;
  width: 50%;
}
.main-photo,
.lightbox__main-photo {
  text-align: center;
}
.main-photo img,
.lightbox__main-photo img {
  width: 100%;
  border-radius: 15px;
}
.gallery-photos,
.lightbox__gallery-photos {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}
.gallery-photos img,
.lightbox__gallery-photos img {
  width: 20%;
  border-radius: 10px;
}
.gallery-photo--active,
.lightbox__gallery-photo--active {
  opacity: 50%;
  border: solid var(--primary-1) 2px;
}
.company-name {
  color: var(--primary-1);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: -0.5rem;
}
.product-name {
  color: var(--neutral-1);
  font-size: 47px;
  line-height: 1.1;
  margin: 2rem 0;
}
.product-description {
  line-height: 170%;
}
.prices {
  margin-top: 1.5rem;
}
.product-price {
  color: var(--neutral-1);
  font-weight: bold;
  font-size: 30px;
}
.discount-percent {
  color: var(--primary-1);
  font-weight: bold;
  font-size: 17px;
  margin-left: 1.2rem;
  background-color: var(--primary-2);
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
  position: relative;
  bottom: 5px;
}
.previous-price {
  display: block;
  text-decoration: line-through;
  margin-top: 0.5rem;
}
.count-icon {
  padding: 0 1.5rem;
}
.count-article {
  padding: 0 1rem;
  font-weight: 700;
  color: var(--neutral-1);
}
.counter {
  margin-top: 2rem;
}
.btn {
  background-color: var(--primary-1);
  padding: 18px 75px;
  border: unset;
  color: var(--neutral-5);
  border-radius: 10px;
  font-weight: 700;
  font-size: 100%;
}
.btn-add {
  box-shadow: 0px 14px 30px hsl(26deg 100% 55% / 40%);
  margin-left: 1rem;
}
.btn-add .basket-icon {
  margin-bottom: -0.3rem;
  margin-right: 0.5rem;
}

/* || HEADER - desktop */

body > header {
  margin-left: 8rem;
}
nav {
  width: 28rem;
  margin-top: -2.4rem;
  margin-left: 18rem;
}
ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
}
li {
  margin-bottom: 4.4rem;
}
a {
  all: unset;
}
.cart-and-avatar {
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin-top: -6.2rem;
  margin-right: 4rem;
}
.avatar > img {
  width: 47%;
}
.basket-icon > img {
  margin-right: 3rem;
  margin-top: 0.8rem;
}
.bullet-icon:before {
  content: attr(value);
  font-size: 9px;
  color: #fff;
  background-color: var(--primary-1);
  border-radius: 45%;
  padding: 1px 6px;
  position: relative;
  left: 25px;
  top: -15px;
  z-index: 1;
}

.cart-and-avatar + hr {
  width: 83%;
  margin-top: 2rem;
}

/* || ACTIVE STATES - desktop */

.btn:hover,
.count-icon:hover {
  opacity: 70%;
  cursor: pointer;
}

.gallery-photo:hover,
.lightbox__gallery-photo:hover {
  opacity: 50%;
  cursor: pointer;
}

li:hover {
  font-weight: 700;
  border-bottom: solid var(--primary-1) 5px;
  padding-bottom: 3rem;
  margin-bottom: 0;
  cursor: pointer;
}

.avatar > img:hover {
  -webkit-filter: drop-shadow(5px 0 0 var(--primary-1))
    drop-shadow(0 1px 0 var(--primary-1)) drop-shadow(-1px 0 0 var(--primary-1))
    drop-shadow(0 -1px 0 var(--primary-1));
  filter: drop-shadow(1px 0 0 var(--primary-1))
    drop-shadow(0 1px 0 var(--primary-1)) drop-shadow(-1px 0 0 var(--primary-1))
    drop-shadow(0 -1px 0 var(--primary-1));
  cursor: pointer;
}

.basket-icon > img:hover {
  filter: invert(48%) sepia(79%) saturate(100%) hue-rotate(86deg) brightness(0%)
    contrast(95%);
  cursor: pointer;
}

.cart-content--hidden {
  visibility: hidden;
}

.cart-content {
  position: absolute;
  background-color: white;
  box-shadow: -1px 12px 56px -14px var(--neutral-2);
  right: 4rem;
  width: 350px;
  border-radius: 10px;
  margin-top: -2rem;
  z-index: 1;
}
.cart-content h3 {
  color: var(--neutral-1);
  margin: 25px 0 25px 20px;
  font-size: 100%;
}
.cart-content hr {
  margin-bottom: 22px;
}
.cart-info-wrapper {
  width: 88%;
  margin: auto;
}
.cart-photo {
  width: 50px;
  border-radius: 3px;
  float: left;
}
.cart-product-name {
  margin-left: 12px;
  line-height: 1.5;
}
.cart-product-price {
  margin-left: 12px;
  line-height: 1.5;
}
.cart-product-sum {
  font-weight: 700;
  color: var(--neutral-1);
}
.fa-solid {
  float: right;
  color: var(--neutral-3);
  margin-top: -6px;
}
.button-box {
  width: 88%;
  margin: auto;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}
.btn-checkout {
  width: 100%;
}
.cart-message {
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
hr.for-empty-cart {
  margin-bottom: 0;
}

/* || LIGHTBOX - desktop */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
  animation: show 0.5s; /* applies when opening the lightbox */
  transition: opacity 0.3s; /* allows the gradual disapearing effect with class .fadeOut */
}
.lightbox__main-photo {
  position: relative;
  width: 650px;
}
.lightbox__gallery-photos {
  width: 550px;
}
.lightbox button {
  border: none;
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 11;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.lightbox button:hover {
  opacity: 1;
}
.lightbox__next {
  background: url(images/icon-next.svg) center center / 40% 40%;
  right: -25px;
}
.lightbox__prev {
  background: url(images/icon-previous.svg) center center / 40% 40%;
  left: -25px;
}
.lightbox__next,
.lightbox__prev {
  top: 45%;
  background-repeat: no-repeat;
  background-color: var(--neutral-5);
  border: 1px grey solid;
  border-radius: 25px;
  padding: 25px;
}
.lightbox__close {
  background: url(images/icon-close.svg) center center / 100% 100% transparent;
  position: absolute;
  top: -30px;
  right: 0px;
}
.lightbox__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* allows to center vertically */
  margin: 30px 445px;
}
.lightbox__container img {
  max-width: 100%;
  height: auto;
  animation: show 0.5s; /* applies when going to the next img */
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lightbox.fadeOut {
  opacity: 0; /* allows the gradual disapearing effect with transition */
}