/* Category icon row: home (under the hero) and the browse page (current category highlighted). Markup: views/_cat_row.php */
.hv5-cats{--g:#168B3D;--ink:#10243B;padding:34px 0 8px;background:transparent}
html[data-theme="dark"] .hv5-cats{--ink:#eef2f8}
.hv5-catrow{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 8px}
.hv5-catrow a{position:relative;flex:0 0 112px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 2px 10px;border-radius:18px;color:var(--ink);text-align:center;text-decoration:none;transition:background .18s}
.hv5-ico{display:flex;align-items:center;justify-content:center;width:84px;height:66px;border-radius:16px;background:var(--tb);color:var(--tf);font-size:32px;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
html[data-theme="dark"] .hv5-ico{background:color-mix(in srgb,var(--tf) 18%,#0f1a2b)}
.hv5-catrow a:hover .hv5-ico{transform:translateY(-3px);box-shadow:0 12px 20px -14px var(--tf)}
.hv5-catrow b{font:500 15.5px/1.25 'Inter',sans-serif;max-width:118px}

/* current category: filled tile in its own colour, bold label, small bar underneath */
.hv5-catrow a.on .hv5-ico{background:var(--tf);color:#fff;box-shadow:0 12px 22px -12px var(--tf);transform:translateY(-2px)}
html[data-theme="dark"] .hv5-catrow a.on .hv5-ico{background:var(--tf);color:#fff}
.hv5-catrow a.on b{font-weight:700;color:var(--tf)}
html[data-theme="dark"] .hv5-catrow a.on b{color:#fff}
.hv5-catrow a.on:after{content:"";position:absolute;left:50%;bottom:0;width:28px;height:3px;border-radius:3px;background:var(--tf);transform:translateX(-50%)}

/* on listing pages the row is a slimmer strip with a bottom line */
.hv5-cats--page{padding:18px 0 10px;border-bottom:1px solid #e3e8ef;background:#fff}
html[data-theme="dark"] .hv5-cats--page{background:#0b1322;border-color:#26344b}
.hv5-cats--page .hv5-catrow a{flex-basis:104px;gap:8px}
.hv5-cats--page .hv5-ico{width:64px;height:52px;font-size:26px;border-radius:14px}
.hv5-cats--page .hv5-catrow b{font-size:13.5px}

@media(max-width:700px){
  .hv5-cats{padding:24px 0 4px}
  .hv5-catrow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 4px}
  .hv5-catrow a{flex:none;gap:8px;padding:6px 0 8px}
  .hv5-ico{width:56px;height:48px;font-size:24px;border-radius:13px}
  .hv5-catrow b{font-size:11.5px}
  /* browse page on phones: one swipeable line, the current category scrolled into view by the browser */
  .hv5-cats--page{padding:10px 0 6px}
  .hv5-cats--page .hv5-catrow{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:2px;padding:0 4px;scroll-snap-type:x proximity}
  .hv5-cats--page .hv5-catrow::-webkit-scrollbar{display:none}
  .hv5-cats--page .hv5-catrow a{flex:0 0 78px;scroll-snap-align:center}
  .hv5-cats--page .hv5-ico{width:50px;height:44px;font-size:22px}
}
@media(prefers-reduced-motion:reduce){.hv5-ico,.hv5-catrow a{transition:none}.hv5-catrow a:hover .hv5-ico,.hv5-catrow a.on .hv5-ico{transform:none}}