@charset "UTF-8";
/* =============================================
   loja.css  –  Flame You
   Arquivo em: src/pages/loja/loja.css
   ============================================= */
/* ── LAYOUT GERAL ── */
.lojaWrapper {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
}

/* ── FILTRO LATERAL ── */
.lojaFiltro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2.5rem;
  width: 100%;
  max-width: -moz-max-content;
  max-width: max-content;
  height: calc(100vh - 6rem - 5.5rem - 5.5rem);
  padding: 2.5rem 0;
  background-color: #1B1512;
  border: 1px solid var(--baseSoft);
  position: sticky;
  top: 11.5rem; /* abaixo do header fixo */
}
@media screen and (max-width: 1024px) {
  .lojaFiltro {
    display: none;
  }
}

.filtroTopo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2.5rem;
}

.lojaFiltroTitulo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--fontTitulos);
  font-size: 1.375rem;
  height: 1.375rem;
  font-weight: bold;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
}

.filtroTopoTitulo {
  display: flex;
  align-items: center;
  font-family: var(--fontTitulos);
  font-size: 2.25rem;
  height: 2.25rem;
  font-weight: bold;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
}

.filtroTopoContador {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  height: 1.375rem;
  color: #FFD700;
  text-shadow: var(--textShadow-Black);
  font-weight: bold;
}

.wrapperScroll {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2.5rem;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 0 2.5rem;
  padding-bottom: 5.5rem;
}

.overlayWrapperScroll {
  position: absolute;
  inset: 0;
  top: 6.375rem;
  bottom: 8.25rem;
  background-image: linear-gradient(180deg, transparent, transparent, #1B1512);
  pointer-events: none !important;
}

.lojaFiltroGrupo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.lojaFiltroLabel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--fontTitulos);
  font-size: 1rem;
  height: 1rem;
  font-weight: bold;
  color: var(--white);
}

.lojaFiltroOpcoes {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.lojaFiltroBtn {
  all: unset;
  outline: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: bold;
  color: var(--color1);
  border: 1px solid transparent;
  text-shadow: var(--textShadow-Black);
  transition: 0.7s ease-in-out;
}

.lojaFiltroBtn:hover,
.lojaFiltroBtn:focus {
  color: var(--white);
  border-color: var(--baseSoft);
  transition: 0.3s ease-in-out;
}

.lojaFiltroBtn.ativo {
  color: var(--white);
  border: 1px solid var(--color1);
  background-color: var(--baseSoft025);
  transition: 0.3s ease-in-out;
}

/* Faixa de preço */
.lojaFiltroPrecos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1.125rem;
}

.lojaFiltroPrecoInput {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.lojaFiltroPrecoInput label {
  font-size: 0.8125rem;
  color: var(--color1);
}

.lojaFiltroPrecoInput input {
  all: unset;
  outline: none !important;
  width: 100%;
  max-width: 100px;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: bold;
  color: var(--color1);
  background-color: #1B1512;
  border: 1px solid var(--white);
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  transition: 0.7s ease-in-out;
  box-sizing: border-box !important;
}

.lojaFiltroPrecoInput input:hover,
.lojaFiltroPrecoInput input:focus {
  color: var(--white);
  border-color: var(--color1);
  transition: 0.3s ease-in-out;
}

/* Botão limpar */
.lojaFiltroClear {
  all: unset;
  cursor: pointer;
  outline: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: -moz-max-content;
  max-width: max-content;
  height: 3.25rem;
  min-height: 3.25rem;
  padding: 0 2.25rem;
  margin: 0 2.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: #dc3545;
  border: 1px solid #dc3545;
  background-color: #1B1512;
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.07) 25%, rgba(220, 53, 69, 0.07) 75%);
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  transition: 0.7s ease-in-out;
}
.lojaFiltroClear .myBtnDiceLogo {
  transform: rotateZ(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  transition: 0.7s ease-in-out;
}

.lojaFiltroClear:hover,
.lojaFiltroClear:focus {
  color: var(--white);
  border-color: var(--color1);
  transition: 0.3s ease-in-out;
}
.lojaFiltroClear:hover .myBtnDiceLogo,
.lojaFiltroClear:focus .myBtnDiceLogo {
  transform: rotateZ(135deg);
  transition: 0.3s ease-in-out;
}

/* ── CONTEÚDO DA LOJA ── */
.lojaConteudo {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  flex: 1;
  min-width: 0;
}

/* Grid de cards — sobrescreve o padrão do styles.css para a loja */
.lojaConteudo .gridCardsArticle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 1.125rem;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .lojaConteudo .gridCardsArticle {
    grid-template-columns: repeat(1, 1fr);
  }
}

