.menu-top-header li a:hover{
    text-decoration: underline;
}

/* Ocultar o checkbox padrão */

.section-custom-checkbox input[type="checkbox"] {
    display: none;
}

/* Estilo da caixa customizada */
.section-custom-checkbox .custom-checkbox {
    width: 20px;
    height: 20px;
    border: 3px solid white;
    /* Cor externa */
    box-shadow: 0 0 0 1px #000000;
    /* Cor interna */
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

/* Fundo verde e ícone check ao marcar */
.section-custom-checkbox input[type="checkbox"]:checked+.custom-checkbox {
    background-color: #00d600;
}

.section-custom-checkbox input[type="checkbox"]:checked+.custom-checkbox::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.limited-lines-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;  /* Limita a 3 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.limited-lines-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* Limita a 3 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Define a largura do scrollbar */
::-webkit-scrollbar {
    width: 12px;
    /* Ligeiramente maior para dar mais espaço ao design */
}

/* Estiliza o track (fundo da barra de rolagem) */
::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #e5e7eb, #f3f4f6);
    /* Gradiente claro */
    border-radius: 10px;
}

/* Estiliza o thumb (indicador de rolagem) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #6b7280, #4b5563);
    /* Gradiente mais escuro */
    border-radius: 10px;
    /* Cantos arredondados */
    border: 3px solid #e5e7eb;
    /* Espaço ao redor do thumb para um efeito 'flutuante' */
}

/* Efeito ao passar o mouse no thumb */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #4b5563, #374151);
    /* Cor mais intensa ao passar o mouse */
    cursor: pointer;
}

/* Estiliza as bordas laterais do track */
::-webkit-scrollbar-corner {
    background: #f3f4f6;
    /* Cor do fundo */
}

/* Estilos para sugestões de busca do header */
.header-search-suggestions {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
}

.header-search-suggestions .suggestion-item {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
    padding: 8px 16px;
    cursor: pointer;
}

.header-search-suggestions .suggestion-item:last-child {
    border-bottom: none;
}

.header-search-suggestions .suggestion-item:hover,
.header-search-suggestions .suggestion-item.active {
    background-color: #f9fafb;
}

.header-search-suggestions .suggestion-item strong {
    font-weight: 600;
    color: #059669;
}

/* Animações para sugestões */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-search-suggestions {
    animation: fadeInDown 0.2s ease-out;
}

/* Responsividade para sugestões */
@media (max-width: 768px) {
    .header-search-suggestions {
        max-height: 200px;
        font-size: 14px;
    }
}

/* Garante que o container do input tenha position relative */
form:has(input[name="search"]) {
    position: relative;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Oculta a barra de rolagem no Firefox */
.scrollbar-hide {
  scrollbar-width: none;
}

/* Efeito hover interno para botão Compre online */
.hover-internal-effect {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.hover-internal-effect::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  z-index: -1;
}

.hover-internal-effect:hover::before {
  width: 300px;
  height: 300px;
  background-color: #0AE64C; /* tertiary-emerald */
}

.hover-internal-effect:hover {
  border-color: #0AE64C; /* tertiary-emerald */
  background-color: transparent;
  text-decoration: none;
}

.hover-internal-effect:hover p {
  text-decoration: none;
}

input[name="search"], input[name="search"]:focus-visible {
    border: solid 2px #0AE64C !important; /* tertiary-emerald */
    box-shadow: none;
    outline: none;
}