@charset "UTF-8";
/* Use Sass modules (keeps existing unprefixed names via `as *`) */
/* abstracts (variables first, then functions and mixins) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root {
  --color-primary: #ffc533;
  --color-primary-light: #ffdf68;
  --color-primary-dark: #f8974e;
  --color-secondary: #609bfb;
  --color-secondary-dark: #283f66;
  --color-grey: #898787;
  --color-grey-light: #c4c4c4;
  --color-grey-lightest: #e5e5e5;
  --color-white: #ffffff;
  --color-white-dark: #f5f5f5;
  --color-black: #000000;
  --color-google: #3f7ee8;
  --color-warning: #c11212;
  --color-primary-light-opacity: rgba(255, 223, 104, 0.15);
}

/*
* 0 - 600px:      Phone
* 600 - 900px:    Tablet portrait
* 900 - 1200px:   Tablet landscape
* [1200 - 1800]   Normal style
* 1800px +:       Big desktop

* $breakpoint argument choices:
* - phone
* - tab-port
* - tab-land
* - big-desktop

* ORDER: Base + Typography > General Layout + Grid > Page Layout > Components

* 1em = 16px
*/
/* base */
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes sweepIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sweepOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  max-width: 100%;
}
@media only screen and (max-width: 1080px) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 600px) {
  html {
    font-size: 50%;
  }
}

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container {
  position: relative;
}

input,
button {
  background-color: transparent;
  border: none;
  color: currentColor;
}

a {
  text-decoration: none;
  color: currentColor;
}

button:hover {
  cursor: pointer;
}

li {
  list-style: none;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

details[open] summary ~ * {
  animation: sweepIn 0.2s ease-in-out;
}

details[close] summary ~ * {
  animation: sweepOut 0.2s ease-in-out;
}

body {
  font-family: Montserrat;
}

.decorated-heading {
  --lineLength: 8rem;
  position: relative;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
}
.decorated-heading::before, .decorated-heading::after {
  position: absolute;
  top: calc(1em - 5px);
  content: "";
  width: var(--lineLength);
  height: 5px;
  background-color: var(--color-secondary);
}
.decorated-heading::before {
  left: calc(-1 * var(--lineLength));
}
.decorated-heading::after {
  right: calc(-1 * var(--lineLength));
}

.heading-line {
  font-size: 2.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.heading-line:before, .heading-line:after {
  content: "";
  display: block;
  background-color: var(--color-secondary);
  height: 3px;
  width: 7.5rem;
}
.heading-line::before {
  margin-right: 1rem;
}
.heading-line::after {
  margin-left: 1rem;
}
.heading-line--both {
  justify-content: center;
}
.heading-line--left {
  justify-content: flex-start;
}
.heading-line--left:after {
  display: none;
}
.heading-line--right {
  justify-content: flex-end;
}
.heading-line--right:before {
  display: none;
}

.moreLink {
  color: var(--color-secondary);
  font-size: 1.6rem;
}
.moreLink:hover {
  text-decoration: underline;
}

.small-paragraph {
  font-size: 1.3rem;
  color: var(--color-grey);
  text-align: center;
  margin: 1rem 0;
}

/* layout */
/* Use Sass modules (keeps existing unprefixed names via `as *`) */
/* abstracts (variables first, then functions and mixins) */
.wrapper {
  width: min(90vw, 130rem);
  margin: 0 auto;
}

.navigation {
  position: sticky;
  top: -1px;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-white);
  padding: 4rem 0;
  transition: padding 0.2s ease-in-out;
}
.navigation.isSticky {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-white-dark);
}
@media only screen and (max-width: 900px) {
  .navigation {
    position: unset;
    padding: 4rem 0 !important;
  }
}

.navigation__content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media only screen and (max-width: 900px) {
  .navigation__content {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    row-gap: 2rem;
    grid-template-areas: "burger logo cart" "search search search";
  }
}

.navigation__burger {
  display: none;
}
@media only screen and (max-width: 900px) {
  .navigation__burger {
    display: block;
    grid-area: burger;
  }
}
.navigation__burger:hover > * {
  background-color: var(--color-secondary);
}
.navigation__burger-line {
  width: 3rem;
  height: 0.5rem;
  background-color: var(--color-grey-light);
  border-radius: 4px;
  transition: background-color 0.2s;
}
.navigation__burger-line + .navigation__burger-line {
  margin-top: 0.5rem;
}

.navigation__links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
@media only screen and (max-width: 900px) {
  .navigation__links {
    display: none;
  }
}
.navigation__links-item {
  white-space: nowrap;
  color: var(--color-grey-light);
}
.navigation__links-item:hover {
  color: var(--color-secondary);
  transition: 0.2s color;
}
.navigation__links-item + .navigation__links-item {
  margin-left: 3rem;
}
.navigation__links-item--active {
  position: relative;
  color: var(--color-secondary);
}
.navigation__links-item--active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background-color: var(--color-secondary);
  border-radius: 50%;
}
.navigation__links-item--active > .navigation__links-link {
  cursor: default;
}
.navigation__links-link {
  font-weight: 700;
  font-size: 1.4rem;
}

.navigation__logo {
  font-size: 3.6rem;
  font-weight: 900;
  color: var(--color-primary);
}
@media only screen and (max-width: 900px) {
  .navigation__logo {
    margin: 0 auto;
    font-size: 2.4rem;
    grid-area: logo;
  }
}

.navigation__search {
  position: absolute;
  display: flex;
  align-items: center;
  height: 4.6rem;
  width: 2rem;
  margin-right: 2rem;
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  background-color: transparent;
  border-radius: 10px;
  transition: 0.5s transform, 0.5s right, 0.5s width, 0.7s background-color;
}
@media only screen and (max-width: 900px) {
  .navigation__search {
    width: 100%;
    position: unset;
    grid-area: search;
    background-color: var(--color-white-dark);
  }
}
@media only screen and (min-width: 901px) {
  .navigation__search {
    right: 20rem;
  }
  .navigation__search:focus-within {
    right: 50%;
    transform: translateX(51%);
    background-color: var(--color-white-dark);
    width: clamp(400px, 51vw, 660px);
    transition: 0.5s transform, 0.5s right, 0.5s width, 0.7s background-color;
  }
  .navigation__search:focus-within .navigation__search-input {
    display: block;
  }
}
.navigation__search-input {
  display: none;
  width: 90%;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-grey);
}
@media only screen and (max-width: 900px) {
  .navigation__search-input {
    display: block;
  }
}
.navigation__search-input:focus {
  outline: none;
}
.navigation__search-input::placeholder {
  color: var(--color-grey-light);
  opacity: 1;
}
.navigation__search-input:-ms-input-placeholder {
  color: var(--color-grey-light);
}
.navigation__search-input::-ms-input-placeholder {
  color: var(--color-grey-light);
}
.navigation__search-button {
  margin-left: auto;
  margin-right: 1.5rem;
  width: 2rem;
  height: 2rem;
}
.navigation__search-icon {
  height: 100%;
  fill: var(--color-grey-light);
}
.navigation__search-icon:hover {
  fill: var(--color-secondary);
}

