.color-browser__banner{padding-block:clamp(2rem,5vw,3.5rem);background:var(--color-surface-alt)}.color-browser__banner-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xl)}.color-browser__banner-text{flex:1 1 24rem;max-inline-size:60ch}.color-browser__banner-text>:last-child{margin-block-end:0}.color-browser__banner-image{flex:0 1 34%;inline-size:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:var(--radius)}.color-browser__heading{margin-block-end:var(--space-sm)}.color-browser__subheading{font-size:var(--text-md);color:var(--color-text-muted)}.color-browser__controls{position:sticky;inset-block-start:var(--header-height, 0px);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md) var(--space-xl);padding-block:var(--space-md);margin-block-end:var(--space-md);background:color-mix(in srgb,var(--color-surface) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-block-end:1px solid var(--color-border)}.color-browser__line{display:flex;align-items:center;gap:var(--space-xs)}.color-browser__label{font-size:var(--text-sm);font-weight:600;white-space:nowrap}.color-browser__families{display:flex;flex-wrap:nowrap;gap:var(--space-xs);overflow-x:auto;scrollbar-width:none;padding-block:2px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}.color-browser__families::-webkit-scrollbar{display:none}@media(min-width:1024px){.color-browser__families{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}}.family-tab{flex:0 0 auto;padding:.5em 1.05em;font:inherit;font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);background:transparent;border:1px solid var(--color-border);border-radius:999px;cursor:pointer;white-space:nowrap;transition:color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default)}.family-tab:hover{border-color:var(--color-text);color:var(--color-text)}.family-tab[aria-selected=true]{background:var(--color-text);border-color:var(--color-text);color:var(--color-on-inverse)}.color-browser__count{margin-block:0 var(--space-lg);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-subtle)}.color-browser__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--space-md)}@media(min-width:768px){.color-browser__grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--space-lg)}}.color-browser__item{content-visibility:auto;contain-intrinsic-size:auto 190px}.color-browser__empty,.color-browser__no-results{padding-block:var(--space-3xl);text-align:center;color:var(--color-text-subtle)}.color-browser__no-results .button{margin-block-start:var(--space-md)}.color-browser__disclaimer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-md);margin-block-start:var(--space-2xl);padding:var(--space-md) var(--space-lg);background:var(--sx-panel, var(--color-surface-alt));border-radius:var(--radius);font-size:var(--text-sm);color:var(--color-text-subtle)}.color-browser__disclaimer p{margin:0}.featured-color{display:grid;gap:var(--space-xl);align-items:center}@media(min-width:768px){.featured-color{grid-template-columns:1fr 1fr;gap:var(--space-3xl)}}.featured-color__chip{aspect-ratio:4 / 3;border-radius:var(--radius-lg);background-color:var(--swatch-color, var(--color-surface-alt));background-size:cover;background-position:center;box-shadow:var(--shadow-swatch)}.featured-color__name{margin-block-end:var(--space-xs)}.featured-color__hex{display:inline-block;margin-block-end:var(--space-md);padding:.3em .7em;font-size:var(--text-xs);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);background:var(--color-surface-alt);border-radius:var(--radius)}.featured-color__content .rte+.button{margin-block-start:var(--space-lg)}.color-family__header{margin-bottom:var(--space-xl);max-width:60ch}.color-family__intro{margin-top:var(--space-sm);color:var(--color-text-muted)}.color-family__lines{margin-top:var(--space-2xl)}.color-family__line-list{list-style:none;padding:0;margin:var(--space-sm) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-lg)}.color-browser__refine{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-md)}.swatch[data-swatch-name]:before{content:attr(data-swatch-name);position:absolute;inset-block-end:calc(100% + .5rem);inset-inline-start:50%;translate:-50% 0;z-index:1;padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius);background:var(--color-text);color:var(--color-on-inverse);font-size:var(--text-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out)}.swatch[data-swatch-name]:hover:before,.swatch[data-swatch-name]:focus-visible:before{opacity:1}@media(hover:none){.swatch[data-swatch-name]:before{content:none}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/color-browser.css.map */