.colour-picker-container{max-width:1200px;margin:0 auto;padding:20px}.colour-picker-title{text-align:center;font-size:2.5em;margin-bottom:10px}.colour-picker-subtitle{text-align:center;font-size:1.2em;margin-bottom:30px;color:#666}.main-preview-area{margin-bottom:20px;background:#f5f5f5;padding:20px;border-radius:10px;min-height:400px}.preview-image{width:100%;height:400px;overflow:hidden;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.preview-image img{width:100%;height:100%;object-fit:cover}.split-view{display:flex;height:400px;position:relative;border-radius:8px;overflow:hidden}.split-left,.split-right{flex:1;position:relative;overflow:hidden}.split-left img,.split-right img{width:200%;height:100%;object-fit:cover;position:absolute;top:0}.split-left img{left:0}.split-right img{right:0}.split-divider{position:absolute;top:0;left:50%;width:2px;height:100%;background:rgba(255,255,255,.8);transform:translateX(-50%);z-index:2}.colour-label{position:absolute;bottom:20px;background:rgba(0,0,0,.7);color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;z-index:3;transform:translateX(0);white-space:nowrap}.left-label{left:20px}.right-label{right:20px}.comparison-controls{text-align:center;margin:20px 0}.start-compare,.exit-compare{padding:10px 20px;font-size:16px;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.start-compare{background:#007bff;color:#fff}.exit-compare{background:#6c757d;color:#fff}.start-compare:hover{background:#0056b3}.exit-compare:hover{background:#5a6268}.colour-swatches-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:20px;padding:0 10px}.colour-swatch{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:all .2s ease;position:relative;border:2px solid transparent}.colour-swatch.selected{border-color:#28a745;box-shadow:0 0 0 2px rgba(40,167,69,.25)}.colour-swatch.selected:before{content:'✓';position:absolute;top:8px;right:8px;background:#28a745;color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:2}.colour-swatch.selected .select-colour{background:#28a745 !important}.colour-swatch.selected .select-colour:hover{background:#218838 !important}.swatch-preview{position:relative;padding-bottom:100%}.swatch-preview img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.swatch-name{font-size:13px;margin:8px 0;padding:0 8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatch-description{padding:0 15px 15px;margin:0;font-size:.9em;color:#666}.select-colour{width:100%;padding:8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;border:none;background:#007bff;color:#fff;cursor:pointer;transition:background-color .2s ease}.select-colour:hover{background:#0056b3}.no-colours{grid-column:1/-1;text-align:center;padding:30px;background:#f5f5f5;border-radius:10px;color:#666}@media (max-width:768px){.main-preview-area{min-height:300px}.preview-image,.split-view{height:300px}.colour-swatches-grid,.layout-grid{grid-template-columns:repeat(3,1fr);gap:8px}.swatch-name,.swatch-description{display:none}.colour-swatch{display:flex;flex-direction:column}.select-colour{padding:6px 0;font-size:10px;margin-top:0}.colour-picker-container{padding:10px}.main-preview-area{margin-bottom:15px;padding:10px}.preview-container,.comparison-container{height:200px}.colour-name{font-size:1em;padding:10px}.colour-description{font-size:.8em;padding:0 10px 10px}.compare-button{padding:10px;font-size:.9em}.layout-masonry{columns:3;column-gap:8px}.layout-carousel .colour-swatch{flex:0 0 calc(33.333% - 6px)}}.comparison-view{position:relative;width:100%;overflow:hidden;margin:20px 0}.comparison-container{position:relative;width:100%;height:500px;background:#f5f5f5;overflow:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.image-left,.image-right{position:absolute;top:0;left:0;width:100%;height:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.image-left{z-index:1;clip-path:inset(0 50% 0 0)}.image-right{z-index:0}.image-left img,.image-right img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.slider-handle{position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);z-index:2;cursor:ew-resize;background:rgba(255,255,255,.8)}.slider-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:ew-resize;display:flex;align-items:center;justify-content:center}.slider-button:before,.slider-button:after{content:'';position:absolute;width:8px;height:2px;background:#666}.slider-button:before{transform:translateX(-4px)}.slider-button:after{transform:translateX(4px)}.left-label,.right-label{position:absolute;bottom:20px;padding:8px 16px;background:rgba(0,0,0,.7);color:#fff;border-radius:4px;font-size:14px;z-index:2}.left-label{left:20px}.right-label{right:20px}.colour-picker-logos{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px}.business-logo,.tech-logo{max-width:200px}.business-logo img,.tech-logo img{width:100%;height:auto}.colour-swatches-grid{margin-top:30px}.layout-grid{display:grid;grid-template-columns:repeat(5,1fr)}.layout-carousel{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px}.layout-carousel .colour-swatch{flex:0 0 calc(20% - 10px)}.layout-masonry{columns:5;column-gap:12px}.layout-masonry .colour-swatch{break-inside:avoid;margin-bottom:20px}.layout-list .colour-swatch{display:flex;margin-bottom:20px;align-items:center}.layout-list .swatch-preview{width:150px;flex-shrink:0;margin-right:20px}.swatch-preview{position:relative;padding-bottom:100%}.swatch-preview img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.swatch-name-overlay{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);color:#fff;padding:5px;font-size:12px;text-align:center;transform:translateY(100%);transition:transform .3s ease}.colour-swatch:hover .swatch-name-overlay{transform:translateY(0)}@media (max-width:768px){.colour-picker-logos{flex-direction:column;gap:20px}.business-logo,.tech-logo{max-width:150px}.layout-masonry{columns:3;column-gap:8px}.swatch-name-overlay{transform:translateY(0);font-size:10px;padding:3px}.swatch-details{padding:10px}.swatch-name{font-size:14px}.swatch-description{display:none}.layout-list .colour-swatch{flex-direction:column}.layout-list .swatch-preview{width:100%;margin-right:0}}@media (max-width:375px){.swatch-name{font-size:10px}.select-colour{padding:3px;font-size:9px}}@media (max-width:768px){.comparison-view .left-label,.comparison-view .right-label{font-size:10px;padding:4px 8px;bottom:10px}.slider-handle{width:20px}.slider-line{width:1px}}.layout-grid{display:grid;grid-template-columns:repeat(5,1fr)}.layout-carousel{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px}.layout-masonry{columns:5;column-gap:12px}@media (max-width:768px){.layout-masonry{columns:3;column-gap:8px}.layout-list .colour-swatch{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}}.single-view{width:100%;height:500px;overflow:hidden;position:relative}.single-view img{width:100%;height:100%;object-fit:cover}