styles.css

/* #region---------- MENU GERAL ---------- */
.menu {
    position: sticky !important;
    /* Fixa o menu em relação à página */
    display: flex;
    justify-content: space-between;
    /* Espaço entre o logo e os itens do menu */
    background-color: #ffffff;
    /* Cor de fundo branco */
    border-bottom: 0.5px solid #000000;
    /* Borda preta para separar o menu do restante */
    padding: 10px 20px;
    /* Espaçamento interno */
    font-family: 'Arial', sans-serif;
    /* Fonte clean */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.menu .logo {
    color: #333;
    /* Cor escura para o nome LuxFragrance */
    font-size: 24px;
    /* Tamanho da fonte */
    font-weight: bold;
    /* Negrito */
    text-transform: uppercase;
    /* Letras maiúsculas */
    letter-spacing: 2px;
    /* Espaçamento entre as letras */
    margin-right: 30px;
    /* Espaço entre o logo e os itens do menu */
    display: flex;
    /* Utiliza flexbox para alinhar o texto */
    align-items: center;
    /* Garante que o logo esteja centralizado verticalmente */
}

.menu .logo a {
    text-decoration: inherit;
    color: inherit;
}


.menu ul {
    display: flex;
    /* Organiza os itens em linha */
    justify-content: center;
    align-items: first baseline;
    /* Distribui os itens com espaço uniforme */
    list-style-type: none;
    /* Remove marcadores padrão */
    padding-left: 10px;
    /* Adiciona espaçamento interno */
    background-color: #ffffff;
    /* Fundo claro */
    margin: 0;
    /* Remove margens */
}

.menu li {
    position: relative;
    /* Necessário para dropdown */
    font-size: 16px;
    padding: 10px 20px;
    /* Espaçamento interno */
    transition: .3s;
    height: 100%;

}

.menu ul li:hover {
    transition: .1s
}

.menu ul li a {
    font-size: 16px;
    color: black;
    display: block;
    /* Garante o clique em todo o espaço */
}

.menu ul li a:hover {
    color: #c49e78;
    /* Adiciona sublinhado ao passar o mouse */
    transition: .3s;
}

/* #endregion---------- MENU GERAL ---------- */

/* #region dropdown */
/* ---------- DROPDOWN PRINCIPAL E CONTEÚDO (MARCA) ---------- */
.dropdown {
    position: relative;
    /* Base para posicionar o conteúdo associado */
    padding: 10px 15px;
    /* Espaçamento interno */
    border-radius: 8px;
    /* Bordas arredondadas */
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* Efeito suave ao passar o mouse */
}


.dropdown .dropdown-content_under {
    display: none;
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    height: 80vh;
    background-color: rgb(255, 255, 255);
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
    opacity: 90%;
    border-radius: 8px;
    margin-top: 2.75%;
    flex-direction: column;
    /* necessário para conter o dropdown-content */
}

.dropdown-content {
    display: flex;
    /* aqui é o principal */
    flex-wrap: wrap;
    /* permite que as colunas se ajustem */
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #ffffff;
    z-index: 1001;
    padding: 15px;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 1%;
}

.dropdown .trigger {
    cursor: pointer;
    /* Garante o clique em todo o espaço */
}



/* Exibe o dropdown ao passar o mouse */
/* Exibe o dropdown ao passar o mouse apenas no <a class="trigger"> */
.dropdown .trigger:hover+.dropdown-content_under,
.dropdown-content_under:hover {
    display: flex;
}

/* ---------- COLUNAS E TÍTULOS DO DROPDOWN ---------- */

.column {
    flex: 1 1 150px;
    /* Cada coluna ocupa pelo menos 150px */
    display: flex;
    flex-direction: column;
    /* Organiza os itens verticalmente */
    padding-left: 20px;

}

.column h3 {
    margin: 0;
    font-size: 18px;
    /* Tamanho do título */
    font-weight: bold;
    /* Negrito para destaque */
    color: #333;
    /* Cor escura para o título */
    margin-bottom: 10px;
    /* Espaçamento abaixo do título */
}

.column p {
    margin: 5px 0;
    /* Espaçamento vertical entre itens */
    font-size: 14px;
    /* Tamanho do texto dos itens */
    color: #555;
    /* Cor cinza para os textos */
}

.column p :hover {
    color: #c49e78;
    /* Adiciona sublinhado ao passar o mouse */
    transition: .3s;
}

.column p a {
    text-decoration: none;
    /* Remove sublinhado */
    color: black;
    /* Herda a cor do pai */
    transition: color 0.3s ease;
    /* Transição suave */
}



/* ---------- BOTÃO "VER TODAS AS MARCAS" ---------- */

.view-all {
    position: absolute;
    bottom: 20px;
    /* Fixa o botão na parte inferior */
    width: calc(100% - 5vw);
    /* Espaçamento dos lados (20px de cada lado) */
    margin: 0 20px;
    /* Espaçamento esquerdo e direito */
    text-align: center;
    /* Centraliza o botão */

}

.view-all a {
    display: inline-block;
    padding: 10px 20px;
    /* Espaçamento interno */
    background-color: #c49e78;
    /* Cor do botão */
    color: white;
    /* Cor do texto */
    text-decoration: none;
    /* Remove sublinhado */
    font-weight: bold;
    /* Texto em negrito */
    border-radius: 8px;
    /* Bordas arredondadas */
    transition: background-color 0.3s ease;
    /* Transição suave */
}

.view-all a:hover {
    color: #000 !important;
    transform: translateY(-2px);
    /* Efeito de "subir" ao passar o mouse */
}

/* #endregion */

/* #region================== LISTA DE FRAGRÂNCIAS ========================= */
.lista-fragrancias {
    display: flex;
    /* Organiza os itens em linha */
    flex-wrap: wrap;
    /* Permite que os itens sejam quebrados para novas linhas */
    gap: 20px;
    /* Espaço entre os itens */
    padding: 20px;
    /* Espaçamento interno da lista */
    justify-content: center;
    /* Centraliza os itens */
    margin-top: 1%;
}

.esgotado-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: black;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 15px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    opacity: 0.9;
}

