.custom-variant-options{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:20px}.variant-wrapper{display:block}.variant-link{display:flex;flex-direction:column;align-items:center}.variant-box{position:relative;width:40px;height:40px;border-radius:50%;border:2px solid #ccc;box-sizing:border-box;overflow:hidden;transition:transform .4s ease,border .4s ease}.variant-label{position:relative;margin-top:5px;font-size:12px;color:#777;text-decoration:none}.variant-link:hover .variant-box{transform:scale(1.02);border-color:#666}.variant-link.active{pointer-events:none;cursor:default;text-decoration:underline;background-color:transparent}.variant-link.active .variant-box{border:2px solid #FF0000}.variant-link.active:hover .variant-box{transform:none;border-color:red}.variant-box:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;pointer-events:none;z-index:1;background:linear-gradient(135deg,#ffffff4d 0% 49%,#fff0 50% 100%)}.variant-label:after{content:"";position:absolute;left:0;bottom:4px;height:1.5px;width:0%;background-color:var(--variant-color, #777);transition:width .3s ease}.variant-link:hover .variant-label:after{width:100%}.custom-variant-options-product-card{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}.variant-box-product-card{position:relative;width:20px;height:20px;border-radius:50%;border:2px solid #ccc;box-sizing:border-box;transition:transform .4s ease,border .4s ease}.variant-link-product-card{display:flex;flex-direction:column;align-items:center}.variant-link-product-card.active{pointer-events:auto;cursor:pointer;background-color:transparent}.variant-link-product-card:hover .variant-box-product-card{transform:scale(1.1);border-color:#666}.variant-link-product-card.active .variant-box-product-card{border:2px solid #FF0000}.variant-link-product-card.active:hover .variant-box-product-card{transform:none;border-color:red}.variant-box-product-card:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;pointer-events:none;z-index:1;background:linear-gradient(135deg,#ffffff4d 0% 49%,#fff0 50% 100%)}.custom-variant-options-product-card-hidden{min-height:30px}.custom-variants{--item-w: 64px;--item-h: 64px;--gap: 12px;--pad-x: 0;position:relative}.custom-variants .custom-variant-viewport{overflow:hidden;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding-inline:var(--pad-x);touch-action:pan-x pan-y;cursor:grab;scrollbar-width:none;-ms-overflow-style:none}.custom-variants .custom-variant-viewport::-webkit-scrollbar{display:none}.custom-variants .custom-variant-viewport:active{cursor:grabbing}.custom-variants .custom-variant-track{list-style:none;margin:0;padding:0}.custom-variants .custom-variant-track.swiper-wrapper{display:flex}.custom-variants:not(.is-ready) .custom-variant-track.swiper-wrapper{gap:var(--gap)}.custom-variants .custom-color-variant-item{width:var(--item-w)}.custom-variants .custom-variant-viewport.swiper{overflow:hidden;overflow-y:hidden}.custom-variants .custom-color-variant-item.swiper-slide{display:block;flex:0 0 auto;width:var(--item-w)}.custom-variants .custom-variant-card{display:block;border-radius:8px;overflow:hidden;aspect-ratio:1 / 1;padding:4px}.custom-variants .custom-variant-image{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;border-radius:4px;transition:transform .25s cubic-bezier(.104,.204,.492,1)}.custom-variants .custom-color-variant-item.is-current .custom-variant-card{border:1px solid #000}.custom-variants .custom-color-variant-item a.custom-variant-card{border:1px solid #9b9b9b;transition:border-color .25s cubic-bezier(.104,.204,.492,1)}.custom-variants li[data-soldout=true] a.custom-variant-card:hover{border-color:#9b9b9b}.custom-variants .custom-color-variant-item a.custom-variant-card:hover{border-color:var(--color-accent2)}.custom-variants a.custom-variant-card:hover .custom-variant-image{transform:scale(1.05)}.custom-variants li[data-soldout=true] a.custom-variant-card:hover .custom-variant-image{transform:scale(1)}.custom-variants a.custom-variant-card:focus-visible{outline:2px solid #000;outline-offset:2px;border-radius:10px}.custom-variants .custom-variants-buttons{display:flex;padding-block:10px;justify-content:flex-end;gap:16px}.custom-variants .custom-variant-nav{position:relative;border:1px solid #ddd;width:36px;height:36px;border-radius:8px;display:none;place-items:center;background:#fff;cursor:pointer;box-shadow:0 2px 14.7px #fffc;transition:all .25s cubic-bezier(.104,.204,.492,1)}.custom-variants .custom-variant-nav:hover{background:var(--color-accent2)}.custom-variants .custom-variant-nav.next{right:4px}.custom-variants .custom-variant-nav[hidden]{display:none!important}.custom-variants .custom-variant-nav:disabled{opacity:.5;cursor:default}.custom-variants .custom-variant-nav.next svg,.custom-variants .custom-variant-nav.prev svg{width:24px;height:24px;color:var(--color-accent);transition:all .25s cubic-bezier(.104,.204,.492,1)}.custom-variants .custom-variant-nav.next:hover svg,.custom-variants .custom-variant-nav.prev:hover svg{color:#fff}.custom-variants .custom-variant-nav.next svg{transform:rotate(270deg)}.custom-variants .custom-variant-nav.prev svg{transform:rotate(90deg)}@media(max-width:768px){.custom-variants{--gap: 10px}.custom-variants .custom-variants-buttons{display:none}.custom-variants .custom-variant-viewport{padding-top:10px}}.custom-variant-count-area span.custom-variant-count{display:flex;font-size:12px;background:#bbbdc0;width:fit-content;justify-self:end;padding:1px 10px;margin-bottom:10px;border-radius:24px;line-height:1.5}.custom-variants [data-soldout=true] .custom-variant-card{position:relative}.custom-variants [data-soldout=true] .custom-variant-card:after{content:"";position:absolute;top:49%;left:-10%;width:120%;height:1.5px;background:#9b9b9b;transform:rotate(45deg);transform-origin:center;pointer-events:none;z-index:2;border-radius:2px}.custom-variants [data-soldout=true].is-current .custom-variant-card:after{background:#9b9b9b}.custom-variants [data-soldout=true]:before{content:"";position:absolute;border-radius:8px;background:#f1f1f170;pointer-events:none;z-index:1;width:100%;height:100%}
/*# sourceMappingURL=/cdn/shop/t/20/assets/custom-variant-options.css.map */