@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Manrope:wght@200..800&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100'); */

h1,
h2,
h3,
h4,
h5,
h6,
p {
   margin: 0;
   padding: 0;
}

body,
html {
   margin: 0;
   padding: 0;
   font-family: var(--family-text);
   background: #FBFAF6;
}

body.bg-white {
   background: #fff;
}

.none {
   display: none !important;
}

svg {
   display: block;
}

* {
   box-sizing: border-box;
}

a {
   text-decoration: none;
}

*:not(.fancybox-container, .fancybox-container *, body, html) {
   transition: 0.2s;
}

.mso.animate {
   animation: spin 1s linear infinite;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

picture,
.picture {
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

picture img,
.picture img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.wrapper {
   max-width: 1140px;
   width: 100%;
   margin: 0 auto;
   display: table;
}

.btn {
   border-radius: 10px;
   padding: 15px 18px;
   width: auto;
   height: auto;
   display: table;
   border: 0;
   background: var(--shrift);
   font-weight: 500;
   font-size: 16px;
   color: #fff;
   font-family: var(--family-text);
   cursor: pointer;
}

.btn.white {
   background: #fff;
   color: var(--shrift);
}

.btn.white:hover {
   color: #fff;
}

.btn.bg-red {
   background: var(--red);
}

.btn:not(.disabled):hover {
   background: #ECB307;
}

.btn-orange {
   width: auto;
   height: auto;
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 9px 24px;
   border: 1px solid var(--orange);
   border-radius: 10px;
   font-weight: 500;
   font-size: 16px;
   color: var(--orange);
}

.btn-orange:hover {
   background: var(--orange);
   color: #fff;
}

.text-success {
   color: var(--orange);
}

.text-error {
   color: var(--red);
}

.text-wait {
   color: var(--shrift);
}

header {
   width: 100%;
   height: 80px;
   display: block;
   border-bottom: 1px solid #d5cbc6;
   background: #fff;
}

header .wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
}

header .logo,
header .logo img {
   display: block;
}

header .nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

header nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
   position: relative;
   top: 2.5px;
   margin-right: 108px;
}

header nav a {
   font-weight: 400;
   font-size: 16px;
   text-transform: uppercase;
   color: var(--shrift);
   padding-bottom: 2.5px;
   border: 1px solid rgba(0, 0, 0, 0);
}

header nav a:hover {
   border-bottom: 1px solid var(--shrift);
}

header .nav .phone {
   font-weight: 700;
   font-size: 16px;
   text-transform: uppercase;
   color: var(--shrift);
   margin-right: 24px;
}

header .nav a.signin {
   border: 1px solid rgba(82, 65, 58, 0.5);
   border-radius: 10px;
   padding: 15px;
   width: auto;
   height: auto;
}

header .nav a.signin {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   color: var(--shrift);
}

header .nav a.signin svg {
   fill: var(--shrift);
}

header .nav a.signin span {
   font-weight: 400;
   font-size: 16px;
}

header .nav a.signin:hover {
   color: #fff;
   background: var(--shrift);
}

header .nav a.signin:hover svg {
   fill: #fff;
}

header .user {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 255px;
   width: 55px;
   height: 55px;
   overflow: hidden;
}

header .user img {
   width: 100%;
   height: 100%;
}

header .user:hover {
   opacity: 0.8;
}

header .bar-menu {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 15px;
}

.products {
   width: 100%;
   height: auto;
   display: flex;
   /* align-items: flex-start; */
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: 30px;
}

.products .product {
   width: calc(33.33333% - 20px);
   border-radius: 10px;
   overflow: hidden;
   position: relative;
   background: #fff;
}