.fragrancia-item {
    position: relative;
    /* Importante para o posicionamento do rótulo */
    width: 200px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, border-color 0.3s ease;
    padding: 10px;
    background-color: #fff;
    border: 1px solid transparent;
}

.fragrancia-item a {
    display: block;
    /* Ocupa todo o espaço do pai */
    width: 100%;
    /* Largura total do item */
    height: 100%;
    /* Altura total do item */
    text-decoration: none;
    /* Remove sublinhado do link */
    color: inherit;
    /* Herda a cor do pai */
}

.fragrancia-item img {
    width: 100%;
    /* A largura ocupa todo o espaço do container */
    height: 200px;
    /* Mantém a proporção da imagem */
    border-radius: 8px;
    /* Arredonda os cantos da imagem */
    object-fit: contain;
    /* Garante que a imagem preencha o container */
}

.fragrancia-item:hover {
    transform: scale(1.05);
    /* Aumenta o tamanho ao passar o mouse */
    border-color: #000000;
    border-radius: 8px;
}

.informacoes-fragrancia {
    margin-top: 0px;
    /* Remove margens no topo */
    text-decoration: none;
    /* Remove sublinhado nos textos */
}

.informacoes-fragrancia h2 {
    font-size: 1em;
    /* Tamanho do texto */
    color: #333;
    /* Cor escura */
    margin: 5px 0;
    /* Espaçamento vertical */
    font-weight: bold;
    /* Texto em negrito */
    text-decoration: none;
    /* Remove sublinhado nos textos */
}

a {
    text-decoration: none;
}

.informacoes-fragrancia .marca {
    color: #888888;
    /* Cor cinza clara */
    font-size: 0.9em;
    /* Tamanho reduzido */
    font-weight: normal;
    /* Sem negrito */
    margin-top: 5px;
    /* Espaçamento acima */
    text-decoration: none;
}

.informacoes-fragrancia .preco {
    font-size: 1em;
    /* Tamanho padrão */
    color: #000000;
    /* Cor preta */
    font-weight: bold;
    /* Texto em negrito */
    margin-top: 5px;
    /* Espaçamento acima */
    text-decoration: none;
}


/*filtros*/
.filtro-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
}