.navigation__buttons {
  display: flex;
  align-items: center;
  height: 100%;
}
@media only screen and (max-width: 900px) {
  .navigation__buttons {
    position: initial;
    grid-area: cart;
  }
  .navigation__buttons .navigation__buttons-dropdown {
    display: none;
  }
}
.navigation__buttons-login {
  margin-left: 4rem;
  text-transform: uppercase;
}
@media only screen and (max-width: 900px) {
  .navigation__buttons-login {
    display: none;
  }
}
.navigation__buttons-cart {
  position: relative;
  margin-left: 2.5rem;
  width: 3.2rem;
  height: 3.2rem;
}
.navigation__buttons-cart-icon {
  width: 100%;
  fill: var(--color-grey-light);
  transition: fill 0.3s;
}
.navigation__buttons-cart-icon:hover {
  fill: var(--color-secondary);
}
.navigation__buttons-cart-quantity {
  position: absolute;
  bottom: -25%;
  right: -25%;
  width: 2rem;
  height: 2rem;
  background-color: var(--color-primary);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation__mobile {
  position: fixed;
  top: 0;
  left: -100vw;
  z-index: 100;
  transition: all 0.4s;
  height: 100vh;
  width: 100vw;
  padding-top: 6rem;
  background-color: var(--color-white);
  transition: left 0.3s ease-in-out;
}
.navigation__mobile-is-visible {
  left: 0;
}
.navigation__mobile-item {
  color: var(--color-grey-light);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.navigation__mobile-item--variant {
  background-color: var(--color-primary);
}
.navigation__mobile-item--variant button {
  color: var(--color-black);
  font-family: inherit;
  font-size: 2.2rem;
  font-weight: 700;
}
.navigation__mobile-item:hover {
  cursor: pointer;
  color: var(--color-secondary);
  transition: 0.2s color;
}
.navigation__mobile-item--active {
  color: var(--color-secondary);
}
.navigation__mobile-item--active > .navigation__mobile-link {
  cursor: default;
}
.navigation__mobile-link {
  display: block;
  font-size: 2rem;
  padding-bottom: 3rem;
  padding-top: 3rem;
  padding-left: 4rem;
  width: 100%;
  height: 100%;
}
.navigation__mobile-login {
  width: fit-content;
  margin: 0 auto;
  margin-top: 5rem;
  text-transform: uppercase;
}
.navigation__mobile-close {
  margin-left: 4rem;
  margin-bottom: 4rem;
}
.navigation__mobile-close:hover > * {
  background-color: var(--color-secondary);
}
.navigation__mobile-close > *:nth-child(1) {
  transform: rotate(45deg);
}
.navigation__mobile-close > *:nth-child(2) {
  transform: rotate(-45deg) translateY(-6px) translateX(6px);
}

.footer {
  width: 100%;
  margin-top: 6rem;
  background-color: var(--color-secondary-dark);
  color: var(--color-white);
  font-size: 1.3rem;
}
.footer__container {
  min-height: 23rem;
  display: grid;
  row-gap: 4rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "left center right";
  padding-top: 3rem;
  padding-bottom: 1rem;
}
@media only screen and (max-width: 900px) {
  .footer__container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "left right" "center center";
  }
}
@media only screen and (max-width: 500px) {
  .footer__container {
    justify-content: center;
    grid-template-columns: 1fr;
    grid-template-areas: "left" "right" "center";
  }
}
.footer__logo {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 2.4rem;
  font-weight: 900;
}
.footer__paragraph {
  margin-bottom: 2rem;
  max-width: 30rem;
}
.footer__contact {
  width: max-content;
  margin-left: 1.5rem;
}
.footer__contact-item {
  margin-bottom: 0.7rem;
}
.footer__contact-item:hover {
  text-decoration: underline;
}
.footer__copyright {
  text-align: center;
  width: 100%;
}
.footer__heading {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.footer__nav {
  text-transform: capitalize;
}
.footer__nav-item {
  margin-bottom: 0.7rem;
  margin-right: 1.5rem;
}
.footer__nav-item:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 500px) {
  .footer__nav-item, .footer__contact, .footer__contact-item {
    margin-left: 0;
    margin-right: 0;
  }
}

@media only screen and (max-width: 500px) {
  .footer__side {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center !important;
  }
}
.footer__side--left {
  grid-area: left;
}
.footer__side--center {
  grid-area: center;
  display: flex;
  align-items: flex-end;
}
.footer__side--right {
  grid-area: right;
  text-align: right;
}

/* pages */
/* home page styles follow... */
.home-main {
  overflow-x: hidden;
}

.home-header__container {
  position: relative;
  display: flex;
  background-color: var(--color-primary-light-opacity);
  border-radius: 2.4rem;
  margin-bottom: 12rem;
  padding: 4rem 6rem;
}
@media only screen and (max-width: 900px) {
  .home-header__container {
    flex-direction: column;
  }
}
@media only screen and (max-width: 600px) {
  .home-header__container {
    padding: 4rem min(2rem, 5vw);
  }
}
.home-header__container::after {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -20;
  content: "";
  width: 38rem;
  height: 38rem;
  background-image: url("../assets/svg/blob.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(0deg);
}
@media screen and (max-width: 900px) {
  .home-header__container::after {
    display: none;
  }
}
.home-header__cta {
  flex-basis: 55%;
  color: var(--color-black);
}
@media only screen and (max-width: 900px) {
  .home-header__cta {
    flex-basis: 100%;
    text-align: center;
  }
}
.home-header__heading {
  margin-bottom: 2rem;
  font-weight: 700;
  font-size: 3.2rem;
}
.home-header__text {
  margin-bottom: 4rem;
  font-weight: 400;
  font-size: 1.8rem;
}
.home-header__button {
  color: var(--color-white);
  width: max-content;
  margin: 0 auto;
}
.home-header__covers {
  position: relative;
  top: 1rem;
  display: flex;
  margin-left: 4rem;
}
@media only screen and (max-width: 600px) {
  .home-header__covers {
    display: none;
  }
}
.home-header__image {
  position: absolute;
  width: clamp(320px, 30vw, 380px);
}
@media only screen and (max-width: 900px) {
  .home-header__image {
    width: 120px;
    top: -60px;
    left: 80%;
  }
}

.home-categories__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4rem;
}
.home-categories__title {
  position: relative;
  font-weight: 700;
  font-size: 2.4rem;
}
.home-categories__title::before {
  position: absolute;
  left: -2.9rem;
  top: 0;
  z-index: -10;
  content: "";
  width: 5.8rem;
  height: 2.5rem;
  background-image: url("../assets/svg/title_decoration.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
.home-categories__more {
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--color-secondary);
}
.home-categories__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 2rem;
}
@media screen and (max-width: 900px) {
  .home-categories__content {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }
}
.home-categories__content::after {
  position: absolute;
  left: -5rem;
  top: clamp(1rem, 4vw, 10rem);
  z-index: -20;
  content: "";
  width: 32rem;
  height: 32rem;
  background-image: url("../assets/svg/blob.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}
@media screen and (max-width: 900px) {
  .home-categories__content::after {
    display: none;
  }
}
.home-categories__item {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 600px) {
  .home-categories__item {
    max-height: 19rem;
  }
}
.home-categories__item:hover .home-categories__item-image {
  transform: scale(1.2);
}
.home-categories__item-image {
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
  transform-origin: center;
  transition: transform 0.3s;
}
.home-categories__item-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--color-white);
  white-space: nowrap;
}

.home-top-books {
  margin-top: 10rem;
}
.home-top-books__header {
  display: flex;
  justify-content: center;
}
.home-top-books__title {
  margin-bottom: 5rem;
}
.home-top-books__content {
  margin-top: 5rem;
}

.home-best-books {
  margin-top: 10rem;
}
.home-best-books__header {
  display: flex;
  justify-content: center;
}
.home-best-books__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(5, 8rem);
  grid-gap: 2rem;
  margin-top: 6rem;
}
@media screen and (max-width: 900px) {
  .home-best-books__content {
    grid-template-rows: repeat(3, min-content);
  }
}
.home-best-books__content::after {
  position: absolute;
  right: -15rem;
  top: -10rem;
  z-index: -20;
  content: "";
  width: 32rem;
  height: 32rem;
  background-image: url("../assets/svg/blob.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(135deg);
}
@media screen and (max-width: 900px) {
  .home-best-books__content::after {
    display: none;
  }
}
.home-best-books__item {
  position: relative;
  display: block;
  overflow: hidden;
  font-weight: 700;
  color: var(--color-white);
  padding: 1rem 3rem;
}
.home-best-books__item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: -1;
}
.home-best-books__item--1 {
  grid-column: 1/span 6;
  grid-row: 1/span 5;
  font-size: 2.4rem;
}
@media screen and (max-width: 900px) {
  .home-best-books__item--1 {
    grid-column: 1/-1;
    grid-row: auto;
  }
}
.home-best-books__item--2 {
  grid-column: 7/-1;
  grid-row: 1/span 3;
  font-size: 2rem;
}
@media screen and (max-width: 900px) {
  .home-best-books__item--2 {
    grid-column: 1/-1;
    grid-row: auto;
  }
}
.home-best-books__item--3 {
  grid-column: 7/-1;
  grid-row: 4/span 2;
  font-size: 1.2rem;
}
@media screen and (max-width: 900px) {
  .home-best-books__item--3 {
    grid-column: 1/-1;
    grid-row: auto;
  }
}
.home-best-books__item:hover .home-best-books__item-image {
  transform: scale(1.2);
}
.home-best-books__item-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: blur(1px);
  object-fit: cover;
  z-index: -10;
  transition: transform 0.3s;
}
.home-best-books__item-position {
  font-size: 4em;
}
@media screen and (max-width: 900px) {
  .home-best-books__item-position {
    font-size: 3em;
  }
}
@media screen and (max-width: 600px) {
  .home-best-books__item-position {
    font-size: 2em;
  }
}
.home-best-books__item-title {
  font-size: 2em;
  max-width: 46rem;
}
@media screen and (max-width: 900px) {
  .home-best-books__item-title {
    max-width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .home-best-books__item-title {
    font-size: 1.75em;
  }
}
.home-best-books__item-author {
  margin-top: 0.5em;
  font-size: 1em;
}

.home-blog {
  margin-top: 13rem;
  margin-bottom: 10rem;
}
.home-blog__header {
  position: relative;
  width: max-content;
  z-index: -10;
  margin-left: -10rem;
  margin-bottom: -10rem;
  padding-top: 3.5rem;
  padding-left: 10rem;
  padding-right: 10rem;
  padding-bottom: 10rem;
  background-color: var(--color-primary);
}
@media screen and (max-width: 600px) {
  .home-blog__header {
    width: max(46rem, 90%);
    padding-right: 5rem;
  }
}
.home-blog__header::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5rem;
  z-index: -10;
  width: 15rem;
  height: 13rem;
  background-image: url(../assets/svg/dots.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: -5px;
}
.home-blog__title {
  position: relative;
  width: max-content;
  font-weight: 700;
  font-size: 3.6rem;
}
@media screen and (max-width: 600px) {
  .home-blog__title {
    font-size: 2.6rem;
    width: auto;
  }
}
.home-blog__title::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: calc(0.5em - 0.3rem);
  height: 0.6rem;
  width: 5.5rem;
  background-color: var(--color-white);
}
@media screen and (max-width: 600px) {
  .home-blog__title::after {
    display: none;
  }
}
.home-blog__description {
  max-width: 45rem;
  margin-top: 4rem;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 1.6;
}
@media screen and (max-width: 600px) {
  .home-blog__description {
    font-size: 1.4rem;
  }
}
.home-blog__articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 0.8fr));
  grid-gap: 5.5rem;
  margin-top: 3rem;
  padding-left: 5rem;
}
.home-blog__articles-item {
  display: block;
}
.home-blog__articles-item:hover .home-blog__articles-image {
  transform: scale(1.2);
}
.home-blog__articles-image {
  width: 100%;
  transition: transform 0.3s;
}
.home-blog__articles-image-wrapper {
  overflow: hidden;
}
.home-blog__articles-title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-blog__articles-author {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}
.home-blog__articles-author-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
}
.home-blog__articles-author-name {
  margin-left: 1rem;
  font-weight: 300;
  font-size: 1.4rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.categories {
  margin-top: 3rem;
}
.categories__nav {
  max-width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  background-color: var(--color-white-dark);
  border-bottom: 2px solid var(--color-grey-light);
  padding: 1rem 2rem;
  margin: 0 auto 4rem auto;
}
.categories__nav a:not(:last-child) {
  margin-right: 0.7rem;
}
@media only screen and (max-width: 900px) {
  .categories__nav {
    max-width: 100%;
  }
}
.categories__list {
  column-width: 25rem;
  column-gap: 5rem;
}
.categories__list-item {
  width: 100%;
  margin-bottom: 4rem;
  display: inline-block;
}

.product {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr 25%;
  grid-template-areas: "header cart" "description cart" "similar cart" "reviews cart" "info cart";
  column-gap: 7rem;
}
@media screen and (max-width: 900px) {
  .product {
    margin-top: 0;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "cart" "description" "similar" "reviews" "info";
  }
}
.product__section:not(:last-child) {
  border-bottom: 1px solid var(--color-grey-light);
}
.product__section {
  padding: 3rem 0;
}
.product__heading {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.product__header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  grid-area: header;
}
@media screen and (max-width: 600px) {
  .product__header {
    flex-direction: column;
  }
}
.product__cover {
  min-width: 25rem;
  height: 35rem;
  margin-right: 2rem;
}
.product__cover img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 600px) {
  .product__cover {
    margin: 0 auto 2rem auto;
  }
}
.product__info {
  margin-top: 0.5rem;
}
.product__title {
  font-size: 3.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.product__author {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.product__flags {
  margin-bottom: 1rem;
}
.product__publisher {
  font-size: 1.5rem;
  color: var(--color-grey);
  margin-bottom: 1rem;
}
.product__publisher--highlight {
  color: var(--color-black);
}
.product__rating {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.5rem;
}
.product__rating-title {
  margin-right: 1rem;
}
.product__rating-numbers {
  margin-left: 1rem;
}
.product__rating-pipe {
  width: 1px;
  height: 1.5rem;
  display: block;
  background-color: var(--color-grey-light);
  margin: 0 1.5rem;
}
.product__description {
  grid-area: description;
}
.product__description br {
  content: "A" !important;
  display: block !important;
  margin-bottom: 1.2em !important;
}
.product__description-content {
  font-size: 1.6rem;
  line-height: 2.2rem;
}
.product_similar {
  grid-area: similar;
}
.product__opinions {
  grid-area: reviews;
}
.product__opinions-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.product__button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  margin-left: 1rem;
}
.product__reviews {
  margin-top: 3.5rem;
}
.product__details {
  grid-area: info;
}
.product__details-list {
  font-size: 1.6rem;
  margin-top: 4rem;
}
.product__details-item {
  margin-bottom: 1.5rem;
}
.product__details-name {
  color: var(--color-grey);
}
.product__cart {
  max-height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 8.5rem;
  grid-area: cart;
}
@media screen and (max-width: 900px) {
  .product__cart {
    position: initial;
  }
}
.product__money {
  border: 2px solid var(--color-primary-dark);
  background-color: var(--color-white);
  padding: 1.8rem 1.8rem 1rem 1.8rem;
  position: relative;
  border-left-width: 5px;
}
.product__price {
  font-size: 2rem;
  color: var(--color-primary-dark);
  font-weight: 700;
  margin-bottom: 2rem;
}
.product__sale {
  font-size: 1.3rem;
  color: var(--color-grey-light);
  font-weight: 400;
  text-decoration: line-through;
}
.product__money-button--orange {
  background-color: var(--color-primary-dark);
}
.product__money-button--blue {
  background-color: var(--color-secondary);
}
.product__money-button {
  width: 100%;
  padding: 0.7rem 1rem;
  font-weight: 700;
  color: var(--color-white);
  font-size: 1.3rem;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  transition: all 0.2s ease-in-out;
}
.product__money-button:hover {
  background-color: var(--color-primary);
  color: var(--color-black);
}
.product__money-icon {
  font-size: 2rem;
  text-align: right;
}
.product__favourite {
  width: 100%;
  font-size: 1.5rem;
  background-color: var(--color-grey-lightest);
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0;
}
.product__favourite-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1rem;
}
.product__favourite {
  transition: all 0.2s ease-in-out;
}
.product__favourite:hover {
  background-color: var(--color-primary);
}
.product__favourite--delete {
  background-color: var(--color-primary);
}
.product__favourite--delete:hover {
  background-color: var(--color-grey-lightest);
}
.product__favourite.wait::before {
  content: "...";
  color: var(--color-white);
  font-size: 1.7rem;
  font-weight: 700;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: wait;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product__nav {
  margin-top: 1.4rem;
}
.product__nav-item {
  background-color: var(--color-white);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--color-grey-light);
  border-left: 3px solid var(--color-primary-dark);
}
.product__nav-item--current {
  font-weight: 700;
}

