:root {
  --font-family: "Inter", sans-serif;
  --content-width: 1565px;
  --container-offset: 15px;
  --container-width: calc(var(--content-width) + (var(--container-offset) * 2));

  --light-color: #fff;
  --dark-color: #000;
}



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

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

.page {
height: 100%;
font-family: var(--font-family, sans-serif);
-webkit-text-size-adjust: 100%;
}

.page__body {
margin: 0;
min-width: 320px;
min-height: 100%;
font-size: 16px;
}

img {
height: auto;
max-width: 100%;
-o-object-fit: cover;
   object-fit: cover;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

.site-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
min-height: 100vh;
}

.container-fluid {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--container-offset);
}

.is-hidden {
display: none !important;
/* stylelint-disable-line declaration-no-important */
}

.btn-reset {
border: none;
padding: 0;
background: transparent;
cursor: pointer;
}

.list-reset {
list-style: none;
margin: 0;
padding: 0;
}

.input-reset {
-webkit-appearance: none;
-moz-appearance: none;
     appearance: none;
border: none;
border-radius: 0;
background-color: #fff;
}

.input-reset::-webkit-search-decoration,
.input-reset::-webkit-search-cancel-button,
.input-reset::-webkit-search-results-button,
.input-reset::-webkit-search-results-decoration {
display: none;
}

.visually-hidden {
position: absolute !important;
overflow: hidden;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
clip: rect(0 0 0 0);
}

.container {
margin: 0 auto;
padding: 0 var(--container-offset);
max-width: var(--container-width);
}

.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}

.centered {
text-align: center;
}

.dis-scroll {
position: fixed;
left: 0;
top: 0;
overflow: hidden;
width: 100%;
height: 100vh;
-ms-scroll-chaining: none;
    overscroll-behavior: none;
}

.page--ios .dis-scroll {
position: relative;
}

.products-title {
margin: 0;
font-size: 20px;
color: #333;
font-weight: 700;
line-height: 1;
}

.price {
margin: 0;
display: inline-block;
font-size: 16px;
color: #000;
font-weight: 700;
margin-top: 8px;
}

.price--special {
color: #bd3c37;
margin-right: 7px;
}

.price--old {
color: #747474;
text-decoration: line-through;
display: inline-block;
margin-top: 1px;
font-weight: 400;
}

.products-item-title {
margin: 0;
height: 55px;
line-height: 1.3;
overflow: hidden;
text-align: left;
font-weight: 400;
display: inline-block;
font-size: 14px;
color: #333;
}

.primary-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
background-color: #458500;
border-radius: 8px;
padding: 6px 12px;
color: #fff;
font-size: 14px;
font-weight: 700;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.primary-btn:hover {
text-decoration: none;
background-color: #356402;
}

.products {
background-color: #fafafa;
padding-top: 20px;
padding-bottom: 43px;
margin-top: 30px;
}

.products__title {
margin: 0;
}

.products__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
margin-bottom: 29px;
}

.products__image-wrapper {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
margin-bottom: 15px;
}

.products__link {
text-decoration: none;
background-color: #fff;
padding: 20px 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}

.products__buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
}

.products__btn {
position: absolute;
top: 50%;
height: 40px;
width: 40px;
background-color: #fff;
border: solid 1px #e0e0e0;
border-radius: 100%;
cursor: pointer;
}

.products__btn::after {
content: "";
position: absolute;
z-index: 100;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
width: 28px;
height: 28px;
}

.products__btn--left::after {
background-image: url("../../img/products/products-arrow.svg");
background-repeat: no-repeat;
background-size: cover;
-webkit-transform: translate(-50%, -50%) rotate(-180deg);
    -ms-transform: translate(-50%, -50%) rotate(-180deg);
        transform: translate(-50%, -50%) rotate(-180deg);
}

.products__btn--right::after {
background-image: url("../../img/products/products-arrow.svg");
background-repeat: no-repeat;
background-size: cover;
}

.products__slide {
background-color: #fff;
height: auto;
}

.products__wrapper {
-webkit-box-align: stretch;
    -ms-flex-align: stretch;
        align-items: stretch;
}

.white-btn {
font-weight: 700;
font-size: 16px;
color: #333;
background-color: #fff;
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
height: 40px;
border: 1px solid #333;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.white-btn:hover {
text-decoration: none;
background-color: #333;
color: #fff;
}

