.kit .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.kit .tiles.small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { margin: 0; border-radius: 22px; padding: 26px 24px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 170px; border: 1px solid var(--line); }
.tile img { height: 64px; width: auto; max-width: 100%; }
.tile.light { background: #ffffff; color: #4b5d75; border-color: #d5e0ee; }
.tile.light figcaption { color: #4b5d75; }
.tile.dark { background: #071427; border-color: #071427; color: #cbd8ec; }
.tile.blue { background: #0b72dc; border-color: #0b72dc; color: #e7f1ff; }
.tile figcaption { font-size: 13.5px; color: var(--muted); }
.tile.dark figcaption, .tile.blue figcaption { color: inherit; }
.tile figcaption a { color: inherit; font-weight: 800; }
.sizes { display: flex; align-items: flex-end; gap: 18px; }
.tile img.sym { width: 120px; height: 120px; }
.sizes img.s64 { width: 64px; height: 64px; } .sizes img.s32 { width: 32px; height: 32px; } .sizes img.s16 { width: 16px; height: 16px; }
.swatches { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.swatches li { display: grid; gap: 4px; font-size: 14px; }
.swatches i { display: block; height: 84px; border-radius: 16px; border: 1px solid var(--line); }
.swatches b { font-weight: 900; }
.swatches span { color: var(--muted); font-variant-numeric: tabular-nums; }
.rules { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.rules li { position: relative; padding: 14px 16px 14px 48px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.rules li::before { position: absolute; left: 16px; top: 13px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.rules li.ok::before { content: "✓"; background: #1f9d5b; color: #fff; }
.rules li.no::before { content: "×"; background: #c8242f; color: #fff; }
.note { font-size: 14.5px; color: var(--muted); }
@media (max-width: 700px) { .kit .tiles, .swatches { grid-template-columns: 1fr 1fr; } .kit .tiles { grid-template-columns: 1fr; } }