.flag--primary {
  background-color: var(--color-primary);
}
.flag--secondary {
  background-color: var(--color-secondary);
}
.flag {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  margin-right: 0.8rem;
}
.flag__rank {
  color: var(--color-white);
  margin-left: 1rem;
}

.review {
  width: 90%;
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-template-areas: "value info" ". review";
  gap: 1rem;
  margin-bottom: 3rem;
}
.review--1 {
  --valCol: 0%;
}
.review--2 {
  --valCol: 10%;
}
.review--3 {
  --valCol: 35%;
}
.review--4 {
  --valCol: 50%;
}
.review--5 {
  --valCol: 65%;
}
.review--6 {
  --valCol: 100%;
}
@media screen and (max-width: 900px) {
  .review {
    width: 100%;
    grid-template-areas: "value info" "review review";
  }
}
.review__value {
  grid-area: value;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: Rgba(255, 197, 51, var(--valCol));
  border: 2px solid var(--color-primary);
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 2.4rem;
}
.review__info {
  grid-area: info;
  font-size: 1.6rem;
  color: var(--color-grey);
  align-self: center;
}
.review__content {
  grid-area: review;
  font-size: 1.6rem;
  line-height: 2.2rem;
}
.review__seeAll {
  display: block;
  background-color: var(--color-grey-lightest);
  font-size: 1.2rem;
  padding: 1rem 2rem;
  width: 19.5rem;
  text-align: center;
  margin-left: auto;
  transition: all 0.2s ease-in-out;
}
.review__seeAll:hover {
  background-color: var(--color-primary);
  font-weight: 700;
}

