/* Global */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: "Clash Light";
    src: url(../fonts/ClashGrotesk-Light.otf);
    font-weight: 300;
}
@font-face {
    font-family: "Clash Regular";
    src: url(../fonts/ClashGrotesk-Regular.otf);
    font-weight: 400;
}
@font-face {
    font-family: "Clash Medium";
    src: url(../fonts/ClashGrotesk-Medium.otf);
    font-weight: 500;
}

body {
    color: #fff;
    font-family: "Clash Regular";
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

ul, ol {
    list-style-type: none;
}

:root {
    --accent-color: #9bf447;
    --orange-color: #2be4f1;
    --grey-color: #585858;
    --black-color: #2a2b2c;
    --global-margin: 24px;
}

@media (max-width: 575px) {
    :root {
        --global-margin: 10px;
    }
}

/* Global end */

/* Header */

.header {
    background-color: var(--black-color);
    margin: var(--global-margin);
    padding: var(--global-margin);
    border-radius: 20px;
}

.header__logo img {
    max-width: 166px;
}

.header__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

.header__list {
    display: flex;
    justify-content: center;
    gap: 28px;
}

.header__user-navigation {
    display: flex;
    align-items: center;
    justify-content: end;
}

.header__icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-right: 40px;
}

.header__login {
    border-radius: 16px;
    background-color: var(--accent-color);
    padding: 16px 28px;
    color: rgba(0, 0, 0, 0.87);
    text-transform: uppercase;
    font-family: "Clash Medium";
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.024px;
    transition: all 0.2s ease;
}

.header__login:hover {
    background-color: var(--orange-color);
}

.header__login:active {
    background-color: var(--grey-color);
    color: var(--accent-color);
}

.header__list-link {
    color: #fff;
    transition: all 0.2s ease;
}

.header__list-link:hover {
    color: var(--accent-color);
}

.header__svg {
    cursor: pointer;
}

.header__svg path {
    stroke: #fff;
    transition: all 0.2s ease;
}

.header__svg:hover path {
    stroke: var(--accent-color);
}

@media (max-width: 1456px) {
    .header__wrapper {
        display: flex;
        justify-content: space-between;
    }
    .header__logo, .header__nav, .header__user-navigation {
        flex-grow: 1;
    }
}

@media (max-width: 1010px) {
    .header__login, .header__nav, .header__svg:nth-child(1), .header__svg:nth-child(2) {
        display: none;
    }
}

/* Header end */

/* Promo */

.promo__title {
    margin: var(--global-margin);
    margin-bottom: 32px;
    margin-top: 32px;
}

.promo__wrapper {
    display: flex;
    gap: 8px;
    align-items: stretch;
    justify-content: center;
    margin: var(--global-margin);
}

.promo__item {
    width: 50%;
    border-radius: 30px;
    overflow: hidden;
}

.promo__item:first-child {
    background-color: var(--black-color);
    padding: var(--global-margin);
    background-size: 400px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.2s ease;
}


.hover-item {
    background-color: var(--black-color);
    transition: all 0.2s ease;
}

.promo__item:first-child .promo__search {
    position: absolute;
    right: 0;
    bottom: 0;
}

.promo__search path {
    min-width: 400px;
    min-height: 400px;

}

.promo__subtitle {
    font-family: "Clash Medium";
    font-size:  52px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.08px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.promo__text {
    max-width: 440px;
    font-size: 22px;
    font-family: "Clash Light";
    font-weight: 300;
    line-height: 1.4;
}

.promo__search {
    width: 400px;
    height: 400px;
}

.promo__item:last-child {
    position: relative;
    background-image: url(../img/promo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease;
    height: 560px;
    max-height: 100%;
}

.promo__item:last-child:hover {
    background-image: url(../img/promo2.png);
}
.promo__item:last-child::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 20px;
    width: 82px;
    height: 82px;
    background-image: url(../img/Lable.png);
    animation: rotate 30s infinite linear;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}


.promo__button {
    padding: 16px 28px;
    font-family: "Clash Medium";
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    width: fit-content;
    border-radius: 16px;
    margin-top: auto;
    background-color: var(--black-color);
    transition: all 0.2s ease;
}

@media (max-width: 1600px) {
    .promo__item:last-child {
        height: auto;
        min-height: 350px;
    }
    .promo__text {
        font-size: 18px;
    }
    .promo__subtitle {
        font-size: 32px;
    }
    .promo__search {
        width: 259px;
        height: 299px;
    }
}

@media (max-width: 1340px) {
    .promo__search {
        display: none;
    }
}
@media (max-width: 900px) {
    .promo__wrapper {
        flex-direction: column;
    }
    .promo__item {
        width: 100%;
    }
    .promo__text {
        margin-bottom: 20px;
    }
}

/* Promo end */

/* Best */

.best {
    background-color: var(--black-color);
    padding: var(--global-margin);
    padding-top: 44px;
    padding-bottom: 44px;
}

.best__title {
    font-size: 32px;
    font-weight: 500;
    font-family: "Clash Medium";
    margin-bottom: 32px;
}

.best__img {
    max-width: 120px;
    border-radius: 10px;
}

.best__item {
    background-color: #fff;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    gap: 8px;
}

.best__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    color: var(--black-color);
    gap: 8px;
}

