.brands-listing-page{padding:50px 0 50px;font-family: var(--site-font-family);}
.brands-listing-wrapper{margin:0 auto;}
.brands-listing-header{margin-bottom:30px;text-align:center;}
.brands-listing-title{font-size:var(--heading1);font-weight:500;color:var(--site-heading-color);margin:0;}
.brands-filters{margin-bottom:40px;}
.brand-search-wrapper{position:relative;max-width:500px;margin:30px auto 30px;}
.brand-search-input{width:100%;padding:12px 55px 12px 15px;border:2px solid #d1d1d1;border-radius:8px;font-size:var(--site-font);transition:border-color .3s ease;color: var(--site-text-color);}
.brand-search-wrapper .search-icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.6;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:right .3s ease;}
.brand-search-wrapper .search-icon img{width:100%;height:100%;object-fit:contain;}
.brand-search-wrapper.has-clear .search-icon{right:50px;}
.brand-search-clear{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:none;border:none;padding:5px;cursor:pointer;opacity:.6;transition:opacity .3s ease;width:20px;height:20px;display:flex;align-items:center;justify-content:center;z-index:10;}
.brand-search-clear img{width:100%;height:100%;object-fit:contain;}
.brand-alphabet-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:20px;background:var(--site-border);border-radius:8px;}
.alphabet-btn{min-width:40px;height:40px;padding:0 12px;border:2px solid var(--site-border);background:var(--site-white);border-radius:6px;font-size:14px;font-weight:600;color:var(--site-text-color);cursor:pointer;transition:all .3s ease;text-align:center;line-height:36px;}
.alphabet-btn.active{background:var(--site-btn-hover);border-color:transparent;color:var(--site-white);}
.alphabet-btn.no-brands{opacity:.4;cursor:not-allowed;}
.alphabet-btn.has-brands{opacity:1;}
.brands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;margin-top:30px;}
.brand-item{transition:transform .3s ease;}
.brand-link{display:block;text-decoration:none;color:inherit;}
.brand-logo-wrapper{padding:14px;height:90px;background:var(--site-white);border-radius:8px;box-shadow:none;border:1px solid #fcd9c5;display:flex;align-items:center;justify-content:center;transition:all .3s ease;text-align:center;margin: 0;box-shadow: 0 0 4px 0px rgba(0,0,0,0.1);}
.brand-logo-wrapper img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain;display:block;}
.brand-logo-wrapper .brand-name{font-size:18px;font-weight:500;color:var(--site-text-color);word-break:break-word;line-height: 1.3;}
.no-brands-message{text-align:center;padding:0px 20px 0 20px;color:var(--site-text-color);font-size:18px;color: red;}
.brand-search-clear{font-size: 0;width: 25px;height: 25px;background-image: url(../images/clear-filter-hover.svg);background-repeat: no-repeat;background-position: center;background-size: 15px;background-repeat: no-repeat;}
.brand-search-clear img{display: none;}
.brand-search-wrapper .search-icon img{display: none;}
.brand-search-wrapper .search-icon{background-image: url(../images/search-ico-orange.svg);background-repeat: no-repeat;background-position: center;}


@media(min-width:1200px){
.brand-search-clear:hover{opacity:1;background-image: url(../images/clear-filter.svg);}
.alphabet-btn:hover{border-color:transparent;color:var(--site-white);background:var(--site-btn-hover);}
.alphabet-btn.no-brands:hover{border-color:var(--site-border);color:var(--site-text-color);background:var(--site-white);}
.brand-item:hover .brand-logo-wrapper{box-shadow:var(--site-shadow);border-color:transparent;}

}
@media(max-width:1199px){
.brands-listing-page{padding: 40px 0;}
.brand-logo-wrapper .brand-name{font-size: 16px;}
}

@media (max-width:768px){.brands-listing-page{padding:40px 0 40px;}.brand-alphabet-filter{gap:6px;padding:15px 10px;}.alphabet-btn{min-width:35px;height:35px;padding:0 8px;font-size:12px;line-height:31px;}.brands-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px;}.brand-logo-wrapper{padding:15px;height:100px;}.brand-logo-wrapper img{max-height:60px;}}
@media (max-width:480px){.brands-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;}.brand-logo-wrapper{padding:12px;height:90px;}.alphabet-btn{min-width:32px;height:32px;padding:0 6px;font-size:11px;line-height:28px;}}