.scrollable-collection-wrapper{position:relative}.scrollable-collection-section{overflow:hidden}.scrollable-collection-inner{--collection-media-width: 400px;perspective:100vw;position:relative;top:0;right:0;bottom:0;left:0;min-height:calc(var(--collection-media-width) + 4px)}.collection-name{backface-visibility:hidden;transform-origin:50% 0;transform-style:preserve-3d;display:block;width:100%;white-space:nowrap;z-index:1;display:flex;align-items:center;justify-content:center;gap:40px;font-size:var(--heading-font-size)}.collection-name-text{display:inline-flex;align-items:center;position:relative;max-width:100%}.collection-name-main{white-space:normal}.collection-name.collection-inactive .collection-name-main{text-fill-color:transparent;-webkit-text-fill-color:transparent;text-stroke-width:var(--text-stroke-width);-webkit-text-stroke-width:var(--text-stroke-width);text-stroke-color:var(--text-stroke-color);-webkit-text-stroke-color:var(--text-stroke-color);paint-order:stroke fill;opacity:.3}.collection-text-media{border-radius:var(--card-radius);width:100%}.collection-name.media-hover .collection-text-media:hover{z-index:1}.collection-list-second-style .collection-name-main{position:absolute;left:0;right:0;top:50%;width:100%;transform:translateY(-50%);z-index:1;overflow:hidden}.collection-list-second-style .collection-text-media{--media-height: 300px;width:100%;position:relative;display:block;height:var(--media-height);max-width:100%;margin-inline:auto}.scrollable-collection-title{text-shadow:1px 0px 2px color-mix(in srgb,white var(--title-shadow-opacity, 100%),transparent)}@media (max-width:1200px){.scrollable-collection-inner{--collection-media-width: 250px}}@media (max-width:767px){.collection-name-text{flex-direction:column;row-gap:20px;width:100%}.collection-name+.collection-name{margin-top:40px}.scrollable-collection-wrapper{padding:0 15px}.scrollable-collection-inner.mobile-swipe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(85%,1fr);grid-template-columns:repeat(auto-fill,minmax(85%,1fr));overflow-x:auto;padding-bottom:15px;gap:15px;scroll-snap-type:x mandatory}.scrollable-collection-inner.mobile-swipe .collection-name+.collection-name{margin-top:0}.collection-name{white-space:normal}.collection-list-second-style .collection-name-main{padding:0 10px}}@media (min-width:576px){.collection-list-second-style .collection-text-media{--media-height: 50vh}}@media (min-width:768px){.scrollable-collection-wrapper:not(.collection-list-second-style) .scrollable-collection-inner{display:flex;flex-direction:column;justify-content:space-between}.collection-text-media{width:var(--collection-media-width)}.scrollable-collection-wrapper:not(.collection-list-second-style) .collection-text-media{left:var(--inset-inline-start);aspect-ratio:1;position:absolute;z-index:-1;transition:all .4s ease;opacity:0}.scrollable-collection-wrapper:not(.collection-list-second-style) .scrollable-collection-inner .collection-name:only-child{min-height:var(--collection-media-width)}.scrollable-collection-wrapper:not(.collection-list-second-style) .scrollable-collection-inner .collection-name:only-child .collection-text-media{inset-block:auto}.scrollable-collection-wrapper:not(.collection-list-second-style) .collection-name:first-child{padding-top:var(--top-spacing)}.scrollable-collection-wrapper:not(.collection-list-second-style) .collection-name:first-child .collection-text-media{top:calc(var(--top-spacing) * -1 + 2px)}.scrollable-collection-wrapper:not(.collection-list-second-style) .collection-name:last-child{padding-bottom:var(--bottom-spacing)}.scrollable-collection-wrapper:not(.collection-list-second-style) .collection-name:last-child .collection-text-media{bottom:calc(var(--bottom-spacing) * -1 + 2px)}.scrollable-collection-wrapper:not(.collection-list-second-style) .media-left .collection-text-media{inset-inline-start:0}.scrollable-collection-wrapper:not(.collection-list-second-style) .media-center .collection-text-media{inset-inline:0;margin:0 auto}.scrollable-collection-wrapper:not(.collection-list-second-style) .media-right .collection-text-media{inset-inline-end:0}.scrollable-collection-wrapper:not(.collection-list-second-style) .media-left .collection-text-media{-webkit-animation:slideOutLeft .3s ease-in forwards;animation:slideOutLeft .3s ease-in forwards}.scrollable-collection-wrapper:not(.collection-list-second-style) .media-left.active .collection-text-media{-webkit-animation:slideInLeft .3s ease-out forwards .3s;animation:slideInLeft .3s ease-out forwards .3s}.scrollable-collection-wrapper:not(.collection-list-second-style) .media-center .collection-text-media{-webkit-animation:slideOutBottom .3s ease-in forwards;animation:slideOutBottom .3s ease-in forwards}.scrollable-collection-wrapper:not(.collection-list-second-style) .media-center.active .collection-text-media{-webkit-animation:slideInBottom .3s ease-out forwards .3s;animation:slideInBottom .3s ease-out forwards .3s}.scrollable-collection-wrapper:not(.collection-list-second-style) .media-right .collection-text-media{-webkit-animation:slideOutRight .3s ease-in forwards;animation:slideOutRight .3s ease-in forwards}.scrollable-collection-wrapper:not(.collection-list-second-style) .media-right.active .collection-text-media{-webkit-animation:slideInRight .3s ease-out forwards .3s;animation:slideInRight .3s ease-out forwards .3s}.collection-list-second-style .collection-name-text{width:100%;display:block}.scrollable-collection-wrapper.collection-list-second-style{height:100%}.collection-list-second-style .scrollable-collection-inner{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;height:100%}.collection-list-second-style .collection-name{grid-column:1/2;grid-row:1/2;white-space:normal}.collection-name-main>span{transition:transform .6s ease;transform:translate3d(0,-100%,0)}.collection-name.active .collection-name-main>span,.collection-list-second-style .collection-name:only-child .collection-name-main>span{transform:translateZ(0)}.collection-list-second-style .collection-text-media{--media-height: 80vh;max-width:90%}}@media (min-width:1200px){.collection-list-second-style .collection-text-media{max-width:80%}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/scrollable-collection-list.css.map */