#price {
    scroll-margin-top: 100px; /* Вкажіть висоту вашого меню + запас (наприклад, 80px + 20px) */
}

.ltn__header-middle-area {
    height: auto !important;
    display: block !important;
}

.mobile-menu-bottom-bar {
    background: #fff;
    padding: 45px 0 10px 0;
    border-top: 1px solid #f0f0f0; /* Роздільник між лого та кнопками */
    width: 100%;
    overflow: hidden;
}

.mobile-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 5px;
    padding: 0 15px;

    /* ЗМІНИ ТУТ: */
    justify-content: center; /* Центрує кнопки, якщо вони влазять у ширину */

    -webkit-overflow-scrolling: touch;
}

/* Додатковий фікс для iOS:
   якщо кнопок багато і вони не влазять,
   центрування може "з'їсти" ліву кнопку.
   Цей хак виправляє це: */
.mobile-scroll-wrapper::after,
.mobile-scroll-wrapper::before {
    content: '';
    margin: auto;
}

.m-cat-pill {
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    color: #071c1f !important;
    border: 2px solid #071c1f;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 8px 8px;
    text-decoration: none !important;
    flex-shrink: 0;
}

.m-cat-pill:hover {
    background-color: #f2ba4a !important;
    border-color: #f2ba4a;
}