@font-face {
  font-family: Manrope;
  src: url("../fonts/Manrope-Light.ttf");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/Manrope-Regular.ttf");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/Manrope-SemiBold.ttf");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/Manrope-Bold.ttf");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/Manrope-ExtraBold.ttf");
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Light.ttf");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Bold.ttf");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: Montserrat;
  src: url("../fonts/Montserrat-Regular.ttf");
  font-style: normal;
  font-weight: 400;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  border: 0;
  font-size: 100%;
  font-family: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
button {
  cursor: pointer;
  background: none;
  border: none;
}
ol,
ul {
  list-style: none;
}
.flx {
  display: flex;
  align-items: center;
}
.icon-arrow {
  display: flex;
  width: 68px;
  height: 50px;
  background-repeat: no-repeat;
}
.icon-arrow.arrow-left {
  background-image: url("../img/icon_arrow-l.svg");
}
.icon-arrow.arrow-right {
  background-image: url("../img/icon_arrow-r.svg");
}
.readr {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff;
  font-family: Manrope;
  font-style: normal;
  line-height: 1;
  leading-trim: both;
  text-edge: cap;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.18px;
}
.readr .container {
  width: 100%;
  height: 100%;
  max-width: 1440px;
  padding-left: 80px;
  padding-right: 80px;
  margin-left: auto;
  margin-right: auto;
}
.readr .title {
  font-family: "Cormorant Garamond";
  font-weight: 700;
  line-height: 140%;
  font-variant: small-caps;
  color: #1e1e1e;
}
.readr .title.h1 {
  font-size: 50px;
  letter-spacing: 0.5px;
}
.readr .title.h2 {
  font-size: 40px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.readr .title.white {
  color: #fff;
}
.readr .title.center {
  text-align: center;
}
.readr .title.underline {
  display: flex;
  justify-content: center;
  width: max-content;
  min-width: 574px;
  margin: 0 auto 66px;
  padding: 0 20px 38px;
  border-bottom: 1px solid #1e1e1e;
}
.readr .title.mb45 {
  margin-bottom: 26px;
  margin-top: -14px;
}
.readr .white {
  color: #fff;
}
.readr .text-capitalize {
  text-transform: capitalize;
}
.readr .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  min-width: 302px;
  width: max-content;
  padding: 10px 40px;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.2px;
}
.readr .btn.btn--orange {
  background: #99582a;
  text-transform: uppercase;
}
.readr .btn.btn--black {
  background: #1e1e1e;
}
.readr .btn-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #99582a;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}
.readr .btn-link.colm {
  flex-direction: column;
  align-items: flex-end;
}
/*header*/
.readr-header {
  position: relative;
  z-index: 10;
  padding-block: 14px;
  min-height: 75px;
  background: #99582a;
}
.readr-header .container {
  justify-content: space-between;
}
.readr-header .header-logo {
  width: 174px;
  height: 47px;
}
.readr-header .header-logo img {
  width: 100%;
  object-fit: contain;
}
.readr-header .header-right .btn-close {
  display: none;
}
.readr-header .header-nav {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 70px;
  margin-right: 70px;
}
.readr-header .header-nav .header-nav-item {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}
.readr-header .header-nav .header-nav-item.active,
.readr-header .header-nav .header-nav-item:hover {
  text-decoration: underline;
}
.readr-header .header-cart {
  display: flex;
  gap: 3px;
}
.header-cart .cart-btn {
  width: 30px;
  height: 30px;
}
.header-cart .cart-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(4) grayscale(1);
}
.header-cart .cart-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1e1e1e;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12px;
}
.header-menu-mobile {
  display: none;
}
/*main*/
.readr-main {
  color: #1e1e1e;
  overflow: hidden;
}
.readr-main .section {
  padding-block: 90px;
}
.readr-main .section p {
  margin-bottom: 20px;
}
.readr-main .section .btn {
  margin-top: 30px;
}
.readr-main .section.orange {
  background: #dda15e;
}
.readr-main .section.black {
  background: #1e1e1e;
}
.readr-main .section.white {
  padding-block: 150px;
}
.readr-main .centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.readr-main .text-box {
  position: relative;
  padding: 60px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  color: #1e1e1e;
}
.readr-main .text-box::before,
.readr-main .text-box::after {
  content: "";
  position: absolute;
  display: block;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border: 1px solid #dda15e;
}
.readr-main .text-box::before {
  top: 0;
  left: 0;
}
.readr-main .text-box::after {
  bottom: 0;
  right: 0;
}
.readr-main .two-colm {
  display: flex;
}
.readr-main .section.two-colm,
.readr-main .section > .two-colm {
  gap: 33px;
}
.readr-main .two-colm .content-colm {
  width: 46%;
}
.readr-main .two-colm .img-colm {
  width: 54%;
}
.two-colm .img-colm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: linear-gradient(
    216deg,
    #1e1e1e 0.03%,
    #1e1e1e 27.82%,
    #3b3a3a 47.77%,
    #1e1e1e 73.44%,
    #1e1e1e 100%
  );
}
.shop-img-box img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.shop-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.shop-card .content {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #1e1e1e;
}
.shop-card .shop-img-box {
  height: 454px;
  flex-shrink: 0;
}
.shop-card .sc-title {
  margin-bottom: 14px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.25px;
}
.shop-card .sc-subtitle {
  margin-bottom: 18px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 0.2px;
}
.shop-card .sc-price {
  margin-bottom: 30px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.25px;
}
.shop-card .btn {
  min-width: 265px;
  margin-top: auto !important;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px 24px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.blog-card .img-box {
  width: 100%;
  aspect-ratio: 73/46;
}
.blog-card .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.blog-card .content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blog-card .content .b-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  color: #999;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  text-transform: uppercase;
}
.blog-card .content .b-title {
  color: #1e1e1e;
  font-family: "Cormorant Garamond";
  font-size: 25px;
  font-weight: 700;
  line-height: 140%;
  font-variant: small-caps;
  letter-spacing: 0.25px;
}
.blog-card .content .b-text {
  color: #5c5c5c;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: normal;
  margin-bottom: 0;
}
.blog-card .content .b-line {
  margin-block: 22px;
  width: 100%;
  height: 1px;
  border: solid #1e1e1e;
  border-width: 1px 0 0 0;
}
.blog-card .content .b-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 10px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px 22px;
}
.readr-main .hero-home {
  background-color: #1e1e1e;
}
.readr-main .hero-home .container {
  padding: 0;
  min-height: 793px;
}
.readr-main .hero-home .two-colm {
  position: relative;
}
.readr-main .hero-home .two-colm::after {
  content: "";
  position: absolute;
  top: 0;
  left: 4%;
  z-index: 0;
  display: block;
  width: 580px;
  height: 793px;
  background: url("/img/img-bg-1.svg") no-repeat;
  background-position: top -70px right -350px;
  background-size: 963px 925px;
}
.readr-main .hero-home .two-colm .content-colm {
  position: relative;
  z-index: 2;
  padding: 141px 50px 10px 80px;
  width: 51%;
  min-width: 732px;
}

