.products-card {
    background: #fff;
    border: 1px solid var(--border-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.products-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.products-card .card-title {
    color: var(--text-dark);
}

a.text-decoration-none {
    color: inherit;
}

/* Available Ranges image overlay */
.range-overlay {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 6px;
    z-index: 5;
}
.range-overlay-icon {
    width: 30px;          /* increased from 22px */
    height: 30px;         /* increased from 22px */
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: #fff;
    padding: 2px;         /* slightly larger padding */
    overflow: hidden; /* crop the zoomed image */
    /*box-shadow: 0 1px 4px rgba(0,0,0,0.18);*/
    transition: transform 0.15s ease;
}
.range-overlay-icon:hover {
    transform: scale(1.25);
}


/* ============================================
   ACCOUNT LAYOUT SYSTEM (Unified)
   ============================================ */

/* Shared centered wrapper for top-level cards */
.account-card-wrapper {
    display: flex;
    justify-content: center;
}

/* Shared top-level card (Profile, Filter, etc.) */
.account-card {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Grid wrapper for 2-up layouts (Email/Password, Dashboard cards) */
.account-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; /* matches Bootstrap g-4 */
}

/* Desktop: 2 cards per row */
.account-card-col {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
}

/* Mobile: 1 card per row */
@media (max-width: 1079px) {
    .account-card-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}





/* ------------------------------------------
   RESPONSIVE CARD GRID
   ------------------------------------------ */

/* 1 card per row (mobile) */
@media (max-width: 800px) {
    .col-lg-2-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 2 cards per row */
@media (min-width: 800px) and (max-width: 1079px) {
    .col-lg-2-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* 3 cards per row */
@media (min-width: 1080px) and (max-width: 1359px) {
    .col-lg-2-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* 4 cards per row */
@media (min-width: 1360px) and (max-width: 1639px) {
    .col-lg-2-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* 5 cards per row */
@media (min-width: 1640px) and (max-width: 1919px) {
    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* 6 cards per row */
@media (min-width: 1920px) and (max-width: 2199px) {
    .col-lg-2-4 {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
    }
}

/* 7 cards per row */
@media (min-width: 2200px) {
    .col-lg-2-4 {
        flex: 0 0 14.2857%;
        max-width: 14.2857%;
    }
}