.byte-sub-collections-metafield{margin-top:1rem;width:100%}.byte-sub-collections-metafield__track{display:flex;flex-wrap:nowrap;gap:var(--byte-sub-collections-gap);padding-bottom:.25rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.byte-sub-collections-metafield__track::-webkit-scrollbar{height:6px}.byte-sub-collections-metafield__track::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--color-primary) 18%,var(--color-secondary))}.byte-sub-collections-metafield__card{display:flex;flex-direction:column;flex:0 0 min(42vw,200px);max-width:220px;scroll-snap-align:start;overflow:hidden;border-radius:6px;border:1px solid color-mix(in srgb,var(--color-primary) 10%,var(--color-secondary));background:var(--color-bg);color:inherit;text-decoration:none;transition:box-shadow .2s ease,border-color .2s ease}.byte-sub-collections-metafield__card:hover{border-color:color-mix(in srgb,var(--color-primary) 22%,var(--color-secondary));box-shadow:0 4px 14px color-mix(in srgb,var(--color-primary) 8%,transparent)}.byte-sub-collections-metafield__card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.byte-sub-collections-metafield__media{position:relative;aspect-ratio:4 / 3;width:100%;overflow:hidden;background:color-mix(in srgb,var(--color-primary) 4%,var(--color-secondary))}.byte-sub-collections-metafield__img{display:block;width:100%;height:100%;object-fit:cover}.byte-sub-collections-metafield__placeholder{display:block;width:100%;height:100%;object-fit:cover;opacity:.35}.byte-sub-collections-metafield__body{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.65rem .5rem .85rem;text-align:center}.byte-sub-collections-metafield__title{font-weight:600;font-size:.875rem;line-height:1.25;color:var(--color-primary)}.byte-sub-collections-metafield__count{font-size:.8125rem;font-weight:400;line-height:1.2;color:color-mix(in srgb,var(--color-primary) 45%,var(--color-secondary))}.byte-sub-collections-metafield__slider{--byte-sub-collections-slides: 2;display:block;width:100%}.byte-sub-collections-metafield__viewport-slot{position:relative;width:100%;overflow:visible}.byte-sub-collections-metafield__viewport{container-type:inline-size;container-name:byte-sub-collections;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}.byte-sub-collections-metafield__viewport::-webkit-scrollbar{display:none}.byte-sub-collections-metafield__track-inner{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--byte-sub-collections-gap);width:max-content;padding-bottom:.25rem}.byte-sub-collections-metafield--slider .byte-sub-collections-metafield__track-inner .byte-sub-collections-metafield__card{flex-grow:0;flex-shrink:0;flex-basis:min(42vw,200px);width:min(42vw,200px);max-width:220px;margin:0;scroll-snap-align:start}.byte-sub-collections-metafield__slider-nav{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:.75rem;margin-top:.5rem}.byte-sub-collections-metafield__dots[hidden]{display:none}.byte-sub-collections-metafield__slider-arrow{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--color-primary);cursor:pointer;background-color:transparent;border:0;opacity:.75;transition:opacity .15s ease}.byte-sub-collections-metafield__slider-arrow:hover:not(:disabled){opacity:1}.byte-sub-collections-metafield__slider-arrow:disabled{cursor:not-allowed;opacity:.22}.byte-sub-collections-metafield__slider-arrow-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}.byte-sub-collections-metafield__slider-arrow-icon svg{display:block;width:11px;height:11px}.byte-sub-collections-metafield__slider-arrow--prev .byte-sub-collections-metafield__slider-arrow-icon svg{transform:rotate(90deg)}.byte-sub-collections-metafield__slider-arrow--next .byte-sub-collections-metafield__slider-arrow-icon svg{transform:rotate(-90deg)}.byte-sub-collections-metafield__dots{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:.45rem;min-height:1.25rem}.byte-sub-collections-metafield__dot{flex-shrink:0;width:.45rem;height:.45rem;padding:0;cursor:pointer;background-color:color-mix(in srgb,var(--color-primary) 22%,var(--color-secondary));border:0;border-radius:50%;opacity:1;transition:width .2s ease,height .2s ease,border-radius .2s ease,background-color .2s ease}.byte-sub-collections-metafield__dot:hover{background-color:color-mix(in srgb,var(--color-primary) 40%,var(--color-secondary))}.byte-sub-collections-metafield__dot.is-active{width:1.35rem;height:.45rem;border-radius:999px;background-color:var(--color-primary)}@supports (container-type: inline-size){@container byte-sub-collections (min-width: 0px){.byte-sub-collections-metafield--slider .byte-sub-collections-metafield__track-inner .byte-sub-collections-metafield__card{flex-basis:calc((100cqi - (var(--byte-sub-collections-slides, 6) - 1) * var(--byte-sub-collections-gap)) / var(--byte-sub-collections-slides, 6));width:calc((100cqi - (var(--byte-sub-collections-slides, 6) - 1) * var(--byte-sub-collections-gap)) / var(--byte-sub-collections-slides, 6));min-width:7.5rem;max-width:14rem}}}@media screen and (min-width:750px){.byte-sub-collections-metafield{--byte-sub-collections-gap: 1.125rem}.byte-sub-collections-metafield:not(.byte-sub-collections-metafield--slider) .byte-sub-collections-metafield__track{display:grid;grid-template-columns:repeat(var(--byte-sub-cols, 6),minmax(0,1fr));overflow-x:visible;scroll-snap-type:none;padding-bottom:0}.byte-sub-collections-metafield:not(.byte-sub-collections-metafield--slider) .byte-sub-collections-metafield__card{width:100%;min-width:0;max-width:none;flex:unset;scroll-snap-align:unset}}@media screen and (min-width:1024px){.byte-sub-collections-metafield__slider{--byte-sub-collections-slides: 6}}
/*# sourceMappingURL=/cdn/shop/t/15/assets/byte-sub-collections-metafield.css.map */