.readr-main .hero-home .two-colm .img-colm {
  position: relative;
  z-index: 2;
  max-width: 49%;
}
.readr-main .hero-home .title.h1 {
  margin-bottom: 45px;
}
.readr-main .hero-home .subtitle {
  margin-bottom: 34px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}
.readr-main .hero-home .p-text {
  margin-bottom: 50px;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}
.readr-main.home .section-read {
  padding-block: 90px;
  min-height: 487px;
}
.readr-main.home .section-read .container {
  max-width: 975px;
}
.readr-main.home .section-read .title.h2 {
  font-size: 50px;
  text-transform: capitalize;
}
.readr-main.home .section-bestsellers .shop-grid {
  margin-bottom: 66px;
}

.readr-main.home .section-review .container {
  max-width: 1223px;
}
.readr-main.home .section-popular {
  padding-top: 0 !important;
}
.readr-main .home-swiper {
  padding-inline: 68px;
}
.readr-main .home-swiper::before,
.readr-main .home-swiper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  display: block;
  width: 68px;
  background-color: #fff;
}
.readr-main .home-swiper::before {
  left: 0;
}
.readr-main .home-swiper::after {
  right: 0;
}
.readr-main .home-swiper .home-slide {
  min-height: 315px;
  max-width: 857px;
  margin: 0 auto;
}
.readr-main .home-swiper .home-slide-header {
  justify-content: center;
  margin-bottom: 26px;
  gap: 16px;
}
.readr-main .home-swiper .home-slide-header img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: contain;
}
.readr-main .home-swiper .home-slide-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.readr-main .home-swiper .home-slide-title {
  font-family: "Cormorant Garamond";
  font-size: 30px;
  font-weight: 300;
  line-height: normal;
  text-transform: uppercase;
}
.readr-main .home-swiper .home-slide-subtitle {
  color: #99582a;
  font-family: Manrope;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin: 0;
}
.readr-main .home-swiper .home-swiper-next,
.readr-main .home-swiper .home-swiper-prev {
  width: 68px;
  height: 50px;
  background-repeat: no-repeat;
}
.readr-main .home-swiper .home-swiper-next::after,
.readr-main .home-swiper .home-swiper-prev::after {
  content: "";
}
.readr-main .home-swiper .home-swiper-next {
  right: 0;
  background-image: url("../img/icon_arrow-r.svg");
}
.readr-main .home-swiper .home-swiper-prev {
  left: 0;
  background-image: url("../img/icon_arrow-l.svg");
}

