.fabric-swatch-panel__inner{--fsp-panel-width: clamp(0px, 65vw, 68.8rem);--fsp-pad-x: clamp(.8rem, .2rem + 3vw, 2.4rem);--fsp-card-border: #cccccc;--fsp-divider-color: #e9e5d5;--fsp-helper-text-color: #695c50;--fsp-skeleton-bg: #ede4d3;--fsp-emphasis-color: #232323;--fsp-emphasis-text-color: #ffffff;--fsp-unavailable-color: #9da8aa;--fsp-footer-height: 8rem;--fsp-heading-size: clamp(1.375rem, 1.075rem + 1.5vw, 1.775rem);--fsp-section-heading-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);--fsp-name-size: clamp(1.2rem, 1rem + .8vw, 1.4rem);--fsp-section-gap: clamp(.6rem, .4rem + 2vw, 1.4rem)}fabric-swatch-panel{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;display:flex;justify-content:flex-end;background-color:rgba(var(--color-foreground),.5);visibility:hidden;transition:visibility var(--duration-default) ease}fabric-swatch-panel.active{visibility:visible}.fabric-swatch-panel__overlay{position:fixed;top:0;right:0;bottom:0;left:0}.fabric-swatch-panel__inner{position:relative;width:var(--fsp-panel-width);max-width:100vw;height:100%;display:flex;flex-direction:column;overflow:hidden;transform:translate(100%);transition:transform var(--duration-default) ease;background-color:rgb(var(--color-background))}fabric-swatch-panel.active .fabric-swatch-panel__inner{transform:translate(0)}.fabric-swatch-panel__header{flex-shrink:0;position:relative;padding:1.5rem var(--fsp-pad-x);display:flex;align-items:center}.fabric-swatch-panel__heading{margin:0;font-family:var(--font-body-family);font-size:var(--fsp-heading-size);font-weight:390;line-height:1.5;letter-spacing:.087rem}.fabric-swatch-panel__close{display:inline-flex;align-items:center;justify-content:center;padding:0;min-width:1.6rem;min-height:1.6rem;position:absolute;top:clamp(1.2rem,.8rem + 1.5vw,1.6rem);right:clamp(1.2rem,.8rem + 2vw,2rem);color:rgba(var(--color-foreground),.6);background-color:transparent;border:none;cursor:pointer}.fabric-swatch-panel__close .svg-wrapper{width:1.2rem;height:1.2rem}.fabric-swatch-panel__close .svg-wrapper svg{stroke:rgba(var(--color-foreground),.6);stroke-width:2px}.fabric-swatch-panel__limit-banner{flex-shrink:0;display:flex;align-items:center;gap:.8rem;margin:0 var(--fsp-pad-x);padding:1.6rem;background:#f3f5f5;border-radius:var(--fsp-card-radius, .4rem);font-size:1.6rem;font-weight:390;line-height:2.2rem;color:#101010}.fabric-swatch-panel__limit-banner[hidden]{display:none}.fabric-swatch-panel__limit-banner .svg-wrapper{flex-shrink:0;width:2.4rem;height:2.4rem;color:#575757}.fabric-swatch-panel__limit-banner .svg-wrapper svg{width:100%;height:100%}.fabric-swatch-panel__body{flex:1 1 auto;overflow-y:auto;margin:var(--fsp-section-gap) var(--fsp-pad-x) 2rem}.fabric-swatch-panel__section+.fabric-swatch-panel__section{margin-top:var(--fsp-section-gap)}.fabric-swatch-panel__section-heading{font-size:var(--fsp-section-heading-size);font-weight:400;margin:0 0 clamp(.6rem,.3rem + 1.5vw,1rem);text-transform:none;letter-spacing:normal}.fabric-swatch-panel__error{height:100%;min-height:30rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;text-align:center}.fabric-swatch-panel__error-text{margin:0;max-width:46.1rem;font-family:var(--font-body-family);font-size:1.6rem;font-weight:390;line-height:1;letter-spacing:0;text-align:center;color:rgb(var(--color-foreground))}.fabric-swatch-panel__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));align-items:stretch;gap:.6rem}.fabric-swatch-panel__card{display:flex;flex-direction:column;gap:.4rem;height:100%;padding:1rem 1rem .4rem;border:1px solid var(--fsp-card-border);background-color:rgb(var(--color-background));cursor:pointer}.fabric-swatch-panel__card.is-active{border-color:var(--fsp-emphasis-color)}.fabric-swatch-panel__card.is-added{border:2px solid var(--fsp-emphasis-color);background-color:#2323230d;padding:calc(1rem - 1px) calc(1rem - 1px) calc(.4rem - 1px)}.fabric-swatch-panel__image{width:100%;position:relative;overflow:hidden;background-color:var(--fsp-skeleton-bg)}.fabric-swatch-panel__added-badge{display:none;align-items:center;justify-content:center;gap:.8rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;min-width:7.6rem;height:2.8rem;padding:.4rem .8rem;background-color:var(--fsp-emphasis-color);border:1px solid var(--fsp-emphasis-color);font-family:var(--font-body-family);font-weight:390;font-size:1.4rem;line-height:2rem;letter-spacing:0;color:var(--fsp-emphasis-text-color);z-index:1}.fabric-swatch-panel__added-badge .svg-wrapper{display:inline-flex;width:1.4rem;height:1.4rem}.fabric-swatch-panel__added-badge .svg-wrapper svg{stroke:var(--fsp-emphasis-text-color)}.fabric-swatch-panel__unavailable-badge{display:none;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;min-width:7.6rem;height:2.8rem;padding:.4rem .8rem;background-color:var(--fsp-unavailable-color);border:1px solid var(--fsp-unavailable-color);font-family:var(--font-body-family);font-weight:390;font-size:1.4rem;line-height:2rem;letter-spacing:0;color:var(--fsp-emphasis-text-color);z-index:1}.fabric-swatch-panel__card.is-unavailable{cursor:pointer}.fabric-swatch-panel__card.is-unavailable .fabric-swatch-panel__unavailable-badge{display:inline-flex}.fabric-swatch-panel__card.is-unavailable .fabric-swatch-panel__added-badge{display:none}.fabric-swatch-panel__card.is-added .fabric-swatch-panel__added-badge{display:inline-flex}.fabric-swatch-panel__image img{display:block;width:100%;aspect-ratio:152.67 / 120;object-fit:cover;opacity:0;transition:opacity var(--duration-default) ease}.fabric-swatch-panel__image img.is-loaded{opacity:1}.fabric-swatch-panel__image-placeholder{display:block;width:100%;aspect-ratio:152.67 / 120;background-color:#f7f2e9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d8cbb4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='1.5'/%3E%3Cpath d='M21 15l-5-5-7 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top left;background-size:4rem}.fabric-swatch-panel__image:has(.fabric-swatch-panel__image-placeholder):after{content:none}.fabric-swatch-panel__image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translate(-100%);animation:fsp-shimmer 1.4s ease-in-out infinite}.fabric-swatch-panel__image:has(img.is-loaded):after{content:none}@keyframes fsp-shimmer{to{transform:translate(100%)}}.fabric-swatch-panel__name{margin:0;font-size:var(--fsp-name-size);font-weight:500;line-height:1.4;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fabric-swatch-panel__price{margin:0;font-size:var(--fsp-name-size);color:rgba(var(--color-foreground),.6);line-height:1.4}.fabric-swatch-panel__card:has(.fabric-swatch-panel__image img:not(.is-loaded)) .fabric-swatch-panel__name,.fabric-swatch-panel__card:has(.fabric-swatch-panel__image img:not(.is-loaded)) .fabric-swatch-panel__price{position:relative;overflow:hidden;color:transparent;height:.4rem;border-radius:.3rem;background-color:var(--fsp-skeleton-bg)}.fabric-swatch-panel__card:has(.fabric-swatch-panel__image img:not(.is-loaded)) .fabric-swatch-panel__name{flex:none;width:80%;margin-top:.4rem}.fabric-swatch-panel__card:has(.fabric-swatch-panel__image img:not(.is-loaded)) .fabric-swatch-panel__price{width:35%}.fabric-swatch-panel__card:has(.fabric-swatch-panel__image img:not(.is-loaded)) .fabric-swatch-panel__name:after,.fabric-swatch-panel__card:has(.fabric-swatch-panel__image img:not(.is-loaded)) .fabric-swatch-panel__price:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translate(-100%);animation:fsp-shimmer 1.4s ease-in-out infinite}.fabric-swatch-panel__drawer{display:flex;align-items:flex-start;position:absolute;left:0;right:0;bottom:var(--fsp-drawer-bottom, var(--fsp-footer-height));z-index:1;width:100%;gap:2.4rem;padding:2.4rem;background-color:#fff;box-shadow:0 -.4rem 1.2rem #00000014;visibility:hidden;pointer-events:none;transform:translateY(100%);transition:transform .2s ease,visibility .2s ease}.fabric-swatch-panel__drawer.is-open{visibility:visible;pointer-events:auto;transform:translateY(0)}.fabric-swatch-panel__drawer-close{position:absolute;top:1.2rem;right:1.2rem;display:inline-flex;align-items:center;justify-content:center;padding:0;min-width:1.6rem;min-height:1.6rem;color:rgba(var(--color-foreground),.6);background-color:transparent;border:none;cursor:pointer}.fabric-swatch-panel__drawer-close .svg-wrapper{width:1.2rem;height:1.2rem}.fabric-swatch-panel__drawer-close .svg-wrapper svg{stroke:rgba(var(--color-foreground),.6);stroke-width:2px}.fabric-swatch-panel__drawer-image{flex-shrink:0;width:11.8rem;height:11.8rem;background-color:var(--fsp-skeleton-bg)}.fabric-swatch-panel__drawer-image--empty{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d8cbb4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='1.5'/%3E%3Cpath d='M21 15l-5-5-7 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top left;background-size:4rem}.fabric-swatch-panel__drawer-image img{display:block;width:100%;height:100%;object-fit:cover}.fabric-swatch-panel__drawer-image img[hidden]{display:none}.fabric-swatch-panel__drawer-info{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;min-width:0}.fabric-swatch-panel__drawer-name{margin:0;font-family:var(--font-body-family);font-weight:420;font-size:1.6rem;line-height:2.25rem;letter-spacing:0;color:#0a0a0a}.fabric-swatch-panel__drawer-composition{margin:0;font-family:var(--font-body-family);font-weight:390;font-size:1.2rem;line-height:1.925rem;letter-spacing:0;color:#0a0a0a}.fabric-swatch-panel__drawer-features{display:flex;flex-wrap:wrap;gap:.8rem}.fabric-swatch-panel__drawer-feature-pill{display:inline-flex;align-items:center;justify-content:center;padding:.4rem 1.2rem;font-family:var(--font-body-family);font-weight:390;font-size:1.1rem;line-height:1.8rem;letter-spacing:0;text-align:center;color:#695c50;border:1px solid #695c50;border-radius:1.2rem}.fabric-swatch-panel__drawer-care{margin:0;font-family:var(--font-body-family);font-weight:390;font-size:1.2rem;line-height:1.925rem;letter-spacing:0;color:#0a0a0a}.fabric-swatch-panel__drawer-cta-row{display:flex;align-items:center;gap:1.9rem}.fabric-swatch-panel__drawer-cta{flex-shrink:0}.fabric-swatch-panel__drawer-cta.is-disabled{cursor:pointer;color:#a6a6a6;background-color:#f7f7f7;border-color:#a6a6a6;font-weight:450;font-size:1.4rem;line-height:2.1rem;letter-spacing:.22em;text-transform:uppercase}.fabric-swatch-panel__drawer-cta.is-disabled:focus,.fabric-swatch-panel__drawer-cta.is-disabled:focus-visible{outline:none;box-shadow:none}.fabric-swatch-panel__drawer-message{position:relative;margin:0;padding:.8rem 1.6rem;font-family:var(--font-body-family);font-weight:390;font-size:1.2rem;line-height:1.5;letter-spacing:0;text-transform:none;white-space:nowrap;color:rgb(var(--color-foreground));background-color:#fff;border:1px solid var(--fsp-divider-color)}.fabric-swatch-panel__drawer-message:before{content:"";position:absolute;top:50%;left:-1.9rem;transform:translateY(-50%);width:1.9rem;height:1.674rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='16.74' viewBox='0 0 19 16.74'%3E%3Cpath d='M19 0 L0 8.37 L19 16.74 Z' fill='%23ffffff'/%3E%3Cpath d='M19 0.5 L0.6 8.37 L19 16.24' fill='none' stroke='%23e9e5d5' stroke-width='1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%}.fabric-swatch-panel__footer{position:relative;flex-shrink:0;padding:1.5rem var(--fsp-pad-x) 1rem;display:flex;flex-direction:column;border-top:1px solid var(--fsp-divider-color);background-color:#fbf9f4}.fabric-swatch-panel__footer-row{min-height:var(--fsp-footer-height);display:flex;align-items:center;justify-content:space-between;gap:1rem}.fabric-swatch-panel__selected-items{position:absolute;z-index:3;left:0;right:0;bottom:100%;display:flex;flex-direction:column;padding:0 var(--fsp-pad-x);max-height:0;overflow-y:hidden;overscroll-behavior:contain;background-color:#fbf9f4;border-top:1px solid var(--fsp-divider-color);box-shadow:0 -.4rem 1.2rem #00000014;box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;transition:max-height .12s ease,opacity .12s ease,visibility .12s ease}.fabric-swatch-panel__selected-items.is-open{max-height:var(--fsp-selected-items-max, 30rem);overflow-y:auto;opacity:1;visibility:visible;pointer-events:auto}.fabric-swatch-panel__selected-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2.25rem 1.25rem;font-size:1.4rem;box-sizing:border-box;flex-shrink:0}.fabric-swatch-panel__selected-item:after{content:"";position:absolute;left:1.25rem;right:1.25rem;bottom:0;border-bottom:1px solid #c2c2c2}.fabric-swatch-panel__selected-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fabric-swatch-panel__selected-item-remove{flex-shrink:0;background:none;border:none;padding:0;color:inherit;font-family:inherit;font-size:1.2rem;font-weight:450;letter-spacing:.1rem;text-transform:uppercase;text-decoration:underline;cursor:pointer}.fabric-swatch-panel__selected-item-remove:disabled{opacity:.5;cursor:default}.fabric-swatch-panel__selected-item-remove.loading{position:relative;color:transparent}.fabric-swatch-panel__selected-item-remove.loading>.loading__spinner{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;height:100%;display:flex;align-items:center}.fabric-swatch-panel__selected-item-remove.loading>.loading__spinner .spinner{width:fit-content}.fabric-swatch-panel__selected-item-remove.loading>.loading__spinner .path{stroke:rgb(var(--color-foreground))}.fabric-swatch-panel__summary{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;cursor:pointer;text-align:left;color:inherit;font-family:var(--font-body-family)}.fabric-swatch-panel__summary:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:2px}.fabric-swatch-panel__summary-top{display:flex;align-items:center;gap:.6rem}.fabric-swatch-panel__selected-count{font-size:1.6rem;font-weight:500;line-height:1.75}.fabric-swatch-panel__summary-chevron{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;transition:transform var(--duration-default) ease}.fabric-swatch-panel__summary.is-expanded .fabric-swatch-panel__summary-chevron{transform:rotate(180deg)}.fabric-swatch-panel__summary-helper{font-size:1.2rem;line-height:1.33;letter-spacing:.1rem;text-transform:uppercase;color:var(--fsp-helper-text-color)}.fabric-swatch-panel__view-cart{min-width:12rem;flex-shrink:0}@media screen and (max-width:767px){.fabric-swatch-panel__inner{width:100%}.fabric-swatch-panel__header{justify-content:space-between;align-items:flex-start;gap:1rem}.fabric-swatch-panel__heading{max-width:calc(100% - 2.8rem)}.fabric-swatch-panel__close{position:static;flex-shrink:0}.fabric-swatch-panel__name{white-space:normal}.fabric-swatch-panel__grid{grid-template-columns:repeat(2,1fr);gap:.8rem .6rem}.fabric-swatch-panel__drawer{bottom:0;min-height:var(--fsp-drawer-bottom, 13rem);padding:2rem 1.6rem;gap:1.2rem}.fabric-swatch-panel__drawer-info{gap:.8rem}.fabric-swatch-panel__drawer-features{flex-wrap:wrap}.fabric-swatch-panel__drawer-cta-row{position:relative;flex-direction:column;align-items:flex-start;gap:.6rem}.fabric-swatch-panel__drawer-cta{width:100%}.fabric-swatch-panel__drawer-message{position:absolute;right:-.8rem;left:auto;bottom:calc(100% + .6rem);order:0;white-space:nowrap;max-width:100%;z-index:1}.fabric-swatch-panel__drawer-message:before{top:auto;left:auto;right:1.6rem;bottom:-1.674rem;width:1.9rem;height:1.674rem;transform:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='16.74' viewBox='0 0 19 16.74'%3E%3Cpath d='M0 0 L9.5 16.74 L19 0 Z' fill='%23ffffff'/%3E%3Cpath d='M0.5 0 L9.5 16.24 L18.5 0' fill='none' stroke='%23e9e5d5' stroke-width='1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%}.fabric-swatch-panel__footer{padding:1.5rem var(--fsp-pad-x) 1rem}.fabric-swatch-panel__footer-row{flex-direction:column;align-items:stretch;justify-content:center;gap:.8rem;min-height:0}.fabric-swatch-panel__summary{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%}.fabric-swatch-panel__summary-helper{order:-1}.fabric-swatch-panel__view-cart{width:100%;min-width:0}}
/*# sourceMappingURL=/cdn/shop/t/476/assets/component-fabric-swatch-panel.css.map */