/* Header category bar, shared by the storefront (index.html), the server
   rendered category/product pages (ssr.py) and the adult section (adult.html,
   adult_routes.py). Markup:

   <div class="subbar"><div class="catbar" data-catbar>
     <button class="catbar-arrow catbar-prev" type="button" aria-label="Scroll categories left" hidden>...</button>
     <div class="catbar-track">...chips...</div>
     <button class="catbar-arrow catbar-next" type="button" aria-label="Scroll categories right" hidden>...</button>
   </div></div>

   The track scrolls on its own (swipe, trackpad, shift+wheel) with no JS. The
   arrows start hidden and static/catbar.js shows them only when there is more
   to see in that direction. */
.subbar{background:var(--header-2);color:#c4cdd8}
.catbar{position:relative;max-width:1240px;margin:0 auto}
.catbar-track{display:flex;gap:4px;padding:7px 24px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;scroll-padding-inline:44px}
.catbar-track::-webkit-scrollbar{display:none}
.catbar-track>.chip{flex:0 0 auto;scroll-snap-align:start}
.chip{display:inline-flex;align-items:center;white-space:nowrap;background:transparent;border:1px solid transparent;
  color:#c4cdd8;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;transition:all .15s}
.chip:hover{background:rgba(255,255,255,.06);color:#fff}
.chip.active{background:#fff;color:var(--header);font-weight:700}

/* Each arrow doubles as the edge fade: a gradient from the bar color to
   transparent, so a chip sliding under it fades out instead of being cut. */
.catbar-arrow{position:absolute;top:0;bottom:0;z-index:1;width:56px;display:flex;align-items:center;
  border:none;padding:0 8px;color:#fff;cursor:pointer;font-family:inherit}
.catbar-arrow[hidden]{display:none}
.catbar-prev{left:0;justify-content:flex-start;
  background:linear-gradient(to right,var(--header-2) 45%,rgba(24,34,48,0))}
.catbar-next{right:0;justify-content:flex-end;
  background:linear-gradient(to left,var(--header-2) 45%,rgba(24,34,48,0))}
.catbar-arrow span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);transition:background .15s}
.catbar-arrow:hover span{background:rgba(255,255,255,.18)}
.catbar-arrow:focus{outline:none}
.catbar-arrow:focus-visible span{outline:2px solid var(--cta);outline-offset:2px}
.catbar-arrow svg{width:14px;height:14px}