/* Shared pieces used on several pages (loaded everywhere): section headings, "view all" links, category cards, empty states, rating stars. */
.shd{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:20px}
.shd h2{margin:0;font-size:clamp(22px,3vw,28px);font-weight:800}
.shd p{margin:4px 0 0;color:var(--m);font-size:14px}
.va{font-size:13px;font-weight:600;color:var(--bl);white-space:nowrap}
.va i{font-style:normal;display:inline-block;transition:transform .2s}
.va:hover i{transform:translateX(4px)}
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 8px 16px;background:var(--bg);border:1px solid rgba(15,23,42,.05);border-radius:6px;text-align:center;transition:transform .3s,box-shadow .3s}
.cc:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(15,23,42,.12)}
.cc .ci{width:64px;height:64px;border-radius:50%;background:var(--ci);display:grid;place-items:center;margin-bottom:4px;transition:transform .35s}
.cc .ci img{width:100%;height:100%;border-radius:50%;display:block}
.cc:hover .ci{transform:scale(1.12) rotate(-6deg)}
.cc b{font-size:13.5px;font-weight:700}
.cc small{font-size:13px;color:var(--m)}
.empty{padding:30px;text-align:center;color:var(--m);border:1px dashed var(--l);border-radius:10px;grid-column:1/-1}
@media(max-width:620px){.shd{align-items:flex-start;flex-direction:column;gap:6px}}
/* Categories: 6 in a row from tablets up; 3 on phones; 2 on very small screens */
@media(max-width:1000px){.cats{gap:10px}.cc{padding:14px 4px 12px}.cc .ci{width:56px;height:56px}.cc b{font-size:12.5px}.cc small{font-size:12px}}
@media(max-width:759px){.cats{grid-template-columns:repeat(3,1fr);gap:12px}.cc .ci{width:60px;height:60px}}
@media(max-width:380px){.cats{grid-template-columns:repeat(2,1fr)}}
.stars .off{color:#d8dee8}