.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    z-index: 1;
    flex: 1;
    display: flex;
}
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}
.carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 0; /* Diminuir prioridade de sobreposição */
    pointer-events: none; /* Evita bloquear cliques nos elementos abaixo */
}

.control {
    border: none;
    padding: 20px;
    cursor: pointer;
    pointer-events: auto; /* Permite interações nos botões */
}

.padding { padding: 10px; }
.cursor { cursor: pointer; }
.geral { z-index: 1; }
.center { text-align: center; justify-content: center; align-items: center; }
.link { text-decoration: none; color: black; }

.header { position: relative; z-index: 1000; }
body { background-color: rgb(240, 243, 248); font-family: Arial, sans-serif; max-width: 99.8%; }
.negrito { font-weight: bold; }
.ratio { object-fit: cover; aspect-ratio: 1 / 1; }
.input:hover {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}
.input {
    background: #e0e5ec;
    border: none;
    padding: 10px;
    width: 100%;
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
    transition: all 0.3s ease;
}
.input::placeholder {
    color: #888;
}
.input:focus {
    outline: none;
    box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;
}.view-toggle {
display: flex;
gap: 10px; /* Espaçamento entre os botões */
}

.toggle-button {
display: flex;
align-items: center;
gap: 5px; /* Espaçamento entre o ícone e o texto */
padding: 10px;
border: none;
background-color: #f0f0f0;
cursor: pointer;
transition: background-color 0.3s ease;
}


.rating-stars-display {
    
   
    font-size: 24px; /* Tamanho das estrelas */
}

.star-display {
    display: inline-block;
    color: lightgray; /* Cor das estrelas vazias */
    width: 24px; /* Largura fixa para cada estrela */
    height: 24px; /* Altura fixa para cada estrela */
    text-align: center; /* Centraliza o conteúdo dentro da estrela */
    line-height: 24px; /* Centraliza verticalmente a estrela */
}

.star-display.filled {
    color: rgb(204, 175, 44); /* Cor das estrelas preenchidas */
}

.star-display.half {
    position: relative;
    color: lightgray; /* Cor da estrela vazia */
}

.star-display.half::before {
    content: '★';
    position: absolute;
    left: 0;
    width: 50%; /* Preenche metade da estrela */
    color: rgb(204, 175, 44); /* Cor da metade da estrela */
    overflow: hidden;
    display: inline-block;
    text-align: left;
}

/* Botão do menu de ordenação */
.sort-menu-button {
    border: none;
    cursor: pointer;

}

/* Estilo do menu sobreposto */
.sort-menu-overlay {
    position: fixed;
    right: 0;
    width: 300px;
    height: 60%;
    background: rgba(255, 255, 255, 0.9); /* Fundo transparente */
    z-index: 1050;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 1%;
    margin-bottom: 1%;
}

.hidden {
    transform: translateX(100%);
}

.visible {
    transform: translateX(0);
}

/* Estilo do formulário */
.custom-sort-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    
}

/* Botões de ordenação */
.sort-button {
    
width:90%;
}


@media (max-width: 1100px) {
    .item img { width: 100%; max-height: 100%; }
    .pc5 { max-width: 98vw; margin: 10px; min-width: 41vw; }
    
    .listas {
display: flex;
flex-wrap: wrap;

}


.geral {
max-width: 100vw;
}

}
@media (min-width: 1101px) {
    .geral { margin: 0px 10% 0px 10%; }
    .item img { width: 100%; max-height: auto; }
    .pc5 { max-width: 300px; margin: 20px; min-width: 270px; }
}