:root {
  --branco:#ffff;
  --coral:#F37160;
  --flamingo:#F69896;
  --concreto:#A7A9AC;
  --preto:#000000;
  --vermelho:#EF4126;
  --font-padrao:'Open Sans';
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  font-family: 'Open Sans';
  background-color: #F5F5F7;
}
header {
  background-color: transparent;
  transition: 2s;
  width: 100%;
}
.mainContentHeader {
  position: absolute;
  height: 50vw;
  width: 100%;
  z-index: -1;
}
.logoLoja > img {
  cursor: pointer;
  width: 300px;
}
.mainContentHeader {
  position: absolute;
  height: 40vw;
  width: 100%;
  z-index: 1;
}
/*header.scrolled {
  position: fixed;
  top: 0%;
  transition: 2s;
  color: black;
  width: 100%;
  z-index: 1000;
  background-color: white;
  height: 40px;
}*/
header.scrolled > #nav-bar > li > a {
  color: #6E6E73;
}
header.scrolled > #nav-bar > li > a:hover {
  color: #020202;
}
#logo2 {
  display: none;
}
#logo {
  position: absolute;
  left: -3%;
  width: 12%;
  top: -11px;
}
#menu-icon {
  display: none;
}
#fechar-menu {
  display: none;
  cursor: pointer;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F7;
}

::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #F37160;
}
#iconMenuMob {
  cursor: pointer;
  display: none;
}
.menu {
position: absolute;
left: 50%;
transform: translate(-50%);
width: max-content;
top: 27%;
z-index: 1;
}
#categs {
display: none;
position: absolute;
background: white;
/* border: 1px solid; */
width: 100%;
border-radius: 10px;
box-shadow: -1px 0px 5px;
z-index: 1;
padding: 25px;
margin-top: 15px;
overflow-x: auto;
max-height: 480px;
}
ul {
list-style: none;
}
li {
cursor: pointer;
}
#iconMenuMob {
cursor: pointer;
}
nav > ul {
display: flex;
}
li > a {
text-decoration: none;
color: #555555;
padding: 15px;
transition: 0.8s;
}
li > a:hover {
transition: 0.8s;
text-decoration: underline;
}
#categs > li>a {
padding: 8px;
border-radius: 5px;
}
#categs > li {
margin: 20px;
}
#categs > li>a:hover {
transition: 0.8s;
background-color: #F37160;
color: white;
text-decoration: none;
}
.categorias {
display: none;
}
.categStatic {
display: none;
position: absolute;
background: white;
/* border: 1px solid; */
width: 100%;
border-radius: 10px;
box-shadow: -1px 0px 5px;
z-index: 1;
padding: 25px;
margin-top: 15px;
overflow-x: auto;
max-height: 480px;
}
.subCategAll {
display: none;
position: absolute;
left: 35%;
transform: translate(-35%);
top: 5%;
}
.subCategAll > li {
cursor: pointer;
margin: 20px;
}
.subCategAll > li > a {
font-weight: 700;
padding: 10px;
}
.subCategAll > li > a:hover {
border-radius: 5px;
transition: 0.8s;
background-color: #F37160;
color: white;
text-decoration: none;
}
#categs {display: none;}
#menuToggle {
display: none;
}
/* Wrapper principal do menu */
.menu-wrapper {
z-index: 1;
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: max-content;
top: 53%;
}

/* Ícone de hambúrguer */
.menu-wrapper > .hamburger-icon {
font-size: 30px;
cursor: pointer;
display: none; /* Não mostrar o ícone em telas grandes */
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}

/* Estilos principais do menu */
.menu-wrapper > nav > ul {
list-style: none;
padding: 0;
margin: 0;
}

.menu-wrapper > nav > ul > li {
cursor: pointer;
padding: 10px 0;
}

.menu-wrapper > nav > ul > li > a {
text-decoration: none;
color: #555555;
padding: 15px;
display: inline-block;
width: 100%;
transition: background 0.3s;
}

.menu-wrapper > nav > ul > li > a:hover {
background-color: #f37160;
color: white;
}

/* Estilos para lista de subcategorias */
.menu-wrapper > nav > ul > li > ul.subcategory-list {
display: none;
position: absolute;
left: 25%;
transform: translate(-25%);
top: 5%;
max-height: 445px;
overflow-y: auto;
width: auto;
}

/* Estilos para subcategorias */
.menu-wrapper > nav > ul > li > ul.subcategory-list > li {
padding: 10px 0;
}

.menu-wrapper > nav > ul > li > ul.subcategory-list > li > a {
text-decoration: none;
color: #333;

display: block;
}

