:root {
  --white: white;

  --text_main: #000000;
  --text_secondary: #798488;
  --text_accent: #ca4113;

  --border: #e3e7e7;

  /* Color styles */
  /* https://www.figma.com/community/plugin/816737626312049592/export-styles-to-css-variables */
  --white: #ffffff;
  --gray--90: #18191a;
  --gray--80: #303236;
  --gray--70: #484b50;
  --gray--60: #60646c;
  --gray--50: #797e88;
  --gray--40: #93979f;
  --gray--30: #aeb1b7;
  --gray--20: #c9cbcf;
  --gray--10: #e3e4e7;
  --gray--5: #eff0f1;
  --gray--1: #f4f5f5;
  --red--90: #400303;
  --red--80: #670404;
  --red--70: #960505;
  --red--60: #c20f0f;
  --red--50: #e22b29;
  --red--40: #f05b54;
  --red--30: #f7897c;
  --red--20: #f8b1a5;
  --red--10: #fed5cd;
  --blue--90: #061d31;
  --blue--80: #0a375b;
  --blue--70: #105184;
  --blue--60: #156daa;
  --blue--50: #1986cd;
  --blue--40: #2b9ce4;
  --blue--30: #61b4ea;
  --blue--20: #97ccf0;
  --blue--10: #d7ebf8;
  --blue--5: #e5f2fa;
  --blue--1: #f2f8fd;
  --green--90: #102902;
  --green--80: #194204;
  --green--70: #225905;
  --green--60: #2a7006;
  --green--50: #388707;
  --green--40: #41a10e;
  --green--30: #61bf26;
  --green--20: #a0db70;
  --green--10: #d8f3be;
  --accent--90: #3f1506;
  --accent--80: #65230c;
  --accent--70: #96310f;
  --accent--60----click: #ca4113;
  --accent--50----button: #ec612f;
  --accent--45----hover: #ff763c;
  --accent--40: #f58150;
  --accent--30: #f8a680;
  --accent--20: #f8c2a6;
  --accent--10: #fbdecc;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: var(--text_main);
}

body {
  margin: 0;
}

p {
  margin: 0;
}

@keyframes vex-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes vex-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.container {
  position: relative;
  height: 100%;
}

.box {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 1024px) {
  .content-box {
    flex-direction: column;
    align-items: start;
  }
}

/* CONTENT */

.content {
  position: relative;

  display: flex;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;

  padding: 32px 32px 20px;
}
.content.with-native-error {
  align-items: center;
  justify-content: space-between;
  background: #f1f3f3;
}

.space {
  flex-grow: 1;
}

.title {
  z-index: 2;
  margin-right: 72px;

  font-size: 18px;
  font-weight: 700;
  background-color: var(--white);
}

@media (min-width: 768px) {
  .title {
    margin-left: 8px;
  }
}

.controls {
  z-index: 2;
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 16px;

  /* width: min(100%, 460px);
  margin: 0 auto; */
}

/* .controls > * + * {
  margin-top: 16px;
} */

/* VARIANTS_BOX */

.variants_box {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 16px 20px;

  border-radius: 16px;
  border: 1px solid var(--gray--10);

  box-shadow: 0px 2.25px 8px 0px #051a2e0a;
  box-shadow: 0px 18px 36px 0px #051a2e1f;

  overflow: hidden;
  position: relative;

  /* max-width: 610px; */
  width: fit-content;
}

.variants_box:empty {
  display: none;
}

.variants_container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  width: fit-content; */
}

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

.variant.more-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  border: 1px solid #eeeeee;
  background-color: var(--white);
  overflow: hidden;
  transition: 0.3s ease;
}

.variant.more-button:hover {
  border-color: var(--gray--40);
  transition: 0.3s ease;
}

.variant.more-button svg {
  width: 24px;
  height: 24px;
  color: var(--gray--70);
}

.nav_button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.nav_button.prev {
  left: 4px;
}

.nav_button.next {
  right: 4px;
}

.nav_button svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  .variants_box {
    padding: 16px 0;
    width: fit-content;
    max-width: 100%;
  }

  .variant.more-button {
    display: none;
  }

  .variants_container {
    padding: 0 20px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .variants_container > .variants_container {
    padding: 0;
  }

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

  .nav_button {
    display: none;
  }
}

