.vinyl-siding-container { width: 100%; box-sizing: border-box; margin-bottom: 1.25rem; }
.vinyl-image-wrapper { position: relative; width: 100%; overflow: hidden; }
.vinyl-image-wrapper img.house-image { width: 100%; height: auto; display: block; }
.vinyl-image-wrapper canvas.color-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vinyl-image-wrapper .color-overlay { display: none !important; }
.vinyl-chooser-title { font-weight: 600; margin: .5rem 0 .35rem; }
.vinyl-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: .5rem; }
.vinyl-swatch { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; cursor: pointer; }
.vinyl-swatch .dot { width: 24px; height: 24px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); }
.vinyl-swatch .name { font-size: .9rem; line-height: 1.1rem; }
.vinyl-swatch.active { outline: 2px solid #111827; outline-offset: 2px; }