.description-brand-text {
    overflow: hidden;
    position: relative;
    color: #474747;
}

.description-brand-text.hide {
    max-height: 78px;
}

.description-brand-text.hide:after {
    content: "";
    display: block;
    height: 5px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 0%)
}
.content_toggle_description.full {
    color: #9E9EA3;
}

.description-brand-text h2{
    font-weight: 700;
}
.description-brand-text a{
    font-weight: 600;
    color:#248DFF;
}

.image-brand-logo[src=''] {
    display: none;
}

.image-brand-link[src=''] span {
    display: inline;
}

.image-brand[src=''] img {
    display: flex;
}

/* Brand Search Input */
#brandSearch {
    width: 100%;
    padding: 8px 16px; /* px-4 py-2 */
    border: 1px solid var(--mono-gray-500); /* border */
    border-radius: 8px; /* rounded-lg */
    outline: none; /* remove default focus outline */
}

/* Container for search input and filters */
.brands-search-filter-container {
    margin-bottom: 24px; /* mb-6 */
}

/* Brand Search Results Container */
#brandSearchResults {
    position: absolute; /* absolute */
    width: 100%; /* w-full */
    margin-top: 8px; /* mt-2 */
    background-color: #fff; /* bg-white */
    border: 1px solid var(--mono-gray-500); /* border */
    border-radius: 8px; /* rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* simplified shadow-lg */
    z-index: 10; /* ensure it's above other content */
    max-height: 300px; /* Ограничиваем высоту контейнера */
    overflow-y: auto; /* Добавляем вертикальную прокрутку при необходимости */
}

#brandSearchResults.hidden {
    display: none;
}

/* Individual Search Result Item */
.brand-search-result-item {
    padding: 8px; /* p-2 */
    cursor: pointer; /* cursor-pointer */
}

.brand-search-result-item:hover {
    background-color: var(--hover-border); /* hover:bg-gray-100, using a variable */
}

/* Brand Filters Container (used for alphabet buttons too) */
#brandFilters,
#alphabetFilter {
    display: flex; /* flex */
    flex-wrap: wrap; /* flex-wrap */
    gap: 6px; /* gap-2 */
}
/* Adjusting margin for #alphabetFilter from mb-6 */
#alphabetFilter {
    margin-bottom: 24px; /* mb-6 */
}

/* Alphabet Filter Buttons */
.alphabet-button {
    padding: 4px 12px; /* px-3 py-1 */
    border: 1px solid var(--mono-gray-500); /* border */
    border-radius: 8px; /* rounded-lg */
    background-color: #fff; /* default background */
    cursor: pointer; /* cursor-pointer */
    transition: background-color 0.2s ease, color 0.2s ease; /* smooth transition for hover/active */
    outline: none; /* remove default focus outline */
}

.alphabet-button:hover {
    background-color: var(--hover-border); /* hover:bg-gray-200 */
}

.alphabet-button.active {
    background-color: var(--primary); /* bg-gray-300, using a variable */
    color: #fff; /* text color for active state */
}

/* Specific style for 'Все' button */
.alphabet-button-all {
    background-color: var(--primary); /* Use a distinct color, e.g., primary */
    color: #fff;
    border-color: var(--primary);
}

.alphabet-button-all:hover {
    background-color: var(--btn-hover); /* A slightly darker primary for hover */
    border-color: var(--btn-hover);
}

.alphabet-button-all.active {
    background-color: var(--btn-hover); /* Keep active consistent or make it even darker */
    border-color: var(--btn-hover);
}

/* Product Place Grid */
#product-place {
    display: grid; /* grid */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* grid-cols-3 */
    gap: 11px; /* gap-[11px] */
}

/* Responsive grid adjustments */
@media (min-width: 640px) { /* sm */
    #product-place {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* sm:grid-cols-4 */
        gap: 16px; /* md:gap-4 */
    }
}

@media (min-width: 768px) { /* md */
    #product-place {
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* md:grid-cols-5 */
        gap: 24px; /* lg:gap-6 */
    }
}

@media (min-width: 1280px) { /* xl */
    #product-place {
        grid-template-columns: repeat(6, minmax(0, 1fr)); /* xl:grid-cols-6 */
        gap: 32px; /* xl:gap-8 */
    }
}

/* Image Brand Link */
.image-brand-link {
    border: 1px solid var(--mono-gray-500); /* border */
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    border-radius: 12px; /* rounded-[12px] */
    aspect-ratio: 1 / 1; /* aspect-square */
}

.image-brand-content {
    flex-shrink: 0;
    width: 100%;
    padding: 16px; /* p-4 */
    text-align: center;
}

.brand-image-logo {
    width: 100%;
    height: auto;
}

.brand-name-text {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    display: block;
    overflow: hidden; /* Скрываем текст, который выходит за границы */
    text-overflow: ellipsis; /* Добавляем многоточие */
    white-space: nowrap; /* Запрещаем перенос строк */
}

@media (max-width: 767px) { /* Adjust for smaller screens */
    .brand-name-text {
        font-size: 18px;
    }
}

@media (max-width: 480px) { /* Further adjust for very small screens */
    .brand-name-text {
        font-size: 14px;
    }
}

/* Load More Button Container */
#loadMoreContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 40px;
}

/* No Brands Found message */
.no-brands-found {
    text-align: center;
    width: 100%;
}

/* Load More Brands Button */
#loadMoreBrandsBtn {
    margin-top: 16px; /* mt-4 */
}