.filtro-dropdown {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.aplicar-filtros:hover {
    color: #c49e78;
    transition: 0.1s;
}

.filtros-ativos {
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.filtro-badge {
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 30px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}

.filtro-badge .remover-filtro {
    color: #fff;
    margin-left: 8px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.dropbtn {
    background-color: transparent;
    border: none;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    color: #333;
    padding: 5px 10px;
}

.dropbtn:hover {
    color: #c49e78;
    transition: 0.1s;
}

.dropdown-filtro {
    position: relative;
    display: inline-block;
}

.dropdown-content-filtro {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 220px;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
}

.dropdown-content-filtro label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    padding: 5px;
    cursor: pointer;
}

.dropdown-filtro:hover .dropdown-content-filtro {
    display: block;
}

.filtro-form button {
    background-color: #ffffff;
    color: black;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
}

.filtro-form button:hover {
    background-color: #fffefe;
}

/* Alinhamento da ordenação */
.ordenar-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.ordenar-wrapper label {
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

.ordenar-wrapper select {
    border: 1px solid #ccc;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
}

/* Responsivo */
@media (max-width: 768px) {
    .filtro-form {
        flex-direction: column;
        align-items: flex-start;
    }

    .ordenar-wrapper {
        width: 100%;
        justify-content: flex-start;
    }
}



/* #endregion */

/* #region================== CONFIGURAÇÃO GERAL ========================= */
body {
    font-family: Arial, sans-serif;
    /* Define fonte padrão */
    margin: 0;
    /* Remove margens padrão */
    padding: 0;
    /* Remove preenchimento padrão */
    background-color: #f8f8f8;
    /* Fundo cinza claro */
}

/* #endregion */

/* #region========================= SLIDER ========================= */
.produto-layout {
    display: flex;
    /* Permite organizar os elementos em linha */
    flex-wrap: wrap;
    justify-content: space-between;
    /* Adiciona espaço entre os elementos */
    align-items: stretch;
    /* Alinha os elementos à mesma altura */
    max-width: 100%;
    /* Define o limite máximo de largura */
    margin: 0 auto;
    /* Centraliza o layout */
    gap: 20px;
    /* Espaçamento entre o slider e as informações */
    padding: 10px 30px 15px 30px;
    /* Espaçamento interno */
    box-sizing: border-box;
    /* Inclui padding no cálculo */
}

.slider-container {
    flex: 1;
    /* Permite que o slider ocupe metade do espaço */
    max-width: 50%;
    /* Limita a largura máxima */
    height: 100%;
    /* Faz o slider ocupar toda a altura disponível */
}

.slider {
    position: relative;
    width: 100%;
    /* Largura do slider */
    height: 90%;
    overflow: hidden;
    /* Oculta imagens que saem da área visível */
    margin: 0 auto;
    /* Centraliza horizontalmente */
    border-radius: 15px;
    /* Arredonda os cantos */
    z-index: 1;
    /* Garante que o slider fique abaixo do menu */
}

.slider .list {
    display: flex;
    /* Organiza os itens em linha */
    transition: all 0.5s ease-in-out;
    /* Animação suave ao deslizar */
    width: 100%;
    /* Ocupa toda a área do slider */
}

.slider .item {
    min-width: 100%;
    /* Cada slide ocupa 100% da área visível */
    box-sizing: border-box;
    /* Inclui bordas no cálculo de largura */
    text-align: center;
    /* Centraliza o conteúdo */
}

.slider .item img {
    width: 100%;
    /* Imagem ocupa toda a largura */
    height: 100%;
    /* Mantém a proporção da imagem */
    border-radius: 10px;
    /* Arredonda os cantos */
}

.slider .buttons {
    position: absolute;
    /* Botões posicionados sobre o slider */
    top: 45%;
    /* Centraliza verticalmente */
    left: 5%;
    /* Posiciona à esquerda */
    width: 90%;
    /* Ocupa quase toda a largura */
    display: flex;
    /* Organiza os botões em linha */
    justify-content: space-between;
    /* Botões nas extremidades */
}

.slider .buttons button {
    width: 50px;
    /* Largura fixa */
    height: 50px;
    /* Altura fixa */
    border-radius: 50%;
    /* Forma circular */
    background-color: #fff5;
    /* Fundo semitransparente */
    color: #080808;
    /* Cor do botão */
    border: none;
    /* Remove bordas */
    font-family: monospace;
    /* Fonte do botão */
    font-weight: bold;
    /* Texto em negrito */
}

/* Configurações para os dots */
.slider .dots {
    position: absolute;
    /* Posiciona os dots sobre o slider */
    bottom: 10px;
    /* Distância do fundo */
    left: 50%;
    /* Centraliza horizontalmente a partir do meio da imagem */
    transform: translateX(-50%);
    /* Ajusta para realmente centralizar o container dos dots */
    display: flex;
    /* Organiza os dots em linha */
    justify-content: center;
    /* Centraliza os dots horizontalmente */
    align-items: center;
    /* Alinha os dots verticalmente, se necessário */
    z-index: 10;
    /* Garante que os dots apareçam sobre a imagem */
}

.slider .dots li {
    list-style: none;
    /* Remove marcadores padrão */
    width: 10px;
    /* Largura dos pontos */
    height: 10px;
    /* Altura dos pontos */
    background-color: black;
    /* Cor preta */
    margin: 4px;
    /* Espaçamento entre os pontos */
    border-radius: 20px;
    /* Forma arredondada */
    transition: 0.5s;
    /* Animação suave ao ativar */
    align-items: center;
}

.slider .dots li.active {
    width: 20px;
    /* Aumenta o tamanho do ponto ativo */
}

@media screen and (max-width: 768px) {
    .slider {
        height: 400px;
        /* Ajusta a altura do slider em telas pequenas */
    }
}

/* #endregion */

/* #region-- DETALHES DO PRODUTO ---------- */
.descricao-container {
    flex: 1;
    /* Permite que as informações ocupem metade do espaço */

}

.descricao-produto {
    flex: 1;
    /* O conteúdo ocupa metade do espaço */
    background-color: #fff;
    /* Fundo branco */
    padding: 20px;
    /* Espaçamento interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra ao redor */
    border-radius: 10px;
    /* Cantos arredondados */
    font-family: Arial, sans-serif;
    /* Fonte padrão */
    line-height: 1.6;
    /* Espaçamento entre linhas */
    display: flex;
    /* Organiza os elementos verticalmente */
    flex-direction: column;
    justify-content: center;
    /* Centraliza verticalmente */
    height: min-content;
    /* Ajusta à altura do conteúdo */
}

.notas-olfativas {
    border-top: 1px solid #ccc;
    /* Linha divisória no topo */
    margin-top: 20px;
    /* Espaçamento acima */
    font-family: Arial, sans-serif;
    border-bottom: 1px solid #ccc;
    /* Linha divisória entre notas */

}

.nota {
    margin-bottom: 10px;
    /* Espaçamento inferior */
}

.nota-titulo {
    width: 100%;
    background: none;
    /* Sem cor de fundo */
    border: none;
    /* Remove bordas */
    text-align: left;
    /* Alinha o texto à esquerda */
    font-size: 16px;
    /* Tamanho do texto */
    padding: 10px;
    /* Espaçamento interno */
    cursor: pointer;
    /* Mostra o ponteiro do mouse */
    display: flex;
    /* Organiza em linha */
    justify-content: left;
    /* Título e seta nas extremidades */
    align-items: center;
    height: min-content;
    /* Ajusta à altura do conteúdo */

}

.nota-titulo img {
    width: 25px;
    height: 25px;
    margin-right: 5px;
    /* Espaço entre o ícone e o texto */
}

.nota-titulo:after {
    align-items: end;
    content: '▼';
    /* Adiciona seta para baixo */
    font-size: 12px;
    /* Tamanho da seta */
    transition: transform 0.3s;
    /* Animação suave ao expandir */
}

.nota-titulo.active:after {
    transform: rotate(-180deg);
    /* Roda a seta ao expandir */
}

.nota-conteudo {
    display: none;
    /* Oculta o conteúdo inicialmente */
    padding: 10px;
    /* Espaçamento interno */
    font-size: 14px;
    /* Tamanho do texto */
    color: #555;
    /* Cor do texto */
}

.nota-conteudo p {
    margin: 0;
}

.descricao-produto h1 {
    font-size: 2em;
    color: #333;
    margin-bottom: 10px;
}

.descricao-produto .preco {
    font-size: 1.5em;
    color: #333;
    margin: 10px 0;
    font-weight: bold;
}

.descricao-produto .descricao {
    font-size: 1em;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.descricao-produto .marca {
    font-size: 1em;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
}

.produto-container {
    display: flex;
    align-items: stretch;
    /* Garante que os itens se alinhem em toda a altura */
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
    /* Espaçamento entre as colunas */
    padding-top: 20px;
    /* Espaço abaixo do menu */
}

.imagens-produto {
    flex: 1;
    /* O slider ocupa metade do espaço */
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    /* Tamanho máximo para o slider */
    margin: 0 auto;
    /* Centraliza o slider */
}

.favorito-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 10px;
    color: red;
    font-weight: bold;
}

.favorito-btn:hover {
    opacity: 0.7;
}


/* #endregion */

/* #region Cabeçalho */
.marca-header {
    font: 30px Arial, sans-serif, bold;
    background-color: #f8f9fa;
    /* Fundo claro */
    padding: 20px;
    /* Espaçamento interno */
    border-bottom: 1px solid #ddd;
    /* Linha separadora no final */
    margin-bottom: 20px;
    /* Espaço após o cabeçalho */
    text-align: center;
    /* Centralizar conteúdo */
    display: grid;
    /* Usar grid para organizar regiões */
    grid-template-rows: auto auto;
    /* Duas linhas: banner e texto */
    grid-template-areas:
        "banner"
        "texto";
    /* Define as áreas */
}

/* #endregion */

/* #region Descrição da Marca */
.marca-descricao {
    display: flex;
    /* Layout flexível */
    flex-direction: column;
    /* Organiza elementos verticalmente */
    align-items: center;
    /* Centraliza elementos horizontalmente */
    text-align: center;
    padding: 20px;
    background-color: #fff;
    /* Fundo branco */
    margin: 20px auto;
    /* Centraliza no ecrã */
    border-radius: 10px;
    /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra leve */
    max-width: 800px;
    /* Limita a largura */
}

.marca-descricao img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    /* Mantém proporções */
    max-height: 300px;
    /* Limita altura */
    margin-bottom: 20px;
    border-radius: 10px;
    /* Bordas arredondadas */
}

.marca-descricao h1 {
    font-size: 28px;
    color: #444;
    /* Texto escuro */
    margin-bottom: 15px;
}

.marca-descricao p {
    font-size: 16px;
    line-height: 1.6;
    /* Espaçamento entre linhas */
    color: #666;
    /* Texto mais claro */
}

/*#endregion*/

/* #region Lista de Marcas */
.marcas-container {
    display: flex;
    /* Layout flexível */
    flex-wrap: wrap;
    /* Permite múltiplas linhas */
    justify-content: center;
    /* Centraliza conteúdo */
    gap: 20px;
    /* Espaço entre itens */
    padding: 20px;
    max-width: 1200px;
    /* Limita largura */
}

.marca-group {
    width: 100%;
    /* Ocupa toda a largura disponível */
}

.marca-group h3 {
    font-size: 20px;
    font-weight: bold;
    color: #444;
    /* Texto escuro */
    text-align: center;
    margin: 20px 0 10px 0;
    /* Espaçamento em volta */
}

.marca-item {
    width: calc(20% - 20px);
    /* 5 colunas com espaçamento */
    text-align: center;
    margin: 10px;
}

.marca-item a {
    text-decoration: none;
    /* Remove sublinhado */
    color: inherit;
    /* Mantém cor padrão */
}

/* Design dos cartões */
.marca-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    /* Define a largura fixa */
    height: 250px;
    /* Define a altura fixa */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    transition: transform 0.3s, box-shadow 0.3s;
}

.marca-box:hover {
    transform: scale(1.05);
    /* Aumenta ligeiramente no hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    /* Sombra mais intensa */
}

/* Imagem da marca */

.marca-image {
    width: 180px;
    /* Largura fixa do container da imagem */
    height: 120px;
    /* Altura fixa do container da imagem */
    overflow: hidden;
    /* Esconde partes da imagem que ultrapassem o container */
    display: flex;
    /* Garante centralização com flexbox */
    align-items: center;
    justify-content: center;
}

.marca-image img {
    width: 100%;
    /* A imagem ocupa toda a largura do container */
    height: 100%;
    /* A imagem ocupa toda a altura do container */
    object-fit: cover;
    /* Faz a imagem preencher o container completamente */
    border-radius: 5px;
    /* Bordas arredondadas */
}

.marca-info h4 {
    font-size: 16px;
    font-weight: bold;
    color: #444;
    /* Texto escuro */
    margin: 5px 0;
}

.marca-info p {
    font-size: 14px;
    color: #666;
    /* Texto mais claro */
    margin: 0;
}

/* #endregion */

/*#region paginacao*/
.paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}

