#brands .top-container{background-color:#f9f9f9;padding:2rem 0}#brands .top-container .input-container{display:flex;align-items:center;gap:.5rem;margin:1.5rem 0}#brands .top-container .input-container input{flex:1;padding:.75rem 1rem;border:1px solid #ccc;border-radius:6px;font-size:1rem;outline:none}#brands .top-container .input-container input:focus{border-color:#b2d135}#brands .top-container .input-container svg{width:20px;height:20px;fill:#555}#brands .top-container .letters-container{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}#brands .top-container .letters-container .letters{display:flex;flex-wrap:wrap;gap:.5rem}#brands .top-container .letters-container .letters a{padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;text-decoration:none;color:#333;font-weight:500;font-size:.95rem}#brands .top-container .letters-container .letters a:hover{background-color:#eee}#brands .top-container .letters-container .letters a.disabled{pointer-events:none;color:#999;background-color:#f2f2f2}#brands .bottom-container{padding:2rem 0}#brands .bottom-container h1{font-size:1.5rem;margin-bottom:1rem}#brands .bottom-container .recommended{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.5rem}#brands .bottom-container .recommended .image{width:120px;height:80px;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:6px}#brands .bottom-container .recommended .image img{max-width:100%;max-height:100%}#brands .bottom-container .brand-letters .letter{margin-bottom:2rem}#brands .bottom-container .brand-letters .letter b{display:block;font-size:1.25rem;margin-bottom:1rem;color:#b2d135}#brands .bottom-container .brand-letters .letter .names-container{display:flex;flex-wrap:wrap;gap:2rem}#brands .bottom-container .brand-letters .letter .names-container .column{min-width:150px;display:flex;flex-direction:column;gap:.5rem}#brands .bottom-container .brand-letters .letter .names-container .column a{color:#333;text-decoration:none}#brands .bottom-container .brand-letters .letter .names-container .column a:hover{color:#b2d135;text-decoration:underline}#brands .bottom-container .loading{font-size:1.2rem;text-align:center;padding:2rem}@media(max-width:768px){#brands .top-container .letters-container .letters{justify-content:flex-start;overflow-x:auto}#brands .bottom-container .recommended{justify-content:center}}