.flooring-hero-photo{-webkit-mask-image:linear-gradient(90deg,#0000 0%,#0000001f 18%,#0000008c 38%,#000 62%);mask-image:linear-gradient(90deg,#0000 0%,#0000001f 18%,#0000008c 38%,#000 62%)}.flooring-hero-photo:after{content:"";background:linear-gradient(90deg,#eae7de 0%,#eae7de59 22%,#0000 46%);position:absolute;inset:0}.flooring-hero-photo img{-webkit-mask-image:linear-gradient(90deg,#0000 0%,#00000029 20%,#0000009e 44%,#000 70%);mask-image:linear-gradient(90deg,#0000 0%,#00000029 20%,#0000009e 44%,#000 70%)}.floor-preview{background:#d8d7d2;width:100%;height:100%;min-height:360px;position:relative}.floor-preview canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.floor-preview canvas:active{cursor:grabbing}.floor-preview-hint{color:#f5f3edcc;pointer-events:none;background:#16191cb8;padding:6px 9px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:10px;position:absolute;bottom:12px;right:12px}.unit-button.is-active,.floor-type-button.is-active,.pattern-button.is-active,.colour-button.is-active{background:#eae7de;border-color:#16191c;box-shadow:inset 0 0 0 1.5px #16191c}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0}input[type=color]::-moz-color-swatch{border:0}@media (width<=640px){.floor-preview{aspect-ratio:4/3;min-height:270px}}