/* ==========================================================================
   Swooop design system
   Tokens and component recipes extracted from Mobbin's production CSS
   (Example Websites/Discover iOS apps _ Mobbin_files/0s7m1hky776ff.css)
   and its markup. Values are kept 1:1 unless noted.
   ========================================================================== */

/* ---------- 1. Primitives (HSL triplets, used as hsl(var(--x))) ---------- */
:root {
  --neutral-0: 0 0% 100%;
  --neutral-5: 0 0% 96%;
  --neutral-10: 0 0% 93%;
  --neutral-20: 0 0% 86%;
  --neutral-30: 0 0% 76%;
  --neutral-40: 0 0% 68%;
  --neutral-50: 0 0% 53%;
  --neutral-60: 0 0% 44%;
  --neutral-70: 0 0% 36%;
  --neutral-80: 0 0% 25%;
  --neutral-90: 0 0% 15%;
  --neutral-95: 0 0% 12%;
  --neutral-100: 0 0% 8%;

  --opacity-white-4: 0 0% 100% / 4%;
  --opacity-white-6: 0 0% 100% / 6%;
  --opacity-white-8: 0 0% 100% / 8%;
  --opacity-white-10: 0 0% 100% / 10%;
  --opacity-white-12: 0 0% 100% / 12%;
  --opacity-white-16: 0 0% 100% / 16%;
  --opacity-white-24: 0 0% 100% / 24%;
  --opacity-white-96: 0 0% 100% / 96%;

  --opacity-black-48: 0 0% 15% / 48%;
  --opacity-black-64: 0 0% 15% / 64%;
  --opacity-black-88: 0 0% 15% / 88%;

  --blue-50: 208 100% 53%;
  --blue-60: 212 100% 50%;
  --blue-70: 216 100% 50%;

  /* Motion */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: .15s;      /* Tailwind default used by transition-colors */
  --duration-slow: .3s;       /* duration-300 on cells / cell buttons */

  /* Type: Manrope (Google Fonts, variable 200–800) covers Mobbin's 456 / 600 / 652 weights. */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --weight-regular: 456;      /* Mobbin's body weight (variable font) */
  --weight-bold: 600;
  --weight-title: 652;

  /* Layout */
  --container-x-padding: 16px;
  --navbar-height: 64px;
}
@media (min-width: 720px)  { :root { --container-x-padding: 24px; --navbar-height: 72px; } }
@media (min-width: 1024px) { :root { --container-x-padding: 32px; } }
@media (min-width: 1536px) { :root { --container-x-padding: 80px; } }

/* ---------- 2. Semantic tokens: dark theme (Mobbin .dark) ---------- */
:root {
  --text-primary: var(--neutral-0);
  --text-secondary: var(--neutral-40);
  --text-tertiary: var(--neutral-50);
  --text-inverse: var(--neutral-100);
  --text-disabled: var(--neutral-60);

  --background-primary: var(--neutral-100);
  --background-primary-hover: var(--opacity-white-6);
  --background-secondary: var(--opacity-white-6);
  --background-secondary-hover: var(--opacity-white-10);
  --background-tertiary: var(--opacity-white-8);
  --background-tertiary-hover: var(--opacity-white-12);
  --background-quaternary: var(--opacity-white-16);
  --background-inverse: var(--neutral-0);
  --background-inverse-hover: var(--neutral-10);
  --background-modal: var(--neutral-95);
  --background-overlay: 0 0% 0% / 80%;

  --border-secondary: var(--opacity-white-8);
  --border-secondary-hover: var(--opacity-white-16);
  --border-tertiary: var(--opacity-white-16);
  --border-tertiary-hover: var(--opacity-white-24);
  --divider: var(--opacity-white-6);

  --glass-text-primary: var(--neutral-0);
  --glass-background-primary-inverse: var(--opacity-black-48);
  --glass-background-primary-inverse-hover: var(--opacity-black-64);
  --glass-background-unique-badge: 0 0% 45% / 56%;
  --glass-background-unique-cell-button: 0 0% 46% / 48%;
  --glass-background-unique-cell-button-hover: 0 0% 46% / 56%;
  --glass-blur: 24px;

  --focus-ring: 0 0 0 4px hsl(var(--blue-60) / 50%);   /* ring-4 ring-[hsl(var(--blue-60)/50%)] */
  --shadow-image-inset: inset 0 0 0 .5px #ffffff29;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  background: hsl(var(--background-primary));
  color: hsl(var(--text-primary));
  font-family: var(--font-sans);
  font-size: 16px; line-height: 22px; letter-spacing: .2px; font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); }

