.cpcp-wrap{
    width:100%;
}

.cpcp-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.cpcp-badge,
.cpcp-badge:visited,
.cpcp-badge:hover,
.cpcp-badge:focus{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:8px 16px 8px 14px;
    border-radius:999px;
    border:1px solid rgba(191,172,140,.78);
    background:linear-gradient(180deg,#f4f1eb 0%,#eeebe5 100%);
    box-shadow:0 6px 18px rgba(96,71,43,.10), inset 0 1px 0 rgba(255,255,255,.68);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    text-decoration:none;
    color:#42372b;
    font-weight:700;
    line-height:1;
    transition:all .22s ease;
}

.cpcp-badge:hover,
.cpcp-badge:focus{
    transform:translateY(-1px);
    color:#42372b;
}

.cpcp-badge.is-active,
.cpcp-badge.is-active:visited,
.cpcp-badge.is-active:hover,
.cpcp-badge.is-active:focus{
    background:linear-gradient(180deg,#a27046 0%,#95653f 100%);
    border-color:#95653f;
    color:#ffffff;
    box-shadow:0 10px 24px rgba(108,74,41,.20), inset 0 1px 0 rgba(255,255,255,.14);
}

.cpcp-dot{
    width:8px;
    height:8px;
    min-width:8px;
    border-radius:50%;
    background:#4c3c29;
    box-shadow:0 1px 0 rgba(255,255,255,.35);
}

.cpcp-badge.is-active .cpcp-dot{
    background:#f8f4ef;
}

.cpcp-label{
    font-size:13px;
    white-space:nowrap;
}

.cpcp-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    height:32px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(214,199,175,.90);
    color:#4a3b2a;
    font-size:12px;
    font-weight:800;
    line-height:1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

.cpcp-badge.is-active .cpcp-count{
    background:rgba(206,182,159,.38);
    color:#ffffff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.cpcp-empty{
    color:#7b7369;
    font-size:15px;
}

@media (max-width: 767px){
    .cpcp-list{
        gap:10px;
    }

    .cpcp-badge,
    .cpcp-badge:visited,
    .cpcp-badge:hover,
    .cpcp-badge:focus{
        min-height:46px;
        gap:9px;
        padding:8px 14px 8px 12px;
    }

    .cpcp-label{
        font-size:13px;
    }

    .cpcp-count{
        min-width:28px;
        height:28px;
        font-size:11px;
        padding:0 8px;
    }
}