.colour-examples-dialog { box-sizing:border-box; width:min(920px,calc(100% - 24px)); max-width:none; max-height:calc(100dvh - 24px); padding:0 18px 24px; border:0; background:#fff; color:#1a1a1a; font-family:Arial,sans-serif; overflow:auto; overscroll-behavior:contain; }
.colour-examples-dialog::backdrop { background:rgb(0 0 0 / .55); }
.colour-examples-header { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 0; background:#fff; border-bottom:1px solid #ddd; }
.colour-examples-header h2 { margin:0; font:400 18px/1.35 Arial,sans-serif; }
.colour-examples-header button { min-width:44px; min-height:44px; border:0; background:transparent; color:inherit; font:400 14px Arial,sans-serif; cursor:pointer; }
.colour-examples-note { margin:16px 0; font:400 14px/1.5 Arial,sans-serif; color:#555; }
.colour-examples-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 12px; }
.colour-examples-grid figure { min-width:0; margin:0; }
.colour-examples-grid img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.colour-examples-grid figcaption { margin-top:8px; font:400 14px/1.4 Arial,sans-serif; }
.colour-examples-dialog :focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.finish-picker-cell { min-width:0; display:flex; flex-direction:column; }
.finish-picker-cell .finish-picker-option { width:100%; flex:1; }
.finish-examples-button { display:block; min-height:44px; padding:8px 2px; border:0; background:transparent; color:inherit; font:400 14px/1.3 Arial,sans-serif; text-align:left; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.sample-choice-card { min-width:0; display:flex; flex-direction:column; }
.sample-choice-card>.sample-choice { display:block; flex:1; }
@media(max-width:600px) { .colour-examples-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .colour-examples-dialog { padding-inline:12px; } }