.ht-home-cats{
  --hc-gap:12px;
  --hc-cols:2;
  --hc-icon:56px;
  --dot-size:9px;
  --dot-hit:24px;
  --dot-gap:6px;
  --dot-bg:color-mix(in oklab,var(--fg),transparent 86%);
  --dot-border:color-mix(in oklab,var(--fg),transparent 70%);
  --dot-active:var(--brand-500);
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-2);
  backdrop-filter:saturate(120%) blur(8px)
}
@media (min-width:640px){.ht-home-cats{--hc-cols:4}}
@media (min-width:1024px){.ht-home-cats{--hc-cols:6}}

:root[data-theme="dark"] .ht-home-cats{
  --dot-bg:color-mix(in oklab,#fff,transparent 84%);
  --dot-border:color-mix(in oklab,#fff,transparent 65%);
  --dot-active:color-mix(in oklab,var(--brand-300),transparent 0%)
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ht-home-cats{
    --dot-bg:color-mix(in oklab,#fff,transparent 84%);
    --dot-border:color-mix(in oklab,#fff,transparent 65%);
    --dot-active:color-mix(in oklab,var(--brand-300),transparent 0%)
  }
}

.ht-home-cats-inner{display:flex;flex-direction:column;gap:12px}

.ht-home-cats-track{
  direction:rtl;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--hc-cols) - 1)*var(--hc-gap))/var(--hc-cols));
  gap:var(--hc-gap);
  align-items:stretch;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  scrollbar-width:none;
  -ms-overflow-style:none
}
.ht-home-cats-track::-webkit-scrollbar{display:none}

.ht-home-cat-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  backdrop-filter:saturate(120%) blur(6px);
  padding:14px;
  color:var(--fg);
  touch-action:pan-x pan-y
}
:root[data-theme="dark"] .ht-home-cat-card{background:var(--surface)}
.ht-home-cat-card.is-static{cursor:default}
.ht-home-cat-card.is-static:focus{outline:none}
.ht-home-cat-icon{width:var(--hc-icon);height:var(--hc-icon);display:inline-flex}
.ht-home-cat-icon img{width:100%;height:100%;object-fit:contain}
.ht-home-cat-title{font-size:14px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}

.ht-home-cats-dots{
  display:flex;
  gap:var(--dot-gap);
  justify-content:center;
  align-items:center;
  direction:rtl;
  margin-top:10px;
  min-height:var(--dot-hit)
}
.ht-home-cats-dots button{
  position:relative;
  width:var(--dot-hit);
  height:var(--dot-hit);
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation
}
.ht-home-cats-dots button::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:var(--dot-size);height:var(--dot-size);
  transform:translate(-50%,-50%);
  border-radius:9999px;
  background:var(--dot-bg);
  border:1px solid var(--dot-border);
  box-shadow:var(--shadow-sm);
  transition:width .2s ease,height .2s ease,background-color .2s ease,border-color .2s ease,border-radius .2s ease,transform .2s ease
}
.ht-home-cats-dots button:is(:hover,:focus-visible)::after{transform:translate(-50%,-50%) scale(1.06);border-color:var(--ring)}
.ht-home-cats-dots button.is-active::after{width:22px;height:var(--dot-size);border-radius:9999px;background:var(--dot-active);border-color:var(--dot-active)}