.readr-main.shop .container {
  padding-top: 90px;
  padding-bottom: 150px;
}
.readr-main.book .navigation {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 40px;
  margin-bottom: 72px;
  color: #1e1e1e;
  font-size: 20px;
  font-weight: 300;
  line-height: 140%;
  letter-spacing: 0.2px;
}
.readr-main.book .navigation .current-title {
  color: #797979;
}
.readr-main.book .navigation .sep {
  display: block;
  width: 24px;
  height: 24px;
  background: url("/img/icon_chevron-right.svg") no-repeat;
  background-position: center center;
}
.readr-main .section-book .book-box {
  display: flex;
  gap: 36px;
}
.section-book .book-box .shop-img-box {
  width: 100%;
  max-width: 519px;
  height: 549px;
  padding: 32px;
}
.section-book .book-box .shop-img-box img {
  width: 100%;
  height: 100%;
}
.section-book .book-box .book-title {
  margin-bottom: 26px;
  margin-top: -8px;
  font-family: "Cormorant Garamond";
  font-size: 30px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.section-book .book-box .book-price {
  font-size: 25px;
  font-weight: 800;
  font-variant: small-caps;
  letter-spacing: 0.25px;
  margin-bottom: 40px;
}
.section-book .book-box .book-discription {
  margin-bottom: 40px;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}
.section-book .book-box .actions {
  gap: 24px;
}
.section-book .book-box .actions .btn {
  width: 50%;
  max-width: 302px;
  min-width: max-content;
}
.readr-main .section-book .line {
  margin-block: 50px;
  width: 100%;
  height: 1px;
  border: solid #1e1e1e;
  border-width: 1px 0 0 0;
}
.readr-main .section-book .book-info {
  color: #1e1e1e;
  font-size: 20px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.2px;
  text-transform: capitalize;
}
.readr-main .shop-grid .book-hidden {
  display: none;
}
.readr-main .blog-grid .post-hidden {
  display: none;
}
.readr-main .hero-orange {
  padding-block: 100px;
  padding-inline: 20px;
}
.readr-main .hero-orange .hero-orange-img {
  display: flex;
  width: 100%;
  height: 200px;
  object-fit: contain;
  margin-top: 30px;
}
.readr-main .section-info.white {
  padding-block: 100px;
}
.readr-main .section-info .container {
  max-width: 1017px;
}
.readr-main .section .ul {
  margin-block: 20px;
  margin-left: 30px;
  list-style: disc;
}
.readr-main .section .ul-contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block: 20px;
}
.readr-main.about .about-h3 {
  color: #fff;
  font-family: Manrope;
  font-size: 25px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.25px;
  text-transform: capitalize;
}
.readr-main .section-contact .content-colm::after {
  content: "";
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 261px;
  margin-top: 33px;
  background: url("../img/bg-books.png") no-repeat;
  background-position: center center;
}
.readr-main .section-contact .two-colm .content-colm {
  width: 52%;
}
.readr-order {
  display: flex;
  gap: 30px;
  padding-block: 60px;
}
.readr-order .readr-order__left {
  width: 100%;
}
.readr-order .readr-order__left .form {
  box-shadow: none;
  padding-inline: 0;
}
.readr-order .readr-order__right {
  /* padding-top: 60px; */
}
.readr-order .order-box {
  width: 491px;
  height: auto;
  min-height: 600px;
  padding: 20px 20px;
  background-color: #fff;
  border: 1px solid #1e1e1e;
}
.readr-order .order-box.disabled {
  pointer-events: none;
  filter: grayscale(1);
}
.order-box .order-box__header {
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #1e1e1e;
}
.order-box .order-box__header .title.h3 {
  font-size: 30px;
}
.readr-order .order-box .cart-content {
  min-height: 500px;
}
.readr-order .order-box .cart-footer {
  margin-top: auto;
}
.readr-order .order-box .order-info {
  margin-bottom: 20px;
  font-size: 16px;
}
.readr-order--empty {
  display: none;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding-block: 90px;
  text-align: center;
}
.readr-order--empty p {
  font-size: 20px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.16px;
  margin-bottom: 30px;
}

