.supplement-filter { margin: 10px 0 16px; padding: 0; background: #fff; }
.supplement-filter-category-list { display: flex; align-items: flex-start; justify-content: safe center; gap: 28px; overflow-x: auto; padding: 18px 16px 14px; border-bottom: 1px solid #e5e5e5; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.supplement-filter-category-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.supplement-filter-category { display: inline-flex; flex: 0 0 auto; min-width: 82px; padding: 0; flex-direction: column; align-items: center; gap: 8px; border: 0; background: transparent; color: #333; cursor: pointer; text-align: center; scroll-snap-align: start; }
.supplement-filter-category-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; overflow: hidden; border: 1px solid #eceff3; border-radius: 50%; background: #f7f8fa; }
.supplement-filter-category-icon img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.supplement-filter-category-icon--featured { border-color: #ffb400; background: #ffb400; color: #fff; font-size: 26px; }
.supplement-filter-category-name { font-size: 14px; font-weight: 400; line-height: 1.25; }
.supplement-filter-category.is-active .supplement-filter-category-name { color: #d63504; font-weight: 700; }
.supplement-filter-category.is-active .supplement-filter-category-icon { border-color: #d63504; box-shadow: 0 0 0 2px rgba(214, 53, 4, 0.12); }
.supplement-filter-category:focus { outline: none; }
.supplement-filter-category:focus-visible .supplement-filter-category-icon { box-shadow: 0 0 0 3px rgba(214, 53, 4, 0.18); }
.supplement-filter-sort { display: flex; align-items: center; gap: 20px; overflow-x: auto; padding: 10px 16px; border-bottom: 1px solid #e5e5e5; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.supplement-filter-sort::-webkit-scrollbar { display: none; width: 0; height: 0; }
.supplement-filter-sort-option { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: #555; cursor: pointer; font-size: 14px; white-space: nowrap; scroll-snap-align: start; }
.supplement-filter-sort-option input[type="radio"] { width: 15px; height: 15px; margin: 0; accent-color: #d63504; }
.supplement-filter-sort-option span { display: inline-flex; align-items: center; gap: 4px; }
.supplement-filter-sort-option span i { color: #d63504; font-size: 15px; }
.supplement-filter-sort-option:has(input:checked) span { color: #1d2939; font-weight: 700; }
.supplement-filter-result { display: block; padding: 8px 16px 0; color: #667085; font-size: 13px; }
.supplement-product-item { min-width: 0; }
.supplement-product-item > .product-card { width: 100%; height: 100%; }
@media (max-width: 768px) {
    .supplement-filter-category-list { justify-content: flex-start; gap: 18px; padding: 14px 28px 12px 12px; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); }
    .supplement-filter-category { min-width: 70px; }
    .supplement-filter-category-icon { width: 50px; height: 50px; }
    .supplement-filter-category-name { font-size: 12px; }
    .supplement-filter-sort { gap: 12px; padding: 8px 28px 8px 12px; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); }
    .supplement-filter-sort-option { font-size: 13px; }
    .supplement-filter-result { padding: 8px 12px 0; }
}