.add-to-cart, .counter, .price, .packaging-checkbox, .checkbox, .select, .information-and-price .quantity {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.order-wrapper .submit-btn, .basket-opened .order-btn, .add-to-cart, .more-about {
  display: flex;
  align-self: center;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 10px 60px;
  background-color: rgba(63, 4, 91, 0.3);
  border: 1px solid rgb(39, 9, 53);
  border-radius: 10px;
  font-family: "Playfair Display", serif;
  font-size: calc(14px + 6 * (100vw - 320px) / 1120);
  font-weight: 700;
  color: rgb(39, 9, 53);
  transition: 0.3s;
}
.order-wrapper .submit-btn:hover, .basket-opened .order-btn:hover, .add-to-cart:hover, .more-about:hover {
  background-color: rgb(255, 210, 51);
  box-shadow: 4px 4px 8px rgba(39, 9, 53, 0.5);
  cursor: pointer;
}
@media (max-width: 767px) {
  .order-wrapper .submit-btn, .basket-opened .order-btn, .add-to-cart, .more-about {
    padding: 10px 30px;
  }
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  background-color: rgba(63, 4, 91, 0.3);
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  overflow-x: hidden;
  color: rgb(39, 9, 53);
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

header {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 104px;
  padding: 10px 50px;
  background-color: rgba(63, 4, 91, 0.3);
  position: relative;
  z-index: 1;
}
header .toggle-lang {
  width: 100%;
  display: flex;
  justify-content: right;
}
header .toggle-lang a {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  padding: 5px;
  margin-left: 10px;
}
header .toggle-lang .active-lang {
  color: rgb(255, 210, 51);
}
header .header_container {
  display: flex;
  justify-content: space-between;
  padding: 8px 0px;
  height: 60px;
}
header .header_container .logo {
  width: 68px;
  height: auto;
  transition: 0.3s;
}
header .header_container .logo img {
  width: auto;
  height: 100%;
}
header .header_container .logo:hover {
  scale: 1.1;
}
header .header_container nav {
  display: flex;
  align-items: center;
  transition: 0.3s;
}
header .header_container nav ul {
  width: 645px;
  display: flex;
  justify-content: space-between;
}
header .header_container nav ul a {
  font-family: "Playfair Display", serif;
  color: #eeeeee;
  font-size: 18px;
  transition: 0.3s;
}
header .header_container nav ul a:hover {
  font-size: 22px;
  line-height: 0.9;
  scale: 1.1;
  color: rgb(255, 210, 51);
}
header .header_container .header-burger {
  display: none;
  transition: 0.3s;
}
header .header_container .header-burger span::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
}
header .header_container .header-burger span::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
}
header .header_container .header-burger span {
  margin: auto 0;
}
header .header_container .header-burger span,
header .header_container .header-burger span::before,
header .header_container .header-burger span::after {
  display: block;
  width: 40px;
  height: 3px;
  background-color: rgb(255, 210, 51);
  transition: 0.3s;
}
header .header_container .active-nav {
  top: 0;
}