.best__name {
    font-weight: 700;
    margin-bottom: 24px;
    margin-right: 20px;
}

.best__comments {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--black-color);
    width: fit-content;
    padding: 8px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.best__rating {
    display: flex;
    align-items: center;
    gap: 4px; 
    border: 1px solid var(--black-color);
    width: fit-content;
    padding: 8px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
    margin-bottom: 24px;
}

.best__price {
    font-family: "Clash Medium";
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
}

.old-price {
    color: rgba(0, 0, 0, 0.38);
    text-decoration: line-through;
}

.best__item--more {
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-family: "Clash Medium";
    font-weight: 500; */
    font-size: 42px;
    text-transform: uppercase;
}

.best__item {
    position: relative;
}

.best__favourite {
    position: absolute;
    background-color: var(--black-color);
    right: 16px;
    top: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.1s ease;
    cursor: pointer;
}

.best__favourite svg {
    transition: all 0.1s ease;
    fill: transparent;
}
.best__favourite:hover svg path {
    transition: all 0.1s ease;
}

.best__favourite:hover svg, .best__favourite:hover svg path {
    fill: var(--accent-color);
    color: var(--accent-color);
    stroke: var(--accent-color);
}

@media (max-width: 1030px) {
    .best__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .best__item--more {
        display: none;
    }
}
@media (max-width: 700px) {
    .best__list {
        display: flex;
        flex-direction: column;
    }
}

/* Best end */

/* Next */

.next__wrapper {
    margin: var(--global-margin);
    padding: calc(var(--global-margin) + 20px);
    background-color: var(--black-color);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-image: url(../img/question.png);
    background-repeat: no-repeat;
    background-position: 70%;
    min-height: 224px;
    border-radius: 20px;
    cursor: pointer;
}

.next__arrow {
    background-color: var(--accent-color);
    max-height: 176px;
    max-width: 176px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

.next__text {
    max-width: 900px;
}

.next__title {
    margin-bottom: 24px;
    font-family: "Clash Light";
    line-height: 40px;
    letter-spacing: 0.08px;
    font-size: 44px;
    text-transform: uppercase;
}

.next__subtitle {
    font-size: 20px;
    line-height: 1.4;
}

.next__wrapper, .next__arrow, .next__arrow svg path, .next__arrow svg {
    transition: all 0.2s ease;
}

.next__wrapper:hover {
    background-color: var(--orange-color);
}
.next__wrapper:hover .next__arrow {
    background-color: var(--black-color);
}
.next__wrapper:hover .next__arrow svg path {
    fill: var(--orange-color);
}
.next__wrapper:hover .next__arrow svg  {
    transform: rotate(-45deg);
}

@media (max-width: 980px) {
    .next__wrapper {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 40px;
        background-image: none;
    }
    .next__arrow {
        width: 176px;
        height: 176px;
    }
}

@media (max-width: 575px) {
}

/* Next end */

/* Authors */

.authors {
    background-color: var(--black-color);
}

.authors__wrapper {
    margin: var(--global-margin);
    padding: var(--global-margin);
}

.authors__title {
    font-family: "Clash Medium";
    font-size: 32px;
    margin-bottom: 34px;
}

.authors__item {
    display: flex;
    background-color: #fff;
    border-radius: 20px;
    color: var(--black-color);
    position: relative;
    gap: 8px;
    overflow: hidden;
}

.authors__img {
    display: block;
    margin: 0;
    padding: 0;
    height: 100%;
}

.authors__img img {
    height: 100%;
}

.authors__favourite {
    position: absolute;
    background-color: var(--black-color);
    right: 16px;
    top: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.1s ease;
    cursor: pointer;
}

.authors__favourite svg {
    transition: all 0.1s ease;
    fill: transparent;
}
.authors__favourite:hover svg path {
    transition: all 0.1s ease;
}

.authors__favourite:hover svg, .authors__favourite:hover svg path {
    fill: var(--accent-color);
    color: var(--accent-color);
    stroke: var(--accent-color);
}

.authors__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.authors__books {
    margin: 16px 0;
}

.authors__name {
    margin-top: 26px;
    font-size: 24px;
}
.authors__item--more {
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-family: "Clash Medium";
    font-weight: 500; */
    font-size: 42px;
    text-transform: uppercase;
}

@media (max-width: 1300px) {
    .authors__list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1000px) {
    .authors__list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .authors__list {
        display: flex;
        flex-direction: column;
    }
    .authors__img img {
        width: 100%;
        height: 100%;
        display: block;
    }
    .authors__item--more {
        display: none;
    }
}

@media (max-width: 575px) {
    .authors__name {
        font-size: 20px;
    }
    .authors__books {
        font-size: 14px;
    }
    .authors__item {
        padding-right: 10px;
    }
}

/* Authors end */

/* Cta */

.cta__wrapper {
    display: flex;
    gap: 8px;
    margin: var(--global-margin);
}

.cta__item {
    min-height: 195px;
    background-color: var(--black-color);
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    font-size: 32px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

.cta__item:first-child {
    background-image: url(../img/precent.png);
    background-repeat: no-repeat;
}
.cta__item:last-child {
    background-image: url(../img/plus.png);
    background-repeat: no-repeat;
    background-position: 200px 20px;
}

@media (max-width: 768px) {
    .cta__wrapper {
        flex-direction: column;
    }
}

/* Cta end */

/* Footer  */

.footer {
    background-color: var(--black-color);
}

.footer__top-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--global-margin);
}

