.fabric-color-selector{display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;gap:24px;margin:0 auto;max-width:1200px;padding:20px}.filter-section{min-width:250px}.color-filter-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin:16px 0}.color-filter-button{align-items:center;background:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer;display:flex!important;flex-direction:column;min-height:60px;padding:12px 8px!important;transition:all .2s ease}.color-filter-button:hover{border-color:#007cba;box-shadow:0 2px 4px rgba(0,0,0,.1)}.filter-color-dot{border:1px solid #ddd;border-radius:50%;height:24px;margin-bottom:4px;width:24px}.filter-color-dot.grijs{background-color:#a8a8a8}.filter-color-dot.zand{background-color:#d4b896}.filter-color-dot.antraciet{background-color:#3c3c3c}.filter-color-dot.wit{background-color:#f5f5f5}.filter-color-dot.bruin{background-color:#8b4513}.filter-color-dot.groen{background-color:#6b8e23}details{border:1px solid #ddd;border-radius:4px;margin:12px 0;padding:8px}summary{cursor:pointer;font-weight:500;padding:4px 0}.filter-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.filter-options .components-button{font-size:12px!important;padding:4px 8px!important}.fabric-color-selector.loading{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:40px;text-align:center}.fabric-color-selector.loading .components-spinner{margin-bottom:16px}.color-selection-area{flex:1}.selection-header{margin-bottom:24px}.selection-header h2{font-size:24px;font-weight:600;margin:0 0 8px}.selected-colors-preview{align-items:center;display:flex;gap:8px;margin:16px 0}.selected-color-dot{border:2px solid #007cba;border-radius:50%;cursor:pointer;height:32px;position:relative;width:32px}.remove-color{align-items:center;background:#cc1818;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:10px;height:16px;justify-content:center;line-height:1;position:absolute;right:-4px;top:-4px;width:16px}.colors-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin:24px 0}.color-swatch{aspect-ratio:1;border:2px solid transparent;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:pointer;overflow:hidden;position:relative;transition:all .2s ease}.color-swatch:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px)}.color-swatch.selected{border-color:#007cba;box-shadow:0 0 0 2px rgba(0,124,186,.3)}.color-info{background:hsla(0,0%,100%,.9);border-radius:4px;color:#1a1a1a;font-size:12px;font-weight:600;left:8px;padding:4px 8px;position:absolute;top:8px}.selection-indicator{background:#007cba;border-radius:50%;color:#fff;font-size:14px;font-weight:700;height:24px;justify-content:center;position:absolute;right:8px;top:8px;width:24px}.actions,.selection-indicator{align-items:center;display:flex}.actions{border-top:1px solid #ddd;justify-content:space-between;margin-top:32px;padding-top:24px}.continue-button{background:#1a1a1a!important;border-color:#1a1a1a!important}.continue-button:hover:not(:disabled){background:#2a2a2a!important;border-color:#2a2a2a!important}@media (max-width:768px){.fabric-color-selector{flex-direction:column;gap:16px}.colors-grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.color-filter-grid{grid-template-columns:repeat(2,1fr)}.actions{flex-direction:column;gap:12px}}.wp-admin .fabric-color-selector{background:#fff;border:1px solid #c3c4c7;border-radius:4px;margin:16px 0;padding:20px}.wp-admin .fabric-color-selector .components-panel{border:none;box-shadow:none}.wp-admin .fabric-color-selector .components-panel__body{border:none}