.basket-btn {
  width: 48px;
  height: auto;
  position: relative;
  transition: 0.3s;
}
.basket-btn img {
  height: 100%;
  width: auto;
}
.basket-btn:hover {
  scale: 1.1;
  cursor: pointer;
}
.basket-btn .products-counter {
  width: 25px;
  height: 25px;
  padding: 5px 0;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 1;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 50%;
  background-color: rgba(255, 217, 135, 0.3);
  color: rgb(39, 9, 53);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

@keyframes textShadow {
  0% {
    text-shadow: 0px 0px 1px rgb(255, 115, 0), 0px 0px 25px rgb(255, 210, 51), 0px 0px 20px rgb(255, 210, 51), 0px 0px 15px rgb(255, 210, 51), 0px 0px 10px rgb(255, 210, 51), 0px 0px 5px rgb(255, 210, 51), 0px 0px 1px rgb(255, 210, 51);
  }
  25% {
    text-shadow: 0px 0px 1px rgb(255, 115, 0), 0px 0px 50px rgb(255, 210, 51), 0px 0px 40px rgb(255, 210, 51), 0px 0px 30px rgb(255, 210, 51), 0px 0px 25px rgb(255, 210, 51), 0px 0px 15px rgb(255, 210, 51), 0px 0px 5px rgb(255, 210, 51);
  }
  50% {
    text-shadow: 0px 0px 5px rgb(255, 115, 0), 0px 0px 100px rgb(255, 210, 51), 0px 0px 85px rgb(255, 210, 51), 0px 0px 65px rgb(255, 210, 51), 0px 0px 50px rgb(255, 210, 51), 0px 0px 35px rgb(255, 210, 51), 0px 0px 15px rgb(255, 210, 51);
  }
  65% {
    text-shadow: 0px 0px 1px rgb(255, 115, 0), 0px 0px 50px rgb(255, 210, 51), 0px 0px 40px rgb(255, 210, 51), 0px 0px 30px rgb(255, 210, 51), 0px 0px 25px rgb(255, 210, 51), 0px 0px 15px rgb(255, 210, 51), 0px 0px 5px rgb(255, 210, 51);
  }
  85% {
    text-shadow: 0px 0px 1px rgb(255, 115, 0), 0px 0px 25px rgb(255, 210, 51), 0px 0px 20px rgb(255, 210, 51), 0px 0px 15px rgb(255, 210, 51), 0px 0px 10px rgb(255, 210, 51), 0px 0px 5px rgb(255, 210, 51), 0px 0px 1px rgb(255, 210, 51);
  }
  100% {
    text-shadow: 0px 0px 1px rgb(255, 115, 0), 0px 0px 50px rgb(255, 210, 51), 0px 0px 40px rgb(255, 210, 51), 0px 0px 30px rgb(255, 210, 51), 0px 0px 25px rgb(255, 210, 51), 0px 0px 15px rgb(255, 210, 51), 0px 0px 5px rgb(255, 210, 51);
  }
}
main {
  flex: 1 1 auto;
}

.hero {
  width: 100%;
  height: 100vh;
  display: flex;
  background: url(../images/hero.jpg);
  background-position: 0% 70%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  top: -104px;
  left: 0;
  z-index: 0;
  padding: 200px 50px;
}
.hero p {
  display: flex;
  position: relative;
  z-index: 2;
  align-items: center;
  text-align: center;
  width: 520px;
  font-family: "Playfair Display", serif;
  font-size: 72px;
  text-shadow: 0px 0px 1px #ff9102, 0px 0px 50px rgb(255, 210, 51), 0px 0px 45px rgb(255, 210, 51), 0px 0px 25px rgb(255, 210, 51), 0px 0px 15px rgb(255, 210, 51);
  animation: textShadow 1.5s cubic-bezier(0.2, 0.6, 0.7, 0.7) infinite normal;
}

.catalog-wrapp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: -40px auto 40px;
}
.catalog-wrapp > h2 {
  font-family: "Playfair Display", serif;
  font-size: calc(28px + 20 * (100vw - 390px) / 1050);
  text-align: center;
  margin-bottom: 40px;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 40px 50px;
  background: rgba(63, 4, 91, 0.3);
}
footer .logo img {
  display: block;
  width: 100px;
  height: auto;
}
footer .contact-links {
  display: flex;
  flex-direction: column;
}
footer .contact-links a {
  display: flex;
  align-items: center;
  margin: 10px 0 0;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: calc(14px + 2 * (100vw - 390px) / 1050);
  line-height: 1.2;
  color: rgb(39, 9, 53);
  transition: 0.3s;
}
footer .contact-links a img {
  width: 24px;
  height: auto;
}
footer .contact-links a:hover {
  scale: 1.1;
  color: rgb(255, 210, 51);
}
footer .contact-links a span {
  margin-left: 5px;
}

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

