:root{--pb-primary: #A7744A;--pb-primary-light: #F4EAE5;--pb-accent-grey: #C8C8C8;--pb-soldout: #939393;--pb-bg: #F5F5F5}.custom-variant-selector{display:flex;flex-direction:column;gap:.5rem}.custom-variant-selector label{font-weight:400;margin-bottom:.5rem;display:block}.custom-variant-selector .current-value{font-weight:600}.option-values-wrapper{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-start}.option-values-wrapper>*{position:relative;display:inline-block;background-color:var(--pb-bg);border:1px solid transparent;border-radius:8px;font-size:12px;font-weight:700;text-align:center;box-sizing:border-box;padding:6px 10px;transition:all .3s ease}.option-values-wrapper>*:hover{border-color:var(--pb-accent-grey);box-shadow:0 2px 6px #0000001a}.color-selector .option-values-wrapper>*{flex:0 1 calc(25% - .5rem);max-width:calc(25% - .5rem)}.color-selector .option-values-wrapper>* img{width:100%;aspect-ratio:1 / 1;object-fit:cover;height:auto}.color-selector .option-values-wrapper>* img+p,.color-selector .option-values-wrapper>* img~p{text-align:center;margin:0;padding-top:4px;font-size:10px}.size-selector .option-values-wrapper>*{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex:0 0 auto}.option-values-wrapper .current{border-color:var(--pb-primary);background-color:var(--pb-primary-light);color:#000;font-weight:700;box-shadow:0 0 0 2px #a7744a33;cursor:default}.option-values-wrapper .sold-out{border-color:var(--pb-soldout);cursor:not-allowed;overflow:hidden;position:relative}.option-values-wrapper .sold-out svg{display:block;width:100%;height:100%;position:absolute;left:0;top:0}.option-values-wrapper *:not(.sold-out) svg{display:none}.variant-selector-loader{display:flex;gap:.75rem}.variant-loader-box{width:60px;height:60px;background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media only screen and (max-width: 600px){.color-selector .option-values-wrapper>*{flex:0 1 calc(25% - .5rem);max-width:calc(25% - .5rem)}.color-selector .option-values-wrapper>* img{width:100%;height:auto}}
/*# sourceMappingURL=/s/files/1/0858/7932/4999/t/9/assets/custom-variant-selector.css.map */