/* categories_menu.css */ 
:root{
  --cat-chip-bg: rgba(255,255,255,.08);
  --cat-chip-text: #fff;
  --cat-chip-active-bg: #ffd66b;
  --cat-chip-active-text: #1a1000;
  --cat-chip-hover: rgba(255,255,255,.14);
  --cat-sep-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.4);
}
.catbar-wrap{ padding: 8px 0 4px; }
.catbar-title{ color:#fff; font-family: system-ui,-apple-system,Segoe UI,Roboto; font-weight:800; font-size: clamp(16px,2.2vw,22px); margin:8px 16px 10px; letter-spacing:.2px; }
.catbar{ display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:6px; padding:0 8px 6px; }
.catbtn{ appearance:none; border:0; width:40px; height:40px; border-radius:9999px; background: var(--cat-chip-bg); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow: var(--cat-sep-shadow); transition:.15s; }
.catbtn:hover{ background: var(--cat-chip-hover); transform: translateY(-1px); }
.catbtn[disabled]{ opacity:.35; cursor:default; transform:none; }
.catlist{ overflow:hidden; mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); }
.catlist-inner{ display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; }
.catlist-inner::-webkit-scrollbar{ display:none; }
.cchip{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px; border-radius:9999px; text-decoration:none; background: var(--cat-chip-bg); color: var(--cat-chip-text); font-weight:700; letter-spacing:.2px; box-shadow: var(--cat-sep-shadow); transition:.15s; }
.cchip:hover{ background: var(--cat-chip-hover); transform: translateY(-1px); }
.cchip.active{ background: var(--cat-chip-active-bg); color: var(--cat-chip-active-text); }
@media (max-width:520px){ .catbtn{width:36px;height:36px} .cchip{height:34px;padding:0 14px;font-size:14px} }
/* keep catbar visible below fixed header */
@media(min-width:0){ .catbar-wrap{ margin-top: 0; } }