.footer__logo {
    max-width: 200px;
}

.footer__icons {
    display: flex;
    gap: 16px;
}

.footer__bottom-line {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    background-color: #000;
    padding: var(--global-margin);
}

.footer__links, .footer__info {
    display: flex;
    gap: 16px;
}
.footer__links a {
    color: #fff;
    transition: all 0.2s ease;
}
.footer__links a:hover {
    color: var(--accent-color);
}
.footer__icons svg path {
    transition: all 0.2s ease;
    fill: #fff;
}
.footer__icons svg:hover path {
    fill: var(--accent-color);
}

@media (max-width: 768px) {
    .footer__bottom-line, .footer__links, .footer__info {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

@media (max-width: 350px) {
    .footer__info {
        font-size: 14px;
    }
}
/* Footer end */

/* Hidden Buttons */

.promo__item:last-child:hover .hidden-buttons {
    transform: translateY(0);
}

.hidden-buttons {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    transform: translateY(200%);
}

.hidden-buttons a:first-child {
    background-color: var(--black-color);
    padding: 19px 28px;
    border-radius: 20px;
    font-family: "Clash Medium";
    text-transform: uppercase;
    color: var(--accent-color);
    transform: translateY(-3px);
}


.hover-item {
    background-color: var(--black-color);
}


.hover-item:hover {
    background-color: var(--orange-color);
    transition: all 0.2s ease;
}

.best__item {
    overflow: hidden;
}

.best__item .hidden-buttons {
    left: 145px;
    bottom: 16px;
}

.best__item:hover .hidden-buttons {
    transform: translateY(0);
}

.best__comments, .best__rating, .best__price {
    transition: all 0.2s ease;
}

.best__item:hover .best__comments, .best__item:hover .best__rating {
    opacity: 0;
}

.best__item:hover .best__price {
    transform: translateY(-300%);
}

.active .favourite path {
    fill: var(--accent-color);
    color: var(--accent-color);
    stroke: var(--accent-color);
}

.authors__item, .best__item {
    transition: all 0.2s ease;
}
.authors__item.active, .best__item.active {
    background-color: #F7EDC8;
}
.authors__item:hover, .best__item:hover {
    background-color: #F7EDC8;
}

@media (max-width: 575px) {
    .hidden-buttons a:first-child {
        padding: 19px 9px;
    }
}
/* Hidden Buttons end */

/* Cart */

.cart {
    position: fixed;
    left: 50%;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    width: 90%;
    height: 90%;
    margin: var(--global-margin);
    padding: var(--global-margin);
    background-color: var(--black-color);
    border-radius: 20px;
    border: 1px solid var(--accent-color);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease-in;
}

.cart.active {
    opacity: 1;
    pointer-events: all;
}

.cart__bread-item {
    font-size: 24px;
    line-height: 1;
}

.cart__back {
    position: relative;
    padding: 0 40px;
    width: fit-content;
    transition: all 0.2s ease;
    cursor: pointer;
}

.cart__back::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translateY(50%);
    transition: all 0.2s ease;
}

.cart__back:hover, .cart__back:hover::before {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.cart__back::after {
    content: "";
    position: absolute;
    right: 19px;
    top: 0;
    width: 2px;
    height: 22px;
    border-right: 2px solid #fff;
}

.cart__bread {
    display: flex;
    align-items: center;
    margin-bottom: 52px;
}

.cart__bread-item:last-child {
    color: var(--accent-color);
}

.cart__form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
}

.cart__legend {
    font-size: 32px;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.cart__legend span {
    font-size: 14px;
    color: var(--grey-color);
}

.cart__input {
    padding: 16px;
    border: none;
    outline: none;
    margin-bottom: 20px;
    border-radius: 16px;
}

.cart__button {
    padding: 16px 28px;
    border-radius: 16px;
    background-color: var(--accent-color);
    transition: all 0.2s ease;
    border: none;
    outline: none;
    color: var(--black-color);
    text-transform: uppercase;
    font-size: 24px;
    cursor: pointer;
}

.cart__button:hover {
    background-color: var(--orange-color);
}

.cart__content {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.cart__summary {
    background-color: #000;
    padding: 24px;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
}

.cart__summary-title {
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cart__item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 16px;
}
.cart__item span:first-child {
    text-align: left;
}
.cart__item span:nth-child(2) {
    text-align: center;
}
.cart__item span:last-child {
    text-align: right;
}

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

.cart__item--technical:first-child {
    margin-bottom: 20px;
}
.cart__item--technical:last-child {
    margin-bottom: 0;
}

.cart__summary {
    margin-bottom: 20px;
}

.promocode {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.promocode input {
    display: block;
    flex-grow: 1;
    padding: 16px;
    border-radius: 16px;
    border: none;
    outline: none;
}

.promocode button {
    padding: 16px 28px;
    border-radius: 16px;
    border: none;
    outline: none;
    background-color: var(--grey-color);
    text-transform: uppercase;
    transition: all 0.2s ease;
    font-weight: 600;
}

.middle {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.quantity-minus {
    transition: all 0.2s ease;
    opacity: 0;
    cursor: pointer;
    padding: 0 10px;
}
.quantity-plus {
    transition: all 0.2s ease;
    opacity: 0;
    cursor: pointer;
    padding: 0 10px;
}

.middle:hover .quantity-minus, .middle:hover .quantity-plus {
    opacity: 1;
}

.cart__summary *::selection {
    background: transparent;
}
.cart__summary *::-moz-selection {
    background: transparent;
}

.cart__item {
    transition: all 0.2s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
}

.cart__item.active {
    max-height: 300px;
    opacity: 1;
    margin-bottom: 16px;
}

.buy-now {
    cursor: pointer;
}

.cart {
    overflow: auto;
}
html *::-webkit-scrollbar {
    width: 5px;
    background-color: var(--black-color);
}

html *::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--accent-color);
}
.cart::-webkit-scrollbar {
    width: 0;
}


@media (max-width: 1300px) {
    .cart__content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 470px) {
    .cart__summary {
        padding: 10px;
    }
    .cart__bread {
        margin-bottom: 20px;
    }
    .cart__legend {
        font-size: 24px;
    }
    .cart__list {
        max-width: 100%;
    }
    .promocode input {
        padding-left: 10px;
        max-width: 150px;
        padding-right: 10px;
    }
}
/* Cart end */

/* Other */

.other p, h1, h2 {
    margin-bottom: 20px;
}

.other h1 {
    text-transform: uppercase;
}

.other p {
    font-size: 18px;
}

.about-wrapper {
    margin: 0 auto;
    text-align: center;
    padding: var(--global-margin);
    max-width: 1400px;
    background-color: var(--black-color);
    border-radius: 20px;
    margin-bottom: 40px;
}

/* Other end */

/* Disc */

.disc {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    background-color: var(--black-color);
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    overflow: auto;
    min-width: 300px;
}

.disc.active {
    opacity: 1;
    pointer-events: all;
}

.disc__wrapper {
    position: relative;
}
.disc p {
    margin-bottom: 20px;
}

.disc-close {
    position: absolute;
    left: -10px;
    top: -25px;
    cursor: pointer;
}
.disc::-webkit-scrollbar {
    width: 0;
}

@media (max-width: 768px) {
    .disc {
        font-size: 14px;
    }
}
/* Disc end */

/* Gift */

.gift {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    background-color: var(--black-color);
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    overflow: auto;
    min-width: 300px;
}

.gift.active {
    opacity: 1;
    pointer-events: all;
}

.gift__wrapper {
    position: relative;
}
.gift p {
    margin-bottom: 20px;
}

.gift-close {
    position: absolute;
    left: -10px;
    top: -25px;
    cursor: pointer;
}
.gift::-webkit-scrollbar {
    width: 0;
}
/* Gift end */