@media (max-width: 900px) {
  header {
    position: fixed;
    width: 100vw;
    height: 85px;
    padding: 5px 20px;
    background-color: rgb(157, 126, 170);
  }
  header .toggle-lang a {
    font-size: 12px;
  }
  header .header_container {
    padding: 0px;
    height: 50px;
  }
  header .header_container .logo {
    width: 40px;
    height: auto;
  }
  header .header_container nav {
    position: absolute;
    top: -186px;
    left: 0;
    padding: 20px 0;
    z-index: 3;
    text-align: center;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: rgb(205, 165, 114);
    transition: 0.3s;
  }
  header .header_container nav ul {
    display: block;
    width: 100%;
    padding-bottom: 10px;
  }
  header .header_container nav ul li {
    padding: 5px 0;
  }
  header .header_container .header-burger {
    position: relative;
    display: block;
    width: 40px;
    height: 21px;
    margin: auto;
    padding: 9px 0;
    transition: 0.3s;
    z-index: 4;
  }
  header .header_container .header-burger:hover {
    cursor: pointer;
  }
  header .header_container .basket-btn {
    width: auto;
    height: 40px;
  }
  header .header_container .basket-btn .products-counter {
    top: 20px;
    left: 20px;
  }
  header .header_container .active-nav + .header-burger {
    margin: 130px auto 0;
    background-color: #cda572;
    border-radius: 0 0 10px 10px;
  }
  header .header_container .active-nav + .header-burger span::before {
    rotate: -45deg;
    width: 20px;
    left: 4px;
    bottom: 10px;
  }
  header .header_container .active-nav + .header-burger span::after {
    rotate: 45deg;
    width: 20px;
    right: 4px;
    top: 8px;
  }
  header .header_container .active-nav + .header-burger span {
    background-color: transparent;
  }
  .hero {
    height: 50vh;
    top: -40px;
    padding: 125px 20px 70px;
  }
  .hero p {
    width: 50vw;
    font-size: calc(28px + 44 * (100vw - 390px) / 1050);
  }
  .catalog-wrapp > h2 {
    margin-bottom: 20px;
  }
  footer {
    align-items: center;
    padding: 5px 10px;
  }
  footer .contact-links {
    flex-direction: row;
    align-items: flex-end;
  }
  footer .contact-links a {
    margin-top: 0;
    padding: 5px;
    text-align: center;
  }
  footer .contact-links a span {
    display: none;
  }
  footer .contact-links a img {
    width: 24px;
    height: auto;
  }
  footer .contact-links a img:hover {
    box-shadow: inset 0 0 20px rgb(255, 210, 51);
    border-radius: 25%;
  }
  footer .logo img {
    width: 68px;
  }
  footer .logo img:hover {
    scale: 1.1;
  }
}
.final-messaage {
  display: flex;
  flex-direction: column;
  margin: 15vh auto;
  max-width: 400px;
  height: min-content;
  padding: 10px;
}
.final-messaage p {
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  background-color: #ffffff;
  border-radius: 5px;
}
.final-messaage p span {
  display: block;
  font-weight: 400;
  margin-top: 10px;
}

.catalog {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 0 50px;
  flex-wrap: wrap;
  gap: 40px 40px;
}

.product-preview {
  display: flex;
  flex-direction: column;
  max-width: 280px;
  height: 468px;
  padding: 5px 5px 5px 5px;
  background-color: #ffffff;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  transition: 0.3s;
}
.product-preview:hover {
  cursor: pointer;
  scale: 1.05;
  box-shadow: 4px 4px 8px rgba(39, 9, 53, 0.5);
}

.product-photo {
  max-width: 268px;
  max-height: 268px;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  overflow: hidden;
}
.product-photo img {
  position: relative;
  max-width: 100%;
  bottom: 5%;
  object-fit: cover;
}

.name {
  height: 48px;
  margin: 15px 0;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: calc(14px + 6 * (100vw - 320px) / 1120);
  line-height: 1.2;
  text-align: center;
}

.about {
  display: flex;
  justify-content: space-around;
}

.inform-element {
  display: flex;
}
.inform-element > img {
  width: auto;
  height: 32px;
  margin-bottom: 5px;
}
.inform-element > span {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: rgb(39, 9, 53);
}

@media (max-width: 767px) {
  .catalog {
    padding: 0px;
  }
  .catalog .name {
    height: calc(24px + 24 * (100vw - 320px) / 1120);
    margin: 5px 0;
  }
  .catalog .product-preview {
    height: 420px;
  }
  .catalog .about-product .elem-about img {
    width: 24px;
    height: 24px;
  }
}
.card-body {
  display: flex;
  justify-content: center;
  min-height: 100%;
  padding: 20px;
  margin: 10px auto;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 8px rgba(39, 9, 53, 0.5);
}

.slider-section {
  display: flex;
  flex-direction: column;
  max-width: 358px;
  height: auto;
  align-items: center;
}

.slider-wrapp {
  display: flex;
  max-width: 358px;
  height: auto;
  justify-content: center;
  align-items: center;
}

.slider {
  position: relative;
  width: 268px;
  height: 268px;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 10px;
  overflow: hidden;
  transition: 0.3s;
}
.slider:hover {
  position: relative;
  top: 0;
  left: 10px;
  scale: 1.75;
  z-index: 4;
  cursor: pointer;
}
.slider img {
  max-width: 100%;
  position: relative;
  object-fit: cover;
  object-position: center;
}

