.hat-showcase{position:relative;width:100%;background:#000;color:#fff;overflow:hidden}.hat-showcase__images{position:relative;width:100%;height:100vh;min-height:650px;display:flex;align-items:center;justify-content:center;overflow:hidden}.hat-showcase__image{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(15%);transition:none;pointer-events:none}.hat-showcase__image.is-active{opacity:1;transform:translate(0);pointer-events:auto;transition:opacity .5s ease,transform .5s ease}.hat-showcase__image.is-leaving{opacity:0;transform:translate(-15%);transition:opacity .5s ease,transform .5s ease}.hat-showcase__image img,.hat-showcase__image svg{max-width:95%;max-height:95%;width:auto;height:auto;object-fit:contain}.hat-showcase__slides{display:flex;width:100%;border-top:none;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:0 6%}.hat-showcase__slides::-webkit-scrollbar{display:none}.hat-showcase__slides:before,.hat-showcase__slides:after{content:"";flex:0 0 calc((100% - (4 * (100% / 4.3))) / 2)}.hat-showcase__slide{flex:0 0 calc(100% / 4.3);padding:0 15px 40px;position:relative;cursor:pointer;min-width:0}.hat-showcase__bar-track{width:100%;height:.7px;background:#fff3;position:relative;overflow:visible}.hat-showcase__bar-fill{position:absolute;top:50%;left:0;width:0;height:8px;transform:translateY(-50%);background:#fff}.hat-showcase__slide.is-active .hat-showcase__bar-fill{animation:hatBarFill var(--hat-duration, 5s) linear forwards}.hat-showcase__slide-content{padding-top:16px}.hat-showcase__heading{font-size:18px;font-weight:700;margin:0 0 4px;text-transform:uppercase;letter-spacing:.05em;line-height:1.2;display:inline}.hat-showcase__badge{display:inline-block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(255,255,255,.5);border-radius:3px;padding:2px 6px;margin-left:8px;vertical-align:middle;opacity:.7}.hat-showcase__heading-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.hat-showcase__desc{font-size:13px;line-height:1.5;margin:0;opacity:0;transform:translateY(-8px);transition:none}.hat-showcase__slide.is-active .hat-showcase__desc{opacity:.6;transform:translateY(0);transition:opacity .4s ease .15s,transform .4s ease .15s}.hat-showcase__slide.is-leaving .hat-showcase__desc{opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}.hat-showcase__slide .hat-showcase__slide-content{opacity:.5;transition:opacity .4s ease}.hat-showcase__slide.is-active .hat-showcase__slide-content{opacity:1}@keyframes hatBarFill{0%{width:0}to{width:100%}}@media screen and (max-width:1024px){.hat-showcase__slide{flex:0 0 25%}}@media screen and (max-width:749px){.hat-showcase__images{height:auto;min-height:unset;aspect-ratio:4 / 3}.hat-showcase__image img,.hat-showcase__image svg{max-width:80%;max-height:80%}.hat-showcase__slides{flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;border-top:none;padding:0}.hat-showcase__slides:before,.hat-showcase__slides:after{display:none}.hat-showcase__slide{flex:0 0 100%;width:100%;min-width:100%;padding:0 20px;scroll-snap-align:start;box-sizing:border-box}.hat-showcase__bar-track{width:100%;margin-bottom:0}.hat-showcase__slide-content{padding:14px 0 20px}.hat-showcase__heading{font-size:20px}.hat-showcase__desc{font-size:14px}.hat-showcase__slide .hat-showcase__slide-content{opacity:.5;transition:opacity .4s ease}.hat-showcase__slide.is-active .hat-showcase__slide-content{opacity:1}.hat-showcase__slide .hat-showcase__desc,.hat-showcase__slide.is-active .hat-showcase__desc,.hat-showcase__slide.is-leaving .hat-showcase__desc{opacity:.6;transform:none;transition:none}.hat-showcase__slide .hat-showcase__heading{opacity:.5;transition:opacity .4s ease}.hat-showcase__slide.is-active .hat-showcase__heading{opacity:1}}.hat-showcase__bar-fill{position:absolute;top:50%;left:0;width:0;height:8px;transform:translateY(-50%);background:var(--gold-gradient)}@media screen and (max-width:749px){.hat-showcase__bar-fill{height:4px;transform:none}}
/*# sourceMappingURL=/cdn/shop/t/130/assets/custom-hat-showcase.css.map */