.collection-switcher__list{display:flex;gap:var(--spacing-2)}.collection-switcher__item{flex:0 0 auto;display:flex;align-items:center;gap:var(--spacing-2);padding:.375rem 1.125rem .375rem .5rem;border:1px solid var(--collection-switcher-pill-border);border-radius:var(--rounded-full, 9999px);color:rgb(var(--text-color));white-space:nowrap;scroll-snap-align:start;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.collection-switcher__item--no-icon{padding-inline-start:1.125rem}.collection-switcher__icon{width:3rem;height:2.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.collection-switcher__icon img{width:100%;height:100%;object-fit:contain}.collection-switcher__title{font-size:.9375rem;line-height:1.2}.collection-switcher__count{font-size:.75rem;line-height:1.2;opacity:.6}.collection-switcher__count-label{display:none}.collection-switcher__item.is-active{background:var(--collection-switcher-active-background);border-color:var(--collection-switcher-active-background);color:var(--collection-switcher-active-text)}.collection-switcher__item.is-active .collection-switcher__count{opacity:.75}.collection-switcher__item.is-active .collection-switcher__icon img{filter:var(--collection-switcher-active-icon-filter)}@media(hover:hover){.collection-switcher__item:not(.is-active):hover{border-color:rgb(var(--text-color) / .4)}}@media screen and (min-width:700px){.collection-switcher__list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:var(--spacing-3)}.collection-switcher__item{flex-direction:column;justify-content:flex-end;gap:var(--spacing-1);padding:.875rem .75rem;border:0;border-radius:8px;background:var(--collection-switcher-card-background);text-align:center;white-space:normal}.collection-switcher__item--no-icon{padding-inline-start:.75rem}.collection-switcher__icon{width:100%;height:var(--collection-switcher-icon-height)}.collection-switcher__title{font-size:1rem;font-weight:500}.collection-switcher__count{font-size:.8125rem}.collection-switcher__count-label{display:inline}@media(hover:hover){.collection-switcher__item:not(.is-active):hover{background:color-mix(in srgb,var(--collection-switcher-card-background),#000 4%)}}}
/*# sourceMappingURL=/cdn/shop/t/61/assets/collection-switcher.css.map */