/* Colour annotations for the internal staging pilot, not artwork recolouring. */
#customization-form .po-colour-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
#customization-form .po-colour-card { min-width: 0; padding: 14px; background: #fff; border: 1px solid #dce0eb; border-radius: 12px; }
#customization-form .po-colour-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; }
#customization-form .po-colour-quick { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 9px; }
#customization-form .po-swatch { width: 38px; height: 38px; border: 1px solid #a8afc1; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
#customization-form .po-swatch.is-unknown { background: #f3f4f7; color: #576176; font-weight: 700; }
#customization-form .po-colour-preset, #customization-form .po-colour-card input { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; font: inherit; font-size: 14px; padding: 11px; border: 1px solid #b9c1d5; border-radius: 8px; background: #fff; color: #232f5d; }
#customization-form .po-colour-help { display: block; margin-top: 8px; color: #536077; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#customization-form .po-colour-preset:focus-visible, #customization-form .po-colour-card input:focus-visible { outline: 2px solid #4264d8; outline-offset: 2px; }
#customization-form #custom-quote > span, #customization-form #custom-quote > small { display: block; }
#customization-form #custom-quote > span b { white-space: nowrap; }
@media (max-width: 600px) {
    #customization-form .po-colour-preset, #customization-form .po-colour-card input { font-size: 16px; }
    #customization-form .po-colour-card { padding: 11px; }
    #customization-form #custom-quote > small { font-size: 10px; }
}