/*regform*/
.readr-main .section-contact .two-colm .reg-form-wrapp {
  width: 48%;
  max-width: 596px;
}
.readr-main .form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: inherit;
  padding: 60px 50px;
  background: #fff;
  box-shadow: 0 4px 26.1px 0 rgba(0, 0, 0, 0.11);
}
.readr-main .form.disabled {
  pointer-events: none;
}
.readr-main .form.disabled .form-btn {
  filter: grayscale(1);
}
.readr-main .form-field {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
.readr-main .form-field label {
  display: block;
  margin-bottom: 10px;
  color: #1e1e1e;
  font-size: 19px;
  font-weight: 400;
}
.readr-main .form-field label .light-gray {
  color: #aeaeae;
}
.readr-main .form-field input {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  width: 100%;
  height: 50px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid #aeaeae;
  color: #1a1a1a;
  font-size: 19px;
  font-weight: 400;
}
.readr-main .form-field input::placeholder {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: #aeaeae;
}
.readr-main .form-field input:hover,
.readr-main .form-field input:focus,
.readr-main .form-field input:active {
  border: 1px solid #dda15e;
}
.readr-main .form-field input:focus,
.readr-main .form-field input:active {
  outline: none;
}
.readr-main .form-field textarea {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 10px;
  align-self: stretch;
  height: 132px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid #aeaeae;
}
.readr-main .form-field textarea:focus,
.readr-main .form-field textarea:active {
  outline: none;
}
.readr-main .form-field .red-dot {
  color: #c20017;
  font-size: 19px;
  font-weight: 400;
}
.readr-main .form-field.error::after {
  content: attr(data-error);
  position: absolute;
  left: 0;
  bottom: -16px;
  color: red;
  font-size: 12px;
  line-height: 1;
}
.readr-main .form-field.error input {
  border: 1px solid red;
}
.readr-main .form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 57px;
  background: #99582a;
  transition: 0.2s ease-out;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.24px;
}
.readr-main .form-btn:hover {
}
.modal-note {
  position: fixed;
  top: 50px;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  font-weight: 600;
  border-radius: 30px;
  border: 1px solid #fff;
  animation: 0.3s ease-out forwards slide-in;
}
@keyframes slide-in {
  0% {
    top: -100px;
  }
  100% {
    top: 50px;
  }
}
/*end regform*/

.readr-main .section-blog {
  padding-block: 70px;
  background-color: #fff;
}
.readr-main .hero-post {
  display: flex;
  background-color: #dda15e;
}
.readr-main .hero-post .hero-img {
  width: 100%;
  aspect-ratio: 480/199;
}
.readr-main .section-post-content {
  padding-block: 70px;
  background-color: #fff;
  color: #5c5c5c;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.18px;
  text-transform: capitalize;
}
.readr-main .section-post-content .title.h2 {
  margin-bottom: 30px;
}
.readr-main .section-post-content .post-h2 {
  margin-top: 28px;
  margin-bottom: 22px;
  color: #99582a;
  font-family: Manrope;
  font-size: 22px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.22px;
  text-transform: uppercase;
}
.readr-main .section-post-content p {
  margin-bottom: 16px;
}
.readr-main .section-post-content .post-ul {
  margin-block: 20px;
  margin-left: 30px;
  list-style: disc;
}
.readr-main .section-policy {
  background: #ffe1bf;
  padding-bottom: 150px;
}
.readr-main .section-policy p,
.readr-main .section-policy ul {
  max-width: 845px;
}
.readr-main .section-policy .title.h2 {
  margin-bottom: 30px;
}
.readr-main .section-policy .date-line {
  margin-bottom: 20px;
}
.readr-main .section-policy .policy-h2 {
  margin-top: 30px;
  margin-bottom: 20px;
  color: #99582a;
  font-family: Manrope;
  font-size: 25px;
  font-weight: 600;
  line-height: 150%;
}
.readr-main .section-policy .policy-h3 {
  margin-bottom: 20px;
  color: #1e1e1e;
  font-family: Manrope;
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
}
.readr-main .section-policy .policy-ul {
  margin-top: 16px;
  margin-bottom: 20px;
  margin-left: 30px;
  list-style: disc;
}

