:root {
    --primary-hue: var(--green-hue);
    --primary-sat: var(--green-sat);
}

/* Контейнер списка */
.berry-sort-container ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* gap8 */
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Стилизация ссылок DLE под кнопки Berry */
.berry-sort-container ul li a {
    display: inline-block;
    padding: 3px 12px;      /* pad3-tb pad12-rl (компактно) */
    background-color: var(--gray100); /* bg-gray100 */
    color: var(--gray700);  /* t-gray700 */
    font-size: 0.85rem;     /* t85 */
    font-weight: 600;       /* t-bold */
    text-decoration: none;  /* t-no-underline */
    border-radius: 15px;    /* rounded15 */
    transition: all 0.3s;   /* transition-duration300 */
}
/* Эффект при наведении */
.berry-sort-container ul li a:hover {
    background-color: var(--primary500); /* hover-bg-primary500 */
    color: #ffffff;                      /* hover-t-white */
}
/* Стиль для активного (выбранного) способа сортировки */
/* DLE обычно не дает класс активной ссылке в {sort} без правок PHP, 
   но если он есть, например .active: */
.berry-sort-container ul li.active a,
.berry-sort-container ul li a.active {
    background-color: var(--primary600);
    color: #fff;
}
/* На планшетах и телефонах (<= 768px) можно центрировать всё обратно */
@media (max-width: 768px) {
    .flex-jc-between {
        justify-content: center !important; /* Центрируем для мобильных */
    }
    .berry-sort-container {
        margin-top: 10px; /* Отступ сверху, чтобы не прилипало к значку */
    }
}