/* Each stage keeps the dimensions supplied by the page layout. */
.fashion-scene{position:relative;isolation:isolate;overflow:hidden;--scene-controls:106px;--scene-ink:#242629;--scene-paper:#f4eee1}
.fashion-scene[data-scene="weave"]{--scene-controls:154px}
.fashion-scene .scene-fallback{position:absolute;inset:0;width:100%;height:calc(100% - var(--scene-controls));object-fit:cover;transition:opacity .25s ease}
.fashion-canvas{position:absolute;inset:0 0 var(--scene-controls);opacity:0;transition:opacity .25s ease}
.fashion-canvas canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.fashion-canvas canvas:active{cursor:grabbing}
.fashion-scene[data-scene-ready="true"] .fashion-canvas{opacity:1}
.fashion-scene[data-scene-ready="true"] .scene-fallback{opacity:0;pointer-events:none}
.fashion-controls{position:absolute;inset:auto 0 0;z-index:3;height:var(--scene-controls);padding:7px 13px 8px;box-sizing:border-box;background:var(--scene-paper);color:var(--scene-ink);border-top:1px solid #24262924;font-family:inherit}
.fashion-control-row{display:flex;align-items:center;gap:9px;min-height:43px}
.fashion-control-row>label{font-size:15px;flex:none;font-weight:500}
.fashion-control-row input[type="range"]{min-width:30px;min-height:28px;flex:1;width:100%;accent-color:#3047bf;cursor:pointer}
.fashion-control-row output{font-size:14px;white-space:nowrap;min-width:47px;text-align:right;font-variant-numeric:tabular-nums}
.fashion-control-row button,.fashion-controls>a,.fashion-control-row>a,.fashion-weaves button{font:inherit;font-size:16px;color:inherit;min-height:44px;border:1px solid #24262945;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.fashion-control-row button{min-width:44px;padding:4px 9px}
.fashion-control-row a{border:0;border-bottom:1px solid currentColor;gap:14px;margin-left:auto;white-space:nowrap;padding:0 2px;font-size:15px}
.fashion-swatches{display:flex;gap:5px}
.fashion-swatches button{width:44px;padding:7px;border-color:transparent;border-radius:50%}
.fashion-swatches i{display:block;width:25px;height:25px;border-radius:50%;border:2px solid var(--scene-paper);background:var(--fabric-colour)}
.fashion-swatches button[aria-pressed="true"]{border-color:var(--scene-ink)}
.fashion-view-buttons{display:flex;gap:4px}
.fashion-view-buttons button{font-size:25px;padding:0;width:44px}
.fashion-weaves{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:1px}
.fashion-weaves button{font-size:15px;min-width:0;line-height:1.15;flex-direction:column;padding:5px 8px;min-height:48px}
.fashion-weaves small{font-size:12px;margin-top:3px}
.fashion-weaves button[aria-pressed="true"]{background:#3047bf;color:#fff;border-color:#3047bf}
.fashion-weave-copy{font-size:13px!important;line-height:1.35!important;margin:5px 0 0!important;min-height:34px}
.fashion-caption{position:absolute;z-index:2;top:11px;left:12px;right:12px;pointer-events:none;display:flex;align-items:start;justify-content:space-between;gap:12px;font:inherit;font-size:12px;line-height:1.4;color:#242629}
.fashion-caption>span{background:#f4eee1e8;padding:5px 8px}
.fashion-scene [data-fashion-status]{font-size:11px;max-width:58%;text-align:right}
.fashion-controls :is(button,input,a):focus-visible{outline:3px solid #3047bf;outline-offset:3px}
@media(max-width:767px){.fashion-scene{--scene-controls:106px}.fashion-scene[data-scene="weave"]{--scene-controls:154px}.fashion-controls{padding-left:9px;padding-right:9px}.fashion-control-row{gap:6px}.fashion-control-row button,.fashion-weaves button{font-size:15px}.fashion-control-row label{font-size:14px}.fashion-control-row a{font-size:14px;gap:7px}.fashion-view-buttons button{font-size:23px}.fashion-caption{top:8px;left:8px;right:8px;font-size:11px}.fashion-scene [data-fashion-status]{font-size:10px}.fashion-weave-copy{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){.fashion-canvas,.fashion-scene .scene-fallback{transition:none}}
@media(max-width:360px){.fashion-scene[data-scene="drape"] .fashion-control-row>a{display:none}}