@import url(https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap);

#errorComponent{
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.errorComponent-mainContainer {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 860px;
}
.errorComponent-errorIcon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.errorComponent-errorIcon svg path{
  stroke: #71C2D1;
  fill: #71C2D1;
}
.errorComponent-errorT1{
  font-weight: 700;
  font-size: 24px;
  line-height: 20px;
  color: #535353;
  margin-bottom: 5px;
}
.errorComponent-errorT2{
  font-weight: 700;
  font-size: 24px;
  line-height: 20px;
  color: #535353;
  margin-bottom: 15px;
}
.errorComponent-errorT3{
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #535353;
}
.errorComponent-errorT3:hover{
  text-decoration: underline;
}
.errorComponent-doc{
  color: #737373;
  font-size: 14px;
}
.errorComponent-doc a{
  color: #0075ff;
  font-weight: bold;
  text-decoration: underline;
}
.errorComponent-exemplo{
  display: inline-flex;
  flex-direction: column;
  text-align: left;
}
.errorComponent-exemplo > p{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.errorComponent-exemplo > code{
  background-color: #ddd;
  border-radius: 5px;
  padding: 20px 15px;
  min-width: 500px;
  font-size: 16px;
}
.errorComponent-exemplo > code b{
  color: #f00;
}
.sugestao a{
  font-weight: bold;
  color: #0075ff;
}
.sugestao a:hover{
  text-decoration: underline;
}
@media (max-width: 1024px) {
.errorComponent-mainContainer {
    flex-direction: column;
}
}


.nuxt-progress {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 2px;
  width: 0%;
  opacity: 1;
  transition: width 0.1s, opacity 0.4s;
  background-color: black;
  z-index: 999999;
}
.nuxt-progress.nuxt-progress-notransition {
  transition: none;
}
.nuxt-progress-failed {
  background-color: red;
}

*{box-sizing: border-box;outline: none;-webkit-tap-highlight-color: rgba(0,0,0,0)}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;text-decoration:none;color:unset;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;border-radius:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color: unset;border: none;}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}ul{list-style:none;padding:0;margin:0}button{cursor:pointer}img{max-width:100%;height:auto}p,h1,h2,h3,h4,h5,h6{margin:0}

:root{
  /* Geral */
  --corPrincipalTexto: #373835;
  --corPadraoBotao: #2D2D2D;
  --corPadraoBotaoHover: #1c1c1c;
  --corPadraoTextoBotao: #fff;
  --textErrorColor: #f00;
  --bordaPadrao: 1px solid #EBEBEB;
  --bordaErroPadrao: 1px solid #f00;
  --sombraErroPadrao: 0 0 5px rgba(255, 0, 0, .5);
  --tamanhoFontePadrao: 14px;

  /* Grid */
  --weGridWidth: 1170px;

  /* Menu */
  --larguraMaxMenuMobile: 283px;

  /* Detalhe do produto */
  --btComprarCorFundo: #2D2D2D;
  --btComprarCorTexto: #FFF;
  --btComprarAltura: 52px;
  --btComprarLarguraMaxima: 395px;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 300ms;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}

.slideRight-enter{
  transform: translateX(100%);
}
.slideRight-leave-active,
.slideRight-enter-active{
  transition: 300ms;
}
.slideRight-leave-to{
  transform: translateX(100%);
}

.fadePage-enter-active {
  opacity: 0;
  transition-delay: 1s;
  transition: 2s;
}
.fadePage-leave,
.fadePage-enter-to  {
  opacity: 1;
}
.fadePage-leave-active {
  transition: 500ms;
}
.fadePage-leave-to,
.fadePage-enter {
  opacity: 0;
}

.zoomFade-enter-active {
  opacity: 0;
  transform: scale(.9);
  transition: 200ms;
}
.zoomFade-leave,
.zoomFade-enter-to  {
  transform: scale(1);
  opacity: 1;
}
.zoomFade-leave-active {
  transition: 200ms;
}
.zoomFade-leave-to,
.zoomFade-enter {
  transform: scale(.9);
  opacity: 0;
}


.slideFade-leave-active {
  transition: 500ms;
}
.slideFade-enter-active {
  transform: translateX(-30vw);
  opacity: 0;
  transition-delay: 500ms;
  transition: 1s;
}
.slideFade-leave,
.slideFade-enter-to  {
  transform: translateX(0);
  opacity: 1;
}
.slideFade-enter {
  transform: translateX(-30vw);
  opacity: 0;
}
.slideFade-leave-to {
  transform: translateX(10vw);
  opacity: 0;
}

html,
body {
	scroll-behavior: smooth;
	font-family: "Urbanist", sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input {
	font-family: "Urbanist", sans-serif;
	line-height: 1.14;
	color: var(--corPrincipalTexto);
	font-weight: 400;
	font-size: var(--tamanhoFontePadrao);
}

select {
	appearance: none;
	background-image: url([object Object]);
	background-repeat: no-repeat;
	background-position: right 20px center;
}

table {
	border-collapse: collapse;
	width: 100%;
}

table td,
table th {
	padding: 5px;
	border: 1px solid #ccc;
}

label[for],
button {
	cursor: pointer;
}

img,
a {
	user-drag: none;
	-webkit-user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

a {
	cursor: pointer;
}

.hidden {
	overflow: hidden;
}

.hide {
	display: none !important; /* <- possui o !important por ser uma classe absoluta */
}

.locked {
	overflow: hidden;
}

:root {
  --scrollbar-width-positive: 17px;
  --scrollbar-width-negative: -17px;
}

body.locked {
  overflow: hidden !important;
}
@media (min-width: 1024px) {
  /*
    Adicionar a classe .locked ao elemento <body> quando for necessário desabilitar o scroll no desktop,
    como em situações de abertura de pop-ups ou componentes laterais.
    Evitar o uso da classe .hidden e também evite alterar diretamente a propriedade overflow
    na tag. Use a classe .locked:

    Para adicionar a classe .locked:
    document.body.classList.add('locked');

    Para remover a classe .locked:
    document.body.classList.remove('locked');
  */
  body.locked,
  body[style="overflow: hidden"],
  body[style="overflow: hidden;"] {
    margin-right: var(--scrollbar-width-positive);
  }

  /*
    Adicionar .force-fill em elementos que ocupam a tela inteira,
    aqueles que estendem de canto a canto com background-color ou border,
    para garantir que eles continuem ocupando tudo mesmo quando o body estiver locked
  */
  body.locked .force-fill,
  body[style="overflow: hidden"] .force-fill,
  body[style="overflow: hidden;"] .force-fill {
    margin-right: var(--scrollbar-width-negative);
    padding-right: var(--scrollbar-width-positive);
  }
}