diff --git a/index.c8597b5a.css.map b/index.c8597b5a.css.map deleted file mode 100644 index 10bd27a..0000000 --- a/index.c8597b5a.css.map +++ /dev/null @@ -1 +0,0 @@ -{"mappings":"gG,uC,+D,2L,0B,sF,4B,iH,oB,8E,kB,c,yC,mG,kC,iC,wC,uC,wC,+C,8C,iC,iB,iC,wC,wC,+D,oD,oE,0BGEA,2XAmBA,6BAUA,2CAMA,6CAMA,mBAIA,0CAKA,sBAQA,kJAQA,yFAME,oCANF,iEAYE,qCAZF,kEAmBA,2BAiBA,mKASA,+KCjHA,oGAOA,uCAGA,sCAIA,4BAGA,wDAMA,2DAMA,kDAKA,oIASA,8HAQA,kIASA,gDAKA,8MAWA,iIASA,wDAMA,0EAOA,kDAIA,yEAUA,uEAWA,8NAkBA,mEAQA,oCACE,qEAMA,iEAKA,0CAKA,wDAMA,2EAQA,kDAIA,+CAKA,iDAKA,8FAQA,qCAQF,8CClNA,0KAUA,2BAIA,8JAUA,+GAQA,2FAOA,wKAUA,gHAOA,4BAIA,kDAKA,+FAOA,6EAQA,wEAOA,iCAIA,0LAgBA,sKAYA,gFAQA,qEAGA,oCACE,iDAOA,iJAgBA,oFAOA,oDAKA,mCAIA,mDAMA,iUAkBA,gDAIA,yBAGA,4BAIA,gEAMA,wPAGE,sHApFJ,oCA0FE,6FAQA,6EAMA,2DAKA,yEAMA,2MAeA,uHAUA,kCAIA,yGASA,yFAOA,8EAMA,0JASA,+KAWA,iEAOF,gDAIA,oCACE,qCAIA,+BAGA,wCAKA,iCAMF,qCACE,gCC3VF,qBAMA,8EAOA,kCAKA,qIAAA,iUAAA,uOAUA,wEAAA,6UAAA,mPAOA,wOAeA,8CAIA,oIASA,2DAgBA,mJAWA,ySAmBA,oCACE,gCAKA,6BAIA,8DAMA,wDAIA,wDAIA,uGAUF,qCACE,oBAIA,6BAIA,oCAGA,iDC3JF,kEAKE,oCALF,sDAUE,qCAVF,2CAgBA,iCAEE,oCAFF,mCAKE,qCALF,+BAUA,oHAME,oCANF,qHAeA,kCAIA,qEAMA,gKAUA,iEAKE,oCALF,yCAWA,mPAeA,0BAIA,wCAKA,sBAIA,iJAUA,8HASA,mDAIE,oCAJF,wBAQE,qCARF,wBAaA,oCACE,iDAMF,oCACE,iDAKD,qCACC,kDClJF,2EAOA,iDAGA,4GAMA,uEAOA,oFAOA,yDAKA,wGAMA,oCACE,oCAIA,0DAGA,6DAOF,qCACE,oCAIA,+BAGA,4DChEF,oPAsBA,qGAQA,uSAmBA,2PAcA,uCAKA,0CAkBA,0DAMA,oHASA,+EAOA,0DAIA,+FAKA,kGAKA,0GAQA,sBAIA,qFAOA,iJAUA,2GAQA,sDAMA,yEAOA,gCAGA,uFAIA,4FAIA,2FAGA,sNAcA,oCAKA,wCAKA,uCAKA,qGAMA,kDAIA,uDAIA,uIAUA,oCACE,2DAMA,qFAOA,sFAMA,qCAGA,kCAIA,+CAKA,kEAMA,kDAMA,qDAMA,iEAMA,uGASF,qCACE,2CCjTF,iEAME,oCANF,kDAYE,qCAZF,qDCAA,yOAaE,qCAbF,+BAkBA,yGAQA,yDAKA,8FAOA,8JASA,mEAMA,2CAIA,mDAKE,yBALF,sBAUA,4BAIA,qDCvEA,qPAcA,0QAgBA,iGAMA,4HAQA,qEAMA,2DAKA,4HAOA,yGAOA,8HAWA,2EAKA,iFAKA,6EAoBA,oCACE,oBAGA,oDAKA,wDAMA,qCAKF,qCACE,oBAGA,mCAGA,0BAGA,yDAMA,qCClJF,4BAGA,kDACE,2BAKF,+LAaA,6CAMA,qCAIA","sources":["index.c8597b5a.css","node_modules/modern-normalize/modern-normalize.css","src/sass/index.scss","src/sass/_common.scss","src/sass/_shopping-list.scss","src/sass/_header.scss","src/sass/_books.scss","src/sass/_top-books.scss","src/sass/_categories.scss","src/sass/_pop-up-book.scss","src/sass/_sidebar.scss","src/sass/_support.scss","src/sass/_footer.scss","src/sass/_scroll-up.scss"],"sourcesContent":["/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n*, :before, :after {\n box-sizing: border-box;\n}\n\nhtml {\n tab-size: 4;\n -webkit-text-size-adjust: 100%;\n line-height: 1.15;\n}\n\nbody {\n margin: 0;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n}\n\nhr {\n color: inherit;\n height: 0;\n}\n\nabbr[title] {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\nb, strong {\n font-weight: bolder;\n}\n\ncode, kbd, samp, pre {\n font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n font-size: 1em;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n}\n\nsub {\n bottom: -.25em;\n}\n\nsup {\n top: -.5em;\n}\n\ntable {\n text-indent: 0;\n border-color: inherit;\n}\n\nbutton, input, optgroup, select, textarea {\n margin: 0;\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n}\n\nbutton, select {\n text-transform: none;\n}\n\nbutton {\n -webkit-appearance: button;\n}\n\n[type=\"button\"] {\n -webkit-appearance: button;\n}\n\n[type=\"reset\"] {\n -webkit-appearance: button;\n}\n\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\nlegend {\n padding: 0;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\n::-webkit-inner-spin-button {\n height: auto;\n}\n\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n}\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\nsummary {\n display: list-item;\n}\n\n:root {\n --body: #f6f6f6;\n --header: #fff;\n --sidebar-categories: rgba(17, 17, 17, .6);\n --sidebar-categories-current: #4f2ee8;\n --text-main: #111;\n --scroll: #e0e0e0;\n --color-lite-dark-theme: #202024;\n --text-second: #b4afaf;\n --color-accent: #4f2ee8;\n --color-links: #eac645;\n --color-gradient: radial-gradient(189.32% 190.93% at 59.76% -23.42%, #4f2ee8 18.03%, #fff 100%);\n --timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\np, h1, h2, h3, h4, h5, h6 {\n margin: 0;\n}\n\nul {\n margin: 0;\n padding-left: 0;\n list-style: none;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n display: block;\n}\n\nli {\n list-style: none;\n}\n\na {\n color: currentColor;\n text-decoration: none;\n}\n\nbutton {\n cursor: pointer;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n color: var(--text-main);\n background-color: var(--body);\n font-family: DM Sans, Montserrat, Roboto, Open Sans, Raleway, Arial, sans-serif;\n font-weight: 700;\n}\n\n.container {\n width: 100%;\n max-width: 375px;\n margin: 0 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n\n@media screen and (min-width: 768px) {\n .container {\n max-width: 768px;\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .container {\n max-width: 1440px;\n padding-left: 20px;\n padding-right: 20px;\n }\n}\n\n.no-scroll {\n overflow: hidden;\n}\n\n.visually-hidden {\n white-space: nowrap;\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n border: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n[data-page-theme=\"light\"] {\n --body: #f6f6f6;\n --header: #fff;\n --sidebar-categories: rgba(17, 17, 17, .6);\n --sidebar-categories-current: #4f2ee8;\n --text-main: #111;\n --scroll: #e0e0e0;\n}\n\n[data-page-theme=\"dark\"] {\n --scroll: rgba(17, 17, 17, .6);\n --body: #202024;\n --header: #111;\n --sidebar-categories: rgba(255, 255, 255, .6);\n --sidebar-categories-current: #eac645;\n --text-main: #fff;\n}\n\n.sh-title {\n letter-spacing: -1.28px;\n margin-bottom: 40px;\n font-size: 32px;\n font-weight: 700;\n line-height: 1.19;\n}\n\n.shopping-title {\n color: var(--text-main);\n}\n\n.title-span {\n color: var(--color-accent);\n}\n\n.empty-sh-list {\n display: none;\n}\n\n.book-column-img {\n width: 265px;\n height: 198px;\n margin: 0 auto;\n}\n\n.shopping-list {\n flex-direction: column;\n gap: 20px;\n display: flex;\n}\n\n.sh-list-section img {\n max-width: 100%;\n display: block;\n}\n\n.shopping-list-item {\n background-color: var(--header);\n border: 2px solid rgba(79, 46, 232, .4);\n border-radius: 16px;\n padding: 14px;\n display: flex;\n}\n\n.sh-book-title {\n color: var(--text-main);\n letter-spacing: -.64px;\n margin-bottom: 4px;\n font-size: 16px;\n font-weight: 700;\n line-height: 1.13;\n}\n\n.sh-book-category {\n color: var(--text-second);\n letter-spacing: .36px;\n margin-bottom: 8px;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.17;\n}\n\n.div-text-container {\n height: 68px;\n overflow: hidden;\n}\n\n.sh-book-description {\n color: var(--text-main);\n letter-spacing: -.56px;\n -webkit-line-clamp: 4;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.23;\n display: -webkit-box;\n}\n\n.sh-book-author {\n color: var(--text-second);\n letter-spacing: -.48px;\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.17;\n}\n\n.shopping-links {\n align-items: center;\n gap: 8px;\n display: flex;\n}\n\n.sh-book-img {\n border-radius: 8px;\n width: 100px;\n height: 142px;\n margin-right: 14px;\n}\n\n.sh-soc-item .amazon-store {\n width: 32px;\n height: 11px;\n}\n\n.sh-soc-item .book-shop, .sh-soc-link .apple-store {\n width: 16px;\n height: 16px;\n}\n\n.sh-wrap {\n flex-direction: column;\n gap: 14px;\n display: flex;\n position: relative;\n}\n\n.sh-list-delete-btn {\n background-color: var(--color-accent);\n cursor: pointer;\n border: none;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n width: 28px;\n height: 28px;\n padding: 0;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.sh-book-info-link-wrap {\n justify-content: space-between;\n display: flex;\n}\n\n@media screen and (min-width: 768px) {\n .shopping-list-item {\n padding: 30px 24px;\n display: flex;\n position: relative;\n }\n\n .sh-title {\n letter-spacing: -1.92px;\n font-size: 48px;\n line-height: 1.08;\n }\n\n .book-column-img {\n width: 322px;\n height: 241px;\n }\n\n .sh-book-img {\n width: 116px;\n height: 165px;\n margin-right: 24px;\n }\n\n .sh-list-delete-btn {\n width: 34px;\n height: 34px;\n position: absolute;\n top: 0;\n right: 0;\n }\n\n .sh-soc-item .amazon-store {\n width: 48px;\n height: 15px;\n }\n\n .sh-soc-item .book-shop {\n width: 32px;\n height: 30px;\n }\n\n .sh-soc-link .apple-store {\n width: 28px;\n height: 27px;\n }\n\n .sh-wrap {\n flex-direction: column;\n justify-content: space-between;\n gap: 14px;\n width: 100%;\n display: flex;\n }\n\n .sh-book-category {\n margin-bottom: 8px;\n }\n}\n\n.sh-list-delete-icon {\n fill: #4f2ee8;\n stroke: #fff;\n}\n\n.header {\n border: 1.5px solid var(--text-main);\n background-color: var(--header);\n border-radius: 0 0 8px 8px;\n align-items: center;\n padding-top: 18px;\n padding-bottom: 18px;\n display: flex;\n}\n\n.header-title {\n display: flex;\n}\n\n.title-link {\n letter-spacing: -.03em;\n color: var(--text-main);\n align-items: center;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.29;\n text-decoration: none;\n display: flex;\n}\n\n.header-link-home {\n letter-spacing: -.04em;\n color: var(--text-main);\n font-size: 14px;\n font-weight: 500;\n line-height: 1.29;\n}\n\n.current {\n background: var(--color-links);\n border-radius: 36px;\n padding: 8px 16px;\n font-weight: 700;\n}\n\n.header-shopping-link {\n letter-spacing: -.04em;\n color: var(--text-main);\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 1.29;\n text-decoration: none;\n display: flex;\n}\n\n.header-shopping-link.current {\n background: var(--color-links);\n border-radius: 36px;\n padding: 7px 16px;\n font-weight: 700;\n}\n\na:link {\n text-decoration: none;\n}\n\n.header-nav {\n gap: 24px;\n list-style: none;\n display: flex;\n}\n\n.shopping-icon {\n fill: var(--text-main);\n width: 20px;\n height: 20px;\n margin-right: 8px;\n position: relative;\n}\n\n.header-icon {\n fill: var(--text-main);\n width: 109px;\n height: 26px;\n position: relative;\n}\n\n.theme-switch {\n width: 40px;\n height: 20px;\n margin-left: auto;\n position: relative;\n}\n\n.theme-switch input {\n display: none;\n}\n\n.theme-switch .toggle {\n cursor: pointer;\n background: linear-gradient(#4f2ee8, #dcdcdc);\n border-radius: 20px;\n width: 40px;\n height: 20px;\n transition: background-color .3s;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.theme-switch .toggle:before {\n content: \"\";\n background-color: #ffffe8;\n border-radius: 50%;\n width: 18px;\n height: 18px;\n transition: transform .3s;\n position: absolute;\n top: 1px;\n left: 1px;\n}\n\n.theme-switch input:checked + .toggle {\n background: linear-gradient(#4f2ee8, #686868);\n}\n\n.theme-switch input:checked + .toggle:before {\n transform: translateX(20px);\n}\n\n@media screen and (max-width: 767px) {\n .header > .auth-menu-root, .header-nav {\n display: none;\n }\n\n .backdrop-header {\n z-index: 10;\n opacity: 1;\n visibility: visible;\n background-color: rgba(17, 17, 17, .4);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n scale: 1;\n }\n\n .backdrop-header.is-hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n scale: .9;\n }\n\n .mob-menu-wrapper {\n max-width: 375px;\n position: relative;\n }\n\n .header .container {\n max-width: 375px;\n }\n\n .theme-auth {\n gap: 24px;\n margin-left: auto;\n display: flex;\n }\n\n .mobile-menu {\n z-index: 12;\n background-color: var(--header);\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-image: url(\"background-menu.58979710.png\"), linear-gradient(#4f2ee8, #dcdcdc);\n background-position: 0 150%, center;\n background-repeat: no-repeat;\n max-width: 375px;\n height: 100vh;\n position: fixed;\n top: 0;\n right: 0;\n }\n\n .header-shopping.current {\n color: var(--text-main);\n }\n\n .shopping-icon {\n fill: #fff;\n }\n\n .header-shopping {\n color: #fff;\n }\n\n .mobile-header-nav {\n flex-direction: column;\n gap: 16px;\n display: flex;\n }\n}\n\n@media screen and (max-width: 767px) and (min-device-pixel-ratio: 2), screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 767px) and (min-resolution: 192dpi), screen and (max-width: 767px) and (min-resolution: 2dppx) {\n .mobile-menu {\n background-image: url(\"background-menu@2x.bb2d1224.png\"), linear-gradient(#4f2ee8, #dcdcdc);\n }\n}\n\n@media screen and (max-width: 767px) {\n .menu-open {\n background-color: rgba(0, 0, 0, 0);\n border: none;\n margin-left: 14px;\n padding: 0;\n display: block;\n }\n\n .menu-open-icon {\n stroke: var(--text-main);\n width: 28px;\n height: 28px;\n display: block;\n }\n\n .menu-open-icon:hover, .menu-open-icon:focus {\n stroke: #4f2ee8;\n }\n\n .mobile-menu.is-visible {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n\n .mobile-container-header {\n border: 1.5px solid var(--text-main);\n background-color: var(--header);\n border-radius: 0 0 8px 8px;\n align-items: center;\n width: 100%;\n padding: 18px 20px;\n display: flex;\n position: absolute;\n top: 0;\n }\n\n .container.book {\n z-index: 20;\n flex-direction: column;\n align-items: center;\n width: 100vw;\n height: 100vh;\n padding: 20px;\n display: flex;\n }\n\n .container-book {\n position: relative;\n }\n\n .mobile-menu-close-btn {\n background-color: rgba(0, 0, 0, 0);\n border: none;\n margin-left: 14px;\n padding: 0;\n display: block;\n }\n\n .mobile-menu-close-btn-icon {\n stroke: var(--text-main);\n width: 28px;\n height: 28px;\n display: block;\n }\n\n .mobile-header-nav {\n color: var(--header);\n padding-top: 247px;\n padding-bottom: 495px;\n }\n\n .mobile-header-link-home {\n letter-spacing: -.04em;\n color: var(--text-main);\n margin-top: 191px;\n margin-bottom: 24px;\n font-size: 14px;\n font-weight: 500;\n line-height: 1.29;\n }\n\n .mobile-header-shopping-link {\n letter-spacing: -.04em;\n color: var(--text-main);\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 1.29;\n text-decoration: none;\n display: flex;\n }\n\n .current {\n background: #eac645;\n border-radius: 36px;\n padding: 8px 16px;\n }\n}\n\n.header.container {\n justify-content: space-between;\n}\n\n@media screen and (min-width: 768px) {\n .mobile-menu, .menu-open {\n display: none;\n }\n\n .header-icon {\n margin-right: 40px;\n }\n\n .header-nav {\n align-items: center;\n gap: 24px;\n }\n\n .theme-switch {\n margin-right: 24px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .header-icon {\n margin-right: 76px;\n }\n}\n\n.hidden {\n display: none;\n}\n\n.thumb {\n border-radius: 8px;\n margin-bottom: 14px;\n position: relative;\n overflow: hidden;\n}\n\n.thumb > img {\n width: 100%;\n height: 100%;\n}\n\n.book-title {\n color: var(--text-main);\n letter-spacing: -.64px;\n text-transform: uppercase;\n margin-bottom: 4px;\n font-size: 16px;\n line-height: 1.125;\n}\n\n.book-title:not(:lang(ae)):not(:lang(ar)):not(:lang(arc)):not(:lang(bcc)):not(:lang(bqi)):not(:lang(ckb)):not(:lang(dv)):not(:lang(fa)):not(:lang(glk)):not(:lang(he)):not(:lang(ku)):not(:lang(mzn)):not(:lang(nqo)):not(:lang(pnb)):not(:lang(ps)):not(:lang(sd)):not(:lang(ug)):not(:lang(ur)):not(:lang(yi)) {\n text-align: left;\n}\n\n.book-title:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {\n text-align: right;\n}\n\n.book-item .book-author {\n margin-bottom: 0;\n font-size: 12px;\n line-height: 1.16;\n}\n\n.book-item .book-author:not(:lang(ae)):not(:lang(ar)):not(:lang(arc)):not(:lang(bcc)):not(:lang(bqi)):not(:lang(ckb)):not(:lang(dv)):not(:lang(fa)):not(:lang(glk)):not(:lang(he)):not(:lang(ku)):not(:lang(mzn)):not(:lang(nqo)):not(:lang(pnb)):not(:lang(ps)):not(:lang(sd)):not(:lang(ug)):not(:lang(ur)):not(:lang(yi)) {\n text-align: left;\n}\n\n.book-item .book-author:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {\n text-align: right;\n}\n\n.overlay {\n background-color: var(--color-links);\n transition: transform .25s var(--timing-function);\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 27%;\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n transform: translateY(100%);\n}\n\n.thumb:hover .overlay {\n transform: translateY(0);\n}\n\n.overlay-text {\n color: var(--text-main);\n letter-spacing: -.56px;\n text-transform: uppercase;\n font-size: 30px;\n font-weight: 500;\n line-height: 1.28;\n}\n\n.section-books-list li:not(:last-child) {\n margin-bottom: 40px;\n}\n\n.section-categories-list {\n flex-direction: column;\n gap: 40px;\n display: flex;\n}\n\n.accent {\n color: var(--color-accent);\n}\n\n.section-categories-title, .section-books-title {\n letter-spacing: -1.28px;\n text-transform: capitalize;\n margin-bottom: 40px;\n font-size: 32px;\n line-height: 1.19;\n}\n\n.section-categories-list .btn {\n border: 2px solid var(--color-accent);\n letter-spacing: -.14px;\n text-transform: uppercase;\n color: var(--text-main);\n cursor: pointer;\n background-color: var(--body);\n border-radius: 40px;\n margin-left: auto;\n padding: 12px 26px;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.29;\n display: block;\n}\n\n@media screen and (min-width: 768px) {\n .thumb {\n min-width: 0;\n height: 316px;\n }\n\n .overlay-text {\n font-size: 20px;\n }\n\n .section-books-list {\n flex-wrap: wrap;\n gap: 40px 25px;\n display: flex;\n }\n\n .section-books-list li:not(:last-child) {\n margin-bottom: 0;\n }\n\n .section-books-list li {\n width: calc(33.3333% - 16.6667px);\n }\n\n .section-categories-title, .section-books-title {\n letter-spacing: -1.92px;\n font-size: 48px;\n line-height: 1.08;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .thumb {\n height: 256px;\n }\n\n .overlay-text {\n font-size: 14px;\n }\n\n .section-books-list {\n column-gap: 24px;\n }\n\n .section-books-list li {\n width: calc(20% - 19.2px);\n }\n}\n\n.main-wrapper {\n flex-direction: column;\n padding-top: 40px;\n display: flex;\n}\n\n@media screen and (min-width: 768px) {\n .main-wrapper {\n flex-direction: column;\n padding-top: 40px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .main-wrapper {\n flex-direction: row;\n gap: 40px;\n }\n}\n\n.main-container {\n padding-top: 40px;\n}\n\n@media screen and (min-width: 768px) {\n .main-container {\n padding-top: 100px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .main-container {\n padding-top: 0;\n }\n}\n\n.section-categories-title {\n letter-spacing: -1.28px;\n margin-bottom: 40px;\n font-size: 32px;\n font-weight: 700;\n line-height: 1.18;\n}\n\n@media screen and (min-width: 768px) {\n .section-categories-title {\n letter-spacing: -1.92px;\n margin-bottom: 40px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.08;\n }\n}\n\n.accent {\n color: var(--color-accent);\n}\n\n.section-categories-list {\n flex-direction: column;\n gap: 40px;\n display: flex;\n}\n\n.category-block-title {\n color: var(--text-second);\n letter-spacing: .42px;\n text-transform: uppercase;\n margin-bottom: 18px;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.28;\n}\n\n.books-list {\n flex-direction: column;\n margin-bottom: 8px;\n display: flex;\n}\n\n@media screen and (min-width: 768px) {\n .books-list {\n flex-direction: row;\n gap: 24px;\n }\n}\n\n.btn {\n cursor: pointer;\n border: 2px solid var(--color-accent);\n color: var(--text-main);\n letter-spacing: -.14px;\n text-transform: uppercase;\n border-radius: 40px;\n margin-left: auto;\n padding: 14px 28px;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.28;\n display: block;\n}\n\n.thumb {\n margin-bottom: 14px;\n}\n\n.thumb > img {\n border-radius: 8px;\n width: 100%;\n}\n\n.overlay {\n display: none;\n}\n\n.book-title {\n letter-spacing: -.64px;\n text-transform: uppercase;\n margin-bottom: 4px;\n font-family: DM Sans;\n font-size: 16px;\n font-weight: 700;\n line-height: 1.12;\n}\n\n.book-author {\n color: var(--text-second);\n letter-spacing: -.48px;\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.16;\n}\n\n.book-item {\n cursor: pointer;\n width: 100%;\n display: block;\n}\n\n@media screen and (min-width: 768px) {\n .book-item {\n width: 218px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .book-item {\n width: 180px;\n }\n}\n\n@media screen and (max-width: 767px) {\n .element-books-list:nth-child(n+2) {\n display: none;\n }\n}\n\n@media screen and (min-width: 768px) {\n .element-books-list:nth-child(n+4) {\n display: none;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .element-books-list:nth-child(n+4) {\n display: block;\n }\n}\n\n.category-container {\n width: 100%;\n height: 228px;\n display: flex;\n overflow-y: scroll;\n}\n\n.category-container::-webkit-scrollbar {\n width: 8px;\n}\n\n.category-container::-webkit-scrollbar-thumb {\n background-color: var(--scroll);\n border-radius: 12px;\n height: 114px;\n}\n\n.category-list {\n flex-direction: column;\n gap: 24px;\n width: 307px;\n display: flex;\n}\n\n.category-item {\n letter-spacing: .02em;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.33;\n}\n\n.category-link {\n color: var(--text-main);\n white-space: nowrap;\n}\n\n.active {\n color: var(--sidebar-categories-current);\n text-transform: uppercase;\n font-size: 16px;\n font-weight: 700;\n}\n\n@media screen and (min-width: 768px) {\n .category-list {\n gap: 32px;\n width: 309px;\n }\n\n .category-container::-webkit-scrollbar-thumb {\n height: 168px;\n }\n\n .category-container {\n width: 100%;\n max-width: 350px;\n height: 472px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .category-list {\n gap: 32px;\n width: 318px;\n }\n\n .category-item {\n font-weight: 300;\n }\n\n .category-container {\n width: 100%;\n max-width: 100%;\n height: 472px;\n }\n}\n\n.backdrop-modal {\n z-index: 10;\n opacity: 1;\n visibility: visible;\n filter: blur();\n background-color: rgba(17, 17, 17, .4);\n transition: opacity .25s linear, scale .25s linear, visibility .25s linear;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: auto;\n scale: 1;\n}\n\n.backdrop-modal.is-hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n filter: blur(20px);\n scale: .9;\n}\n\n.container-popup {\n z-index: 15;\n background-color: var(--header);\n border: 2px solid var(--text-main);\n border-radius: 18px;\n flex-direction: column;\n width: 335px;\n max-height: 806px;\n margin-left: auto;\n margin-right: auto;\n padding: 40px 24px;\n display: flex;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.modal-btn {\n text-transform: uppercase;\n letter-spacing: -.14px;\n color: var(--text-main);\n background-color: var(--header);\n border: 2px solid var(--color-accent);\n border-radius: 40px;\n margin-left: auto;\n margin-right: auto;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.28;\n}\n\n.btn-add {\n height: 46px;\n padding: 14px 28px;\n}\n\n.btn-remove {\n height: 46px;\n padding: 14px 23px;\n}\n\n.visually-hidden {\n white-space: nowrap;\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n border: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.btn-close-modal {\n width: 24px;\n height: 24px;\n position: absolute;\n}\n\n.close-modal {\n stroke: var(--text-main);\n background-color: rgba(0, 0, 0, 0);\n border: none;\n position: absolute;\n top: 12px;\n right: 12px;\n}\n\n.close-cross {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.close-modal:is(:hover, :focus) {\n stroke: var(--color-accent);\n}\n\n.btn-add:is(:hover, :focus) {\n background-color: var(--color-accent);\n color: var(--color-white-theme);\n}\n\n.btn-remove:is(:hover, :focus) {\n background-color: var(--color-accent);\n color: var(--color-white-theme);\n}\n\n.img-container-pop-up {\n border-radius: 8px;\n height: 408px;\n margin-bottom: 14px;\n position: relative;\n overflow: hidden;\n}\n\n.img-modal {\n width: 100%;\n}\n\n.book-header {\n letter-spacing: -.64px;\n margin-bottom: 4px;\n font-size: 16px;\n line-height: 1.28;\n}\n\n.book-author {\n color: var(--text-second);\n letter-spacing: -.48px;\n margin-bottom: 18px;\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.16;\n}\n\n.book-description {\n letter-spacing: -.56px;\n margin-bottom: 16px;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.28;\n}\n\n.icons-modal {\n gap: 20px;\n margin-bottom: 40px;\n display: flex;\n}\n\n.book-stores {\n align-items: center;\n gap: 20px;\n margin-bottom: 40px;\n display: flex;\n}\n\n.book-modal {\n filter: saturate(0%);\n}\n\n.amazon-logo:is(:hover, :focus) {\n filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)) saturate(0);\n}\n\n.apple-book-logo:is(:hover, :focus) {\n filter: saturate(0%) drop-shadow(0 2px 4px rgba(0, 0, 0, .2));\n}\n\n.book-shop-logo:is(:hover, :focus) {\n filter: saturate(0%) drop-shadow(0 2px 4px rgba(0, 0, 0, .2));\n}\n\n.modal-congrats-text {\n color: var(--sidebar-categories);\n text-align: center;\n letter-spacing: -.4px;\n width: 242px;\n height: 36px;\n margin-top: 4px;\n margin-left: auto;\n margin-right: auto;\n font-size: 10px;\n font-weight: 400;\n line-height: 12px;\n}\n\n.amazon-logo {\n width: 62px;\n height: 19px;\n}\n\n.apple-book-logo {\n width: 33px;\n height: 32px;\n}\n\n.book-shop-logo {\n width: 38px;\n height: 36px;\n}\n\n.js-dark-mode {\n background-color: var(--color-lite-dark-theme);\n stroke: var(--header);\n color: var(--header);\n}\n\n.js-dark-mode-amazon {\n filter: brightness(0) invert();\n}\n\n.js-dark-mode-congrats {\n color: var(--sidebar-categories);\n}\n\n.default-book-pop-up {\n fill: var(--color-button);\n width: 60px;\n height: 64px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n@media screen and (min-width: 768px) {\n .container-popup {\n width: 579px;\n max-height: 501px;\n padding: 40px;\n }\n\n .book-header {\n letter-spacing: -.96px;\n margin-bottom: 8px;\n font-size: 24px;\n line-height: 1.16;\n }\n\n .book-author {\n letter-spacing: -.56px;\n margin-bottom: 20px;\n font-size: 14px;\n line-height: 1.28;\n }\n\n .book-description {\n margin-bottom: 20px;\n }\n\n .modal-text-container {\n width: 279px;\n }\n\n .modal-content-container {\n gap: 24px;\n display: flex;\n }\n\n .img-container-pop-up {\n width: 192px;\n height: 281px;\n margin-bottom: 40px;\n }\n\n .btn-add {\n width: 100%;\n height: 64px;\n padding: 14px 28px;\n }\n\n .btn-remove {\n width: 100%;\n height: 64px;\n padding: 14px 23px;\n }\n\n .modal-btn {\n letter-spacing: -.18px;\n font-size: 18px;\n line-height: 1.56;\n }\n\n .modal-congrats-text {\n letter-spacing: -.48px;\n width: 324px;\n margin-top: 8px;\n font-size: 12px;\n line-height: 14px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .container-popup {\n width: 579px;\n height: 501px;\n }\n}\n\n.sidebar {\n flex-direction: column;\n gap: 40px;\n width: 335px;\n display: flex;\n}\n\n@media screen and (min-width: 768px) {\n .sidebar {\n flex-direction: row;\n gap: 32px;\n width: 704px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .sidebar {\n flex-direction: column;\n gap: 86px;\n width: 356px;\n }\n}\n\n.support-container {\n text-align: center;\n color: #fff;\n background: radial-gradient(189.32% 190.93% at 59.76% -23.42%, #4f2ee8 18.03%, #fff 100%);\n border-radius: 16px;\n width: 335px;\n padding: 24px 40px 20px;\n box-shadow: 0 10px 10px rgba(245, 245, 247, .1);\n}\n\n@media screen and (min-width: 1440px) {\n .support-container {\n width: 100%;\n }\n}\n\n.support-title {\n letter-spacing: -1.12px;\n margin-bottom: 40px;\n font-size: 28px;\n font-weight: 700;\n line-height: 32px;\n}\n\n.fund-list {\n counter-reset: my-counter;\n list-style-type: none;\n}\n\n.fund-list li {\n counter-increment: my-counter;\n align-items: center;\n margin-bottom: 20px;\n display: flex;\n}\n\n.fund-list li:before {\n content: counter(my-counter, decimal-leading-zero);\n letter-spacing: -.56px;\n margin-right: 16px;\n font-size: 14px;\n font-weight: 400;\n line-height: 18px;\n}\n\n.icon-trident {\n fill: #fff;\n margin-left: 12px;\n transform: translateY(7px);\n}\n\n.support-img {\n filter: brightness(0%) invert();\n}\n\n.swiper {\n width: 100%;\n height: 188px;\n margin-bottom: 32px;\n}\n\n@media (min-width: 768px) {\n .swiper {\n height: 292px;\n }\n}\n\n.button-next {\n cursor: pointer;\n}\n\n.button-prev {\n cursor: pointer;\n transform: rotate(180deg);\n}\n\n.backdrop-modal-footer {\n z-index: 10;\n background-color: var(--sidebar-categories);\n opacity: 1;\n visibility: visible;\n transition: opacity .25s linear, scale .25s linear, visibility .25s linear;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: auto;\n scale: 1;\n}\n\n.footer {\n z-index: 15;\n background-color: var(--header);\n border: 2px solid var(--text-main);\n border-radius: 18px;\n flex-direction: column;\n width: 335px;\n margin-left: auto;\n margin-right: auto;\n padding: 20px 0;\n display: flex;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.backdrop-modal-footer.is-hidden-footer {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n scale: .9;\n}\n\n.footer-head {\n color: var(--text-main);\n letter-spacing: -1.6px;\n font-size: 40px;\n font-style: normal;\n font-weight: 700;\n line-height: 44px;\n}\n\n.contact-list {\n flex-direction: column;\n gap: 0 10px;\n margin: 0;\n display: flex;\n}\n\n.contact-list-item {\n flex-direction: row;\n gap: 5px;\n display: flex;\n}\n\n.contact-text {\n letter-spacing: -.48px;\n color: var(--sidebar-categories-current);\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n}\n\n.contact-link {\n letter-spacing: -.48px;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n text-decoration: none;\n}\n\n.footer-btn {\n cursor: pointer;\n width: 28px;\n height: 28px;\n margin: 0;\n padding: 0;\n display: inline-block;\n position: fixed;\n bottom: 10px;\n left: 5px;\n}\n\n.footer-gear {\n fill: var(--sidebar-categories-current);\n width: 28px;\n height: 28px;\n}\n\n.footer-btn:hover, .footer-btn:focus {\n animation: 1.5s linear infinite rotate-center;\n}\n\n@keyframes rotate-center {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@media screen and (min-width: 768px) {\n .footer {\n width: 548px;\n }\n\n .contact-list {\n flex-wrap: wrap;\n gap: 0 10px;\n height: 84px;\n }\n\n .footer-btn {\n width: 40px;\n height: 40px;\n bottom: 10px;\n left: 5px;\n }\n\n .footer-gear {\n width: 40px;\n height: 40px;\n }\n}\n\n@media screen and (min-width: 1200px) {\n .footer {\n width: 804px;\n }\n\n .footer > .container {\n max-width: 800px;\n }\n\n .contact-list {\n height: 56px;\n }\n\n .footer-btn {\n width: 40px;\n height: 40px;\n bottom: 20px;\n left: 15px;\n }\n\n .footer-gear {\n width: 40px;\n height: 40px;\n }\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n@media screen and (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n}\n\n.visually-hidden {\n white-space: nowrap;\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n border: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.js-sroll-up {\n position: fixed;\n bottom: 0;\n right: 0;\n}\n\n.scroll-up-wrapper {\n border-radius: 50%;\n}\n\n.scroll-up-icon {\n width: 44px;\n height: 44px;\n margin-bottom: 16px;\n margin-right: 16px;\n}\n\n/*# sourceMappingURL=index.c8597b5a.css.map */\n","/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n::before,\n::after {\n\tbox-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\nhtml {\n\t-moz-tab-size: 4;\n\ttab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n\tline-height: 1.15; /* 1 */\n\t-webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n\tmargin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n\tfont-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n\theight: 0; /* 1 */\n\tcolor: inherit; /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n\ttext-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n\tfont-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n\tfont-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace; /* 1 */\n\tfont-size: 1em; /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n\tfont-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n\tvertical-align: baseline;\n}\n\nsub {\n\tbottom: -0.25em;\n}\n\nsup {\n\ttop: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n\ttext-indent: 0; /* 1 */\n\tborder-color: inherit; /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n\tfont-family: inherit; /* 1 */\n\tfont-size: 100%; /* 1 */\n\tline-height: 1.15; /* 1 */\n\tmargin: 0; /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect { /* 1 */\n\ttext-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n\t-webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n:-moz-focusring {\n\toutline: 1px dotted ButtonText;\n}\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n:-moz-ui-invalid {\n\tbox-shadow: none;\n}\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n\tpadding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n\tvertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n\t-webkit-appearance: textfield; /* 1 */\n\toutline-offset: -2px; /* 2 */\n}\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n::-webkit-file-upload-button {\n\t-webkit-appearance: button; /* 1 */\n\tfont: inherit; /* 2 */\n}\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n\tdisplay: list-item;\n}\n","@import './common';\n@import './shopping-list';\n@import './header';\n@import './books';\n@import './top-books';\n@import './categories';\n@import './pop-up-book';\n@import './sidebar';\n@import './support';\n@import './footer';\n@import './scroll-up';\n","@import '~node_modules/modern-normalize/modern-normalize.css';\n\n:root {\n --body: #f6f6f6;\n --header: #fff;\n --sidebar-categories: rgba(17, 17, 17, 0.6);\n --sidebar-categories-current: #4f2ee8;\n --text-main: #111;\n --scroll: #e0e0e0;\n --color-lite-dark-theme: #202024;\n --text-second: #b4afaf;\n --color-accent: #4f2ee8;\n --color-links: #eac645;\n --color-gradient: radial-gradient(\n 189.32% 190.93% at 59.76% -23.42%,\n #4f2ee8 18.03%,\n #fff 100%\n );\n --timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 0;\n}\n\nul {\n margin: 0;\n padding-left: 0;\n list-style: none;\n}\n\nimg {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\nli {\n list-style: none;\n}\n\na {\n color: currentColor;\n text-decoration: none;\n}\n\nbutton {\n cursor: pointer;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n color: var(--text-main);\n font-family: 'DM Sans', 'Montserrat', 'Roboto', 'Open Sans', 'Raleway',\n 'Arial', sans-serif;\n background-color: var(--body);\n font-weight: 700;\n}\n\n.container {\n width: 100%;\n max-width: 375px;\n padding-left: 20px;\n padding-right: 20px;\n margin: 0 auto;\n @media screen and (min-width: 768px) {\n max-width: 768px;\n padding-left: 32px;\n padding-right: 32px;\n }\n\n @media screen and (min-width: 1440px) {\n max-width: 1440px;\n padding-left: 20px;\n padding-right: 20px;\n }\n}\n\n.no-scroll {\n overflow: hidden;\n}\n\n.visually-hidden {\n position: absolute;\n white-space: nowrap;\n width: 1px;\n height: 1px;\n overflow: hidden;\n border: 0;\n padding: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n margin: -1px;\n}\n\n[data-page-theme='light'] {\n --body: #f6f6f6;\n --header: #fff;\n --sidebar-categories: rgba(17, 17, 17, 0.6);\n --sidebar-categories-current: #4f2ee8;\n --text-main: #111;\n --scroll: #e0e0e0;\n}\n\n[data-page-theme='dark'] {\n --scroll: rgba(17, 17, 17, 0.6);\n --body: #202024;\n --header: #111;\n --sidebar-categories: rgba(255, 255, 255, 0.6);\n --sidebar-categories-current: #eac645;\n --text-main: #fff;\n}",".sh-title {\n margin-bottom: 40px;\n font-size: 32px;\n font-weight: 700;\n line-height: 1.19;\n letter-spacing: -1.28px;\n}\n.shopping-title {\n color: var(--text-main);\n}\n.title-span {\n color: var(--color-accent);\n}\n\n.empty-sh-list {\n display: none;\n}\n.book-column-img {\n margin: 0 auto;\n width: 265px;\n height: 198px;\n}\n\n.shopping-list {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.sh-list-section img {\n display: block;\n max-width: 100%;\n}\n\n.shopping-list-item {\n // position: relative;\n display: flex;\n padding: 14px;\n border-radius: 16px;\n border: 2px solid rgba(79, 46, 232, 0.4);\n background-color: var(--header);\n}\n\n.sh-book-title {\n margin-bottom: 4px;\n color: var(--text-main);\n font-size: 16px;\n font-weight: 700;\n line-height: 1.13;\n letter-spacing: -0.64px;\n}\n.sh-book-category {\n margin-bottom: 8px;\n color: var(--text-second);\n font-size: 12px;\n font-weight: 400;\n line-height: 1.17;\n letter-spacing: 0.36px;\n}\n\n.div-text-container{\n height: 68px;\n overflow: hidden;\n}\n\n.sh-book-description {\n color: var(--text-main);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.23;\n letter-spacing: -0.56px;\n display: -webkit-box;\n -webkit-line-clamp: 4; \n -webkit-box-orient: vertical; \n text-overflow: ellipsis;\n}\n.sh-book-author {\n color: var(--text-second);\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.17;\n letter-spacing: -0.48px;\n}\n\n.shopping-links {\n display: flex;\n align-items: center;\n gap: 8;\n}\n\n.sh-book-img {\n margin-right: 14px;\n width: 100px;\n height: 142px;\n border-radius: 8px;\n}\n\n.sh-soc-item .amazon-store {\n width: 32px;\n height: 11px;\n}\n.sh-soc-item .book-shop {\n width: 16px;\n height: 16px;\n}\n\n.sh-soc-link .apple-store {\n width: 16px;\n height: 16px;\n}\n\n.sh-wrap {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 14px;\n}\n\n.sh-book-info-wrap {\n // position: relative;\n}\n\n.sh-list-delete-btn {\n position: absolute;\n top: 0;\n right: 0;\n\n display: flex;\n width: 28px;\n height: 28px;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n background-color: var(--color-accent);\n border-radius: 50%;\n border: none;\n cursor: pointer;\n}\n\n.sh-book-info-link-wrap {\n display: flex;\n justify-content: space-between;\n}\n\n@media screen and (min-width: 375px) {\n}\n\n@media screen and (min-width: 768px) {\n .shopping-list-item {\n position: relative;\n display: flex;\n padding: 30px 24px;\n }\n\n .sh-title {\n font-size: 48px;\n line-height: 1.08;\n letter-spacing: -1.92px;\n }\n .book-column-img {\n width: 322px;\n height: 241px;\n }\n\n .sh-book-img {\n margin-right: 24px;\n width: 116px;\n height: 165px;\n }\n\n .sh-list-delete-btn {\n position: absolute;\n top: 0;\n right: 0;\n width: 34px;\n height: 34px;\n }\n\n .sh-soc-item .amazon-store {\n width: 48px;\n height: 15px;\n }\n .sh-soc-item .book-shop {\n width: 32px;\n height: 30px;\n }\n\n .sh-soc-link .apple-store {\n width: 28px;\n height: 27px;\n }\n\n .sh-wrap {\n flex-direction: column;\n gap: 14px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n\n .sh-book-category {\n margin-bottom: 8px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n}\n\n.sh-list-delete-icon {\n fill: #4f2ee8;\n stroke: #fff;\n}\n",".header {\n display: flex;\n align-items: center;\n padding-top: 18px;\n padding-bottom: 18px;\n border: 1.5px solid var(--text-main);\n border-radius: 0 0 8px 8px;\n background-color: var(--header);\n}\n\n.header-title {\n display: flex;\n}\n\n.title-link {\n display: flex;\n text-decoration: none;\n align-items: center;\n font-weight: 700;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.03em;\n color: var(--text-main);\n}\n.header-link-home {\n font-weight: 500;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.04em;\n color: var(--text-main);\n}\n\n.current {\n font-weight: 700;\n padding: 8px 16px;\n background: var(--color-links);\n border-radius: 36px;\n}\n\n.header-shopping-link {\n display: flex;\n text-decoration: none;\n align-items: center;\n font-weight: 500;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.04em;\n color: var(--text-main);\n}\n.header-shopping-link.current {\n font-weight: 700;\n padding: 7px 16px;\n background: var(--color-links);\n border-radius: 36px;\n}\n\na:link {\n text-decoration: none;\n}\n\n.header-nav {\n display: flex;\n gap: 24px;\n list-style: none;\n}\n.shopping-icon {\n fill: var(--text-main);\n margin-right: 8px;\n position: relative;\n width: 20px;\n height: 20px;\n}\n.header-icon {\n // margin-right: 144px;\n position: relative;\n fill: var(--text-main);\n width: 109px;\n height: 26px;\n}\n\n.theme-switch {\n margin-left: auto;\n position: relative;\n width: 40px;\n height: 20px;\n}\n\n.theme-switch input {\n display: none;\n}\n\n.theme-switch .toggle {\n position: absolute;\n top: 0;\n left: 0;\n width: 40px;\n height: 20px;\n background: linear-gradient(\n to bottom,\n rgb(79, 46, 232, 1),\n rgb(220, 220, 220, 1)\n );\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.theme-switch .toggle:before {\n content: '';\n position: absolute;\n top: 1px;\n left: 1px;\n width: 18px;\n height: 18px;\n background-color: rgb(255, 255, 232, 1);\n border-radius: 50%;\n transition: transform 0.3s;\n}\n\n.theme-switch input:checked + .toggle {\n background: linear-gradient(\n to bottom,\n rgb(79, 46, 232, 1),\n rgb(104, 104, 104, 1)\n );\n}\n\n.theme-switch input:checked + .toggle:before {\n transform: translateX(20px);\n}\n@media screen and (max-width: 767px) {\n .header > .auth-menu-root,\n .header-nav {\n display: none;\n }\n\n /*------------------- MOBILE MENU----------------- */\n\n .backdrop-header {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n z-index: 10;\n\n background-color: rgba(17, 17, 17, 0.4);\n\n opacity: 1;\n scale: 1;\n visibility: visible;\n }\n\n .backdrop-header.is-hidden {\n opacity: 0;\n visibility: hidden;\n scale: 0.9;\n pointer-events: none;\n }\n\n .mob-menu-wrapper {\n position: relative;\n max-width: 375px;\n }\n\n .header .container {\n max-width: 375px;\n }\n\n .theme-auth {\n display: flex;\n gap: 24px;\n margin-left: auto;\n }\n\n .mobile-menu {\n position: fixed;\n height: 100vh;\n max-width: 375px;\n top: 0;\n right: 0;\n z-index: 12;\n background-color: var(--header);\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-repeat: no-repeat;\n background-position: bottom;\n background-image: url(../images/background-menu.png),\n linear-gradient(to bottom, rgb(79, 46, 232, 1), rgb(220, 220, 220, 1));\n background-position: 0px 150%, center;\n }\n\n .header-shopping.current {\n color: var(--text-main);\n }\n\n .shopping-icon {\n fill: white;\n }\n .header-shopping {\n color: white;\n }\n\n .mobile-header-nav {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n @media (min-device-pixel-ratio: 2),\n (min-resolution: 192dpi),\n (min-resolution: 2dppx) {\n .mobile-menu {\n background-image: url(../images/background-menu@2x.png),\n linear-gradient(to bottom, rgb(79, 46, 232, 1), rgb(220, 220, 220, 1));\n }\n }\n\n .menu-open {\n display: block;\n background-color: transparent;\n border-color: transparent;\n margin-left: 14px;\n padding: 0;\n border: none;\n }\n .menu-open-icon {\n display: block;\n height: 28px;\n width: 28px;\n stroke: var(--text-main);\n }\n .menu-open-icon:hover,\n .menu-open-icon:focus {\n stroke: rgb(79, 46, 232, 1);\n }\n\n .mobile-menu.is-visible {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n\n .mobile-container-header {\n position: absolute;\n top: 0;\n padding-left: 20px;\n padding-right: 20px;\n display: flex;\n align-items: center;\n padding-top: 18px;\n padding-bottom: 18px;\n border: 1.5px solid var(--text-main);\n border-radius: 0 0 8px 8px;\n background-color: var(--header);\n width:100%;\n }\n\n .container.book {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n width: 100vw;\n height: 100vh;\n z-index: 20;\n }\n\n .container-book {\n position: relative;\n }\n\n .mobile-menu-close-btn {\n display: block;\n background-color: transparent;\n border-color: transparent;\n margin-left: 14px;\n padding: 0;\n border: none;\n }\n\n .mobile-menu-close-btn-icon {\n display: block;\n height: 28px;\n width: 28px;\n stroke: var(--text-main);\n }\n\n .mobile-header-nav {\n padding-top: 247px;\n padding-bottom: 495px;\n color: var(--header);\n }\n\n .mobile-header-link-home {\n font-weight: 500;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.04em;\n color: var(--text-main);\n margin-top: 191px;\n margin-bottom: 24px;\n }\n .mobile-header-shopping-link {\n display: flex;\n text-decoration: none;\n align-items: center;\n font-weight: 500;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.04em;\n color: var(--text-main);\n }\n\n .current {\n padding: 8px 16px;\n border-radius: 36px;\n background: #eac645;\n }\n}\n\n.header.container {\n justify-content: space-between;\n}\n\n@media screen and (min-width: 768px) {\n .mobile-menu,\n .menu-open {\n display: none;\n }\n .header-icon {\n margin-right: 40px;\n }\n .header-nav {\n gap: 24px;\n align-items: center;\n\n }\n .theme-switch {\n margin-right: 24px;\n }\n\n}\n\n@media screen and (min-width: 1440px) {\n .header-icon {\n margin-right: 76px;\n }\n}\n",".hidden {\n display: none;\n}\n\n// -----------Styles for one book---------//\n\n.thumb {\n position: relative;\n margin-bottom: 14px;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.thumb > img {\n width: 100%;\n height: 100%;\n}\n\n.book-title {\n text-align: start;\n margin-bottom: 4px;\n font-size: 16px;\n line-height: 1.125;\n color: var(--text-main);\n letter-spacing: -0.64px;\n text-transform: uppercase;\n}\n\n.book-item .book-author {\n text-align: start;\n margin-bottom: 0px;\n font-size: 12px;\n line-height: 1.16;\n}\n\n.overlay {\n position: absolute;\n display: flex;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 27%;\n justify-content: center;\n align-items: center;\n background-color: var(--color-links);\n\n transform: translateY(100%);\n transition: transform 250ms var(--timing-function);\n}\n\n.thumb:hover .overlay {\n transform: translateY(0);\n}\n\n.overlay-text {\n color: var(--text-main);\n font-size: 30px;\n font-weight: 500;\n line-height: 1.28;\n letter-spacing: -0.56px;\n text-transform: uppercase;\n}\n\n.section-books-list li:not(:last-child) {\n margin-bottom: 40px;\n}\n\n.section-categories-list {\n display: flex;\n flex-direction: column;\n gap: 40px;\n}\n\n// -----------Styles for sections with book---------//\n\n.accent {\n color: var(--color-accent);\n}\n\n.section-categories-title,\n.section-books-title {\n margin-bottom: 40px;\n font-size: 32px;\n line-height: 1.19;\n letter-spacing: -1.28px;\n text-transform: capitalize;\n}\n\n// -----------See More Button---------//\n\n.section-categories-list .btn {\n display: block;\n margin-left: auto;\n padding: 12px 26px;\n border-radius: 40px;\n border: 2px solid var(--color-accent);\n\n font-size: 14px;\n font-weight: 700;\n line-height: 1.29;\n letter-spacing: -0.14px;\n text-transform: uppercase;\n color: var(--text-main);\n cursor: pointer;\n background-color: var(--body);\n}\n\n// -----------Styles for tablet---------//\n\n@media screen and (min-width: 768px) {\n .thumb {\n height: 316px;\n min-width: 0;\n }\n\n .overlay-text {\n font-size: 20px;\n }\n\n .section-books-list {\n display: flex;\n flex-wrap: wrap;\n row-gap: 40px;\n column-gap: 25px;\n }\n .section-books-list li:not(:last-child) {\n margin-bottom: 0;\n }\n\n .section-books-list li {\n width: calc((100% - 50px) / 3);\n }\n\n .section-categories-title,\n .section-books-title {\n font-size: 48px;\n line-height: 1.08;\n letter-spacing: -1.92px;\n }\n}\n\n// -----------Styles for desktop---------//\n\n@media screen and (min-width: 1440px) {\n .thumb {\n height: 256px;\n }\n\n .overlay-text {\n font-size: 14px;\n }\n\n .section-books-list {\n column-gap: 24px;\n }\n .section-books-list li {\n width: calc((100% - 96px) / 5);\n }\n}\n",".main-wrapper {\n display: flex;\n flex-direction: column;\n padding-top: 40px;\n\n @media screen and (min-width: 768px){\n padding-top: 40px;\n flex-direction: column;\n }\n\n @media screen and (min-width: 1440px){\n flex-direction: row;\n gap: 40px;\n }\n}\n\n.main-container {\n padding-top: 40px;\n @media screen and (min-width: 768px){\n padding-top: 100px;\n }\n @media screen and (min-width: 1440px){\n padding-top: 0;\n }\n}\n\n.section-categories-title {\n margin-bottom: 40px;\n font-size: 32px;\n font-weight: 700;\n line-height: 1.18;\n letter-spacing: -1.28px;\n @media screen and (min-width: 768px){\n margin-bottom: 40px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.08;\n letter-spacing: -1.92px;\n }\n}\n\n.accent {\n color: var(--color-accent);\n}\n\n.section-categories-list {\n display: flex;\n flex-direction: column;\n gap: 40px;\n}\n\n.category-block-title {\n color: var(--text-second);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.28;\n letter-spacing: 0.42px;\n text-transform: uppercase;\n margin-bottom: 18px;\n}\n\n.books-list {\n display: flex;\n flex-direction: column;\n margin-bottom: 8px;\n\n @media screen and (min-width: 768px){\n gap:24px;\n flex-direction: row;\n }\n}\n\n.btn {\n display: block;\n cursor: pointer;\n margin-left: auto;\n padding: 14px 28px;\n border-radius: 40px;\n border: 2px solid var(--color-accent);\n color:var(--text-main);\n font-size: 14px;\n font-weight: 700;\n line-height: 1.28;\n letter-spacing: -0.14px;\n text-transform: uppercase;\n}\n\n.thumb {\n margin-bottom: 14px;\n}\n\n.thumb > img {\n width: 100%;\n border-radius: 8px;\n}\n\n.overlay {\n display: none;\n}\n\n.book-title {\n margin-bottom: 4px;\n font-size: 16px;\n font-family: DM Sans;\n font-weight: 700;\n line-height: 1.12;\n letter-spacing: -0.64px;\n text-transform: uppercase;\n}\n\n.book-author {\n color:var(--text-second);\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.16;\n letter-spacing: -0.48px;\n}\n\n.book-item{\n display: block;\n width: 100%;\n cursor: pointer;\n @media screen and (min-width: 768px) {\n width: 218px;\n }\n \n @media screen and (min-width: 1440px) {\n width: 180px;\n }\n}\n\n@media screen and (max-width: 767px){\n .element-books-list:nth-child(n+2) {\n display: none;\n }\n}\n\n\n@media screen and (min-width: 768px){\n .element-books-list:nth-child(n+4) {\n display: none;\n }\n}\n\n @media screen and (min-width: 1440px){\n .element-books-list:nth-child(n+4) {\n display: block;\n }\n }\n",".category-container {\n display: flex;\n width: 100%;\n\n height: 228px;\n overflow-y: scroll;\n}\n.category-container::-webkit-scrollbar {\n width: 8px;\n}\n.category-container::-webkit-scrollbar-thumb {\n background-color: var(--scroll);\n border-radius: 12px;\n height: 114px;\n}\n\n.category-list {\n display: flex;\n flex-direction: column;\n width: 307px;\n gap: 24px;\n}\n\n.category-item {\n font-weight: 400;\n font-size: 16px;\n line-height: 1.33;\n letter-spacing: 0.02em;\n}\n\n.category-link {\n color: var(--text-main);\n white-space: nowrap;\n}\n// .category-link\n.active {\n color: var(--sidebar-categories-current);\n text-transform: uppercase;\n font-size: 16px;\n font-weight: 700;\n}\n@media screen and (min-width: 768px) {\n .category-list {\n width: 309px;\n gap: 32px;\n }\n .category-container::-webkit-scrollbar-thumb {\n height: 168px;\n }\n .category-container {\n width: 100%;\n max-width: 350px;\n height: 472px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .category-list {\n width: 318px;\n gap: 32px;\n }\n .category-item {\n font-weight: 300;\n }\n .category-container {\n width: 100%;\n height: 472px;\n max-width: 100%;\n }\n}\n",".backdrop-modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n overflow: auto;\n\n z-index: 10;\n\n background-color: rgba(17, 17, 17, 0.4);\n\n opacity: 1;\n scale: 1;\n visibility: visible;\n\n filter: blur(0);\n\n transition: opacity 250ms linear, scale 250ms linear, visibility 250ms linear;\n}\n\n.backdrop-modal.is-hidden {\n opacity: 0;\n visibility: hidden;\n scale: 0.9;\n pointer-events: none;\n filter: blur(20px);\n}\n\n.container-popup {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 15;\n\n display: flex;\n flex-direction: column;\n width: 335px;\n max-height: 806px;\n padding: 40px 24px;\n margin-left: auto;\n margin-right: auto;\n background-color: var(--header);\n border: 2px solid var(--text-main);\n border-radius: 18px;\n}\n\n.modal-btn {\n margin-left: auto;\n margin-right: auto;\n text-transform: uppercase;\n font-size: 14px;\n font-weight: 700;\n letter-spacing: -0.14px;\n line-height: 1.28;\n color: var(--text-main);\n background-color: var(--header);\n border-radius: 40px;\n border: 2px solid var(--color-accent);\n}\n\n.btn-add {\n height: 46px;\n padding: 14px 28px;\n}\n\n.btn-remove {\n height: 46px;\n padding: 14px 23px;\n}\n\n.visually-hidden {\n position: absolute;\n white-space: nowrap;\n width: 1px;\n height: 1px;\n overflow: hidden;\n border: 0;\n padding: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n margin: -1px;\n}\n\n.btn-close-modal {\n position: absolute;\n width: 24px;\n height: 24px;\n}\n\n.close-modal {\n position: absolute;\n top: 12px;\n right: 12px;\n background-color: transparent;\n stroke: var(--text-main);\n border: none;\n}\n\n.close-cross {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.close-modal:is(:hover, :focus) {\n stroke: var(--color-accent);\n}\n\n.btn-add:is(:hover, :focus) {\n background-color: var(--color-accent);\n color: var(--color-white-theme);\n}\n\n.btn-remove:is(:hover, :focus) {\n background-color: var(--color-accent);\n color: var(--color-white-theme);\n}\n\n.img-container-pop-up {\n position: relative;\n height: 408px;\n margin-bottom: 14px;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.img-modal {\n width: 100%;\n}\n\n.book-header {\n margin-bottom: 4px;\n font-size: 16px;\n line-height: 1.28;\n letter-spacing: -0.64px;\n}\n\n.book-author {\n margin-bottom: 18px;\n color: var(--text-second);\n font-size: 12px;\n font-weight: 400;\n font-style: italic;\n line-height: 1.16;\n letter-spacing: -0.48px;\n}\n\n.book-description {\n margin-bottom: 16px;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.28;\n letter-spacing: -0.56px;\n}\n\n.icons-modal {\n display: flex;\n gap: 20px;\n margin-bottom: 40px;\n}\n\n.book-stores {\n display: flex;\n gap: 20px;\n align-items: center;\n margin-bottom: 40px;\n}\n\n.book-modal {\n filter: saturate(0%);\n}\n.amazon-logo:is(:hover, :focus) {\n filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2)) saturate(0);\n}\n\n.apple-book-logo:is(:hover, :focus) {\n filter: saturate(0%) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));\n}\n\n.book-shop-logo:is(:hover, :focus) {\n filter: saturate(0%) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));\n}\n.modal-congrats-text {\n margin-left: auto;\n margin-right: auto;\n margin-top: 4px;\n width: 242px;\n height: 36px;\n color: var(--sidebar-categories);\n text-align: center;\n font-size: 10px;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: -0.4px;\n}\n\n.amazon-logo {\n width: 62px;\n height: 19px;\n}\n\n.apple-book-logo {\n width: 33px;\n height: 32px;\n}\n\n.book-shop-logo {\n width: 38px;\n height: 36px;\n}\n\n.js-dark-mode {\n background-color: var(--color-lite-dark-theme);\n stroke: var(--header);\n color: var(--header);\n}\n\n.js-dark-mode-amazon {\n filter: brightness(0) invert(1);\n}\n\n.js-dark-mode-congrats {\n color: var(--sidebar-categories);\n}\n\n.default-book-pop-up {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 60px;\n height: 64px;\n fill: var(--color-button);\n}\n\n@media screen and (min-width: 768px) {\n .container-popup {\n width: 579px;\n max-height: 501px;\n padding: 40px;\n }\n\n .book-header {\n margin-bottom: 8px;\n font-size: 24px;\n line-height: 1.16;\n letter-spacing: -0.96px;\n }\n\n .book-author {\n margin-bottom: 20px;\n font-size: 14px;\n line-height: 1.28;\n letter-spacing: -0.56px;\n }\n .book-description {\n margin-bottom: 20px;\n }\n .modal-text-container {\n width: 279px;\n }\n\n .modal-content-container {\n display: flex;\n gap: 24px;\n }\n\n .img-container-pop-up {\n width: 192px;\n height: 281px;\n margin-bottom: 40px;\n }\n\n .btn-add {\n width: 100%;\n height: 64px;\n padding: 14px 28px;\n }\n\n .btn-remove {\n width: 100%;\n height: 64px;\n padding: 14px 23px;\n }\n\n .modal-btn {\n font-size: 18px;\n letter-spacing: -0.18px;\n line-height: 1.56;\n }\n\n .modal-congrats-text {\n margin-top: 8px;\n width: 324px;\n font-size: 12px;\n line-height: 14px;\n letter-spacing: -0.48px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .container-popup {\n width: 579px;\n height: 501px;\n }\n}\n",".sidebar {\n display: flex;\n flex-direction: column;\n gap: 40px;\n width: 335px;\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n width: 704px;\n gap: 32px;\n }\n \n @media screen and (min-width: 1440px) {\n flex-direction: column;\n width: 356px;\n gap: 86px;\n }\n}\n",".support-container {\n width: 335px;\n text-align: center;\n padding: 24px 40px 20px 40px;\n border-radius: 16px;\n background: radial-gradient(\n 189.32% 190.93% at 59.76% -23.42%,\n #4f2ee8 18.03%,\n #fff 100%\n );\n box-shadow: 0px 10px 10px 0px rgba(245, 245, 247, 0.1);\n color: #ffffff;\n\n @media screen and (min-width: 1440px) {\n width: 100%;\n }\n}\n\n.support-title {\n margin-bottom: 40px;\n font-size: 28px;\n font-weight: 700;\n line-height: 32px;\n letter-spacing: -1.12px;\n}\n\n.fund-list {\n counter-reset: my-counter;\n list-style-type: none;\n}\n\n.fund-list li {\n counter-increment: my-counter;\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n}\n\n.fund-list li::before {\n content: counter(my-counter, decimal-leading-zero);\n margin-right: 16px;\n font-size: 14px;\n font-weight: 400;\n line-height: 18px;\n letter-spacing: -0.56px;\n}\n\n.icon-trident {\n fill: #ffffff;\n margin-left: 12px;\n transform: translateY(7px);\n}\n\n.support-img {\n filter: brightness(0%) invert(100%);\n}\n\n.swiper {\n width: 100%;\n height: 188px;\n margin-bottom: 32px;\n\n @media (min-width: 768px) {\n height: 292px;\n }\n}\n\n.button-next {\n cursor: pointer;\n}\n\n.button-prev {\n cursor: pointer;\n transform: rotate(180deg);\n}\n",".backdrop-modal-footer {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: auto;\n z-index: 10;\n background-color:var(--sidebar-categories);\n opacity: 1;\n scale: 1;\n visibility: visible;\n transition: opacity 250ms linear, scale 250ms linear, visibility 250ms linear;\n}\n.footer {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 15;\n display: flex;\n flex-direction: column;\n width: 335px;\n padding: 20px 0;\n margin-left: auto;\n margin-right: auto;\n background-color: var(--header);\n border: 2px solid var(--text-main);\n border-radius: 18px;\n}\n.backdrop-modal-footer.is-hidden-footer {\n opacity: 0;\n visibility: hidden;\n scale: 0.9;\n pointer-events: none;\n}\n.footer-head {\n color:var(--text-main);\n font-size: 40px;\n font-style: normal;\n font-weight: 700;\n line-height: 44px;\n letter-spacing: -1.6px;\n}\n.contact-list {\n display: flex;\n flex-direction: column;\n margin: 0;\n gap: 0 10px;\n}\n.contact-list-item {\n display: flex;\n flex-direction: row;\n gap: 5px;\n}\n.contact-text {\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: -0.48px;\n color: var(--sidebar-categories-current);\n}\n.contact-link {\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: -0.48px;\n text-decoration: none;\n}\n.footer-btn {\n position: fixed;\n left: 5px;\n bottom: 10px;\n display: inline-block;\n width: 28px;\n height: 28px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n.footer-gear {\n width: 28px;\n height: 28px;\n fill: var(--sidebar-categories-current);\n}\n.footer-btn:hover,\n.footer-btn:focus {\n -webkit-animation: rotate-center 1.5s linear infinite;\n animation: rotate-center 1.5s linear infinite;\n}\n@-webkit-keyframes rotate-center {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes rotate-center {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@media screen and (min-width: 768px) {\n .footer {\n width: 548px;\n }\n .contact-list {\n height: 84px;\n gap: 0 10px;\n flex-wrap: wrap;\n }\n .footer-btn {\n left: 5px;\n bottom: 10px;\n width: 40px;\n height: 40px;\n }\n .footer-gear {\n width: 40px;\n height: 40px;\n }\n}\n@media screen and (min-width: 1200px) {\n .footer {\n width: 804px;\n }\n .footer > .container {\n max-width: 800px;\n }\n .contact-list {\n height: 56px;\n }\n .footer-btn {\n left: 15px;\n bottom: 20px;\n width: 40px;\n height: 40px;\n }\n .footer-gear {\n width: 40px;\n height: 40px;\n }\n}\n","html {\n scroll-behavior: smooth;\n}\n@media screen and (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n}\n\n.visually-hidden {\n position: absolute;\n white-space: nowrap;\n width: 1px;\n height: 1px;\n overflow: hidden;\n border: 0;\n padding: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n margin: -1px;\n}\n\n.js-sroll-up {\n position: fixed;\n bottom: 0px;\n right: 0px;\n}\n\n.scroll-up-wrapper {\n border-radius: 50%;\n}\n\n.scroll-up-icon{\n width: 44px;\n height: 44px;\n margin-bottom: 16px;\n margin-right: 16px;\n}"],"names":[],"version":3,"file":"index.c8597b5a.css.map"} \ No newline at end of file diff --git a/index.c8597b5a.css b/index.e5315a88.css similarity index 70% rename from index.c8597b5a.css rename to index.e5315a88.css index e861177..d10fa2a 100644 --- a/index.c8597b5a.css +++ b/index.e5315a88.css @@ -1,3 +1,3 @@ /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ -*,:before,:after{box-sizing:border-box}html{tab-size:4;-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,select{text-transform:none}button{-webkit-appearance:button}[type=button]{-webkit-appearance:button}[type=reset]{-webkit-appearance:button}[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:root{--body:#f6f6f6;--header:#fff;--sidebar-categories:rgba(17,17,17,.6);--sidebar-categories-current:#4f2ee8;--text-main:#111;--scroll:#e0e0e0;--color-lite-dark-theme:#202024;--text-second:#b4afaf;--color-accent:#4f2ee8;--color-links:#eac645;--color-gradient:radial-gradient(189.32% 190.93% at 59.76% -23.42%,#4f2ee8 18.03%,#fff 100%);--timing-function:cubic-bezier(.4,0,.2,1)}p,h1,h2,h3,h4,h5,h6{margin:0}ul{margin:0;padding-left:0;list-style:none}img{max-width:100%;height:auto;display:block}li{list-style:none}a{color:currentColor;text-decoration:none}button{cursor:pointer}body{color:var(--text-main);background-color:var(--body);font-family:DM Sans,Montserrat,Roboto,Open Sans,Raleway,Arial,sans-serif;font-weight:700}.container{width:100%;max-width:375px;margin:0 auto;padding-left:20px;padding-right:20px}@media screen and (min-width:768px){.container{max-width:768px;padding-left:32px;padding-right:32px}}@media screen and (min-width:1440px){.container{max-width:1440px;padding-left:20px;padding-right:20px}}.no-scroll{overflow:hidden}[data-page-theme=light]{--body:#f6f6f6;--header:#fff;--sidebar-categories:rgba(17,17,17,.6);--sidebar-categories-current:#4f2ee8;--text-main:#111;--scroll:#e0e0e0}[data-page-theme=dark]{--scroll:rgba(17,17,17,.6);--body:#202024;--header:#111;--sidebar-categories:rgba(255,255,255,.6);--sidebar-categories-current:#eac645;--text-main:#fff}.sh-title{letter-spacing:-1.28px;margin-bottom:40px;font-size:32px;font-weight:700;line-height:1.19}.shopping-title{color:var(--text-main)}.title-span{color:var(--color-accent)}.empty-sh-list{display:none}.book-column-img{width:265px;height:198px;margin:0 auto}.shopping-list{flex-direction:column;gap:20px;display:flex}.sh-list-section img{max-width:100%;display:block}.shopping-list-item{background-color:var(--header);border:2px solid rgba(79,46,232,.4);border-radius:16px;padding:14px;display:flex}.sh-book-title{color:var(--text-main);letter-spacing:-.64px;margin-bottom:4px;font-size:16px;font-weight:700;line-height:1.13}.sh-book-category{color:var(--text-second);letter-spacing:.36px;margin-bottom:8px;font-size:12px;font-weight:400;line-height:1.17}.div-text-container{height:68px;overflow:hidden}.sh-book-description{color:var(--text-main);letter-spacing:-.56px;-webkit-line-clamp:4;text-overflow:ellipsis;-webkit-box-orient:vertical;font-size:14px;font-weight:400;line-height:1.23;display:-webkit-box}.sh-book-author{color:var(--text-second);letter-spacing:-.48px;font-size:12px;font-style:italic;font-weight:400;line-height:1.17}.shopping-links{align-items:center;gap:8px;display:flex}.sh-book-img{border-radius:8px;width:100px;height:142px;margin-right:14px}.sh-soc-item .amazon-store{width:32px;height:11px}.sh-soc-item .book-shop,.sh-soc-link .apple-store{width:16px;height:16px}.sh-wrap{flex-direction:column;gap:14px;display:flex;position:relative}.sh-list-delete-btn{background-color:var(--color-accent);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:flex;position:absolute;top:0;right:0}.sh-book-info-link-wrap{justify-content:space-between;display:flex}@media screen and (min-width:768px){.shopping-list-item{padding:30px 24px;display:flex;position:relative}.sh-title{letter-spacing:-1.92px;font-size:48px;line-height:1.08}.book-column-img{width:322px;height:241px}.sh-book-img{width:116px;height:165px;margin-right:24px}.sh-list-delete-btn{width:34px;height:34px;position:absolute;top:0;right:0}.sh-soc-item .amazon-store{width:48px;height:15px}.sh-soc-item .book-shop{width:32px;height:30px}.sh-soc-link .apple-store{width:28px;height:27px}.sh-wrap{flex-direction:column;justify-content:space-between;gap:14px;width:100%;display:flex}.sh-book-category{margin-bottom:8px}}.sh-list-delete-icon{fill:#4f2ee8;stroke:#fff}.header{border:1.5px solid var(--text-main);background-color:var(--header);border-radius:0 0 8px 8px;align-items:center;padding-top:18px;padding-bottom:18px;display:flex}.header-title{display:flex}.title-link{letter-spacing:-.03em;color:var(--text-main);align-items:center;font-size:14px;font-weight:700;line-height:1.29;text-decoration:none;display:flex}.header-link-home{letter-spacing:-.04em;color:var(--text-main);font-size:14px;font-weight:500;line-height:1.29}.current{background:var(--color-links);border-radius:36px;padding:8px 16px;font-weight:700}.header-shopping-link{letter-spacing:-.04em;color:var(--text-main);align-items:center;font-size:14px;font-weight:500;line-height:1.29;text-decoration:none;display:flex}.header-shopping-link.current{background:var(--color-links);border-radius:36px;padding:7px 16px;font-weight:700}a:link{text-decoration:none}.header-nav{gap:24px;list-style:none;display:flex}.shopping-icon{fill:var(--text-main);width:20px;height:20px;margin-right:8px;position:relative}.header-icon{fill:var(--text-main);width:109px;height:26px;position:relative}.theme-switch{width:40px;height:20px;margin-left:auto;position:relative}.theme-switch input{display:none}.theme-switch .toggle{cursor:pointer;background:linear-gradient(#4f2ee8,#dcdcdc);border-radius:20px;width:40px;height:20px;transition:background-color .3s;position:absolute;top:0;left:0}.theme-switch .toggle:before{content:"";background-color:#ffffe8;border-radius:50%;width:18px;height:18px;transition:transform .3s;position:absolute;top:1px;left:1px}.theme-switch input:checked+.toggle{background:linear-gradient(#4f2ee8,#686868)}.theme-switch input:checked+.toggle:before{transform:translate(20px)}@media screen and (max-width:767px){.header>.auth-menu-root,.header-nav{display:none}.backdrop-header{z-index:10;opacity:1;visibility:visible;background-color:rgba(17,17,17,.4);position:fixed;top:0;bottom:0;left:0;right:0;scale:1}.backdrop-header.is-hidden{opacity:0;visibility:hidden;pointer-events:none;scale:.9}.mob-menu-wrapper{max-width:375px;position:relative}.header .container{max-width:375px}.theme-auth{gap:24px;margin-left:auto;display:flex}.mobile-menu{z-index:12;background-color:var(--header);opacity:0;visibility:hidden;pointer-events:none;background-image:url(background-menu.58979710.png),linear-gradient(#4f2ee8,#dcdcdc);background-position:0 150%,50%;background-repeat:no-repeat;max-width:375px;height:100vh;position:fixed;top:0;right:0}.header-shopping.current{color:var(--text-main)}.shopping-icon{fill:#fff}.header-shopping{color:#fff}.mobile-header-nav{flex-direction:column;gap:16px;display:flex}}@media screen and (max-width:767px) and (min-device-pixel-ratio:2),screen and (max-width:767px) and (-webkit-min-device-pixel-ratio:2),screen and (max-width:767px) and (min-resolution:192dpi),screen and (max-width:767px) and (min-resolution:2dppx){.mobile-menu{background-image:url(background-menu@2x.bb2d1224.png),linear-gradient(#4f2ee8,#dcdcdc)}}@media screen and (max-width:767px){.menu-open{background-color:transparent;border:none;margin-left:14px;padding:0;display:block}.menu-open-icon{stroke:var(--text-main);width:28px;height:28px;display:block}.menu-open-icon:hover,.menu-open-icon:focus{stroke:#4f2ee8}.mobile-menu.is-visible{opacity:1;visibility:visible;pointer-events:auto}.mobile-container-header{border:1.5px solid var(--text-main);background-color:var(--header);border-radius:0 0 8px 8px;align-items:center;width:100%;padding:18px 20px;display:flex;position:absolute;top:0}.container.book{z-index:20;flex-direction:column;align-items:center;width:100vw;height:100vh;padding:20px;display:flex}.container-book{position:relative}.mobile-menu-close-btn{background-color:transparent;border:none;margin-left:14px;padding:0;display:block}.mobile-menu-close-btn-icon{stroke:var(--text-main);width:28px;height:28px;display:block}.mobile-header-nav{color:var(--header);padding-top:247px;padding-bottom:495px}.mobile-header-link-home{letter-spacing:-.04em;color:var(--text-main);margin-top:191px;margin-bottom:24px;font-size:14px;font-weight:500;line-height:1.29}.mobile-header-shopping-link{letter-spacing:-.04em;color:var(--text-main);align-items:center;font-size:14px;font-weight:500;line-height:1.29;text-decoration:none;display:flex}.current{background:#eac645;border-radius:36px;padding:8px 16px}}.header.container{justify-content:space-between}@media screen and (min-width:768px){.mobile-menu,.menu-open{display:none}.header-icon{margin-right:40px}.header-nav{align-items:center;gap:24px}.theme-switch{margin-right:24px}}@media screen and (min-width:1440px){.header-icon{margin-right:76px}}.hidden{display:none}.thumb{border-radius:8px;margin-bottom:14px;position:relative;overflow:hidden}.thumb>img{width:100%;height:100%}.book-title{color:var(--text-main);letter-spacing:-.64px;text-transform:uppercase;margin-bottom:4px;font-size:16px;line-height:1.125}.book-title:not(:lang(ae)):not(:lang(ar)):not(:lang(arc)):not(:lang(bcc)):not(:lang(bqi)):not(:lang(ckb)):not(:lang(dv)):not(:lang(fa)):not(:lang(glk)):not(:lang(he)):not(:lang(ku)):not(:lang(mzn)):not(:lang(nqo)):not(:lang(pnb)):not(:lang(ps)):not(:lang(sd)):not(:lang(ug)):not(:lang(ur)):not(:lang(yi)){text-align:left}.book-title:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.book-item .book-author{margin-bottom:0;font-size:12px;line-height:1.16}.book-item .book-author:not(:lang(ae)):not(:lang(ar)):not(:lang(arc)):not(:lang(bcc)):not(:lang(bqi)):not(:lang(ckb)):not(:lang(dv)):not(:lang(fa)):not(:lang(glk)):not(:lang(he)):not(:lang(ku)):not(:lang(mzn)):not(:lang(nqo)):not(:lang(pnb)):not(:lang(ps)):not(:lang(sd)):not(:lang(ug)):not(:lang(ur)):not(:lang(yi)){text-align:left}.book-item .book-author:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.overlay{background-color:var(--color-links);transition:transform .25s var(--timing-function);justify-content:center;align-items:center;width:100%;height:27%;display:flex;position:absolute;bottom:0;left:0;transform:translateY(100%)}.thumb:hover .overlay{transform:translateY(0)}.overlay-text{color:var(--text-main);letter-spacing:-.56px;text-transform:uppercase;font-size:30px;font-weight:500;line-height:1.28}.section-books-list li:not(:last-child){margin-bottom:40px}.section-categories-title,.section-books-title{letter-spacing:-1.28px;text-transform:capitalize;margin-bottom:40px;font-size:32px;line-height:1.19}.section-categories-list .btn{border:2px solid var(--color-accent);letter-spacing:-.14px;text-transform:uppercase;color:var(--text-main);cursor:pointer;background-color:var(--body);border-radius:40px;margin-left:auto;padding:12px 26px;font-size:14px;font-weight:700;line-height:1.29;display:block}@media screen and (min-width:768px){.thumb{min-width:0;height:316px}.overlay-text{font-size:20px}.section-books-list{flex-wrap:wrap;gap:40px 25px;display:flex}.section-books-list li:not(:last-child){margin-bottom:0}.section-books-list li{width:calc(33.3333% - 16.6667px)}.section-categories-title,.section-books-title{letter-spacing:-1.92px;font-size:48px;line-height:1.08}}@media screen and (min-width:1440px){.thumb{height:256px}.overlay-text{font-size:14px}.section-books-list{column-gap:24px}.section-books-list li{width:calc(20% - 19.2px)}}.main-wrapper{flex-direction:column;padding-top:40px;display:flex}@media screen and (min-width:768px){.main-wrapper{flex-direction:column;padding-top:40px}}@media screen and (min-width:1440px){.main-wrapper{flex-direction:row;gap:40px}}.main-container{padding-top:40px}@media screen and (min-width:768px){.main-container{padding-top:100px}}@media screen and (min-width:1440px){.main-container{padding-top:0}}.section-categories-title{letter-spacing:-1.28px;margin-bottom:40px;font-size:32px;font-weight:700;line-height:1.18}@media screen and (min-width:768px){.section-categories-title{letter-spacing:-1.92px;margin-bottom:40px;font-size:48px;font-weight:700;line-height:1.08}}.accent{color:var(--color-accent)}.section-categories-list{flex-direction:column;gap:40px;display:flex}.category-block-title{color:var(--text-second);letter-spacing:.42px;text-transform:uppercase;margin-bottom:18px;font-size:14px;font-weight:400;line-height:1.28}.books-list{flex-direction:column;margin-bottom:8px;display:flex}@media screen and (min-width:768px){.books-list{flex-direction:row;gap:24px}}.btn{cursor:pointer;border:2px solid var(--color-accent);color:var(--text-main);letter-spacing:-.14px;text-transform:uppercase;border-radius:40px;margin-left:auto;padding:14px 28px;font-size:14px;font-weight:700;line-height:1.28;display:block}.thumb{margin-bottom:14px}.thumb>img{border-radius:8px;width:100%}.overlay{display:none}.book-title{letter-spacing:-.64px;text-transform:uppercase;margin-bottom:4px;font-family:DM Sans;font-size:16px;font-weight:700;line-height:1.12}.book-author{color:var(--text-second);letter-spacing:-.48px;font-size:12px;font-style:italic;font-weight:400;line-height:1.16}.book-item{cursor:pointer;width:100%;display:block}@media screen and (min-width:768px){.book-item{width:218px}}@media screen and (min-width:1440px){.book-item{width:180px}}@media screen and (max-width:767px){.element-books-list:nth-child(n+2){display:none}}@media screen and (min-width:768px){.element-books-list:nth-child(n+4){display:none}}@media screen and (min-width:1440px){.element-books-list:nth-child(n+4){display:block}}.category-container{width:100%;height:228px;display:flex;overflow-y:scroll}.category-container::-webkit-scrollbar{width:8px}.category-container::-webkit-scrollbar-thumb{background-color:var(--scroll);border-radius:12px;height:114px}.category-list{flex-direction:column;gap:24px;width:307px;display:flex}.category-item{letter-spacing:.02em;font-size:16px;font-weight:400;line-height:1.33}.category-link{color:var(--text-main);white-space:nowrap}.active{color:var(--sidebar-categories-current);text-transform:uppercase;font-size:16px;font-weight:700}@media screen and (min-width:768px){.category-list{gap:32px;width:309px}.category-container::-webkit-scrollbar-thumb{height:168px}.category-container{width:100%;max-width:350px;height:472px}}@media screen and (min-width:1440px){.category-list{gap:32px;width:318px}.category-item{font-weight:300}.category-container{width:100%;max-width:100%;height:472px}}.backdrop-modal{z-index:10;opacity:1;visibility:visible;filter:blur();background-color:rgba(17,17,17,.4);transition:opacity .25s linear,scale .25s linear,visibility .25s linear;position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto;scale:1}.backdrop-modal.is-hidden{opacity:0;visibility:hidden;pointer-events:none;filter:blur(20px);scale:.9}.container-popup{z-index:15;background-color:var(--header);border:2px solid var(--text-main);border-radius:18px;flex-direction:column;width:335px;max-height:806px;margin-left:auto;margin-right:auto;padding:40px 24px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.modal-btn{text-transform:uppercase;letter-spacing:-.14px;color:var(--text-main);background-color:var(--header);border:2px solid var(--color-accent);border-radius:40px;margin-left:auto;margin-right:auto;font-size:14px;font-weight:700;line-height:1.28}.btn-add{height:46px;padding:14px 28px}.btn-remove{height:46px;padding:14px 23px}.btn-close-modal{width:24px;height:24px;position:absolute}.close-modal{stroke:var(--text-main);background-color:transparent;border:none;position:absolute;top:12px;right:12px}.close-cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.close-modal:is(:hover,:focus){stroke:var(--color-accent)}.btn-add:is(:hover,:focus){background-color:var(--color-accent);color:var(--color-white-theme)}.btn-remove:is(:hover,:focus){background-color:var(--color-accent);color:var(--color-white-theme)}.img-container-pop-up{border-radius:8px;height:408px;margin-bottom:14px;position:relative;overflow:hidden}.img-modal{width:100%}.book-header{letter-spacing:-.64px;margin-bottom:4px;font-size:16px;line-height:1.28}.book-author{color:var(--text-second);letter-spacing:-.48px;margin-bottom:18px;font-size:12px;font-style:italic;font-weight:400;line-height:1.16}.book-description{letter-spacing:-.56px;margin-bottom:16px;font-size:14px;font-weight:400;line-height:1.28}.icons-modal{gap:20px;margin-bottom:40px;display:flex}.book-stores{align-items:center;gap:20px;margin-bottom:40px;display:flex}.book-modal{filter:saturate(0%)}.amazon-logo:is(:hover,:focus){filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))saturate(0)}.apple-book-logo:is(:hover,:focus){filter:saturate(0%)drop-shadow(0 2px 4px rgba(0,0,0,.2))}.book-shop-logo:is(:hover,:focus){filter:saturate(0%)drop-shadow(0 2px 4px rgba(0,0,0,.2))}.modal-congrats-text{color:var(--sidebar-categories);text-align:center;letter-spacing:-.4px;width:242px;height:36px;margin-top:4px;margin-left:auto;margin-right:auto;font-size:10px;font-weight:400;line-height:12px}.amazon-logo{width:62px;height:19px}.apple-book-logo{width:33px;height:32px}.book-shop-logo{width:38px;height:36px}.js-dark-mode{background-color:var(--color-lite-dark-theme);stroke:var(--header);color:var(--header)}.js-dark-mode-amazon{filter:brightness(0)invert()}.js-dark-mode-congrats{color:var(--sidebar-categories)}.default-book-pop-up{fill:var(--color-button);width:60px;height:64px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media screen and (min-width:768px){.container-popup{width:579px;max-height:501px;padding:40px}.book-header{letter-spacing:-.96px;margin-bottom:8px;font-size:24px;line-height:1.16}.book-author{letter-spacing:-.56px;margin-bottom:20px;font-size:14px;line-height:1.28}.book-description{margin-bottom:20px}.modal-text-container{width:279px}.modal-content-container{gap:24px;display:flex}.img-container-pop-up{width:192px;height:281px;margin-bottom:40px}.btn-add{width:100%;height:64px;padding:14px 28px}.btn-remove{width:100%;height:64px;padding:14px 23px}.modal-btn{letter-spacing:-.18px;font-size:18px;line-height:1.56}.modal-congrats-text{letter-spacing:-.48px;width:324px;margin-top:8px;font-size:12px;line-height:14px}}@media screen and (min-width:1440px){.container-popup{width:579px;height:501px}}.sidebar{flex-direction:column;gap:40px;width:335px;display:flex}@media screen and (min-width:768px){.sidebar{flex-direction:row;gap:32px;width:704px}}@media screen and (min-width:1440px){.sidebar{flex-direction:column;gap:86px;width:356px}}.support-container{text-align:center;color:#fff;background:radial-gradient(189.32% 190.93% at 59.76% -23.42%,#4f2ee8 18.03%,#fff 100%);border-radius:16px;width:335px;padding:24px 40px 20px;box-shadow:0 10px 10px rgba(245,245,247,.1)}@media screen and (min-width:1440px){.support-container{width:100%}}.support-title{letter-spacing:-1.12px;margin-bottom:40px;font-size:28px;font-weight:700;line-height:32px}.fund-list{counter-reset:my-counter;list-style-type:none}.fund-list li{counter-increment:my-counter;align-items:center;margin-bottom:20px;display:flex}.fund-list li:before{content:counter(my-counter,decimal-leading-zero);letter-spacing:-.56px;margin-right:16px;font-size:14px;font-weight:400;line-height:18px}.icon-trident{fill:#fff;margin-left:12px;transform:translateY(7px)}.support-img{filter:brightness(0%)invert()}.swiper{width:100%;height:188px;margin-bottom:32px}@media (min-width:768px){.swiper{height:292px}}.button-next{cursor:pointer}.button-prev{cursor:pointer;transform:rotate(180deg)}.backdrop-modal-footer{z-index:10;background-color:var(--sidebar-categories);opacity:1;visibility:visible;transition:opacity .25s linear,scale .25s linear,visibility .25s linear;position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto;scale:1}.footer{z-index:15;background-color:var(--header);border:2px solid var(--text-main);border-radius:18px;flex-direction:column;width:335px;margin-left:auto;margin-right:auto;padding:20px 0;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.backdrop-modal-footer.is-hidden-footer{opacity:0;visibility:hidden;pointer-events:none;scale:.9}.footer-head{color:var(--text-main);letter-spacing:-1.6px;font-size:40px;font-style:normal;font-weight:700;line-height:44px}.contact-list{flex-direction:column;gap:0 10px;margin:0;display:flex}.contact-list-item{flex-direction:row;gap:5px;display:flex}.contact-text{letter-spacing:-.48px;color:var(--sidebar-categories-current);font-size:12px;font-weight:400;line-height:14px}.contact-link{letter-spacing:-.48px;font-size:12px;font-weight:400;line-height:14px;text-decoration:none}.footer-btn{cursor:pointer;width:28px;height:28px;margin:0;padding:0;display:inline-block;position:fixed;bottom:10px;left:5px}.footer-gear{fill:var(--sidebar-categories-current);width:28px;height:28px}.footer-btn:hover,.footer-btn:focus{animation:1.5s linear infinite rotate-center}@keyframes rotate-center{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (min-width:768px){.footer{width:548px}.contact-list{flex-wrap:wrap;gap:0 10px;height:84px}.footer-btn{width:40px;height:40px;bottom:10px;left:5px}.footer-gear{width:40px;height:40px}}@media screen and (min-width:1200px){.footer{width:804px}.footer>.container{max-width:800px}.contact-list{height:56px}.footer-btn{width:40px;height:40px;bottom:20px;left:15px}.footer-gear{width:40px;height:40px}}html{scroll-behavior:smooth}@media screen and (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.visually-hidden{white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.js-sroll-up{position:fixed;bottom:0;right:0}.scroll-up-wrapper{border-radius:50%}.scroll-up-icon{width:44px;height:44px;margin-bottom:16px;margin-right:16px} -/*# sourceMappingURL=index.c8597b5a.css.map */ +*,:before,:after{box-sizing:border-box}html{tab-size:4;-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,select{text-transform:none}button{-webkit-appearance:button}[type=button]{-webkit-appearance:button}[type=reset]{-webkit-appearance:button}[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:root{--body:#f6f6f6;--header:#fff;--sidebar-categories:rgba(17,17,17,.6);--sidebar-categories-current:#4f2ee8;--text-main:#111;--scroll:#e0e0e0;--color-lite-dark-theme:#202024;--text-second:#b4afaf;--color-accent:#4f2ee8;--color-links:#eac645;--color-gradient:radial-gradient(189.32% 190.93% at 59.76% -23.42%,#4f2ee8 18.03%,#fff 100%);--timing-function:cubic-bezier(.4,0,.2,1)}p,h1,h2,h3,h4,h5,h6{margin:0}ul{margin:0;padding-left:0;list-style:none}img{max-width:100%;height:auto;display:block}li{list-style:none}a{color:currentColor;text-decoration:none}button{cursor:pointer}body{color:var(--text-main);background-color:var(--body);font-family:DM Sans,Montserrat,Roboto,Open Sans,Raleway,Arial,sans-serif;font-weight:700}.container{width:100%;max-width:375px;margin:0 auto;padding-left:20px;padding-right:20px}@media screen and (min-width:768px){.container{max-width:768px;padding-left:32px;padding-right:32px}}@media screen and (min-width:1440px){.container{max-width:1440px;padding-left:20px;padding-right:20px}}.no-scroll{overflow:hidden}[data-page-theme=light]{--body:#f6f6f6;--header:#fff;--sidebar-categories:rgba(17,17,17,.6);--sidebar-categories-current:#4f2ee8;--text-main:#111;--scroll:#e0e0e0}[data-page-theme=dark]{--scroll:rgba(17,17,17,.6);--body:#202024;--header:#111;--sidebar-categories:rgba(255,255,255,.6);--sidebar-categories-current:#eac645;--text-main:#fff}.sh-title{letter-spacing:-1.28px;margin-bottom:40px;font-size:32px;font-weight:700;line-height:1.19}.shopping-title{color:var(--text-main)}.title-span{color:var(--color-accent)}.empty-sh-list{display:none}.book-column-img{width:265px;height:198px;margin:0 auto}.shopping-list{flex-direction:column;gap:20px;display:flex}.sh-list-section img{max-width:100%;display:block}.shopping-list-item{background-color:var(--header);border:2px solid rgba(79,46,232,.4);border-radius:16px;padding:14px;display:flex}.sh-book-title{color:var(--text-main);letter-spacing:-.64px;margin-bottom:4px;font-size:16px;font-weight:700;line-height:1.13}.sh-book-category{color:var(--text-second);letter-spacing:.36px;margin-bottom:8px;font-size:12px;font-weight:400;line-height:1.17}.div-text-container{height:68px;overflow:hidden}.sh-book-description{color:var(--text-main);letter-spacing:-.56px;-webkit-line-clamp:4;text-overflow:ellipsis;-webkit-box-orient:vertical;font-size:14px;font-weight:400;line-height:1.23;display:-webkit-box}.sh-book-author{color:var(--text-second);letter-spacing:-.48px;font-size:12px;font-style:italic;font-weight:400;line-height:1.17}.shopping-links{align-items:center;gap:8px;display:flex}.sh-book-img{border-radius:8px;width:100px;height:142px;margin-right:14px}.sh-soc-item .amazon-store{width:32px;height:11px}.sh-soc-item .book-shop,.sh-soc-link .apple-store{width:16px;height:16px}.sh-wrap{flex-direction:column;gap:14px;display:flex;position:relative}.sh-list-delete-btn{background-color:var(--color-accent);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:flex;position:absolute;top:0;right:0}.sh-book-info-link-wrap{justify-content:space-between;display:flex}@media screen and (min-width:768px){.shopping-list-item{padding:30px 24px;display:flex;position:relative}.sh-title{letter-spacing:-1.92px;font-size:48px;line-height:1.08}.book-column-img{width:322px;height:241px}.sh-book-img{width:116px;height:165px;margin-right:24px}.sh-list-delete-btn{width:34px;height:34px;position:absolute;top:0;right:0}.sh-soc-item .amazon-store{width:48px;height:15px}.sh-soc-item .book-shop{width:32px;height:30px}.sh-soc-link .apple-store{width:28px;height:27px}.sh-wrap{flex-direction:column;justify-content:space-between;gap:14px;width:100%;display:flex}.sh-book-category{margin-bottom:8px}}.sh-list-delete-icon{fill:#4f2ee8;stroke:#fff}.header{border:1.5px solid var(--text-main);background-color:var(--header);border-radius:0 0 8px 8px;align-items:center;padding-top:18px;padding-bottom:18px;display:flex}.header-title{display:flex}.title-link{letter-spacing:-.03em;color:var(--text-main);align-items:center;font-size:14px;font-weight:700;line-height:1.29;text-decoration:none;display:flex}.header-link-home{letter-spacing:-.04em;color:var(--text-main);font-size:14px;font-weight:500;line-height:1.29}.current{background:var(--color-links);border-radius:36px;padding:8px 16px;font-weight:700}.header-shopping-link{letter-spacing:-.04em;color:var(--text-main);align-items:center;font-size:14px;font-weight:500;line-height:1.29;text-decoration:none;display:flex}.header-shopping-link.current{background:var(--color-links);border-radius:36px;padding:7px 16px;font-weight:700}a:link{text-decoration:none}.header-nav{gap:24px;list-style:none;display:flex}.shopping-icon{fill:var(--text-main);width:20px;height:20px;margin-right:8px;position:relative}.header-icon{fill:var(--text-main);width:109px;height:26px;position:relative}.theme-switch{width:40px;height:20px;margin-left:auto;position:relative}.theme-switch input{display:none}.theme-switch .toggle{cursor:pointer;background:linear-gradient(#4f2ee8,#dcdcdc);border-radius:20px;width:40px;height:20px;transition:background-color .3s;position:absolute;top:0;left:0}.theme-switch .toggle:before{content:"";background-color:#ffffe8;border-radius:50%;width:18px;height:18px;transition:transform .3s;position:absolute;top:1px;left:1px}.theme-switch input:checked+.toggle{background:linear-gradient(#4f2ee8,#686868)}.theme-switch input:checked+.toggle:before{transform:translate(20px)}@media screen and (max-width:767px){.header>.auth-menu-root,.header-nav{display:none}.backdrop-header{z-index:10;opacity:1;visibility:visible;background-color:rgba(17,17,17,.4);position:fixed;top:0;bottom:0;left:0;right:0;scale:1}.backdrop-header.is-hidden{opacity:0;visibility:hidden;pointer-events:none;scale:.9}.mob-menu-wrapper{max-width:375px;position:relative}.header .container{max-width:375px}.theme-auth{gap:24px;margin-left:auto;display:flex}.mobile-menu{z-index:12;background-color:var(--header);opacity:0;visibility:hidden;pointer-events:none;background-image:url(background-menu.58979710.png),linear-gradient(#4f2ee8,#dcdcdc);background-position:0 150%,50%;background-repeat:no-repeat;max-width:375px;height:100vh;position:fixed;top:0;right:0}.header-shopping.current{color:var(--text-main)}.shopping-icon{fill:#fff}.header-shopping{color:#fff}.mobile-header-nav{flex-direction:column;gap:16px;display:flex}}@media screen and (max-width:767px) and (min-device-pixel-ratio:2),screen and (max-width:767px) and (-webkit-min-device-pixel-ratio:2),screen and (max-width:767px) and (min-resolution:192dpi),screen and (max-width:767px) and (min-resolution:2dppx){.mobile-menu{background-image:url(background-menu@2x.bb2d1224.png),linear-gradient(#4f2ee8,#dcdcdc)}}@media screen and (max-width:767px){.menu-open{background-color:transparent;border:none;margin-left:14px;padding:0;display:block}.menu-open-icon{stroke:var(--text-main);width:28px;height:28px;display:block}.menu-open-icon:hover,.menu-open-icon:focus{stroke:#4f2ee8}.mobile-menu.is-visible{opacity:1;visibility:visible;pointer-events:auto}.mobile-container-header{border:1.5px solid var(--text-main);background-color:var(--header);border-radius:0 0 8px 8px;align-items:center;width:100%;padding:18px 20px;display:flex;position:absolute;top:0}.container.book{z-index:20;flex-direction:column;align-items:center;width:100vw;height:100vh;padding:20px;display:flex}.container-book{position:relative}.mobile-menu-close-btn{background-color:transparent;border:none;margin-left:14px;padding:0;display:block}.mobile-menu-close-btn-icon{stroke:var(--text-main);width:28px;height:28px;display:block}.mobile-header-nav{color:var(--header);padding-top:247px;padding-bottom:495px}.mobile-header-link-home{letter-spacing:-.04em;color:var(--text-main);margin-top:191px;margin-bottom:24px;font-size:14px;font-weight:500;line-height:1.29}.mobile-header-shopping-link{letter-spacing:-.04em;color:var(--text-main);align-items:center;font-size:14px;font-weight:500;line-height:1.29;text-decoration:none;display:flex}.current{background:#eac645;border-radius:36px;padding:8px 16px}}.header.container{justify-content:space-between}@media screen and (min-width:768px){.mobile-menu,.menu-open{display:none}.header-icon{margin-right:40px}.header-nav{align-items:center;gap:24px}.theme-switch{margin-right:24px}}@media screen and (min-width:1440px){.header-icon{margin-right:76px}}.hidden{display:none}.thumb{border-radius:8px;margin-bottom:14px;position:relative;overflow:hidden}.thumb>img{width:100%;height:100%}.book-title{color:var(--text-main);letter-spacing:-.64px;text-transform:uppercase;margin-bottom:4px;font-size:16px;line-height:1.125}.book-title:not(:lang(ae)):not(:lang(ar)):not(:lang(arc)):not(:lang(bcc)):not(:lang(bqi)):not(:lang(ckb)):not(:lang(dv)):not(:lang(fa)):not(:lang(glk)):not(:lang(he)):not(:lang(ku)):not(:lang(mzn)):not(:lang(nqo)):not(:lang(pnb)):not(:lang(ps)):not(:lang(sd)):not(:lang(ug)):not(:lang(ur)):not(:lang(yi)){text-align:left}.book-title:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.book-item .book-author{margin-bottom:0;font-size:12px;line-height:1.16}.book-item .book-author:not(:lang(ae)):not(:lang(ar)):not(:lang(arc)):not(:lang(bcc)):not(:lang(bqi)):not(:lang(ckb)):not(:lang(dv)):not(:lang(fa)):not(:lang(glk)):not(:lang(he)):not(:lang(ku)):not(:lang(mzn)):not(:lang(nqo)):not(:lang(pnb)):not(:lang(ps)):not(:lang(sd)):not(:lang(ug)):not(:lang(ur)):not(:lang(yi)){text-align:left}.book-item .book-author:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.overlay{background-color:var(--color-links);transition:transform .25s var(--timing-function);justify-content:center;align-items:center;width:100%;height:27%;display:flex;position:absolute;bottom:0;left:0;transform:translateY(100%)}.thumb:hover .overlay{transform:translateY(0)}.overlay-text{color:var(--text-main);letter-spacing:-.56px;text-transform:uppercase;font-size:30px;font-weight:500;line-height:1.28}.section-books-list li:not(:last-child){margin-bottom:40px}.section-categories-title,.section-books-title{letter-spacing:-1.28px;text-transform:capitalize;margin-bottom:40px;font-size:32px;line-height:1.19}.section-categories-list .btn{border:2px solid var(--color-accent);letter-spacing:-.14px;text-transform:uppercase;color:var(--text-main);cursor:pointer;background-color:var(--body);border-radius:40px;margin-left:auto;padding:12px 26px;font-size:14px;font-weight:700;line-height:1.29;display:block}@media screen and (min-width:768px){.thumb{min-width:0;height:316px}.overlay-text{font-size:20px}.section-books-list{flex-wrap:wrap;gap:40px 25px;display:flex}.section-books-list li:not(:last-child){margin-bottom:0}.section-books-list li{width:calc(33.3333% - 16.6667px)}.section-categories-title,.section-books-title{letter-spacing:-1.92px;font-size:48px;line-height:1.08}}@media screen and (min-width:1440px){.thumb{height:256px}.overlay-text{font-size:14px}.section-books-list{column-gap:24px}.section-books-list li{width:calc(20% - 19.2px)}}.main-wrapper{flex-direction:column;padding-top:40px;display:flex}@media screen and (min-width:768px){.main-wrapper{flex-direction:column;padding-top:40px}}@media screen and (min-width:1440px){.main-wrapper{flex-direction:row;gap:40px}}.main-container{padding-top:40px}@media screen and (min-width:768px){.main-container{padding-top:100px}}@media screen and (min-width:1440px){.main-container{padding-top:0}}.section-categories-title{letter-spacing:-1.28px;margin-bottom:40px;font-size:32px;font-weight:700;line-height:1.18}@media screen and (min-width:768px){.section-categories-title{letter-spacing:-1.92px;margin-bottom:40px;font-size:48px;font-weight:700;line-height:1.08}}.accent{color:var(--color-accent)}.section-categories-list{flex-direction:column;gap:40px;display:flex}.category-block-title{color:var(--text-second);letter-spacing:.42px;text-transform:uppercase;margin-bottom:18px;font-size:14px;font-weight:400;line-height:1.28}.books-list{flex-direction:column;margin-bottom:8px;display:flex}@media screen and (min-width:768px){.books-list{flex-direction:row;gap:24px}}.btn{cursor:pointer;border:2px solid var(--color-accent);color:var(--text-main);letter-spacing:-.14px;text-transform:uppercase;border-radius:40px;margin-left:auto;padding:14px 28px;font-size:14px;font-weight:700;line-height:1.28;display:block}.thumb{margin-bottom:14px}.thumb>img{border-radius:8px;width:100%}.overlay{display:none}.book-title{letter-spacing:-.64px;text-transform:uppercase;margin-bottom:4px;font-family:DM Sans;font-size:16px;font-weight:700;line-height:1.12}.book-author{color:var(--text-second);letter-spacing:-.48px;font-size:12px;font-style:italic;font-weight:400;line-height:1.16}.book-item{cursor:pointer;width:100%;display:block}@media screen and (min-width:768px){.book-item{width:218px}}@media screen and (min-width:1440px){.book-item{width:180px}}@media screen and (max-width:767px){.element-books-list:nth-child(n+2){display:none}}@media screen and (min-width:768px){.element-books-list:nth-child(n+4){display:none}}@media screen and (min-width:1440px){.element-books-list:nth-child(n+4){display:block}}.category-container{width:100%;height:228px;display:flex;overflow-y:scroll}.category-container::-webkit-scrollbar{width:8px}.category-container::-webkit-scrollbar-thumb{background-color:var(--scroll);border-radius:12px;height:114px}.category-list{flex-direction:column;gap:24px;width:307px;display:flex}.category-item{letter-spacing:.02em;font-size:16px;font-weight:400;line-height:1.33}.category-link{color:var(--text-main);white-space:nowrap}.active{color:var(--sidebar-categories-current);text-transform:uppercase;font-size:16px;font-weight:700}@media screen and (min-width:768px){.category-list{gap:32px;width:309px}.category-container::-webkit-scrollbar-thumb{height:168px}.category-container{width:100%;max-width:350px;height:472px}}@media screen and (min-width:1440px){.category-list{gap:32px;width:318px}.category-item{font-weight:300}.category-container{width:100%;max-width:100%;height:472px}}.backdrop-modal{z-index:10;opacity:1;visibility:visible;filter:blur();background-color:rgba(17,17,17,.4);transition:opacity .25s linear,scale .25s linear,visibility .25s linear;position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto;scale:1}.backdrop-modal.is-hidden{opacity:0;visibility:hidden;pointer-events:none;filter:blur(20px);scale:.9}.container-popup{z-index:15;background-color:var(--header);border:2px solid var(--text-main);border-radius:18px;flex-direction:column;width:335px;max-height:806px;margin-left:auto;margin-right:auto;padding:40px 24px;display:flex;position:absolute;top:20px;left:50%;transform:translate(-50%)}.modal-btn{text-transform:uppercase;letter-spacing:-.14px;color:var(--text-main);background-color:var(--header);border:2px solid var(--color-accent);border-radius:40px;margin-left:auto;margin-right:auto;font-size:14px;font-weight:700;line-height:1.28}.btn-add{height:46px;padding:14px 28px}.btn-remove{height:46px;padding:14px 23px}.btn-close-modal{width:24px;height:24px;position:absolute}.close-modal{stroke:var(--text-main);background-color:transparent;border:none;position:absolute;top:12px;right:12px}.close-cross{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.close-modal:is(:hover,:focus){stroke:var(--color-accent)}.btn-add:is(:hover,:focus){background-color:var(--color-accent);color:var(--color-white-theme)}.btn-remove:is(:hover,:focus){background-color:var(--color-accent);color:var(--color-white-theme)}.img-container-pop-up{border-radius:8px;height:408px;margin-bottom:14px;position:relative;overflow:hidden}.img-modal{width:100%}.book-header{letter-spacing:-.64px;margin-bottom:4px;font-size:16px;line-height:1.28}.book-author{color:var(--text-second);letter-spacing:-.48px;margin-bottom:18px;font-size:12px;font-style:italic;font-weight:400;line-height:1.16}.book-description{letter-spacing:-.56px;margin-bottom:16px;font-size:14px;font-weight:400;line-height:1.28}.icons-modal{gap:20px;margin-bottom:40px;display:flex}.book-stores{align-items:center;gap:20px;margin-bottom:40px;display:flex}.book-modal{filter:saturate(0%)}.amazon-logo:is(:hover,:focus){filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))saturate(0)}.apple-book-logo:is(:hover,:focus){filter:saturate(0%)drop-shadow(0 2px 4px rgba(0,0,0,.2))}.book-shop-logo:is(:hover,:focus){filter:saturate(0%)drop-shadow(0 2px 4px rgba(0,0,0,.2))}.modal-congrats-text{color:var(--sidebar-categories);text-align:center;letter-spacing:-.4px;width:242px;height:36px;margin-top:4px;margin-left:auto;margin-right:auto;font-size:10px;font-weight:400;line-height:12px}.amazon-logo{width:62px;height:19px}.apple-book-logo{width:33px;height:32px}.book-shop-logo{width:38px;height:36px}.js-dark-mode{background-color:var(--color-lite-dark-theme);stroke:var(--header);color:var(--header)}.js-dark-mode-amazon{filter:brightness(0)invert()}.js-dark-mode-congrats{color:var(--sidebar-categories)}.default-book-pop-up{fill:var(--color-button);width:60px;height:64px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media screen and (min-width:768px){.container-popup{width:579px;max-height:501px;padding:40px}.book-header{letter-spacing:-.96px;margin-bottom:8px;font-size:24px;line-height:1.16}.book-author{letter-spacing:-.56px;margin-bottom:20px;font-size:14px;line-height:1.28}.book-description{margin-bottom:20px}.modal-text-container{width:279px}.modal-content-container{gap:24px;display:flex}.img-container-pop-up{width:192px;height:281px;margin-bottom:40px}.btn-add{width:100%;height:64px;padding:14px 28px}.btn-remove{width:100%;height:64px;padding:14px 23px}.modal-btn{letter-spacing:-.18px;font-size:18px;line-height:1.56}.modal-congrats-text{letter-spacing:-.48px;width:324px;margin-top:8px;font-size:12px;line-height:14px}}@media screen and (min-width:1440px){.container-popup{width:579px;height:501px}}.sidebar{flex-direction:column;gap:40px;display:flex}@media screen and (min-width:768px){.sidebar{flex-direction:row;gap:32px;width:704px}}@media screen and (min-width:1440px){.sidebar{flex-direction:column;gap:86px;width:356px}}.support-container{text-align:center;color:#fff;background:radial-gradient(189.32% 190.93% at 59.76% -23.42%,#4f2ee8 18.03%,#fff 100%);border-radius:16px;width:100%;max-width:335px;padding:24px 40px 20px;box-shadow:0 10px 10px rgba(245,245,247,.1)}@media screen and (min-width:1440px){.support-container{width:100%}}.support-title{letter-spacing:-1.12px;margin-bottom:40px;font-size:28px;font-weight:700;line-height:32px}.fund-list{counter-reset:my-counter;list-style-type:none}.fund-list li{counter-increment:my-counter;align-items:center;margin-bottom:20px;display:flex}.fund-list li:before{content:counter(my-counter,decimal-leading-zero);letter-spacing:-.56px;margin-right:16px;font-size:14px;font-weight:400;line-height:18px}.icon-trident{fill:#fff;margin-left:12px;transform:translateY(7px)}.support-img{filter:brightness(0%)invert()}.swiper{width:100%;height:188px;margin-bottom:32px}@media (min-width:768px){.swiper{height:292px}}.button-next{cursor:pointer}.button-prev{cursor:pointer;transform:rotate(180deg)}.backdrop-modal-footer{z-index:10;background-color:var(--sidebar-categories);opacity:1;visibility:visible;transition:opacity .25s linear,scale .25s linear,visibility .25s linear;position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto;scale:1}.footer{z-index:15;background-color:var(--header);border:2px solid var(--text-main);border-radius:18px;flex-direction:column;width:335px;margin-left:auto;margin-right:auto;padding:20px 0;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.backdrop-modal-footer.is-hidden-footer{opacity:0;visibility:hidden;pointer-events:none;scale:.9}.footer-head{color:var(--text-main);letter-spacing:-1.6px;font-size:40px;font-style:normal;font-weight:700;line-height:44px}.contact-list{flex-direction:column;gap:0 10px;margin:0;display:flex}.contact-list-item{flex-direction:row;gap:5px;display:flex}.contact-text{letter-spacing:-.48px;color:var(--sidebar-categories-current);font-size:12px;font-weight:400;line-height:14px}.contact-link{letter-spacing:-.48px;font-size:12px;font-weight:400;line-height:14px;text-decoration:none}.footer-btn{cursor:pointer;width:28px;height:28px;margin:0;padding:0;display:inline-block;position:fixed;bottom:10px;left:5px}.footer-gear{fill:var(--sidebar-categories-current);width:28px;height:28px}.footer-btn:hover,.footer-btn:focus{animation:1.5s linear infinite rotate-center}@keyframes rotate-center{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (min-width:768px){.footer{width:548px}.contact-list{flex-wrap:wrap;gap:0 10px;height:84px}.footer-btn{width:40px;height:40px;bottom:10px;left:5px}.footer-gear{width:40px;height:40px}}@media screen and (min-width:1200px){.footer{width:804px}.footer>.container{max-width:800px}.contact-list{height:56px}.footer-btn{width:40px;height:40px;bottom:20px;left:15px}.footer-gear{width:40px;height:40px}}html{scroll-behavior:smooth}@media screen and (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.visually-hidden{white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.js-sroll-up{position:fixed;bottom:0;right:0}.scroll-up-wrapper{border-radius:50%}.scroll-up-icon{width:44px;height:44px;margin-bottom:16px;margin-right:16px} +/*# sourceMappingURL=index.e5315a88.css.map */ diff --git a/index.e5315a88.css.map b/index.e5315a88.css.map new file mode 100644 index 0000000..b2b8d25 --- /dev/null +++ b/index.e5315a88.css.map @@ -0,0 +1 @@ +{"mappings":"gG,uC,+D,2L,0B,sF,4B,iH,oB,8E,kB,c,yC,mG,kC,iC,wC,uC,wC,+C,8C,iC,iB,iC,wC,wC,+D,oD,oE,0BGEA,2XAmBA,6BAUA,2CAMA,6CAMA,mBAIA,0CAKA,sBAQA,kJAQA,yFAME,oCANF,iEAYE,qCAZF,kEAmBA,2BAiBA,mKASA,+KCjHA,oGAOA,uCAGA,sCAIA,4BAGA,wDAMA,2DAMA,kDAKA,oIASA,8HAQA,kIASA,gDAKA,8MAWA,iIASA,wDAMA,0EAOA,kDAIA,yEAUA,uEAWA,8NAkBA,mEAQA,oCACE,qEAMA,iEAKA,0CAKA,wDAMA,2EAQA,kDAIA,+CAKA,iDAKA,8FAQA,qCAQF,8CClNA,0KAUA,2BAIA,8JAUA,+GAQA,2FAOA,wKAUA,gHAOA,4BAIA,kDAKA,+FAOA,6EAQA,wEAOA,iCAIA,0LAgBA,sKAYA,gFAQA,qEAGA,oCACE,iDAOA,iJAgBA,oFAOA,oDAKA,mCAIA,mDAMA,iUAkBA,gDAIA,yBAGA,4BAIA,gEAMA,wPAGE,sHApFJ,oCA0FE,6FAQA,6EAMA,2DAKA,yEAMA,2MAeA,uHAUA,kCAIA,yGASA,yFAOA,8EAMA,0JASA,+KAWA,iEAOF,gDAIA,oCACE,qCAIA,+BAGA,wCAKA,iCAMF,qCACE,gCC3VF,qBAMA,8EAOA,kCAKA,qIAAA,iUAAA,uOAUA,wEAAA,6UAAA,mPAOA,wOAeA,8CAIA,oIASA,2DAgBA,mJAWA,ySAmBA,oCACE,gCAKA,6BAIA,8DAMA,wDAIA,wDAIA,uGAUF,qCACE,oBAIA,6BAIA,oCAGA,iDC3JF,kEAKE,oCALF,sDAUE,qCAVF,2CAgBA,iCAEE,oCAFF,mCAKE,qCALF,+BAUA,oHAME,oCANF,qHAeA,kCAIA,qEAMA,gKAUA,iEAKE,oCALF,yCAWA,mPAeA,0BAIA,wCAKA,sBAIA,iJAUA,8HASA,mDAIE,oCAJF,wBAQE,qCARF,wBAaA,oCACE,iDAMF,oCACE,iDAKD,qCACC,kDClJF,2EAOA,iDAGA,4GAMA,uEAOA,oFAOA,yDAKA,wGAMA,oCACE,oCAIA,0DAGA,6DAOF,qCACE,oCAIA,+BAGA,4DChEF,oPAsBA,qGAQA,mSAmBA,2PAcA,uCAKA,0CAkBA,0DAMA,oHASA,+EAOA,0DAIA,+FAKA,kGAKA,0GAQA,sBAIA,qFAOA,iJAUA,2GAQA,sDAMA,yEAOA,gCAGA,uFAIA,4FAIA,2FAGA,sNAcA,oCAKA,wCAKA,uCAKA,qGAMA,kDAIA,uDAIA,uIAUA,oCACE,2DAMA,qFAOA,sFAMA,qCAGA,kCAIA,+CAKA,kEAMA,kDAMA,qDAMA,iEAMA,uGASF,qCACE,2CCjTF,qDAME,oCANF,kDAYE,qCAZF,qDCAA,wPAcE,qCAdF,+BAmBA,yGAQA,yDAKA,8FAOA,8JASA,mEAMA,2CAIA,mDAKE,yBALF,sBAUA,4BAIA,qDCxEA,qPAcA,0QAgBA,iGAMA,4HAQA,qEAMA,2DAKA,4HAOA,yGAOA,8HAWA,2EAKA,iFAKA,6EAoBA,oCACE,oBAGA,oDAKA,wDAMA,qCAKF,qCACE,oBAGA,mCAGA,0BAGA,yDAMA,qCClJF,4BAGA,kDACE,2BAKF,+LAaA,6CAMA,qCAIA","sources":["index.e5315a88.css","node_modules/modern-normalize/modern-normalize.css","src/sass/index.scss","src/sass/_common.scss","src/sass/_shopping-list.scss","src/sass/_header.scss","src/sass/_books.scss","src/sass/_top-books.scss","src/sass/_categories.scss","src/sass/_pop-up-book.scss","src/sass/_sidebar.scss","src/sass/_support.scss","src/sass/_footer.scss","src/sass/_scroll-up.scss"],"sourcesContent":["/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n*, :before, :after {\n box-sizing: border-box;\n}\n\nhtml {\n tab-size: 4;\n -webkit-text-size-adjust: 100%;\n line-height: 1.15;\n}\n\nbody {\n margin: 0;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n}\n\nhr {\n color: inherit;\n height: 0;\n}\n\nabbr[title] {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\nb, strong {\n font-weight: bolder;\n}\n\ncode, kbd, samp, pre {\n font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;\n font-size: 1em;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n}\n\nsub {\n bottom: -.25em;\n}\n\nsup {\n top: -.5em;\n}\n\ntable {\n text-indent: 0;\n border-color: inherit;\n}\n\nbutton, input, optgroup, select, textarea {\n margin: 0;\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n}\n\nbutton, select {\n text-transform: none;\n}\n\nbutton {\n -webkit-appearance: button;\n}\n\n[type=\"button\"] {\n -webkit-appearance: button;\n}\n\n[type=\"reset\"] {\n -webkit-appearance: button;\n}\n\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\nlegend {\n padding: 0;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\n::-webkit-inner-spin-button {\n height: auto;\n}\n\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n}\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\nsummary {\n display: list-item;\n}\n\n:root {\n --body: #f6f6f6;\n --header: #fff;\n --sidebar-categories: rgba(17, 17, 17, .6);\n --sidebar-categories-current: #4f2ee8;\n --text-main: #111;\n --scroll: #e0e0e0;\n --color-lite-dark-theme: #202024;\n --text-second: #b4afaf;\n --color-accent: #4f2ee8;\n --color-links: #eac645;\n --color-gradient: radial-gradient(189.32% 190.93% at 59.76% -23.42%, #4f2ee8 18.03%, #fff 100%);\n --timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\np, h1, h2, h3, h4, h5, h6 {\n margin: 0;\n}\n\nul {\n margin: 0;\n padding-left: 0;\n list-style: none;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n display: block;\n}\n\nli {\n list-style: none;\n}\n\na {\n color: currentColor;\n text-decoration: none;\n}\n\nbutton {\n cursor: pointer;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n color: var(--text-main);\n background-color: var(--body);\n font-family: DM Sans, Montserrat, Roboto, Open Sans, Raleway, Arial, sans-serif;\n font-weight: 700;\n}\n\n.container {\n width: 100%;\n max-width: 375px;\n margin: 0 auto;\n padding-left: 20px;\n padding-right: 20px;\n}\n\n@media screen and (min-width: 768px) {\n .container {\n max-width: 768px;\n padding-left: 32px;\n padding-right: 32px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .container {\n max-width: 1440px;\n padding-left: 20px;\n padding-right: 20px;\n }\n}\n\n.no-scroll {\n overflow: hidden;\n}\n\n.visually-hidden {\n white-space: nowrap;\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n border: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n[data-page-theme=\"light\"] {\n --body: #f6f6f6;\n --header: #fff;\n --sidebar-categories: rgba(17, 17, 17, .6);\n --sidebar-categories-current: #4f2ee8;\n --text-main: #111;\n --scroll: #e0e0e0;\n}\n\n[data-page-theme=\"dark\"] {\n --scroll: rgba(17, 17, 17, .6);\n --body: #202024;\n --header: #111;\n --sidebar-categories: rgba(255, 255, 255, .6);\n --sidebar-categories-current: #eac645;\n --text-main: #fff;\n}\n\n.sh-title {\n letter-spacing: -1.28px;\n margin-bottom: 40px;\n font-size: 32px;\n font-weight: 700;\n line-height: 1.19;\n}\n\n.shopping-title {\n color: var(--text-main);\n}\n\n.title-span {\n color: var(--color-accent);\n}\n\n.empty-sh-list {\n display: none;\n}\n\n.book-column-img {\n width: 265px;\n height: 198px;\n margin: 0 auto;\n}\n\n.shopping-list {\n flex-direction: column;\n gap: 20px;\n display: flex;\n}\n\n.sh-list-section img {\n max-width: 100%;\n display: block;\n}\n\n.shopping-list-item {\n background-color: var(--header);\n border: 2px solid rgba(79, 46, 232, .4);\n border-radius: 16px;\n padding: 14px;\n display: flex;\n}\n\n.sh-book-title {\n color: var(--text-main);\n letter-spacing: -.64px;\n margin-bottom: 4px;\n font-size: 16px;\n font-weight: 700;\n line-height: 1.13;\n}\n\n.sh-book-category {\n color: var(--text-second);\n letter-spacing: .36px;\n margin-bottom: 8px;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.17;\n}\n\n.div-text-container {\n height: 68px;\n overflow: hidden;\n}\n\n.sh-book-description {\n color: var(--text-main);\n letter-spacing: -.56px;\n -webkit-line-clamp: 4;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.23;\n display: -webkit-box;\n}\n\n.sh-book-author {\n color: var(--text-second);\n letter-spacing: -.48px;\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.17;\n}\n\n.shopping-links {\n align-items: center;\n gap: 8px;\n display: flex;\n}\n\n.sh-book-img {\n border-radius: 8px;\n width: 100px;\n height: 142px;\n margin-right: 14px;\n}\n\n.sh-soc-item .amazon-store {\n width: 32px;\n height: 11px;\n}\n\n.sh-soc-item .book-shop, .sh-soc-link .apple-store {\n width: 16px;\n height: 16px;\n}\n\n.sh-wrap {\n flex-direction: column;\n gap: 14px;\n display: flex;\n position: relative;\n}\n\n.sh-list-delete-btn {\n background-color: var(--color-accent);\n cursor: pointer;\n border: none;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n width: 28px;\n height: 28px;\n padding: 0;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n.sh-book-info-link-wrap {\n justify-content: space-between;\n display: flex;\n}\n\n@media screen and (min-width: 768px) {\n .shopping-list-item {\n padding: 30px 24px;\n display: flex;\n position: relative;\n }\n\n .sh-title {\n letter-spacing: -1.92px;\n font-size: 48px;\n line-height: 1.08;\n }\n\n .book-column-img {\n width: 322px;\n height: 241px;\n }\n\n .sh-book-img {\n width: 116px;\n height: 165px;\n margin-right: 24px;\n }\n\n .sh-list-delete-btn {\n width: 34px;\n height: 34px;\n position: absolute;\n top: 0;\n right: 0;\n }\n\n .sh-soc-item .amazon-store {\n width: 48px;\n height: 15px;\n }\n\n .sh-soc-item .book-shop {\n width: 32px;\n height: 30px;\n }\n\n .sh-soc-link .apple-store {\n width: 28px;\n height: 27px;\n }\n\n .sh-wrap {\n flex-direction: column;\n justify-content: space-between;\n gap: 14px;\n width: 100%;\n display: flex;\n }\n\n .sh-book-category {\n margin-bottom: 8px;\n }\n}\n\n.sh-list-delete-icon {\n fill: #4f2ee8;\n stroke: #fff;\n}\n\n.header {\n border: 1.5px solid var(--text-main);\n background-color: var(--header);\n border-radius: 0 0 8px 8px;\n align-items: center;\n padding-top: 18px;\n padding-bottom: 18px;\n display: flex;\n}\n\n.header-title {\n display: flex;\n}\n\n.title-link {\n letter-spacing: -.03em;\n color: var(--text-main);\n align-items: center;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.29;\n text-decoration: none;\n display: flex;\n}\n\n.header-link-home {\n letter-spacing: -.04em;\n color: var(--text-main);\n font-size: 14px;\n font-weight: 500;\n line-height: 1.29;\n}\n\n.current {\n background: var(--color-links);\n border-radius: 36px;\n padding: 8px 16px;\n font-weight: 700;\n}\n\n.header-shopping-link {\n letter-spacing: -.04em;\n color: var(--text-main);\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 1.29;\n text-decoration: none;\n display: flex;\n}\n\n.header-shopping-link.current {\n background: var(--color-links);\n border-radius: 36px;\n padding: 7px 16px;\n font-weight: 700;\n}\n\na:link {\n text-decoration: none;\n}\n\n.header-nav {\n gap: 24px;\n list-style: none;\n display: flex;\n}\n\n.shopping-icon {\n fill: var(--text-main);\n width: 20px;\n height: 20px;\n margin-right: 8px;\n position: relative;\n}\n\n.header-icon {\n fill: var(--text-main);\n width: 109px;\n height: 26px;\n position: relative;\n}\n\n.theme-switch {\n width: 40px;\n height: 20px;\n margin-left: auto;\n position: relative;\n}\n\n.theme-switch input {\n display: none;\n}\n\n.theme-switch .toggle {\n cursor: pointer;\n background: linear-gradient(#4f2ee8, #dcdcdc);\n border-radius: 20px;\n width: 40px;\n height: 20px;\n transition: background-color .3s;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.theme-switch .toggle:before {\n content: \"\";\n background-color: #ffffe8;\n border-radius: 50%;\n width: 18px;\n height: 18px;\n transition: transform .3s;\n position: absolute;\n top: 1px;\n left: 1px;\n}\n\n.theme-switch input:checked + .toggle {\n background: linear-gradient(#4f2ee8, #686868);\n}\n\n.theme-switch input:checked + .toggle:before {\n transform: translateX(20px);\n}\n\n@media screen and (max-width: 767px) {\n .header > .auth-menu-root, .header-nav {\n display: none;\n }\n\n .backdrop-header {\n z-index: 10;\n opacity: 1;\n visibility: visible;\n background-color: rgba(17, 17, 17, .4);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n scale: 1;\n }\n\n .backdrop-header.is-hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n scale: .9;\n }\n\n .mob-menu-wrapper {\n max-width: 375px;\n position: relative;\n }\n\n .header .container {\n max-width: 375px;\n }\n\n .theme-auth {\n gap: 24px;\n margin-left: auto;\n display: flex;\n }\n\n .mobile-menu {\n z-index: 12;\n background-color: var(--header);\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-image: url(\"background-menu.58979710.png\"), linear-gradient(#4f2ee8, #dcdcdc);\n background-position: 0 150%, center;\n background-repeat: no-repeat;\n max-width: 375px;\n height: 100vh;\n position: fixed;\n top: 0;\n right: 0;\n }\n\n .header-shopping.current {\n color: var(--text-main);\n }\n\n .shopping-icon {\n fill: #fff;\n }\n\n .header-shopping {\n color: #fff;\n }\n\n .mobile-header-nav {\n flex-direction: column;\n gap: 16px;\n display: flex;\n }\n}\n\n@media screen and (max-width: 767px) and (min-device-pixel-ratio: 2), screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 767px) and (min-resolution: 192dpi), screen and (max-width: 767px) and (min-resolution: 2dppx) {\n .mobile-menu {\n background-image: url(\"background-menu@2x.bb2d1224.png\"), linear-gradient(#4f2ee8, #dcdcdc);\n }\n}\n\n@media screen and (max-width: 767px) {\n .menu-open {\n background-color: rgba(0, 0, 0, 0);\n border: none;\n margin-left: 14px;\n padding: 0;\n display: block;\n }\n\n .menu-open-icon {\n stroke: var(--text-main);\n width: 28px;\n height: 28px;\n display: block;\n }\n\n .menu-open-icon:hover, .menu-open-icon:focus {\n stroke: #4f2ee8;\n }\n\n .mobile-menu.is-visible {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n\n .mobile-container-header {\n border: 1.5px solid var(--text-main);\n background-color: var(--header);\n border-radius: 0 0 8px 8px;\n align-items: center;\n width: 100%;\n padding: 18px 20px;\n display: flex;\n position: absolute;\n top: 0;\n }\n\n .container.book {\n z-index: 20;\n flex-direction: column;\n align-items: center;\n width: 100vw;\n height: 100vh;\n padding: 20px;\n display: flex;\n }\n\n .container-book {\n position: relative;\n }\n\n .mobile-menu-close-btn {\n background-color: rgba(0, 0, 0, 0);\n border: none;\n margin-left: 14px;\n padding: 0;\n display: block;\n }\n\n .mobile-menu-close-btn-icon {\n stroke: var(--text-main);\n width: 28px;\n height: 28px;\n display: block;\n }\n\n .mobile-header-nav {\n color: var(--header);\n padding-top: 247px;\n padding-bottom: 495px;\n }\n\n .mobile-header-link-home {\n letter-spacing: -.04em;\n color: var(--text-main);\n margin-top: 191px;\n margin-bottom: 24px;\n font-size: 14px;\n font-weight: 500;\n line-height: 1.29;\n }\n\n .mobile-header-shopping-link {\n letter-spacing: -.04em;\n color: var(--text-main);\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 1.29;\n text-decoration: none;\n display: flex;\n }\n\n .current {\n background: #eac645;\n border-radius: 36px;\n padding: 8px 16px;\n }\n}\n\n.header.container {\n justify-content: space-between;\n}\n\n@media screen and (min-width: 768px) {\n .mobile-menu, .menu-open {\n display: none;\n }\n\n .header-icon {\n margin-right: 40px;\n }\n\n .header-nav {\n align-items: center;\n gap: 24px;\n }\n\n .theme-switch {\n margin-right: 24px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .header-icon {\n margin-right: 76px;\n }\n}\n\n.hidden {\n display: none;\n}\n\n.thumb {\n border-radius: 8px;\n margin-bottom: 14px;\n position: relative;\n overflow: hidden;\n}\n\n.thumb > img {\n width: 100%;\n height: 100%;\n}\n\n.book-title {\n color: var(--text-main);\n letter-spacing: -.64px;\n text-transform: uppercase;\n margin-bottom: 4px;\n font-size: 16px;\n line-height: 1.125;\n}\n\n.book-title:not(:lang(ae)):not(:lang(ar)):not(:lang(arc)):not(:lang(bcc)):not(:lang(bqi)):not(:lang(ckb)):not(:lang(dv)):not(:lang(fa)):not(:lang(glk)):not(:lang(he)):not(:lang(ku)):not(:lang(mzn)):not(:lang(nqo)):not(:lang(pnb)):not(:lang(ps)):not(:lang(sd)):not(:lang(ug)):not(:lang(ur)):not(:lang(yi)) {\n text-align: left;\n}\n\n.book-title:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {\n text-align: right;\n}\n\n.book-item .book-author {\n margin-bottom: 0;\n font-size: 12px;\n line-height: 1.16;\n}\n\n.book-item .book-author:not(:lang(ae)):not(:lang(ar)):not(:lang(arc)):not(:lang(bcc)):not(:lang(bqi)):not(:lang(ckb)):not(:lang(dv)):not(:lang(fa)):not(:lang(glk)):not(:lang(he)):not(:lang(ku)):not(:lang(mzn)):not(:lang(nqo)):not(:lang(pnb)):not(:lang(ps)):not(:lang(sd)):not(:lang(ug)):not(:lang(ur)):not(:lang(yi)) {\n text-align: left;\n}\n\n.book-item .book-author:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {\n text-align: right;\n}\n\n.overlay {\n background-color: var(--color-links);\n transition: transform .25s var(--timing-function);\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 27%;\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n transform: translateY(100%);\n}\n\n.thumb:hover .overlay {\n transform: translateY(0);\n}\n\n.overlay-text {\n color: var(--text-main);\n letter-spacing: -.56px;\n text-transform: uppercase;\n font-size: 30px;\n font-weight: 500;\n line-height: 1.28;\n}\n\n.section-books-list li:not(:last-child) {\n margin-bottom: 40px;\n}\n\n.section-categories-list {\n flex-direction: column;\n gap: 40px;\n display: flex;\n}\n\n.accent {\n color: var(--color-accent);\n}\n\n.section-categories-title, .section-books-title {\n letter-spacing: -1.28px;\n text-transform: capitalize;\n margin-bottom: 40px;\n font-size: 32px;\n line-height: 1.19;\n}\n\n.section-categories-list .btn {\n border: 2px solid var(--color-accent);\n letter-spacing: -.14px;\n text-transform: uppercase;\n color: var(--text-main);\n cursor: pointer;\n background-color: var(--body);\n border-radius: 40px;\n margin-left: auto;\n padding: 12px 26px;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.29;\n display: block;\n}\n\n@media screen and (min-width: 768px) {\n .thumb {\n min-width: 0;\n height: 316px;\n }\n\n .overlay-text {\n font-size: 20px;\n }\n\n .section-books-list {\n flex-wrap: wrap;\n gap: 40px 25px;\n display: flex;\n }\n\n .section-books-list li:not(:last-child) {\n margin-bottom: 0;\n }\n\n .section-books-list li {\n width: calc(33.3333% - 16.6667px);\n }\n\n .section-categories-title, .section-books-title {\n letter-spacing: -1.92px;\n font-size: 48px;\n line-height: 1.08;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .thumb {\n height: 256px;\n }\n\n .overlay-text {\n font-size: 14px;\n }\n\n .section-books-list {\n column-gap: 24px;\n }\n\n .section-books-list li {\n width: calc(20% - 19.2px);\n }\n}\n\n.main-wrapper {\n flex-direction: column;\n padding-top: 40px;\n display: flex;\n}\n\n@media screen and (min-width: 768px) {\n .main-wrapper {\n flex-direction: column;\n padding-top: 40px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .main-wrapper {\n flex-direction: row;\n gap: 40px;\n }\n}\n\n.main-container {\n padding-top: 40px;\n}\n\n@media screen and (min-width: 768px) {\n .main-container {\n padding-top: 100px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .main-container {\n padding-top: 0;\n }\n}\n\n.section-categories-title {\n letter-spacing: -1.28px;\n margin-bottom: 40px;\n font-size: 32px;\n font-weight: 700;\n line-height: 1.18;\n}\n\n@media screen and (min-width: 768px) {\n .section-categories-title {\n letter-spacing: -1.92px;\n margin-bottom: 40px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.08;\n }\n}\n\n.accent {\n color: var(--color-accent);\n}\n\n.section-categories-list {\n flex-direction: column;\n gap: 40px;\n display: flex;\n}\n\n.category-block-title {\n color: var(--text-second);\n letter-spacing: .42px;\n text-transform: uppercase;\n margin-bottom: 18px;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.28;\n}\n\n.books-list {\n flex-direction: column;\n margin-bottom: 8px;\n display: flex;\n}\n\n@media screen and (min-width: 768px) {\n .books-list {\n flex-direction: row;\n gap: 24px;\n }\n}\n\n.btn {\n cursor: pointer;\n border: 2px solid var(--color-accent);\n color: var(--text-main);\n letter-spacing: -.14px;\n text-transform: uppercase;\n border-radius: 40px;\n margin-left: auto;\n padding: 14px 28px;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.28;\n display: block;\n}\n\n.thumb {\n margin-bottom: 14px;\n}\n\n.thumb > img {\n border-radius: 8px;\n width: 100%;\n}\n\n.overlay {\n display: none;\n}\n\n.book-title {\n letter-spacing: -.64px;\n text-transform: uppercase;\n margin-bottom: 4px;\n font-family: DM Sans;\n font-size: 16px;\n font-weight: 700;\n line-height: 1.12;\n}\n\n.book-author {\n color: var(--text-second);\n letter-spacing: -.48px;\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.16;\n}\n\n.book-item {\n cursor: pointer;\n width: 100%;\n display: block;\n}\n\n@media screen and (min-width: 768px) {\n .book-item {\n width: 218px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .book-item {\n width: 180px;\n }\n}\n\n@media screen and (max-width: 767px) {\n .element-books-list:nth-child(n+2) {\n display: none;\n }\n}\n\n@media screen and (min-width: 768px) {\n .element-books-list:nth-child(n+4) {\n display: none;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .element-books-list:nth-child(n+4) {\n display: block;\n }\n}\n\n.category-container {\n width: 100%;\n height: 228px;\n display: flex;\n overflow-y: scroll;\n}\n\n.category-container::-webkit-scrollbar {\n width: 8px;\n}\n\n.category-container::-webkit-scrollbar-thumb {\n background-color: var(--scroll);\n border-radius: 12px;\n height: 114px;\n}\n\n.category-list {\n flex-direction: column;\n gap: 24px;\n width: 307px;\n display: flex;\n}\n\n.category-item {\n letter-spacing: .02em;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.33;\n}\n\n.category-link {\n color: var(--text-main);\n white-space: nowrap;\n}\n\n.active {\n color: var(--sidebar-categories-current);\n text-transform: uppercase;\n font-size: 16px;\n font-weight: 700;\n}\n\n@media screen and (min-width: 768px) {\n .category-list {\n gap: 32px;\n width: 309px;\n }\n\n .category-container::-webkit-scrollbar-thumb {\n height: 168px;\n }\n\n .category-container {\n width: 100%;\n max-width: 350px;\n height: 472px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .category-list {\n gap: 32px;\n width: 318px;\n }\n\n .category-item {\n font-weight: 300;\n }\n\n .category-container {\n width: 100%;\n max-width: 100%;\n height: 472px;\n }\n}\n\n.backdrop-modal {\n z-index: 10;\n opacity: 1;\n visibility: visible;\n filter: blur();\n background-color: rgba(17, 17, 17, .4);\n transition: opacity .25s linear, scale .25s linear, visibility .25s linear;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: auto;\n scale: 1;\n}\n\n.backdrop-modal.is-hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n filter: blur(20px);\n scale: .9;\n}\n\n.container-popup {\n z-index: 15;\n background-color: var(--header);\n border: 2px solid var(--text-main);\n border-radius: 18px;\n flex-direction: column;\n width: 335px;\n max-height: 806px;\n margin-left: auto;\n margin-right: auto;\n padding: 40px 24px;\n display: flex;\n position: absolute;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.modal-btn {\n text-transform: uppercase;\n letter-spacing: -.14px;\n color: var(--text-main);\n background-color: var(--header);\n border: 2px solid var(--color-accent);\n border-radius: 40px;\n margin-left: auto;\n margin-right: auto;\n font-size: 14px;\n font-weight: 700;\n line-height: 1.28;\n}\n\n.btn-add {\n height: 46px;\n padding: 14px 28px;\n}\n\n.btn-remove {\n height: 46px;\n padding: 14px 23px;\n}\n\n.visually-hidden {\n white-space: nowrap;\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n border: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.btn-close-modal {\n width: 24px;\n height: 24px;\n position: absolute;\n}\n\n.close-modal {\n stroke: var(--text-main);\n background-color: rgba(0, 0, 0, 0);\n border: none;\n position: absolute;\n top: 12px;\n right: 12px;\n}\n\n.close-cross {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.close-modal:is(:hover, :focus) {\n stroke: var(--color-accent);\n}\n\n.btn-add:is(:hover, :focus) {\n background-color: var(--color-accent);\n color: var(--color-white-theme);\n}\n\n.btn-remove:is(:hover, :focus) {\n background-color: var(--color-accent);\n color: var(--color-white-theme);\n}\n\n.img-container-pop-up {\n border-radius: 8px;\n height: 408px;\n margin-bottom: 14px;\n position: relative;\n overflow: hidden;\n}\n\n.img-modal {\n width: 100%;\n}\n\n.book-header {\n letter-spacing: -.64px;\n margin-bottom: 4px;\n font-size: 16px;\n line-height: 1.28;\n}\n\n.book-author {\n color: var(--text-second);\n letter-spacing: -.48px;\n margin-bottom: 18px;\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.16;\n}\n\n.book-description {\n letter-spacing: -.56px;\n margin-bottom: 16px;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.28;\n}\n\n.icons-modal {\n gap: 20px;\n margin-bottom: 40px;\n display: flex;\n}\n\n.book-stores {\n align-items: center;\n gap: 20px;\n margin-bottom: 40px;\n display: flex;\n}\n\n.book-modal {\n filter: saturate(0%);\n}\n\n.amazon-logo:is(:hover, :focus) {\n filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)) saturate(0);\n}\n\n.apple-book-logo:is(:hover, :focus) {\n filter: saturate(0%) drop-shadow(0 2px 4px rgba(0, 0, 0, .2));\n}\n\n.book-shop-logo:is(:hover, :focus) {\n filter: saturate(0%) drop-shadow(0 2px 4px rgba(0, 0, 0, .2));\n}\n\n.modal-congrats-text {\n color: var(--sidebar-categories);\n text-align: center;\n letter-spacing: -.4px;\n width: 242px;\n height: 36px;\n margin-top: 4px;\n margin-left: auto;\n margin-right: auto;\n font-size: 10px;\n font-weight: 400;\n line-height: 12px;\n}\n\n.amazon-logo {\n width: 62px;\n height: 19px;\n}\n\n.apple-book-logo {\n width: 33px;\n height: 32px;\n}\n\n.book-shop-logo {\n width: 38px;\n height: 36px;\n}\n\n.js-dark-mode {\n background-color: var(--color-lite-dark-theme);\n stroke: var(--header);\n color: var(--header);\n}\n\n.js-dark-mode-amazon {\n filter: brightness(0) invert();\n}\n\n.js-dark-mode-congrats {\n color: var(--sidebar-categories);\n}\n\n.default-book-pop-up {\n fill: var(--color-button);\n width: 60px;\n height: 64px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n@media screen and (min-width: 768px) {\n .container-popup {\n width: 579px;\n max-height: 501px;\n padding: 40px;\n }\n\n .book-header {\n letter-spacing: -.96px;\n margin-bottom: 8px;\n font-size: 24px;\n line-height: 1.16;\n }\n\n .book-author {\n letter-spacing: -.56px;\n margin-bottom: 20px;\n font-size: 14px;\n line-height: 1.28;\n }\n\n .book-description {\n margin-bottom: 20px;\n }\n\n .modal-text-container {\n width: 279px;\n }\n\n .modal-content-container {\n gap: 24px;\n display: flex;\n }\n\n .img-container-pop-up {\n width: 192px;\n height: 281px;\n margin-bottom: 40px;\n }\n\n .btn-add {\n width: 100%;\n height: 64px;\n padding: 14px 28px;\n }\n\n .btn-remove {\n width: 100%;\n height: 64px;\n padding: 14px 23px;\n }\n\n .modal-btn {\n letter-spacing: -.18px;\n font-size: 18px;\n line-height: 1.56;\n }\n\n .modal-congrats-text {\n letter-spacing: -.48px;\n width: 324px;\n margin-top: 8px;\n font-size: 12px;\n line-height: 14px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .container-popup {\n width: 579px;\n height: 501px;\n }\n}\n\n.sidebar {\n flex-direction: column;\n gap: 40px;\n display: flex;\n}\n\n@media screen and (min-width: 768px) {\n .sidebar {\n flex-direction: row;\n gap: 32px;\n width: 704px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .sidebar {\n flex-direction: column;\n gap: 86px;\n width: 356px;\n }\n}\n\n.support-container {\n text-align: center;\n color: #fff;\n background: radial-gradient(189.32% 190.93% at 59.76% -23.42%, #4f2ee8 18.03%, #fff 100%);\n border-radius: 16px;\n width: 100%;\n max-width: 335px;\n padding: 24px 40px 20px;\n box-shadow: 0 10px 10px rgba(245, 245, 247, .1);\n}\n\n@media screen and (min-width: 1440px) {\n .support-container {\n width: 100%;\n }\n}\n\n.support-title {\n letter-spacing: -1.12px;\n margin-bottom: 40px;\n font-size: 28px;\n font-weight: 700;\n line-height: 32px;\n}\n\n.fund-list {\n counter-reset: my-counter;\n list-style-type: none;\n}\n\n.fund-list li {\n counter-increment: my-counter;\n align-items: center;\n margin-bottom: 20px;\n display: flex;\n}\n\n.fund-list li:before {\n content: counter(my-counter, decimal-leading-zero);\n letter-spacing: -.56px;\n margin-right: 16px;\n font-size: 14px;\n font-weight: 400;\n line-height: 18px;\n}\n\n.icon-trident {\n fill: #fff;\n margin-left: 12px;\n transform: translateY(7px);\n}\n\n.support-img {\n filter: brightness(0%) invert();\n}\n\n.swiper {\n width: 100%;\n height: 188px;\n margin-bottom: 32px;\n}\n\n@media (min-width: 768px) {\n .swiper {\n height: 292px;\n }\n}\n\n.button-next {\n cursor: pointer;\n}\n\n.button-prev {\n cursor: pointer;\n transform: rotate(180deg);\n}\n\n.backdrop-modal-footer {\n z-index: 10;\n background-color: var(--sidebar-categories);\n opacity: 1;\n visibility: visible;\n transition: opacity .25s linear, scale .25s linear, visibility .25s linear;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: auto;\n scale: 1;\n}\n\n.footer {\n z-index: 15;\n background-color: var(--header);\n border: 2px solid var(--text-main);\n border-radius: 18px;\n flex-direction: column;\n width: 335px;\n margin-left: auto;\n margin-right: auto;\n padding: 20px 0;\n display: flex;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.backdrop-modal-footer.is-hidden-footer {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n scale: .9;\n}\n\n.footer-head {\n color: var(--text-main);\n letter-spacing: -1.6px;\n font-size: 40px;\n font-style: normal;\n font-weight: 700;\n line-height: 44px;\n}\n\n.contact-list {\n flex-direction: column;\n gap: 0 10px;\n margin: 0;\n display: flex;\n}\n\n.contact-list-item {\n flex-direction: row;\n gap: 5px;\n display: flex;\n}\n\n.contact-text {\n letter-spacing: -.48px;\n color: var(--sidebar-categories-current);\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n}\n\n.contact-link {\n letter-spacing: -.48px;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n text-decoration: none;\n}\n\n.footer-btn {\n cursor: pointer;\n width: 28px;\n height: 28px;\n margin: 0;\n padding: 0;\n display: inline-block;\n position: fixed;\n bottom: 10px;\n left: 5px;\n}\n\n.footer-gear {\n fill: var(--sidebar-categories-current);\n width: 28px;\n height: 28px;\n}\n\n.footer-btn:hover, .footer-btn:focus {\n animation: 1.5s linear infinite rotate-center;\n}\n\n@keyframes rotate-center {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@media screen and (min-width: 768px) {\n .footer {\n width: 548px;\n }\n\n .contact-list {\n flex-wrap: wrap;\n gap: 0 10px;\n height: 84px;\n }\n\n .footer-btn {\n width: 40px;\n height: 40px;\n bottom: 10px;\n left: 5px;\n }\n\n .footer-gear {\n width: 40px;\n height: 40px;\n }\n}\n\n@media screen and (min-width: 1200px) {\n .footer {\n width: 804px;\n }\n\n .footer > .container {\n max-width: 800px;\n }\n\n .contact-list {\n height: 56px;\n }\n\n .footer-btn {\n width: 40px;\n height: 40px;\n bottom: 20px;\n left: 15px;\n }\n\n .footer-gear {\n width: 40px;\n height: 40px;\n }\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n@media screen and (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n}\n\n.visually-hidden {\n white-space: nowrap;\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n border: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.js-sroll-up {\n position: fixed;\n bottom: 0;\n right: 0;\n}\n\n.scroll-up-wrapper {\n border-radius: 50%;\n}\n\n.scroll-up-icon {\n width: 44px;\n height: 44px;\n margin-bottom: 16px;\n margin-right: 16px;\n}\n\n/*# sourceMappingURL=index.e5315a88.css.map */\n","/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n/*\nDocument\n========\n*/\n\n/**\nUse a better box model (opinionated).\n*/\n\n*,\n::before,\n::after {\n\tbox-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\nhtml {\n\t-moz-tab-size: 4;\n\ttab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\nhtml {\n\tline-height: 1.15; /* 1 */\n\t-webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/*\nSections\n========\n*/\n\n/**\nRemove the margin in all browsers.\n*/\n\nbody {\n\tmargin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\nbody {\n\tfont-family:\n\t\tsystem-ui,\n\t\t-apple-system, /* Firefox supports this but not yet `system-ui` */\n\t\t'Segoe UI',\n\t\tRoboto,\n\t\tHelvetica,\n\t\tArial,\n\t\tsans-serif,\n\t\t'Apple Color Emoji',\n\t\t'Segoe UI Emoji';\n}\n\n/*\nGrouping content\n================\n*/\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\nhr {\n\theight: 0; /* 1 */\n\tcolor: inherit; /* 2 */\n}\n\n/*\nText-level semantics\n====================\n*/\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr[title] {\n\ttext-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n\tfont-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n\tfont-family:\n\t\tui-monospace,\n\t\tSFMono-Regular,\n\t\tConsolas,\n\t\t'Liberation Mono',\n\t\tMenlo,\n\t\tmonospace; /* 1 */\n\tfont-size: 1em; /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n\tfont-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n\tfont-size: 75%;\n\tline-height: 0;\n\tposition: relative;\n\tvertical-align: baseline;\n}\n\nsub {\n\tbottom: -0.25em;\n}\n\nsup {\n\ttop: -0.5em;\n}\n\n/*\nTabular data\n============\n*/\n\n/**\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n*/\n\ntable {\n\ttext-indent: 0; /* 1 */\n\tborder-color: inherit; /* 2 */\n}\n\n/*\nForms\n=====\n*/\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n\tfont-family: inherit; /* 1 */\n\tfont-size: 100%; /* 1 */\n\tline-height: 1.15; /* 1 */\n\tmargin: 0; /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\nbutton,\nselect { /* 1 */\n\ttext-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n\t-webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n::-moz-focus-inner {\n\tborder-style: none;\n\tpadding: 0;\n}\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n:-moz-focusring {\n\toutline: 1px dotted ButtonText;\n}\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n:-moz-ui-invalid {\n\tbox-shadow: none;\n}\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\nlegend {\n\tpadding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n\tvertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n\theight: auto;\n}\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n\t-webkit-appearance: textfield; /* 1 */\n\toutline-offset: -2px; /* 2 */\n}\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n\t-webkit-appearance: none;\n}\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n::-webkit-file-upload-button {\n\t-webkit-appearance: button; /* 1 */\n\tfont: inherit; /* 2 */\n}\n\n/*\nInteractive\n===========\n*/\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n\tdisplay: list-item;\n}\n","@import './common';\n@import './shopping-list';\n@import './header';\n@import './books';\n@import './top-books';\n@import './categories';\n@import './pop-up-book';\n@import './sidebar';\n@import './support';\n@import './footer';\n@import './scroll-up';\n","@import '~node_modules/modern-normalize/modern-normalize.css';\n\n:root {\n --body: #f6f6f6;\n --header: #fff;\n --sidebar-categories: rgba(17, 17, 17, 0.6);\n --sidebar-categories-current: #4f2ee8;\n --text-main: #111;\n --scroll: #e0e0e0;\n --color-lite-dark-theme: #202024;\n --text-second: #b4afaf;\n --color-accent: #4f2ee8;\n --color-links: #eac645;\n --color-gradient: radial-gradient(\n 189.32% 190.93% at 59.76% -23.42%,\n #4f2ee8 18.03%,\n #fff 100%\n );\n --timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 0;\n}\n\nul {\n margin: 0;\n padding-left: 0;\n list-style: none;\n}\n\nimg {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\nli {\n list-style: none;\n}\n\na {\n color: currentColor;\n text-decoration: none;\n}\n\nbutton {\n cursor: pointer;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n color: var(--text-main);\n font-family: 'DM Sans', 'Montserrat', 'Roboto', 'Open Sans', 'Raleway',\n 'Arial', sans-serif;\n background-color: var(--body);\n font-weight: 700;\n}\n\n.container {\n width: 100%;\n max-width: 375px;\n padding-left: 20px;\n padding-right: 20px;\n margin: 0 auto;\n @media screen and (min-width: 768px) {\n max-width: 768px;\n padding-left: 32px;\n padding-right: 32px;\n }\n\n @media screen and (min-width: 1440px) {\n max-width: 1440px;\n padding-left: 20px;\n padding-right: 20px;\n }\n}\n\n.no-scroll {\n overflow: hidden;\n}\n\n.visually-hidden {\n position: absolute;\n white-space: nowrap;\n width: 1px;\n height: 1px;\n overflow: hidden;\n border: 0;\n padding: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n margin: -1px;\n}\n\n[data-page-theme='light'] {\n --body: #f6f6f6;\n --header: #fff;\n --sidebar-categories: rgba(17, 17, 17, 0.6);\n --sidebar-categories-current: #4f2ee8;\n --text-main: #111;\n --scroll: #e0e0e0;\n}\n\n[data-page-theme='dark'] {\n --scroll: rgba(17, 17, 17, 0.6);\n --body: #202024;\n --header: #111;\n --sidebar-categories: rgba(255, 255, 255, 0.6);\n --sidebar-categories-current: #eac645;\n --text-main: #fff;\n}",".sh-title {\n margin-bottom: 40px;\n font-size: 32px;\n font-weight: 700;\n line-height: 1.19;\n letter-spacing: -1.28px;\n}\n.shopping-title {\n color: var(--text-main);\n}\n.title-span {\n color: var(--color-accent);\n}\n\n.empty-sh-list {\n display: none;\n}\n.book-column-img {\n margin: 0 auto;\n width: 265px;\n height: 198px;\n}\n\n.shopping-list {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.sh-list-section img {\n display: block;\n max-width: 100%;\n}\n\n.shopping-list-item {\n // position: relative;\n display: flex;\n padding: 14px;\n border-radius: 16px;\n border: 2px solid rgba(79, 46, 232, 0.4);\n background-color: var(--header);\n}\n\n.sh-book-title {\n margin-bottom: 4px;\n color: var(--text-main);\n font-size: 16px;\n font-weight: 700;\n line-height: 1.13;\n letter-spacing: -0.64px;\n}\n.sh-book-category {\n margin-bottom: 8px;\n color: var(--text-second);\n font-size: 12px;\n font-weight: 400;\n line-height: 1.17;\n letter-spacing: 0.36px;\n}\n\n.div-text-container{\n height: 68px;\n overflow: hidden;\n}\n\n.sh-book-description {\n color: var(--text-main);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.23;\n letter-spacing: -0.56px;\n display: -webkit-box;\n -webkit-line-clamp: 4; \n -webkit-box-orient: vertical; \n text-overflow: ellipsis;\n}\n.sh-book-author {\n color: var(--text-second);\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.17;\n letter-spacing: -0.48px;\n}\n\n.shopping-links {\n display: flex;\n align-items: center;\n gap: 8;\n}\n\n.sh-book-img {\n margin-right: 14px;\n width: 100px;\n height: 142px;\n border-radius: 8px;\n}\n\n.sh-soc-item .amazon-store {\n width: 32px;\n height: 11px;\n}\n.sh-soc-item .book-shop {\n width: 16px;\n height: 16px;\n}\n\n.sh-soc-link .apple-store {\n width: 16px;\n height: 16px;\n}\n\n.sh-wrap {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 14px;\n}\n\n.sh-book-info-wrap {\n // position: relative;\n}\n\n.sh-list-delete-btn {\n position: absolute;\n top: 0;\n right: 0;\n\n display: flex;\n width: 28px;\n height: 28px;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n background-color: var(--color-accent);\n border-radius: 50%;\n border: none;\n cursor: pointer;\n}\n\n.sh-book-info-link-wrap {\n display: flex;\n justify-content: space-between;\n}\n\n@media screen and (min-width: 375px) {\n}\n\n@media screen and (min-width: 768px) {\n .shopping-list-item {\n position: relative;\n display: flex;\n padding: 30px 24px;\n }\n\n .sh-title {\n font-size: 48px;\n line-height: 1.08;\n letter-spacing: -1.92px;\n }\n .book-column-img {\n width: 322px;\n height: 241px;\n }\n\n .sh-book-img {\n margin-right: 24px;\n width: 116px;\n height: 165px;\n }\n\n .sh-list-delete-btn {\n position: absolute;\n top: 0;\n right: 0;\n width: 34px;\n height: 34px;\n }\n\n .sh-soc-item .amazon-store {\n width: 48px;\n height: 15px;\n }\n .sh-soc-item .book-shop {\n width: 32px;\n height: 30px;\n }\n\n .sh-soc-link .apple-store {\n width: 28px;\n height: 27px;\n }\n\n .sh-wrap {\n flex-direction: column;\n gap: 14px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n }\n\n .sh-book-category {\n margin-bottom: 8px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n}\n\n.sh-list-delete-icon {\n fill: #4f2ee8;\n stroke: #fff;\n}\n",".header {\n display: flex;\n align-items: center;\n padding-top: 18px;\n padding-bottom: 18px;\n border: 1.5px solid var(--text-main);\n border-radius: 0 0 8px 8px;\n background-color: var(--header);\n}\n\n.header-title {\n display: flex;\n}\n\n.title-link {\n display: flex;\n text-decoration: none;\n align-items: center;\n font-weight: 700;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.03em;\n color: var(--text-main);\n}\n.header-link-home {\n font-weight: 500;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.04em;\n color: var(--text-main);\n}\n\n.current {\n font-weight: 700;\n padding: 8px 16px;\n background: var(--color-links);\n border-radius: 36px;\n}\n\n.header-shopping-link {\n display: flex;\n text-decoration: none;\n align-items: center;\n font-weight: 500;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.04em;\n color: var(--text-main);\n}\n.header-shopping-link.current {\n font-weight: 700;\n padding: 7px 16px;\n background: var(--color-links);\n border-radius: 36px;\n}\n\na:link {\n text-decoration: none;\n}\n\n.header-nav {\n display: flex;\n gap: 24px;\n list-style: none;\n}\n.shopping-icon {\n fill: var(--text-main);\n margin-right: 8px;\n position: relative;\n width: 20px;\n height: 20px;\n}\n.header-icon {\n // margin-right: 144px;\n position: relative;\n fill: var(--text-main);\n width: 109px;\n height: 26px;\n}\n\n.theme-switch {\n margin-left: auto;\n position: relative;\n width: 40px;\n height: 20px;\n}\n\n.theme-switch input {\n display: none;\n}\n\n.theme-switch .toggle {\n position: absolute;\n top: 0;\n left: 0;\n width: 40px;\n height: 20px;\n background: linear-gradient(\n to bottom,\n rgb(79, 46, 232, 1),\n rgb(220, 220, 220, 1)\n );\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.theme-switch .toggle:before {\n content: '';\n position: absolute;\n top: 1px;\n left: 1px;\n width: 18px;\n height: 18px;\n background-color: rgb(255, 255, 232, 1);\n border-radius: 50%;\n transition: transform 0.3s;\n}\n\n.theme-switch input:checked + .toggle {\n background: linear-gradient(\n to bottom,\n rgb(79, 46, 232, 1),\n rgb(104, 104, 104, 1)\n );\n}\n\n.theme-switch input:checked + .toggle:before {\n transform: translateX(20px);\n}\n@media screen and (max-width: 767px) {\n .header > .auth-menu-root,\n .header-nav {\n display: none;\n }\n\n /*------------------- MOBILE MENU----------------- */\n\n .backdrop-header {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n z-index: 10;\n\n background-color: rgba(17, 17, 17, 0.4);\n\n opacity: 1;\n scale: 1;\n visibility: visible;\n }\n\n .backdrop-header.is-hidden {\n opacity: 0;\n visibility: hidden;\n scale: 0.9;\n pointer-events: none;\n }\n\n .mob-menu-wrapper {\n position: relative;\n max-width: 375px;\n }\n\n .header .container {\n max-width: 375px;\n }\n\n .theme-auth {\n display: flex;\n gap: 24px;\n margin-left: auto;\n }\n\n .mobile-menu {\n position: fixed;\n height: 100vh;\n max-width: 375px;\n top: 0;\n right: 0;\n z-index: 12;\n background-color: var(--header);\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-repeat: no-repeat;\n background-position: bottom;\n background-image: url(../images/background-menu.png),\n linear-gradient(to bottom, rgb(79, 46, 232, 1), rgb(220, 220, 220, 1));\n background-position: 0px 150%, center;\n }\n\n .header-shopping.current {\n color: var(--text-main);\n }\n\n .shopping-icon {\n fill: white;\n }\n .header-shopping {\n color: white;\n }\n\n .mobile-header-nav {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n @media (min-device-pixel-ratio: 2),\n (min-resolution: 192dpi),\n (min-resolution: 2dppx) {\n .mobile-menu {\n background-image: url(../images/background-menu@2x.png),\n linear-gradient(to bottom, rgb(79, 46, 232, 1), rgb(220, 220, 220, 1));\n }\n }\n\n .menu-open {\n display: block;\n background-color: transparent;\n border-color: transparent;\n margin-left: 14px;\n padding: 0;\n border: none;\n }\n .menu-open-icon {\n display: block;\n height: 28px;\n width: 28px;\n stroke: var(--text-main);\n }\n .menu-open-icon:hover,\n .menu-open-icon:focus {\n stroke: rgb(79, 46, 232, 1);\n }\n\n .mobile-menu.is-visible {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n\n .mobile-container-header {\n position: absolute;\n top: 0;\n padding-left: 20px;\n padding-right: 20px;\n display: flex;\n align-items: center;\n padding-top: 18px;\n padding-bottom: 18px;\n border: 1.5px solid var(--text-main);\n border-radius: 0 0 8px 8px;\n background-color: var(--header);\n width:100%;\n }\n\n .container.book {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n width: 100vw;\n height: 100vh;\n z-index: 20;\n }\n\n .container-book {\n position: relative;\n }\n\n .mobile-menu-close-btn {\n display: block;\n background-color: transparent;\n border-color: transparent;\n margin-left: 14px;\n padding: 0;\n border: none;\n }\n\n .mobile-menu-close-btn-icon {\n display: block;\n height: 28px;\n width: 28px;\n stroke: var(--text-main);\n }\n\n .mobile-header-nav {\n padding-top: 247px;\n padding-bottom: 495px;\n color: var(--header);\n }\n\n .mobile-header-link-home {\n font-weight: 500;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.04em;\n color: var(--text-main);\n margin-top: 191px;\n margin-bottom: 24px;\n }\n .mobile-header-shopping-link {\n display: flex;\n text-decoration: none;\n align-items: center;\n font-weight: 500;\n font-size: 14px;\n line-height: 1.29;\n letter-spacing: -0.04em;\n color: var(--text-main);\n }\n\n .current {\n padding: 8px 16px;\n border-radius: 36px;\n background: #eac645;\n }\n}\n\n.header.container {\n justify-content: space-between;\n}\n\n@media screen and (min-width: 768px) {\n .mobile-menu,\n .menu-open {\n display: none;\n }\n .header-icon {\n margin-right: 40px;\n }\n .header-nav {\n gap: 24px;\n align-items: center;\n\n }\n .theme-switch {\n margin-right: 24px;\n }\n\n}\n\n@media screen and (min-width: 1440px) {\n .header-icon {\n margin-right: 76px;\n }\n}\n",".hidden {\n display: none;\n}\n\n// -----------Styles for one book---------//\n\n.thumb {\n position: relative;\n margin-bottom: 14px;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.thumb > img {\n width: 100%;\n height: 100%;\n}\n\n.book-title {\n text-align: start;\n margin-bottom: 4px;\n font-size: 16px;\n line-height: 1.125;\n color: var(--text-main);\n letter-spacing: -0.64px;\n text-transform: uppercase;\n}\n\n.book-item .book-author {\n text-align: start;\n margin-bottom: 0px;\n font-size: 12px;\n line-height: 1.16;\n}\n\n.overlay {\n position: absolute;\n display: flex;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 27%;\n justify-content: center;\n align-items: center;\n background-color: var(--color-links);\n\n transform: translateY(100%);\n transition: transform 250ms var(--timing-function);\n}\n\n.thumb:hover .overlay {\n transform: translateY(0);\n}\n\n.overlay-text {\n color: var(--text-main);\n font-size: 30px;\n font-weight: 500;\n line-height: 1.28;\n letter-spacing: -0.56px;\n text-transform: uppercase;\n}\n\n.section-books-list li:not(:last-child) {\n margin-bottom: 40px;\n}\n\n.section-categories-list {\n display: flex;\n flex-direction: column;\n gap: 40px;\n}\n\n// -----------Styles for sections with book---------//\n\n.accent {\n color: var(--color-accent);\n}\n\n.section-categories-title,\n.section-books-title {\n margin-bottom: 40px;\n font-size: 32px;\n line-height: 1.19;\n letter-spacing: -1.28px;\n text-transform: capitalize;\n}\n\n// -----------See More Button---------//\n\n.section-categories-list .btn {\n display: block;\n margin-left: auto;\n padding: 12px 26px;\n border-radius: 40px;\n border: 2px solid var(--color-accent);\n\n font-size: 14px;\n font-weight: 700;\n line-height: 1.29;\n letter-spacing: -0.14px;\n text-transform: uppercase;\n color: var(--text-main);\n cursor: pointer;\n background-color: var(--body);\n}\n\n// -----------Styles for tablet---------//\n\n@media screen and (min-width: 768px) {\n .thumb {\n height: 316px;\n min-width: 0;\n }\n\n .overlay-text {\n font-size: 20px;\n }\n\n .section-books-list {\n display: flex;\n flex-wrap: wrap;\n row-gap: 40px;\n column-gap: 25px;\n }\n .section-books-list li:not(:last-child) {\n margin-bottom: 0;\n }\n\n .section-books-list li {\n width: calc((100% - 50px) / 3);\n }\n\n .section-categories-title,\n .section-books-title {\n font-size: 48px;\n line-height: 1.08;\n letter-spacing: -1.92px;\n }\n}\n\n// -----------Styles for desktop---------//\n\n@media screen and (min-width: 1440px) {\n .thumb {\n height: 256px;\n }\n\n .overlay-text {\n font-size: 14px;\n }\n\n .section-books-list {\n column-gap: 24px;\n }\n .section-books-list li {\n width: calc((100% - 96px) / 5);\n }\n}\n",".main-wrapper {\n display: flex;\n flex-direction: column;\n padding-top: 40px;\n\n @media screen and (min-width: 768px){\n padding-top: 40px;\n flex-direction: column;\n }\n\n @media screen and (min-width: 1440px){\n flex-direction: row;\n gap: 40px;\n }\n}\n\n.main-container {\n padding-top: 40px;\n @media screen and (min-width: 768px){\n padding-top: 100px;\n }\n @media screen and (min-width: 1440px){\n padding-top: 0;\n }\n}\n\n.section-categories-title {\n margin-bottom: 40px;\n font-size: 32px;\n font-weight: 700;\n line-height: 1.18;\n letter-spacing: -1.28px;\n @media screen and (min-width: 768px){\n margin-bottom: 40px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.08;\n letter-spacing: -1.92px;\n }\n}\n\n.accent {\n color: var(--color-accent);\n}\n\n.section-categories-list {\n display: flex;\n flex-direction: column;\n gap: 40px;\n}\n\n.category-block-title {\n color: var(--text-second);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.28;\n letter-spacing: 0.42px;\n text-transform: uppercase;\n margin-bottom: 18px;\n}\n\n.books-list {\n display: flex;\n flex-direction: column;\n margin-bottom: 8px;\n\n @media screen and (min-width: 768px){\n gap:24px;\n flex-direction: row;\n }\n}\n\n.btn {\n display: block;\n cursor: pointer;\n margin-left: auto;\n padding: 14px 28px;\n border-radius: 40px;\n border: 2px solid var(--color-accent);\n color:var(--text-main);\n font-size: 14px;\n font-weight: 700;\n line-height: 1.28;\n letter-spacing: -0.14px;\n text-transform: uppercase;\n}\n\n.thumb {\n margin-bottom: 14px;\n}\n\n.thumb > img {\n width: 100%;\n border-radius: 8px;\n}\n\n.overlay {\n display: none;\n}\n\n.book-title {\n margin-bottom: 4px;\n font-size: 16px;\n font-family: DM Sans;\n font-weight: 700;\n line-height: 1.12;\n letter-spacing: -0.64px;\n text-transform: uppercase;\n}\n\n.book-author {\n color:var(--text-second);\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.16;\n letter-spacing: -0.48px;\n}\n\n.book-item{\n display: block;\n width: 100%;\n cursor: pointer;\n @media screen and (min-width: 768px) {\n width: 218px;\n }\n \n @media screen and (min-width: 1440px) {\n width: 180px;\n }\n}\n\n@media screen and (max-width: 767px){\n .element-books-list:nth-child(n+2) {\n display: none;\n }\n}\n\n\n@media screen and (min-width: 768px){\n .element-books-list:nth-child(n+4) {\n display: none;\n }\n}\n\n @media screen and (min-width: 1440px){\n .element-books-list:nth-child(n+4) {\n display: block;\n }\n }\n",".category-container {\n display: flex;\n width: 100%;\n\n height: 228px;\n overflow-y: scroll;\n}\n.category-container::-webkit-scrollbar {\n width: 8px;\n}\n.category-container::-webkit-scrollbar-thumb {\n background-color: var(--scroll);\n border-radius: 12px;\n height: 114px;\n}\n\n.category-list {\n display: flex;\n flex-direction: column;\n width: 307px;\n gap: 24px;\n}\n\n.category-item {\n font-weight: 400;\n font-size: 16px;\n line-height: 1.33;\n letter-spacing: 0.02em;\n}\n\n.category-link {\n color: var(--text-main);\n white-space: nowrap;\n}\n// .category-link\n.active {\n color: var(--sidebar-categories-current);\n text-transform: uppercase;\n font-size: 16px;\n font-weight: 700;\n}\n@media screen and (min-width: 768px) {\n .category-list {\n width: 309px;\n gap: 32px;\n }\n .category-container::-webkit-scrollbar-thumb {\n height: 168px;\n }\n .category-container {\n width: 100%;\n max-width: 350px;\n height: 472px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .category-list {\n width: 318px;\n gap: 32px;\n }\n .category-item {\n font-weight: 300;\n }\n .category-container {\n width: 100%;\n height: 472px;\n max-width: 100%;\n }\n}\n",".backdrop-modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n overflow: auto;\n\n z-index: 10;\n\n background-color: rgba(17, 17, 17, 0.4);\n\n opacity: 1;\n scale: 1;\n visibility: visible;\n\n filter: blur(0);\n\n transition: opacity 250ms linear, scale 250ms linear, visibility 250ms linear;\n}\n\n.backdrop-modal.is-hidden {\n opacity: 0;\n visibility: hidden;\n scale: 0.9;\n pointer-events: none;\n filter: blur(20px);\n}\n\n.container-popup {\n position: absolute;\n left: 50%;\n top: 20px;\n transform: translateX(-50%);\n z-index: 15;\n\n display: flex;\n flex-direction: column;\n width: 335px;\n max-height: 806px;\n padding: 40px 24px;\n margin-left: auto;\n margin-right: auto;\n background-color: var(--header);\n border: 2px solid var(--text-main);\n border-radius: 18px;\n}\n\n.modal-btn {\n margin-left: auto;\n margin-right: auto;\n text-transform: uppercase;\n font-size: 14px;\n font-weight: 700;\n letter-spacing: -0.14px;\n line-height: 1.28;\n color: var(--text-main);\n background-color: var(--header);\n border-radius: 40px;\n border: 2px solid var(--color-accent);\n}\n\n.btn-add {\n height: 46px;\n padding: 14px 28px;\n}\n\n.btn-remove {\n height: 46px;\n padding: 14px 23px;\n}\n\n.visually-hidden {\n position: absolute;\n white-space: nowrap;\n width: 1px;\n height: 1px;\n overflow: hidden;\n border: 0;\n padding: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n margin: -1px;\n}\n\n.btn-close-modal {\n position: absolute;\n width: 24px;\n height: 24px;\n}\n\n.close-modal {\n position: absolute;\n top: 12px;\n right: 12px;\n background-color: transparent;\n stroke: var(--text-main);\n border: none;\n}\n\n.close-cross {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.close-modal:is(:hover, :focus) {\n stroke: var(--color-accent);\n}\n\n.btn-add:is(:hover, :focus) {\n background-color: var(--color-accent);\n color: var(--color-white-theme);\n}\n\n.btn-remove:is(:hover, :focus) {\n background-color: var(--color-accent);\n color: var(--color-white-theme);\n}\n\n.img-container-pop-up {\n position: relative;\n height: 408px;\n margin-bottom: 14px;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.img-modal {\n width: 100%;\n}\n\n.book-header {\n margin-bottom: 4px;\n font-size: 16px;\n line-height: 1.28;\n letter-spacing: -0.64px;\n}\n\n.book-author {\n margin-bottom: 18px;\n color: var(--text-second);\n font-size: 12px;\n font-weight: 400;\n font-style: italic;\n line-height: 1.16;\n letter-spacing: -0.48px;\n}\n\n.book-description {\n margin-bottom: 16px;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.28;\n letter-spacing: -0.56px;\n}\n\n.icons-modal {\n display: flex;\n gap: 20px;\n margin-bottom: 40px;\n}\n\n.book-stores {\n display: flex;\n gap: 20px;\n align-items: center;\n margin-bottom: 40px;\n}\n\n.book-modal {\n filter: saturate(0%);\n}\n.amazon-logo:is(:hover, :focus) {\n filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.2)) saturate(0);\n}\n\n.apple-book-logo:is(:hover, :focus) {\n filter: saturate(0%) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));\n}\n\n.book-shop-logo:is(:hover, :focus) {\n filter: saturate(0%) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));\n}\n.modal-congrats-text {\n margin-left: auto;\n margin-right: auto;\n margin-top: 4px;\n width: 242px;\n height: 36px;\n color: var(--sidebar-categories);\n text-align: center;\n font-size: 10px;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: -0.4px;\n}\n\n.amazon-logo {\n width: 62px;\n height: 19px;\n}\n\n.apple-book-logo {\n width: 33px;\n height: 32px;\n}\n\n.book-shop-logo {\n width: 38px;\n height: 36px;\n}\n\n.js-dark-mode {\n background-color: var(--color-lite-dark-theme);\n stroke: var(--header);\n color: var(--header);\n}\n\n.js-dark-mode-amazon {\n filter: brightness(0) invert(1);\n}\n\n.js-dark-mode-congrats {\n color: var(--sidebar-categories);\n}\n\n.default-book-pop-up {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 60px;\n height: 64px;\n fill: var(--color-button);\n}\n\n@media screen and (min-width: 768px) {\n .container-popup {\n width: 579px;\n max-height: 501px;\n padding: 40px;\n }\n\n .book-header {\n margin-bottom: 8px;\n font-size: 24px;\n line-height: 1.16;\n letter-spacing: -0.96px;\n }\n\n .book-author {\n margin-bottom: 20px;\n font-size: 14px;\n line-height: 1.28;\n letter-spacing: -0.56px;\n }\n .book-description {\n margin-bottom: 20px;\n }\n .modal-text-container {\n width: 279px;\n }\n\n .modal-content-container {\n display: flex;\n gap: 24px;\n }\n\n .img-container-pop-up {\n width: 192px;\n height: 281px;\n margin-bottom: 40px;\n }\n\n .btn-add {\n width: 100%;\n height: 64px;\n padding: 14px 28px;\n }\n\n .btn-remove {\n width: 100%;\n height: 64px;\n padding: 14px 23px;\n }\n\n .modal-btn {\n font-size: 18px;\n letter-spacing: -0.18px;\n line-height: 1.56;\n }\n\n .modal-congrats-text {\n margin-top: 8px;\n width: 324px;\n font-size: 12px;\n line-height: 14px;\n letter-spacing: -0.48px;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .container-popup {\n width: 579px;\n height: 501px;\n }\n}\n",".sidebar {\n display: flex;\n flex-direction: column;\n gap: 40px;\n // width: 335px;\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n width: 704px;\n gap: 32px;\n }\n \n @media screen and (min-width: 1440px) {\n flex-direction: column;\n width: 356px;\n gap: 86px;\n }\n}\n",".support-container {\n max-width: 335px;\n width: 100%;\n text-align: center;\n padding: 24px 40px 20px 40px;\n border-radius: 16px;\n background: radial-gradient(\n 189.32% 190.93% at 59.76% -23.42%,\n #4f2ee8 18.03%,\n #fff 100%\n );\n box-shadow: 0px 10px 10px 0px rgba(245, 245, 247, 0.1);\n color: #ffffff;\n\n @media screen and (min-width: 1440px) {\n width: 100%;\n }\n}\n\n.support-title {\n margin-bottom: 40px;\n font-size: 28px;\n font-weight: 700;\n line-height: 32px;\n letter-spacing: -1.12px;\n}\n\n.fund-list {\n counter-reset: my-counter;\n list-style-type: none;\n}\n\n.fund-list li {\n counter-increment: my-counter;\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n}\n\n.fund-list li::before {\n content: counter(my-counter, decimal-leading-zero);\n margin-right: 16px;\n font-size: 14px;\n font-weight: 400;\n line-height: 18px;\n letter-spacing: -0.56px;\n}\n\n.icon-trident {\n fill: #ffffff;\n margin-left: 12px;\n transform: translateY(7px);\n}\n\n.support-img {\n filter: brightness(0%) invert(100%);\n}\n\n.swiper {\n width: 100%;\n height: 188px;\n margin-bottom: 32px;\n\n @media (min-width: 768px) {\n height: 292px;\n }\n}\n\n.button-next {\n cursor: pointer;\n}\n\n.button-prev {\n cursor: pointer;\n transform: rotate(180deg);\n}\n",".backdrop-modal-footer {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: auto;\n z-index: 10;\n background-color:var(--sidebar-categories);\n opacity: 1;\n scale: 1;\n visibility: visible;\n transition: opacity 250ms linear, scale 250ms linear, visibility 250ms linear;\n}\n.footer {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 15;\n display: flex;\n flex-direction: column;\n width: 335px;\n padding: 20px 0;\n margin-left: auto;\n margin-right: auto;\n background-color: var(--header);\n border: 2px solid var(--text-main);\n border-radius: 18px;\n}\n.backdrop-modal-footer.is-hidden-footer {\n opacity: 0;\n visibility: hidden;\n scale: 0.9;\n pointer-events: none;\n}\n.footer-head {\n color:var(--text-main);\n font-size: 40px;\n font-style: normal;\n font-weight: 700;\n line-height: 44px;\n letter-spacing: -1.6px;\n}\n.contact-list {\n display: flex;\n flex-direction: column;\n margin: 0;\n gap: 0 10px;\n}\n.contact-list-item {\n display: flex;\n flex-direction: row;\n gap: 5px;\n}\n.contact-text {\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: -0.48px;\n color: var(--sidebar-categories-current);\n}\n.contact-link {\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: -0.48px;\n text-decoration: none;\n}\n.footer-btn {\n position: fixed;\n left: 5px;\n bottom: 10px;\n display: inline-block;\n width: 28px;\n height: 28px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n.footer-gear {\n width: 28px;\n height: 28px;\n fill: var(--sidebar-categories-current);\n}\n.footer-btn:hover,\n.footer-btn:focus {\n -webkit-animation: rotate-center 1.5s linear infinite;\n animation: rotate-center 1.5s linear infinite;\n}\n@-webkit-keyframes rotate-center {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes rotate-center {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@media screen and (min-width: 768px) {\n .footer {\n width: 548px;\n }\n .contact-list {\n height: 84px;\n gap: 0 10px;\n flex-wrap: wrap;\n }\n .footer-btn {\n left: 5px;\n bottom: 10px;\n width: 40px;\n height: 40px;\n }\n .footer-gear {\n width: 40px;\n height: 40px;\n }\n}\n@media screen and (min-width: 1200px) {\n .footer {\n width: 804px;\n }\n .footer > .container {\n max-width: 800px;\n }\n .contact-list {\n height: 56px;\n }\n .footer-btn {\n left: 15px;\n bottom: 20px;\n width: 40px;\n height: 40px;\n }\n .footer-gear {\n width: 40px;\n height: 40px;\n }\n}\n","html {\n scroll-behavior: smooth;\n}\n@media screen and (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n}\n\n.visually-hidden {\n position: absolute;\n white-space: nowrap;\n width: 1px;\n height: 1px;\n overflow: hidden;\n border: 0;\n padding: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n margin: -1px;\n}\n\n.js-sroll-up {\n position: fixed;\n bottom: 0px;\n right: 0px;\n}\n\n.scroll-up-wrapper {\n border-radius: 50%;\n}\n\n.scroll-up-icon{\n width: 44px;\n height: 44px;\n margin-bottom: 16px;\n margin-right: 16px;\n}"],"names":[],"version":3,"file":"index.e5315a88.css.map"} \ No newline at end of file diff --git a/index.html b/index.html index ed7bfa3..3fdee4c 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Bookshelf

Best Sellers Books

    \ No newline at end of file +Bookshelf

    Best Sellers Books

      \ No newline at end of file diff --git a/shopping-list.html b/shopping-list.html index b67054a..6941018 100644 --- a/shopping-list.html +++ b/shopping-list.html @@ -1 +1 @@ -Bookshelf

      Shopping List

      book-column
        \ No newline at end of file +Bookshelf

        Shopping List

        book-column
          \ No newline at end of file