/* .variants_box > * + * {
  margin-left: 8px;
} */

.variant {
  flex-shrink: 0;
  flex: 0 0 64px;
  height: 64px;
  width: 64px;
  border-radius: 6px;
  border: 1px solid #eeeeee;
  background-color: var(--white);
  overflow: hidden;
  transition: 0.3s ease;
}

.variant:hover {
  border-color: var(--gray--40);
  transition: 0.3s ease;
}

.variant > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.variant.current {
  border-color: var(--gray--40);
}

.variant:not(.current) {
  cursor: pointer;
}

/* QR_CODE_BOX */

.qr_code_box {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  width: min(100%, 320px);

  border-radius: 16px;
  border: 1px solid var(--gray--10);
  background-color: var(--white);

  box-shadow: 0px 2.25px 8px 0px #051a2e0a;

  box-shadow: 0px 18px 36px 0px #051a2e1f;
}

#qrcode_text {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--gray--80);
}

/* VIEW_APP_BTN */

.view_app_link {
  flex-shrink: 1;
  display: flex;
  text-decoration: none;
  width: 100%;
}

.gallery_link {
  display: none;
  flex-shrink: 0;
  min-height: 56px;
  width: 135px;
  padding: 16px;

  border-radius: 12px;
  border: 1px solid var(--gray--50);

  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: black;
  background: white;
}

.view_app_btn {
  min-height: 56px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 8px 16px;

  border-radius: 12px;

  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: #f2f2f2;

  background: #313335;
  border: 0;
}

/* CAPTION */

.caption {
  text-align: center;
  font-size: 12px;
  color: var(--text_secondary);
}

@media (min-width: 1024px) {
  .caption {
    text-align: end;
    position: absolute;
    right: 32px;
    bottom: 32px;
  }
}

.link {
  color: var(--text_accent);
  text-decoration: none;
}

.hidden {
  display: none !important;
}

#powered_by {
  font-weight: 500;
  font-size: 11px;
  color: #9aa1a1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* MEDIA */

/* @media (max-width: 1023px) {
  .md_up {
    display: none;
  }
}

@media (min-width: 1024px) {
  .md_down {
    display: none;
  }
} */

/* OBJECT_VIEW */

.object_viewer {
  width: 100%;
  height: 100%;
}

.model_viewer {
  height: 100%;
  width: 100%;
}

.model_viewer > #ar-prompt {
  display: none;

  position: absolute;
  left: 50%;
  bottom: 25%;
  transform: translateX(-50%);
  animation: elongate 2s ease-in-out alternate infinite;
}

model-viewer[ar-status='session-started'] > #ar-prompt {
  display: block;
}

model-viewer > #ar-prompt > img {
  animation: circle 4s linear infinite;
}

model-viewer > #ar-failure {
  display: none;

  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

model-viewer[ar-tracking='not-tracking'] > #ar-failure {
  display: block;
}

model-viewer > *[slot='progress-bar'] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes elongate {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(-100px);
  }
}

@keyframes circle {
  from {
    transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);
  }
}

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

  height: 100%;
}

/* LOADER */

.loader_view {
  position: relative;
  width: 125px;
  height: 125px;
  transform: scale(0.6);
}

.circle {
  position: absolute;
  background-color: rgb(255, 255, 255);
  height: 22px;
  width: 22px;
  border-radius: 12px;
  animation-name: f_fadeG;
  animation-duration: 0.782s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

#circle_1 {
  left: 0;
  top: 51px;
  animation-delay: 0.2895s;
}

#circle_2 {
  left: 15px;
  top: 15px;
  animation-delay: 0.386s;
}

#circle_3 {
  left: 51px;
  top: 0;
  animation-delay: 0.4825s;
}

#circle_4 {
  right: 15px;
  top: 15px;
  animation-delay: 0.589s;
}

#circle_5 {
  right: 0;
  top: 51px;
  animation-delay: 0.6855s;
}

#circle_6 {
  right: 15px;
  bottom: 15px;
  animation-delay: 0.782s;
}

#circle_7 {
  left: 51px;
  bottom: 0;
  animation-delay: 0.8785s;
}

#circle_8 {
  left: 15px;
  bottom: 15px;
  animation-delay: 0.975s;
}

@keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}

@-o-keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}

@-ms-keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}

@-webkit-keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}

