.cgkit-as-related { margin: 0 0 18px; } .cgkit-as-related-heading { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 10px 0 12px; letter-spacing: 0; } .cgkit-as-related .cgkit-as-related-title { display: block; font-size: 13px; line-height: 1.3; margin: 0 0 8px; text-transform: capitalize; } .cgkit-as-related .cgkit-as-related-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .cgkit-as-related .cgkit-as-related-item { margin: 0; padding: 0; } .cgkit-as-related .cgkit-as-related-swatch { border: 1px solid #ccc; border-radius: 0; box-sizing: border-box; display: block; height: 60px; overflow: hidden; position: relative; width: 60px; } .cgkit-as-related .cgkit-as-related-swatch img { display: block; height: 100%; margin: 0; object-fit: cover; padding: 0; width: 100%; } .cgkit-as-related a.cgkit-as-related-swatch { cursor: pointer; text-decoration: none; transition: border-color 0.15s ease-in-out; } .cgkit-as-related a.cgkit-as-related-swatch:hover, .cgkit-as-related a.cgkit-as-related-swatch:focus { border-color: #353c4e; } .cgkit-as-related a.cgkit-as-related-swatch:focus-visible { outline: 2px solid #353c4e; outline-offset: 2px; } .cgkit-as-related .cgkit-as-related-swatch.is-selected { border-color: #353c4e; cursor: default; } .cgkit-as-related .cgkit-as-related-item.is-current .cgkit-as-related-swatch { cursor: default; } @media ( max-width: 480px ) { .cgkit-as-related .cgkit-as-related-swatch { height: 52px; width: 52px; } } @media ( prefers-reduced-motion: reduce ) { .cgkit-as-related a.cgkit-as-related-swatch { transition: none; } }