barun-material-swatches{display:block;margin-block:56px 72px}.swatch-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}.swatch-heading h2{margin-bottom:0}.swatch-heading>p{font-size:13px;margin-bottom:4px}.swatch-tools{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:end;border-block:1px solid var(--line);padding:24px 0}.swatch-category{min-height:50px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:transparent;padding:12px 16px;color:var(--ink);text-align:left}.swatch-category>span:last-child{margin-left:auto}.swatch-search{display:flex;align-items:center;gap:20px;margin:0;font-size:13px}.swatch-search>span{white-space:nowrap}.swatch-search input{min-width:0;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 0}.swatch-count{font-size:13px;margin:24px 0}.swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}.swatch-card{display:flex;flex-direction:column;min-width:0;text-align:left;border:0;background:transparent;padding:0;color:var(--ink)}.swatch-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#eeece7;transition:filter .25s ease,transform .25s ease}.swatch-card strong{font-size:20px;line-height:1.4;font-weight:550;letter-spacing:.02em}.swatch-family{display:block;font-size:12px;color:var(--muted);margin:14px 0 5px}.swatch-name{font-size:13px;color:var(--muted);margin-top:5px}.swatch-more{text-align:center;margin-top:40px}.swatch-more[hidden]{display:none}.swatch-empty{grid-column:1/-1;padding:40px 0}.swatch-sheet,.swatch-zoom{color:var(--ink);background:var(--paper);border:0;padding:24px;max-height:90dvh;max-width:calc(100vw - 32px)}.swatch-sheet::backdrop,.swatch-zoom::backdrop{background:#14243bc9}.swatch-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.swatch-dialog-head h2{font-size:22px;margin:0}.swatch-dialog-head p{margin:0;font-size:13px}.swatch-dialog-head button,.swatch-zoom-nav button{border:1px solid var(--line);background:transparent;padding:8px 16px;color:var(--ink)}.swatch-sheet{width:520px}.swatch-options{display:grid;gap:0}.swatch-options button{border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;display:flex;justify-content:space-between;gap:12px;padding:15px 12px}.swatch-options button[aria-pressed=true]{background:#e4ebf3;font-weight:600}.swatch-options span{font-size:13px;color:var(--muted)}.swatch-zoom{width:720px}.swatch-zoom>img{width:100%;max-height:48dvh;object-fit:contain;aspect-ratio:1;background:#eeece7}.swatch-zoom-info{padding-top:20px}.swatch-zoom-info p{margin:0;font-size:13px}.swatch-zoom-info h2{margin:4px 0;font-size:24px}.swatch-zoom-info a{display:inline-block;font-size:13px;border-bottom:1px solid var(--line);margin:12px 0}.swatch-zoom-info small{display:block;color:var(--muted);font-size:12px}.swatch-zoom-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.swatch-zoom-nav span{font-size:12px}.swatch-zoom button:focus-visible,.swatch-sheet button:focus-visible,.swatch-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.swatch-card:hover img{filter:brightness(1.04);transform:translateY(-3px)}.swatch-card:hover strong{color:var(--accent)}.swatch-options button:hover{background:#eaf0f5}.swatch-category:hover{border-color:var(--accent)}}
@media(max-width:900px){.swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.swatch-tools{grid-template-columns:1fr}.swatch-heading>p{display:none}}
@media(max-width:700px){barun-material-swatches{margin-block:40px 48px}.swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.swatch-tools{gap:16px}.swatch-search{display:block}.swatch-search>span{display:block;margin-bottom:6px}.swatch-card strong{font-size:17px}.swatch-family{font-size:11px}.swatch-sheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:78dvh;padding:24px 24px max(28px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0}.swatch-zoom{padding:16px}.swatch-dialog-head{margin-bottom:16px}.swatch-zoom>img{max-height:38dvh}}
@media(prefers-reduced-motion:reduce){.swatch-card img{transition:none}}
.material-cover-grid{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:4/3;gap:4px;overflow:hidden}.material-card .material-cover-grid img{width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover}
.swatch-sheet{overflow:hidden}.swatch-sheet .swatch-options{max-height:calc(78dvh - 120px);overflow-y:auto;overscroll-behavior:contain}.swatch-zoom-nav button:disabled{opacity:.35;cursor:default}