.gridArticle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #1B1512;
  border: 1px solid var(--black);
  transition: 0.7s ease-in-out;
}
.gridArticle .desconto {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  height: 2rem;
  min-width: -moz-max-content;
  min-width: max-content;
  padding: 0.5rem;
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  font-weight: bold;
  background-color: #1B1512;
  color: var(--color1);
  border: 1px solid var(--white);
  transition: 0.7s ease-in-out;
}
.gridArticle .descontoVermelho {
  color: #dc3545;
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
  border: 1px solid #dc3545;
  transition: 0.3s ease-in-out;
}
.gridArticle .descontoAmarelo {
  color: #FFE7A0;
  background-image: linear-gradient(90deg, rgba(255, 231, 160, 0.25) 25%, rgba(255, 231, 160, 0.25) 75%);
  border: 1px solid #FFE7A0;
  transition: 0.3s ease-in-out;
}
.gridArticle .descontoVerde {
  color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
  border: 1px solid #A8E4A0;
  transition: 0.3s ease-in-out;
}
.gridArticle .containerImg {
  position: relative;
  display: inline-block; /* Faz o container ter exatamente o tamanho da imagem */
}
.gridArticle .containerImg img {
  display: block; /* Remove um pequeno espaço vazio que imagens costumam ter na base */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.gridArticle .containerImg .overlayImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--black025);
  pointer-events: none;
  transition: 0.7s ease-in-out;
}
.gridArticle .gridContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-image: linear-gradient(90deg, rgba(168, 101, 35, 0.07) 25%, rgba(168, 101, 35, 0.07) 75%);
  border-top: 1px solid var(--black);
}
.gridArticle .gridContent .wrapperTitleAndCategory {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  height: 100%;
  max-height: -moz-max-content;
  max-height: max-content;
}
.gridArticle .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: -moz-max-content;
  max-width: max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.gridArticle .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle .gridDiceLogo {
  transform: rotateZ(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  transition: 0.7s ease-in-out;
}
.gridArticle .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontTitulos);
  font-size: 1rem;
  height: 1rem;
  min-width: -moz-max-content;
  min-width: max-content;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  font-weight: bold;
  -webkit-text-decoration: underline solid var(--white);
          text-decoration: underline solid var(--white);
  transition: 0.7s ease-in-out;
}
.gridArticle .gridContent .wrapperTitleAndCategory .category {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  height: 1rem;
  min-width: -moz-max-content;
  min-width: max-content;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.gridArticle .gridContent .wrapperParagAndPrice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  height: 100%;
  max-height: -moz-max-content;
  max-height: max-content;
  gap: 1rem;
}
.gridArticle .gridContent .wrapperParagAndPrice p {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
  font-weight: lighter;
}
.gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: 100%;
  max-width: -moz-max-content;
  max-width: max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
.gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contador {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 6.75rem;
  max-width: 6.75rem;
  font-size: 0.75rem;
  height: 1.75rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  padding: 0.5rem;
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  background-color: #1B1512;
  color: var(--color1);
  border: 1px solid var(--white);
  transition: 0.7s ease-in-out;
}
@media screen and (max-width: 1024px) {
  .gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contador {
    min-width: -moz-max-content;
    min-width: max-content;
    max-width: -moz-max-content;
    max-width: max-content;
  }
}
.gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contadorVermelho {
  color: #dc3545;
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
  border: 1px solid #dc3545;
  transition: 0.3s ease-in-out;
}
.gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contadorAmarelo {
  color: #FFE7A0;
  background-image: linear-gradient(90deg, rgba(255, 231, 160, 0.25) 25%, rgba(255, 231, 160, 0.25) 75%);
  border: 1px solid #FFE7A0;
  transition: 0.3s ease-in-out;
}
.gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .contadorVerde {
  color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
  border: 1px solid #A8E4A0;
  transition: 0.3s ease-in-out;
}
.gridArticle .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .price {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  height: 1rem;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
  font-weight: bold;
  transition: 0.7s ease-in-out;
}
.gridArticle .gridContent .btnCarrinho {
  all: unset;
  outline: unset !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2rem;
  padding: 0.5rem;
  font-size: 1rem;
  color: var(--color1);
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  font-weight: bold;
  background-color: #1B1512;
  border: 1px solid var(--white);
  transition: 0.7s ease-in-out;
}
.gridArticle .gridContent .btnCarrinho:hover,
.gridArticle .gridContent .btnCarrinho:focus {
  color: var(--white);
  border-color: var(--color1);
  transition: 0.3s ease-in-out;
}
.gridArticle .gridContent .btnCarrinhoAtivo {
  color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
  border: 1px solid #A8E4A0;
  transition: 0.3s ease-in-out;
}
.gridArticle .gridContent .btnCarrinhoAtivo:hover,
.gridArticle .gridContent .btnCarrinhoAtivo:focus {
  color: var(--white);
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
  border: 1px solid var(--color1);
  transition: 0.3s ease-in-out;
}

