/* Structural styles for the bowl builder. Each mock sets the --bb-* tokens. */
.bb-group { padding-block: 22px; }
.bb-group[hidden], .bb-ing[hidden], .bb-tab[hidden] { display: none; }
.bb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bb-h { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.bb-count { font-size: 15px; color: var(--bb-muted, inherit); }
.bb-opts, .bb-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-opt, .bb-preset {
  font: inherit; font-size: 16px; min-height: 44px; padding: 10px 18px; border: 0; cursor: pointer;
  border-radius: var(--bb-radius, 999px); background: var(--bb-chip); color: var(--bb-ink);
  display: inline-flex; align-items: center; gap: 10px; text-align: left;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
.bb-opt b { font-weight: 700; }
.bb-opt .bb-note { display: block; width: 100%; font-size: 14px; opacity: .85; }
.bb-opts[aria-label="Základ"] .bb-opt { flex-wrap: wrap; row-gap: 2px; max-width: 260px; }
.bb-opt[aria-pressed="true"], .bb-preset[aria-pressed="true"] { background: var(--bb-on); color: var(--bb-on-ink); }
.bb-opt:active, .bb-preset:active { transform: scale(.96); }
.bb-opt:disabled { opacity: .45; cursor: not-allowed; }
@media (hover: hover) { .bb-opt:not([aria-pressed="true"]):not(:disabled):hover, .bb-preset:not([aria-pressed="true"]):hover { background: var(--bb-chip-hover); } }
.bb-opt:focus-visible, .bb-preset:focus-visible, .bb-tab:focus-visible { outline: 3px solid var(--bb-focus, currentColor); outline-offset: 2px; }
.bb-sw { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); flex: none; }
.bb-sw-bowl { width: 22px; height: 22px; }
.bb-flash { min-height: 24px; margin: 8px 0 0; font-size: 15px; opacity: 0; transition: opacity .2s; }
.bb-flash.is-on { opacity: 1; }
.bb-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.bb-tabs::-webkit-scrollbar { display: none; }
.bb-tab { font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; min-height: 44px; padding: 10px 16px; border: 0; cursor: pointer;
  border-radius: var(--bb-radius, 999px); background: transparent; color: var(--bb-ink); }
.bb-tab[aria-selected="true"] { background: var(--bb-on); color: var(--bb-on-ink); }
.bb-panel { padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .bb-opt, .bb-preset { transition: none; } }