/*cart*/
.reader-cart {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
}
.reader-cart.active {
  display: block;
}
.reader-cart .cart-overlay {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(0, 0, 0, 0.33);
}
.reader-cart .cart-box {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  max-width: 491px;
  height: 100%;
  max-height: 810px;
  padding: 0 20px 70px;
  background-color: #fff;
}
.reader-cart .cart-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: block;
  width: 24px;
  height: 24px;
  background: url("/img/icon_x.svg") no-repeat;
  background-position: center center;
  transition: transform 0.2s ease-out;
}
.reader-cart .cart-close:hover {
  transform: scale(0.9);
}
.reader-cart .cart-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 44px 0 30px;
  border-bottom: 1px solid #dad9d9;
  color: #1e1e1e;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.24px;
  text-transform: capitalize;
}
.reader-cart .cart-header::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url("/img/icon_cart.svg") no-repeat;
  filter: grayscale(1) brightness(0);
}
.reader-cart .cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}
.reader-cart .cart-empty p {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.16px;
}
.cart-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% + 40px);
  height: calc(100% - 105px);
  margin-inline: -20px;
  padding-inline: 20px;
  overflow: auto;
}
.cart-grid {
  display: flex;
  flex-direction: column;
  padding-block: 20px;
}
.cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 125px 1fr;
  gap: 14px;
  padding-block: 10px;
}
.cart-item:has(.cart-item-checkbox:checked) {
  border: 1px solid #99582a;
  padding-inline: 10px;
}