.paginacao span {
    font-size: 16px;
    color: #444;
}

.btn-paginacao {
    background-color: #000;
    /* Cor preta para contraste */
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease-in-out;
}

.btn-paginacao:hover {
    background-color: #444;
    /* Cinza escuro no hover */
}

.btn-paginacao:active {
    background-color: #222;
    /* Mais escuro quando pressionado */
}

/* Responsividade */
@media (max-width: 768px) {
    .paginacao {
        flex-direction: column;
        gap: 10px;
        font-size: 14px;
    }

    .btn-paginacao {
        width: 100%;
        text-align: center;
    }
}

/* #endregion */

/* #region Responsividade */

@media (max-width: 1024px) {
    .marca-item {
        width: calc(25% - 20px);
        /* 4 colunas */
    }

    .marca-descricao {
        padding: 15px;
    }

    .marca-descricao h1 {
        font-size: 24px;
    }

    .marca-descricao p {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .marca-item {
        width: calc(33.33% - 20px);
        /* 3 colunas */
    }

    .marca-descricao img {
        max-height: 200px;
        /* Reduz altura da imagem */
    }
}

@media (max-width: 480px) {
    .marca-item {
        width: calc(50% - 20px);
        /* 2 colunas */
    }

    .marca-descricao {
        padding: 10px;
    }

    .marca-descricao h1 {
        font-size: 20px;
    }

    .marca-descricao p {
        font-size: 12px;
    }
}

/* #endregion */

/* #region Overlay de pesquisa */
#searchOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98);
    display: none;
    z-index: 999;
    text-align: center;
}