/* ---------- 4. Typography (Mobbin text-* classes, 1:1) ---------- */
.text-title-1   { font-size: 44px; line-height: 48px; letter-spacing: -.4px; font-weight: var(--weight-title); }
.text-title-2   { font-size: 32px; line-height: 36px; letter-spacing: 0;     font-weight: var(--weight-title); }
.text-title-3   { font-size: 24px; line-height: 30px; letter-spacing: 0;     font-weight: var(--weight-title); }
.text-body      { font-size: 16px; line-height: 22px; letter-spacing: .2px;  font-weight: var(--weight-regular); }
.text-body-bold { font-size: 16px; line-height: 22px; letter-spacing: .2px;  font-weight: var(--weight-bold); }
.text-compact      { font-size: 14px; line-height: 20px; letter-spacing: .2px; font-weight: var(--weight-regular); }
.text-compact-bold { font-size: 14px; line-height: 20px; letter-spacing: .2px; font-weight: var(--weight-bold); }
.text-caption      { font-size: 12px; line-height: 16px; letter-spacing: .2px; font-weight: var(--weight-regular); }
.text-caption-bold { font-size: 12px; line-height: 16px; letter-spacing: .2px; font-weight: var(--weight-bold); }
.text-primary   { color: hsl(var(--text-primary)); }
.text-secondary { color: hsl(var(--text-secondary)); }
.text-tertiary  { color: hsl(var(--text-tertiary)); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 5. Layout ---------- */
.container {
  width: 100%;
  /* Full width: content spans the viewport; only the side padding applies (Mobbin caps at 1280px) */
  margin-inline: auto;
  padding-inline: var(--container-x-padding);
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---------- Button ----------
   Mobbin <Button>: relative rounded-full, colour transition, ease-out.
   Sizes:    .btn-md = h-36 text-compact-bold px-12   (nav, toolbar)
             .btn-lg = h-44 text-body-bold    px-12   (cell / hero)
   Variants: .btn-ghost   transparent → background-primary-hover
             .btn-outline transparent + 1px inset border-tertiary → hover border + bg
             .btn-inverse white fill (background-inverse) → neutral-10
             .btn-glass   frosted (on top of media)
             .btn-cell    frosted cell button (on top of previews)            */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 9999px;
  white-space: nowrap;
  transition-property: color, background-color, box-shadow;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}
.btn-md { height: 36px; padding-inline: 12px; font-size: 14px; line-height: 20px; font-weight: var(--weight-bold); }
.btn-lg { height: 44px; padding-inline: 12px; font-size: 16px; line-height: 22px; font-weight: var(--weight-bold); }
.btn-sm { height: 28px; padding-inline: 10px; font-size: 12px; line-height: 16px; font-weight: var(--weight-bold); } /* Swooop addition */

.btn-ghost { background: transparent; color: hsl(var(--text-primary)); }
.btn-ghost:hover, .btn-ghost:active { background: hsl(var(--background-primary-hover)); }

.btn-ghost-muted { background: transparent; color: hsl(var(--text-tertiary)); }   /* nav link style: Apps / Sites */
.btn-ghost-muted:hover { color: hsl(var(--text-primary)); }

.btn-outline { background: transparent; color: hsl(var(--text-primary)); box-shadow: inset 0 0 0 1px hsl(var(--border-tertiary)); }
.btn-outline:hover, .btn-outline:active { background: hsl(var(--background-primary-hover)); box-shadow: inset 0 0 0 1px hsl(var(--border-tertiary-hover)); }

.btn-inverse { background: hsl(var(--background-inverse)); color: hsl(var(--text-inverse)); }
.btn-inverse:hover, .btn-inverse:active { background: hsl(var(--background-inverse-hover)); }

.btn-glass {
  background: hsl(var(--glass-background-primary-inverse)); color: hsl(var(--glass-text-primary));
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.btn-glass:hover, .btn-glass:active { background: hsl(var(--glass-background-primary-inverse-hover)); }

.btn-cell {
  background: hsl(var(--glass-background-unique-cell-button)); color: hsl(var(--glass-text-primary));
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.btn-cell:hover, .btn-cell:active { background: hsl(var(--glass-background-unique-cell-button-hover)); }

/* Icon-only button (square footprint, still fully rounded). Used for Save (heart). */
.btn-icon { width: 36px; height: 36px; padding: 0; }
.icon-heart {
  display: block;
  fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linejoin: round;
  transition: fill var(--duration-fast) var(--ease-out);
}
.btn[aria-pressed="true"] .icon-heart { fill: currentColor; animation: heart-pop var(--duration-slow) var(--ease-out); }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn-outline:focus-visible { box-shadow: inset 0 0 0 1px hsl(var(--border-tertiary)), var(--focus-ring); }

/* ---------- Search bar ----------
   Mobbin: h-40 (h-48 ≥840) rounded-24 bg-background-tertiary text-text-tertiary
   px-16 (px-20 ≥840), hover → background-tertiary-hover                       */
.search-bar {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-width: 0; height: 40px; padding-inline: 16px 12px;
  border-radius: 24px;
  background: hsl(var(--background-tertiary));
  color: hsl(var(--text-tertiary));
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.search-bar:hover { background: hsl(var(--background-tertiary-hover)); }
.search-bar .kbd {
  margin-left: auto; flex: none;
  min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 6px;
  display: inline-grid; place-items: center;
  font: 500 12px/1 var(--font-mono);
  background: hsl(var(--background-tertiary)); color: hsl(var(--text-secondary));
}
@media (min-width: 840px) { .search-bar { height: 48px; gap: 12px; padding-inline: 20px 14px; } }

/* ---------- Glass badge ----------
   Mobbin <GlassBadge>: rounded-8 px-8 py-4 text-caption-bold, unique-badge glass */
.badge-glass {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 8px;
  font-size: 12px; line-height: 16px; letter-spacing: .2px; font-weight: var(--weight-bold);
  background: hsl(var(--glass-background-unique-badge)); color: hsl(var(--glass-text-primary));
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}

/* ---------- Underline tabs ----------
   Mobbin discover tabs: gap-x-24, py-4 text-body-bold border-b-2;
   active = text-primary + border-text-primary, inactive = text-tertiary → hover text-primary */
.tabs { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; padding-block: 4px; white-space: nowrap;
  font-size: 16px; line-height: 22px; letter-spacing: .2px; font-weight: var(--weight-bold);
  color: hsl(var(--text-tertiary));
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out);
}
.tab:hover { color: hsl(var(--text-primary)); }
.tab[aria-current="page"], .tab[aria-selected="true"] { color: hsl(var(--text-primary)); border-bottom-color: hsl(var(--text-primary)); }

/* ---------- Category index (Mobbin desktop browse block) ----------
   label: text-compact text-secondary; items: text-title-3, py-px;
   hovering one item dims its siblings to text-tertiary (duration-300)          */
.cat-index { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; }
.cat-index h2 { font-size: 14px; line-height: 20px; letter-spacing: .2px; font-weight: var(--weight-regular); color: hsl(var(--text-secondary)); margin-bottom: 8px; }
.cat-index ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.cat-index li { width: fit-content; padding-block: 1px; font-size: 24px; line-height: 30px; font-weight: var(--weight-title); color: hsl(var(--text-primary)); transition: color var(--duration-slow) var(--ease-out); }
.cat-index ul:has(:hover) > li:not(:hover) { color: hsl(var(--text-tertiary)); }

/* ---------- Navbar ----------
   Mobbin: sticky header; content grid = [min-content auto min-content] on mobile,
   [1fr minmax(auto,520px) 1fr] ≥840; gap-x-8 → 12 (≥720); py-4 ≥840;
   border-b border-divider below 840 only.                                      */
.navbar-header { position: sticky; top: 0; z-index: 10; background: hsl(var(--background-primary)); }
/* Divider is hidden at the top of the page and fades in once content scrolls under the header (.is-scrolled, set in JS) */
.navbar-root { border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) var(--ease-out); }
.navbar-header.is-scrolled .navbar-root { border-bottom-color: hsl(var(--border-tertiary)); }   /* 16% white: Mobbin's 6% divider is invisible on this base */
.navbar {
  display: grid; align-items: center;
  grid-template-columns: 1fr auto;
  grid-template-areas: "logo actions" "search search";
  column-gap: 8px;
  padding-block: 12px 4px;
}
.navbar-logo { grid-area: logo; display: inline-flex; align-items: center; height: 36px; color: hsl(var(--text-primary)); }
.navbar-logo svg { height: 22px; width: auto; display: block; }
.navbar-search { grid-area: search; padding: 8px 4px; overflow: hidden; }
.navbar-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
@media (min-width: 720px) { .navbar { column-gap: 12px; } }
@media (min-width: 840px) {
  .navbar {
    grid-template-columns: 1fr minmax(auto, 520px) 1fr;
    grid-template-areas: "logo search actions";
    min-height: var(--navbar-height);
    padding-block: 4px;
  }
}

/* ---------- Effect grid (Mobbin AppsGrid recipe, capped at 3 columns) ---------- */
.effect-grid-wrap { container-type: inline-size; }
.effect-grid {
  list-style: none; padding: 0;
  display: grid; align-content: start;
  --column-gap: 12px;
  --min-column-width: 300px;
  --max-column-count: 3;    /* Mobbin: 5 */
  --total-gap-width: calc((var(--max-column-count) - 1) * var(--column-gap));
  --max-column-width: calc((100% - var(--total-gap-width)) / var(--max-column-count));
  column-gap: var(--column-gap);
  row-gap: 32px;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--min-column-width), var(--max-column-width)), 1fr));
}
@container (min-width: 720px)  { .effect-grid { --column-gap: 16px; row-gap: 48px; } }
@container (min-width: 840px)  { .effect-grid { --min-column-width: 315px; } }
@container (min-width: 1280px) { .effect-grid { --min-column-width: 360px; } }