.search {
  display: grid;
  grid-template-columns: 20% 75%;
  grid-column-gap: 5%;
}
@media screen and (max-width: 1240px) {
  .search {
    grid-template-columns: 25% 70%;
  }
}
@media screen and (max-width: 900px) {
  .search {
    grid-template-columns: 100%;
  }
}
.search__header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-grey-light);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--color-grey);
}
@media screen and (max-width: 900px) {
  .search__header {
    margin-top: 2rem;
  }
}
.search__sorting {
  margin-left: 2rem;
  margin-top: 2.5rem;
}

.search__filter {
  height: max-content;
}
.search__filter-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2.8rem;
  background-color: var(--color-secondary-dark);
  border-radius: 1.5rem;
}
.search__filter[open] .search__filter-icon {
  transform: rotate(0);
}
.search__filter-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-white);
}
.search__filter-icon {
  width: 2.8rem;
  height: 2.5rem;
  fill: var(--color-white);
  transform: rotate(-90deg);
  transition: transform 0.2s ease-in-out;
}
.search__filter-item {
  margin-top: 2.3rem;
}
.search__filter-item--hidden {
  display: none;
}

.search__result {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  grid-gap: 2rem 5rem;
  margin-left: 2rem;
  margin-top: 4.5rem;
  margin-bottom: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--color-grey-light);
}
.search__result-none {
  text-align: center;
  font-size: 1.8rem;
  color: var(--color-grey);
  grid-column: 1/-1;
}

.product-reviews {
  margin-top: 2rem;
}
.product-reviews__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-reviews__heading {
  color: var(--color-grey);
  font-size: 1.8rem;
  max-width: 70%;
}
.product-reviews__heading--highlight {
  color: var(--color-secondary);
  text-decoration: underline;
}
.product-reviews__summary {
  margin-top: 4rem;
}
.product-reviews__container {
  padding: 1.5rem;
  margin: 3rem auto 0 auto;
  width: 90%;
  display: grid;
  grid-template-columns: 1fr;
}
.product-reviews__more {
  margin: auto;
}

.summary {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media screen and (max-width: 900px) {
  .summary {
    grid-template-columns: 1fr;
  }
}
.summary__heading {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.summary__rating {
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-primary);
}
.summary__rating--lowlight {
  font-size: 1.8rem;
  color: var(--color-grey);
  font-weight: 400;
}
.summary__stars {
  width: 100%;
  text-align: center;
}
.summary__paragraph {
  font-size: 1.3rem;
  text-align: center;
}

.diagram {
  width: 80%;
}
@media screen and (max-width: 900px) {
  .diagram {
    width: 100%;
  }
}
.diagram__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.diagram__rating {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
}
.diagram__bar {
  width: 60%;
  background-color: var(--color-grey-lightest);
  border-radius: 1.5rem;
  margin: 0 3rem;
  height: 1.5rem;
  position: relative;
}
.diagram__bar:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--percent);
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 1.5rem;
}
.diagram__count {
  text-align: left;
  font-size: 1.4rem;
  color: var(--color-grey);
}

.error {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: url("../assets/svg/blob.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.error * {
  text-align: center;
}
.error__heading {
  font-size: 5rem;
  margin-bottom: 1rem;
}
.error__code {
  font-size: 20rem;
  font-weight: 900;
}
.error__info {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.user {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 35rem auto;
  grid-template-areas: "header info" "favourites favourites" "orders orders" "reviews reviews";
}
@media only screen and (max-width: 900px) {
  .user {
    grid-template-columns: 1fr;
    grid-template-rows: 35rem auto;
    grid-template-areas: "header" "info" "favourites" "orders" "reviews";
  }
}
.user {
  row-gap: 4rem;
  margin-top: 2rem;
  padding-bottom: 4rem;
}
.user__none {
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-align: center;
}
.user__header {
  grid-area: header;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  background: url("../assets/svg/blob.svg") no-repeat center center;
  background-size: contain;
}
.user__figure {
  width: 18rem;
  height: 18rem;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 5px solid var(--color-white);
  border-radius: 3rem;
}
.user__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user__username {
  font-size: 2.4rem;
}
.user__name {
  font-size: 1.8rem;
  font-weight: 300;
}
.user__info {
  grid-area: info;
  width: 80%;
  margin: 0 auto;
  align-self: center;
}
.user__info-button {
  margin: 1rem auto;
}
@media only screen and (max-width: 900px) {
  .user__info {
    width: 100%;
  }
}
.user__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.user__table-row:nth-child(even) {
  background-color: var(--color-white-dark);
}
.user__table-column {
  padding: 1rem;
}
.user__table-column--title {
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-grey);
}
.user__table-column--data {
  font-size: 1.5rem;
  text-align: right;
}
.user__table-column--empty {
  color: var(--color-grey);
}
.user__favourites {
  grid-area: favourites;
}
.user__favourites-heading {
  margin-bottom: 3rem;
}
.user__favourites-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1rem 1.5rem;
}
.user__favourites-item {
  display: block;
}
.user__favourites-item:hover .user__favourites-image {
  transform: scale(1.1);
}
.user__favourites-figure {
  display: block;
  height: 30rem;
  overflow: hidden;
  position: relative;
  margin-bottom: 1rem;
  background-color: var(--color-white-dark);
}
.user__favourites-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-in-out;
}
.user__favourites-title {
  font-size: 1.8rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.user__favourites-button {
  width: 100%;
  padding: 0.5rem;
  background-color: var(--color-secondary-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0.6rem auto;
  border: 1px solid currentColor;
  font-family: inherit;
}
.user__favourites-button:hover {
  background-color: var(--color-white);
  color: var(--color-secondary-dark);
}
.user__favourites-author {
  font-size: 1.4rem;
  color: var(--color-grey);
}
.user__favourites-more {
  align-self: center;
}
.user__templates {
  grid-area: templates;
  margin-right: 3rem;
}
@media only screen and (max-width: 900px) {
  .user__templates {
    margin-right: 0;
  }
}
.user__templates-container {
  margin-bottom: 1rem;
}
.user__orders {
  grid-area: orders;
}
.user__orders-container {
  width: 85%;
  margin: 0 auto;
}
.user__reviews {
  grid-area: reviews;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "heading more" "reviews reviews";
  margin-top: 2rem;
}
@media only screen and (max-width: 900px) {
  .user__reviews {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "reviews" "more";
  }
}
.user__reviews-heading {
  grid-area: heading;
}
.user__reviews-more {
  grid-area: more;
  justify-self: end;
}
@media only screen and (max-width: 900px) {
  .user__reviews-more {
    justify-self: center;
    margin-top: 2.5rem;
  }
}
.user__reviews-container {
  grid-area: reviews;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50rem, 1fr));
  column-gap: 3.5rem;
  row-gap: 2.5rem;
}
@media only screen and (max-width: 900px) {
  .user__reviews-container {
    grid-template-columns: 1fr;
  }
}

.user-orders__container {
  margin-top: 3rem;
}
.user-orders__button {
  margin: 0 auto;
}

.user-templates__container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 3.2rem;
  margin-top: 3rem;
}
@media only screen and (max-width: 900px) {
  .user-templates__container {
    grid-template-columns: 1fr;
  }
}