/* :hover nos cards */
.gridArticle:hover .overlayImg,
.gridArticle:focus .overlayImg {
  background-color: rgba(233, 163, 25, 0.07);
  transition: 0.3s ease-in-out;
}
.gridArticle:hover .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle .gridDiceLogo,
.gridArticle:focus .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle .gridDiceLogo {
  transform: rotateZ(135deg);
  transition: 0.3s ease-in-out;
}
.gridArticle:hover .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle h2,
.gridArticle:focus .gridContent .wrapperTitleAndCategory .wrapperDiceAndTitle h2 {
  color: var(--white);
  text-decoration-color: var(--color1);
  text-underline-offset: 0.25rem;
  transition: 0.3s ease-in-out;
}
.gridArticle:hover .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .price,
.gridArticle:focus .gridContent .wrapperParagAndPrice .wrapperUrgenciaAndPrice .price {
  color: var(--color1);
  transition: 0.3s ease-in-out;
}

/* Mensagem sem resultados */
.lojaSemResultados {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  font-size: 1rem;
  color: var(--color1);
  font-weight: lighter;
  border: 1px solid var(--baseSoft);
}

/* Carrinho Completo */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--black075);
  background-image: linear-gradient(90deg, rgba(168, 101, 35, 0.07) 25%, rgba(168, 101, 35, 0.07) 75%);
  z-index: 98;
  /* Estado inicial: Invisível */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease-in-out;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: calc(26.1738125rem + 1px); /* Ajuste conforme sua necessidade */
  height: 100%;
  z-index: 99;
  display: flex; /* Pode manter o flex aqui fixo */
  flex-direction: column;
  background-color: #1B1512;
  border-left: 1px solid var(--color1);
  /* Estado inicial: Escondido para a direita */
  opacity: 0;
  transform: translateX(100%);
  transition: 0.7s ease-in-out;
}

/* Classes que serão adicionadas via JS */
.overlay.active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease-in-out;
}

.drawer.active {
  opacity: 1;
  transform: translateX(0);
  transition: 0.3s ease-in-out;
}

.carrinhoHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 6rem;
  background-color: #1B1512;
  background-image: linear-gradient(90deg, rgba(168, 101, 35, 0.07) 25%, rgba(168, 101, 35, 0.07) 75%);
  border-bottom: 1px solid var(--color1);
}

.carrinhoTitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--fontTitulos);
  font-size: 1.375rem;
  height: 1.375rem;
  font-weight: bold;
  color: var(--white);
}
.carrinhoTitulo div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  width: 1.375rem;
  height: 1.375rem;
}

.carrinhoFechar {
  all: unset;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color1);
  font-weight: bold;
  font-size: 2.25rem;
  height: 2.25rem;
  transition: 0.7s ease-in-out;
}

.drawer.active .carrinhoHeader .carrinhoFechar {
  display: flex !important;
}

.carrinhoFechar:hover,
.carrinhoFechar:focus {
  color: var(--white);
  transition: 0.3s ease-in-out;
}

.carrinhoLista {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  background-color: #1B1512;
}

.carrinhoVazio {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
  font-size: 1rem;
  height: 100%;
}

.carrinhoItem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: -moz-max-content;
  height: max-content;
  padding: 1rem;
  background-color: #1B1512;
  border: 1px solid var(--baseSoft);
}

.carrinhoItemImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  opacity: 0.12;
}

.carrinhoItemInfo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.125rem;
  width: 100%;
  height: 100%;
  flex: 1;
}

.carrinhoItemTitulo {
  font-size: 1rem;
  height: 1rem;
  font-weight: bold;
  color: var(--white);
}

.carrinhoItemPreco {
  font-size: 1rem;
  height: 1rem;
  font-weight: bold;
  color: var(--color1);
}

.carrinhoItemRemover {
  all: unset;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc3545;
  font-weight: bold;
  font-size: 1.375rem;
  height: 1.375rem;
  transition: 0.7s ease-in-out;
}

.carrinhoItemRemover:hover,
.carrinhoItemRemover:focus {
  color: var(--white);
  transition: 0.3s ease-in-out;
}

.carrinhoFooter {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4.6875rem 2.5rem;
  background-color: #1B1512;
  background-image: linear-gradient(90deg, rgba(168, 101, 35, 0.07) 25%, rgba(168, 101, 35, 0.07) 75%);
  border-top: 1px solid var(--color1);
}

.drawer.active .carrinhoFooter {
  gap: 1.125rem;
  padding: 2.5rem;
}

.carrinhoTotalWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carrinhoTotalLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  height: 1.375rem;
  font-weight: bold;
  color: var(--white);
}

.carrinhoTotalValor {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  height: 1.375rem;
  font-weight: bold;
  color: var(--color1);
}

.carrinhoAcoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
}