.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 46px;
  column-gap: 20px;
  row-gap: 10px;
  justify-content: flex-start;
}
.photo-gallery .slider-images {
  width: 75px;
  height: 75px;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 10px;
  overflow: hidden;
  transition: 0.3s;
}
.photo-gallery .slider-images:hover {
  box-shadow: 0px 0px 8px rgba(39, 9, 53, 0.5);
  scale: 1.1;
  cursor: pointer;
}
.photo-gallery .slider-images img {
  max-width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.activ-img {
  box-shadow: 0px 0px 8px rgba(39, 9, 53, 0.5);
}

.prevention-message {
  width: 270px;
  font-size: 14px;
  color: #930000;
}
.prevention-message p {
  margin-bottom: 20px;
}

.information-and-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 305px;
  padding: 0px 10px;
  margin: 0 20px 0 30px;
}
.information-and-price .product-name {
  height: 58px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.information-and-price .quantity {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 16px;
}

.about-product {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.about-product .elem-about {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.about-product .elem-about img {
  width: 32px;
  height: 32px;
}
.about-product .elem-about span {
  margin-top: 5px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: #000000;
}

.select {
  position: relative;
  width: 100%;
  margin: 20px 0;
}

.select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  cursor: pointer;
}
.select-header .color-name,
.select-header .saturation-name {
  font-family: "Playfair Display", serif;
  font-size: 16px;
  font-weight: 700;
}

.select-current {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 16px;
}

.select-icon {
  display: flex;
  width: 14px;
  height: 8px;
}
.select-icon img {
  width: 8px;
  height: 14px;
  rotate: -90deg;
}

.color-options {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
  padding: 2px 0px 2px 0px;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  border-top: none;
  background-color: #ffffff;
  cursor: pointer;
}

.color-item {
  display: inline-block;
  width: 28px;
  height: 20px;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
}

.option {
  width: 100%;
  display: flex;
  padding: 2px 4px 2px 10px;
  align-items: center;
  justify-content: space-between;
}
.option .color-name {
  font-size: 14px;
}
.option:hover {
  cursor: pointer;
  background-color: rgb(255, 235, 163);
}

.saturation-options {
  width: 100%;
  display: none;
  position: absolute;
  padding: 2px 0px 2px 0px;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  border-top: none;
  background-color: #ffffff;
  cursor: pointer;
}

.saturation-name {
  font-size: 14px;
}

.saturation-price {
  width: auto;
  font-size: 14px;
  height: 20px;
}

.select.select-is-active .color-options,
.select.select-is-active .saturation-options {
  display: block;
  top: 30px;
  background-color: #ffffff;
  z-index: 2;
}

.select.select-is-active .color-options {
  z-index: 3;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 20px;
}

.packaging-checkbox {
  -webkit-appearance: none;
  appearance: none;
}

.packing-label {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Playfair Display", serif;
  font-size: 16px;
  cursor: pointer;
}
.packing-label::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  cursor: pointer;
}

.packaging-checkbox:checked + .packing-label::after {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 1;
  width: 14px;
  height: 14px;
  background-color: rgb(191, 173, 199);
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  cursor: pointer;
}

.price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 20px 0 0;
  font-family: "Playfair Display", serif;
  font-size: 20px;
}
.price .price-value {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  padding: 2px 4px;
}

.counter {
  display: flex;
  padding: 2px;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
}
.counter .counter-btn {
  display: flex;
  align-items: center;
  padding: 2px 4px;
}
.counter .counter-btn img {
  display: block;
  width: 8px;
  height: auto;
}
.counter .counter-btn:hover {
  background-color: rgba(63, 4, 91, 0.07);
  scale: 1.1;
  cursor: pointer;
}
.counter .counter-btn:nth-child(1) {
  border-radius: 5px 0px 0px 5px;
}
.counter .counter-btn:nth-child(3) {
  border-radius: 0px 5px 5px 0px;
}
.counter #counter-value {
  display: flex;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  padding: 2px 6px;
  border-left: 1px solid rgb(39, 9, 53);
  border-right: 1px solid rgb(39, 9, 53);
}

.count-message {
  font-weight: 700;
}

.product-card {
  display: flex;
  flex-direction: column;
  width: 280px;
  height: auto;
  padding: 5px;
  margin: 0;
}

.product-img {
  width: 268px;
  height: 268px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgb(39, 9, 53);
}

