.trouser-guide .illustrations{display:flex;gap:.25rem;flex-wrap:nowrap;overflow-x:auto;margin-bottom:60px}.trouser-guide .illustration{flex:0 0 auto;width:44.4vw;aspect-ratio:1 / 1.37;display:flex;flex-direction:column;gap:10px;cursor:pointer}.trouser-guide .illustration:first-child{margin-left:1.25rem}.trouser-guide .filter{position:sticky;top:calc(var(--header-height-mobile) - 2px);display:flex;align-items:center;width:100%;height:43px;border-top:1px solid var(--grey);border-bottom:1px solid var(--grey);background:var(--white);padding:.5rem 1.25rem;z-index:3}body:has(.announcement-banner[id$=announcement-banner-main]) .trouser-guide .filter{top:calc(var(--header-height-mobile-with-banner) - 2px)}.trouser-guide .filter .header{font-size:1.5rem}.trouser-guide .filter button{display:flex;height:100%;gap:.5rem}.trouser-guide .filter .buttons-container{position:absolute;top:100%;background-color:var(--white);z-index:2;width:200px;left:1.25rem;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;gap:.75rem;overflow:hidden;max-height:0;transition:max-height .5s ease-in-out,top 1s linear}.trouser-guide .filter.open .buttons-container{transition:max-height .5s ease-in-out,top 0s linear;max-height:500px}.trouser-guide .filter.open div button svg{transform:rotate(180deg)}.trouser-guide .filter .buttons-container .filter-item:first-of-type{padding-top:1.25rem}.trouser-guide .filter .buttons-container .filter-item:last-of-type{padding-bottom:1.25rem}.trouser-guide .filter .buttons-container .filter-item{padding:0 1.25rem;display:flex;align-items:center;cursor:pointer;gap:.5rem}.trouser-guide .filter .buttons-container .filter-item input[type=checkbox]{-webkit-appearance:initial;appearance:initial;width:1.25rem;height:1.25rem;border:1px solid var(--dark20);background:var(--cream);position:relative}.trouser-guide .filter .buttons-container .filter-item div{position:relative;height:20px;width:20px;cursor:pointer}.trouser-guide .filter .buttons-container .filter-item svg{display:none}.trouser-guide .filter .buttons-container li:has(input[type=checkbox]:checked) div svg{display:block;position:absolute;top:0;z-index:2}.trouser-guide .filter .buttons-container li div svg path{fill:var(--white)}.trouser-guide .filter .buttons-container li:has(input[type=checkbox]:checked) input{background:var(--dark);border:1px solid var(--dark)}.trouser-guide .families{display:flex;flex-direction:column}.trouser-guide .family{display:flex;flex-direction:column;padding:0 1.25rem}.trouser-guide .family.odd{background-color:var(--off-white)}.trouser-guide h2{display:flex;justify-content:space-between;font-size:2rem;line-height:1.4;margin:1.5rem 0}.trouser-guide h2.desktop{display:none}.trouser-guide h2 strong{font-family:tt-commons-regular,sans-serif;font-weight:400;font-style:normal}.trouser-guide svg path{fill:var(--dark)}.trouser-guide .images{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;order:2;margin-bottom:20px;flex-shrink:0}.trouser-guide .images.fade-out-in .image{animation:fade-out-in .6s ease-in-out forwards;opacity:1}.trouser-guide .images.fade-out-in .image:nth-of-type(2){animation-delay:.1s}.trouser-guide .images.fade-out-in .image:nth-of-type(3){animation-delay:.2s}.trouser-guide .images.fade-out-in .image:nth-of-type(4){animation-delay:.3s}.trouser-guide .image{aspect-ratio:1 / 2.25}.trouser-guide .materials{display:flex;gap:1.5rem}.trouser-guide .material{position:relative;cursor:pointer}.trouser-guide .material:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background-color:var(--dark);opacity:0;transition:width .3s ease,opacity .3s ease}.trouser-guide .material.active:after{width:100%;opacity:1}.trouser-guide .description{margin-bottom:1rem}.trouser-guide .features ul{display:flex;flex-direction:column;gap:14px}.trouser-guide .features.features-negative ul{margin-top:14px}.trouser-guide .features li{display:flex;align-items:center;line-height:24px}.trouser-guide .features li:before{content:"";display:inline-block;margin-right:.5rem;width:1.5rem;height:1.5rem}.trouser-guide .features-positive li:before{background:url(icon-bullet-tick.svg) no-repeat center center / contain}.trouser-guide .features-negative li:before{background:url(icon-bullet-cross.svg) no-repeat center center / contain}.trouser-guide .colour{display:flex;gap:.25rem;margin-bottom:.5rem;margin-top:1rem;line-height:1.4}.trouser-guide .colour-container{margin-top:30px;margin-bottom:30px}.trouser-guide .colour *{line-height:inherit}.trouser-guide .swatches{display:flex;gap:12px;flex-wrap:wrap;overflow:auto}.trouser-guide .swatch{flex:0 0 auto;width:2rem;height:2rem;cursor:pointer;border:1px solid transparent;padding:1px;transition:border .3s ease}.trouser-guide .scroll-buttons{display:none}.trouser-guide .swatch.active{border:1px solid var(--dark)}.trouser-guide .b9-primary{margin-bottom:30px;max-width:190px}.trouser-guide .materials-container{display:flex;align-items:flex-start;gap:10px}.trouser-guide .materials-container .materials-arrow{display:none;flex-shrink:0;margin-top:5px}.trouser-guide .materials-container .materials-arrow svg{height:1rem;width:1rem}.trouser-guide .materials-container .materials-arrow.show{display:unset;cursor:pointer}.trouser-guide .materials{overflow-y:auto;scroll-behavior:smooth;padding-bottom:10px}.trouser-guide .materials-container{margin-bottom:6px}@media(min-width:1000px){.trouser-guide .materials-container{margin-bottom:20px}.trouser-guide .illustration{width:15.5vw;aspect-ratio:1 / 1.3}.trouser-guide .illustration:first-child{margin-left:40px}.trouser-guide .illustration:last-child{margin-right:40px}.trouser-guide .filter{top:calc(var(--header-height-desktop) - 1px);height:60px;padding:.5rem 2.5rem}.trouser-guide .filter .buttons-container{left:2.5rem}body:has(.announcement-banner[id$=announcement-banner-main]) .trouser-guide .filter{top:calc(var(--header-height-desktop-with-banner) - 2px)}.trouser-guide .family{display:flex;flex-direction:row;padding-left:4px;padding-right:80px}.trouser-guide .family.odd{background-color:#fff;padding-right:0}.trouser-guide h2.desktop{display:flex;font-size:60px;line-height:1;margin-bottom:30px}.trouser-guide h2.desktop *{line-height:inherit}.trouser-guide h2.mobile{display:none}.trouser-guide .container{display:flex;flex-direction:column;justify-content:center;padding-left:80px;margin-bottom:4px}.trouser-guide .family.odd .container{background-color:var(--off-white);padding-right:80px;width:calc(50vw - 2px)}.trouser-guide .description{margin-bottom:30px}.trouser-guide .material{font-size:1.25rem}.trouser-guide .colour-container{margin-top:40px}.trouser-guide .swatch{height:2rem;width:2rem}.trouser-guide .images{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;order:0;padding-right:4px;padding-bottom:4px;margin-bottom:0;width:calc(50vw + 2px)}.trouser-guide .family.even{padding-right:0;padding-left:80px}.trouser-guide .family.even .images{order:1;padding-left:4px}.trouser-guide .family.odd{padding-left:0}.trouser-guide .family.odd .images{background-color:var(--off-white);background-color:#fff;padding-left:4px}.trouser-guide .family.even .container{padding-right:80px;padding-left:0;width:calc(50vw - 2px)}.trouser-guide .image{aspect-ratio:1 / 1.235}.trouser-guide .scroll-buttons button{pointer-events:auto;background-color:#ffffffb3;cursor:pointer;padding:.5rem;z-index:1;display:flex;align-items:center}.trouser-guide .scroll-left{margin-right:auto}.trouser-guide .illustrations-container{position:relative}.trouser-guide .scroll-buttons{display:unset}.trouser-guide .scroll-buttons button{position:absolute;top:40%;justify-content:flex-end}.trouser-guide .scroll-buttons button.scroll-left{left:1.25rem}.trouser-guide .scroll-buttons button.scroll-right{right:1.25rem}}@keyframes fade-out-in{0%{opacity:1}33%{opacity:0}66%{opacity:0}to{opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/2425/assets/trouser-guide.css.map */