/* Estilo do container das categorias */
.menu-wrapper > nav > ul > li > ul#category-list {
display: none;
position: absolute;
background: white;
width: 100%;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 20px;
margin-top: 15px;
max-height: 445px;
overflow-y: auto;
}
#category-list > li > a {
text-decoration: none;
color: #555555;
padding: 15px;
display: inline-block;
width: 100%;
transition: background 0.3s;
}
#category-list ul > li > a {
text-decoration: none;
color: #555555;
padding: 15px;
display: inline-block;
width: 100%;
transition: background 0.3s;
}
#icone-pesquisa {
  width: 22px;
  height: 24px;
  position: fixed;
  left: 112%;
  transform: translate(-112%);
  top: 1px;
}
#carrinho-compras {
  width: 32px;
  height: 34px;
  position: fixed;
  left: 110%;
  transform: translate(-120%);
  top: -6px;
}
/*span#quantidadeCarrinho {
position: absolute;
left: 111%;
transform: translate(-111%);
background: black;
color: white;
padding: 3px;
font-size: 12px;
border-radius: 51%;
cursor: pointer;
}*/
#sec-header {
  width: 849px;
  height: 342px;
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translate(-50%);
}
#sec-header > h1 {
  font-weight: lighter;
  font-size: 49px;
  color: #020202;
  line-height: 62px;
}
#sec-header > h1 > strong {
  font-weight: 500;
  transition: 1s;
}
#sec-header > h1 > strong:hover {
  transition: 1s;
  color: #F37160;
}
div#banners {
height: 370px;
position: relative;
top: 300px;
width: 1200px;
left: 18%;
cursor: pointer;
}
.banner {
display: none;
width: 100%;
height: 100%;
}
.banner.active > img {
width: 1200px;
}
.banner.active {
display: block;
}

#progress {
display: flex;
justify-content: center;
margin-top: 50px;
}

.progress-dot {
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #ddd;
}

.progress-dot.active {
background-color: #333;
}
#banners > #nextBtn1 {
right: -145px;
}
#banners > #prevBtn1 {
left: -145px;
}
#banners > button {
background-color: transparent;
}
.sliderBanner-header {
background-color: #EF4126;
height: 41px;
}
.messageHeader {
    position: absolute;
    left: 16%;
    top: 10%;
    width: fit-content;
}
.messageHeader > p {
    width: fit-content;
    font-size: 18px;
    font-style: italic;
}
.linksHeader {
width: fit-content;
position: absolute;
left: 60%;
transform: translate(-60%);
top: 8%;
}
.linksHeader > ul {
display: flex;
}
.linksHeader > ul > li {
padding-right: 35px;
}
.linksHeader > ul > li > a {
font-size: 14px;
}
.linksHeader > ul > li > a:hover {
text-decoration: underline;
}
.icons-mediaHeader {
width: fit-content;
position: absolute;
left: 75%;
transform: translate(-75%);
top: 8%;
}
.icons-mediaHeader > ul {
display: flex;
}
.icons-mediaHeader > ul > li {
padding-right: 15px;
}
.icons-mediaHeader > ul > li > img {
cursor: pointer;
}
.icons-mediaHeader > ul > li > img:hover {
transition: 0.8s;
transform: translateY(-10px);
}
.logo-header {
position: absolute;
left: 17%;
transform: translate(-17%);
top: 13%;
width: fit-content;
}
.logo-header > a > img {
cursor: pointer;
width: 12vw;
}
.search-input {
position: absolute;
left: 45%;
transform: translate(-45%);
top: 15%;
width: fit-content;
height: auto;
z-index: 10;
}
.search-input > input {
border: 1px solid #A8A8A8;
background-color: transparent;
width: 40vw;
padding: 15px;
border-radius: 30px;
}
.search-input > button {
  background-color: transparent;
  display: block;
  position: relative;
  left: 95%;
  top: -35px;
  border: none;
}
div#suggestions-container {
display: none;
background-color: white;
width: 35vw;
box-shadow: -1px -1px 3px black;
height: auto;
z-index: 1;
position: relative;
top: -40px;
left: 50%;
transform: translate(-50%);
border-radius: 5px;
padding: 20px;
max-height: 455px; /* Limita a altura máxima da lista */
overflow-y: auto;  /* Adiciona barra de rolagem se necessário */
}
#suggestions-container > ul > li {
padding: 15px;
border-bottom: 1px solid;
margin-bottom: 15px;
}
/* Estilo da lista de sugestões */
#suggestions-container ul {
list-style-type: none;
padding: 0;
margin: 0;
}

/* Estilo dos itens da lista */
#suggestions-container ul li {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #eee;
}

/* Efeito de hover nos itens */
#suggestions-container ul li:hover {
background-color: #f0f0f0;
}

