@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400&display=swap');

/*=================================
=              Geral              =
=================================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif,
}

input[type="text"],
select {
  text-transform: uppercase
}

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: center;
}

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

.content {
  min-height: calc(100vh - 292px)
}

.btn-white {
  background: white;
  color: black
}

.btn-none:focus {
  outline: none;
  box-shadow: none;
}

.btn-200 {
  width: 200px
}

.full-width {
  width: 100%
}

.ft6 {
  font-size: 6px !important
}

.ft8 {
  font-size: 8px !important
}

.ft9 {
  font-size: 9px !important
}

.ft10 {
  font-size: 10px !important
}

.ft11 {
  font-size: 11px !important
}

.ft12 {
  font-size: 12px !important
}

.ft13 {
  font-size: 13px !important
}

.ft14 {
  font-size: 14px !important
}

.ft15 {
  font-size: 15px !important
}

.ft16 {
  font-size: 16px !important
}

.star {
  color: #fee044 !important;
}

/*=================================
=            Cabeçalho            =
=================================*/
#desktop {
  display: block
}

#mobile {
  display: none
}

.dropdown-menu {
  width: 600px
}

@media screen and (max-width: 800px) {
  #desktop {
    display: none
  }

  #mobile {
    display: block
  }

  .dropdown-menu {
    width: auto
  }
}

/*==============================
=            Rodapé            =
==============================*/
.rodape {
  background: #1a252b;
  color: #9d9d9d;
  height: 200px;
  overflow-x: hidden
}

.rodape-ul {
  list-style-type: none;
  margin: 10px 0;
  padding-left: 0px
}

.rodape-ul>li {
  padding: 0;
  margin: 5px 0
}

.rodape-ul>li>a,
.rodape-ul>li>span {
  padding: 0;
  margin: 0
}

/*====================================
=          Select Ordenação          =
====================================*/
.select-ordenacao {
  display: inline-block;
  width: 250px
}

/*====================================
=            Card Produto            =
====================================*/
.titulo {
  font-size: 12px;
  height: 20px
}

/* a.style-none:link, a.style-none:visited, a.style-none:active, a.style-none:hover{
  text-decoration: none;text-transform: none;color: #222} */
.btn-product-card {
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 25px;
  color: #88b04b !important;
}

.btn-product-card-valor {
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 70px;
  /* Ou outro tamanho adequado */
  text-align: center;
  color: #000 !important
}

.btn-cesta {
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 25px;
  color: orange !important
}

.btn-product-card-adc {
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 25px;
  color: #88b04b !important;
}

.btn-product-card-valor-adc {
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 40px;
  color: #000 !important;
}

/*===========================================
=            Detalhes do Produto            =
===========================================*/
.titulo-desc {
  font-size: 16px;
  text-align: justify;
  text-transform: uppercase;
  font-weight: bold;
  margin-left: 2rem !important;
}

.preco-old {
  font-size: 12px;
  text-decoration: line-through
}

.preco {
  font-size: 25px;
  font-weight: bold
}

.produto {
  width: 60px
}

.produto-input {
  width: calc(100% - 130px)
}

.foto-produto {
  height: 75px
}

.foto-produto-grande {
  display: block;
  margin: 0 auto;
}

.cep {
  padding-left: 150px
}

.label-cep {
  line-height: 2rem;
  margin-bottom: 0
}

#cep-mobile {
  display: none
}

#cep-desktop {
  display: block
}

@media screen and (max-width: 800px) {
  #cep-mobile {
    display: block
  }

  #cep-desktop {
    display: none
  }
}

/*===========================================
=            Estrelas de Avaliação          =
===========================================*/
.fa-star {
  color: lightgray
}

.fa-star.full {
  color: orange
}

/*===========================================
=            Botões do Carrossel            =
===========================================*/
.carousel-control-prev {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.carousel-control-next {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/*==============================
=            Modais            =
==============================*/
.modal-content {
  border: none;
}

.btn-logar {
  width: 70%;
  display: block;
  margin: 0 auto;
}

label.error {
  display: block !important;
  font-size: 10px;
  color: red;
}



/*======================================
=            Responsividade            =
======================================*/

@media screen and (max-width: 768px) {
  .mobile-none {
    display: none
  }

  .foto-produto {
    height: 30px;
  }
}

/*======================================
=            Alerta Coockie            =
======================================*/
.alerta-coockie {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0 15% 15px 15%;
  width: 70%;
}

@media screen and (max-width: 768px) {
  .alerta-coockie {
    margin: 0 25px 15px 25px;
    width: calc(100% - 50px);
  }
}

/*=============================
=            Geral            =
=============================*/


/*=============================
=       Botão WhatsApp        =
=============================*/
#whatsapp {
  position: fixed;
  bottom: 20px;
  /* Distância do fundo */
  right: 10px;
  /* Alinha à direita */
  z-index: 1500;
  /* Mantém sobre outros elementos */
}

#whatsapp>a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  transition: width 0.75s;
  white-space: nowrap;
}

#whatsapp>a>span {
  display: none;
}

#whatsapp>a:hover {
  width: 300px;
  /* Expande ao passar o mouse */
}

#whatsapp>a:hover>span {
  display: inline;
  margin-left: 8px;
  /* Espaço entre ícone e texto */
}