.products .product picture {
   width: 100%;
   height: 224px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.products .product picture img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.products .product .label {
   padding: 4px 8px;
   border-radius: 5px;
   width: auto;
   height: auto;
   display: table;
   font-weight: 400;
   font-size: 13px;
   line-height: 130%;
   letter-spacing: 0.02em;
   text-transform: uppercase;
   color: #fff;
   position: absolute;
   top: 14px;
   left: 14px;
}

.products .product .label.color-1 {
   background: #ecb307;
}

.products .product .label.color-2 {
   background: #DA6342;
}

.products .product .content {
   padding: 0 14px;
   margin-bottom: 14px;
}

.products .product .title {
   width: 100%;
   min-height: 64px;
   margin-top: 18px;
   margin-bottom: 24px;
   font-weight: 600;
   font-size: 16px;
   line-height: 130%;
   color: #17191c;
}

.products .product .price {
   width: auto;
   height: auto;
   margin-bottom: 24px;
}

.products .product .price del {
   display: block;
   font-weight: 400;
   font-size: 16px;
   line-height: 130%;
   text-transform: uppercase;
   text-decoration: line-through;
   color: #ccc;
   margin-bottom: 8px;
}

.products .product .price span {
   font-weight: 600;
   font-size: 16px;
   line-height: 130%;
   text-transform: uppercase;
   color: #17191c;
}

.products .product:hover {
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.10);
}

.products .product:hover picture img {
   width: 105%;
   height: 105%;
}

.products .product:hover .label {
   background: #fff;
}

.products .product:hover .label.color-1 {
   color: var(--orange);
}

.products .product:hover .label.color-2 {
   color: #DA6342;
}

.products .product:hover .title {
   color: var(--orange);
}

.pages {
   width: 100%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
}

.pages a {
   font-weight: 400;
   font-size: 16px;
   line-height: 130%;
   text-transform: uppercase;
   color: #000;
   padding: 10px;
   border-radius: 10px;
}

.pages a.active,
.pages a:hover {
   color: #fff;
   background: var(--shrift);
}

footer {
   width: 100%;
   height: auto;
   display: table;
   background: #fff;
   padding: 60px 0;
}

footer .wrapper {
   width: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 101px;
}

footer .logo,
footer .logo img {
   display: block;
   min-width: 194px;
}

footer .logo span {
   font-size: 12px;
   color: var(--shrift);
   margin-top: 10px;
   line-height: 140%;
   display: block;
}

footer .nav {
   width: 100%;
}

footer .nav a {
   font-weight: 400;
   font-size: 16px;
   color: var(--shrift);
   display: table;
   margin-bottom: 14px;
}

footer .nav a:hover {
   text-decoration: underline;
}

footer .contacts {
   min-width: 210px;
}

footer .contacts .contact {
   font-weight: 600;
   font-size: 16px;
   color: var(--shrift);
   display: flex;
   align-items: center;
   gap: 11px;
   margin-bottom: 19px;
}

footer .contacts .contact:last-child {
   margin-bottom: 25px;
}

