:root {
  /* Block background */
  --box-bg: #2b313e;
  --box-cont-bg: rgba(52, 58, 68, 0.35);
  --box-inner-bg: #f3f3f3;
  --box-blur: blur(8px);
  --box-shad: -1px -1px 0 0px #303844;
  --footer-bg: #252c37;

  /* Border radius */
  --box-br: 20px;
  --btn-br: 16px;
  --btn-shad: 0 4px 12px -4px #1c303c;
  --btn-shad-dark: 0 1px 4px -2px #61b5ff;
  --inp-br: 16px;
  --inp-bg: #1d232c;
  --inp-color: #c9d3e1;
  --inp-brd: 1px solid #394653;
  --inp-bg-hover: #242c37;

  /* Block Transition show */
  --box-trs: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --box-show-trs: transform 0.3s var(--box-trs) 0.2s, opacity 0.4s ease 0.2s;

  /* Text color */
  --color-main: #131a22;
  --color-dop: #626d77;
  --color-dark-dop: #8c959f;
  --color-price-dark: #61b5ff;
  --win-title: #f4f4f4;
  --win-sub-title: #7c8793;
  --win-text: #c9d3e1;
  /* Icon color */
  --icon-color: #131a22;
  --icon-hover: #4583fa;

  /* Rainbow */
  --red: #ea3329;
  --orange: #eb6a2c;
  --yellow: #f29c38;
  --lightyellow: #ffd321;
  --green: #75fb4c;
  --cyan: #00f0ff;
  --blue: #0c8cfe;
  --darkblue: #003b6e;
  --purple: #e532ad;
  --deeppurple: #970056;
  --darkpurple: #2b0c5c;
  --lightpurple: #3d147f;
  --brightpurple: #8400ff;
  --pink: #ff034a;

  /* Button hover effect */
  --btn-after-trm: scaleX(.7)scaleY(.7)perspective(1px);
  --btn-after-hover: scaleX(1.015)scaleY(1.035)perspective(1px);
  --btn-after-trn: transform .2s cubic-bezier(.345, .115, .135, 1.42), background .15s;
}




@font-face {
  font-family: "GT Eesti Display";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: local("GT Eesti Pro Display Light"),
    url("/fonts/GTEesti/GTEestiProDisplay-Light.woff2") format("woff2"),
    url("/fonts/GTEesti/GTEestiProDisplay-Light.woff") format("woff"),
    url("/fonts/GTEesti/GTEestiProDisplay-Light.ttf") format("truetype");
}


