.topo-loupe{--paper: rgb(var(--color-background, 244 241 234));--paper-sunk: rgba(var(--color-foreground, 29 35 40), .06);--ink: rgb(var(--color-foreground, 29 35 40));--ink-soft: rgba(var(--color-foreground, 29 35 40), .72);--line: rgba(var(--color-foreground, 29 35 40), .18);--line-firm: rgba(var(--color-foreground, 29 35 40), .34)}.topo-loupe *,.topo-loupe *:before,.topo-loupe *:after{box-sizing:border-box}.topo-loupe__closeup{position:absolute;top:-1px;left:calc(100% + 10px);padding:3px;border-radius:999px;background:var(--paper-sunk);border:1px solid var(--line)}.topo-loupe .topo-closeup__pill{display:grid;place-items:center;width:var(--stop, 52px);height:32px;padding:0;border:0;border-radius:999px;background:none;color:var(--ink-soft);cursor:pointer;transition:color .25s ease,background-color .25s ease}.topo-loupe .topo-closeup__pill[hidden]{display:none}.topo-loupe .topo-closeup__pill:hover{color:var(--paper);background:var(--ink)}.topo-loupe .topo-closeup__pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.topo-loupe .topo-closeup__pill svg{width:18px;height:18px;fill:currentColor}@media(max-width:420px){.topo-loupe[data-closeup] .look-zoom{--stop: 44px}}.topo-loupe__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;grid-template-areas:"head" "main";align-items:start}.topo-loupe--looks .topo-loupe__grid{grid-template-areas:"head" "looks" "main" "order"}.topo-loupe__head{grid-area:head;min-width:0}.topo-loupe__main{grid-area:main;display:flex;flex-direction:column;min-width:0}.topo-loupe__looks{grid-area:looks;min-width:0}.topo-loupe__head>:first-child{margin-top:0}.topo-loupe__head>:last-child{margin-bottom:0}.topo-loupe__title{margin:0 0 1.6rem;overflow-wrap:break-word}.topo-loupe__text>:first-child{margin-top:0}.topo-loupe__text>:last-child{margin-bottom:0}@media(min-width:900px){.topo-loupe__grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;grid-template-areas:"head main main"}.topo-loupe--looks .topo-loupe__grid{grid-template-areas:"head head head" "looks main main" "order order order"}.topo-loupe--looks .topo-loupe__main{align-self:center;justify-content:center}.topo-loupe--looks .look-bench{width:100%;max-width:560px;margin:0 auto}.topo-loupe--bare .topo-loupe__main{grid-column:1 / -1;grid-row:1 / -1;width:calc((200% - 40px) / 3);margin:0 auto}}.topo-loupe__walls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 12px}.topo-loupe .wall-paint{width:22px;height:22px;padding:0;border-radius:50%;cursor:pointer;background:var(--swatch);border:1px solid var(--line-firm)}.topo-loupe .wall-paint[aria-pressed=true]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}.topo-loupe .wall-paint:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.topo-loupe .look-controls{order:0;display:flex;flex-direction:row;justify-content:center;margin:0 0 14px}@media(max-width:899px){.topo-loupe--looks .look-controls{order:2;margin:14px 0 0}}@media(min-width:900px){.topo-loupe:not(.topo-loupe--looks) .look-controls{order:2;margin:6px 0 0}.topo-loupe:not(.topo-loupe--looks) .look-zoom{transform:translate(var(--under-frame, 0px));transition:transform .45s ease}}.topo-loupe .look-picker{position:static;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px;overflow:visible;margin:0;padding:0;border:0;background:none}.topo-loupe .look-pick .words,.topo-loupe .look-pick .t,.topo-loupe .look-pick .d{display:none}.topo-loupe .look-pick .chip{width:34px;height:34px;border-color:var(--line)}.topo-loupe .look-pick[aria-pressed=true]{background:none;font-weight:inherit}.topo-loupe .look-pick:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.topo-loupe__about{margin:12px auto 0;max-width:34rem;text-align:center}.topo-loupe__look-name{margin:0 0 2px;font-size:1.6rem}.topo-loupe__look-desc{margin:0;font-size:1.4rem;color:var(--ink-soft)}@media(min-width:900px){.topo-loupe .look-picker{flex-direction:column;flex-wrap:nowrap;gap:2px}.topo-loupe.topo-loupe--looks .look-pick{display:flex;align-items:center;gap:12px;width:100%;padding:6px 8px;text-align:left;border:0;border-radius:10px;cursor:pointer}.topo-loupe.topo-loupe--looks .look-pick .chip{flex:none;width:64px;height:64px}.topo-loupe.topo-loupe--looks .look-pick .words{display:flex;flex-direction:column;justify-content:center;min-width:0}.topo-loupe.topo-loupe--looks .look-pick .t{display:block;margin:0;font-family:var(--font-heading-family);font-style:var(--font-heading-style);font-weight:var(--font-heading-weight);font-size:1.6rem;line-height:1.3}.topo-loupe.topo-loupe--looks .look-pick .d{display:block;margin:0;font-family:var(--font-body-family);font-size:1.3rem;line-height:1.4;color:var(--ink-soft)}.topo-loupe.topo-loupe--looks .look-pick[aria-pressed=true]{background:var(--paper-sunk);color:var(--ink);box-shadow:0 0 0 2px var(--ink)}.topo-loupe__about{display:none}}.topo-loupe__order{grid-area:order;margin-top:8px;text-align:center}.topo-loupe__order[hidden]{display:none}.topo-loupe[data-frame=white] .look-frame{--frame-colour: #f3f1ec;outline:1px solid rgba(0,0,0,.12)}.topo-loupe[data-frame=oak] .look-frame{--frame-colour: #b88a57;border-image:linear-gradient(135deg,#c99d69,#ad7f4c 35%,#c4955f 55%,#a07243) 1}@media(max-width:599px){.topo-loupe .look-picker{gap:2px}.topo-loupe .look-picker .look-pick{padding:1px}.topo-loupe .look-pick .chip{width:26px;height:26px}}.topo-loupe .chip{flex:none;width:54px;height:54px;border-radius:7px;border:1px solid var(--line-firm);overflow:hidden;display:grid;grid-template-rows:1fr 1fr 1fr}.topo-loupe .chip i{display:block}.topo-loupe .look-pick{flex:none;display:flex;align-items:center;gap:12px;padding:3px;font:inherit;color:var(--ink-soft);border:2px solid transparent;border-radius:10px;background:none}.topo-loupe .look-pick[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}.topo-loupe .look-bench{position:relative;order:1}.topo-loupe .look-frame{--frame-colour: #1a1a1a;--mat-colour: #ffffff;--frame-w: 4px;--mat: 0px;position:absolute;border:var(--frame-w) solid var(--frame-colour);padding:var(--mat);background:var(--mat-colour);box-shadow:0 2px 3px #00000040,0 22px 40px -14px #0000008c;cursor:zoom-in;transition:left .45s ease,top .45s ease,width .45s ease}.topo-loupe .look-bench.at-max .look-frame,.topo-loupe .look-bench.at-max .look-lens{cursor:default}.topo-loupe .look-print{position:relative}.topo-loupe .look-print img{display:block;width:100%;height:auto}.topo-loupe .look-print .loc{position:absolute;transform:translate(-50%,-50%);pointer-events:none;border:1.5px solid #fff;outline:1px solid rgba(0,0,0,.5);transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease}.topo-loupe .look-bench:not(.open) .loc{opacity:0}.topo-loupe .look-lens{position:absolute;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 0 5px #fff,0 0 0 6px #0000001f,0 30px 50px -14px #0000008c;cursor:zoom-in;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,left .45s ease,top .45s ease,width .45s ease,height .45s ease}.topo-loupe .look-bench:not(.open) .look-lens{transform:scale(.06);opacity:0;pointer-events:none}.topo-loupe .lens-track{display:flex;height:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.topo-loupe .lens-track::-webkit-scrollbar{display:none}.topo-loupe .lens-slide{flex:none;width:100%;height:100%;scroll-snap-align:center}.topo-loupe .lens-slide img{display:block;width:100%;height:100%;object-fit:cover}.topo-loupe .look-cone{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity .25s ease}.topo-loupe .look-cone polygon{fill:#ffffff1f}.topo-loupe .look-cone line{stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}.topo-loupe .look-bench:not(.open) .look-cone,.topo-loupe .look-bench.moving .look-cone,.topo-loupe .look-cone.off{opacity:0}.topo-loupe .look-zoom{--stop: 52px;position:relative;display:inline-flex;padding:3px;border-radius:999px;background:var(--paper-sunk);border:1px solid var(--line)}.topo-loupe .look-zoom button{position:relative;z-index:1;display:grid;place-items:center;width:var(--stop);height:32px;padding:0;border:0;border-radius:999px;background:none;color:var(--ink-soft);transition:color .25s ease}.topo-loupe .look-zoom button[aria-pressed=true]{color:var(--paper)}.topo-loupe .look-zoom .icon{width:18px;height:18px}.topo-loupe .look-zoom .dot{display:block;border-radius:50%;background:currentColor}.topo-loupe .look-zoom .dot.s{width:5px;height:5px}.topo-loupe .look-zoom .dot.m{width:8px;height:8px}.topo-loupe .look-zoom .thumb{position:absolute;top:3px;left:3px;width:var(--stop);height:32px;border-radius:999px;background:var(--ink);box-shadow:0 1px 4px #00000040;transition:transform .3s cubic-bezier(.2,.8,.2,1)}@media(min-width:900px){.topo-loupe .look-frame{--frame-w: 5px}.topo-loupe .look-zoom{--stop: 41px}}@media(prefers-reduced-motion:reduce){.topo-loupe .look-frame,.topo-loupe .look-lens,.topo-loupe .look-cone,.topo-loupe .look-zoom,.topo-loupe .look-zoom .thumb,.topo-loupe .look-zoom button,.topo-loupe .topo-closeup__pill{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/topo-loupe-section.css.map */