/* Mostrar Overlay quando o checkbox estiver marcado */
#toggleSearch:checked~#searchOverlay {
    display: block;
}

/* Conteúdo do Overlay */
.search-content {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}

.search-content h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #333;
}

.search-content input {
    width: 60%;
    padding: 10px;
    font-size: 18px;
    border: none;
    border-bottom: 2px solid #000;
    background: transparent;
    outline: none;
    text-align: center;
}

/* Botão de Fechar */
#closeSearch {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}

#closeSearch:hover {
    color: #000;
}

/* Estilos básicos para os resultados */
#searchResults {
    margin-top: 10px;
    max-height: 400px;
    overflow-y: auto;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

.result-item {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.result-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 15px;
}

.result-item .info {
    display: flex;
    flex-direction: column;
    /* Organiza o texto em coluna */
    justify-content: center;
    /* Centraliza verticalmente dentro do contêiner */
}

.result-item .info h3 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.result-item .info p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #666;
}

/*#endregion*/


.familia-header {
    font: 30px Arial, sans-serif, bold;
    background-color: #f8f9fa;
    /* Fundo claro */
    padding: 20px;
    /* Espaçamento interno */
    border-bottom: 1px solid #ddd;
    /* Linha separadora no final */

    margin-bottom: 20px;
    /* Espaço após o cabeçalho */
    text-align: center;
    /* Centralizar conteúdo */
    display: grid;
    /* Usar grid para organizar regiões */
    grid-template-rows: auto auto;
    /* Duas linhas: banner e texto */
    grid-template-areas:
        "banner"
        "texto";
    /* Define as áreas */
}

