/* Chips */
.cats-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.cats-chips a { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .85rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: .98rem; transition: all .2s ease; }
.cats-chips a small { opacity: .7; font-weight: 500; }
.cats-chips a:hover, .cats-chips a.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Text menu */
.sec-categories--links { padding: 0 !important; border-bottom: 1px solid var(--border); background: var(--surface, #fff); }
.sec-categories--links .sec-head { margin: 1.25rem 0 0; justify-content: center; text-align: center; }
.cats-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2rem; padding: 1.1rem 0; }
.cats-links a { color: var(--muted); font-size: .93rem; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.cats-links a:hover, .cats-links a.active { color: var(--dark); border-color: var(--dark); }

/* Tall colour cards */
.cats-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.cats-card { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; color: #fff; overflow: hidden; border-radius: var(--radius);
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.45)), linear-gradient(calc(140deg + var(--i) * 40deg), var(--secondary), var(--primary)); transition: transform .25s ease; }
.cats-card:hover { color: #fff; transform: translateY(-4px); }
.cats-card__name { font-size: 1.15rem; font-weight: 700; line-height: 1.15; }
.cats-card__count { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: .25rem; }

/* Circles */
.cats-circles { display: flex; gap: 1.25rem; overflow-x: auto; padding: .25rem 0 .5rem; scrollbar-width: thin; }
.cats-circle { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); }
.cats-circle__icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; margin-bottom: .45rem;
    background: linear-gradient(calc(140deg + var(--i) * 45deg), var(--primary), var(--secondary)); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--primary-100); transition: transform .25s ease; }
.cats-circle:hover { color: var(--primary); }
.cats-circle:hover .cats-circle__icon { transform: scale(1.06); }
.cats-circle__name { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.cats-circle__count { font-size: .78rem; color: var(--muted); margin-top: .1rem; }

/* Numbered list */
.cats-list { border-top: 2px solid var(--dark); }
.cats-row { display: grid; grid-template-columns: 3rem 1fr auto 2rem; align-items: center; gap: 1rem; padding: .7rem .75rem; border-bottom: 2px solid var(--dark); color: var(--dark); transition: all .2s ease; }
.cats-row:hover { background: var(--primary); color: #fff; padding-inline-start: 1.5rem; }
.cats-row__num { font-weight: 800; font-size: 1.1rem; opacity: .5; }
.cats-row__name { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.cats-row__count { font-size: .93rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }

@media (max-width: 575.98px) {
    .cats-row { grid-template-columns: 2.5rem 1fr 1.5rem; }
    .cats-row__count { display: none; }
}