/*.vdc-cards{display:flex;gap:20px}
.vdc-card{border:2px solid #ddd;padding:20px;border-radius:10px;cursor:pointer;position:relative;flex:1}
.vdc-card.active{border-color:#2f3196}
.vdc-price{font-size:22px;font-weight:700}
.vdc-save{font-size:14px}
.vdc-badge{position:absolute;top:-10px;right:10px;color:#fff;padding:4px 10px;border-radius:999px;font-size:12px}
@media(max-width:767px){
 .vdc-cards{flex-direction:row;gap:12px}
 .vdc-card{flex:1 1 0;min-width:0}
 .vdc-add{width:100%;margin-top:16px}
}
*/


/* ===============================
   Cards layout – Desktop
   =============================== */
.vdc-cards {
    display: flex;
    flex-wrap: wrap;           /* allow multiple rows */
    gap: 20px;
}

/* 3 cards per row by default (desktop) */
.vdc-card {
    border: 2px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;

    flex: 1 1 calc(33.333% - 20px); /* 3 cards per row */
    box-sizing: border-box;
}

/* Active card */
.vdc-card.active {
    border-color: #2f3196;
}

/* Typography */
.vdc-price {
    font-size: 22px;
    font-weight: 700;
}

.vdc-save {
    font-size: 14px;
}

/* Badge */
.vdc-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

/* ===============================
   Tablet – 2 cards per row
   =============================== */
@media (max-width: 1024px) {
    .vdc-card {
        flex: 1 1 calc(50% - 20px);
    }
}

/* ===============================
   Mobile – full width cards
   =============================== */
@media (max-width: 767px) {
    .vdc-cards {
        gap: 12px;
    }

    .vdc-card {
        flex: 1 1 100%;
    }

    .vdc-add {
        width: 100%;
        margin-top: 16px;
    }
}