/* #region css do discovery kit */
.discovery-kit {
    display: flex;
    /* Permite organizar os elementos em linha */
    flex-wrap: wrap;
    justify-content: space-between;
    /* Adiciona espaço entre os elementos */
    align-items: stretch;
    /* Alinha os elementos à mesma altura */
    max-width: 100%;
    /* Define o limite máximo de largura */
    margin: 0 auto;
    /* Centraliza o layout */
    gap: 20px;
    /* Espaçamento entre o slider e as informações */
    padding: 10px 30px 15px 30px;
    /* Espaçamento interno */
    box-sizing: border-box;
    /* Inclui padding no cálculo */
}

.left-side {
    flex: 1;
    /* Permite que o slider ocupe metade do espaço */
    max-width: 50%;
    /* Limita a largura máxima */
    height: 100%;
    /* Faz o slider ocupar toda a altura disponível */
}

.left-side img {
    width: 100%;
    /* Imagem ocupa toda a largura */
    height: 100%;
    /* Mantém a proporção da imagem */
    border-radius: 10px;
    /* Arredonda os cantos */
}

.right-side {
    border-radius: 10px;
    flex: 1;
    /* Permite que o slider ocupe metade do espaço */
    width: 10%;
    /* Limita a largura máxima */
    height: 100%;
    /* Faz o slider ocupar toda a altura disponível */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    /* Sombra mais intensa */
}

.search-field {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto 20px auto;
    /* Isso centraliza o container horizontalmente e adiciona uma margem inferior */
    align-items: center;
    /* Isso centraliza os itens dentro do container */
    justify-content: center;
    /* Garante que o conteúdo esteja centralizado verticalmente (se necessário) */
}

.search-field input {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 5px;
    width: 100%;
    /* Faz com que o campo de pesquisa ocupe a largura total do seu contêiner */
}

.search-field input:focus {
    outline: none;
    border-color: #4CAF50;
}

/* Resultados de pesquisa */
.search-results {
    margin-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    width: 80%;
}

.result-item {
    display: flex;
    cursor: pointer;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.result-item:hover {
    background-color: #f0f0f0;
}

.result-content {
    display: flex;
    align-items: center;
}

.result-item img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.result-item .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.result-item h3 {
    font-size: 16px;
    color: #333;
    margin: 0;
    font-weight: bold;
}

.result-item p {
    font-size: 14px;
    margin: 0;
    color: #888;
}

/* Responsividade para telas pequenas */
@media (max-width: 600px) {
    .search-field input {
        font-size: 14px;
    }

    .result-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .result-item img {
        margin-bottom: 10px;
    }

    .result-item h3 {
        font-size: 14px;
    }

    .result-item p {
        font-size: 12px;
    }
}

/* #endregion */

/* #region css do icon do perfil */
.user-dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    /* Organiza o ícone e texto em coluna */
    align-items: center;
    font-size: 14px;
    padding: 5px;
}

