.color-carousel{padding:24px 0 20px;background:rgb(var(--color-base-background-1))}.color-carousel__heading{font-family:var(--font-heading-family);font-size:2rem;font-weight:600;text-align:center;margin:0 0 4px;text-transform:uppercase;letter-spacing:1.5px}.color-carousel__subheading{text-align:center;font-size:1.2rem;color:rgba(var(--color-base-text),.65);margin:0 0 16px;letter-spacing:.5px}.color-carousel__wrapper{position:relative;display:flex;align-items:center;padding:0 48px}.color-carousel__track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;padding:4px 2px 8px;width:100%}.color-carousel__track::-webkit-scrollbar{display:none}.color-carousel__item{flex:0 0 auto;width:130px;text-align:center;text-decoration:none;color:rgb(var(--color-base-text));scroll-snap-align:start;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.color-carousel__item:hover{transform:translateY(-4px)}.color-carousel__image-wrapper{position:relative;width:130px;height:130px;border-radius:12px;overflow:hidden;margin-bottom:8px;background:var(--swatch, #eee);box-shadow:0 1px 2px #0000000f,0 8px 20px #00000014;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.color-carousel__image-wrapper:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;box-shadow:inset 0 0 0 1px #0000000f;pointer-events:none}.color-carousel__image-wrapper:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;box-shadow:0 4px 10px #00000014,0 18px 40px #00000029;opacity:0;transition:opacity .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}.color-carousel__item:hover .color-carousel__image-wrapper:before{opacity:1}.color-carousel__image{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .25s ease;background:var(--swatch, #eee)}.color-carousel__image:not([src]),.color-carousel__image[src=""]{opacity:0}.color-carousel__item:hover .color-carousel__image{transform:scale(1.08)}.color-carousel__placeholder{width:100%;height:100%;background-image:linear-gradient(135deg,#ffffff2e,#00000026)}.color-carousel__shine{position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.28) 50%,transparent 100%);transform:translate(0) skew(-20deg);transition:transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}.color-carousel__item:hover .color-carousel__shine{transform:translate(422%) skew(-20deg)}.color-carousel__label{display:inline-flex;align-items:center;gap:8px;padding:0 4px}.color-carousel__dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px #0000001f;flex-shrink:0}.color-carousel__name{font-size:1.05rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin:0;white-space:nowrap}.color-carousel__arrow{position:absolute;top:50%;transform:translateY(-60%);z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid rgba(var(--color-base-text),.15);background:rgb(var(--color-base-background-1));color:rgb(var(--color-base-text));cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px #00000014;transition:background-color .2s ease,color .2s ease,transform .2s ease}.color-carousel__arrow:hover{background:rgb(var(--color-base-text));color:rgb(var(--color-base-background-1));transform:translateY(-60%) scale(1.08)}.color-carousel__arrow--prev{left:10px}.color-carousel__arrow--next{right:10px}@media(max-width:749px){.color-carousel{padding:20px 0 16px}.color-carousel__heading{font-size:1.6rem}.color-carousel__subheading{font-size:1.1rem;margin-bottom:12px}.color-carousel__wrapper{padding:0 30px}.color-carousel__track{gap:10px}.color-carousel__item{width:96px}.color-carousel__image-wrapper{width:96px;height:96px;border-radius:10px;margin-bottom:6px}.color-carousel__name{font-size:.95rem;letter-spacing:.8px}.color-carousel__dot{width:8px;height:8px}.color-carousel__arrow{width:28px;height:28px}.color-carousel__arrow svg{width:11px;height:11px}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/yansexuanzeqi.css.map */