/* BMS brand shortcode card grid — overrides for when used inside pages */

.bms-wrap .bms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bms-wrap .bms-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.bms-wrap .bms-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.bms-wrap .bms-img-wrap {
    display: block;
    position: relative;
    background: #f7f7f7;
    height: 180px;
    overflow: hidden;
    text-decoration: none;
    width: 100%;
}
.bms-wrap .bms-img {
    width: 100%; height: 100%; object-fit: contain; padding: 12px;
    transition: transform 0.3s; display: block;
}
.bms-wrap .bms-card:hover .bms-img { transform: scale(1.05); }
.bms-wrap .bms-no-img {
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-size: 52px; color: #ddd;
}

.bms-wrap .bms-badge { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; }
.bms-wrap .bms-5g { background: #0073aa; color: #fff; }
.bms-wrap .bms-4g { background: #27ae60; color: #fff; }

.bms-wrap .bms-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.bms-wrap .bms-title { font-size: 14px; font-weight: 600; margin: 0 0 6px; line-height: 1.35; }
.bms-wrap .bms-title a { color: #1a1a2e; text-decoration: none; }
.bms-wrap .bms-title a:hover { color: #0073aa; }
.bms-wrap .bms-price { font-size: 15px; font-weight: 700; color: #0073aa; margin-bottom: 10px; display: block; }

.bms-wrap .bms-actions { display: flex; gap: 7px; margin-top: auto; }
.bms-wrap .bms-btn-view { flex: 1; padding: 8px 0; background: #0073aa; color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; text-align: center; text-decoration: none; transition: background 0.2s; display: block; cursor: pointer; }
.bms-wrap .bms-btn-view:hover { background: #005f8e; color: #fff; }
.bms-wrap .bms-btn-compare { flex: 1; padding: 8px 0; background: #fff; color: #0073aa; border: 1.5px solid #0073aa; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.bms-wrap .bms-btn-compare:hover, .bms-wrap .bms-btn-compare.added { background: #0073aa; color: #fff; }

.bms-no-results { padding: 20px; text-align: center; color: #888; font-size: 14px; background: #f9f9f9; border-radius: 8px; border: 1px solid #eee; }
.bms-error { color: #c0392b; background: #fdf0f0; border-radius: 8px; border: 1px solid #f5c6c6; padding: 20px; text-align: center; }

@media (max-width: 480px) {
    .bms-wrap .bms-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bms-wrap .bms-img-wrap { height: 150px; }
}