.barwtech-related-colors{
    width:100%;
    margin:48px 0 24px;
    padding:32px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #e6e9ee;
    border-radius:16px;
}

.barwtech-related-colors__header{
    margin-bottom:24px;
}

.barwtech-related-colors__header h2{
    margin:0 0 7px;
    font-size:26px;
    line-height:1.25;
    font-weight:750;
    letter-spacing:-.2px;
    color:#111827;
}

.barwtech-related-colors__header p{
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:#6b7280;
}

.barwtech-related-colors__grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:14px;
}

.barwtech-color-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    background:#fff;
    color:#111827 !important;
    text-decoration:none !important;
    border:1px solid #e4e7ec;
    border-radius:12px;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.barwtech-color-card:hover{
    transform:translateY(-3px);
    border-color:#cbd2dc;
    box-shadow:0 10px 28px rgba(15,23,42,.10);
}

.barwtech-color-card__image{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1/1;
    padding:12px;
    background:#f8fafc;
}

.barwtech-color-card__image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.barwtech-color-card__content{
    padding:13px;
}

.barwtech-color-card__name{
    margin-bottom:7px;
    font-size:14px;
    line-height:1.3;
    font-weight:750;
}

.barwtech-color-card__color{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:20px;
    font-size:13px;
    line-height:1.3;
    color:#5f6773;
}

.barwtech-color-card__swatch{
    width:15px;
    height:15px;
    flex:0 0 15px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.16);
    box-sizing:border-box;
}

.barwtech-color-card__price{
    margin-top:10px;
    font-size:17px;
    line-height:1.2;
    font-weight:800;
    color:#111827;
}

.barwtech-color-card__button{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    box-sizing:border-box;
    margin-top:11px;
    padding:8px 10px;
    border:1px solid #d5d9df;
    border-radius:7px;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.2px;
}

.barwtech-related-colors__hint{
    display:none;
    margin-top:12px;
    text-align:center;
    font-size:12px;
    color:#8a919c;
}

@media (max-width:1100px){
    .barwtech-related-colors__grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media (max-width:700px){
    .barwtech-related-colors{
        margin-top:32px;
        padding:20px 16px;
        border-radius:12px;
    }

    .barwtech-related-colors__header h2{
        font-size:21px;
    }

    .barwtech-related-colors__grid{
        display:flex;
        overflow-x:auto;
        gap:12px;
        padding:2px 2px 10px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .barwtech-color-card{
        flex:0 0 172px;
        scroll-snap-align:start;
    }

    .barwtech-related-colors__hint{
        display:block;
    }
}