.container-page-products{

  max-width: var(--container);

  width: 100%;

  margin: 4rem auto;

}



.container-page-products .products {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-bottom: 3rem;

}



.container-page-products .not-found-products {

  background-color: var(--opa-marrom-escuro);

  padding: 2rem;

  color: var(--opa-branco);

  text-align: center;

  margin-bottom: 2rem;

  font-family: var(--font-family-soleil);

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

  line-height: 1.5rem;

  letter-spacing: -0.02em;

  display: none;

}



.container-page-products .loading-products {

  background-color: var(--opa-bege-claro);

  padding: 2rem;

  text-align: center;

  margin-bottom: 2rem;

  font-family: var(--font-family-soleil);

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

  line-height: 1.5rem;

  letter-spacing: -0.02em;

  display: none;

}



.container-page-products .products .product {

  background-color: var(--opa-bege-claro);

  padding: 2rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  height: 28.75rem;

  width: 100%;

}



.container-page-products .products .product .images{

  max-height: 15rem;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: .3s;

}

.container-page-products .products .product .images:hover {

  transform: scale(1.1);

}

.container-page-products .products .product .images img{

  max-height: 15rem;

  max-width: 22.5rem;

  object-fit: cover;

}



.container-page-products .products .product .title{

  font-family: var(--font-family-soleil);

  font-style: normal;

  font-weight: 400;

  font-size: 1rem;

  line-height: 1.5rem;

  letter-spacing: -0.02em;

  color: var(--opa-cinza-escuro);

  margin-bottom: 1rem;

}



.container-page-products .products .product .product-title{

  font-family: var(--font-family-soleil);

  font-style: normal;

  font-weight: 600;

  font-size: 2rem;

  line-height: 2.875rem;

  letter-spacing: -0.01em;

  color: var(--opa-marrom-claro);

  margin: 3rem 0 1rem;

}



.container-page-products .products .product .footer{

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.container-page-products .products .product .footer .title{

    font-family: var(--font-family-soleil-bold);

    font-weight: 600;

    font-size: 1.125rem;

    line-height: 1.3rem;

    letter-spacing: -0.02em;

    color: var(--opa-vermelho);

    margin-block: 0.5rem;

    max-width: 40%;

    text-align: center;

    height: 78px;

}





.container-page-products .form-filter{

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-bottom: 2rem;

}



.container-page-products .form-filter input,

.container-page-products .form-filter select{

  height: 4.375rem;

  line-height: 4.375rem;

  border: 1px solid var(--opa-cinza-claro);

  padding: 0 1rem;

  font-family: var(--font-family-soleil);

  font-style: normal;

  font-weight: 600;

  font-size: 1.125rem;

  line-height: 1.375rem;

  letter-spacing: -0.01em;

  color: var(--opa-cinza-escuro);

}



.container-page-products .form-filter input{

  width: 100%;

}



.container-page-products .form-filter select option{

  background-size: cover;

  width: 3rem;

  height: 3rem;

}



.container-page-products .form-filter input::placeholder,

.container-page-products .form-filter input::-ms-input-placeholder,

.container-page-products .form-filter input::-ms-input-placeholder {

  color: var(--opa-cinza-escuro);

}





.container-page-products .form-filter .searchbar {

  position: relative;

}



.container-page-products .form-filter .searchbar button {

  position: absolute;

  right: 23px;

  top: 50%;

  transform: translateY(-50%);

  background: none;

  border: none;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1;

  cursor: pointer;

  border-radius: 50%;

  width: 50px;

  height: 50px;

}

.container-page-products .form-filter .searchbar button:hover {

  background: var(--opa-vermelho);

  transition: var(--transition);

}

.container-page-products .form-filter .searchbar button:hover img{

  filter: var(--invert);

}





.dropdown-souvenirs dd, 

.dropdown-souvenirs dt, 

.dropdown-souvenirs ul,

.dropdown-beers dd, 

.dropdown-beers dt, 

.dropdown-beers ul { 

  margin:0px; 

  padding:0px; 

}

.dropdown-souvenirs dd,

.dropdown-beers dd { 

  position:relative; 

}

.dropdown-souvenirs a, 

.dropdown-beers a, 

.dropdown-souvenirs a:visited,

.dropdown-beers a:visited { 

  font-family: var(--font-family-soleil);

  font-style: normal;

  font-weight: 600;

  font-size: 1.125rem;

  line-height: 1.375rem;

  letter-spacing: -0.01em;

  color: var(--opa-cinza-escuro);

}



.dropdown-souvenirs dd a:hover, 

.dropdown-beers dd a:hover{

  color: var(--opa-marrom-claro);

}

.dropdown-souvenirs dt a,

.dropdown-beers dt a {

  background: transparent;

  background-image: url("/wp-content/themes/labbotheme/assets/img/arrow-down-s-line.svg");

  background-repeat: no-repeat;

  background-position-x: 95%;

  background-position-y: 50%;

  

  width: 100%;

  display: flex;

  align-items: center;

  height: 4.375rem;

  line-height: 4.375rem;

  border: 1px solid var(--opa-cinza-claro);

  padding: 0 1rem;

  

}

.dropdown-souvenirs dt a span,

.dropdown-beers dt a span {

  cursor: pointer; 

  padding: 0 1rem;

  position: relative;

  top: 3px;

}

.dropdown-souvenirs dd ul,

.dropdown-beers dd ul { 

  background: var(--opa-branco) none repeat scroll 0 0; 

  border-bottom: 1px solid var(--opa-cinza-claro);

  border-left: 1px solid var(--opa-cinza-claro);

  border-right: 1px solid var(--opa-cinza-claro);

  color: var(--opa-cinza-escuro);

  display: none;

  left: 0px; 

  padding: 1rem 0 1rem 1rem; 

  position: absolute; 

  top: 0px; 

  width: auto; 

  min-width: 170px; 

  list-style: none;

  width: 100%;

  z-index: 10;

}

.dropdown-souvenirs span.value,

.dropdown-beers span.value { 

  display:none;

}

.dropdown-souvenirs dd ul li a, 

.dropdown-beers dd ul li a { 

  padding:5px; 

  display:block;

}

.dropdown-souvenirs img.flag,

.dropdown-beers img.flag { 

  border:none; 

}

.flagvisibility { 

  display:none;

}



@media only screen and (max-width: 1366px) {

  .container-page-products .products{

    grid-template-columns: 32.5% 32.5% 32.5%;

  }

}



@media only screen and (max-width: 991px) {

  .container-page-products .products {

    grid-template-columns: repeat(1, 1fr);

  }

}