/* ---------- Effect cell (Mobbin AppCell) ----------
   li: relative flex-col gap-y-16
   preview: rounded-28 bg-background-secondary → hover/focus-within bg-background-tertiary (300ms ease-out)
   badge: absolute top-16 left-16; action: absolute top-16 right-16,
          opacity 0 → 1 on hover/focus-within (300ms ease-out)
   caption: title text-body-bold, subtitle text-compact text-secondary, truncated  */
.cell { position: relative; display: flex; flex-direction: column; gap: 16px; }
.cell-link { position: absolute; inset: 0; z-index: 1; border-radius: 28px; }
.cell-preview {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1;     /* Swooop: every effect preview is a perfect square (Mobbin uses 11/14 for phones) */
  border-radius: 28px;
  background: hsl(var(--background-secondary));
  display: grid; place-items: center;
  transition: background-color var(--duration-slow) var(--ease-out);
}
.cell:hover .cell-preview, .cell:focus-within .cell-preview { background: hsl(var(--background-tertiary)); }
.cell-badge { position: absolute; top: 16px; left: 16px; pointer-events: none; }
/* Heart: shown only while the cell is hovered (or keyboard-focused), at every width, saved or not */
.cell-action {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.cell:hover .cell-action, .cell:focus-within .cell-action { opacity: 1; pointer-events: auto; }
.cell-caption { display: flex; flex-direction: column; min-width: 0; pointer-events: none; }
.cell-title { font-size: 16px; line-height: 22px; letter-spacing: .2px; font-weight: var(--weight-bold); }
.cell-subtitle { font-size: 14px; line-height: 20px; letter-spacing: .2px; font-weight: var(--weight-regular); color: hsl(var(--text-secondary)); }

/* Wireframe-only placeholder for a live preview */
.preview-placeholder {
  width: 56%; aspect-ratio: 1 / 1; border-radius: 16px;
  border: 1.5px dashed hsl(var(--border-tertiary));
  display: grid; place-items: center;
  font-size: 12px; line-height: 16px; color: hsl(var(--text-tertiary));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* ---------- Category index heading: arrow slides in on hover; click opens the browse dialog ---------- */
.cat-index-label {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 14px; line-height: 20px; letter-spacing: .2px; font-weight: var(--weight-regular);
  color: hsl(var(--text-secondary));
  transition: color var(--duration-fast) var(--ease-out);
}
.cat-index-label:hover, .cat-index-label:focus-visible { color: hsl(var(--text-primary)); }
.cat-index-arrow {
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.cat-index-label:hover .cat-index-arrow, .cat-index-label:focus-visible .cat-index-arrow { opacity: 1; transform: none; }

/* ---------- Chip (recent / suggested searches) ---------- */
.chip {
  flex: none; display: inline-flex; align-items: center; max-width: 200px;
  height: 36px; padding-inline: 14px; border-radius: 9999px;
  font-size: 14px; line-height: 20px; letter-spacing: .2px; font-weight: var(--weight-bold);
  background: hsl(var(--background-tertiary)); color: hsl(var(--text-primary));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.chip:hover { background: hsl(var(--background-tertiary-hover)); }

/* ---------- Side item (dialog sidebar) ---------- */
.side-item {
  display: flex; align-items: center; width: 100%; height: 40px; padding-inline: 16px;
  border-radius: 12px; text-align: left; white-space: nowrap;
  font-size: 16px; line-height: 22px; letter-spacing: .2px; font-weight: var(--weight-bold);
  color: hsl(var(--text-primary));
  transition: background-color var(--duration-fast) var(--ease-out);
}
.side-item:hover { background: hsl(var(--background-primary-hover)); }
.side-item[aria-selected="true"] { background: hsl(var(--background-tertiary)); }

/* ---------- List row (dialog results: name + count) ---------- */
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 40px; padding-inline: 16px; border-radius: 12px;
  font-size: 16px; line-height: 22px; letter-spacing: .2px; font-weight: var(--weight-bold);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.list-row:hover, .list-row:focus-visible { background: hsl(var(--background-tertiary)); }
.list-row .meta { flex: none; font-size: 14px; line-height: 20px; font-weight: var(--weight-regular); color: hsl(var(--text-secondary)); }

/* ---------- Browse dialog (Mobbin search / browse sheet) ---------- */
html:has(.browse-dialog[open]) { overflow: hidden; }
.browse-dialog {
  padding: 0; border: 0; margin: auto;
  width: min(880px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 64px));
  max-width: none; max-height: none;
  border-radius: 32px; overflow: hidden;
  background: hsl(var(--neutral-95) / 92%);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  color: hsl(var(--text-primary));
  box-shadow: 0 12px 80px #00000029, inset 0 0 0 1px hsl(var(--border-secondary));
}
.browse-dialog[open] { display: flex; flex-direction: column; animation: dialog-in .2s var(--ease-out); }
.browse-dialog::backdrop { background: hsl(0 0% 0% / 60%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.bd-search { display: flex; align-items: center; gap: 12px; padding: 20px 20px 0 32px; }
.bd-input {
  flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent;
  font: var(--weight-regular) 20px/28px var(--font-sans); letter-spacing: .2px; color: hsl(var(--text-primary));
}
.bd-input::placeholder { color: hsl(var(--text-tertiary)); }
.bd-input::-webkit-search-cancel-button { display: none; }
.bd-input:focus-visible { box-shadow: none; }

.bd-chips { display: flex; gap: 8px; padding: 20px 32px 8px; overflow-x: auto; scrollbar-width: none; }
.bd-chips::-webkit-scrollbar { display: none; }

.bd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 16px 16px 16px 16px; }
.bd-side { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding-left: 16px; }
.bd-panel { overflow-y: auto; padding-right: 8px; overscroll-behavior: contain; }
.bd-panel-label { padding: 8px 16px; font-size: 14px; line-height: 20px; letter-spacing: .2px; color: hsl(var(--text-secondary)); }
.bd-empty { padding: 8px 16px; color: hsl(var(--text-tertiary)); }

@media (max-width: 719px) {
  .browse-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
  .bd-search { padding: 12px 12px 0 20px; }
  .bd-chips { padding: 16px 20px 4px; }
  .bd-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; padding: 8px 8px 8px; }
  .bd-side { flex-direction: row; overflow-x: auto; overflow-y: visible; scrollbar-width: none; padding-left: 12px; gap: 4px; }
  .bd-side::-webkit-scrollbar { display: none; }
  .bd-side .side-item { width: auto; flex: none; height: 36px; padding-inline: 14px; border-radius: 9999px; font-size: 14px; }
}

/* ---------- Utility: visually hidden but read by search engines and screen readers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }