.wcat-parts {
    margin: 0 0 42px;
}
.wcat-parts h2 {
    margin: 0 0 18px;
    font-size: 28px;
}
.wcat-parts-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.wcat-parts-heading a { font-weight: 700; }
.wcat-parts-grid {
    container-type: inline-size;
    container-name: wcat-parts;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}
.wcat-part-card {
    display: flex;
    min-height: 178px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px 18px;
    border: 1px solid #e1e4e7;
    border-radius: 10px;
    background: #fff;
    color: #30363c !important;
    text-align: center;
    text-decoration: none !important;
    transition: .15s;
}
.wcat-part-card:hover {
    border-color: #83c320;
    box-shadow: 0 4px 14px rgba(20, 30, 40, .08);
    transform: translateY(-2px);
}
.wcat-part-card img {
    width: min(112px, 100%);
    height: 86px;
    object-fit: contain;
}
.wcat-part-card strong {
    font-size: 16px;
    line-height: 1.25;
}
.wcat-part-card small { color: #747c84; }
.wcat-part-card.is-selected {
    border-color: #83c320;
    box-shadow: inset 0 0 0 2px #83c320;
}
.wcat-part-card.is-empty { opacity: .62; }
.wcat-part-icon {
    display: grid;
    place-items: center;
    width: min(112px, 100%);
    height: 86px;
    border-radius: 12px;
    background: linear-gradient(145deg, #f9fafb, #edf1f4);
    font-size: 48px;
    line-height: 1;
}
@container wcat-parts (max-width: 640px) {
    .wcat-part-card { min-height: 148px; padding: 14px 10px; }
    .wcat-part-card img,.wcat-part-icon { width: 86px; height: 66px; }
    .wcat-parts h2 { font-size: 24px; }
}
@media (max-width: 700px) {
    .wcat-part-card { min-height: 148px; padding: 14px 10px; }
    .wcat-part-card img,.wcat-part-icon { width: 86px; height: 66px; }
    .wcat-parts h2 { font-size: 24px; }
}