.blocked-btn {
  background-color: rgba(155, 3, 3, 0.9);
  font-size: 14px;
  color: rgb(255, 255, 255);
}
.blocked-btn:hover {
  background-color: rgba(155, 3, 3, 0.9);
  color: rgb(255, 255, 255);
}

@media (max-width: 900px) {
  .card-body {
    margin: 95px auto 10px;
  }
}
@media (max-width: 767px) {
  .card-body {
    position: relative;
    flex-direction: column;
    align-items: center;
    margin: 90px auto 10px;
    padding: 10px;
  }
  .card-body .product-name {
    position: absolute;
    top: 10px;
    padding: 10px;
  }
  .card-body .about-product {
    position: absolute;
    top: 75px;
    justify-content: space-evenly;
  }
  .slider-section,
  .slider-wrapp {
    max-width: 270px;
    margin-top: 65px;
  }
  .information-and-price {
    max-width: 270px;
    margin: 0 auto;
  }
  .add-to-cart {
    padding: 10px 60px;
  }
}
.modal-message {
  position: fixed;
  z-index: 3;
  top: 80px;
  right: -100%;
  display: flex;
  flex-direction: column;
  justify-content: right;
  width: 300px;
  height: auto;
  border: 1px solid rgba(39, 9, 53, 0.2);
  border-radius: 10px;
  box-shadow: -4px 4px 8px rgba(39, 9, 53, 0.5);
  padding: 10px;
  background-color: #ffffff;
  transition: 1s;
}
.modal-message p {
  font-size: 16px;
}
.modal-message p:first-child {
  font-weight: 700;
}

.basket-opened {
  display: flex;
  flex-direction: column;
  width: 90%;
  border: 1px solid rgba(39, 9, 53, 0.2);
  border-radius: 10px;
  box-shadow: -4px 4px 8px rgba(39, 9, 53, 0.5);
  padding: 10px;
  background-color: #ffffff;
  transition: 1s;
  margin: 0 auto;
}
.basket-opened caption {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  line-height: 1.33;
  text-align: center;
  margin-bottom: 10px;
}
.basket-opened table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(39, 9, 53, 0.2);
}
.basket-opened tbody tr:nth-child(odd) {
  background-color: rgba(199, 181, 207, 0.15);
}
.basket-opened .t-head .number {
  width: 3%;
}
.basket-opened .t-head .product-name {
  width: 22%;
}
.basket-opened .t-head .saturation {
  width: 20%;
}
.basket-opened .t-head .color {
  width: 15%;
}
.basket-opened .t-head .packaging, .basket-opened .t-head .price, .basket-opened .t-head .summ {
  width: 10%;
}
.basket-opened .t-head .quantity, .basket-opened .t-head .remove-product {
  width: 5%;
}
.basket-opened th {
  display: table-cell;
  padding: 5px 2px;
  font-family: "Playfair Display", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid rgba(39, 9, 53, 0.2);
}
.basket-opened td {
  display: table-cell;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  padding: 4px 2px;
  border: 1px solid rgba(39, 9, 53, 0.2);
}
.basket-opened .remove-product-btn {
  display: flex;
  justify-content: center;
  margin: auto;
  background-color: transparent;
}
.basket-opened .remove-product-btn img {
  display: block;
  width: 100%;
  height: auto;
}
.basket-opened tfoot {
  border: none;
}
.basket-opened .order-amount {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-align: start;
  padding: 5px 20px;
}
.active-message {
  right: 0;
}

