.yarn-color-composer{display:block}.yarn-color-composer .title-wrapper{margin-top:0;margin-bottom:2rem}.yarn-color-composer .title{margin:0}@media screen and (min-width: 750px){.yarn-color-composer .title-wrapper{margin-bottom:3rem}}.yarn-color-composer__description{margin-top:1rem;margin-bottom:3rem;max-width:72rem}@media screen and (min-width: 750px){.yarn-color-composer__description{margin-top:1.5rem;margin-bottom:4rem}}.yarn-color-composer__content{display:flex;flex-direction:column;gap:2rem;width:100%}@media screen and (min-width: 750px){.yarn-color-composer__content{gap:3rem}}.yarn-color-composer__block{width:100%}.yarn-color-composer__block-heading{margin:0 0 1rem;line-height:calc(1 + .5/max(1,var(--font-heading-scale)))}.yarn-color-composer__block-text{margin:0}.yarn-color-composer__block-text p{margin-top:0;margin-bottom:1rem}.yarn-color-composer__block-text p:last-child{margin-bottom:0}@media screen and (max-width: 749px){.yarn-color-composer .page-width{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 750px) and (max-width: 989px){.yarn-color-composer .page-width{padding-left:5rem;padding-right:5rem}}.yarn-color-composer__product-list{width:100%}.yarn-color-composer__product-selector{margin-bottom:2rem}.yarn-color-composer__product-selector .form__label{display:block;margin-bottom:.8rem;font-weight:600;color:rgb(var(--color-foreground))}.yarn-color-composer__product-selector .select{position:relative;width:100%}.yarn-color-composer__product-selector .select__select{width:100%;padding:1rem 4rem 1rem 1.5rem;background:rgb(var(--color-background));border:1px solid rgba(var(--color-foreground),.2);border-radius:var(--inputs-radius);color:rgb(var(--color-foreground));font-size:1.4rem;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .2s ease}.yarn-color-composer__product-selector .select__select:hover{border-color:rgba(var(--color-foreground),.4)}.yarn-color-composer__product-selector .select__select:focus{outline:none;border-color:rgb(var(--color-foreground));box-shadow:0 0 0 .3rem rgba(var(--color-foreground),.1)}.yarn-color-composer__product-selector .icon-caret{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);pointer-events:none;width:1rem;height:.6rem}.yarn-color-composer__variant-container{margin-top:2rem}@media screen and (min-width: 750px){.yarn-color-composer__product-selector{margin-bottom:3rem}.yarn-color-composer__variant-container{margin-top:3rem}}.yarn-color-composer__product-details{width:100%}.yarn-color-composer__product-title{margin:0 0 1rem;font-size:2rem;font-weight:600;line-height:1.3;color:rgb(var(--color-foreground))}.yarn-color-composer__product-price{font-size:1.8rem;font-weight:500;color:rgb(var(--color-foreground))}@media screen and (min-width: 750px){.yarn-color-composer__product-title{font-size:2.4rem;margin-bottom:1.5rem}.yarn-color-composer__product-price{font-size:2rem}}.yarn-color-composer__loading{padding:3rem;text-align:center;color:rgba(var(--color-foreground),.6);font-style:italic}.yarn-color-composer__variant-container variant-selects{display:block;margin-bottom:2rem}.yarn-color-composer__variant-container .product-form__input{margin-bottom:1.5rem}.yarn-color-composer__variant-container .product-form__buttons{margin-top:2rem}.yarn-color-composer__variant-container .form__label{display:block;margin-bottom:1rem;font-weight:600;font-size:1.4rem}.yarn-color-composer__variant-image-wrapper{margin-top:3rem;width:100%}.yarn-color-composer__variant-image{width:100%;max-width:600px;height:400px;margin-left:auto;margin-right:auto;border-radius:var(--text-boxes-radius);overflow:hidden;background:rgba(var(--color-foreground),.04);position:relative}.yarn-color-composer__variant-img{display:block;object-fit:cover;object-position:25% 50%;transform-origin:25% 50%;transform:scale(12.5);transition:opacity .3s ease,transform .3s ease;filter:blur(15px);user-drag:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}@media screen and (min-width: 750px){.yarn-color-composer__variant-image{height:500px}}@media screen and (min-width: 750px){.yarn-color-composer__variant-container variant-selects{margin-bottom:3rem}.yarn-color-composer__variant-container .product-form__input{margin-bottom:2rem}.yarn-color-composer__variant-container .product-form__buttons{margin-top:3rem}}.yarn-color-composer__block.scroll-trigger{opacity:0;transition:opacity .3s ease}.yarn-color-composer__block.scroll-trigger.animate--slide-in{animation:slide-in .6s ease forwards}.yarn-color-composer__comparison-wrapper{display:flex;flex-direction:column;gap:3rem;width:100%}.yarn-color-composer__comparison-item{width:100%;padding:2rem;background:rgba(var(--color-foreground),.02);border:1px solid rgba(var(--color-foreground),.1);border-radius:var(--text-boxes-radius)}@media screen and (min-width: 750px){.yarn-color-composer__comparison-wrapper{flex-direction:row;gap:2rem}.yarn-color-composer__comparison-item{width:calc(50% - 1rem);padding:3rem}}.yarn-color-composer__comparison-item--primary .yarn-color-composer__product-selector .form__label:before{content:"1. ";font-weight:700;color:rgb(var(--color-foreground))}.yarn-color-composer__comparison-item--secondary .yarn-color-composer__product-selector .form__label:before{content:"2. ";font-weight:700;color:rgb(var(--color-foreground))}.yarn-color-composer__comparison-images{display:flex;flex-direction:column;margin-bottom:2rem;width:100%;border-radius:20px;overflow:hidden}@media screen and (min-width: 750px){.yarn-color-composer__comparison-images{display:flex;flex-direction:column;margin-bottom:2rem;transform:translate(50%);left:50%;width:50%;border-radius:20px;overflow:hidden}}.yarn-color-composer__comparison-images .yarn-color-composer__variant-image-wrapper{margin-top:0;width:100%}.yarn-color-composer__comparison-images .yarn-color-composer__variant-image{max-width:none;border-radius:0;height:50px}@media screen and (min-width: 750px){.yarn-color-composer__comparison-images{flex-direction:column;gap:0}.yarn-color-composer__comparison-images .yarn-color-composer__variant-image-wrapper--primary,.yarn-color-composer__comparison-images .yarn-color-composer__variant-image-wrapper--secondary{width:100%}}fieldset.yarn-color-composer.product-form__input{border:none}.yarn-color-composer__variant-list{display:flex;flex-direction:column;gap:.8rem;max-height:400px;overflow-y:auto;padding:.5rem 0;margin-top:1rem}.yarn-color-composer__variant-list-item{position:relative}.yarn-color-composer__variant-radio{position:absolute;opacity:0;width:0;height:0}.yarn-color-composer__variant-label{display:flex;align-items:center;gap:1.2rem;padding:1rem 1.5rem;background:rgb(var(--color-background));border:2px solid rgba(var(--color-foreground),.1);border-radius:var(--inputs-radius);cursor:pointer;transition:all .2s ease;position:relative}.yarn-color-composer__variant-label:hover{border-color:rgba(var(--color-foreground),.3);background:rgba(var(--color-foreground),.02)}.yarn-color-composer__variant-radio:checked+.yarn-color-composer__variant-label{border-color:rgb(var(--color-foreground));background:rgba(var(--color-foreground),.04)}.yarn-color-composer__variant-swatch{flex-shrink:0;width:60px;height:60px;border-radius:50%;overflow:hidden;border:2px solid rgba(var(--color-foreground),.1);background:rgba(var(--color-foreground),.04)}.yarn-color-composer__variant-swatch img{width:100%;height:100%;object-fit:cover;display:block}.yarn-color-composer__variant-name{flex:1;font-size:1.5rem;font-weight:500;color:rgb(var(--color-foreground))}.yarn-color-composer__variant-checkmark{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--color-foreground),.1);color:rgb(var(--color-foreground));opacity:0;transform:scale(.8);transition:all .2s ease}.yarn-color-composer__variant-radio:checked+.yarn-color-composer__variant-label .yarn-color-composer__variant-checkmark{opacity:1;transform:scale(1);background:rgb(var(--color-foreground));color:rgb(var(--color-background))}.yarn-color-composer__variant-link{position:absolute;right:4.5rem;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--color-foreground),.05);color:rgb(var(--color-foreground));transition:all .2s ease;z-index:1}.yarn-color-composer__variant-link:hover{background:rgba(var(--color-foreground),.1);transform:translateY(-50%) scale(1.1)}.yarn-color-composer__variant-link svg{width:14px;height:14px}@media screen and (min-width: 750px){.yarn-color-composer__variant-list{gap:1rem;max-height:500px}.yarn-color-composer__variant-label{padding:1.2rem 2rem;gap:1.5rem}.yarn-color-composer__variant-swatch{width:70px;height:70px}.yarn-color-composer__variant-name{font-size:1.6rem}}.yarn-color-composer__variant-list::-webkit-scrollbar{width:8px}.yarn-color-composer__variant-list::-webkit-scrollbar-track{background:rgba(var(--color-foreground),.05);border-radius:4px}.yarn-color-composer__variant-list::-webkit-scrollbar-thumb{background:rgba(var(--color-foreground),.2);border-radius:4px}.yarn-color-composer__variant-list::-webkit-scrollbar-thumb:hover{background:rgba(var(--color-foreground),.3)}.yarn-color-composer__comparison-stitch-chart{display:grid;margin-bottom:2rem;transform:translate(50%);left:50%;width:50%;justify-content:center;align-items:center}.yarn-color-composer__comparison-stitch-chart-cell{width:15px;height:15px;display:block;overflow:hidden;cursor:pointer;contain:layout style paint;will-change:opacity;content-visibility:auto}.yarn-color-composer__comparison-stitch-chart-cell img{user-drag:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none;transform:scale(12.5) translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:blur(0px)}.yarn-color-composer__comparison-stitch-chart-cell[bordered]{border:1px solid rgb(var(--color-foreground))}@media screen and (max-width: 749px){.yarn-color-composer__comparison-stitch-chart-cell img{filter:none!important}}@media screen and (min-width: 750px){.yarn-color-composer__comparison-stitch-chart-cell{width:20px;height:20px}}.yarn-color-composer__comparison-stitch-chart-cell.cell-primary{background:rgba(var(--color-foreground),.1)}.yarn-color-composer__comparison-stitch-chart-cell.cell-secondary{background:rgba(var(--color-foreground),.05)}.yarn-color-composer__stitch-chart-row-label,.yarn-color-composer__stitch-chart-col-label{display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:rgb(var(--color-foreground));user-select:none;-webkit-user-select:none}@media screen and (min-width: 750px){.yarn-color-composer__stitch-chart-row-label,.yarn-color-composer__stitch-chart-col-label{font-size:1rem}}.yarn-color-composer__preview-mode-toggle{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;align-items:center;padding:1.5rem;background:rgba(var(--color-foreground),.05);border-radius:var(--inputs-radius)}.yarn-color-composer__preview-mode-heading{font-size:1.4rem;font-weight:600;color:rgb(var(--color-foreground))}.yarn-color-composer__preview-mode-options{display:flex;gap:.5rem}.yarn-color-composer__preview-mode-label{position:relative;cursor:pointer;display:flex;align-items:center}.yarn-color-composer__preview-mode-radio{position:absolute;opacity:0;width:0;height:0}.yarn-color-composer__preview-mode-button{padding:.8rem 1.5rem;background:transparent;border:1px solid transparent;border-radius:calc(var(--inputs-radius) / 2);font-size:1.4rem;font-weight:500;color:rgb(var(--color-foreground));transition:all .2s ease;white-space:nowrap}.yarn-color-composer__preview-mode-radio:checked+.yarn-color-composer__preview-mode-button{background:rgb(var(--color-background));border-color:rgba(var(--color-foreground),.2);box-shadow:0 1px 3px rgba(var(--color-foreground),.1)}.yarn-color-composer__preview-mode-label:hover .yarn-color-composer__preview-mode-button{background:rgba(var(--color-foreground),.02)}.yarn-color-composer__preview-mode-radio:checked+.yarn-color-composer__preview-mode-button:hover{background:rgb(var(--color-background))}.yarn-color-composer__grid-toggle-label{display:flex;align-items:center;gap:.8rem;cursor:pointer;margin-top:.5rem}.yarn-color-composer__grid-toggle-checkbox{width:1.8rem;height:1.8rem;cursor:pointer;accent-color:rgb(var(--color-foreground))}.yarn-color-composer__grid-toggle-text{font-size:1.4rem;font-weight:500;color:rgb(var(--color-foreground));-webkit-user-select:none;user-select:none}@media screen and (min-width: 750px){.yarn-color-composer__preview-mode-toggle{gap:1.2rem;padding:2rem}.yarn-color-composer__preview-mode-heading{font-size:1.6rem}.yarn-color-composer__preview-mode-options{gap:.8rem}.yarn-color-composer__preview-mode-button{padding:1rem 2rem;font-size:1.5rem}.yarn-color-composer__grid-toggle-checkbox{width:2rem;height:2rem}.yarn-color-composer__grid-toggle-text{font-size:1.5rem}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-yarn-color-composer.css.map */