:root{--height:calc(80vh - 50px);--width:450px}.carousel{display:grid;transform:translateZ(.1px)}.carousel__list{contain:layout;isolation:isolate;margin:0;padding:2em 0 3em;list-style:none;display:flex;overflow:hidden}.carousel__item{height:var(--height);contain:layout;isolation:isolate;background:#fff3;border-radius:16px;flex:10%;align-content:start;margin:0 10px;padding:0;display:grid;position:relative;overflow:hidden;transform:translateZ(.1px);box-shadow:0 3px 15px 2px #0006,0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #ffffff0d}.carousel__item,.carousel__item *{-webkit-user-select:none;user-select:none;transition:all .6s cubic-bezier(.55,.24,.18,1)}.carousel__image,.carousel__image-link,.carousel__contents{width:var(--width);height:auto}.carousel__image-link{z-index:2;color:inherit;pointer-events:auto;text-decoration:none;display:block;position:absolute;inset:0}.carousel__item[data-active] .carousel__image-link{z-index:1}.carousel__item[data-active] .carousel__contents{pointer-events:auto;z-index:3}.carousel__contents{pointer-events:none}.carousel__item[data-active] .carousel__product-link,.carousel__item[data-active] .carousel__view-details,.carousel__item[data-active] .carousel__add-to-cart,.carousel__contents a,.carousel__contents button{pointer-events:auto;z-index:4;position:relative}.carousel__item:hover{flex-basis:calc(var(--width) / 2);cursor:pointer;transition:all .3s}.carousel__item[data-active]:hover{flex-basis:var(--width)}.carousel__item[data-active]{flex-basis:var(--width);flex-grow:0}@media screen and (max-width:800px){.carousel__item{flex-basis:15%}}@media screen and (max-width:600px){.carousel__item{border-radius:8px;flex-basis:10%;margin:0 5px;font-size:3vw}.carousel__item[data-active]{flex-grow:0;flex-basis:45%}.carousel__item:nth-child(3),.carousel__item:nth-child(7){flex:0 0 10px}.carousel__item:nth-child(2),.carousel__item:nth-child(8){flex:0 0 5px;transform:translate(-50px)}.carousel__item:nth-child(8){transform:translate(50px)}.carousel__item:first-child,.carousel__item:nth-child(n+9){box-shadow:none;flex:0 0 0;margin:0;opacity:0!important}.carousel__item:not(:nth-child(n+5)) img,.carousel__item:nth-child(n+7) img{opacity:.8}.carousel__item:not(:nth-child(n+4)) *,.carousel__item:nth-child(n+7) *{opacity:0!important}}@media screen and (min-width:600px){.carousel__item:nth-child(3),.carousel__item:nth-child(10){flex:0 0 10px}.carousel__item:nth-child(2),.carousel__item:nth-child(11){flex:0 0 5px;transform:translate(-50px)}.carousel__item:nth-child(11){transform:translate(50px)}.carousel__item:first-child,.carousel__item:nth-child(n+12){box-shadow:none;flex:0 0 0;margin:0;opacity:0!important}.carousel__item:not(:nth-child(n+5)) img,.carousel__item:nth-child(n+9) img{opacity:.8}.carousel__item:not(:nth-child(n+4)) *,.carousel__item:nth-child(n+10) *{opacity:0!important}}.carousel__item img{width:var(--width);z-index:0;aspect-ratio:2/3;object-fit:cover;filter:saturate(.2)contrast(.75)brightness(1.1);pointer-events:none;height:100%;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.carousel__item:after{content:"";z-index:1;opacity:1;background:linear-gradient(160deg,#02002400 40%,#76dd8880 70%,#00fff699 100%);width:100%;height:100%;transition:all .66s cubic-bezier(.55,.24,.18,1);position:absolute;inset:0}.carousel__item[data-active]:after{transform:translateY(100%)}.carousel__item[data-active],.carousel__item[data-active] *{opacity:1;filter:none}.carousel__contents{z-index:2;background-image:radial-gradient(at 0 0,#0006 20%,#0000 50%);background-repeat:no-repeat;background-size:170% 200px;flex-direction:column-reverse;justify-content:start;min-height:200px;padding:1em;display:flex;position:absolute;top:0;left:0}.carousel__contents .user__name{color:#e8eff4;letter-spacing:.8px;text-shadow:0 1px #0000004d;font-size:1.75em;font-weight:600}.carousel__contents .user__title{letter-spacing:1.25px;text-transform:uppercase;color:#0000;opacity:.85;text-wrap:balance;background:linear-gradient(270deg,#43ff00,#00fff7);-webkit-background-clip:text;background-clip:text;margin-bottom:.5em;font-family:lexend;font-size:.875em;font-weight:500}.carousel__contents .user__title,.carousel__contents .user__name{opacity:0;max-width:18em;margin:0;line-height:1.1;transition-duration:1s;transform:translate(-200px)}@media screen and (max-width:800px){.carousel__item img{width:calc(var(--width) * .5)}.carousel__contents{transform-origin:100% 100%;text-align:right;background-image:radial-gradient(at 100% 100%,#0006 0%,#0000 50%);background-position:-100% 100%;flex-direction:column;justify-content:end;align-items:end;position:absolute;bottom:0;left:0;transform:translate(-100%)rotate(90deg)}[data-active] .carousel__contents{background-position:100% 100%}.carousel__contents .user__title,.carousel__contents .user__name{max-width:70vh;transform:translate(200px)}}[data-active] .carousel__contents *{opacity:1;transition-duration:.66s;transform:translate(0)}[data-active] .carousel__contents .user__name{transition-delay:.1s}[data-active] .carousel__contents .user__title{opacity:.85;transition-delay:50ms}.carousel__nav{grid-row:1;justify-content:space-between;justify-self:end;gap:1em;padding:1em;display:flex}.carousel__nav button{gap:.5em;padding:.5em 1.5em;display:flex}.carousel__nav button span,.carousel__nav button svg{fill:none;margin:0;padding:0}.carousel__nav button path{fill:currentColor}.carousel__add-to-cart{letter-spacing:.12em;text-transform:uppercase;color:#e8eff4;cursor:pointer;opacity:0;pointer-events:none;background:#00000059;border:1px solid #ffffff59;border-radius:999px;margin-top:.75em;padding:.45em 1em;font-size:.7rem;font-weight:600}.carousel__product-link{color:inherit;text-decoration:none}.carousel__product-link:hover{text-decoration:underline}.carousel__view-details{letter-spacing:.12em;text-transform:uppercase;color:#e8eff4;opacity:0;pointer-events:none;margin-top:.5em;font-size:.7rem;font-weight:600;text-decoration:none}.carousel__item[data-active] .carousel__view-details{opacity:.9;pointer-events:auto}.carousel__view-details:hover{text-decoration:underline}.carousel__item[data-active] .carousel__add-to-cart{opacity:1;pointer-events:auto}.carousel__item[data-active] .carousel__add-to-cart:disabled{opacity:.5;cursor:not-allowed}.carousel--compact .carousel__list{justify-content:center;align-items:stretch;gap:.75rem;width:100%;overflow:visible}.carousel--compact .carousel__item,.carousel--compact .carousel__item:first-child,.carousel--compact .carousel__item:nth-child(2),.carousel--compact .carousel__item:nth-child(3),.carousel--compact .carousel__item:nth-child(n){min-width:0;opacity:1!important;flex:none!important;margin:0!important;transform:none!important;box-shadow:0 3px 15px 2px #0006,0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #ffffff0d!important}.carousel--compact .carousel__item:not([data-active]){cursor:pointer;flex:0 0 clamp(160px,32vw,280px)!important}.carousel--compact .carousel__item[data-active] .carousel__image-link,.carousel--compact .carousel__item[data-active] .carousel__image,.carousel__item[data-active] .carousel__image-link,.carousel__item[data-active] .carousel__image{cursor:pointer}.carousel--compact .carousel__item[data-active]{flex:0 0 clamp(220px, 48vw, var(--width))!important}.carousel--compact .carousel__item:not([data-active]):hover,.carousel--compact .carousel__item:not([data-active]):focus-within{transition:all .3s;flex:0 0 clamp(200px, 40vw, calc(var(--width) / 2))!important}.carousel--compact .carousel__item:after{opacity:0!important;transform:none!important}.carousel--compact .carousel__item:not([data-active]):hover:after,.carousel--compact .carousel__item:not([data-active]):focus-within:after{opacity:.55!important}.carousel--compact .carousel__item:not([data-active]):hover img,.carousel--compact .carousel__item:not([data-active]):focus-within img{filter:saturate(.55)contrast(.9)brightness(1.08)!important}.carousel--compact .carousel__image,.carousel--compact .carousel__contents{width:100%}.carousel--compact .carousel__image-link{width:100%;height:100%;position:absolute;inset:0}.carousel--compact .carousel__item img{z-index:0;filter:saturate(.35)contrast(.85)brightness(1.05);object-fit:cover;position:absolute;inset:0;opacity:1!important;width:100%!important;height:100%!important;top:0!important;left:0!important;transform:none!important}.carousel--compact .carousel__item[data-active] img{filter:none!important}.carousel--compact .carousel__item:not(:nth-child(n+4)) *,.carousel--compact .carousel__item:nth-child(n+7) *,.carousel--compact .carousel__item:nth-child(n+10) *{opacity:1!important;transform:none!important}.carousel--compact .carousel__contents{min-height:160px;background-position:0 0!important;transform:none!important}.carousel--compact .carousel__contents .user__title,.carousel--compact .carousel__contents .user__name{transform:none!important}.carousel--compact .carousel__item:not([data-active]) .carousel__contents .user__title,.carousel--compact .carousel__item:not([data-active]) .carousel__contents .user__name,.carousel--compact .carousel__item:not([data-active]) .carousel__add-to-cart,.carousel--compact .carousel__item:not([data-active]) .carousel__view-details{pointer-events:none;opacity:0!important}.carousel--compact .carousel__item:not([data-active]) .carousel__image-link{z-index:2;opacity:1!important;pointer-events:auto!important}.carousel--compact .carousel__item[data-active] .carousel__contents .user__title,.carousel--compact .carousel__item[data-active] .carousel__contents .user__name{opacity:1!important}.carousel__image-placeholder{background:linear-gradient(145deg,#1e1e28e6,#3c3c50bf);position:absolute;inset:0}.carousel--compact .carousel__item[data-active],.carousel--compact .carousel__item[data-active] *{filter:none!important}@media screen and (max-width:800px){.carousel--compact .carousel__item:not([data-active]){flex:0 0 clamp(120px,28vw,200px)!important}.carousel--compact .carousel__item[data-active]{flex:0 0 clamp(180px,52vw,320px)!important}}@media screen and (max-width:600px){.carousel--compact .carousel__list{overflow:hidden}.carousel--compact .carousel__item:not([data-active]){flex:0 0 30%!important}.carousel--compact .carousel__item[data-active]{flex:0 0 58%!important}}