.basket-card .success-message {
  padding: 20px;
  text-align: center;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

@media (max-width: 900px) {
  .basket-opened {
    margin: 90px auto 0px;
  }
  .basket-opened td {
    font-size: calc(8px + 6 * (100vw - 320px) / 580);
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .basket-opened th {
    font-size: calc(8px + 4 * (100vw - 320px) / 580);
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .basket-opened .t-head .remove-product {
    width: 10vw;
  }
}
h1 {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: calc(16px + 8 * (100vw - 320px) / 1120);
  line-height: 2;
}

.order-wrapper {
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  max-width: 750px;
  margin: 10px auto;
  padding: 20px 30px 10px;
  border-radius: 10px;
}
.order-wrapper .order-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: "Montserrat", sans-serif;
}
.order-wrapper .order-form .container_row {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  width: 100%;
}
.order-wrapper .order-form .container:nth-child(1) {
  width: 40%;
}
.order-wrapper .order-form .container:nth-child(2) {
  width: 60%;
}
.order-wrapper .order-form .container {
  display: flex;
  flex-direction: column;
}
.order-wrapper .order-form .container h2 {
  width: 100%;
  margin: 0 auto;
  padding-left: 50px;
  font-weight: 700;
}
.order-wrapper .order-form .order-text {
  width: 100%;
  margin: 0 auto;
  padding-left: 50px;
  font-size: calc(14px + 2 * (100vw - 320px) / 1120);
  font-weight: 400;
}
.order-wrapper .order-form .order-text span {
  display: block;
  border-bottom: 1px solid rgb(39, 9, 53);
  line-height: 1.3;
  padding: 5px 0;
}
.order-wrapper .order-form .order-text span::first-letter, .order-wrapper .order-form .order-text span:last-child {
  font-weight: 700;
}
.order-wrapper .order-form .user-data {
  width: 100%;
}
.order-wrapper .order-form .user-data label {
  font-size: calc(14px + 2 * (100vw - 320px) / 1120);
  font-weight: 700;
}
.order-wrapper .order-form .delivery p,
.order-wrapper .order-form .contact-whith p {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: calc(14px + 2 * (100vw - 320px) / 1120);
  margin: 5px 0;
}
.order-wrapper .order-form .delivery label,
.order-wrapper .order-form .contact-whith label {
  display: block;
  font-size: calc(14px + 2 * (100vw - 320px) / 1120);
  margin: 5px;
  font-weight: 400;
  cursor: pointer;
}
.order-wrapper .order-form .delivery label input,
.order-wrapper .order-form .contact-whith label input {
  margin-right: 5px;
}
.order-wrapper .order-form .delivery label:nth-last-child(2) {
  font-weight: 700;
}
.order-wrapper .order-form .user-name,
.order-wrapper .order-form .user-surname,
.order-wrapper .order-form .user-tel,
.order-wrapper .order-form .delivery-address {
  display: block;
  width: 100%;
  padding: 4px 10px;
  margin-bottom: 20px;
  margin-top: 5px;
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}
.order-wrapper .order-form .error-border {
  border: 1px solid rgb(150, 0, 0);
  box-shadow: 0px 0px 2px rgb(150, 0, 0);
}
.order-wrapper .order-form .success-border {
  border: 1px solid rgb(66, 163, 1);
}
.order-wrapper .order-form .error-message {
  color: rgb(150, 0, 0);
}
@media (max-width: 900px) {
  main {
    margin: 90px auto 10px;
  }
  .order-wrapper {
    margin: 0px 10px;
    padding: 10px 10px;
  }
  .order-wrapper .order-form .container_row {
    flex-direction: column-reverse;
  }
  .order-wrapper .order-form .container {
    margin: 0 auto;
    width: 90%;
  }
  .order-wrapper .order-form .container .order-text {
    width: 100%;
    padding-left: 0px;
  }
  .order-wrapper .order-form .container .user-data {
    margin-top: 10px;
  }
  .order-wrapper .order-form .container:nth-child(1),
  .order-wrapper .order-form .container:nth-child(2) {
    width: 100%;
  }
  .order-wrapper .order-form .user-name,
  .order-wrapper .order-form .user-surname,
  .order-wrapper .order-form .user-tel,
  .order-wrapper .order-form .delivery-address {
    margin-top: 0px;
    margin-bottom: 10px;
  }
}
.posts-wrapp {
  padding: 10px 50px;
}

.posts-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1180px;
  margin-top: 20px;
  column-gap: 20px;
  row-gap: 20px;
}
.posts-list li {
  max-width: 450px;
  height: auto;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  padding: 10px;
  transition: 0.3s;
}
.posts-list li:hover {
  box-shadow: 4px 4px 8px rgba(39, 9, 53, 0.5);
  cursor: pointer;
  scale: 1.01;
}

.post-head-container {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 10px;
  font-weight: 700;
}
.post-head-container h2 {
  color: rgb(255, 210, 51);
}
.post-head-container .publish-date {
  font-size: 16px;
  align-self: center;
  color: rgba(39, 9, 53, 0.5);
}

.about-us {
  display: flex;
  flex-direction: column;
  margin: 20px auto;
  max-width: 450px;
  height: auto;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(39, 9, 53);
  border-radius: 5px;
  padding: 10px;
}
.about-us p {
  text-align: center;
  line-height: 1.5;
}/*# sourceMappingURL=style.css.map */