.cart-btn {
position: absolute;
bottom: 0;
left: 50%;
z-index: 1000;
color: #fff;
border-color: #f38a00;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
background-repeat: repeat-x;
white-space: nowrap;
background-image: -moz- oldlinear-gradient(top, #f38a00 0, #ef6c00 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f38a00), to(#ef6c00));
background-image: -o-linear-gradient(top, #f38a00 0, #ef6c00 100%);
background-image: linear-gradient(to bottom, #f38a00 0, #ef6c00 100%);
opacity: 0;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.cart-btn--small {
font-size: 14px;
border-radius: 8px;
background: #f38a00;
border: none;
color: #fff;
padding: 6px 12px;
}

.cart-btn--list {
opacity: 1;
position: relative;
left: 0;
top: 0;
padding: 8px 20px;
-webkit-transform: none;
    -ms-transform: none;
        transform: none;
}

@media (max-width: 768px) {
.cart-btn--list {
  margin-left: 15px;
  padding: 4px 10px;
}
}
.cart-btn--category {
font-size: 16px;
}

.products__slide:hover .cart-btn {
opacity: 1;
}

.products__link:hover .cart-btn {
opacity: 1;
}

.cart-btn:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c06d00), to(#bc5500));
background-image: -o-linear-gradient(top, #c06d00 0, #bc5500 100%);
background-image: linear-gradient(to bottom, #c06d00 0, #bc5500 100%);
}

.cart-btn--small:hover {
background: #b66700;
}

.search {
margin-right: 4px;
border: 1px solid #ccc;
height: 48px;
padding: 0 35px 0 16px;
width: 100%;
outline: none;
font-size: 13px;
border-radius: 8px;
display: inline-block;
vertical-align: middle;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
clear: both;
}

.search::-webkit-input-placeholder {
color: #999;
}

.search::-moz-placeholder {
color: #999;
}

.search:-ms-input-placeholder {
color: #999;
}

.search::-ms-input-placeholder {
color: #999;
}

.search::placeholder {
color: #999;
}

.search-wrapper {
position: relative;
width: 100%;
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}

.search-btn {
position: absolute;
right: 12px;
top: 50%;
-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
cursor: pointer;
}

.search-icon {
width: 24px;
height: 24px;
}

.checkbox {
visibility: hidden;
width: 13px;
height: 13px;
padding: 0;
margin: 0 4px 1px 0;
cursor: pointer;
vertical-align: text-bottom;
}

.checkbox:checked + .checkbox-label::before {
background-color: #458500;
border-color: #458500;
}

.checkbox:checked + .checkbox-label::after {
opacity: 1;
}

.checkbox-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}

.checkbox-label {
cursor: pointer;
padding-left: 10px;
padding-right: 4px;
position: relative;
font-weight: 500;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
-webkit-tap-highlight-color: transparent;
color: #666;
font-size: 14px;
}

.checkbox-label::before {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: -17px;
-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
background: #fff;
border-radius: 4px;
border: solid 1px #e0e0e0;
}

.checkbox-label::after {
content: "";
width: 12px;
height: 7px;
position: absolute;
top: 5px;
left: -13px;
border: 2px solid #fff;
border-top: none;
border-right: none;
background: 0 0;
opacity: 0;
-webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}

.select {
height: 48px;
border-radius: 8px;
border-color: #ccc;
padding: 0 32px 0 16px;
-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
background: #fff
  url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12.0007621,13.0865485 L16.3127232,8.77458739 C16.6788397,8.40847087 17.2724319,8.40847087 17.6385484,8.77458739 L17.7269368,8.86297574 C18.0930533,9.22909226 18.0930533,9.82268443 17.7269368,10.188801 L12.688801,15.2269368 C12.4993518,15.4163859 12.2489938,15.5078035 12.0007621,15.5011895 C11.7525304,15.5078035 11.5021723,15.4163859 11.3127232,15.2269368 L6.27458739,10.188801 C5.90847087,9.82268443 5.90847087,9.22909226 6.27458739,8.86297574 L6.36297574,8.77458739 C6.72909226,8.40847087 7.32268443,8.40847087 7.68880096,8.77458739 L12.0007621,13.0865485 Z" fill="%23666666"></path></svg>')
  no-repeat;
background-position: right 5px top 50%;
min-width: 112px;
}

.select-wrapper {
font-size: 14px;
height: 48px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;
white-space: nowrap;
display: inline-block;
}

.select-label {
font-size: 12px;
color: #999;
position: absolute;
left: 8px;
top: -8px;
padding: 0 4px;
line-height: 1.3;
background: -o-repeating-linear-gradient(
  #fafafa,
  #fafafa 49.9%,
  #fff 50.1%,
  #fff 100%
);
background: repeating-linear-gradient(
  #fafafa,
  #fafafa 49.9%,
  #fff 50.1%,
  #fff 100%
);
z-index: 1;
}

.position-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}

.position-grid {
width: 32px;
height: 32px;
cursor: pointer;
fill: #666;
}

.position-grid--active {
fill: #458500;
}

.position-list {
width: 32px;
height: 32px;
cursor: pointer;
fill: #666;
}

.position-list--active {
fill: #458500;
}

.position-wrapper {
border-left: 1px solid #e0e0e0;
padding-left: 10px;
margin-left: 10px;
}

.stock {
white-space: normal;
font-size: 14px;
color: #666;
}

.flag {
padding: 0 3px 0 8px;
position: relative;
background-color: #bd3c37;
margin-right: 20px;
min-height: 20px;
}

.flag::before {
content: "";
position: absolute;
height: 20px;
width: 0;
right: -13px;
bottom: 0;
border-style: solid;
padding-right: 5px;
border-color: #bd3c37 transparent #bd3c37 #bd3c37;
bottom: 0;
border-width: 0 10px 11px 0;
}

.flag::after {
content: "";
position: absolute;
height: 20px;
width: 0;
right: -13px;
bottom: 0;
border-style: solid;
padding-right: 5px;
border-color: #bd3c37 transparent #bd3c37 #bd3c37;
border-width: 11px 10px 0 0;
}

.flag-item {
position: relative;
margin: 0;
text-decoration: none;
font-weight: 700;
color: #fff;
line-height: 20px;
font-size: 12px;
}

.alert {
  padding: 1rem;
z-index: 14000;
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
right: 15px;
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: flex-end;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
top: 72px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
background-color: #d32f2f;
-webkit-transform: translateX(200%);
    -ms-transform: translateX(200%);
        transform: translateX(200%);
display: none;
-webkit-animation: slideInRight 0.3s ease-in-out forwards,
  fadeOut 0.5s ease-in-out forwards 4s;
        animation: slideInRight 0.3s ease-in-out forwards,
  fadeOut 0.5s ease-in-out forwards 4s;
}

.alert--active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: translateX(0);
    -ms-transform: translateX(0);
        transform: translateX(0);
}

.alert__text {
margin: 0;
color: #fff;
font-weight: 500;
}

.alert__icon {
width: 22px;
height: 22px;
margin-right: 5px;
}

.alert__progress {
position: absolute;
display: block;
bottom: -1px;
left: 0;
height: 5px;
border-radius: 5px;
width: 100%;
background-color: #971212;
-webkit-animation: toastProgress 5s ease-in-out forwards;
        animation: toastProgress 5s ease-in-out forwards;
}

.alert__close {
position: relative;
width: 12px;
height: 12px;
}

.alert__close::before {
content: "";
position: absolute;
width: 15px;
height: 2px;
background-color: #fff;
border-radius: 8px;
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}

.alert__close::after {
content: "";
position: absolute;
width: 15px;
height: 2px;
background-color: #fff;
border-radius: 8px;
-webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
}

@-webkit-keyframes slideInRight {
0% {
  -webkit-transform: translateX(110%);
          transform: translateX(110%);
}
75% {
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
}
100% {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}

@keyframes slideInRight {
0% {
  -webkit-transform: translateX(110%);
          transform: translateX(110%);
}
75% {
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
}
100% {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
}
@-webkit-keyframes slideOutRight {
0% {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
25% {
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
}
100% {
  -webkit-transform: translateX(110%);
          transform: translateX(110%);
}
}
@keyframes slideOutRight {
0% {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
25% {
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
}
100% {
  -webkit-transform: translateX(110%);
          transform: translateX(110%);
}
}
@-webkit-keyframes fadeOut {
0% {
  opacity: 1;
}
100% {
  opacity: 0;
}
}
@keyframes fadeOut {
0% {
  opacity: 1;
}
100% {
  opacity: 0;
}
}
@-webkit-keyframes toastProgress {
0% {
  width: 100%;
}
100% {
  width: 0%;
}
}
@keyframes toastProgress {
0% {
  width: 100%;
}
100% {
  width: 0%;
}
}
.loading-item {
z-index: 15001;
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-flow: row;
        flex-flow: row;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
inset: 0px;
width: 100%;
min-height: 100vh;
}

.loading__overlay {
position: fixed;
inset: 0px;
width: 100%;
height: 100%;
opacity: 0.6;
background: black;
-webkit-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
z-index: 15000;
}

.loading__icon {
width: 48px;
height: 48px;
display: block;
position: absolute;
top: 16px;
left: 16px;
}

.loading__spinner {
position: relative;
width: 80px;
height: 80px;
}

.loading__spin {
-webkit-transform-origin: center center;
    -ms-transform-origin: center center;
        transform-origin: center center;
position: absolute;
top: 0px;
bottom: 0px;
margin: auto;
-webkit-animation: 2s linear 0s infinite normal none running spin;
        animation: 2s linear 0s infinite normal none running spin;
height: 100%;
width: 100%;
}

.loading__spin circle {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke-linecap: round;
-webkit-animation: 1.5s ease-in-out 0s infinite normal none running circleDash,
  3s ease-in-out 0s infinite normal none running circleColor;
        animation: 1.5s ease-in-out 0s infinite normal none running circleDash,
  3s ease-in-out 0s infinite normal none running circleColor;
}

@-webkit-keyframes spin {
100% {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}

@keyframes spin {
100% {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}
@-webkit-keyframes circleDash {
0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
}
50% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -35px;
}
100% {
  stroke-dasharray: 89, 200;
}
}
@keyframes circleDash {
0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
}
50% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -35px;
}
100% {
  stroke-dasharray: 89, 200;
}
}
@-webkit-keyframes circleColor {
100%,
0% {
  stroke: #60aa00;
}
40% {
  stroke: #60aa00;
}
66% {
  stroke: #60aa00;
}
80%,
90% {
  stroke: #60aa00;
}
}
@keyframes circleColor {
100%,
0% {
  stroke: #60aa00;
}
40% {
  stroke: #60aa00;
}
66% {
  stroke: #60aa00;
}
80%,
90% {
  stroke: #60aa00;
}
}