body[class^=colorfindernew-index] .column.main{max-width:920px;margin:0 auto}.colour-finder-swatches{position:relative;padding:20px;margin:30px 0}.colour-finder-swatches>h3{text-align:center;font-weight:600;font-size:31px;margin-top:0}.colour-finder-breadcrumb{display:flex;flex-wrap:wrap;justify-content:center;margin:20px 0;font-family:"Open Sans",Arial,sans-serif;gap:10px}.colour-finder-breadcrumb a,.colour-finder-breadcrumb div{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:3px;border:1px solid #ccc;text-decoration:none;transition:background .2s,border-color .2s;min-width:120px;justify-content:center;flex:1;background:#e1e0da;color:#2a2c2e}.colour-finder-breadcrumb .step-number{display:inline-block;background:#46494c;color:#fff;min-width:22px;width:22px;height:22px;border-radius:50%;font-size:13px;text-align:center;line-height:22px}.colour-finder-breadcrumb .step-label{font-weight:600;font-size:14px}.colour-finder-breadcrumb .step-value{display:block;font-size:12px;color:#666;margin-left:5px}.colour-finder-breadcrumb .completed{background:#e1e0da;color:#2a2c2e}.colour-finder-breadcrumb .completed .step-number{background:#46494c;color:#fff}.colour-finder-breadcrumb a:not(.completed){pointer-events:none}.colour-finder-breadcrumb .active{border:1px solid #ccc;background:#292c2e;color:#212121}.colour-finder-breadcrumb .active .step-number{background:#ddd;color:#212121}.colour-finder-breadcrumb .active .step-label{color:#fff}.colour-finder-breadcrumb .disabled{opacity:.5;pointer-events:none}.colour-finder-breadcrumb a:hover{border-color:#999;background:#f1f1f1}@media (max-width:600px){.colour-finder-breadcrumb a,.colour-finder-breadcrumb div{flex:1 1 100%;justify-content:flex-start}}.color-swatches-container{display:grid;grid-template-columns:repeat(4,1fr);column-gap:10px;row-gap:15px;padding:20px 0}.color-swatch-item{display:flex;flex-direction:column;align-items:center;text-align:center;justify-self:center;gap:15px;margin-bottom:20px}.color-swatch-item img{display:block}.color-swatch-circle{width:150px;height:150px;border-radius:50%;border:8px solid transparent;margin-bottom:0;cursor:pointer;position:relative;box-sizing:border-box;outline:1px solid #dedede;transition:transform .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 2px 6px rgba(0,0,0,.2)}.color-swatch-circle:hover{transform:scale(1.05)}.color-swatch-name{word-wrap:break-word;line-height:1.3;font-size:17px}@media (max-width:1024px){.color-swatches-container{grid-template-columns:repeat(3,1fr);gap:25px}.surface-swatch-item,.color-swatch-item{margin-bottom:0!important}.color-swatch-circle,.surface-swatch-circle{width:130px!important;height:130px!important}.colour-finder-swatches{padding:35px 25px}}@media (max-width:768px){.color-swatches-container{grid-template-columns:repeat(2,1fr)}.colour-finder-swatches{padding:30px 20px;margin:20px 0}.colour-finder-swatches:before{border-radius:200px 40px 180px 50px/40px 180px 50px 200px}.colour-finder-swatches:after{border-radius:180px 50px 200px 40px/50px 200px 40px 180px}.color-swatch-circle,.surface-swatch-circle{width:120px!important;height:120px!important;border-width:2px}.color-swatch-name{font-size:15px;max-width:70px}}@media (max-width:767px){.shade-search-container{flex-direction:column}.shade-search-wrapper{max-width:100%!important;width:100%}.shade-brand-filter{height:39px!important;flex:none !important}.shade-search-button{height:39px!important}}@media (max-width:480px){.color-swatches-container{grid-template-columns:repeat(2,1fr)}.colour-finder-swatches{padding:25px 15px}.color-swatch-circle{width:100px;height:100px}.color-swatch-name{font-size:14px;max-width:60px}}.surface-swatch-item{display:flex;flex-direction:column;align-items:center;text-align:center;justify-self:center;gap:15px;margin-bottom:20px;cursor:pointer}.surface-swatch-circle{width:150px;height:150px;border-radius:50%;background:#f8f8f5;display:flex;align-items:center;justify-content:center;position:relative;border:8px solid #f2f1ed;margin-bottom:0;cursor:pointer;transition:all .3s ease;box-sizing:border-box;outline:1px solid #dedede;box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 2px 6px rgba(0,0,0,.2);transition:transform .3s ease}.surface-swatch-text{padding:5px;text-align:center;line-height:1.2;word-break:break-word;z-index:1;font-size:17px}.surface-swatch-item:hover .surface-swatch-circle{transform:scale(1.05)}.loading-spinner,.error-message{text-align:center;padding:40px 20px;font-size:14px;color:#666;grid-column:1/-1}.error-message{color:#dc3545}@media (max-width:768px){.surface-swatch-circle{width:130px;height:130px}.surface-swatch-text{font-size:15px;padding:3px}}@media (max-width:480px){.surface-swatch-circle{width:120px;height:120px}.surface-swatch-text{font-size:14px;padding:2px}}.color-swatch-item{cursor:pointer}.shade-swatches-container{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:20px 0}.shade-swatches-container:has(.no-results-message){padding-top:0}.shade-swatches-container .no-results-message{padding-top:0!important;color:#212121!important}.shade-swatch-item{display:flex;flex-direction:column;align-items:center;gap:15px;cursor:pointer}.tin-can{width:150px;height:150px;border-radius:50%;background:#f0f0f0 url(../images/colourfinder/tin-bg.png) no-repeat top left;background-size:150px;transition:transform .3s ease;box-sizing:border-box}.shade-swatch-item:hover .tin-can{transform:scale(1.05)}.tin-can-label{text-align:center}.shade-name{display:block;font-size:14px;font-weight:700;color:#333;margin-bottom:4px}.shade-chart{display:block;font-size:12px;color:#666}@media (max-width:1024px){.shade-swatches-container{grid-template-columns:repeat(3,1fr);gap:25px}.tin-can{width:130px;height:130px;background-size:130px}}@media (max-width:768px){.shade-swatches-container{grid-template-columns:repeat(2,1fr);gap:20px}.tin-can{width:120px;height:120px;background-size:120px}.shade-name{font-size:13px}.shade-chart{font-size:11px}}@media (max-width:480px){.shade-name{font-size:12px}.shade-chart{font-size:10px}}.shade-search-container{margin-bottom:30px;padding:20px;border:1px solid #cdcdcd;padding:20px;margin-top:-1px;border-radius:3px;display:flex;align-items:flex-start;gap:15px}.shade-search-wrapper,.shade-brand-filter{flex:1}.shade-brand-filter{height:46px}.shade-actions{display:flex;flex-direction:column;gap:5px}.shade-search-wrapper{display:flex;max-width:600px;margin:0 auto;height:46px}.shade-search-input{height:100%!important;flex:1;padding-left:20px!important;font-size:15px;border:2px solid #ddd;border-radius:8px;outline:none;transition:all .3s ease;margin-right:-1px}.shade-search-button{background:#df1015;color:#fff;border:none;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;height:46px}.shade-search-button:hover{background:#c6080c;color:#fff;border:none}.shade-clear-filters{text-align:center}@media (max-width:768px){.shade-search-container{margin-bottom:20px}.shade-search-input{padding:10px 12px !important;font-size:14px !important}.shade-search-button{font-size:14px}}@media (max-width:480px){.shade-actions{width:100%}.shade-search-input{padding:10px 12px !important;font-size:13px !important}.shade-search-button{justify-content:center}}