.cart-item-title {
  margin-bottom: 16px;
  font-family: "Cormorant Garamond";
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.16px;
  text-transform: uppercase;
}
.cart-price-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
}
.cart-item-input {
  display: flex;
  align-items: center;
  height: 36px;
  width: fit-content;
  border: 1px solid #d8d8d8;
}
.cart-item-input button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #a4a4a4;
  font-size: 24px;
  font-weight: 400;
}
.cart-item-input input {
  display: flex;
  width: 30px;
  border: none;
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.22px;
}
.cart-item-input input:active,
.cart-item-input input:focus {
  border: none;
  outline: none;
}
.cart-item-price {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.16px;
}
.reader-cart .cart-item-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  visibility: hidden;
}
.reader-cart .cart-item-delete {
  position: absolute;
  top: -5px;
  right: -5px;
  display: none;
  width: 22px;
  height: 22px;
  background-color: #1e1e1e;
  border-radius: 50%;
}
.reader-cart .cart-item-delete::before {
  content: "";
  display: flex;
  width: 100%;
  height: 100%;
  background-image: url("/img/icon_x2.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.reader-cart .cart-item:has(.cart-item-checkbox:checked) .cart-item-delete {
  display: block;
}
.cart-footer .cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 30px;
  margin-bottom: 30px;
  border: solid #dad9d9;
  border-width: 1px 0 1px 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.cart-footer .cart-total-sum {
  color: #6b6b6b;
  font-weight: 800;
}
.cart-footer .btn {
  width: 100%;
  max-width: unset;
}

/*footer*/
.readr-footer {
  margin-top: auto;
  background: #1e1e1e;
  overflow: hidden;
}
.readr-footer .container {
  position: relative;
}
.readr-footer .container::after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: -170px;
  z-index: 1;
  display: block;
  width: 390px;
  height: 390px;
  background: url("/img/img-bg-3.svg") no-repeat;
  background-position: top -296px left -234px;
  background-size: 897px 897px;
  transition: all 0.3s ease-out;
}
.readr-footer .footer-top {
  display: flex;
  gap: 78px;
  padding-top: 80px;
  padding-bottom: 50px;
  border-bottom: 1px solid #303030;
}
.readr-footer .footer-info {
  width: 50%;
  max-width: 517px;
}
.readr-footer .footer-info p {
  font-size: 18px;
  color: #a8a8a8;
  margin-bottom: 0;
}
.readr-footer .footer-logo {
  width: 174px;
  margin-bottom: 35px;
}
.readr-footer .footer-logo img {
  width: 100%;
  object-fit: contain;
}
.readr-footer .footer-nav {
  display: flex;
  gap: 57px;
}
.readr-footer .footer-nav-col .col-title {
  margin-bottom: 16px;
  color: #dda15e;
  font-family: "Cormorant Garamond";
  font-size: 20px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.readr-footer .footer-nav-col .col-ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.readr-footer .footer-nav-col .col-ul li a {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.18px;
  text-transform: capitalize;
}
.readr-footer .footer-nav-col .col-ul li a:hover {
  color: #dfb482;
}
.readr-footer .footer-bottom {
  padding-top: 50px;
  padding-bottom: 80px;
  color: #f5f5f5;
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.14px;
}
@media (max-width: 1200px) {
  .readr .container {
    padding-left: 30px;
    padding-right: 30px;
  }
  .readr-header .header-nav {
    gap: 40px;
    margin-right: 40px;
  }
}
@media (max-width: 1000px) {
  .readr-header {
    padding-block: 24px;
  }
  .readr-header .header-right {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 274px;
    z-index: 14;
    display: none;
    flex-direction: column;
    padding: 100px 10px 10px;
    background-color: #fff;
  }
  .readr-header .header-right.open {
    display: flex;
  }
  .readr-header .header-right .btn-close {
    position: absolute;
    top: 28px;
    right: 30px;
    display: flex;
    transition: transform 0.2s ease-out;
  }
  .readr-header .header-right .btn-close:hover {
    transform: scale(0.9);
  }
  .header-menu-mobile {
    display: block;
  }
  .readr-header .header-nav {
    flex-direction: column;
    gap: 26px;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .readr-header .header-nav .header-nav-item {
    color: #99582a;
  }
  .header-cart .cart-btn img {
    filter: none;
  }
  /*main 1000px*/
  .readr-main .section {
    padding-block: 60px;
  }
  .readr-main .section.white {
    padding-block: 100px;
  }
  .readr-main .text-box {
    padding: 60px 20px;
  }
  .readr-main .two-colm {
    flex-direction: column;
  }
  .readr-main .section.two-colm,
  .readr-main .section > .two-colm {
    max-width: 744px;
    margin-inline: auto;
  }
  .readr-main .two-colm .content-colm {
    width: 100%;
    order: 1;
  }
  .readr-main .two-colm .img-colm {
    width: 100%;
    order: 2;
  }
  .readr-main .hero-home .two-colm::after {
  }
  .readr-main .hero-home .two-colm .content-colm {
    padding: 80px 30px 58px 30px;
    width: 100%;
    min-width: unset;
  }
  .readr-main .hero-home .two-colm .img-colm {
    max-width: 100%;
    height: 531px;
  }
  .readr-main.home .section-read {
    position: relative;
    padding-block: 60px;
  }
  .readr-main.home .section-read::after {
    content: "";
    display: flex;
    width: 100%;
    height: 200px;
    background: url("../img/bg-book.png") no-repeat;
    background-position: center center;
    background-size: contain;
    margin-top: 60px;
  }
  .readr-main .home-swiper {
    padding-inline: 0;
    padding-bottom: 80px;
  }
  .readr-main .home-swiper::before,
  .readr-main .home-swiper::after {
    content: none;
  }
  .readr-main .home-swiper .home-swiper-next,
  .readr-main .home-swiper .home-swiper-prev {
    bottom: 0;
    top: unset;
  }
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 20px;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 20px;
  }
  .readr-main.shop .container {
    padding-top: 50px;
    padding-bottom: 110px;
  }
  .readr-main.book .navigation {
    display: none;
  }
  .readr-main .section-book {
    padding-top: 50px;
  }
  .readr-main .section-book .book-box {
    gap: 20px;
  }
  .section-book .book-box .shop-img-box {
    width: 50%;
    max-width: unset;
    padding: 23px;
  }
  .section-book .book-box .content {
    width: 50%;
  }
  .section-book .book-box .actions {
    flex-wrap: wrap;
  }
  .section-book .book-box .actions .btn {
    width: 100%;
    max-width: 332px;
  }
  .readr-main .shop-grid .book-hidden {
    display: flex;
  }
  .readr-main .blog-grid .post-hidden {
    display: flex;
  }
  .readr-main .section-contact::after {
    content: "";
    display: flex;
    width: 100%;
    height: 261px;
    margin-top: 33px;
    background: url("../img/bg-books.png") no-repeat;
    background-position: center center;
  }
  .readr-main .section-contact .content-colm::after {
    content: none;
  }
  .readr-main .section-contact .two-colm .content-colm {
    width: 100%;
  }
  .readr-main .section-contact .two-colm .reg-form-wrapp {
    width: 100%;
    margin-inline: auto;
    order: 2;
  }
  .readr-order {
    flex-direction: column;
    align-items: center;
  }
  /*cart*/
  .reader-cart .cart-box {
    bottom: 0;
    max-height: unset;
  }
  /*footer 1000px*/
  .readr-footer .container::after {
    bottom: 110px;
  }
  .readr-footer .footer-top {
    flex-direction: column;
    padding-top: 40px;
  }
  .readr-footer .footer-info {
    width: 100%;
  }
  .readr-footer .footer-bottom {
    padding-bottom: 40px;
  }
}
@media (max-width: 600px) {
  .readr .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .readr .title.h1 {
    font-size: 35px;
    letter-spacing: 0.35px;
  }
  .readr .title.h2 {
    font-size: 25px;
    letter-spacing: 0.25px;
  }
  .readr .title.underline {
    width: 100%;
    min-width: unset;
    margin: 0 auto 40px;
    padding: 0 0 28px;
    border-bottom: 1px solid #1e1e1e;
  }
  /*header 600*/
  .readr-header .header-right {
    max-width: 100%;
  }
  /*form*/
  .readr-main .form {
    padding: 50px 20px;
  }
  /*main 600*/
  .readr-main.home .section-read .title.h2 {
    font-size: 25px;
  }
  .readr-main .hero-home .two-colm .img-colm {
    height: 227px;
  }
  .readr-main .hero-home .two-colm .content-colm {
    padding: 40px 20px 38px 20px;
  }
  .readr-main .home-swiper .home-slide {
    padding-block: 32px;
  }
  .readr-main .home-swiper .home-slide-header {
    gap: 10px;
  }
  .readr-main .home-swiper .home-slide-header img {
    width: 40px;
    height: 40px;
  }
  .readr-main .home-swiper .home-slide-title {
    font-size: 20px;
  }
  .readr-main .home-swiper .home-slide-subtitle {
    font-size: 12px;
  }
  .readr-main .home-swiper p {
    font-size: 18px;
  }
  .shop-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .readr-main.shop .container {
    padding-top: 33px;
    padding-bottom: 90px;
  }
  .readr-main .section-book .book-box {
    flex-direction: column;
    gap: 30px;
  }
  .section-book .book-box .shop-img-box {
    width: 100%;
    height: 341px;
  }
  .section-book .book-box .content {
    width: 100%;
  }
  .section-book .book-box .book-title {
    margin-bottom: 26px;
    margin-top: -8px;
    font-size: 25px;
  }
  .section-book .book-box .book-discription {
    font-size: 18px;
  }
  .readr-main.home .shop-grid .book-hidden {
    display: none;
  }
  .readr-main:not(.home) .blog-grid .post-hidden {
    display: none;
  }
  .readr-main .section-book .book-info {
    font-size: 18px;
  }
  .readr-main .section-post-content .post-h2 {
    font-size: 20px;
  }
  .readr-order .order-box {
    width: 100%;
  }

  /*cart*/
  .reader-cart .cart-box {
    max-width: unset;
    left: 0;
  }
  /*footer 600*/
  .readr-footer .container::after {
    bottom: 260px;
    right: -250px;
  }
  .readr-footer .footer-top {
    gap: 40px;
  }
  .readr-footer .footer-info p {
    font-size: 16px;
  }
  .readr-footer .footer-nav {
    flex-wrap: wrap;
    gap: 40px 57px;
  }
}
@media (max-width: 400px) {
  .readr .btn {
    width: 100%;
    min-width: unset;
  }
  .readr-order .order-box {
    margin-inline: -20px;
    width: calc(100% + 40px);
  }
}