@font-face {
   font-family: "PT Sans";
   font-style: normal;
   font-weight: 400;
   src: url("../fonts/PTSans-Regular.woff2") format("woff2");
   font-display: swap;
 }
 
 @font-face {
   font-family: "PT Sans";
   font-style: normal;
   font-weight: 700;
   src: url("../fonts/PTSans-Bold.woff2") format("woff2");
   font-display: swap;
 }
 
 @font-face {
   font-family: "PT Sans";
   font-style: italic;
   font-weight: 400;
   src: url("../fonts/PTSans-Italic.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "PT Sans";
   font-style: italic;
   font-weight: 700;
   src: url("../fonts/PTSans-BoldItalic.woff2") format("woff2");
   font-display: swap;
 }
 
 /* PT Sans Narrow */
 @font-face {
   font-family: "PT Sans Narrow";
   font-style: normal;
   font-weight: 700;
   src: url("../fonts//PTSans-NarrowBold.woff2") format("woff2");
   font-display: swap;
 }
 
 html {
   height: 100%;
 }
 
 body {
   min-width: 1020px;
   display: flex;
   flex-direction: column;
   min-height: 100%;
   margin: 0;
   font-family: "PT Sans", sans-serif;
   font-size: 16px;
   line-height: 24px;
   color: #242424;
   background-color: #fbf7f4;
 }
 
 img {
   max-width: 100%;
   object-fit: contain;
 }
 
 .visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   border: 0;
   clip: rect(0 0 0 0);
   overflow: hidden;
 }
 
 /* Button */
 .button {
   display: inline-block;
   box-sizing: border-box;
   padding: 14px 20px;
   font-family: inherit;
   font-size: 16px;
   line-height: 16px;
   font-weight: 700;
   text-align: center;
   color: #ffffff;
   background-color: #000000;
   border: none;
   text-decoration: none;
   text-transform: uppercase;
   cursor: pointer;
 }
 
 /* Light */
 .button-light,
 .button-current {
   color: #242424;
   background-color: #ffffff;
 }
 
 /* Next */
 .button-all,
 .button-next {
   padding-right: 44px;
   background-image: url("../images/arrow-right.svg");
   background-repeat: no-repeat;
   background-size: 16px 16px;
   background-position: center right 20px;
 }
 
 .button:hover,
 .footer-social-link:hover {
   background-color: #814b18;
 }
 
 .button:focus,
 .button:active,
 .footer-social-link:focus .footer-social-link:active {
   outline: 2px solid #dbb590;
   background-color: #4e2e0e;
 }
 
 .button-disabled,
 .button:disabled,
 .slider-button:disabled {
   color: #e7e7e7;
   background-color: #595959;
 }
 
 .button-disabled:focus,
 .button-disabled:hover,
 .button:disabled:hover {
   background-color: #595959;
   outline: none;
   cursor: default;
 }
 
 /* Light */
 .button-feedback,
 .button-feedback:active,
 .button-current,
 .button-current:active {
   color: #000000;
   background-color: #ffffff;
 }
 
 .button-feedback:hover,
 .button-current:hover {
   background-color: #dbb590;
 }
 
 .button-feedback:focus,
 .button-current:focus {
   outline: 2px solid #af7842;
   background-color: #dbb590;
 }
 
 .button-feedback.button-disabled,
 .button-current.button-disabled {
   color: #e7e7e7;
   background-color: #595959;
 }
 
 /* Pages */
 
 .page-header {
   color: #ffffff;
   background-color: #000000;
 }
 
 .navigation {
   display: flex;
   width: 940px;
   margin: 0 auto;
 }
 
 .navigation-list {
   display: flex;
   flex-wrap: wrap;
   width: 400px;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
 .navigation-item {
   position: relative;
 }
 
 .navigation-link {
   position: relative;
   display: block;
   padding: 24px 20px;
   font-family: "PT Sans Narrow", sans-serif;
   line-height: 22px;
   font-weight: 700;
   text-align: center;
   color: #ffffff;
   background-color: #000000;
   text-decoration: none;
   text-transform: uppercase;
 }
 
 .navigation-link:hover {
   background-color: #595959;
 }
 
 .navigation-link:focus,
 .navigation-link:active {
   box-shadow: inset 0 0 0 4px #e7e7e7;
   outline: none;
 }
 
 .navigation-link-current::before {
   position: absolute;
   right: 20px;
   bottom: 0;
   left: 20px;
   height: 4px;
   background-color: #ffffff;
   content: "";
 }
 
 .navigation-icon {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   fill: #dbdbdb;
 }
 
 .navigation-link:hover .navigation-icon {
   fill: #242424;
 }
 
 .navigation-link:focus .navigation-icon,
 .navigation-link:active .navigation-icon {
   fill: #dbdbdb;
 }
 
 .navigation-logo {
   display: flex;
   align-items: center;
   width: 140px;
   margin-right: 100px;
 }
 
 .navigation-user {
   width: auto;
   margin-left: auto;
   max-width: 280px;
 }
 
 .navigation-user .navigation-link {
   min-width: 16px;
   min-height: 22px;
 }
 
 .navigation-link-login {
   padding-left: 44px;
 }
 
 .navigation-link-login .navigation-icon {
   position: absolute;
   right: auto;
   left: 20px;
   margin: auto 0;
 }
 
 .main-container {
   flex-grow: 1;
   padding-top: 64px;
   padding-bottom: 60px;
 }
 
 .main-index {
   color: #ffffff;
   background-color: #000000;
   background-image: url("../images/index-bg.jpg");
   background-size: 100% auto;
   background-repeat: no-repeat;
 }
 
 .main-inner {
   padding-top: 38px;
   color: #242424;
   background-color: #fbf7f4;
   background-image: url("../images/bg-noisy.png");
 }
 
 .page-container {
   width: 940px;
   margin: 0 auto;
 }
 
 .logo {
   display: block;
   margin: 0 auto;
   margin-bottom: 64px;
 }
 
 /* Advantages */
 .advantages {
   margin-bottom: 58px;
 }
 
 /* List */
 .advantages-list {
   display: grid;
   gap: 30px 54.5px;
   grid-template-columns: 277px 277px 277px;
   margin: 0;
   padding: 0;
   text-align: center;
   list-style-type: none;
   color: #ffffff;
 }
 
 /* Title */
 .advantages-title {
   position: relative;
   margin-top: 0;
   margin-bottom: 56px;
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 32px;
   line-height: 35px;
   text-transform: uppercase;
 }
 
 .advantages-title::before {
   position: absolute;
   bottom: -35px;
   left: 50%;
   width: 13px;
   height: 13px;
   margin-left: -6.5px;
   background-color: #ffffff;
   content: "";
   transform: rotate(45deg);
 }
 
 /* Description */
 .advantages-description {
   margin: 0;
 }
 
 /* Index columns */
 .index-columns {
   display: flex;
   justify-content: space-between;
   margin-bottom: 32px;
   padding: 40px;
   color: #242424;
   background-color: #FBF7F4;
   background-image: url("../images/bg-noisy.png");
   position: relative;
 }
 
 .index-columns::after {
   content:'';
   position: absolute;
   top: 40px;
   bottom: 40px;
   width: 0;
   border-right: 1px dashed #595959;
 }
 
 .index-columns:first-of-type::after {
   left: 470px;
 }
 
 .index-columns:last-of-type::after {
   left: 430px;
 }
 
 .index-columns:last-child {
   margin-bottom: 0;
 }
 
 /* Services */
 
 .services {
   width: 390px;
   text-transform: uppercase;
 }
 
 /* Title */
 .services-title {
   margin-top: 0;
   margin-bottom: 28px;
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 32px;
   line-height: 35px;
   font-weight: 700;
 }
 
 /* Price */
 .services-list {
   margin: 0;
   margin-bottom: 30px;
   padding: 0;
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 20px;
   line-height: 28px;
   font-weight: 700;
   list-style-type: none;
 }
 
 /* Item */
 .services-item {
   position: relative;
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: 22px;
 }
 
 .services-item::before {
   flex-grow: 1;
   order: 2;
   margin-right: 16px;
   margin-left: 16px;
   border-bottom: 2px dotted rgba(89, 89, 89, 0.5);
   content: "";
 }
 
 .services-price {
   order: 3;
   color: #af7842;
   word-spacing: 3px;
 }
 
 .gallery {
   width: 390px;
 }
 
 /* Title */
 .gallery-title {
   margin-top: 0;
   margin-bottom: 20px;
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 32px;
   line-height: 35px;
   font-weight: 700;
   text-transform: uppercase;
 }
 
 .slider-wrapper {
   position: relative;
 }
 
 .slider-image {
   display: block;
 }
 
 .slider-controls {
   position: absolute;
   top: 50%;
   display: flex;
   justify-content: space-between;
   width: 100%;
   transform: translateY(-50%);
 }
 
 .slider-button {
   width: 48px;
   height: 60px;
   color: #ffffff;
   background-color: #000000;
   border: none;
   cursor: pointer;
   background-image: url("../images/arrow-left.svg");
   background-position: center;
   background-repeat: no-repeat;
 }
 
 .slider-button:hover {
   background-color: #814b18;
 }
 
 .slider-button:focus,
 .slider-button:active {
   outline: 2px solid #dbb590;
   background-color: #4e2e0e;
 }
 
 .slider-prev {
   transform: rotate(180deg);
 }
 
 .slider-pagination {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
 .slider-pagination-item {
   margin: 0 4px;
 }
 
 .slider-pagination-button {
   width: 8px;
   height: 8px;
   margin: 0;
   padding: 0;
   background-color: #dbdbdb;
   border: none;
   border-radius: 50%;
   cursor: pointer;
 }
 
 .slider-pagination-button:hover {
   background-color: #AF7842;
 }
 
 .slider-pagination-button:focus,
 .slider-pagination-button:active {
   background-color: #4e2e0e;
 }
 
 .slider-pagination-button-current {
   background-color: #242424;
 }
 
 .contacts {
   width: 350px;
   font-weight: 700;
 }
 
 /* Title */
 .contacts-title {
   margin-top: 0;
   margin-bottom: 24px;
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 32px;
   line-height: 35px;
   font-weight: 700;
   text-transform: uppercase;
 }
 
 .contacts-address {
   font-style: normal;
 }
 
 /* Subtitle */
 .contacts-subtitle {
   margin-top: 22px;
   margin-bottom: 8px;
   font-size: 20px;
   line-height: 28px;
   font-family: "PT Sans Narrow", sans-serif;
   text-transform: uppercase;
   color: #af7842;
 }
 
 .contacts-address-text {
   margin: 8px 0;
 }
 
 /* Phone */
 .contacts-phone {
   font-size: 24px;
   line-height: 29px;
   text-decoration-line: underline;
   text-transform: uppercase;
   color: #242424;
   letter-spacing: -2px;
 }
 
 .contacts-schedule {
   margin: 8px 0;
   padding: 0;
   list-style-type: none;
 }
 
 .contacts-navigation {
   margin-top: 21px;
   margin-bottom: 0;
 }
 
 .contacts-navigation .button {
   margin-right: 13px;
   margin-bottom: 5px;
 }
 
 .appointment {
   width: 430px;
 }
 
 /* Title */
 .appointment-title {
   margin-top: 0;
   margin-bottom: 20px;
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 32px;
   line-height: 35px;
   font-weight: 700;
   text-transform: uppercase;
 }
 
 .appointment-form {
   display: grid;
   grid-template-columns: 114px 74px 208px;
   grid-gap: 15px;
 }
 
 .appointment .field-group,
 .newsletter .field-group {
   display: flex;
   flex-direction: column;
   margin: 0;
 }
 
 .appointment-form-name {
   grid-column: 1 / -1;
 }
 
 .appointment-submit {
   grid-column: 1 / -1;
   justify-self: start;
   margin-top: 9px;
 }
 
 /* List */
 .appointment-info {
   color: #595959;
   font-size: 14px;
   line-height: 20px;
   margin-bottom: 22px;
 }
 
 /* Label */
 .form-label {
   margin-bottom: 8px;
   line-height: 24px;
   font-weight: 700;
   text-transform: uppercase;
 }
 
 .form-label-icon {
   position: relative;
   padding-right: 16px;
 }
 
 .info {
   position: absolute;
   width: 16px;
   height: 16px;
   margin-top: 4px;
   margin-left: 2px;
   padding: 0;
   background-color: transparent;
   border: none;
   background-image: url("../images/info.svg");
   background-repeat: no-repeat;
   background-position: center;
 }
 
 /* Field */
 .field {
   margin: 0;
   padding: 8px 14px;
   font: inherit;
   font-weight: 700;
   background-color: #ffffff;
   border: 2px solid #242424;
 }
 
 /* Hover, Focus */
 .field:hover,
 .field:focus,
 .field:active {
   border-color: #af7842;
 }
 
 .field:focus,
 .field:active {
   outline: 2px solid #dbb590;
 }
 
 /* Disabled */
 .field:disabled,
 .field:disabled:hover {
   color: #595959;
   background-color: #dbb590;
   border-color: #595959;
 }
 
 /* Invalid */
 .field:invalid {
   box-shadow: none;
 }
 
 .field:focus:invalid {
   border-color: #ea5454;
 }
 
 /* Placeholder */
 .field::placeholder {
   color: #dbdbdb;
   opacity: 1;
 }
 
 /* Footer */
 
 .page-footer {
   font-size: 14px;
   font-weight: 700;
   color: #ffffff;
   background-color: #242424;
   background-image: url("../images/bg-noisy.png");
   background-repeat: repeat;
 }
 
 .page-footer-container {
   display: flex;
   width: 940px;
   margin: 0 auto;
   padding: 40px 0;
 }
 
 .footer-contacts-logo {
   display: block;
   margin-bottom: 24px;
 }
 
 .footer-about-text {
   margin-top: 0;
   margin-bottom: 4px;
 }
 
 .page-footer a {
   color: #ffffff;
 }
 
 .page-footer .htmlacademy-link {
   font-size: 14px;
   color: #dbb590;
 }
 
 .page-footer-title {
   margin-top: 0;
   margin-bottom: 14px;
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 20px;
   line-height: 28px;
   font-weight: 700;
   color: #ffffff;
   text-transform: uppercase;
 }
 
 .footer-contacts {
   width: 200px;
   margin-right: 130px;
 }
 
 .footer-contacts-address {
   margin-bottom: 16px;
   font-style: normal;
 }
 
 .footer-contacts-address p {
   font-size: 14px;
   line-height: 20px;
   font-weight: 700;
   color: #ffffff;
 }
 
 .footer-contacts-address-phone {
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 20px;
   line-height: 28px;
   font-weight: 700;
   text-decoration: underline;
   text-transform: uppercase;
 }
 
 .footer-contacts-map-link {
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 20px;
   line-height: 26px;
   font-weight: 700;
   color: #ffffff;
   text-decoration: underline;
   text-transform: uppercase;
 }
 
 .newsletter {
   max-width: 300px;
 }
 
 .newsletter-form {
   display: flex;
   width: 280px;
 }
 
 .newsletter-email {
   flex-grow: 1;
   margin: 0;
 }
 
 .newsletter-button {
   width: 56px;
   height: 44px;
   background-image: url("../images/arrow-tail-right.svg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 16px 16px;
 }
 
 .footer-social {
   margin-left: auto;
   max-width: 190px;
 }
 
 .footer-social-list {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   margin-bottom: 28px;
   padding: 0;
   list-style-type: none;
 }
 
 .footer-social-item {
   width: 56px;
   height: 44px;
   margin-right: 8px;
   margin-bottom: 8px;
 }
 
 .footer-social-item:nth-child(3n) {
   margin-right: 0;
 }
 
 /* Social */
 
 .footer-social-link {
   display: block;
   height: 44px;
   background-color: #000000;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 16px 16px;
 }
 
 .footer-social-tw {
   background-image: url("../images/twitter.svg");
 }
 
 .footer-social-vk {
   background-image: url("../images/vk.svg");
 }
 
 .footer-social-instagram {
   background-image: url("../images/instagram.svg");
 }
 
 .footer-social p {
   margin: 0;
 }
 
 .modal-container {
   position: fixed;
   top: 0;
   left: 0;
   display: flex;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
 }
 
 /*Отображение модального окна */
 .modal-container-close {
    display: none; 
 }
 
 .modal {
   position: relative;
   margin: auto;
   padding: 40px;
   background-color: #ffffff;
 }
 
 .modal-auth {
   width: 360px;
 }
 
 .modal-close-button {
   position: absolute;
   top: 0;
   right: 0;
   width: 56px;
   height: 44px;
   background-color: #ffffff;
   border: none;
   background-image: url("../images/cross.svg"); /* TODO проверить на винде и если там есть пофиксить */
   background-repeat: no-repeat;
   background-position: center;
 }
 
 .modal-title {
   margin: 0;
   margin-bottom: 24px;
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 32px;
   line-height: 35px;
   font-weight: 700;
   color: #000000;
   text-transform: uppercase;
 }
 
 .auth-form .field-group {
   margin: 0;
   margin-bottom: 16px;
 }
 
 .auth-form-user-options {
   display: flex;
   justify-content: space-between;
   font-weight: 400;
 }
 
 .auth-form-user-options .control-label {
   font-weight: 400;
 }
 
 .auth-form .field {
   width: 328px;
 }
 
 .auth-form-recovery {
   line-height: 22px;
   color: #000000;
 }
 
 .auth-form-button {
   width: 360px;
   margin-bottom: 16px;
 }
 
 .auth-form-register {
   width: 360px;
   color: #000000;
   background-color: #ffffff;
 }
 
 .inner-header {
   margin-bottom: 32px;
 }
 
 .inner-header-title {
   margin-top: 0;
   margin-bottom: 16px;
   font-size: 32px;
   line-height: 35px;
   text-transform: uppercase;
   font-family: "PT Sans Narrow", sans-serif;
 }
 
 /* Breadcrumbs */
 .breadcrumbs {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   color: #242424;
   list-style-type: none;
 }
 
 /* Item */
 .breadcrumbs-item {
   position: relative;
   margin-right: 32px;
   list-style-type: none;
 }
 
 .breadcrumbs-item::after {
   position: absolute;
   top: 7px;
   right: -20px;
   width: 8px;
   height: 8px;
   background-color: #242424;
   content: "";
   transform: rotate(45deg);
 }
 
 .breadcrumbs-item:last-child::after {
   content: none;
 }
 
 /* Link */
 .breadcrumbs-link {
   line-height: 22px;
   color: inherit;
 }
 
 .catalog-products {
   display: flex;
 }
 
 /* Filter */
 .catalog-filter {
   width: 220px;
   margin-right: 20px;
 }
 
 /* Group */
 .catalog-filter-group {
   margin: 0;
   margin-bottom: 40px;
   padding: 0;
   border: none;
 }
 
 .catalog-right-column {
   width: 700px;
 }
 
 /* Title */
 .catalog-filter-title {
   margin-bottom: 22px;
   font-family: "PT Sans Narrow", sans-serif;
   font-size: 20px;
   line-height: 28px;
   font-weight: 700;
   color: #000000;
   text-transform: uppercase;
   padding: 0;
 }
 
 /* Range */
 .range {
   max-width: 220px;
   overflow: auto;
   padding-top: 8px;
 }
 
 .range-scale {
   position: relative;
   height: 4px;
   margin-bottom: 16px;
   background-color: #242424;
   border-radius: 2px;
 }
 
 .range-bar {
   position: absolute;
   height: 4px;
   background-color: #af7842;
 }
 
 .range-toggle {
   position: absolute;
   width: 20px;
   height: 20px;
   background: #ffffff;
   border: 2px solid #242424;
   border-radius: 50%;
   cursor: pointer;
 }
 
 .range-toggle:hover {
   background-color: #dbb590;
 }
 
 .range-toggle:active,
 .range-toggle:focus {
   outline: 3px solid #dbb590;
 }
 
 .toggle-min {
   top: -8px;
   left: -10px;
 }
 
 .toggle-max {
   top: -8px;
   right: -10px;
 }
 
 .range-wrapper-inputs {
   display: flex;
   justify-content: center;
 }
 
 .catalog-filter-label {
   display: flex;
   margin-right: 5px;
   line-height: 22px;
 }
 
 .range-input {
   width: 30px;
   padding: 0 2px;
   font: inherit;
   text-align: center;
   background-color: transparent;
   border: none;
   appearance: textfield;
 }
 
 .range-input::-webkit-outer-spin-button,
 .range-input::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
 
 /* Control */
 .control {
   position: relative;
   display: block;
   padding-left: 36px;
   line-height: 22px;
 }
 
 /* Mark */
 .control-mark {
   position: absolute;
   top: 2px;
   left: 0;
   width: 16px;
   height: 16px;
   border: 2px solid #242424;
 }
 
 .control-input:focus ~ .control-mark,
 .control-input:focus ~ .control-mark,
 .control-input:active ~ .control-mark,
 .control-input:active ~ .control-mark {
   border-color: #AF7842;
 }
  
 .control:hover .control-mark{
   border-color: #814b18;
 }
  
 .control-input:disabled + .control-mark {
   border-color: #242424;
 }
 
 /* Checkbox */
 .control-input[type="checkbox"]:checked + .control-mark::before,
 .control-input[type="checkbox"]:checked + .control-mark::after {
   position: absolute;
   top: 7px;
   left: 2px;
   width: 12px;
   height: 2px;
   background-color: #242424;
   content: "";
 }
 
 .control-input[type="checkbox"]:checked + .control-mark::before {
   transform: rotate(45deg);
 }
 
 .control-input[type="checkbox"]:checked + .control-mark::after {
   transform: rotate(-45deg);
 }
 
 /* Radio */
 .control-input[type="radio"] + .control-mark {
   border-radius: 50%;
 }
 
 .control-input[type="radio"]:checked + .control-mark::before {
   position: absolute;
   top: 4px;
   left: 4px;
   width: 8px;
   height: 8px;
   background-color: #242424;
   border-radius: 50%;
   content: "";
 }
 
 /* Label */
 .control-label {
   line-height: 22px;
   font-weight: 700;
 }
 
 /* List */
 .catalog-filter-list {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
 .catalog-filter-item:not(:last-child) {
   margin-bottom: 16px;
 }
 
 .sorting-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   margin-bottom: 16px;
   padding: 16px;
   color: #000000;
   background-color: #ffffff;
 }
 
 .sorting-type {
   margin-right: auto;
 }
 
 .select {
   position: relative;
   display: flex;
   align-items: center;
   width: 260px;
   margin-right: auto;
 }
 
 /* Control */
 .select-control {
   width: 100%;
   padding: 8px 14px;
   padding-right: 48px;
   font: inherit;
   font-weight: 700;
   background-color: #ffffff;
   border: 2px solid #242424;
   background-image: url("../images/arrow-down.svg");
   background-repeat: no-repeat;
   background-position: right 16px center;
   appearance: none;
 }
 
 .select-control:hover,
 .select-control:focus,
 .select-control:active {
   border-color: #af7842;
 }
 
 .select-control:focus,
 .select-control:active {
   outline: 2px solid #dbb590;
 }
 
 .card-grid-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 56px;
   height: 44px;
   background-color: #ffffff;
 }
 
 .card-grid-toggle:hover {
   background-color: #814b18;
 }
 
 .card-grid-toggle:focus,
 .card-grid-toggle:active {
   outline: 2px solid #dbb590;
 }
 
 .card-grid-toggle:hover svg {
   fill: #ffffff;
 }
 
 .card-grid-toggle svg {
   fill: #000000;
 }
 
 .card-grid-toggle-current {
   background-color: #000000;
 }
 
 .card-grid-toggle-current:hover {
   background-color: #000000;
 }
 
 .card-grid-toggle-current svg {
   fill: #ffffff;
 }
 
 .card-grid-toggle-current:hover svg {
   fill: #ffffff;
 }
 
 /* LIST */
 
 .product-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin: 0;
   margin-bottom: 24px;
   padding: 0;
   gap: 20px;
   list-style-type: none;
 }
 
 /* Card */
 
 .product-card {
   display: grid;
   grid-template-rows: 200px min-content auto min-content 16px;
   grid-template-columns: 16px 188px 16px;
   background-color: #ffffff;
 }
 
 /* Image */
 
 .product-card-image-link {
   grid-column: 1 / -1;
   background-color: #f6f6f6;
 }
 
 .product-card-image {
   object-fit: contain;
   max-width: 100%;
 }
 
 /* Title */
 
 .product-card-title-link {
   text-decoration: none;
   margin-top: 16px;
   margin-bottom: 8px;
 }
 
 .product-card-title-link,
 .product-card-price,
 .product-card-button {
   grid-column: 2 / 3;
 }
 
 /* Title */
 
 .product-card-title {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
   color: #000000;
 }
 
 /* Price */
 
 .product-card-price {
   margin-bottom: 16px;
   font-size: 24px;
   line-height: 29px;
   font-weight: 700;
   color: #814b18;
   text-transform: uppercase;
   letter-spacing: -2px;
 }
 
 /* Pagination container */
 
 .pagination-container {
   display: flex;
   padding: 16px;
   background-color: #ffffff;
 }
 
 /* Pagination */
 
 .pagination {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
 /* Item */
 .pagination-item {
   margin-bottom: 5px;
 }
 
 .pagination-item:not(:last-child) {
   margin-right: 8px;
 }
 
 /* Link */
 
 .pagination-link {
   display: block;
   box-sizing: border-box;
   min-width: 50px;
   min-height: 44px;
   padding: 14px 20px;
   line-height: 16px;
   font-weight: 700;
   color: #ffffff;
   background-color: #000000;
   text-decoration: none;
 }
 
 .pagination-link:hover {
   background-color: #814b18;
 }
 
 .pagination-link:focus,
 .pagination-link:active {
   outline: 2px solid #dbb590;
   background-color: #4e2e0e;
 }
 
 .pagination-current {
   color: #242424;
   background-color: #ffffff;
 }
 
 .pagination-prev {
   background-image: url("../images/arrow-left.svg");
   background-position: 20px center;
   background-size: 16px 16px;
   background-repeat: no-repeat;
   padding-left: 40px;
   padding-right: 18px;
 }
 
 .pagination-next {
   background-image: url("../images/arrow-right.svg");
   background-position: 20px center;
   background-size: 16px 16px;
   background-repeat: no-repeat;
   padding-left: 40px;
   padding-right: 18px;
 }
 
 .pagination-disabled {
   background-color: #595959;
 }
 
 /* Show more */
 .pagination-show-more {
   flex-grow: 1;
   margin-left: 100px;
   max-width: 170px;
   max-height: 44px;
}
 
 /* Without background */
 .pagination-clear {
   margin-top: 24px;
   padding: 0;
   background-color: transparent;
 }
 /* Отображение поповера */
 .popover {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
   display: none; 
   box-sizing: border-box;
   width: 300px;
   padding: 40px;
   font-family: "PT Sans Narrow", sans-serif;
   color: #242424;
   background-color: #ffffff;
   min-height: 186px;
   box-shadow: 0 18px 40px rgba(79, 70, 60, 0.16);
 }
 
 .popover-open {
   display: block;
 }
 
 .popover-empty {
   width: 312px;
 }
 
 .popover-cart {
   width: 420px;
 }
 
 .popover-auth {
   width: 440px;
 }
 
 .popover-user {
   width: 300px;
 }
 
 .popover-close-button {
   position: absolute;
   top: 0;
   right: 0;
 
   width: 72px;
   height: 70px;
 }
 
 .popover-cart .popover-close-button {
   padding-left: 44px;
   background-image: url("../images/cart.svg");
   background-repeat: no-repeat;
   background-position: 21px center;
 }
 
 .popover-content {
   height: 100%;
 }
 
 .popover-empty .popover-content {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding-top: 24px;
   padding-bottom: 24px;
   text-align: center;
 }
 
 .popover-main-text {
   margin: 0;
   font-size: 24px;
   line-height: 29px;
   font-weight: 700;
   color: #000000;
   text-transform: uppercase;
 }
 
 .popover-title {
   margin-top: 0;
   margin-bottom: 24px;
   font-size: 32px;
   line-height: 35px;
   color: #000000;
   text-transform: uppercase;
 }
 
 .cart-items-list {
   display: flex;
   flex-direction: column;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
 .cart-item {
   display: grid;
   grid-template-columns: 284px 56px;
 }
 
 .cart-item + .cart-item {
   margin-top: 24px;
   padding-top: 24px;
   border-top: 1px dashed #595959;
 }
 
 .cart-item-title {
   margin-top: 0;
   margin-bottom: 2px;
   font-size: 20px;
   line-height: 28px;
   font-weight: 700;
   color: #242424;
   text-transform: uppercase;
 }
 
 .cart-item-price {
   margin: 0;
   font-family: "PT Sans", sans-serif;
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
   color: #af7842;
 }
 
 .cart-item .button {
   max-height: 44px;
   grid-row-start: 1;
   grid-row-end: 3;
   grid-column-start: 2;
   grid-column-end: 4;
 }