.user-reviews__container {
  margin-top: 4rem;
  position: relative;
  min-height: 7rem;
}
.user-reviews__container li {
  margin-bottom: 2rem;
}
.user-reviews__button {
  margin: 0 auto;
}

.user-favourites__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  grid-gap: 2rem 5rem;
  margin-top: 3rem;
}
.user-favourites__button {
  margin: 0 auto;
}

.user-container {
  width: min(90rem, 90vw);
  margin: 4rem auto;
}
.user-container--settings {
  padding: 2rem 5rem 6rem 5rem;
  background-color: var(--color-white-dark);
  border-radius: 1.5rem;
}

.user-settings__error {
  text-align: center;
  color: var(--color-warning);
  font-size: 1.6rem;
}
.user-settings__info {
  text-align: center;
  color: var(--color-secondary);
  font-size: 1.6rem;
}

.settings-form:not(:first-child) {
  margin-top: 4rem;
}
.settings-form__heading {
  font-weight: 700;
  font-size: 1.6rem;
  text-align: left;
  text-transform: capitalize;
}
.settings-form__heading--danger {
  color: var(--color-warning);
}
.settings-form__figure {
  position: relative;
  width: 11.5rem;
  height: 11.5rem;
  margin: 2.5rem auto;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.settings-form__image-input {
  display: none;
}
.settings-form__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.settings-form__edit {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: inherit;
  width: inherit;
  height: inherit;
  transition: all 0.2s ease;
  border: 2px solid var(--color-secondary);
}
.settings-form__edit:before {
  content: "Edytuj";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color-secondary);
  height: 3.3rem;
  width: 100%;
  text-align: center;
  color: var(--color-white);
  font-size: 1.5rem;
  padding-top: 0.5rem;
}
.settings-form__edit:hover {
  opacity: 1;
}
.settings-form__delete {
  display: block;
  font-size: 1.2rem;
  font-weight: 300;
  text-align: center;
  max-width: 7rem;
  margin: 0 auto 2rem auto;
  cursor: pointer;
}
.settings-form__delete:hover {
  text-decoration: underline;
}
.settings-form__button {
  margin: 0 auto;
}

.address-template {
  width: 100%;
  padding: 2.5rem 3rem;
  background-color: var(--color-white-dark);
  border-radius: 1.5rem;
  border: 1px solid var(--color-secondary);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
.address-template[open] .address-template__header {
  margin-bottom: 1.5rem;
}
.address-template__header {
  list-style: none;
}
.address-template__header::-webkit-details-marker {
  display: none;
}
.address-template__heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.address-template__post {
  font-weight: 700;
}
.address-template__button {
  width: 100%;
  height: 6rem;
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-radius: 1.5rem;
  font-size: 7.2rem;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.address-template__button:hover {
  background-color: var(--color-white-dark);
  color: var(--color-secondary);
}
.address-template__buttons {
  display: flex;
  margin-top: 2rem;
  gap: 1.5rem;
}

.order {
  background-color: var(--color-white);
  border-radius: 1.5rem;
  border: 1px solid var(--color-grey);
  margin-bottom: 1rem;
  padding: 1.5rem 1.7rem;
}
.order__info {
  font-size: 1.8rem;
}
.order__date {
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-right: 3rem;
}
.order__number {
  font-weight: 200;
}
.order__items {
  margin-top: 1rem;
}
.order__item {
  background-color: var(--color-white-dark);
  display: grid;
  grid-template-columns: 5% 60% 20% 15%;
  align-items: center;
  padding: 0.4rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 7px;
  min-height: 3.6rem;
}
.order__item:before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-primary-dark);
  border-radius: 50%;
  margin-right: 1rem;
}
.order__title {
  font-size: 1.2rem;
}
.order__count {
  font-weight: 200;
  font-size: 1.4rem;
  text-align: center;
}
.order__price {
  font-weight: 700;
  font-size: 1.4rem;
}
.order__wholePrice {
  text-align: right;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 1.8rem;
  padding-right: 2rem;
}
.order__more {
  text-align: center;
}

.userReview {
  transition: all 0.2s ease-in-out;
}
.userReview--editable {
  border-top: 3px solid var(--color-secondary);
  border-bottom: 3px solid var(--color-secondary);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.userReview--buttons {
  display: grid;
  grid-template-columns: 85% 15%;
  column-gap: 2rem;
}
@media only screen and (max-width: 900px) {
  .userReview--buttons {
    grid-template-columns: 1fr;
  }
}
.userReview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.userReview__icon {
  width: 2rem;
  height: 2rem;
  fill: var(--color-primary);
}
.userReview__rating {
  color: var(--color-primary);
  font-size: 2.4rem;
  font-weight: 700;
}
.userReview__date {
  font-size: 1.2rem;
  font-weight: 300;
}
.userReview__title {
  font-size: 1.6rem;
  font-weight: 700;
}
.userReview__title:hover {
  color: var(--color-secondary);
}
.userReview__author {
  font-weight: 400;
}
.userReview__text {
  display: block;
  font-size: 1.3rem;
  color: var(--color-grey);
  margin-top: 1rem;
  resize: vertical;
  width: 100%;
  font-family: inherit;
  line-height: 1.6;
}
.userReview textarea {
  padding: 1rem;
  font-family: inherit;
  font-size: 1.3rem;
  width: 100%;
  margin-top: 1rem;
  border-radius: 5px;
  border: 1px solid var(--color-grey);
  min-height: 15rem;
}
.userReview__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 900px) {
  .userReview__buttons {
    flex-direction: row;
    margin-top: 1.5rem;
  }
}
.userReview__buttons button {
  margin-bottom: 1rem;
}
@media only screen and (max-width: 900px) {
  .userReview__buttons button {
    margin-right: 1rem;
  }
}

.cart {
  display: grid;
  grid-template-columns: 65% 31%;
  grid-gap: 0 4%;
}
@media screen and (max-width: 900px) {
  .cart {
    grid-template-columns: 100%;
  }
}
.cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-grey-light);
}
.cart__title {
  font-size: 2.4rem;
  font-weight: 700;
}
.cart__quantity {
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--color-grey);
}
.cart__container {
  margin-top: 2.5rem;
  margin-bottom: 6rem;
}

.cart {
  display: grid;
  grid-template-columns: 65% 31%;
  grid-gap: 0 4%;
}
@media screen and (max-width: 900px) {
  .cart {
    grid-template-columns: 100%;
  }
}
.cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-grey-light);
}
.cart__title {
  font-size: 2.4rem;
  font-weight: 700;
}
.cart__quantity {
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--color-grey);
}
.cart__container {
  margin-top: 2.5rem;
  margin-bottom: 6rem;
}

.cart__item {
  display: grid;
  justify-items: center;
  grid-template-columns: 39% 19% 19% 19%;
  grid-gap: 0 1%;
  margin-top: 3.5rem;
}
@media screen and (max-width: 600px) {
  .cart__item {
    grid-template-columns: repeat(6, 1fr);
  }
}
.cart__item-description--product {
  justify-self: left;
}
.cart__item-header {
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-grey);
}
@media screen and (max-width: 600px) {
  .cart__item-header {
    display: none;
  }
}
.cart__item-product {
  display: flex;
  justify-self: left;
}
@media screen and (max-width: 600px) {
  .cart__item-product {
    grid-column: 1/7;
    margin-bottom: 2rem;
  }
}
.cart__item-cover {
  flex-shrink: 0;
  width: 30%;
}
.cart__item-image {
  width: 100%;
}
.cart__item-info {
  display: flex;
  flex-direction: column;
  margin-left: 2.5rem;
}
.cart__item-title {
  font-size: 1.4rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart__item-author {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart__item-delete {
  align-self: flex-start;
  margin-top: auto;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-secondary);
  transition: color 0.3s;
}
.cart__item-delete:hover {
  color: var(--color-warning);
}
.cart__item-quantity {
  display: flex;
  align-items: center;
  height: max-content;
}
@media screen and (max-width: 600px) {
  .cart__item-quantity {
    grid-column: 1/3;
    justify-self: start;
  }
}
.cart__item-button {
  width: 2.4rem;
  height: 2.4rem;
  font-weight: 400;
}
.cart__item-button-icon {
  width: 100%;
  height: 100%;
}
.cart__item-input {
  width: 4.5rem;
  height: 3.1rem;
  margin: 0 1rem;
  border: 1px solid var(--color-grey);
  text-align: center;
}
.cart__item-input::-webkit-outer-spin-button, .cart__item-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart__item-input {
  -moz-appearance: textfield;
}
@media screen and (max-width: 600px) {
  .cart__item-price {
    grid-column: 3/5;
    justify-self: center;
  }
}
.cart__item-price-old {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-grey);
  text-decoration: line-through;
  text-align: center;
}
.cart__item-price-new {
  font-size: 1.6rem;
  font-weight: 400;
}
@media screen and (max-width: 600px) {
  .cart__item-sum {
    grid-column: 5/7;
    justify-self: center;
  }
}
.cart__item-sum-price {
  font-size: 1.6rem;
  font-weight: 700;
}

