/* stylelint-disable */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
  ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15;
  /* 1 */

  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
  ========================================================================== */

/**
* Remove the margin in all browsers.
*/

body {
  margin: 0;
}

/**
* Render the `main` element consistently in IE.
*/

main {
  display: block;
}

/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/

h1 {
  margin: 0.67em 0;

  font-size: 2em;
}

/* Grouping content
  ========================================================================== */

/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/

hr {
  /* 1 */
  overflow: visible;

  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 2 */
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

pre {
  /* 2 */
  font-family: monospace, monospace;
  font-size: 1em;
  /* 1 */
}

/* Text-level semantics
  ========================================================================== */

/**
* Remove the gray background on active links in IE 10.
*/

a {
  background-color: transparent;
}

/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/

abbr[title] {
  /* 2 */
  border-bottom: none;

          text-decoration: underline;
          text-decoration: underline dotted;
  /* 2 */

  -webkit-text-decoration: underline dotted;
  /* 1 */
}

/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp {
  /* 2 */
  font-family: monospace, monospace;
  font-size: 1em;
  /* 1 */
}

/**
* Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/

sub,
sup {
  position: relative;

  font-size: 75%;
  line-height: 0;

  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
  ========================================================================== */

/**
* Remove the border on images inside links in IE 10.
*/

img {
  border-style: none;
}

/* Forms
  ========================================================================== */

/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  /* 1 */

  font-family: inherit;
  /* 2 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
}

/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/

button,
input {
  /* 1 */
  overflow: visible;
}

/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/

button,
select {
  /* 1 */
  text-transform: none;
}

/**
* Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
* Remove the inner border and padding in Firefox.
*/

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;

  border-style: none;
}

/**
* Restore the focus styles unset by the previous rule.
*/

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
* Correct the padding in Firefox.
*/

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
*    `fieldset` elements in all browsers.
*/

legend {
  display: table;
  /* 1 */

  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */

  color: inherit;
  /* 2 */

  white-space: normal;
  /* 1 */
}

/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

progress {
  vertical-align: baseline;
}

/**
* Remove the default vertical scrollbar in IE 10+.
*/

textarea {
  overflow: auto;
}

/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/

[type="search"] {
  outline-offset: -2px;
  /* 2 */

  -webkit-appearance: textfield;
  /* 1 */
}

/**
* Remove the inner padding in Chrome and Safari on macOS.
*/

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  font: inherit;
  /* 2 */

  -webkit-appearance: button;
  /* 1 */
}

/* Interactive
  ========================================================================== */

/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/

details {
  display: block;
}

/*
* Add the correct display in all browsers.
*/

summary {
  display: list-item;
}

/* Misc
  ========================================================================== */

/**
* Add the correct display in IE 10+.
*/

template {
  display: none;
}

/**
* Add the correct display in IE 10.
*/

[hidden] {
  display: none;
}

@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;

  font-display: swap;
  src: url("../fonts/open-sans.woff2") format("woff2"), url("../fonts/open-sans.woff") format("woff");
}

@font-face {
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;

  font-display: swap;
  src: url("../fonts/open-sans-700.woff2") format("woff2"), url("../fonts/open-sans-700.woff") format("woff");
}

@font-face {
  font-family: "Droid Sans";
  font-weight: 400;
  font-style: normal;

  font-display: swap;
  src: url("../fonts/droid-sans.woff2") format("woff2"), url("../fonts/droid-sans.woff") format("woff");
}

@font-face {
  font-family: "Droid Sans";
  font-weight: 700;
  font-style: normal;

  font-display: swap;
  src: url("../fonts/droid-sans-700.woff2") format("woff2"), url("../fonts/droid-sans-700.woff") format("woff");
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;

  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  color: #000000;
  background-color: #fefafa;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: #000000;

  text-decoration: none;
}

img,
video {
  display: block;

  max-width: 100%;
  height: auto;
}

textarea {
  resize: none;
}

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #ffffff;
          box-shadow: inset 0 0 0 1000px #ffffff;

  -webkit-text-fill-color: #000000;
}

input,
textarea {
  border-radius: 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
}

input:invalid,
textarea:invalid {
  -webkit-box-shadow: none;
          box-shadow: none;
}

select {
  border-radius: 0;
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
          appearance: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;

  -webkit-appearance: none;
          appearance: none;
}

input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

