.filters-container {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
    padding-right: 120px;
    padding-left: 120px;
    background-color: white; /*#F7F3F1*/
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
 }

 .form3 {
    margin-top: 10px;
    margin-right: 15px;
    margin-left: 15px;
    display: flex;
    justify-content: flex-start; 
    align-items: center; 
    width: 100%;
    padding-bottom: 10px;
}
.filter-form {
    width:70%;
}


.colection-group,
.color-group,
.material-group,
.form3button {
    display: inline-block;
    /* gap: 20px; */
}





/*BUSCAR POR QUERY*/
.form1 {
    margin-top: 20px;
    margin-right: 15px;
    margin-left: 15px;
}

.search-form {
    position: relative;
    max-width: 300px;
    margin-left: auto;
    /* margin-right: 80px; */
}

.search-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd; /*none*/
    /* border-bottom: 1px solid #ddd; */
    outline: none;
    font-size: 14px;
    letter-spacing: 1px;
}

.search-form input::placeholder {
    color: #999;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.search-form input:focus {
    border-bottom: 1px solid #333;
}

.search-form button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}





/*VER TODOS*/
.form2 {
    margin-top: 10px;
    margin-right: 15px;
    margin-left: 15px;
}

.form2 button {
    padding: 10px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    min-width: 100px; 
 }
 
 .clear-search {
    position: relative;
    display: inline-block;
    padding: 10px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 1px;
 }
 
 



/*FORM COLLECTION*/

.filter-dropdown-collection  {
    margin-right: 10px;
    position: relative;
    display: inline-block;
}

.filter-collection-button  {
    padding: 10px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    letter-spacing: 1px;
}

.collection-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 800px;
    padding: 15px;
}

.hiddenC {
    display: none;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px;
    width: 100%;
    
}

.collection-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 2px;
    border: 1px solid white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.8rem;
}


/* Ocultar radio button original */
.collection-option input[type="checkbox"] {
    display: none;
}

/* Estilo cuando está seleccionado */
.collection-option input[type="checkbox"]:checked + label {
    font-weight: bold;
}







/*FORM COLOR*/

.filter-dropdown {
    margin-right: 10px;
    position: relative;
    display: inline-block;
}

.filter-button {
    padding: 10px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    letter-spacing: 1px;
}

.color-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 800px;
    padding: 15px;
}

.hidden {
    display: none;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px;
    width: 100%;
    
}

.color-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 2px;
    border: 1px solid white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.8rem;
}

.color-box {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    flex-shrink: 0;
}

/* Colores específicos */
.todos { background-color: transparent; }
.combinado { background: linear-gradient(45deg, #FFA07A, #87CEEB); }
.negro { background-color: black; }
.rojo { background-color: #C22825; }
.verde { background-color: #008000; }
.morado { background-color: #800080; }
.azul { background-color: #536E9D; }
.plateado { background-color: #C0C0C0; }
.burdeos { background-color: #800020; }
.rosa { background-color: #FFC0CB; }
.beige { background-color: #F5F5DC; }
.mostaza { background-color: #DFB134; }
.lila { background-color: #BC739F; }
.tabaco { background-color: #C3772F; }
.amarillo { background-color: #FBD325; }

/* Ocultar radio button original */
.color-option input[type="checkbox"] {
    display: none;
}

/* Estilo cuando está seleccionado */
.color-option input[type="checkbox"]:checked + label,
.color-option input[type="checkbox"]:checked + .color-box + label {
    font-weight: bold;
}



/* FORM MATERIAL */

.filter-dropdown-material  {
    margin-right: 10px;
    position: relative;
    display: inline-block;
}

.filter-material-button  {
    padding: 10px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    letter-spacing: 1px;
}

.material-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 300px;
    padding: 15px;
}

.hiddenM {
    display: none;
}

.material-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;
    width: 100%;
    
}

.material-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 2px;
    border: 1px solid white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.8rem;
}


/* Ocultar radio button original */
.material-option input[type="checkbox"] {
    display: none;
}

/* Estilo cuando está seleccionado */
.material-option input[type="checkbox"]:checked + label {
    font-weight: bold;
}


.form3button {
    width: 100px; /**/
    flex-shrink: 0; /**/
    padding: 10px;
    margin-top: 20px; 
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 1px;
 }
 
 .form3button:hover {
    background: #f8f8f8;  /* Ligero efecto hover */
 }