.sphere{position:relative;display:flex;flex-direction:column;height:calc(100svh - var(--header-height));min-height:560px;max-height:1100px;background:var(--sphere-bg, #fff);color:#000;overflow:hidden;user-select:none;-webkit-user-select:none}.sphere__top{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:8px}.sphere__nav{display:flex;align-items:baseline;gap:28px;min-width:0}.sphere__heading{flex:none;text-transform:uppercase;color:var(--color-text-secondary)}.sphere__nav-list{display:flex;flex-wrap:wrap;gap:4px 0}.sphere__nav-list li+li:before{content:"/";padding:0 10px;color:var(--color-text-secondary)}.sphere__nav-link{min-height:28px;text-transform:uppercase;color:var(--color-text-secondary);transition:color var(--duration) var(--ease)}.sphere__nav-link:hover,.sphere__nav-link.is-active{color:#000}.sphere__nav-link.is-active{text-decoration:underline;text-underline-offset:3px}.sphere__nav-link:focus-visible{outline:1px solid #000;outline-offset:3px}.sphere__view-all{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:28px;text-transform:uppercase}.sphere__view-all .icon{width:11px;height:11px;transition:transform var(--duration) var(--ease)}.sphere__view-all:hover .icon{transform:translate(3px)}@media(max-width:767px){.sphere__top{flex-direction:column;gap:6px;padding-top:14px}.sphere__nav{width:calc(100% + var(--gutter));margin-right:calc(var(--gutter) * -1)}.sphere__heading{display:none}.sphere__nav-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:var(--gutter);-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}.sphere__nav-list::-webkit-scrollbar{display:none}.sphere__nav-list li{flex:none}.sphere__nav-link{min-height:40px}.sphere__view-all{color:var(--color-text-secondary)}}.sphere__stage{position:relative;flex:1;min-height:0;cursor:grab;touch-action:pan-y}.sphere__stage.is-dragging{cursor:grabbing}.sphere__tile{position:absolute;top:0;left:0;display:block;width:var(--tile, 160px);aspect-ratio:1.3;margin:calc(var(--tile, 160px) / -2.6) 0 0 calc(var(--tile, 160px) / -2);will-change:transform;mix-blend-mode:multiply;-webkit-tap-highlight-color:transparent}.sphere__tile img{width:100%;height:100%;object-fit:contain;padding:8%;pointer-events:none;-webkit-user-drag:none;transition:opacity .25s var(--ease),transform .3s var(--ease)}.sphere__stage.is-swapping .sphere__tile img{opacity:0}.sphere__tile.is-hovered img{transform:scale(1.12)}.sphere__tile.is-hovered{z-index:2}.sphere__tile-label{position:absolute;top:calc(100% + 6px);left:50%;display:flex;flex-direction:column;align-items:center;gap:2px;width:max(100%,180px);text-align:center;line-height:14px;opacity:0;transform:translate(-50%,-4px);transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}.sphere__tile-title{color:#000;overflow-wrap:anywhere}.sphere__tile-price{color:var(--color-text-secondary);font-weight:var(--font-weight-light)}@media(hover:hover){.sphere__tile.is-hovered .sphere__tile-label{opacity:1;transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.sphere__tile-label{transition:none}}.sphere__tile:focus-visible{outline:1px solid #000;outline-offset:4px}.sphere.is-infinite .sphere__stage:has(.sphere__tile.is-hovered) .sphere__tile:not(.is-hovered) img{opacity:.35}.sphere.is-infinite .sphere__stage{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%),linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%),linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-composite:intersect}.sphere__info{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:14px;min-height:52px;margin:0 auto 16px;padding:0 var(--gutter)}.sphere__caption{text-align:center}.sphere__caption.is-hint{color:var(--color-text-secondary)}.sphere__info-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;background:#000;color:#fff}.sphere__info-link .icon{width:11px;height:11px}@media(max-width:767px){.sphere{height:calc(100svh - var(--header-height) - 24px);min-height:540px}.sphere.has-selection .sphere__info{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(16px + env(safe-area-inset-bottom));justify-content:space-between;margin:0;padding:10px 10px 10px 14px;background:#fff;border:var(--rule)}.sphere.has-selection .sphere__caption{text-align:left}}.sphere__layout-toggle{position:absolute;left:50%;bottom:-36px;transform:translate(-50%);display:flex;gap:2px;padding:3px;background:#fff;border-radius:999px;box-shadow:0 1px 2px #0000000f,0 6px 20px #0000000f}.sphere__pill{flex:none;min-height:28px;padding:0 12px;border-radius:999px;white-space:nowrap}.sphere__pill.is-active{background:#000;color:#fff}.sphere__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:24px;padding:24px var(--gutter);overflow-y:auto}.sphere__list-link{display:flex;flex-direction:column;gap:4px;text-align:center}.sphere__list-link img{aspect-ratio:1.3;object-fit:contain;mix-blend-mode:multiply}.sphere.is-ready .sphere__list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0}.sphere:not(.is-ready) .sphere__stage,.sphere:not(.is-ready) .sphere__info{display:none}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-sphere.css.map */