footer .contacts .social {
   width: 100%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

footer .contacts .social a {
   border: 1px solid rgba(82, 65, 58, 0.3);
   width: 48px;
   height: 48px;
   border-radius: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

footer .contacts .social a svg {
   fill: #52413A;
}

footer .contacts .social a:hover {
   border: 1px solid #ECB307;
}

footer .contacts .social a:hover svg {
   fill: #ECB307;
}

.footer-links {
   width: 100%;
   height: 54px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 36px;
   background: #52413A;
}

.footer-links a {
   font-weight: 400;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.5);
}

.footer-links a:hover {
   color: #fff;
}

h2.title {
   font-weight: 400;
   font-size: 36px;
   text-transform: uppercase;
   font-family: var(--family-title);
   color: var(--shrift);
}

.form-request {
   width: 100%;
   height: 731px;
   padding-top: 94px;
   /* background: url("../images/product-bg-form.webp") no-repeat center center; */
   background: linear-gradient(146deg, rgba(243, 238, 233, 0) 0%, #f3eee9 35%, #f3eee9 59.04%, rgba(243, 238, 233, 0) 100%), url("../images/product-bg-form.webp");
}

.form-request h2.title {
   margin-bottom: 16px;
}

.form-request p {
   font-weight: 500;
   font-size: 18px;
   color: #17191c;
}

.form-request .wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.form-request form {
   margin-top: 36px;
   max-width: 460px;
}

.form-request form input[type='text'],
.form-request form input[type='email'],
.form-request form textarea,
.form-request form input[type='tel'] {
   border-radius: 10px;
   padding: 15px 10px 15px 12px;
   width: 100%;
   height: 47px;
   background: #fff;
   font-family: var(--second-family);
   font-weight: 400;
   font-size: 14px;
   color: rgba(82, 65, 58, 1);
   border: 0;
   outline: none;
   margin-bottom: 6px;
}

.form-request form textarea {
   resize: none;
   height: 120px;
}

.form-request .amount {
   margin: 18px 0;
   font-weight: 600;
   font-size: 14px;
   text-transform: uppercase;
   color: #454a54;
}

.form-request .amount span {
   text-transform: none;
   margin-left: 12px;
}

.form-request .buttons {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 13px;
}

.form-request .buttons a.buttonVideo {
   border: 1px solid var(--shrift);
   border-radius: 10px;
   padding: 14px 18px;
   width: auto;
   height: auto;
   font-weight: 500;
   font-size: 16px;
   color: #202020;
   display: flex;
   align-items: center;
   gap: 10px;
}

.form-request .buttons a.buttonVideo svg {
   fill: #52413A;
}

.form-request .buttons a.buttonVideo:hover {
   border: 1px solid var(--orange);
   color: var(--orange);
}

.form-request .buttons a.buttonVideo:hover svg {
   fill: var(--orange);
}

.form-request .check {
   margin-top: 24px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
}

.form-request .check input {
   border: 1px solid #cbcfd5;
   border-radius: 3px;
   width: 18px;
   height: 18px;
}

.form-request .check p {
   font-family: var(--second-family);
   font-weight: 400;
   font-size: 14px;
   color: #202020;
}

.form-request .check p a {
   text-decoration: underline;
   text-decoration-skip-ink: none;
   color: #7c5d50;
}

.form-request .check p a:hover {
   opacity: 0.8;
}


.content {
   width: 100%;
}

.comments {
   width: 100%;
   max-width: 600px;
   margin-top: 42px;
}

.comments .comment {
   width: 100%;
   height: auto;
   padding: 13px 0;
   border-bottom: 1px solid rgba(82, 65, 58, 0.2);
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: 20px;
}

.comments .comment:last-child {
   border-bottom: none;
}

.comments .comment picture {
   width: 50px;
   min-width: 50px;
   height: 50px;
   border-radius: 255px;
}

.comments .comment .content {
   width: auto;
}

.comments .comment .content .name {
   font-weight: 400;
   font-size: 17px;
   color: var(--shrift);
}

.comments .comment .content .text {
   margin-top: 4px;
   font-weight: 300;
   font-size: 15px;
   color: var(--shrift);
}

.comments .comment .content .bottom {
   width: auto;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 15px;
   margin-top: 3px;
}

.comments .comment .content .bottom .date {
   font-weight: 400;
   font-size: 12px;
   color: rgba(82, 65, 58, 0.5);
}

.comments .comment .content .bottom a.link {
   font-weight: 300;
   font-size: 12px;
   text-decoration: underline;
   text-decoration-skip-ink: none;
   color: var(--orange);
}

.comments .comment .content .bottom a.link:hover {
   opacity: 0.8;
}

.comments .comment .content .bottom a.link.active {
   font-weight: 600;
}

.comments .comment .content .bottom a.delete {
   color: #000;
   font-size: 18px;
}

.comments .comment .content .bottom a.delete:hover {
   color: var(--red);
}

.comments .comment .answers {
   width: 100%;
   padding-left: 20px;
   background: rgba(0, 0, 0, 0.01);
}

.comments form {
   margin-top: 30px;
   border-radius: 10px;
   width: 100%;
   min-height: 122px;
   display: flex;
   align-items: flex-start !important;
   justify-content: space-between;
   gap: 20px;
   padding: 13px 14px;
   background: rgba(255, 255, 255, 0.5);
}

.comments form picture {
   min-width: 50px;
   height: 50px;
   border-radius: 255px;
}

.comments form .center {
   width: 100%;
   height: auto;
}

.comments form .center .answer-info {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
   font-weight: 300;
   font-size: 12px;
   color: rgba(82, 65, 58, 0.5);
   gap: 8px;
   margin-bottom: 9px;
}

.comments form .center .answer-info {
   font-weight: 600;
}

.comments form .center .answer-info a {
   font-weight: 500;
   font-size: 12px;
   color: #ecb307;
}

.comments form .center textarea {
   width: 100%;
   overflow: hidden;
   outline: none;
   border: 0;
   resize: none;
   font-weight: 300;
   font-size: 17px;
   color: var(--shrift);
   font-family: var(--font-family);
   background: rgba(0, 0, 0, 0);
   padding: 0;
}

.comments form .center .files {
   width: 100%;
   height: auto;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: 7.5px 15px;
   margin-top: 15px;
}

.comments form .center .files .file {
   border-radius: 10px;
   max-width: 300px;
   width: auto;
   height: 35px;
   display: flex;
   background: rgba(255, 255, 255, 0.8);
   align-items: center;
   justify-content: flex-start;
   gap: 5px;
   padding: 0;
}

.comments form .center .files .file picture {
   border-radius: 10px;
   width: 48px;
   height: 27px;
   margin: 4px 5px;
}

.comments form .center .files .file span {
   font-weight: 300;
   font-size: 14px;
   color: var(--shrift);
   margin: 4px 0;
   padding-right: 5px;
}

.comments form .center .files .file .delete {
   width: 35px;
   height: 100%;
   background: var(--red);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 0px 10px 10px 0px;
}

.comments form .center .files .file .delete i {
   color: #fff;
   font-size: 23px;
}

.comments form .center .files .file .delete:hover {
   opacity: 0.75;
}

.comments form .buttons,
.buttons-send {
   min-width: 22px;
}

.comments form .buttons button,
.buttons-send button {
   cursor: pointer;
   background: rgba(0, 0, 0, 0);
   border: 0;
   width: 100%;
}

.comments form .buttons .material-symbols-outlined,
,
.buttons-send .mso {
   font-size: 30px;
   color: var(--shrift);
}

.comments form .buttons .material-symbols-outlined:hover,
.buttons-send .mso:hover {
   color: var(--orange);
}

.comments form .buttons .add-file,
.buttons-send .add-file {
   width: 100%;
   height: 24px;
   margin-top: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   cursor: pointer;
   position: relative;
   left: 1px;
}

.comments form .buttons .add-file input,
.buttons-send .add-file input {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   cursor: pointer;
}

.comments form .buttons .add-file .mso {
   color: #000;
}

.comments form .buttons .add-file:hover .material-symbols-outlined,
.buttons-send .add-file:hover .mso {
   color: var(--orange);
}

.post-buttons {
   margin-top: 18px;
   padding: 0 17px;
   /* padding-bottom: 16px; */
   display: flex;
   gap: 3px;
   align-items: center;
   justify-content: flex-start;
   /* border-bottom: 1px solid #f3eee9; */
}

.post-buttons a {
   border-radius: 10px;
   width: min-content;
   height: 27px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 12px;
   gap: 4px;
   font-weight: 300;
   font-size: 17px;
   color: var(--shrift);
}

.post-buttons a:hover {
   background: #f3eee9;
}

.post-buttons a.active {
   color: var(--orange);
}

@-moz-document url-prefix() {

   .scrollStyles {
      scrollbar-color: var(--orange) rgba(0, 0, 0, 0);
      scrollbar-width: thin;
   }
}

.scrollStyles::-webkit-scrollbar {
   width: 6px;
   background-color: rgba(0, 0, 0, 0);
}

.scrollStyles::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background-color: var(--orange);
}

.viewImage {
   overflow: hidden;
   position: relative;
}

.viewImage i.mso {
   display: none;
}

.viewImage:hover img {
   opacity: 0.8;
}

.viewImage:hover i.mso {
   display: table;
   color: #fff;
   font-size: 60px;
   position: absolute;
   top: calc(50% - 30px);
   left: calc(50% - 30px);
   z-index: 2;
}

.spinner {
   animation: spin 1.5s linear infinite;
}

.bell {
   color: var(--shrift);
}

.bell i {
   font-size: 30px;
}

.bell.active {
   color: var(--red);
}

.check-policy {
   width: 100%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 5px;
   user-select: none;
}

.check-policy input {
   width: 20px;
   height: 20px;
   display: block;
}

.check-policy span {
   color: var(--shrift);
   font-size: 12px;
   line-height: 140%;
   display: block;
}

.check-policy span a {
   color: var(--orange);
   text-decoration: underline;
}

.check-policy span a:hover {
   color: var(--red);
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}