.nco-colour-discovery,.nco-colour-discovery *{box-sizing:border-box}.nco-colour-discovery{--nco-cd-ink: #2f3633;--nco-cd-muted: #68716d;--nco-cd-border: #d9dedb;--nco-cd-soft: #f6f7f5;--nco-cd-accent: #61302e;color:var(--nco-cd-ink);background:#fff;padding:clamp(3rem,7vw,7rem) 1.25rem;overflow:visible}.nco-colour-discovery__inner{width:min(100%,1440px);margin:0 auto}.nco-colour-discovery__intro{max-width:720px;margin:0 auto clamp(2.5rem,5vw,4.5rem);text-align:center}.nco-colour-discovery__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.nco-colour-discovery__eyebrow{margin:0 0 .8rem;color:var(--nco-cd-muted);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.nco-colour-discovery__title{margin:0;color:var(--nco-cd-ink);font-size:clamp(2rem,4vw,4rem);font-weight:400;line-height:1.05}.nco-colour-discovery__description{margin:1.25rem auto 0;color:var(--nco-cd-muted);font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.6}.nco-colour-discovery__controls{width:min(100%,1040px);margin:0 auto clamp(2.5rem,5vw,4rem)}.nco-colour-discovery__control-heading{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.nco-colour-discovery__label{color:var(--nco-cd-muted);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.nco-colour-discovery__selected{color:var(--nco-cd-ink);font-size:1.25rem;font-weight:500}.nco-colour-discovery__status{min-height:1.3rem;margin:.75rem 0 0;color:var(--nco-cd-muted);font-size:.9rem;text-align:right}.nco-colour-discovery__stage{width:100%;min-height:min(78vh,900px);display:grid;grid-template-columns:minmax(150px,.92fr) minmax(180px,1.12fr) minmax(180px,1.12fr) minmax(150px,.92fr);grid-template-rows:minmax(180px,1fr) 68px minmax(180px,1fr);gap:20px}.nco-colour-discovery__side-stack{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:20px;grid-row:1 / 4}.nco-colour-discovery__side-stack--left{grid-column:1}.nco-colour-discovery__side-stack--right{grid-column:4}.nco-colour-discovery__side-stack--edge>.nco-colour-discovery__slot{visibility:hidden}.nco-colour-discovery__slot{position:relative;min-width:0;min-height:0;display:flex;overflow:hidden;isolation:isolate}.nco-colour-discovery__slot[data-nco-cd-slot="1"],.nco-colour-discovery__slot[data-nco-cd-slot="2"]{grid-row:1;align-items:flex-start}.nco-colour-discovery__slot[data-nco-cd-slot="1"]{grid-column:2}.nco-colour-discovery__slot[data-nco-cd-slot="2"]{grid-column:3}.nco-colour-discovery__slot[data-nco-cd-slot="5"],.nco-colour-discovery__slot[data-nco-cd-slot="6"]{grid-row:3;align-items:flex-end}.nco-colour-discovery__slot[data-nco-cd-slot="5"]{grid-column:2}.nco-colour-discovery__slot[data-nco-cd-slot="6"]{grid-column:3}.nco-colour-discovery__card{position:relative;display:block;width:100%;height:calc(100% - 20px);min-width:0;overflow:hidden;padding:0;border:0;border-radius:22px;background:var(--nco-cd-soft);color:#fff;cursor:pointer;text-align:left}.nco-colour-discovery__side-stack .nco-colour-discovery__card{height:100%;border-radius:22px}.nco-colour-discovery__card:after{position:absolute;top:45%;right:0;bottom:0;left:0;background:linear-gradient(transparent,#000000a6);content:"";pointer-events:none}.nco-colour-discovery__card:focus-visible{outline:3px solid var(--nco-cd-accent);outline-offset:3px}.nco-colour-discovery__card-image{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--nco-cd-zoom, 1));transition:transform .3s ease}.nco-colour-discovery__card:hover .nco-colour-discovery__card-image,.nco-colour-discovery__card:focus-visible .nco-colour-discovery__card-image{transform:scale(min(1.5,calc(var(--nco-cd-zoom, 1) * 1.025)))}.nco-colour-discovery__card-label{position:absolute;right:1rem;bottom:.85rem;left:1rem;z-index:1;color:#fff;font-size:clamp(.85rem,1.5vw,1.1rem);line-height:1.25;text-shadow:0 1px 2px rgb(0 0 0 / 45%)}.nco-colour-discovery__slider-pill{grid-column:2 / 4;grid-row:2;align-self:center;width:100%;padding:10px;border:1px solid #69665f;border-radius:999px;background:#f7f6f2b8}.nco-colour-discovery__slider-track{position:relative;height:40px;overflow:visible;border-radius:999px;touch-action:none}.nco-colour-discovery__slider-segments{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(var(--nco-cd-segment-count, 1),minmax(0,1fr));border-radius:inherit;overflow:hidden}.nco-colour-discovery__slider-segments:after{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(180deg,#fff3,#ffffff0d 48%,#00000012);content:"";pointer-events:none}.nco-colour-discovery__slider-segment{min-width:0;display:block}.nco-colour-discovery__slider-segment:first-child{border-radius:999px 0 0 999px}.nco-colour-discovery__slider-segment:last-child{border-radius:0 999px 999px 0}.nco-colour-discovery__slider{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;-webkit-appearance:none;appearance:none;background:transparent;border:0;color:transparent;cursor:pointer;accent-color:transparent}.nco-colour-discovery__slider-thumb{position:absolute;top:50%;left:var(--nco-cd-thumb-position, 0%);z-index:2;width:58px;height:58px;border-radius:999px;background:transparent;pointer-events:none;transform:translate(-50%,-50%);transition:left .3s cubic-bezier(.45,0,.2,1);will-change:left}.nco-colour-discovery__slider-thumb:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgb(255 255 255 / 62%);border-radius:inherit;background:#ffffff47;box-shadow:inset 0 1px #ffffff75,inset 0 -1px #30373d14,0 8px 18px #30373d29;content:"";pointer-events:none;backdrop-filter:blur(14px) saturate(1.18);-webkit-backdrop-filter:blur(14px) saturate(1.18);-webkit-mask:radial-gradient(circle at center,transparent 0 25%,#000 calc(25% + 1px));mask:radial-gradient(circle at center,transparent 0 25%,#000 calc(25% + 1px))}.nco-colour-discovery__slider-thumb:after{position:absolute;top:50%;left:50%;width:50%;height:50%;border:1px solid rgb(255 255 255 / 42%);border-radius:999px;box-shadow:inset 0 0 0 1px #30373d0f,0 0 0 1px #ffffff2e;content:"";pointer-events:none;transform:translate(-50%,-50%)}.nco-colour-discovery__slider:active+.nco-colour-discovery__slider-thumb:before{backdrop-filter:blur(16px) saturate(1.24);-webkit-backdrop-filter:blur(16px) saturate(1.24)}.nco-colour-discovery__slider:focus-visible+.nco-colour-discovery__slider-thumb:before{box-shadow:0 0 0 3px #69665f38,inset 0 1px #ffffff75,inset 0 -1px #30373d14,0 8px 18px #30373d29}.nco-colour-discovery__slider::-webkit-slider-runnable-track{height:100%;background:transparent}.nco-colour-discovery__slider::-moz-range-track{height:100%;background:transparent}.nco-colour-discovery__slider::-webkit-slider-thumb{width:58px;height:58px;-webkit-appearance:none;appearance:none;border:0;border-radius:999px;background:transparent;opacity:0}.nco-colour-discovery__slider::-moz-range-thumb{width:58px;height:58px;border:0;border-radius:999px;background:transparent;opacity:0}.nco-colour-discovery__slider:focus-visible{outline:none}@media(min-width:901px){.nco-colour-discovery__stage{width:min(100%,1200px);max-width:1200px;min-height:0;aspect-ratio:16 / 9;grid-template-columns:clamp(150px,18vw,220px) clamp(180px,22vw,270px) clamp(180px,22vw,270px) clamp(150px,18vw,220px);grid-template-rows:minmax(0,1fr) 68px minmax(0,1fr);justify-content:center;gap:16px;margin-inline:auto;padding-block:18px}.nco-colour-discovery__side-stack{grid-template-rows:auto auto;align-content:space-between;gap:16px;padding-block:18px}.nco-colour-discovery__slot[data-nco-cd-slot="1"],.nco-colour-discovery__slot[data-nco-cd-slot="2"]{justify-content:center;padding-top:18px}.nco-colour-discovery__slot[data-nco-cd-slot="5"],.nco-colour-discovery__slot[data-nco-cd-slot="6"]{justify-content:center;padding-bottom:18px}.nco-colour-discovery__slot[data-nco-cd-slot="1"] .nco-colour-discovery__card,.nco-colour-discovery__slot[data-nco-cd-slot="2"] .nco-colour-discovery__card,.nco-colour-discovery__slot[data-nco-cd-slot="5"] .nco-colour-discovery__card,.nco-colour-discovery__slot[data-nco-cd-slot="6"] .nco-colour-discovery__card{width:auto;height:calc(100% - 18px);aspect-ratio:1 / 1}.nco-colour-discovery__side-stack .nco-colour-discovery__card{width:100%;height:auto;aspect-ratio:3 / 4}}.nco-colour-discovery__empty,.nco-colour-discovery__loading{padding:3rem 1rem;border:1px dashed var(--nco-cd-border);color:var(--nco-cd-muted);text-align:center}.nco-colour-discovery__dialog[hidden]{display:none}.nco-colour-discovery__dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:grid;grid-template-columns:minmax(150px,.92fr) minmax(180px,1.12fr) minmax(180px,1.12fr) minmax(150px,.92fr);grid-template-rows:minmax(0,1fr);gap:20px;padding:20px;background:#f7f6f28a}.nco-colour-discovery__dialog-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent}.nco-colour-discovery__dialog-panel{position:relative;grid-column:2 / 4;grid-row:1;width:100%;height:100%;overflow:hidden;border-radius:22px;background:#343537;box-shadow:0 18px 54px #25262638}.nco-colour-discovery__dialog-close{position:absolute;top:20px;right:20px;z-index:2;width:34px;height:34px;border:0;border-radius:999px;background:#ffffffd1;color:#69665f;cursor:pointer;font-size:20px;line-height:1}.nco-colour-discovery__dialog-media{position:absolute;top:0;right:0;bottom:0;left:0;min-height:0;background:#343537}.nco-colour-discovery__dialog-media img{display:block;width:100%;height:100%;min-height:0;max-height:none;object-fit:cover}.nco-colour-discovery__dialog-colour{position:absolute;bottom:16px;left:16px;z-index:2;max-width:calc(50% - 32px);margin:0;overflow:hidden;color:#fff;font-size:clamp(1.35rem,1.9vw,1.75rem);font-weight:300;letter-spacing:.01em;line-height:1.05;pointer-events:none;text-overflow:ellipsis;text-shadow:none;white-space:nowrap}.nco-colour-discovery__dialog-copy{position:absolute;right:20px;bottom:20px;z-index:2;width:min(280px,calc(100% - 40px));padding:20px;border:1px solid rgb(255 255 255 / 56%);border-radius:22px;background:#ffffff57;color:#2d2e32;box-shadow:inset 0 1px #ffffff6b,inset 0 -1px #30373d14,0 12px 34px #25262624;backdrop-filter:blur(18px) saturate(1.22);-webkit-backdrop-filter:blur(18px) saturate(1.22)}.nco-colour-discovery__dialog-kicker{margin:0 0 2px;color:inherit;font-size:14px;font-weight:300;line-height:1.2}.nco-colour-discovery__dialog-basin-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.nco-colour-discovery__dialog-title{margin:0;color:inherit;font-size:14px;font-weight:300;line-height:1.1}.nco-colour-discovery__dialog-detail{display:inline-flex;align-items:center;min-height:22px;margin:0;padding:4px 10px;border:1px solid rgb(45 46 50 / 36%);border-radius:999px;background:transparent;color:inherit;font-size:12px;font-weight:300;letter-spacing:.01em;line-height:1;white-space:nowrap}.nco-colour-discovery__dialog-credit-grid{display:grid;gap:14px;margin:18px 0;color:inherit;font-size:12px;font-weight:300;line-height:1}.nco-colour-discovery__dialog-credit-item{display:grid;gap:2px}.nco-colour-discovery__dialog-credit-label{font-size:12px;line-height:1}.nco-colour-discovery__dialog-position{margin:0 0 18px;color:inherit;font-size:12px;line-height:1.2;opacity:.72}.nco-colour-discovery__dialog-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:38px;padding:0 1rem;border:1px solid rgb(45 46 50 / 36%);border-radius:999px;background:#ffffff6b;color:inherit;font-size:13px;font-weight:300;letter-spacing:.01em;text-decoration:none}.nco-colour-discovery__dialog-link:focus-visible,.nco-colour-discovery__dialog-nav-button:focus-visible,.nco-colour-discovery__dialog-close:focus-visible{outline:2px solid rgb(105 102 95 / 32%);outline-offset:3px}.nco-colour-discovery__dialog-nav{display:flex;position:absolute;top:20px;left:20px;z-index:3;justify-content:space-between;gap:.75rem;padding:0}.nco-colour-discovery__dialog-nav-button{min-height:34px;padding:.45rem .75rem;border:1px solid rgb(255 255 255 / 56%);border-radius:999px;background:#ffffff57;color:#2d2e32;cursor:pointer;backdrop-filter:blur(18px) saturate(1.22);-webkit-backdrop-filter:blur(18px) saturate(1.22)}.nco-colour-discovery__noscript{margin-top:3rem}.nco-colour-discovery__noscript h2{font-weight:400}.nco-colour-discovery__noscript-card{display:inline-block;margin-top:12px;text-decoration:underline}@media(max-width:900px){.nco-colour-discovery{padding-inline:1rem}.nco-colour-discovery__stage{width:100%;aspect-ratio:auto;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(180px,1fr)) auto;gap:12px}.nco-colour-discovery__side-stack{display:contents}.nco-colour-discovery__slot,.nco-colour-discovery__slot[data-nco-cd-slot="1"],.nco-colour-discovery__slot[data-nco-cd-slot="2"],.nco-colour-discovery__slot[data-nco-cd-slot="5"],.nco-colour-discovery__slot[data-nco-cd-slot="6"]{grid-column:auto;grid-row:auto;min-height:clamp(180px,48vw,320px);align-items:stretch}.nco-colour-discovery__card,.nco-colour-discovery__side-stack .nco-colour-discovery__card{height:100%;border-radius:22px}.nco-colour-discovery__side-stack--edge>.nco-colour-discovery__slot{display:none}.nco-colour-discovery__slider-pill{grid-column:1 / -1;grid-row:5;order:9}.nco-colour-discovery__slider-track{height:40px}.nco-colour-discovery__dialog{grid-template-columns:1fr;gap:0;padding:16px}.nco-colour-discovery__dialog-panel{grid-column:1}.nco-colour-discovery__dialog-copy{right:16px;bottom:16px;width:min(280px,calc(100% - 32px))}.nco-colour-discovery__dialog-colour{bottom:16px;left:16px}.nco-colour-discovery__dialog-nav{top:16px;left:16px}}@media(max-width:420px){.nco-colour-discovery__control-heading{align-items:flex-start;flex-direction:column;gap:.35rem}.nco-colour-discovery__status{text-align:left}}@media(prefers-reduced-motion:reduce){.nco-colour-discovery__card-image{transition:none}}.nco-colour-discovery__lookbook{display:inline-block;margin-top:18px;padding:9px 20px;border:1px solid currentColor;border-radius:999px;color:inherit;font-size:14px;text-decoration:none}.nco-colour-discovery__lookbook:hover{background:#61302e;border-color:#61302e;color:#f0eee9}
/*# sourceMappingURL=/cdn/shop/t/107/assets/nco-colour-discovery.css.map */