.cart__service {
  position: sticky;
  top: 8rem;
  height: 40rem;
  padding: 4.5rem 2.5rem;
  background-color: var(--color-white-dark);
  font-size: 1.7rem;
}
@media screen and (max-width: 900px) {
  .cart__service {
    justify-self: center;
    width: 80%;
  }
}
@media screen and (max-width: 600px) {
  .cart__service {
    width: 90%;
  }
}
.cart__service-break {
  position: relative;
  margin-top: 1rem;
  font-size: 1.4rem;
  text-align: center;
}
.cart__service-break::before, .cart__service-break::after {
  position: absolute;
  top: calc(50% - 1px);
  content: "";
  width: 40%;
  height: 1px;
  background-color: var(--color-grey-lightest);
}
.cart__service-break::before {
  left: 0;
}
.cart__service-break::after {
  right: 0;
}
.cart__service-order {
  max-width: 30rem;
  margin: 0 auto;
}
.cart__service-back {
  display: block;
  width: max-content;
  margin: 0 auto;
  margin-top: 1rem;
  padding: 1rem 4rem;
  background-color: var(--color-grey-lightest);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.1rem;
}
.cart__service-summary {
  margin-top: 4.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-grey-lightest);
}
.cart__service-summary-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
}
.cart__service-summary-info {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  margin-left: 7rem;
}
.cart__service-summary-text {
  font-size: 1.2rem;
  font-weight: 400;
}
.cart__service-summary-text--sum {
  font-weight: 700;
}
.cart__service-summary-amount {
  font-size: 1.4rem;
  font-weight: 400;
}
.cart__service-summary-amount--promotion {
  color: var(--color-grey);
}
.cart__service-summary-amount--sum {
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: underline;
}

.cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.cart__empty-icon {
  width: 20.7rem;
  height: 18rem;
  fill: var(--color-secondary);
}
.cart__empty-title {
  margin-top: 3.5rem;
  font-size: 3.6rem;
  font-weight: 700;
}
.cart__empty-description {
  font-size: 2.4rem;
  font-weight: 400;
}
.cart__empty-button {
  margin-top: 3.5rem;
  color: var(--color-white);
}

.checkout {
  display: grid;
  grid-template-columns: 65% 31%;
  grid-gap: 0 4%;
}
@media screen and (max-width: 900px) {
  .checkout {
    grid-template-columns: 100%;
  }
}
.checkout__heading {
  padding-bottom: 1.5rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid var(--color-grey-light);
  font-size: 2.4rem;
  font-weight: 700;
}

.checkout__header {
  grid-column: span 2;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5.5rem;
}
@media screen and (max-width: 900px) {
  .checkout__header {
    grid-column: span 1;
  }
}
@media screen and (max-width: 600px) {
  .checkout__header {
    display: none;
  }
}
.checkout__header-item {
  width: 32%;
  padding-bottom: 0.5rem;
  border-bottom: 4px solid var(--color-primary);
  font-size: 1.8rem;
  font-weight: 400;
}
.checkout__header-item--payment {
  font-weight: 700;
  color: var(--color-primary);
}
.checkout__header-item--done {
  width: 33%;
  border-bottom: 4px solid var(--color-grey-light);
}

.checkout__shipment {
  margin-bottom: 4.5rem;
  font-size: 1.8rem;
}
.checkout__shipment-button {
  display: block;
  width: max-content;
  text-transform: uppercase;
}
.checkout__shipment-button:hover {
  text-decoration: underline;
}
.checkout__shipment-button--change {
  display: block;
  margin-top: 2rem;
  color: var(--color-secondary);
}
.checkout__shipment-button--manual {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-primary-dark);
}
.checkout__shipment-row {
  display: flex;
  align-items: center;
  margin-top: 2rem;
}
@media screen and (max-width: 600px) {
  .checkout__shipment-row {
    flex-direction: column;
    align-items: stretch;
  }
}
@media screen and (max-width: 600px) {
  .checkout__shipment-field {
    width: 100%;
  }
}
.checkout__shipment-field + .checkout__shipment-field {
  margin-left: 4rem;
}
@media screen and (max-width: 600px) {
  .checkout__shipment-field + .checkout__shipment-field {
    margin-left: 0;
    margin-top: 1.5rem;
  }
}
.checkout__shipment-label {
  font-size: 1.3rem;
  color: var(--color-grey);
  text-transform: uppercase;
}
.checkout__shipment-input {
  display: block;
  margin-top: 0.7rem;
  padding: 1rem;
  padding-left: 1.5rem;
  border: 1px solid var(--color-grey);
  border-radius: 0.5rem;
  background-color: var(--color-white-dark);
}
@media screen and (max-width: 600px) {
  .checkout__shipment-input {
    width: 100%;
  }
}

.checkout__delivery {
  margin-bottom: 4.5rem;
}
.checkout__delivery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.checkout__delivery-heading {
  font-size: 1.8rem;
  font-weight: 700;
}
.checkout__delivery-price {
  font-size: 1.4rem;
  font-weight: 300;
}
.checkout__delivery-input {
  display: flex;
  align-items: center;
  margin-left: 2rem;
  margin-bottom: 1rem;
}
.checkout__delivery-radio {
  width: 1.5rem;
  height: 1.5rem;
}
.checkout__delivery-radio:checked + .checkout__delivery-label {
  font-weight: 700;
  color: var(--color-primary-dark);
}
.checkout__delivery-label {
  margin-left: 1rem;
  font-size: 1.8rem;
}
.checkout__delivery-provider {
  font-size: 1.4rem;
  font-weight: 300;
}
.checkout__delivery-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkout__delivery-location {
  margin-top: 3.5rem;
}

.checkout__service {
  height: 32rem;
  padding: 4.5rem 2.5rem;
  background-color: var(--color-white-dark);
}
@media screen and (max-width: 900px) {
  .checkout__service {
    margin-top: 2rem;
    justify-self: center;
    width: 80%;
  }
}
@media screen and (max-width: 600px) {
  .checkout__service {
    width: 90%;
  }
}
.checkout__service-heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-secondary);
  align-items: center;
  text-transform: uppercase;
}
.checkout__service-prices {
  margin-top: 4.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-grey-lightest);
}
.checkout__service-cost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.checkout__service-title {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-grey);
}
.checkout__service-title--sum {
  color: var(--color-black);
}
.checkout__service-value {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-black);
}
.checkout__service-value--sum {
  font-size: 1.8rem;
  font-weight: 700;
}
.checkout__service-sum {
  margin-top: 1.5rem;
}
.checkout__service-button {
  margin-top: 2.5rem;
}

.checkout__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.checkout__result-icon {
  width: 20.7rem;
  height: 18rem;
  fill: var(--color-primary);
}
.checkout__result-title {
  margin-top: 3.5rem;
  font-size: 3.6rem;
  font-weight: 700;
}
.checkout__result-description {
  font-size: 2.4rem;
  font-weight: 400;
}
.checkout__result-button {
  margin-top: 3.5rem;
  color: var(--color-white);
}

/* components */
.blur {
  position: fixed;
  top: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 17, 32, 0.4);
  transition: all 0.4s ease-in-out;
}
.blur:hover {
  cursor: pointer;
}
.blur__is-visible {
  pointer-events: all;
  opacity: 1;
}