.user-btn span {
    display: block;
    margin-top: 2px;

    /* Pequeno espaçamento entre ícone e texto */
}

.dropdown-content-user {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 10px 0;
    top: 80%;
    right: 0;
    z-index: 1000;
    transform: translateY(10px);
}

/* Mostrar dropdown ao passar por cima do botão */
.user-dropdown:hover .dropdown-content-user {
    display: block;
}

/* Estilo dos links dentro do dropdown */
.dropdown-content-user a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: #222;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.dropdown-content-user a:hover {
    background-color: #f0f0f0;
}

/* Exibir dropdown ao passar o mouse */
.user-dropdown:hover .dropdown-content-user {
    display: block;
}

.carrinho-link {
    position: relative;
    display: inline-block;
}

.carrinho-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 50%;
}

/* #endregion */

/* #region css do carrinho */
/* Container do carrinho */

/* Oculta o carrinho para administradores e trabalhadores */
body.admin .carrinho-menu,
body.trabalhador .carrinho-menu {
    display: none !important;
}

/* Mostra o carrinho para clientes e visitantes */
body.cliente .carrinho-menu,
body.visitante .carrinho-menu {
    display: inline-block;
}

.carrinho-container {
    width: 90%;
    max-width: 900px;
    margin: 30px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Estilização da tabela */
.carrinho-tabela {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.carrinho-tabela th {
    text-align: left;
    padding: 12px;
    font-size: 14px;
    font-weight: bold;
    background-color: #f8f8f8;
    border-bottom: 2px solid #ddd;
}

.carrinho-tabela td {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #ddd;
}

/* Estiliza a coluna do produto */
.produto-info {
    display: flex;
    align-items: center;
    gap: 15px;
    height: max-content;
}

.produto-detalhes {
    display: flex;
    align-items: center;
    gap: 15px;
}

.produto-imagem {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.produto-nome {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}

/* Estiliza a quantidade */
.quantidade-container {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.item-qty {
    width: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #f9f9f9;
}

/* Botões de aumentar/diminuir quantidade */
.btn-menos,
.btn-mais {
    border: none;
    background-color: #ddd;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 3px;
    transition: 0.3s;
}

.btn-menos:hover,
.btn-mais:hover {
    background-color: #bbb;
}

/* Estiliza preço unitário e subtotal */
.preco-unitario,
.subtotal {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* Estiliza botão de remover */
.remove-item {
    background-color: #ff5c5c;
    border: none;
    color: white;
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.3s;
}

.remove-item:hover {
    background-color: #d9534f;
}

/* Estiliza o total e botão de checkout */
.checkout-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.checkout-total {
    font-size: 16px;
    font-weight: bold;
}

.checkout-button {
    background-color: #c59b76;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: 0.3s;
}

.checkout-button:hover {
    background-color: #a3805f;
}

/* #endregion */

/* #region Container da Wishlist */
.wishlist-container {
    width: 90%;
    max-width: 900px;
    margin: 30px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Tabela */
.wishlist-tabela {
    width: 100%;
    border-collapse: collapse;
}

.wishlist-tabela th,
.wishlist-tabela td,
.wishlist-tabela tr {
    border: none;
    padding: 12px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

/* Produto */
.wishlist-produto-info {
    display: flex;
    align-items: center;
    gap: 15px;
}


.wishlist-imagem {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.wishlist-nome {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Preço */
.wishlist-preco {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    text-align: center;
}

/* Ações */
.wishlist-acoes {
    gap: 8px;
    justify-content: center;
    align-items: center;
    height: inherit;
}

/* Botões */
.wishlist-acoes button {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: 0.3s ease;
    color: #fff;
}

/* Adicionar ao carrinho */
.btn-wishlist-adicionar {
    background-color: #28a745;
}

.btn-wishlist-adicionar:hover {
    background-color: #d4af37;
    color: #000;
}

/* Remover da wishlist */
.btn-wishlist-remover {
    background-color: #dc3545;
}

.btn-wishlist-remover:hover {
    background-color: #d4af37;
    color: #000;
}

/* Wishlist vazia */
.wishlist-vazia {
    text-align: center;
    font-size: 16px;
    color: #777;
    margin-top: 20px;
}

/* #endregion */

/* #region Login Page */ 
.form-login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

.login-box {
    background-color: white;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    min-width: 500px;
}

.login-title {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

.login-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

.login-input:focus {
    outline: none;
    border-color: #000;
}

.login-button {
    width: 100%;
    padding: 10px;
    background-color: #c59b76;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-button:hover {
    background-color: #a5805f;
}

.login-error {
    color: red;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
}

.login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
}

.login-links a {
    color: #555;
    text-decoration: underline;
}

.login-links a:hover {
    color: #000;
}

.ver-senha {
    position: absolute;
    right: 12px;
    top: 8px;
    width: 30px;
    height: 25px;
    cursor: pointer;
}

.password-wrapper {
    position: relative;
}

.login-sucesso {
    color: green;
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
}

.login-voltar {
    text-align: center;
    margin-top: 20px;
}

.login-voltar a {
    color: #333;
    text-decoration: underline;
}

.password-requirements {
    margin: 10px 0;
    padding-left: 20px;
    font-size: 13px;
    color: #666;
}

.password-requirements li.valid {
    color: green;
    font-weight: bold;
}
/* #endregion */

/* #region Recuperação de Palavra-passe */
.form-recuperacao {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.recuperacao-box {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    min-width: 280px;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

.recuperacao-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 25px;
}

.recuperacao-input {
    width: 100%;
    padding: 12px;
    margin: 12px 0 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border 0.2s;
}

.recuperacao-input:focus {
    border-color: #b98c66;
    outline: none;
    box-shadow: 0 0 4px rgba(185, 140, 102, 0.3);
}

.recuperacao-button {
    width: 100%;
    padding: 12px;
    background-color: #c59b76;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.recuperacao-button:hover {
    background-color: #a87f5d;
}

.recuperacao-erro {
    color: #d9534f;
    background-color: #fcebea;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.recuperacao-sucesso {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.form-recuperacao .label {
    display: block;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    margin-top: 10px;
}

.senha-container {
    position: relative;
    display: flex;
    align-items: center;
}

.senha-container input {
    flex: 1;
}

.toggle-btn {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #555;
    padding: 0;
}

/* #endregion */

/*#region PERFIL */

.perfil-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.perfil-container h1 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;
    color: #333;
}

.perfil-bloco {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    margin-bottom: 30px;
}

.perfil-bloco label {
    grid-column: 1 / -1;
    font-weight: bold;
    color: #555;
}

.perfil-bloco input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
}

.perfil-bloco button {
    grid-column: 1 / -1;
    padding: 12px;
    background-color: #c59b76;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.perfil-bloco button:hover {
    background-color: #a5805f;
}

.mensagem-perfil {
    text-align: center;
    font-weight: bold;
    color: green;
    margin-bottom: 20px;
}

.perfil-encomendas {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}

.perfil-encomendas th,
.perfil-encomendas td {
    padding: 12px 10px;
    border-bottom: 1px solid #ccc;
    text-align: left;
}

.perfil-encomendas th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.perfil-encomendas tr:hover {
    background-color: #f9f9f9;
}
/*#endregion*/


/* #region Morada e Resumo de Encomenda */
.morada-opcao {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.morada-opcao input[type="radio"] {
    transform: scale(1.2);
    margin-right: 10px;
}

/* Botões principais */
.resumo-actions {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.resumo-actions button[type="submit"] {
    background-color: #c59b76;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.resumo-actions button[type="submit"]:hover {
    background-color: #a5805f;
}

.botao-morada {
    background-color: #c59b76;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

.botao-morada:hover {
    background-color: #a5805f;
}

/* Dropdown para nova morada */
.dropdown-nova-morada {
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fdfdfd;
}

.dropdown-header {
    background-color: #eee;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    user-select: none;
}

.dropdown-header:hover {
    background-color: #e0e0e0;
}

.dropdown-content_morada {
    display: none;
    padding: 15px 20px;
    background-color: #fff;
    border-top: 1px solid #ccc;
    animation: fadeIn 0.3s ease-in-out;
}

.dropdown-content_morada input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 14px;
}

.dropdown-content_morada button {
    width: 100%;
}

/* Resumo da Encomenda */
.resumo-box {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    background-color: #fefefe;
}

.resumo-box h3 {
    margin-top: 0;
    font-size: 18px;
    color: #444;
}

.resumo-box ul {
    list-style: none;
    padding-left: 0;
}

.resumo-box li {
    margin: 8px 0;
    font-size: 14px;
}

.resumo-box p strong {
    font-size: 16px;
    display: block;
    margin-top: 15px;
}

/* Animação */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* #endregion */