.carrinhoAcoes .myBtn {
  all: unset;
  outline: unset !important;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: -moz-max-content;
  width: max-content;
  height: 3.25rem;
  padding: 0 2.25rem;
  font-size: 1rem;
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  font-weight: bold;
  background-color: #1B1512;
  color: #dc3545;
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
  border: 1px solid #dc3545;
  transition: 0.7s ease-in-out;
}

.drawer.active .carrinhoFooter .carrinhoAcoes .myBtn {
  display: flex !important;
}

.carrinhoAcoes .myBtn:last-child {
  color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
  border: 1px solid #A8E4A0;
}

.carrinhoAcoes .myBtn .myBtnDiceLogo {
  transform: rotateZ(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  transition: 0.7s ease-in-out;
}

.carrinhoAcoes .myBtn:hover,
.carrinhoAcoes .myBtn:focus {
  color: var(--white);
  border: 1px solid var(--color1);
  transition: 0.3s ease-in-out;
}

.carrinhoAcoes .myBtn:hover .myBtnDiceLogo,
.carrinhoAcoes .myBtn:focus .myBtnDiceLogo {
  transform: rotateZ(135deg);
  transition: 0.3s ease-in-out;
}

/* ── TOASTS ──────────────────────────────────────────────────*/
.fyToastContainer {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  pointer-events: none;
}

.fyToast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  font-family: "Nunito";
  font-size: 0.9375rem;
  font-weight: bold;
  background-color: #1B1512;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.fyToast--visivel {
  opacity: 1;
  transform: translateY(0);
}

.fyToastIcone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
  flex-shrink: 0;
}

.fyToast--sucesso {
  color: #A8E4A0;
  border: 1px solid #A8E4A0;
  box-shadow: var(--boxShadow-Black), 0 0 0.5rem rgba(168, 228, 160, 0.25);
}

.fyToast--sucesso .fyToastIcone {
  background-color: rgba(168, 228, 160, 0.2);
}

.fyToast--aviso {
  color: #FFE7A0;
  border: 1px solid #FFE7A0;
  box-shadow: var(--boxShadow-Black), 0 0 0.5rem rgba(255, 231, 160, 0.25);
}

.fyToast--aviso .fyToastIcone {
  background-color: rgba(255, 231, 160, 0.2);
}

/* ── MODAL DE CONFIRMAÇÃO ────────────────────────────────────*/
.fyModal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: var(--black075);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

.fyModal--aberto {
  opacity: 1;
  pointer-events: all;
}

.fyModalContent {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 22rem;
  padding: 2rem;
  background-color: #1B1512;
  background-image: var(--linearFullColors);
  border: 1px solid var(--color1);
  box-shadow: var(--boxShadow1VarMax);
  transform: translateY(1rem);
  transition: transform 0.25s ease-in-out;
}

.fyModal--aberto .fyModalContent {
  transform: translateY(0);
}

.fyModalContent--perigo {
  border-color: #dc3545;
  box-shadow: var(--boxShadow-Black), 0 0 0.5625rem rgba(220, 53, 69, 0.4);
}

.fyModalTitulo {
  font-family: "Montserrat";
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--white);
  text-shadow: var(--textShadow-Black);
}

.fyModalMensagem {
  font-size: 0.9375rem;
  color: var(--color1);
  line-height: 1.6;
}

.fyModalMensagem strong {
  color: var(--white);
}

.fyModalAcoes {
  display: flex;
  gap: 0.75rem;
}

.fyModalBtnCancelar,
.fyModalBtnConfirmar {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 3.25rem;
  font-family: "Nunito";
  font-size: 1rem;
  font-weight: bold;
  text-shadow: var(--textShadow-Black);
  box-shadow: var(--boxShadow-Black);
  background-color: #1B1512;
  border: 1px solid var(--baseSoft);
  color: var(--color1);
  transition: 0.3s ease-in-out;
}

.fyModalBtnCancelar:hover,
.fyModalBtnCancelar:focus {
  color: var(--white);
  border-color: var(--color1);
}

.fyModalBtnConfirmar--sucesso {
  color: #A8E4A0;
  border-color: #A8E4A0;
  background-image: linear-gradient(90deg, rgba(168, 228, 160, 0.25) 25%, rgba(168, 228, 160, 0.25) 75%);
}

.fyModalBtnConfirmar--sucesso:hover,
.fyModalBtnConfirmar--sucesso:focus {
  color: var(--white);
  border-color: var(--white);
}

.fyModalBtnConfirmar--perigo {
  color: #dc3545;
  border-color: #dc3545;
  background-image: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 25%, rgba(220, 53, 69, 0.25) 75%);
}

.fyModalBtnConfirmar--perigo:hover,
.fyModalBtnConfirmar--perigo:focus {
  color: var(--white);
  border-color: var(--white);
}/*# sourceMappingURL=loja.css.map */