.categoryBox__header {
  display: block;
  text-align: left;
  text-transform: uppercase;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-grey);
  border-bottom: 1px solid var(--color-grey-light);
}
.categoryBox__list-item {
  width: 100%;
  display: block;
  border-bottom: 1px solid var(--color-white-dark);
}
.categoryBox__list-link {
  font-size: 1.2rem;
  display: block;
  padding: 1rem 0;
  color: var(--color-secondary);
}
.categoryBox__list-link:hover, .categoryBox__list-link:visited, .categoryBox__list-link:active {
  text-decoration: underline;
  color: var(--color-primary-dark);
}

.button {
  width: max-content;
  padding: 0.6rem 3rem;
  display: block;
  cursor: pointer;
  background-color: var(--color-primary);
  border-radius: 8px;
  border: 2px solid transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: inherit;
  text-align: center;
  transition: all 0.2s;
}
.button:disabled {
  background-color: var(--color-grey-light);
  color: var(--color-grey);
  border-color: var(--color-grey);
  cursor: initial;
}
.button:not(:disabled):hover {
  color: var(--color-grey);
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
}
.button--medium {
  padding: 0.8rem 3rem;
  font-size: 1.8rem;
  min-width: 18.7rem;
}
.button--parent-font-size {
  font-size: inherit;
}
.button--big {
  padding: 1.2rem 5rem;
  font-size: 2rem;
}
.button--full-parent {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.button--secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}
.button--secondary:hover {
  border: 2px solid var(--color-secondary);
}
.button--transparent {
  background-color: transparent;
  color: currentColor;
  border: 2px solid currentColor;
}
.button--danger {
  background-color: var(--color-warning);
  color: var(--color-white);
}

.spinner {
  margin: auto;
  inset: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}
.spinner--shown {
  display: flex;
}
.spinner:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}
.spinner:not(:required) {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.spinner:not(:required):after {
  content: "";
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  box-shadow: var(--color-primary) 1.5em 0 0 0, var(--color-primary) 1.1em 1.1em 0 0, var(--color-primary) 0 1.5em 0 0, var(--color-primary) -1.1em 1.1em 0 0, var(--color-primary) -1.5em 0 0 0, var(--color-primary) -1.1em -1.1em 0 0, var(--color-primary) 0 -1.5em 0 0, var(--color-primary) 1.1em -1.1em 0 0;
}

.form--login {
  --side-back-color: var(--color-primary);
  --side-color: var(--color-black);
  --side-border-radius: 15px 0 0 15px;
  grid-template-columns: 40% 60%;
  grid-template-areas: "side content";
}
.form--register {
  --side-back-color: var(--color-secondary);
  --side-color: var(--color-white);
  --side-border-radius: 0 15px 15px 0;
  grid-template-columns: 60% 40%;
  grid-template-areas: "content side";
}
.form .form__submit {
  margin-top: 5rem;
}
.form {
  width: min(96rem, 90vw);
  margin: 0 auto;
  display: grid;
  box-shadow: inset 0px 0px 4px -1px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
}
@media only screen and (max-width: 800px) {
  .form {
    grid-template-columns: 1fr;
    grid-template-areas: "side" "content";
  }
}
.form__side {
  grid-area: side;
  background: url("../assets/svg/form_decoration.svg") top left no-repeat, var(--side-back-color);
  background-size: cover;
  background-blend-mode: soft-light;
  color: var(--side-color);
  padding: 6rem;
  border-radius: var(--side-border-radius);
}
@media only screen and (max-width: 800px) {
  .form__side {
    border-radius: 15px 15px 0 0;
  }
}
.form__side-heading {
  font-size: 3.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
}
.form__side-paragraph {
  font-size: 1.8rem;
  text-align: center;
  font-weight: 300;
  margin-bottom: 6rem;
}
.form__side-button {
  margin: 0 auto;
}
.form__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6rem 10rem;
}
@media only screen and (max-width: 800px) {
  .form__content {
    padding: 5rem;
  }
}
.form__heading {
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 2rem;
  text-align: center;
}
.form__heading--highlight {
  font-weight: 700;
  color: var(--color-primary);
}
.form__google {
  font-size: 1.3rem;
  color: var(--color-google);
  padding: 0.5rem 3.5rem 0.5rem 1rem;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: url("../assets/img/google-logo.png") top 50% right 5% no-repeat;
  transition: all 0.2s ease-in;
  background-size: 8%;
}
.form__google:hover {
  background-color: var(--color-google);
  color: var(--color-white);
}
.form__form {
  width: 100%;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.form__text {
  font-size: 1.1rem;
  color: var(--color-grey);
  margin-bottom: 0.5rem;
}
.form__label {
  width: 100%;
}
.form__label--error input {
  border: 1px solid var(--color-warning);
  background-color: rgba(255, 0, 0, 0.15);
  color: var(--color-warning);
}
.form__warning {
  display: block;
  align-self: flex-start;
  font-size: 1.2rem;
  color: var(--color-warning);
  margin: 0.5rem 0 1rem 0;
  transition: all 0.2s ease-in-out;
  transform-origin: left;
  animation: fadeIn 0.2s linear both;
}
.form__input {
  width: inherit;
  padding: 1.3rem 2.5rem;
  margin-bottom: 1.5rem;
  background-color: var(--color-grey-lightest);
  border-radius: 5px;
  font-size: 1.6rem;
}
.form__input:focus {
  background-color: var(--color-white-dark);
}
.form__errorMessage {
  display: none;
}
.form__forgot {
  position: relative;
  margin: 4rem auto;
  font-size: 1.4rem;
  font-weight: 300;
}
.form__forgot:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 100%;
  height: 1px;
  background-color: var(--color-grey-light);
}

:root {
  --star-size: 2.5rem;
  --star-color: var(--color-grey-lightest);
  --star-background: var(--color-primary);
}

.stars-rating {
  --percent: calc(var(--rating) / 6 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;
}
.stars-rating::before {
  content: "★★★★★★";
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.books-carousel {
  display: grid;
}
.books-carousel--similar {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.books-carousel--default {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.books-carousel {
  grid-gap: 2rem 3rem;
}
.books-carousel__link {
  display: block;
  overflow: hidden;
  height: 31.3rem;
  background-color: var(--color-white-dark);
}
.books-carousel__warning {
  font-size: 1.8rem;
  color: var(--color-grey);
  padding: 1rem;
}
.books-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.3s;
}
.books-carousel__image:hover {
  transform: scale(1.2);
}
.books-carousel__title {
  --titleLineHeight: 2.2rem;
  line-height: var(--titleLineHeight);
  min-height: calc(var(--titleLineHeight) * 2);
  margin-top: 1rem;
  font-weight: 700;
  font-size: 1.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.books-carousel__author {
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--color-grey);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.books-carousel__category {
  margin-top: 1rem;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--color-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.books-carousel__rating {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}
.books-carousel__star {
  width: 2rem;
  fill: var(--color-primary);
}
.books-carousel__star--none {
  fill: var(--color-grey);
}
.books-carousel__rate {
  margin-left: 0.6rem;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--color-grey);
}
.books-carousel__price {
  margin-top: 1rem;
  font-size: 1.8rem;
  color: var(--color-grey);
}
.books-carousel__button--primary {
  --button-color: var(--color-secondary);
}
.books-carousel__button--secondary {
  --button-color: var(--color-primary-dark);
}
.books-carousel__button--disabled {
  --button-color: var(--color-grey);
}
.books-carousel__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--button-color);
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--color-white);
  transition: all 0.3s;
}
.books-carousel__button:hover:not(.books-carousel__button--disabled) {
  color: var(--button-color);
  background-color: var(--color-white);
  border: 1px solid var(--button-color);
}
.books-carousel__button__left {
  font-weight: 400;
  font-size: 1.3rem;
}
.books-carousel__button__right {
  font-weight: 700;
  font-size: 1.3rem;
}

.sorting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.3rem;
  font-weight: 700;
}
@media screen and (max-width: 900px) {
  .sorting-header--search {
    display: block;
  }
}
@media screen and (max-width: 900px) {
  .sorting-header--search .sorting-header__sort {
    margin-top: 1rem;
    justify-content: space-between;
  }
}

