.fabric-selector { margin-block: 1.5rem; padding: 1rem; border: 1px solid var(--nj-border); border-radius: var(--nj-radius-sm); min-width: 0; }
.fabric-selector [hidden] { display: none !important; }
.fabric-selector h2 { font-size: 1.2rem; margin-block: 0 1rem; }
.fabric-selector h3 { font-size: 1rem; margin-block: 1rem .75rem; }
.fabric-selector__notice { margin-bottom: 1.25rem; padding: .8rem; border-left: 3px solid var(--nj-accent); background: var(--nj-surface); font-size: .85rem; }
.fabric-selector__notice p { margin-block: .4rem 0; }
.fabric-selector__collections { display: flex; flex-wrap: wrap; gap: .5rem; }
.fabric-selector button { font: inherit; color: var(--nj-ink); cursor: pointer; min-height: 44px; border: 1px solid var(--nj-border); border-radius: .5rem; background: #fff; padding: .5rem .7rem; }
.fabric-selector button:focus-visible { outline: 3px solid var(--nj-accent-dark); outline-offset: 3px; }
.fabric-selector button[aria-pressed=true] { border: 2px solid var(--nj-ink); background: var(--nj-surface); font-weight: 700; }
.fabric-selector__collections button[aria-pressed=true]::before { content: '✓ '; }
.fabric-selector__selected { font-weight: 600; margin-block: 1rem .5rem; overflow-wrap: anywhere; }
.fabric-selector__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(76px,1fr)); gap: .65rem; }
.fabric-selector button.fabric-selector__variant { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .35rem; font-size: .76rem; overflow-wrap: anywhere; min-width: 0; }
.fabric-selector__variant img, .fabric-selector__placeholder { width: 100%; aspect-ratio: 1; height: auto; border-radius: .25rem; object-fit: cover; }
.fabric-selector__placeholder { display: grid; place-items: center; background: #eee; color: #444; }
.fabric-selector__check { position: absolute; right: .25rem; top: .25rem; display: none; background: var(--nj-ink); color: white; border-radius: 50%; width: 1.35rem; height: 1.35rem; text-align: center; }
.fabric-selector__variant[aria-pressed=true] .fabric-selector__check { display: block; }
.fabric-selector__more { margin-top: .8rem; }
.fabric-selector__visualizer img{display:block;max-width:100%;height:auto;margin:12px auto}
.fabric-selector__visualizer-missing{font-size:.875rem;color:#666;margin:12px 0}

/* Native dialogs stay hidden on mobile; its existing inline expansion is retained. */
.fabric-selector__dialog:not([open]) { display: none; }
@media (min-width: 961px) {
  html.fabric-dialog-open { overflow: hidden; }
  .fabric-selector__dialog { width: min(820px, calc(100% - 4rem)); max-height: calc(100dvh - 4rem); margin: auto; padding: 0 1.5rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--nj-border); border-radius: var(--nj-radius); color: var(--nj-ink); background: #fff; box-shadow: 0 24px 80px rgba(18,40,43,.22); }
  .fabric-selector__dialog::backdrop { background: rgba(5,15,16,.65); }
  .fabric-selector__dialog-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem; background: #fff; }
  .fabric-selector__dialog-header h2 { margin: 0; }
  .fabric-selector__dialog .fabric-selector__grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}