select,
textarea,
input:matches([type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.wrapper {
  position: relative;

  display: flex;
  overflow: hidden;
  flex-direction: column;

  min-height: 100vh;
}

.wrapper--no-scrollbar {
  height: 100vh;

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.wrapper--no-scrollbar::-webkit-scrollbar {
  display: none;
}

.wrapper .header,
.wrapper .footer {
  flex-shrink: 0;
}

.wrapper main {
  flex-grow: 1;
}

.hidden {
  display: none;
}

.visually-hidden {
  position: absolute;

  clip: rect(0 0 0 0);

  width: 1px;
  height: 1px;
  margin: -1px;
}

.no-transition {
  /* stylelint-disable-next-line */
  -webkit-transition: none !important;
          transition: none !important;
}

.scroll-lock-ios {
  position: fixed;

  overflow: hidden;
}

.scroll-lock {
  overflow: hidden;
}

@-webkit-keyframes disableBreakpointAnimation {
  0% {
    visibility: hidden;

    opacity: 0;
  }

  100% {
    visibility: hidden;

    opacity: 0;
  }
}

@keyframes disableBreakpointAnimation {
  0% {
    visibility: hidden;

    opacity: 0;
  }

  100% {
    visibility: hidden;

    opacity: 0;
  }
}

.container {
  width: 100%;
  min-width: 1020px;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 40px;
}

.header {
  display: flex;

  min-height: 110px;
  padding-top: 22px;
  padding-bottom: 12px;

  color: #ffffff;
  background-color: #131212;
}

.header__wrapper {
  display: flex;
  align-content: center;
  align-items: center;

  width: 100%;
  padding-right: 66px;

  background: inherit;
}

.header__logo {
  margin-right: 110px;
}

.header__cart-link {
  position: relative;
  position: relative;

  display: block;

  width: 14px;
  height: 14px;
  margin-left: auto;

  color: #ffffff;

  -webkit-transition: color 0.3s ease;
          transition: color 0.3s ease;
}

.header__cart-link::before {
  top: 50%;
  left: 50%;
  position: absolute;

  width: 40px;
  height: 40px;

  content: "";
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.header__cart-link:hover,
.header__cart-link:focus {
  color: #c90606;
}

.header__cart-icon {
  top: 50%;
  left: 50%;
  position: absolute;

  width: 14px;
  height: 14px;

  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.header__cart-count {
  top: -5px;
  right: -14px;
  position: absolute;

  width: 12px;
  height: 12px;

  font-family: "Droid Sans", "Arial", sans-serif;
  font-size: 10px;
  line-height: 12px;

  color: #ffffff;
  border-radius: 50%;
  background-color: #c90606;

  text-align: center;
}

.main-nav {
  display: block;

  margin-right: 27px;

  font-size: 14px;
  line-height: 20px;

  text-align: left;
  letter-spacing: 1px;
}

.main-nav__toggle {
  display: none;
}

.main-nav__list {
  display: flex;
  flex-wrap: wrap;

  width: 390px;
  margin: -10px 0 0 -37px;
  padding: 0;

  list-style: none;
}

.main-nav__link {
  display: block;

  margin-top: 10px;
  margin-left: 37px;
}

.footer {
  min-height: 275px;
  padding-top: 66px;
  padding-bottom: 15px;

  background-color: #131212;
}

.footer__container {
  display: grid;

  grid-column-gap: 25px;
  grid-template-areas: "logo info links contacts" "socials info links contacts";
  grid-template-columns: 220px 145px 283px 150px;
  grid-template-rows: 125px auto;
}

.footer__logo {
  margin-right: auto;
  margin-bottom: 55px;

  grid-area: logo;
}

.footer__socials {
  grid-area: socials;
}

.footer__nav-section--info {
  grid-area: info;
}

.footer__nav-section--links {
  grid-area: links;
}

.footer__nav-section--contacts {
  grid-area: contacts;
}

.footer__nav-title {
  margin: 0;

  font-family: "Droid Sans", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 44px;

  color: #ffffff;

  letter-spacing: 0.13em;
}

.footer__nav-content {
  margin: 6px 0 0;

  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 10px;
  line-height: 12px;

  color: #ffffff;

  letter-spacing: 0.1em;
}

.footer__nav-content--font-secondary {
  font-family: "Droid Sans", "Arial", sans-serif;

  letter-spacing: 0.03em;
}

.footer__nav-content--address {
  margin-top: 0;
  margin-bottom: 0;

  line-height: 13px;
}

.footer__span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.footer__icon {
  align-self: center;

  width: 9px;
  height: 9px;
  margin-right: 3px;
}

.footer__nav-list {
  margin: 0;
  padding: 0;

  list-style: none;

  font-size: 10px;
  line-height: 20px;

  color: #ffffff;

  letter-spacing: 0.1em;
}

.modal {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 1000;

  display: flex;
  visibility: hidden;
  overflow-y: auto;
  flex-direction: column;

  opacity: 0;
  background-color: rgba(0, 0, 0, 0.8);

  -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
          transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
          transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
          transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  pointer-events: none;

  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal::-webkit-scrollbar {
  display: none;
}

.modal.is-active {
  visibility: visible;

  opacity: 1;
  background: rgba(84, 77, 77, 0.65);

  -webkit-transform: scale(1);
          transform: scale(1);
  pointer-events: auto;
}

.modal--success .modal__content {
  display: flex;
  flex-wrap: wrap;

  padding-top: 117px;
  padding-bottom: 31px;

  background: url("../img/sprite/bg_modal.png") no-repeat top 0 left 0;
  background-color: #fefafa;
  background-size: 255px 95px;
}

.modal--review .modal__content {
  width: 410px;
  padding-top: 26px;
  padding-bottom: 29px;
}

.modal__wrapper {
  position: relative;

  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;

  width: 100%;
  min-height: 100%;
  padding: 60px 40px;
}

.modal__close-btn {
  top: 23px;
  right: 23px;
  position: absolute;
}

.modal__close-btn-interactive-area {
  position: relative;
}

.modal__close-btn-interactive-area::before {
  top: 50%;
  left: 50%;
  position: absolute;

  width: 60px;
  height: 65px;

  content: "";
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.modal__overlay {
  top: 0;
  left: 0;
  position: absolute;

  width: 100%;
  height: 100%;

  cursor: pointer;
}

.modal__content {
  position: relative;

  overflow: hidden;

  width: 430px;
  padding: 40px;

  border-radius: 4px;
  background-color: #fefafa;
}

.modal__info {
  display: flex;
}

.modal__info-wrapper {
  padding-top: 18px;
  padding-left: 37px;
}

.modal__header {
  margin-top: 0;
  margin-bottom: 17px;
}

.modal__header--review {
  margin-bottom: 23px;
}

.modal__product-name {
  margin-top: 0;
  margin-bottom: 10px;
}

.modal__img {
  display: block;

  width: 55px;
  height: 137px;

  -o-object-fit: contain;
     object-fit: contain;
}

.modal__icon {
  width: 26px;
  height: 20px;
  margin-right: 7px;
  margin-left: 22px;
}

.modal__product-params {
  margin-top: 0;
  margin-bottom: 5px;

  font-size: 14px;
  line-height: 15px;

  letter-spacing: 0.05em;
}

.modal__product-params--margin-11 {
  margin-top: 11px;
}

.modal__price-wrapper {
  margin-top: 13px;
  margin-bottom: 0;
}

.modal__price {
  font-size: 20px;
  font-weight: bold;
  line-height: 15px;

  letter-spacing: 0.05em;
}

.modal__price:last-child {
  margin-left: 17px;
}

.modal__message {
  position: relative;

  width: 255px;
  margin-top: 0;
  margin-bottom: 0;

  font-size: 18px;
  font-weight: bold;
  line-height: 20px;

  text-align: center;
  letter-spacing: 0.02em;
}

.modal__button-container {
  display: flex;
  flex-grow: 1;
  justify-content: start;

  padding-top: 20px;
}

.modal__button-container .modal__button {
  min-width: 170px;
  margin: 0;
  padding-right: 5px;
  padding-left: 5px;
}

.modal__button-container .modal__button--add {
  min-width: 225px;
  margin: 0 auto;
}

.modal__button-container .modal__button--review {
  min-width: 140px;
  margin: 0 auto;
}

.modal__button-container .modal__button--right {
  margin-left: auto;
}

.title {
  padding: 0;

  font-family: "Open Sans", "Arial", sans-serif;
  font-weight: 700;
  line-height: 1.2;

  color: inherit;
}

.title--bigger {
  font-size: 22px;
  line-height: 30px;
}

.title--big {
  font-size: 20px;
  line-height: 24px;

  letter-spacing: 0.05em;
}

.title--medium {
  font-size: 18px;

  letter-spacing: 0.02em;
}

.title--medium-20 {
  font-size: 18px;
  line-height: 20px;

  letter-spacing: 0.05em;
}

.title--little {
  font-size: 16px;

  letter-spacing: 0.05em;
}

.title--lesser {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.title--uppercase {
  text-transform: uppercase;
}

.title--red {
  color: #c90606;
}

.catalog {
  display: grid;
  align-content: start;
  align-items: start;
  justify-content: start;

  width: 100%;

  gap: 0 25px;
  grid-template-areas: "filters sorter" "filters catalog" "filters pagination";
  grid-template-columns: 215px 1fr;
  grid-template-rows: -webkit-min-content 1fr -webkit-min-content;
  grid-template-rows:         min-content 1fr min-content;
  justify-items: start;
}

.catalog__cards {
  margin: 30px 0 0;
}

.cards {
  display: grid;
  align-content: flex-start;
  justify-content: flex-start;

  gap: 20px;
  grid-area: catalog;
  grid-template-columns: repeat(3, 1fr);
}

.link {
  font: inherit;

  color: inherit;

  cursor: pointer;
  -webkit-transition: color 0.3s ease;
          transition: color 0.3s ease;
}

.link:hover {
  color: #c90606;
}

.link--current {
  pointer-events: none;
}

.link:active {
  color: #545454;
}

.breadcrumbs {
  display: flex;

  margin: 0;
  padding: 0;

  list-style: none;

  font-size: 14px;
  line-height: 19px;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;

  margin-right: 12px;
}

.breadcrumbs__item a:focus {
  outline: 1px solid #c90606;
  outline-offset: 1px;
}

.breadcrumbs__item:not(:last-child)::after {
  display: block;

  width: 15px;
  height: 9px;
  margin-left: 12px;

  background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.6825.807518c.058-.058204.127-.104383.2029-.135891.076-.031508.1574-.047726.2396-.047726s.1636.016218.2395.047726c.076.031508.1449.077687.203.135891l3.75 3.750002a.625017.625017 0 0 1 .1359.20296.625106.625106 0 0 1 .0477.23954c0 .08221-.0162.16361-.0477.23954a.625017.625017 0 0 1-.1359.20296l-3.75 3.75c-.1174.11736-.2765.18329-.4425.18329-.166 0-.3252-.06593-.4425-.18329-.1174-.11736-.1833-.27653-.1833-.4425s.0659-.32514.1833-.4425l3.3087-3.3075-3.3087-3.3075a.625017.625017 0 0 1-.1359-.20296.625106.625106 0 0 1-.0477-.23954c0-.08221.0162-.16361.0477-.23954a.62494.62494 0 0 1 .1359-.202962z' fill='%23131212'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.5 5c0-.16576.065848-.32473.183058-.44194C.800269 4.44085.95924 4.375 1.125 4.375H14.25c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194 0 .16576-.0658.32473-.1831.44194a.624819.624819 0 0 1-.4419.18306H1.125c-.16576 0-.324731-.06585-.441942-.18306C.565848 5.32473.5 5.16576.5 5z' fill='%23131212'/%3E%3C/svg%3E");
  background-position: center;

  content: "";
}

.breadcrumbs__item:last-child {
  color: #585757;
}

.breadcrumbs__item:last-child a {
  pointer-events: none;
}

.button {
  display: block;

  padding: var(--button-vertical-padding) var(--button-horizontal-padding);

  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;

  color: #fefafa;
  border: 2px solid #131212;
  border-radius: 2px;
  background-color: #131212;

  cursor: pointer;
  -webkit-transition: background-image 0.3s ease, background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
          transition: background-image 0.3s ease, background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
  text-align: center;
  letter-spacing: 0.05em;

  --button-horizontal-padding: 18px;
  --button-vertical-padding: 12px;
}

.button:hover {
  color: #131212;
  background-color: #fefafa;
}

.button--mini {
  font-size: 12px;

  letter-spacing: 0.02em;

  --button-horizontal-padding: 8px;
  --button-vertical-padding: 1px;
}

.button--small {
  font-size: 12px;

  --button-horizontal-padding: 12px;
}

.button--medium {
  font-size: 14px;

  --button-horizontal-padding: 28px;
}

.button--medium-20 {
  font-size: 14px;

  --button-horizontal-padding: 20px;
}

.button--big {
  font-size: 16px;

  --button-horizontal-padding: 20px;
}

.button--red {
  border-color: #c90606;
  background-color: #c90606;
}

.button--red:hover {
  color: #c90606;
  background-color: #fefafa;
}

.button--red-border {
  color: #c90606;
  border-color: #c90606;
  background-color: #fefafa;
}

.button--red-border:hover {
  color: #fefafa;
  background-color: #c90606;
}

.button--black-border {
  color: #201f1f;
  border: 1px solid #131212;
  background-color: #fefafa;
}

.button--black-border:hover {
  color: #fefafa;
  background-color: #131212;
}

.button--transparent {
  background-color: transparent;
}

.button--font-normal {
  font-weight: 400;
}

.button--add-to-cart {
  padding-right: calc(var(--button-horizontal-padding) + 7px);
  padding-left: calc(var(--button-horizontal-padding) + 26px);

  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 3.67853H9.469L9.719 2.67853H3.5V1.67853H10.36C10.436 1.67853 10.511 1.69586 10.5793 1.7292C10.6476 1.76253 10.7074 1.811 10.7542 1.87092C10.8009 1.93084 10.8334 2.00063 10.8491 2.07498C10.8649 2.14934 10.8635 2.2263 10.845 2.30003L9.595 7.30003C9.56791 7.40815 9.50548 7.50412 9.4176 7.5727C9.32973 7.64128 9.22146 7.67852 9.11 7.67853H2C1.86739 7.67853 1.74021 7.62585 1.64645 7.53208C1.55268 7.43831 1.5 7.31114 1.5 7.17853V1.17853H0.5V0.178528H2C2.13261 0.178528 2.25978 0.231206 2.35355 0.324974C2.44732 0.418743 2.5 0.54592 2.5 0.678528V3.67853ZM2.5 10.6785C2.23478 10.6785 1.98043 10.5732 1.79289 10.3856C1.60536 10.1981 1.5 9.94374 1.5 9.67853C1.5 9.41331 1.60536 9.15896 1.79289 8.97142C1.98043 8.78388 2.23478 8.67853 2.5 8.67853C2.76522 8.67853 3.01957 8.78388 3.20711 8.97142C3.39464 9.15896 3.5 9.41331 3.5 9.67853C3.5 9.94374 3.39464 10.1981 3.20711 10.3856C3.01957 10.5732 2.76522 10.6785 2.5 10.6785ZM8.5 10.6785C8.23478 10.6785 7.98043 10.5732 7.79289 10.3856C7.60536 10.1981 7.5 9.94374 7.5 9.67853C7.5 9.41331 7.60536 9.15896 7.79289 8.97142C7.98043 8.78388 8.23478 8.67853 8.5 8.67853C8.76522 8.67853 9.01957 8.78388 9.20711 8.97142C9.39464 9.15896 9.5 9.41331 9.5 9.67853C9.5 9.94374 9.39464 10.1981 9.20711 10.3856C9.01957 10.5732 8.76522 10.6785 8.5 10.6785Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: left 15px center;
}

.button--add-to-cart:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4H9.469L9.719 3H3.5V2H10.36C10.436 2 10.511 2.01733 10.5793 2.05067C10.6476 2.08401 10.7074 2.13248 10.7542 2.19239C10.8009 2.25231 10.8334 2.3221 10.8491 2.39645C10.8649 2.47081 10.8635 2.54778 10.845 2.6215L9.595 7.6215C9.56791 7.72962 9.50548 7.8256 9.4176 7.89417C9.32973 7.96275 9.22146 8 9.11 8H2C1.86739 8 1.74021 7.94732 1.64645 7.85355C1.55268 7.75978 1.5 7.63261 1.5 7.5V1.5H0.5V0.5H2C2.13261 0.5 2.25978 0.552678 2.35355 0.646447C2.44732 0.740215 2.5 0.867392 2.5 1V4ZM2.5 11C2.23478 11 1.98043 10.8946 1.79289 10.7071C1.60536 10.5196 1.5 10.2652 1.5 10C1.5 9.73478 1.60536 9.48043 1.79289 9.29289C1.98043 9.10536 2.23478 9 2.5 9C2.76522 9 3.01957 9.10536 3.20711 9.29289C3.39464 9.48043 3.5 9.73478 3.5 10C3.5 10.2652 3.39464 10.5196 3.20711 10.7071C3.01957 10.8946 2.76522 11 2.5 11ZM8.5 11C8.23478 11 7.98043 10.8946 7.79289 10.7071C7.60536 10.5196 7.5 10.2652 7.5 10C7.5 9.73478 7.60536 9.48043 7.79289 9.29289C7.98043 9.10536 8.23478 9 8.5 9C8.76522 9 9.01957 9.10536 9.20711 9.29289C9.39464 9.48043 9.5 9.73478 9.5 10C9.5 10.2652 9.39464 10.5196 9.20711 10.7071C9.01957 10.8946 8.76522 11 8.5 11Z' fill='%23c90606'/%3E%3C/svg%3E%0A");
}

.button--in-cart {
  padding-left: calc(var(--button-horizontal-padding) + 13px);

  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.404 3.51942C10.368 3.46952 10.3232 3.42947 10.2727 3.40201C10.2223 3.37454 10.1675 3.36032 10.112 3.36033H7.80614V1.54216C7.80614 1.1805 7.68467 0.833655 7.46846 0.577925C7.25225 0.322195 6.959 0.178528 6.65323 0.178528H4.3474C4.04163 0.178528 3.74838 0.322195 3.53217 0.577925C3.31595 0.833655 3.19448 1.1805 3.19448 1.54216V3.36033H0.888656C0.83295 3.35958 0.777772 3.37317 0.726946 3.40015C0.676121 3.42713 0.630862 3.46686 0.594306 3.51658C0.557751 3.5663 0.530772 3.62483 0.515239 3.68811C0.499707 3.75139 0.495992 3.81791 0.504352 3.88305L1.22684 9.40575C1.25464 9.62252 1.34773 9.82011 1.48898 9.96211C1.63022 10.1041 1.81009 10.1809 1.99545 10.1785H9.01286C9.19822 10.1809 9.37809 10.1041 9.51933 9.96211C9.66058 9.82011 9.75367 9.62252 9.78147 9.40575L10.4963 3.88305C10.504 3.81816 10.4997 3.75206 10.4838 3.6893C10.4679 3.62654 10.4407 3.56858 10.404 3.51942V3.51942ZM3.96309 1.54216C3.96309 1.4216 4.00358 1.30599 4.07565 1.22075C4.14773 1.1355 4.24547 1.08761 4.3474 1.08761H6.65323C6.75515 1.08761 6.8529 1.1355 6.92497 1.22075C6.99704 1.30599 7.03753 1.4216 7.03753 1.54216V3.36033H3.96309V1.54216ZM9.01286 9.26938H1.98777L1.33829 4.26941H9.66233L9.01286 9.26938Z' fill='%23C90606'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: left 5px center;
}

.button--in-cart:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.404 3.51942C10.368 3.46952 10.3232 3.42947 10.2727 3.40201C10.2223 3.37454 10.1675 3.36032 10.112 3.36033H7.80614V1.54216C7.80614 1.1805 7.68467 0.833655 7.46846 0.577925C7.25225 0.322195 6.959 0.178528 6.65323 0.178528H4.3474C4.04163 0.178528 3.74838 0.322195 3.53217 0.577925C3.31595 0.833655 3.19448 1.1805 3.19448 1.54216V3.36033H0.888656C0.83295 3.35958 0.777772 3.37317 0.726946 3.40015C0.676121 3.42713 0.630862 3.46686 0.594306 3.51658C0.557751 3.5663 0.530772 3.62483 0.515239 3.68811C0.499707 3.75139 0.495992 3.81791 0.504352 3.88305L1.22684 9.40575C1.25464 9.62252 1.34773 9.82011 1.48898 9.96211C1.63022 10.1041 1.81009 10.1809 1.99545 10.1785H9.01286C9.19822 10.1809 9.37809 10.1041 9.51933 9.96211C9.66058 9.82011 9.75367 9.62252 9.78147 9.40575L10.4963 3.88305C10.504 3.81816 10.4997 3.75206 10.4838 3.6893C10.4679 3.62654 10.4407 3.56858 10.404 3.51942V3.51942ZM3.96309 1.54216C3.96309 1.4216 4.00358 1.30599 4.07565 1.22075C4.14773 1.1355 4.24547 1.08761 4.3474 1.08761H6.65323C6.75515 1.08761 6.8529 1.1355 6.92497 1.22075C6.99704 1.30599 7.03753 1.4216 7.03753 1.54216V3.36033H3.96309V1.54216ZM9.01286 9.26938H1.98777L1.33829 4.26941H9.66233L9.01286 9.26938Z' fill='white'/%3E%3C/svg%3E%0A");
}

.button--up {
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: calc(var(--button-horizontal-padding) + 13px);

  background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.30749 7.31736a.62483.62483 0 0 1-.13589-.20296.624948.624948 0 0 1 0-.47908.62483.62483 0 0 1 .13589-.20296l3.75001-3.75c.058-.0582.127-.10438.2029-.13589.076-.03151.1574-.04773.2396-.04773s.1636.01622.2395.04773c.076.03151.1449.07769.203.13589l3.75 3.75c.1173.11736.1833.27653.1833.4425s-.066.32514-.1833.4425c-.1174.11736-.2765.18329-.4425.18329-.166 0-.3252-.06593-.4425-.18329L10.5 4.00861 7.19249 7.31736a.625148.625148 0 0 1-.20296.13589.624948.624948 0 0 1-.47908 0 .624935.624935 0 0 1-.20296-.13589z' fill='%23C90606'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 17.5c-.1658 0-.3247-.0658-.4419-.1831a.62469.62469 0 0 1-.1831-.4419V3.75a.62487.62487 0 0 1 .1831-.44194A.624819.624819 0 0 1 10.5 3.125c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v13.125c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831z' fill='%23C90606'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 5px center;
}

.button--up:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.30749 7.31736a.62483.62483 0 0 1-.13589-.20296.624948.624948 0 0 1 0-.47908.62483.62483 0 0 1 .13589-.20296l3.75001-3.75c.058-.0582.127-.10438.2029-.13589.076-.03151.1574-.04773.2396-.04773s.1636.01622.2395.04773c.076.03151.1449.07769.203.13589l3.75 3.75c.1173.11736.1833.27653.1833.4425s-.066.32514-.1833.4425c-.1174.11736-.2765.18329-.4425.18329-.166 0-.3252-.06593-.4425-.18329L10.5 4.00861 7.19249 7.31736a.625148.625148 0 0 1-.20296.13589.624948.624948 0 0 1-.47908 0 .624935.624935 0 0 1-.20296-.13589z' fill='%23ffffff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 17.5c-.1658 0-.3247-.0658-.4419-.1831a.62469.62469 0 0 1-.1831-.4419V3.75a.62487.62487 0 0 1 .1831-.44194A.624819.624819 0 0 1 10.5 3.125c.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v13.125c0 .1658-.0658.3247-.1831.4419-.1172.1173-.2761.1831-.4419.1831z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.cart {
  padding-top: 2px;
  padding-bottom: 3px;
}

.cart__footer {
  display: flex;
  align-content: stretch;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;

  margin-top: 26px;
}

.cart__coupon {
  flex: 0 0 50%;
}

.cart__total-info {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: space-between;

  min-width: 220px;
}

.cart__total-item {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;

  width: 100%;
  margin: 0 0 11px 0;
  padding: 0;
}

.cart__total-value-name {
  margin: 0;

  font-size: 20px;
  font-weight: 700;

  letter-spacing: 0.05em;
}

.cart__total-value {
  margin: 0 0 0 20px;

  font-size: 20px;
  font-weight: 400;

  letter-spacing: 0.05em;
}

.cart__total-value--bonus {
  color: #c90606;
}

.cart__total-value--payment {
  font-weight: 700;
}

.cart__order-button {
  align-self: flex-end;

  width: 100%;
  margin-top: 15px;

  letter-spacing: 0.05em;
}

.button-cross {
  width: 14px;
  height: 14px;
  padding: 0;

  color: #585757;
  border: none;
  background-color: transparent;

  cursor: pointer;
  -webkit-transition: outline-color 0.3s ease;
  -webkit-transition: color 0.3s ease;
          transition: outline-color 0.3s ease;
          transition: color 0.3s ease;
}

.button-cross:hover {
  color: #c90606;
}

.button-cross:focus {
  color: #c90606;
  outline: none;
}

.button-cross__icon::before,
.button-cross__icon::after {
  top: 6.5px;
  left: -1.5px;
  position: absolute;

  width: 17px;
  height: 1px;

  background-color: currentColor;

  content: "";
}

.button-cross__icon::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.button-cross__icon::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.catalog-filter {
  display: flex;
  flex-direction: column;

  width: 100%;

  grid-area: filters;
}

.catalog-filter__title {
  margin-top: 8px;
  margin-bottom: 22px;

  font-size: 22px;
  font-weight: 700;
  line-height: 22px;
}

.catalog-filter__block {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  margin: 0;
  padding: 31px 0 29px;

  border: none;
}

.catalog-filter__block::before {
  top: 0;
  left: -2px;
  position: absolute;

  width: 215px;
  height: 1px;

  background-color: #dddada;

  content: "";
}

.catalog-filter__block:last-child::after {
  bottom: 0;
  left: -2px;
  position: absolute;

  width: 205px;
  height: 1px;

  background-color: #dddada;

  content: "";
}

.catalog-filter__block-title {
  float: left;

  width: 100%;
  margin-bottom: 20px;

  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
}

.catalog-filter__price-range {
  position: relative;

  display: flex;
  justify-content: space-between;
}

.catalog-filter__price-range::after {
  top: 50%;
  left: 50%;
  position: absolute;

  display: block;

  width: 15px;
  height: 2px;
  margin-top: -2px;

  background-color: #585757;

  content: "";
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.catalog-filter__price-range input {
  width: 85px;
  height: 30px;
}

.catalog-filter__price-range input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.catalog-filter__price-range input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.catalog-filter__price-range input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.catalog-filter__price-range input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.catalog-filter__price-range input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.catalog-filter__block-item {
  margin-bottom: 10px;
}

.catalog-filter__block-item:last-child {
  margin-bottom: 0;
}

.catalog-filter__reset-btn {
  align-self: flex-start;

  min-width: 160px;
  margin-top: 24px;
}

.catalog-sort {
  display: flex;
  justify-content: flex-start;

  width: 100%;
  padding-top: 3px;

  font-size: 16px;
  line-height: 20px;

  letter-spacing: 0.05em;

  grid-area: sorter;
}

.catalog-sort__title {
  margin: 0 20px 0 0;

  font: inherit;

  color: #000000;
}

.catalog-sort__type {
  display: flex;

  margin: 0;
  padding: 0;

  list-style: none;

  color: #585757;
}

.catalog-sort__type-button {
  position: relative;

  padding: 0;

  color: #585757;
  border: none;
  background-color: rgba(255, 255, 255, 0);

  cursor: pointer;
  -webkit-transition: color 0.3s ease, outline-color 0.3s ease;
          transition: color 0.3s ease, outline-color 0.3s ease;
  letter-spacing: 0.05em;
}

.catalog-sort__type-button:not(:last-child) {
  margin-right: 30px;
}

.catalog-sort__type-button:hover {
  color: #c90606;
}

.catalog-sort__type-button:focus {
  outline: 1px solid #c90606;
  outline-offset: 1px;
}

.catalog-sort__type-button--active {
  color: #000000;

  pointer-events: none;
}

.catalog-sort__type-button--active::before {
  bottom: -3px;
  position: absolute;

  width: 100%;
  height: 2px;

  background-color: #c90606;

  content: "";
}

.catalog-sort__order {
  display: flex;
  align-items: center;

  margin-right: 9px;
  margin-left: auto;
}

.catalog-sort__order-button {
  position: relative;

  width: 0;
  height: 0;
  padding: 0;

  border-width: 12px 7px 0;
  border-color: transparent;
  border-top-color: #585757;
  background-color: transparent;

  cursor: pointer;
  -webkit-transition: border-top-color 0.3s ease, outline-color 0.3s ease;
          transition: border-top-color 0.3s ease, outline-color 0.3s ease;
}

.catalog-sort__order-button::before {
  top: 50%;
  left: 50%;
  position: absolute;

  width: 30px;
  height: 30px;

  content: "";
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.catalog-sort__order-button--up {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.catalog-sort__order-button--down {
  margin-left: 23px;
}

.catalog-sort__order-button--down::before {
  -webkit-transform: translate(-50%, -75%);
          transform: translate(-50%, -75%);
}

.catalog-sort__order-button--active {
  border-top-color: #c90606;

  pointer-events: none;
}

.catalog-sort__order-button:hover {
  border-top-color: #c90606;
}

.catalog-sort__order-button:focus {
  outline: 1px solid #c90606;
  outline-offset: 1px;
}

.form-checkbox {
  display: flex;
  overflow: hidden;
  align-items: flex-start;
  flex-direction: column;
}

.form-checkbox label {
  display: flex;
  overflow: hidden;
  align-items: center;

  font-size: 16px;
  line-height: 23px;

  cursor: pointer;
  -webkit-transition: color 0.3s ease;
          transition: color 0.3s ease;
}

.form-checkbox label::before {
  display: block;
  flex-shrink: 0;

  width: 25px;
  height: 25px;
  margin-right: 14px;

  border: 0.7px solid #585757;
  border-radius: 2px;

  content: "";
  cursor: pointer;
  -webkit-transition: border-color 0.3s ease;
          transition: border-color 0.3s ease;
}

.form-checkbox label:hover {
  color: #c90606;
}

.form-checkbox input:hover + label::before {
  border-color: #c90606;
}

.form-checkbox input:focus + label::before {
  border-color: #c90606;
}

.form-checkbox input:active + label {
  color: #c90606;
}

.form-checkbox input:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.71128 8.86588L.649596 4.82698a.250656.250656 0 0 1 0-.35547L1.67499 3.44498c.09798-.09798.25634-.09798.35433 0l2.67399 2.65804c.09798.09798.25748.09684.35547-.00114L10.9673.136389c.098-.099121.2575-.099121.3566-.00114l1.0265 1.026531c.098.09798.098.25635.0012.35433L5.91441 8.01139l.00114.00114-.8488.85335c-.09798.09798-.25749.09798-.35547 0z' fill='%23585757'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-checkbox input:disabled + label {
  color: #dddddd;

  pointer-events: none;
}

.form-checkbox input:disabled + label::before {
  border-color: #dddddd;
  background: #f6f3f3;

  pointer-events: none;
}

.form-checkbox input:disabled:hover + label {
  pointer-events: none;
}

.form-checkbox input:disabled:hover + label::before {
  border-color: #dddddd;
  background: #f6f3f3;

  pointer-events: none;
}

.form-input input {
  padding-left: 9px;

  font-size: 14px;
  line-height: 28px;

  color: #000000;
  border: 0.7px solid #585757;
  border-radius: 2px;
  background-color: transparent;

  -webkit-transition: border-color 0.3s ease;
          transition: border-color 0.3s ease;
  letter-spacing: 0.05em;
}

.form-input input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.form-input input[type="number"]:invalid {
  border: 2px solid #eb5555;
  outline: none;
}

.form-input input::-webkit-input-placeholder {
  opacity: 0.6;
  color: #000000;
}

.form-input input::-moz-placeholder {
  opacity: 0.6;
  color: #000000;
}

.form-input input:-ms-input-placeholder {
  opacity: 0.6;
  color: #000000;
}

.form-input input::-ms-input-placeholder {
  opacity: 0.6;
  color: #000000;
}

.form-input input::placeholder {
  opacity: 0.6;
  color: #000000;
}

.form-input input:hover {
  border-color: rgba(84, 77, 77, 0.65);
}

.form-input input:focus {
  outline-color: #c90606;
}

.form-input__message {
  margin: 4px 2px 0 0;

  font-size: 10px;
  line-height: 15px;

  text-align: right;
  letter-spacing: 0.05em;
}

.form-input__message--success {
  color: #07742c;
}

.form-input__message--error {
  color: #eb5555;
}

.form-review {
  display: flex;
  flex-direction: column;
}

.form-review__wrapper {
  display: flex;

  margin-bottom: 5px;
  padding-top: 23px;
}

.form-review__name-wrapper {
  width: 175px;
  margin-right: 30px;
}

.form-review__label {
  display: inline-block;
  align-self: flex-start;

  margin-bottom: 5px;

  font-size: 12px;
  line-height: 15px;

  color: #585757;

  letter-spacing: 0.02em;
}

.form-review__label--required {
  position: relative;
}

.form-review__label--required::before {
  top: -5px;
  right: -10px;
  position: absolute;

  width: 5px;
  height: 5px;

  font-size: 12px;
  line-height: 16px;

  color: #c90606;

  content: "*";
}

.form-review__input {
  width: 100%;
  padding: 5px 8px;

  font-size: 14px;

  border: 1px solid #585757;
  border-radius: 2px;
  background-color: inherit;
}

.form-review__input--name {
  margin-bottom: 0;
}

.form-review__input--textarea {
  height: 70px;
}

.form-review__input::-webkit-input-placeholder {
  font-size: 14px;
  line-height: 15px;

  color: #000000;

  letter-spacing: 0.02em;
}

.form-review__input::-moz-placeholder {
  font-size: 14px;
  line-height: 15px;

  color: #000000;

  letter-spacing: 0.02em;
}

.form-review__input:-ms-input-placeholder {
  font-size: 14px;
  line-height: 15px;

  color: #000000;

  letter-spacing: 0.02em;
}

.form-review__input::-ms-input-placeholder {
  font-size: 14px;
  line-height: 15px;

  color: #000000;

  letter-spacing: 0.02em;
}

.form-review__input::placeholder {
  font-size: 14px;
  line-height: 15px;

  color: #000000;

  letter-spacing: 0.02em;
}

.form-review__warning {
  display: block;

  margin: 0;
  padding-right: 5px;

  font-size: 10px;
  line-height: 15px;

  color: #eb5555;

  text-align: end;
  letter-spacing: 0.02em;
}

.form-review__button {
  margin-top: 7px;
  margin-right: 70px;
  margin-left: 70px;
}

.form-search {
  position: relative;

  width: 300px;

  border: 1px solid rgba(254, 250, 250, 0.6);
  background: inherit;

  -webkit-transition: border-color 0.3s ease;
          transition: border-color 0.3s ease;
}

.form-search:hover,
.form-search:focus {
  border: 1px solid #545454;
}

.form-search__form {
  display: flex;

  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  border-radius: 2px;
  background: inherit;

  -webkit-transition: border-color 0.3s ease;
          transition: border-color 0.3s ease;
}

.form-search__input,
.form-search__submit,
.form-search__reset {
  border: none;
  outline: none;
  background: transparent;
}

.form-search__input {
  flex: 1 1 auto;

  padding-right: 20px;

  font-size: 14px;
  line-height: 19px;

  color: inherit;
}

.form-search__input::-webkit-input-placeholder {
  font-size: 12px;
  line-height: 16px;

  color: #c5c4c4;
}

.form-search__input::-moz-placeholder {
  font-size: 12px;
  line-height: 16px;

  color: #c5c4c4;
}

.form-search__input:-ms-input-placeholder {
  font-size: 12px;
  line-height: 16px;

  color: #c5c4c4;
}

.form-search__input::-ms-input-placeholder {
  font-size: 12px;
  line-height: 16px;

  color: #c5c4c4;
}

.form-search__input::placeholder {
  font-size: 12px;
  line-height: 16px;

  color: #c5c4c4;
}

.form-search__submit {
  position: relative;

  width: 38px;
  height: 38px;
  padding: 0;

  color: #ffffff;

  cursor: pointer;
  -webkit-transition: color 0.3s ease;
          transition: color 0.3s ease;
}

.form-search__submit:hover,
.form-search__submit:focus {
  color: #c90606;
}

.form-search__reset {
  top: 0;
  right: 0;
  position: absolute;

  display: none;

  width: 38px;
  height: 38px;
  padding: 0;

  color: #585757;

  cursor: pointer;
  -webkit-transition: color 0.3s ease;
          transition: color 0.3s ease;
}

.form-search__reset:hover {
  color: #c90606;
}

.form-search__select-list.list-opened + .form-search__reset {
  display: block;
}

.form-search__icon {
  top: 50%;
  left: 50%;
  position: absolute;

  width: 14px;
  height: 15px;

  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.form-search__select-list {
  top: 38px;
  left: 0;
  position: absolute;
  z-index: 4;

  overflow-y: scroll;

  width: 100%;
  min-height: 100%;
  max-height: 120px;
  margin: 0;
  padding: 2px 15px 5px 38px;

  list-style: none;

  font-size: 14px;
  line-height: 19px;

  color: inherit;
  border: 1px solid rgba(254, 250, 250, 0.6);
  border-radius: 2px;
  background: inherit;

  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.form-search__select-list::-webkit-scrollbar {
  width: 4px;
}

.form-search__select-list::-webkit-scrollbar-thumb {
  height: 95px;

  border: 2px solid rgba(232, 229, 229, 0.5);
  border-radius: 6px;
  background-color: transparent;
}

.form-search__select-list:hover,
.form-search__select-list:focus {
  border: 1px solid #545454;
}

.form-search__select-item {
  padding-top: 4px;
  padding-bottom: 4px;

  font-size: 14px;
  line-height: 19px;

  color: inherit;

  cursor: pointer;
  -webkit-transition: color 0.3s ease;
          transition: color 0.3s ease;
}

.form-search__select-item:hover,
.form-search__select-item:focus {
  color: #545454;
}

.logo {
  display: flex;
  align-items: start;
}

.logo__img {
  width: 70px;
  height: 70px;

  -o-object-fit: contain;
     object-fit: contain;
}

.page-content {
  position: relative;

  padding: 215px 0 139px;
}

.page-content::before,
.page-content::after {
  position: absolute;

  width: 100%;

  content: "";
}

.page-content::before {
  top: 0;

  height: 251px;

  background-image: url("../img/content/bg_header.png"), url("data:image/svg+xml,%3Csvg width='1020' height='74' viewBox='0 0 1020 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='28' width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='56' width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='14' width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='42' width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='70' width='1020' height='4' fill='%233F3F3F'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat, repeat-x;
  background-position: top -38px right, top 24px center;
  background-size: 825px, 1020px;
}

.page-content::after {
  bottom: 0;

  height: 139px;

  background-image: url("data:image/svg+xml,%3Csvg width='1020' height='5' viewBox='0 0 1020 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1020' height='5' fill='%23131212'/%3E%3C/svg%3E%0A"), url("../img/content/bg_header.png");
  background-repeat: repeat-x, no-repeat;
  background-position: bottom 129px center, bottom -31% left 103%;
  background-size: 1020px, 825px;

  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.page-content__title {
  margin-top: 0;
  margin-bottom: 0;
}

.page-content__breadcrumbs {
  margin: 20px 0 43px;
}

.page-content__pagination {
  margin: 26px 0 0 0;
}

.pagination {
  width: 100%;

  grid-area: pagination;
}

.pagination__list {
  display: flex;
  justify-content: flex-end;

  margin: 0 19px 0 0;
  padding: 0;

  list-style: none;
}

.pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 25px;
  height: 25px;
  margin-left: 10px;

  font-size: 12px;
  line-height: 20px;

  letter-spacing: 0.05em;
}

.pagination__page--active {
  color: #ffffff;
  border-radius: 2px;
  background-color: #131212;

  pointer-events: none;
}

.pagination__page--next a,
.pagination__page--prev a {
  padding: 2px 15px 2px 15px;
}

.pagination__page-link {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  border: 0.7px solid #585757;
  border-radius: 2px;

  -webkit-transition: color 0.3s ease, border-color 0.3s ease;
          transition: color 0.3s ease, border-color 0.3s ease;
}

.pagination__page-link:hover {
  color: #c90606;
}

.pagination__page-link:active {
  border-color: #545454;
}

.product-container {
  display: flex;

  padding-bottom: 62px;

  font-size: 14px;
  line-height: 15px;

  border-bottom: 0.7px solid #dddada;

  letter-spacing: 0.05em;
}

.product-container__img {
  width: 220px;
  height: 252px;
  margin-right: 20px;

  -o-object-fit: contain;
     object-fit: contain;
}

.product-container__info-wrapper {
  width: 380px;
}

.product-container__title {
  margin-top: 0;
  margin-bottom: 8px;
}

.product-container__rating {
  width: 105px;
  margin-bottom: 22px;

  font-size: 13px;
  line-height: 15px;

  letter-spacing: 0.1em;
}

.product-container__price-wrapper {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;

  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 246px;
  height: 165px;
  margin-top: 13px;
  margin-left: auto;
  padding-top: 30px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;

  border: 1px solid rgba(88, 87, 87, 0.7);
  border-radius: 2px;
}

.product-container__price-info {
  margin-top: 0;
  margin-bottom: 34px;

  font-size: 20px;
  line-height: 15px;

  letter-spacing: 0.05em;
}

.product-container__price-info--title {
  padding-left: 5px;
}

.product-container__price-info--value {
  margin-left: auto;
  padding-right: 6px;

  font-weight: bold;
}

.product-container__button {
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
}

.rate {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;

  color: #c90606;
}

.rate--reverse {
  flex-direction: row-reverse;
  justify-content: flex-end;

  margin-left: -3px;
}

.rate svg {
  margin-right: 3px;
}

.rate label {
  position: relative;
}

.rate__label {
  margin-left: 3px;
}

.rate__count {
  margin: 0;
  margin-right: auto;

  color: #585757;
}

.rate:not(:checked) > label {
  float: right;
  overflow: hidden;

  width: 18px;
  height: 20px;

  font-size: 30px;

  color: #ffffff;

  cursor: pointer;
  white-space: nowrap;
}

.rate:not(:checked) > label::before {
  position: absolute;

  width: 24px;
  height: 20px;

  background: url("../img/sprite/icon-star.svg") no-repeat top 0 left 0;
  background-size: 18px 20px;

  content: "";
}

.rate > input:checked ~ label {
  background: url("../img/sprite/icon-full-star.svg") no-repeat top 0 left 0;
  background-size: 18px 20px;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
  background: url("../img/sprite/icon-full-star.svg") no-repeat top 0 left 0;
  background-size: 18px 20px;
}

.rate > input:focus + label {
  outline: 1px solid #000000;
  outline-offset: -1px;
}

.rate__message {
  bottom: -17px;
  left: 7px;
  position: absolute;

  width: 100px;
  margin: 0;

  font-size: 10px;
  font-weight: normal;
  font-style: normal;
  line-height: 15px;

  color: #eb5555;

  letter-spacing: 0.02em;
}

.product-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  width: 220px;
  min-height: 310px;
  padding: 9px 9px 14px;

  font-size: 14px;
  line-height: 15px;

  border: 1px solid #dddada;
  background-color: #ffffff;

  letter-spacing: 0.05em;
}

.product-card img {
  width: 100%;
  height: 190px;
  margin: 0 auto;

  -o-object-fit: scale-down;
     object-fit: scale-down;
}

.product-card__rate {
  align-items: flex-start;

  width: 100%;
  margin: 2px 0 0 0;

  font-size: 10px;
  line-height: 15px;

  color: #585757;

  letter-spacing: 0.1em;
}

.product-card__buttons,
.product-card__info {
  display: flex;
  align-content: center;
  align-items: flex-start;
  justify-content: space-between;
}

.product-card__buttons {
  margin-top: auto;
}

.product-card__buttons a:focus {
  outline: 1px solid #c90606;
  outline-offset: 1px;
}

.product-card__info {
  flex-wrap: wrap;

  margin: 9px 5px 8px 4px;
}

.product-card__title {
  width: 60%;
  margin: 0;
  padding-top: 4px;

  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  letter-spacing: 0.05em;
  text-overflow: ellipsis;
}

.product-card__price {
  width: 40%;
  margin: 0;
  padding-top: 4px;

  text-align: right;
}

.reviews {
  position: relative;

  padding-top: 48px;
}

.reviews__title {
  margin-top: 0;
  margin-bottom: 34px;

  font-weight: bold;

  color: #010101;
}

.reviews__submit-button {
  top: 46px;
  right: 0;
  position: absolute;
}

.reviews__more-button {
  bottom: 0;
  position: relative;

  min-width: 300px;
  margin: 0 auto;
}

.reviews__up-button {
  right: 0;
  bottom: -51px;
  position: absolute;
}

.review {
  margin-bottom: 30px;
}

.review__title {
  margin-top: 0;
  margin-bottom: 3px;
}

.review__title--author {
  margin-bottom: 0;
}

.review__wrapper {
  display: flex;
  align-items: baseline;

  min-width: 100px;
  margin-bottom: 10px;
}

.review__date {
  margin-left: 10px;

  font-size: 12px;
  line-height: 16px;

  color: #585757;
}

.review__rating-panel {
  margin-bottom: 12px;
}

.review__value {
  margin-top: 0;
  margin-bottom: 10px;

  font-size: 14px;
  line-height: 19px;
}

.socials .socials__list {
  display: flex;
  flex-wrap: wrap;

  margin: -20px 0 0 -20px;
  padding: 0;

  list-style: none;
}

.socials-item {
  margin-top: 20px;
  margin-left: 20px;
}

.socials__link {
  position: relative;

  display: block;

  width: 24px;
  height: 24px;

  color: #ffffff;

  -webkit-transition: color 0.3s ease;
          transition: color 0.3s ease;

  fill: currentColor;
}

.socials__link::before {
  top: 50%;
  left: 50%;
  position: absolute;

  width: 40px;
  height: 40px;

  content: "";
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.socials__link:hover {
  color: #c90606;
}

.socials__link:focus {
  color: #dddada;
}

.socials__icon {
  width: 24px;
  height: 24px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs__content {
  width: 100%;
}

.tabs__table {
  width: inherit;
  padding-top: 21px;

  border-spacing: 0;
}

.tabs__table-row {
  display: flex;
  justify-content: flex-start;

  margin-bottom: 8px;
}

.tabs__title {
  max-width: 160px;
  padding: 0;

  font-weight: 600;

  text-align: left;
}

.tabs__value {
  max-width: 160px;
  margin-left: auto;

  text-align: end;
}

.tabs__product-description {
  margin: 0;
  padding-top: 20px;
}

.tabs__button {
  min-width: 190px;
  padding-right: 26px;
  padding-left: 26px;
}

.cart-item {
  position: relative;

  display: grid;
  align-items: start;

  width: 100%;
  padding: 25px 0 9px 0;

  border-top: 0.7px solid #dddada;
  border-bottom: 0.7px solid #dddada;

  gap: 10px;
  grid-template-areas: "button photo info price quantity total-price";
  grid-template-columns: 20px 90px 350px 155px 120px 155px;
  justify-items: start;
}

.cart-item:nth-child(n+2) {
  border-top: none;
}

.cart-item__close-button {
  position: relative;

  grid-area: button;
}

.cart-item__close-button-interactive-area {
  position: relative;
}

.cart-item__close-button-interactive-area::before {
  top: 50%;
  left: 50%;
  position: absolute;

  width: 50px;
  height: 50px;

  content: "";
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.cart-item__image {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;

  width: 100%;
  height: 130px;
  margin: 0 auto;

  grid-area: photo;
  -o-object-fit: contain;
     object-fit: contain;
}

.cart-item__info {
  margin: 26px 0 39px 20px;

  grid-area: info;
}

.cart-item__price {
  margin-top: 46px;
  margin-left: auto;

  font-size: 20px;

  letter-spacing: 0.05em;

  grid-area: price;
}

.cart-item__price-total {
  margin-top: 46px;
  margin-left: auto;

  font-size: 20px;
  font-weight: 700;

  text-align: end;
  letter-spacing: 0.05em;

  grid-area: total-price;
}

.cart-item__quantity {
  margin-top: 40px;
  margin-left: auto;

  grid-area: quantity;
}

.product-info__title {
  margin: 0 0 15px 0;
  padding: 0;

  font-size: 16px;
  font-weight: 700;
  line-height: 15px;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.product-info__info {
  margin: 0 0 5px 0;

  font-size: 14px;
  line-height: 15px;

  letter-spacing: 0.05em;
}

.quantity {
  display: flex;
  align-content: stretch;
  align-items: stretch;
  justify-content: center;

  height: 30px;

  border: 1px solid #585757;
}

.quantity__input {
  display: flex;

  width: 28px;
  height: 100%;
  padding: 0;

  font-size: 16px;
  line-height: 30px;

  border: none;
  border-right: 1px solid #585757;
  border-left: 1px solid #585757;
  background-color: transparent;

  -webkit-transition: color 0.3s ease, outline-color 0.3s ease;
          transition: color 0.3s ease, outline-color 0.3s ease;
  text-align: center;
}

.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.quantity__input:hover,
.quantity__input:focus {
  border: none;
  outline: 1px solid #c90606;
}

.quantity__button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 25px;
  height: 100%;
  padding: 0;

  font-size: 20px;

  color: #585757;
  border: none;
  background: transparent;

  cursor: pointer;
  -webkit-transition: color 0.3s ease, outline-color 0.3s ease;
          transition: color 0.3s ease, outline-color 0.3s ease;
}

.quantity__button:hover,
.quantity__button:focus {
  color: #c90606;
  outline: none;
}

.coupon {
  display: flex;
  flex-direction: column;
}

.coupon__form {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  width: 100%;
}

.coupon__input {
  width: 180px;
}

.coupon__input input {
  flex: 0 0 0;

  width: 100%;
  height: 40px;
  padding-right: 9px;

  font-size: 14px;
  line-height: 15px;

  color: #000000;
  border: 2px solid #dddada;
  border-radius: 2px;

  -webkit-transition: border-color 0.3s ease;
          transition: border-color 0.3s ease;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coupon__input input::-webkit-input-placeholder {
  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 12px;
  line-height: 15px;

  -webkit-transform: translate3d(0, -2px, 0);
          transform: translate3d(0, -2px, 0);
  letter-spacing: 0.05em;
  text-transform: none;
}

.coupon__input input::-moz-placeholder {
  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 12px;
  line-height: 15px;

  transform: translate3d(0, -2px, 0);
  letter-spacing: 0.05em;
  text-transform: none;
}

.coupon__input input:-ms-input-placeholder {
  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 12px;
  line-height: 15px;

  transform: translate3d(0, -2px, 0);
  letter-spacing: 0.05em;
  text-transform: none;
}

.coupon__input input::-ms-input-placeholder {
  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 12px;
  line-height: 15px;

  transform: translate3d(0, -2px, 0);
  letter-spacing: 0.05em;
  text-transform: none;
}

.coupon__input input::placeholder {
  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 12px;
  line-height: 15px;

  -webkit-transform: translate3d(0, -2px, 0);
          transform: translate3d(0, -2px, 0);
  letter-spacing: 0.05em;
  text-transform: none;
}

.coupon__input input:hover {
  border-color: #545454;
}

.coupon__title {
  width: 100%;
  margin: 4px 0 9px;
  padding: 0;

  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.05em;
}

.coupon__info {
  width: 100%;
  margin: 0 0 20px;

  font-size: 14px;
  line-height: 15px;

  color: #000000;

  letter-spacing: 0.05em;
}

.coupon__button {
  min-width: 180px;
  padding-top: 8px;
  padding-bottom: 8px;

  border-radius: 0 2px 2px 0;

  letter-spacing: 0.05em;
}
.loader {
  color: tomato;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes load4 {

  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }

  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }

  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }

  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

@keyframes load4 {

  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }

  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }

  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }

  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

.disabled_scroll {
   -moz-appearance: textfield;
}
.disabled_scroll::-webkit-inner-spin-button {
  display: none;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .modal--success .modal__content {
    background-image: url("../img/sprite/bg_modal@2x.png");
  }

  .page-content::before {
    background-image: url("../img/content/bg_header@2x.png"), url("data:image/svg+xml,%3Csvg width='1020' height='74' viewBox='0 0 1020 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='28' width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='56' width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='14' width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='42' width='1020' height='4' fill='%233F3F3F'/%3E%3Crect y='70' width='1020' height='4' fill='%233F3F3F'/%3E%3C/svg%3E%0A");
  }

  .page-content::after {
    background-image: url("data:image/svg+xml,%3Csvg width='1020' height='5' viewBox='0 0 1020 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1020' height='5' fill='%23131212'/%3E%3C/svg%3E%0A"), url("../img/content/bg_header@2x.png");
  }
}