/* Colour choices: quiet paper surfaces with a clear, native radio selection. */
.colour-selector { min-width: 0; margin: 22px 0; padding: 0; border: 0; }
.colour-selector legend { float: none; width: auto; margin-bottom: 10px; padding: 0; color: #64718a; font-size: 0.75rem; line-height: 1.5; }
.colour-selector legend strong { color: #17336c; font-weight: 600; }
.colour-options { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.colour-option { position: relative; display: inline-flex; min-width: 0; max-width: 100%; cursor: pointer; }
.colour-option input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.colour-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 44px; min-height: 44px; max-width: 100%; padding: 9px 14px; border: 2px solid #e1e7f1; border-radius: 5px; background: linear-gradient(125deg,#fff,#f9fbff); color: #4d628a; font-size: 0.75rem; line-height: 1.3; box-shadow: 0 2px 0 #edf1f7; }
.colour-dot { display: block; flex-shrink: 0; width: 17px; height: 17px; border: 1px solid #0c22452b; border-radius: 50%; background: var(--swatch,#d9e4f8); box-shadow: inset 0 1px 2px #ffffff33; }
.colour-option:hover .colour-chip { border-color: #b8c8e5; color: #17336c; }
.colour-option input:checked + .colour-chip { border-color: #6281c7; background: #f0f5ff; color: #15316b; box-shadow: 0 2px 0 #d3dff3; }
.colour-option input:checked + .colour-chip::after { content: '\2713'; position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; background: #244a91; color: #fff; font-family: Arial,sans-serif; font-size: 0.5625rem; font-weight: 700; line-height: 1; }
.colour-option input:focus-visible + .colour-chip { outline: 2px solid #244a91; outline-offset: 3px; }
.colour-option input:disabled + .colour-chip { opacity: .5; cursor: not-allowed; }
.colour-selector-compact { margin: 0 -4px 14px; }
.colour-selector-compact legend { margin-bottom: 6px; padding: 0 4px; font-size: 0.6875rem; }
.colour-selector-compact .colour-options { gap: 4px; }
.colour-selector-compact .colour-chip { width: 44px; padding: 8px; }
.colour-selector-compact .colour-chip > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.variant-image-note { margin: 10px 0 0; color: #758099; font-size: 0.75rem; line-height: 1.6; }
@media(max-width:700px) {
  .colour-selector { margin-top: 18px; margin-bottom: 18px; }
  .colour-selector-compact { margin-top: 0; margin-bottom: 12px; }
  .colour-chip { padding-right: 11px; padding-left: 11px; }
  .colour-selector-compact .colour-chip { padding: 8px; }
  .variant-image-note { font-size: 0.6875rem; }
}
@media(forced-colors:active) {
  .colour-chip { border-color: ButtonBorder; background: Canvas; color: CanvasText; box-shadow: none; }
  .colour-option input:checked + .colour-chip { border-color: Highlight; background: Canvas; color: CanvasText; box-shadow: none; }
  .colour-option input:checked + .colour-chip::after { border-color: Canvas; background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .colour-option input:focus-visible + .colour-chip { outline-color: Highlight; }
  .colour-dot { forced-color-adjust: none; }
}