.share-the-look-section{background-color:var(--color-background);color:var(--color-foreground);padding:4rem 0;min-height:600px}.share-the-look-container{margin:0 auto;padding:0 1.5rem;opacity:0;transition:opacity .6s ease-out}.share-the-look-section.loaded .share-the-look-container{opacity:1}@media (min-width: 750px){.share-the-look-container{padding:0 5rem}}.stl-layout-wrapper{display:flex;flex-direction:column;gap:2rem}@media (min-width: 990px){.stl-layout-wrapper{flex-direction:row;align-items:flex-start}}.stl-left-column{flex:1;width:100%;transition:all .5s cubic-bezier(.4,0,.2,1);max-width:100%}.stl-layout-wrapper:not(:has(.stl-right-column.is-visible)) .stl-left-column{max-width:100%;flex:1 1 100%}.stl-layout-wrapper:not(:has(.stl-right-column.is-visible)) .stl-left-column .stl-header-container,.stl-layout-wrapper:not(:has(.stl-right-column.is-visible)) .stl-left-column .stl-grid-container{max-width:100%}.stl-right-column{width:100%;flex-shrink:0;opacity:0;transform:translate(100%);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),max-width .5s cubic-bezier(.4,0,.2,1);pointer-events:none;max-width:0;overflow:hidden}.stl-right-column.is-visible{opacity:1;transform:translate(0);pointer-events:auto;max-width:350px;overflow:visible}@media (min-width: 990px){.stl-right-column{width:350px;position:sticky;top:2rem}.stl-right-column.is-visible{max-width:350px;width:350px}.stl-right-column:not(.is-visible){max-width:0;width:0;margin:0;padding:0}}.stl-header-container{display:flex;flex-direction:column;align-items:center;margin-bottom:3rem;gap:2rem}.stl-layout-wrapper:has(.stl-right-column.is-visible) .stl-header-container{align-items:flex-start}.stl-main-heading{font-size:3.5rem;text-transform:uppercase;margin:0;text-align:center}.stl-layout-wrapper:has(.stl-right-column.is-visible) .stl-main-heading{text-align:left}.stl-search-wrapper{background-color:#f4f4f4;padding:0;border-radius:8px;width:100%;max-width:800px;display:flex;justify-content:center}.stl-layout-wrapper:has(.stl-right-column.is-visible) .stl-search-wrapper{margin-left:0;justify-content:flex-start;background:transparent;padding:0;background-color:#f4f4f4;max-width:100%}.stl-layout-wrapper:not(:has(.stl-right-column.is-visible)) .stl-search-wrapper{max-width:800px;margin:0 auto;justify-content:center}.stl-search-container{width:100%;position:relative;display:flex;gap:1.5rem}.stl-search-input{width:100%;height:4.8rem;padding:0 1.6rem;background-color:transparent;border:.1rem solid rgba(var(--color-border),var(--alpha-border));color:rgb(var(--color-heading-text));border-radius:var(--input-border-radius);font-size:var(--font-size-static-sm);line-height:var(--line-height-static-md);-webkit-appearance:none;appearance:none;transition:border-color var(--duration-default)}.stl-search-input:focus{outline:none;border-color:currentColor}@media (hover: hover){.stl-search-input:hover{border-color:currentColor}}.stl-grid-container{display:grid;grid-template-columns:1fr;gap:2.5rem;max-width:1400px;margin:0 auto;width:100%}.stl-layout-wrapper:not(:has(.stl-right-column.is-visible)) .stl-grid-container{max-width:100%}@media (min-width: 768px){.stl-grid-container{grid-template-columns:1fr 1fr 1fr}}.stl-step-card{background:var(--color-background-subdued, #f9f9f9);border:1px solid var(--color-border);border-radius:8px;padding:3rem;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center}.stl-step-number{background:var(--color-foreground);color:var(--color-background);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;margin-bottom:2rem}.stl-step-title{font-size:1.4rem;color:var(--color-foreground);margin-bottom:2.5rem;line-height:1.5}.stl-card-placeholder{flex:1;display:flex;justify-content:center;align-items:center;font-size:4rem;opacity:.2}.stl-search-layout{display:grid;grid-template-columns:1fr;gap:3rem;height:calc(100vh - 250px);min-height:600px}@media (min-width: 990px){.stl-search-layout{grid-template-columns:1fr 350px}}.stl-main-results{overflow-y:auto;padding-right:1rem;display:flex;flex-direction:column;overflow:visible}.stl-results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;width:100%;transition:grid-template-columns .5s cubic-bezier(.4,0,.2,1)}@media (min-width: 750px){.stl-results-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}@media (min-width: 990px){.stl-layout-wrapper:has(.stl-right-column.is-visible) .stl-results-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.stl-layout-wrapper:not(:has(.stl-right-column.is-visible)) .stl-results-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}.stl-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:1.4rem;color:#666;width:100%;max-width:100%;padding:6rem 2rem;min-height:300px;grid-column:1 / -1}.stl-empty-state:before{content:"\1f50d";font-size:4rem;margin-bottom:1.5rem;opacity:.5}.stl-empty-state-text{font-weight:500;margin-bottom:.5rem}.stl-empty-state-subtext{font-size:1rem;color:#999;margin-top:.5rem}.stl-sidebar{background:var(--color-background-subdued, #f9f9f9);border:1px solid var(--color-border);border-radius:8px;padding:2rem;display:flex;flex-direction:column;height:calc(100vh - 100px);min-height:500px;overflow:hidden;transition:height .3s ease}.stl-sidebar-content{display:flex;flex-direction:column;height:100%;overflow:hidden}.stl-sidebar-header{padding:1rem;border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;gap:.8rem;background:var(--color-background);position:sticky;top:0;z-index:10}.stl-sidebar-header h3{margin:0;font-size:1.2rem;text-transform:uppercase;letter-spacing:.05em}.stl-look-name-input{width:100%;height:4.8rem;padding:0 1.6rem;background-color:transparent;border:.1rem solid rgba(var(--color-border),var(--alpha-border));color:rgb(var(--color-heading-text));border-radius:var(--input-border-radius);font-size:var(--font-size-static-sm);line-height:var(--line-height-static-md);-webkit-appearance:none;appearance:none;transition:border-color var(--duration-default)}.stl-look-name-input:focus{outline:none;border-color:currentColor}.stl-look-name-input::placeholder{color:rgba(var(--color-foreground),.75)}.stl-look-name-input:focus::placeholder{color:transparent}@media (hover: hover){.stl-look-name-input:hover{border-color:currentColor}}.stl-copy-btn{width:100%;padding:.8rem;background:#000;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:background .2s}.stl-selected-list-vertical{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1.2rem;padding-right:.5rem;margin-bottom:0}.stl-sidebar-footer{margin-top:auto}.stl-mobile-toggle{display:none;padding:1rem;background:var(--color-background-subdued, #f9f9f9);border-bottom:1px solid var(--color-border);cursor:pointer;justify-content:space-between;align-items:center;font-weight:700}@media (max-width: 989px){.stl-right-column{position:fixed;bottom:0;left:0;width:100%;z-index:100;pointer-events:none;opacity:0;transform:translateY(100%);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);max-width:100%}.stl-right-column.is-visible{opacity:1;transform:translateY(calc(100% - 60px));pointer-events:auto}.stl-right-column.is-visible.is-expanded-mobile{transform:translateY(0)}.stl-mobile-toggle{display:flex;height:60px}.stl-sidebar{pointer-events:auto;border-radius:16px 16px 0 0;box-shadow:0 -4px 12px #0000001a;height:auto;max-height:80vh;padding:0;min-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.stl-right-column.is-visible .stl-sidebar:not(.is-expanded){max-height:60px}.stl-right-column.is-visible .stl-sidebar.is-expanded{max-height:80vh}.stl-sidebar-content{padding:1.5rem;height:calc(80vh - 60px);display:flex}.stl-sidebar-header{padding-top:0}.stl-layout-wrapper{padding-bottom:80px}}.stl-product-card{background:var(--color-background);border-radius:4px;overflow:hidden;cursor:pointer;transition:transform .2s;border:1px solid transparent;position:relative}.stl-product-card:hover{transform:translateY(-4px);border-color:var(--color-border)}.stl-product-card.selected{border-color:var(--color-foreground);box-shadow:0 0 0 2px var(--color-foreground)}.product-card__media-container{position:relative;overflow:hidden}.stl-product-image{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}.stl-product-info{padding:1rem}.stl-product-title{font-size:1rem;font-weight:700;text-transform:uppercase;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-foreground);text-decoration:none;display:block;letter-spacing:.05em}.stl-product-subtitle{font-size:.9rem;color:var(--color-foreground);margin-bottom:.2rem}.stl-product-color{font-size:.9rem;color:var(--color-foreground-subdued, #666);margin-bottom:.5rem}.stl-product-price{font-size:1rem;color:var(--color-foreground);font-weight:700}.stl-price-container{display:flex;gap:.5rem;align-items:center}.stl-compare-price{text-decoration:line-through;color:var(--color-foreground-subdued, #666);font-weight:400}.stl-sale-price{color:#d32f2f}.stl-selected-item{display:flex;gap:1.2rem;align-items:center;background:var(--color-background);padding:.8rem;border-radius:4px;border:1px solid var(--color-border);animation:slideIn .3s ease-out forwards;opacity:0;transform:translate(20px);flex-shrink:0}.stl-selected-item.removing{animation:slideOut .3s ease-in forwards}@keyframes slideIn{to{opacity:1;transform:translate(0)}}@keyframes slideOut{to{opacity:0;transform:translate(20px)}}.stl-selected-item img{width:60px;height:80px;object-fit:cover;border-radius:2px}.stl-selected-info{flex:1;overflow:hidden}.stl-selected-title{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.stl-remove-btn{background:none;border:none;color:var(--color-foreground);font-size:1.8rem;cursor:pointer;padding:0 .8rem;line-height:1}.stl-remove-btn:hover{opacity:.7}.stl-copy-btn{padding:1.2rem 1.5rem;background:#000;color:#fff;border:none;border-radius:50px;font-weight:700;font-size:1rem;cursor:pointer;white-space:nowrap;transition:opacity .2s,transform .1s;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.05em}.stl-copy-btn:hover{opacity:.9;transform:scale(1.02)}.stl-copy-btn:active{transform:scale(.98)}.stl-shared-view{text-align:center}.share-the-look-section .collection__grid{margin-top:3rem}.stl-loading{display:flex!important;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;min-height:300px;text-align:center;width:100%}.stl-loader{width:50px;height:50px;border:4px solid #e0e0e0;border-top-color:#000;border-radius:50%;animation:stl-spin .8s linear infinite;display:block!important;margin:0 auto 1.5rem;flex-shrink:0;opacity:1!important;visibility:visible!important}@keyframes stl-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stl-loading-text{color:var(--color-foreground-subdued, #666);font-size:1.2rem;margin-top:0}
/*# sourceMappingURL=/cdn/shop/t/102/assets/section-share-the-look.css.map */