@font-face {
  font-family: "GT Eesti Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("GT Eesti Pro Display Regular"),
    url("/fonts/GTEesti/GTEestiProDisplay-Regular.woff2") format("woff2"),
    url("/fonts/GTEesti/GTEestiProDisplay-Regular.woff") format("woff"),
    url("/fonts/GTEesti/GTEestiProDisplay-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "GT Eesti Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("GT Eesti Pro Display Medium"),
    url("/fonts/GTEesti/GTEestiProDisplay-Medium.woff2") format("woff2"),
    url("/fonts/GTEesti/GTEestiProDisplay-Medium.woff") format("woff"),
    url("/fonts/GTEesti/GTEestiProDisplay-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "GT Eesti Display";
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: local("GT Eesti Pro Display Bold"),
    url("/fonts/GTEesti/GTEestiProDisplay-Bold.woff2") format("woff2"),
    url("/fonts/GTEesti/GTEestiProDisplay-Bold.woff") format("woff"),
    url("/fonts/GTEesti/GTEestiProDisplay-Bold.ttf") format("truetype");
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
main,
nav,
section,
input,
textarea,
pr-catalog a span {
  display: block;
}

html {
  background-color: #fff;
  padding: 0;
  margin: 0;
  overflow-x: auto;
}

html.noscroll {
  overflow-y: hidden;
}

input,
textarea {
  border: medium none;
  border-radius: var(--inp-br);
  width: 100%;
  font: normal 100%/1.2em "GT Eesti Display", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.6px;
  outline: none;
  resize: vertical;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-appearance: none;
}

input::-moz-placeholder {
  color: #90969d;
}

input::-webkit-input-placeholder {
  color: #90969d;
}

input::-moz-placeholder {
  color: #90969d;
}

input:-moz-placeholder {
  color: #90969d;
}

inpute:-ms-input-placeholder {
  color: #90969d;
}

input::placeholder {
  color: #90969d;
}

textarea::-moz-placeholder {
  color: #90969d;
}

/* Chrome, Edge, Opera */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #c9d3e1 !important;
  -webkit-box-shadow: 0 0 0 1000px #1d232c inset !important;
  box-shadow: 0 0 0 1000px #1d232c inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Firefox */
input:-moz-autofill {
  box-shadow: 0 0 0 1000px #1d232c inset !important;
  color: #c9d3e1 !important;
}


input[type="checkbox"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 100%;
  display: block;
}

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

input[type="number"],
input[type="number"]:hover,
input[type="number"]:focus {
  appearance: none;
  -moz-appearance: textfield;
}

input:focus {
  outline: none;
  box-shadow: none;
}

:focus::-webkit-input-placeholder {
  color: transparent;
}

:focus::-moz-placeholder {
  color: transparent;
}

:focus:-moz-placeholder {
  color: transparent;
}

:focus:-ms-input-placeholder {
  color: transparent;
}

img {
  border: none;
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin: 0;
  vertical-align: top;
  font-size: 12px;
  font-weight: normal;
}

.img-shad {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;
}

.img-shad:before {
  content: "";
  -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1) inset;
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

ul {
  list-style: none;
  display: inline-block;
}

a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
  color: var(--color-main);
}

a:hover {
  /* text-decoration: underline; */
  /* color: #2e74c6; */
}

button {
  background-color: transparent;
  border: none;
  display: block;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  outline: none;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.di,
span {
  display: inline-block;
}

.db {
  display: block;
}

.dn {
  display: none;
}

.pa {
  position: absolute;
}

.pr {
  position: relative;
}

.cp {
  cursor: pointer;
}

.tc {
  text-align: center;
}

.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

/* SVG */
svg {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
}

/* Flex box */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.nw {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.sa {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.jc {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.sb {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.ac {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.as {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* Elements */
.btn {
  background: linear-gradient(90deg, #0d0d0d 0%, #0d55dd 100%);
  border: medium none;
  border-radius: var(--btn-br);
  box-shadow: 0 15px 5px -15px #333;
  display: inline-block;
  position: relative;
  padding: 14px 22px;
  text-align: center;
  transition: 0.2s;
  color: #f4f4f4;
  cursor: pointer;
  letter-spacing: 0.8px;
  font-size: 14px;
  font-weight: 400;
}

.btn:hover {
  background: linear-gradient(90deg, #000 0%, #385ddf 100%);
  text-decoration: none;
  transform: translateY(-2px);
  color: #fff;
}

.btn svg {
  position: absolute;
  width: 18px;
  height: 18px;
  top: calc(50% - 9px);
  right: 16px;
  --strok: #f4f4f4;
  transition: transform 0.3s var(--box-trs) 0s;
}

.btn:hover svg {
  -webkit-transform: translateX(6px);
  -ms-transform: translateX(6px);
  transform: translateX(6px);
}



.i-close {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  width: 36px;
  height: 36px;
  top: 8px;
  right: 8px;
  cursor: pointer;
  transition: 0.2s;
  overflow: hidden;
  opacity: 0;
  z-index: 1;
}

.open button.i-close,
.show button.i-close {
  transform: translate(0);
  opacity: 1;
}

.i-close svg {
  border-radius: 50%;
  position: relative;
  padding: 5px;
  width: 100%;
  height: 100%;
  transition: 0.2s;
}

.i-close:hover svg {
  transform: scale(1.15);
}


.i-close--dark svg {
  --fill: #fff;
}

.i-close--dark:hover {
  background: #1c222b;
}

.cart-mini .i-close--dark:hover {
  background: #333c49;
}


.i-arrow {
  border-top: 1px solid var(--color-main);
  border-right: 1px solid var(--color-main);
  border-radius: 1px;
  display: inline-block;
  position: relative;
  width: 8px;
  height: 8px;
  margin: 0 3px;
  transform: rotate(45deg);
  transition: 0.2s;
  top: -1px;
  right: 0px;
}

.i-edit {
  position: relative;
  cursor: pointer;
  transition: 0.2s;
}

.f-inp {
  display: inline-block;
  border-radius: 16px;
  border: 1px solid incerit;
  padding: 16px 14px;
  width: 100%;
  font-size: 16px;
  font-weight: normal;
}

.w-scroll {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  overflow-x: auto;
  align-items: flex-start;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.w-scroll::-webkit-scrollbar {
  display: none;
}

.box {
  background: var(--box-bg);
  border-radius: var(--box-br);
  box-shadow: var(--box-shad);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  position: relative;
}

/* Box panel */
.box-panel {
  background: var(--box-cont-bg);
  border-radius: var(--box-br);
  box-shadow: var(--box-shad);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 15px;
  transform: translateY(-30px);
  transition: transform 0.3s var(--box-trs) 0s, opacity 0.4s ease 0s;
  pointer-events: none;
  opacity: 0;
}

.box-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* END Elements */

/* Animation */
.anim_items {
  -webkit-transform: translate(0, 30px);
  transform: translate(0, 30px);
  opacity: 0;
  -webkit-ransition: transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out;
}

.anim_items.anim_bottom {
  -webkit-transform: translate(0, 30px);
  transform: translate(0, 30px);
}

.anim_items.anim_top {
  -webkit-transform: translate(0, -30px);
  transform: translate(0, -30px);
}

.anim_items.anim_left {
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}

.anim_items.anim_right {
  -webkit-transform: translate(15%, 0);
  transform: translate(15%, 0);
}

.anim_items.animation {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* END Animation */

.hidden {
  display: none !important;
}

.top-line {
  border: 0;
  background-image: -webkit-linear-gradient(0deg,
      transparent,
      var(--yellow),
      var(--red),
      var(--pink),
      var(--purple),
      var(--blue),
      transparent);
  display: block;
  position: relative;
  top: -1px;
  z-index: 10;
  height: 0.25rem;
  opacity: 0.9;
  clear: both;
  pointer-events: none;
}

.dscroll-arrow {
  position: absolute;
  z-index: 20;
  margin-bottom: 0;
  width: 50px;
  height: 78px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s linear, visibility 0.2s linear, margin 0.2s linear,
    height 0.2s linear;
  transform: translate3d(0, 48px, 0);
  will-change: transform;
  cursor: pointer;
  display: none;
}

.dscroll-arrow.inited {
  display: block;
}

.dscroll-arrow.show {
  opacity: 0.6;
  visibility: visible;
}

.dscroll-arrow:hover {
  opacity: 0.9;
}

.dscroll-arrow-left {
  left: 0;
  margin-left: -50px;
  background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2042%2081%22%3E%3Cpath%20fill%3D%22%23535c69%22%20opacity%3D%220.3%22%20d%3D%22M0%2C0H1.023A40.977%2C40.977%2C0%2C0%2C1%2C42%2C40.977v0A40.024%2C40.024%2C0%2C0%2C1%2C1.977%2C81H0a0%2C0%2C0%2C0%2C1%2C0%2C0V0A0%2C0%2C0%2C0%2C1%2C0%2C0Z%22/%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M20.8%2C49.09l-8.014-8.576L20.8%2C31.939a0.762%2C0.762%2C0%2C0%2C0%2C0-1.026l-1.563-1.673a0.647%2C0.647%2C0%2C0%2C0-.959%2C0l-8.014%2C8.576h0L8.224%2C40a0.762%2C0.762%2C0%2C0%2C0%2C0%2C1.026L18.28%2C51.788a0.647%2C0.647%2C0%2C0%2C0%2C.959%2C0L20.8%2C50.116A0.761%2C0.761%2C0%2C0%2C0%2C20.8%2C49.09Z%22/%3E%3C/svg%3E") center left no-repeat;
}

.dscroll-arrow-left.show {
  margin-left: 0;
}

.dscroll-arrow-right {
  right: 0;
  left: auto;
  margin-right: -50px;
  background: url("data:image/svg+xml;charset=US-ASCII,%0A%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2042%2081%22%3E%3Cpath%20fill%3D%22%23535c69%22%20opacity%3D%220.3%22%20d%3D%22M40.024%2C0H42a0%2C0%2C0%2C0%2C1%2C0%2C0V81a0%2C0%2C0%2C0%2C1%2C0%2C0H40.977A40.977%2C40.977%2C0%2C0%2C1%2C0%2C40.024v0A40.024%2C40.024%2C0%2C0%2C1%2C40.024%2C0Z%22/%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M20.2%2C31.91l8.014%2C8.576L20.2%2C49.061a0.762%2C0.762%2C0%2C0%2C0%2C0%2C1.026l1.563%2C1.672a0.647%2C0.647%2C0%2C0%2C0%2C.958%2C0l8.014-8.576h0L32.776%2C41a0.762%2C0.762%2C0%2C0%2C0%2C0-1.025L22.72%2C29.212a0.647%2C0.647%2C0%2C0%2C0-.958%2C0L20.2%2C30.885A0.762%2C0.762%2C0%2C0%2C0%2C20.2%2C31.91Z%22/%3E%3C/svg%3E%0A") center right no-repeat;
}

.dscroll-arrow-right.show {
  margin-right: 0;
}