:root{--fg-row-title:inherit;--fg-chip-active:;}
.shk-fg .shk-fg-row .shk-fg-row-title{color:var(--fg-row-title,inherit);}
.shk-fg .shk-fg-chip.is-on{background:var(--fg-chip-active,initial);border-color:var(--fg-chip-active,currentColor);}
.shk-fg{--gap:.75rem;--chip-h:32px;--dur:.60s;--ease:cubic-bezier(.22,.61,.36,1)}
.shk-fg-controls{display:flex;justify-content:flex-end;margin:0 0 .5rem 0}
.shk-fg-reset{border:1px solid #ddd;background:#fff;border-radius:10px;padding:6px 10px;font:600 12px/1 system-ui;cursor:pointer}
.shk-fg-reset:hover{background:#fafafa}
.shk-fg-rows{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1rem}
.shk-fg-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;opacity:1;transform:translateY(0);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.shk-fg-row::after{content:'';min-height:1px}
.shk-fg-row-title{font:600 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#666;margin-right:.5rem;text-transform:capitalize;opacity:.75}
.shk-fg-row--prev{opacity:.98;transform:translateY(-2px)}
.shk-fg-row--current{filter:saturate(1.06)}
.shk-fg-row--next{opacity:.95;transform:translateY(2px)}
.shk-fg-chip{height:var(--chip-h);display:inline-flex;align-items:center;gap:.5rem;padding:0 .75rem;border-radius:999px;border:1px solid #ddd;background:#fff;cursor:pointer;font:500 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.shk-fg-chip:hover{transform:translateY(-1px)}
.shk-fg-chip.is-on{border-color:#444;background:#f5f5f5}
.shk-fg-chip.is-disabled{opacity:.5;cursor:default}
.shk-fg-chip .shk-fg-count{opacity:.66;font-weight:600}
.shk-fg-grid{display:grid;gap:var(--gap);grid-auto-flow:dense;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.shk-fg-item{margin:0;will-change:transform,opacity}
.shk-fg-item img{width:100%;height:auto;display:block;border-radius:12px}
@media (prefers-reduced-motion:no-preference){
  .shk-fg-item{transition:transform calc(var(--dur)*1.0) var(--ease),opacity calc(var(--dur)*1.0) var(--ease)}
  .shk-fg-item.is-hiding{opacity:0;transform:scale(.98)}
  .shk-fg-item.is-gone{display:none}
}
/* v7.0.6 fade */
.shk-fg-rows.is-fading .shk-fg-row,
.shk-fg-rows.is-fading .shk-fg-chip,
.shk-fg-rows.is-fading .shk-fg-row-title{opacity:.96;transform:translateY(2px)}
.shk-fg-row, .shk-fg-row-title, .shk-fg-chip{transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}

/* v7.0.7 family colors */
.shk-fg-row.fam--color_family .shk-fg-row-title{color:#7A487C}
.shk-fg-row.fam--mood_family .shk-fg-row-title{color:#3B6CA8}
.shk-fg-row.fam--composition_family .shk-fg-row-title{color:#2E8B75}
.shk-fg-row.fam--environment_family .shk-fg-row-title{color:#6C8A2B}
.shk-fg-row.fam--texture_family .shk-fg-row-title{color:#A8652E}

.shk-fg-chip.chip--color_family{background:#F5EFF7;border-color:#E4D8EA;color:#3C2340}
.shk-fg-chip.chip--color_family.is-on{background:#E9DDF0;border-color:#CDB7D6}

.shk-fg-chip.chip--mood_family{background:#EDF3FA;border-color:#D6E4F3;color:#1F3D68}
.shk-fg-chip.chip--mood_family.is-on{background:#E0ECF7;border-color:#BFD3EA}

.shk-fg-chip.chip--composition_family{background:#EAF6F2;border-color:#CDE8DF;color:#164D40}
.shk-fg-chip.chip--composition_family.is-on{background:#DDF1EA;border-color:#B6DFD2}

.shk-fg-chip.chip--environment_family{background:#F1F7E9;border-color:#DBE8C6;color:#344A13}
.shk-fg-chip.chip--environment_family.is-on{background:#E8F1DA;border-color:#C8DEAC}

.shk-fg-chip.chip--texture_family{background:#FBF1EA;border-color:#EED9CC;color:#5A2E14}
.shk-fg-chip.chip--texture_family.is-on{background:#F6E6DA;border-color:#E4C7AF}

.shk-fg-chip:hover{filter:saturate(1.06)}
@media (prefers-color-scheme: dark){
  .shk-fg-chip.chip--color_family{background:#2b2330;border-color:#3b3242;color:#e8dff0}
  .shk-fg-chip.chip--color_family.is-on{background:#3a2e42;border-color:#564a5e}
  .shk-fg-chip.chip--mood_family{background:#1f2a38;border-color:#2c3c50;color:#deebfb}
  .shk-fg-chip.chip--mood_family.is-on{background:#29384b;border-color:#3a4f69}
  .shk-fg-chip.chip--composition_family{background:#1b2f2a;border-color:#24433b;color:#dbf2ec}
  .shk-fg-chip.chip--composition_family.is-on{background:#224239;border-color:#2f5a50}
  .shk-fg-chip.chip--environment_family{background:#222e16;border-color:#2f3e20;color:#eaf4d9}
  .shk-fg-chip.chip--environment_family.is-on{background:#2a3a1e;border-color:#3c522b}
  .shk-fg-chip.chip--texture_family{background:#3a2a22;border-color:#4d3a2f;color:#fdeee4}
  .shk-fg-chip.chip--texture_family.is-on{background:#4a372c;border-color:#654b3f}
}

/* v7.0.8 pressed */
.shk-fg-chip.was-pressed{transform:translateY(1px) scale(.99)}

/* v7.1.2 — reserve elegant space to prevent grid jumping */
.shk-fg-rows{
  /* Reserve vertical space for up to ~2.5 rows of chips + titles */
  min-height: 120px;
  transition: min-height var(--dur) var(--ease);
}
@media (max-width: 600px){
  .shk-fg-rows{ min-height: 96px; }
}

/* v7.1.2 — per-family active chip styles (pressed/selected) */
.shk-fg-chip.chip--color_family.is-on{background:#D8BFD8;border-color:#B07DB5;color:#231726;box-shadow:inset 0 2px 4px rgba(0,0,0,.08);transform:scale(.98)}
.shk-fg-chip.chip--mood_family.is-on{background:#C7DAF2;border-color:#9DBCE6;color:#132945;box-shadow:inset 0 2px 4px rgba(0,0,0,.08);transform:scale(.98)}
.shk-fg-chip.chip--composition_family.is-on{background:#BFE4D8;border-color:#9AD2C2;color:#0f3a31;box-shadow:inset 0 2px 4px rgba(0,0,0,.08);transform:scale(.98)}
.shk-fg-chip.chip--environment_family.is-on{background:#D1E0B2;border-color:#B7CD8C;color:#24340e;box-shadow:inset 0 2px 4px rgba(0,0,0,.08);transform:scale(.98)}
.shk-fg-chip.chip--texture_family.is-on{background:#E2C1A7;border-color:#D2A989;color:#3f2717;box-shadow:inset 0 2px 4px rgba(0,0,0,.08);transform:scale(.98)}

@media (prefers-color-scheme: dark){
  .shk-fg-chip.chip--color_family.is-on{background:#3b2f42;border-color:#5a4764;color:#ece6f1}
  .shk-fg-chip.chip--mood_family.is-on{background:#2a3b52;border-color:#3f5a7b;color:#e6effb}
  .shk-fg-chip.chip--composition_family.is-on{background:#25473f;border-color:#35685c;color:#e4f6f1}
  .shk-fg-chip.chip--environment_family.is-on{background:#2f3e20;border-color:#42582a;color:#edf5df}
  .shk-fg-chip.chip--texture_family.is-on{background:#4a372c;border-color:#6a4f41;color:#feefe6}
}
/* refine transitions for active change */
.shk-fg-chip{transition:transform .28s var(--ease),opacity .28s var(--ease),background-color .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease)}

/* v7.2.0 — Admin color overrides via CSS variables */
.shk-fg{
  --chip-active-override: var(--shk-fg-chip-active-override, transparent);
  --row-title-active-override: var(--shk-fg-row-title-active-override, transparent);
}
.shk-fg .shk-fg-chip.is-on{
  background: var(--chip-active-override, initial);
}
.shk-fg .shk-fg-row.shk-fg-row--current .shk-fg-row-title{
  color: var(--row-title-active-override, inherit);
}
.shk-fg .shk-fg-chip:active{
  filter: brightness(.96);
  transform: scale(.97);
}