.sorting-header__sort {
  display: flex;
  align-items: center;
}
.sorting-header__sort-select {
  cursor: pointer;
  margin-left: 1rem;
  padding: 0.5rem;
  padding-right: 3rem;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  appearance: none;
}
.sorting-header__sort-select-wrapper {
  position: relative;
}
.sorting-header__sort-chevron {
  pointer-events: none;
  position: absolute;
  width: 1.45rem;
  height: 0.9rem;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.review-form {
  background-color: var(--color-white-dark);
  padding: 1.5rem;
  margin: 1rem 0;
  position: relative;
}
.review-form__heading {
  font-size: 1.6rem;
  font-weight: 700;
  display: block;
  margin-bottom: 1rem;
}
.review-form__heading--lowlight {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-grey);
}
.review-form__review {
  width: 90%;
  min-height: 14rem;
  display: block;
  margin: 2rem auto;
  border: 2px solid var(--color-grey-light);
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  font-family: inherit;
  font-size: 1.6rem;
}
@media screen and (max-width: 900px) {
  .review-form__review {
    width: 100%;
  }
}
.review-form__charCount {
  display: block;
  width: 100%;
  text-align: right;
  padding-right: 2rem;
  font-size: 1.4rem;
}
.review-form__charCount--warning {
  color: var(--color-warning);
}
.review-form__button {
  margin: 2rem;
  margin-left: auto;
}

.rating {
  --dir: right;
  --fill: var(--color-primary);
  --fillbg: var(--color-grey-light);
  --heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
  --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
  --stars: 5;
  --starsize: 3rem;
  --symbol: var(--star);
  --value: 0;
  --w: calc(var(--stars) * var(--starsize));
  --x: calc(100% * (var(--value) / var(--stars)));
  block-size: var(--starsize);
  inline-size: var(--w);
  position: relative;
  touch-action: manipulation;
  -webkit-appearance: none;
  cursor: pointer;
}

[dir=rtl] .rating {
  --dir: left;
}

.rating::-moz-range-track {
  background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
  block-size: 100%;
  mask: repeat left center/var(--starsize) var(--symbol);
}

.rating::-webkit-slider-runnable-track {
  background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
  block-size: 100%;
  mask: repeat left center/var(--starsize) var(--symbol);
  -webkit-mask: repeat left center/var(--starsize) var(--symbol);
}

.rating::-moz-range-thumb {
  height: var(--starsize);
  opacity: 0;
  width: var(--starsize);
}

.rating::-webkit-slider-thumb {
  height: var(--starsize);
  opacity: 0;
  width: var(--starsize);
  -webkit-appearance: none;
}

.rating, .rating-label {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.rating-label {
  margin-block-end: 1rem;
}

.filter {
  cursor: pointer;
  overflow-y: hidden;
  border: 2px solid var(--color-primary);
  border-radius: 1.5rem;
}
.filter[open] .filter__icon {
  transform: rotate(0);
}
.filter__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  padding: 1.5rem 1rem 1.5rem 1.5rem;
}
.filter__title {
  font-size: 1.6rem;
  font-weight: 400;
}
.filter__icon {
  transform: rotate(-90deg);
  width: 2.4rem;
  height: 1.8rem;
  transition: transform 0.2s ease-in-out;
}
.filter__button {
  margin-top: 2.2rem;
}
.filter__reset {
  margin: 0.8rem auto;
}

.filter__search {
  margin-top: 3rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.filter__search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 1.7rem;
  padding-right: 0;
  border-radius: 0.5rem;
  background-color: var(--color-grey-lightest);
}

.filter__results {
  overflow-y: scroll;
  max-height: 45rem;
  margin: 3rem 1rem 1.5rem 1.5rem;
}
.filter__results::-webkit-scrollbar {
  width: 0.5em;
  background-color: var(--color-white-dark);
}
.filter__results::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 3px;
}
.filter__results::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}
.filter__results-item {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}
.filter__results-checkbox {
  cursor: pointer;
}
@media screen and (max-width: 900px) {
  .filter__results-checkbox {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.filter__results-checkbox:checked + .filter__results-label {
  color: var(--color-secondary);
}
.filter__results-label {
  cursor: pointer;
  margin-left: 1rem;
  font-size: 1.2rem;
  font-weight: 400;
}
@media screen and (max-width: 900px) {
  .filter__results-label {
    font-size: 1.6rem;
  }
}

.filter__range {
  display: flex;
  align-items: center;
  margin: 1.5rem;
}
.filter__range-partition {
  width: 0.5rem;
  height: 1px;
  margin: 0 1rem;
  background-color: var(--color-black);
}
.filter__range-input {
  width: 42%;
  background: var(--color-white-dark);
  border: 1px solid var(--color-grey);
  font-family: inherit;
  border-radius: 0.5rem;
  padding: 0.5rem;
  padding-right: 0;
}

.pagination {
  width: 100%;
  text-align: center;
}
.pagination__item {
  padding: 0.5rem 1rem;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--color-grey);
  transition: color 0.3s;
}
.pagination__item:hover:not(.pagination__item--active):not(.pagination__item--text) {
  color: var(--color-primary-dark);
}
.pagination__item--arrow {
  padding: 0.5rem;
}
.pagination__item--active {
  font-weight: 700;
  color: var(--color-black);
}
.pagination__item--text {
  padding: 0.5rem;
  font-size: 1.4rem;
}
.pagination__item:hover .pagination__arrow {
  fill: var(--color-primary-dark);
}
.pagination__arrow {
  width: 0.6rem;
  height: 0.9rem;
  transition: fill 0.3s;
}
.pagination__arrow--left {
  transform: rotate(180deg);
}

.small-input__label {
  display: block;
  width: 100%;
  font-size: 1.3rem;
  color: var(--color-grey);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.small-input__input {
  width: 100%;
  padding: 1rem 1.1rem;
  font-size: 1.3rem;
  border: 1px solid var(--color-grey);
  border-radius: 5px;
  background-color: var(--color-white);
  font-family: inherit;
}
.small-input--error .small-input__errorMessage {
  display: block;
}
.small-input--error input {
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.small-input__errorMessage {
  color: var(--color-warning);
  margin-bottom: 0.3rem;
  display: none;
}

.small-form {
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21.5rem, 1fr));
  column-gap: 4rem;
  row-gap: 2rem;
}

.book-item__link {
  display: block;
  overflow: hidden;
  height: 30rem;
  background-color: var(--color-white-dark);
}
.book-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: center;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.book-item__image:hover {
  transform: scale(1.2);
}
.book-item__rating {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}
.book-item__star--disabled {
  fill: var(--color-grey);
}
.book-item__star {
  width: 1.4rem;
  height: 1.3rem;
  fill: var(--color-primary);
}
.book-item__rate {
  margin-left: 0.5rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-grey);
}
.book-item__price {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}
.book-item__price-current {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.book-item__price-old {
  margin-left: 1.5rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-grey);
  text-decoration: line-through;
}
.book-item__title {
  --titleLineHeight: 2rem;
  line-height: var(--titleLineHeight);
  min-height: calc(var(--titleLineHeight) * 2);
  margin-top: 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-item__author {
  font-size: 1.1rem;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dropdown {
  position: relative;
}
.dropdown__figure {
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  display: block;
  border-radius: 50%;
}
.dropdown__profile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dropdown:hover .dropdown__content {
  display: flex;
}
.dropdown__content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  width: min(20rem, 90vh);
  padding: 1.7rem 1.3rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--color-white);
  border-radius: 5px;
  box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.1);
}
.dropdown__item {
  border-radius: inherit;
  width: 100%;
  background-color: var(--color-white-dark);
  cursor: pointer;
}
.dropdown__item:not(:last-child) {
  margin-bottom: 0.9rem;
}
.dropdown__item:last-child {
  margin-top: 1rem;
}
.dropdown__item:nth-child(1) .icon {
  fill: var(--color-secondary-dark);
}
.dropdown__item:nth-child(2) .icon {
  fill: var(--color-secondary);
}
.dropdown__item:nth-child(3) .icon {
  fill: var(--color-primary);
}
.dropdown__item:hover span, .dropdown__item--variant span {
  font-weight: 700 !important;
}
.dropdown__item:hover .icon, .dropdown__item--variant .icon {
  fill: var(--color-black);
}
.dropdown__item:hover, .dropdown__item--variant {
  background-color: var(--color-primary);
}
.dropdown__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 1rem;
  font-family: inherit;
  border-radius: inherit;
}
.dropdown__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.dropdown__name {
  font-size: 1.2rem;
  margin-left: 0.5rem;
}
.dropdown__form {
  font-family: inherit;
  border-radius: inherit;
}