/* Último item sem borda inferior */
#suggestions-container ul li:last-child {
border-bottom: none;
}
.notCad {
width: fit-content;
position: absolute;
left: 75%;
transform: translate(-75%);
top: 15%;
}
.notCad > p {
font-weight: 300;
font-size: 16px;
}
.notCad > p > a {
font-weight: 300;
font-size: 16px;
text-decoration: underline;
}
#userLog {display: none;}
.carrinho {
width: fit-content;
position: absolute;
left: 80%;
transform: translate(-80%);
top: 16%;
}
.carrinho > span {
background: black;
color: white;
padding: 3px;
font-size: 12px;
border-radius: 51%;
cursor: pointer;
position: relative;
top: -8px;
}
.linhaAbInp {
border: 1px solid #e0e0e0;
width: 70vw;
position: absolute;
left: 50%;
transform: translate(-50%);
top: 24%;
}
.linhaAbNav {
border: 1px solid #e0e0e0;
width: 70vw;
position: absolute;
left: 50%;
top: 32%;
transform: translate(-50%);
}
.content-carrousel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 335px;
}
#wrapper {
  width: 100%;
  max-width: 1127px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  top: 435px;
  cursor: pointer;
}
main {
    position: relative;
    top: 300px;
    z-index: 2;
}
#carrinho-vazio {
    height: 165px;
    width: 24%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 135px;
}
#tlt-vazio {
  font-size: 40px;
  font-weight: 600;
  text-align: center;
}
#pr-vazio {
  font-size: 17px;
  font-weight: 400;
  text-align: center;
}
#carrinho-vazio > button {
    cursor: pointer;
    font-size: 18px;
    border: 1px solid #F37160;
    color: #F37160;
    background-color: white;
    width: 60%;
    height: 61px;
    border-radius: 5px;
    position: relative;
    top: 40px;
    left: 50%;
    transform: translate(-50%);
    transition: 0.8s;
}
#carrinho-vazio > button:hover {
    transition: 0.8s;
    color: #F5F5F7;
    background-color: #EF4126;
}
#totalCarrinho {
    display: none;
    width: 1156px;
    height: 180px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 10px;
    border-bottom: 1px solid black;
}
#totalCarrinho > h1 {
    font-weight: 600;
    font-size: 40px;
    position: relative;
    left: 22%;
    width: fit-content;
}
#voltar {
    border: 1px solid #EF4126;
    color: #EF4126;
    background-color: white;
    box-shadow: -1px 2px 8px #000000a3;
    padding: 18px 28px 18px 28px;
    border-radius: 5px;
    position: relative;
    top: 50px;
    left: 45%;
    transform: translate(-45%);
    transition: 0.8s;
    font-weight: 500;
    font-size: 17px;
}
#voltar:hover {
    transition: 0.8s;
    background-color: #EF4126;
    color: white;
}
.produto-carrinho {
    position: relative;
    width: 1132px;
    left: 50%;
    transform: translate(-50%);
    top: 220px;
    border-bottom: 1px solid black;
}
.produto-carrinho > img {
    position: relative;
    left: 5%;
    transform: translate(-5%);
    top: 50px;
    width: 380px;
    height: 380px;
    border-radius: 12px;
    box-shadow: -1px 3px 8px black;
}
.remover-produto {
    cursor: pointer;
    border: none;
    background-color: #F5F5F7;
    text-decoration: underline;
    color: #F37160;
    font-size: 17px;
    font-weight: 400;
    position: relative;
    left: 90%;
    transform: translate(-90%);
    top: -318px;
}
h2.nomeProduto {
    position: relative;
    left: 50%;
    width: 20%;
    transform: translate(-50%);
    top: -295px;
}
p.qnt {
    width: fit-content;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    top: -280px;
}
p.sub {
    width: fit-content;
    position: relative;
    left: 90%;
    transform: translate(-90%);
    top: -342px;
    font-size: 24px;
    font-weight: 500;
}
#quantidadeProduto > input {
  text-align: center;
}
#resumo-compra {
    display: none;
    width: 635px;
    height: 271px;
    position: relative;
    top: 410px;
    left: 50%;
    transform: translate(-50%);
    padding: 15px;
}
.prResumo {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 20px;
}
#ladoDireito {
    width: 30%;
    height: 59px;
    position: relative;
    left: 100%;
    transform: translate(-100%);
    top: -110px;
}
span#totalDesconto {
    position: relative;
    top: -38px;
}
#totalComp {
    position: relative;
    top: 43px;
    font-size: 24px;
    font-weight: bold;
    left: -8px;
}
span#totalItens {
    position: relative;
    top: 22px;
    left: 0%;
}
#btnsResumo {
    width: 47%;
    position: absolute;
    left: 90%;
    transform: translate(-90%);
}
.btnResumo {
    font-size: 17px;
    font-weight: 500;
    padding: 18px 26px 18px 26px;
}
#voltarInicio {
    background-color: #F37160;
    color: white;
    border-radius: 5px;
    transition: 0.8s;
}
#voltarInicio:hover {
    transition: 0.8s;
    background-color: #EF4126;
}
#btnAvancar {
    background-color: white;
    border: 1px solid #EF4126;
    border-radius: 5px;
    color: #EF4126;
    transition: 0.8s;
}
#btnAvancar:hover {
    transition: 0.8s;
    background-color: #EF4126;
    color: white;
}
#cupomDesconto {
    width: 304px;
    height: 71px;
    position: relative;
    left: -5%;
    top: -35px;
}
#cupomDesconto > label {
    font-size: 17px;
    font-weight: 500;
}
#cupomDesconto > input {
    width: 210px;
    height: 40px;
    padding: 15px;
    font-size: 17px;
    margin-top: 10px;
}
#cupomDesconto > button {
    cursor: pointer;
    width: 72px;
    height: 40px;
    background-color: #EF4126;
    color: white;
    border-radius: 5px;
    border: none;
    font-weight: 600;
    font-size: 14px;
}
#avisoGeral {
    display: none;
}
#erroCarrinho {
    display: none;
}
.notifications-container {
    width: 320px;
    height: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: fixed;
    left: 90%;
    transform: translate(-90%);
    top: 60px;
  }
  
  .flex {
    display: flex;
  }
  
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  
  .error-alert {
    border-radius: 0.375rem;
    padding: 1rem;
    background-color: rgb(254 242 242);
    border: 1px solid #f37160;
  }
  
  .error-svg {
    color: #F87171;
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .error-prompt-heading {
    color: #991B1B;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: bold;
  }
  
  .error-prompt-container {
    display: flex;
    flex-direction: column;
    margin-left: 1.25rem;
  }
  
  .error-prompt-wrap {
    margin-top: 0.5rem;
    color: #B91C1C;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .error-prompt-list {
    padding-left: 1.25rem;
    margin-top: 0.25rem;
    list-style-type: disc;
  }

  .flex {
    display: flex;
  }
  
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  
  .success {
    padding: 1rem;
    border-radius: 0.375rem;
    background-color: rgb(240 253 244);
    border: 1px solid rgb(22 101 52);
  }
  
  .succes-svg {
    color: rgb(74 222 128);
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .success-prompt-wrap {
    margin-left: 0.75rem;
  }
  
  .success-prompt-heading {
    font-weight: bold;
    color: rgb(22 101 52);
  }
  
  .success-prompt-prompt {
    margin-top: 0.5rem;
    color: rgb(21 128 61);
  }
  
  .success-button-container {
    display: flex;
    margin-top: 0.875rem;
    margin-bottom: -0.375rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: absolute;
    left: 25%;
    top: -10px;
}
  
  .input {
    border-style: none;
    height: 40px;
    width: 50px;
    padding: 10px;
    outline: none;
    border-radius: 50%;
    transition: .5s ease-in-out;
    background-color: transparent;
    box-shadow: 0px 0px 3px transparent;
    padding-right: 40px;
    color: #020202;
  }
  
  .input::placeholder,
  .input {
    font-size: 17px;
  }
  
  .input::placeholder {
    color: #8f8f8f;
  }
  
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    outline: none;
    border-style: none;
    border-radius: 50%;
    pointer-events: painted;
    background-color: transparent;
    transition: .2s linear;
  }
  
  .icon:focus ~ .input,
  .input:focus {
    box-shadow: none;
    width: 250px;
    border-radius: 0px;
    background-color: transparent;
    border-bottom: 2px solid #020202;
    transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
  }
#sugestoes {
    display: none;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 10px;
    height: auto;
    overflow-y: auto;
    width: 250px;
    border-radius: 3px;
    position: absolute;
    top: 35px;
    left: 20%;
    transition: 0.8s;
    background-color: white;
    z-index: 1000; /* Valor alto para garantir sobreposição */
}
#sugestoes:hover {
    transition: 0.8s;  
    box-shadow: 1px 1px 4px black;  
} 
#sugestoes ul {
    list-style-type: none; /* Remova os marcadores de lista */
    padding: 0;
}

#sugestoes li {
    margin-bottom: 5px;
    cursor: pointer;
    border-bottom: 1px solid;
    height: 27px;
}

#sugestoes li:hover {
    background-color: #f0f0f0; /* Mude a cor de fundo ao passar o mouse sobre os itens */
}