@import url('./design-tokens.css');

.catalog-categories { min-width: 0; margin-bottom: var(--ds-space-5); font-family: Pinar, Tahoma, sans-serif; }
.catalog-categories__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-bottom: var(--ds-space-3); }
.catalog-categories__title { margin: 0; color: var(--ds-text); font-size: var(--ds-fs-16); font-weight: 600; }
.catalog-categories__controls { display: flex; gap: var(--ds-space-2); }
.catalog-categories__arrow { width: 44px; height: 44px; padding: 0; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-btn); background: var(--ds-surface); color: var(--ds-gold-text); font: 22px/1 Tahoma, sans-serif; cursor: pointer; }
.catalog-categories__arrow:hover:not(:disabled) { border-color: var(--ds-gold-line); background: var(--ds-gold-soft); }
.catalog-categories__arrow:disabled { opacity: .3; cursor: default; }
.catalog-categories__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--ds-space-3); margin: 0; padding: 4px 4px 12px; list-style: none; }
.catalog-categories__controls { display: none; }
.catalog-categories__track::-webkit-scrollbar { display: none; }
.catalog-categories__item { display: flex; min-width: 0; }
.catalog-categories__card { display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); background: var(--ds-surface); color: var(--ds-text); text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.catalog-categories__card:hover, .catalog-categories__card[aria-current='page'] { border-color: var(--ds-gold-line); background: var(--ds-gold-soft); color: var(--ds-gold-text); }
.catalog-categories__media { display: grid; width: 92px; height: 92px; place-items: center; overflow: hidden; border-radius: var(--ds-radius-sm); background: var(--ds-raised); color: var(--ds-gold); font-size: var(--ds-fs-28); }
.catalog-categories__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.catalog-categories__media svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.catalog-categories__label { font-size: var(--ds-fs-13); text-align: center; line-height: 1.8; }
.catalog-categories :is(a,button,ul):focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 2px; }
@media (max-width: 640px) {
    .catalog-categories__item { flex-basis: 140px; }
    .catalog-categories__media { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) { .catalog-categories__card { transition: none; } }