@-moz-keyframes f_fadeG {
  0% {
    background-color: rgb(147, 157, 159);
  }

  100% {
    background-color: rgb(255, 255, 255);
  }
}

.native_not_supported {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 24px;
  background-color: white;
  padding: 24px 20px;
}

.logos {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}

.logos img {
  max-width: 77px;
  aspect-ratio: 1/1;
}

.native_not_supported > p {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  margin-top: 32px;
}

.native_not_supported > a {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  word-wrap: break-word;
  margin-top: 16px;
  color: #156daa;
  text-decoration: none;
}

.native_not_supported > .redirect-copy {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background-color: #313335;
  color: white;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  outline: none;
  border: none;
  margin-top: 24px;
  cursor: pointer;
}

.redirect-copy-success {
  width: 100%;
  text-align: center;
  color: #61bf26;
  font-size: 18px;
  margin-top: 16px;
}

.dot {
  display: none;
}

.dim {
  background: #fff;
  border-radius: 4px;
  border: none;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.8);
  display: block;
  font-family: Futura, Helvetica Neue, sans-serif;
  font-size: 1em;
  font-weight: 700;
  max-width: 128px;
  overflow-wrap: break-word;
  padding: 0.5em 1em;
  position: absolute;
  width: max-content;
  height: max-content;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  --min-hotspot-opacity: 0;
}

@media only screen and (max-width: 800px) {
  .dim {
    font-size: 3vw;
  }
}

.dimensionLineContainer {
  pointer-events: none;
  display: block;
}

.dimensionLine {
  stroke: #16a5e6;
  stroke-width: 2;
  stroke-dasharray: 2;
}

.hide {
  display: none;
}

.toggle-button {
  width: fit-content;
  padding: 8px 16px;
  border-radius: 24px;
  border: 1px solid var(--gray--20);

  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: var(--gray--80);
  background-color: white;
  cursor: pointer;
  outline: none;
}
.toggle-el {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;

  width: 48px;
  height: 24px;

  border-radius: 100px;
  border: 2px solid var(--gray--20);

  background-color: transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.toggle-el::after {
  content: '';
  width: 16px;
  height: 16px;
  background-color: var(--gray--40);
  border-radius: 100%;
  flex-shrink: 0;
}
.toggle-el::before {
  display: none;
  content: '';
  position: absolute;
  left: 2px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.67587 7.98419C4.48741 7.81543 4.24183 7.72386 3.98839 7.72786C3.73496 7.73186 3.49242 7.83113 3.30942 8.00575C3.12642 8.18037 3.0165 8.41743 3.00171 8.66938C2.98692 8.92133 3.06835 9.16953 3.22967 9.36419L5.45922 11.6942C5.55257 11.7917 5.66474 11.8694 5.78899 11.9227C5.91325 11.976 6.04704 12.0037 6.18232 12.0042C6.31689 12.005 6.45024 11.9788 6.57446 11.9273C6.69867 11.8757 6.81122 11.7999 6.90542 11.7042L13.7146 4.70419C13.8069 4.60964 13.8796 4.49791 13.9286 4.37537C13.9775 4.25284 14.0018 4.12191 13.9999 3.99005C13.998 3.85819 13.9701 3.72799 13.9177 3.60688C13.8653 3.48577 13.7895 3.37612 13.6945 3.28419C13.5995 3.19227 13.4873 3.11986 13.3643 3.07112C13.2412 3.02238 13.1097 2.99824 12.9773 3.0001C12.8449 3.00196 12.7141 3.02977 12.5925 3.08194C12.4708 3.13412 12.3607 3.20964 12.2684 3.30419L6.19236 9.56419L4.67587 7.98419Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
}

.toggle-button.active .toggle-el {
  border-color: var(--gray--80);
  background-color: var(--gray--80);
  justify-content: flex-end;
}

.toggle-button.active .toggle-el::after {
  background-color: #ffffff;
}

.toggle-button.active .toggle-el::before {
  display: initial;
  color: #ffffff;
  left: 2px;
}

.toggle-button.small .toggle-el {
  width: 24px;
  height: 16px;
}

.toggle-button.small .toggle-el::before {
  display: none;
  content: '';
  background-image: none;
}

.toggle-button.small .toggle-el::after {
  width: 8px;
  height: 8px;
}