.strtcrd-over-grid p:empty{
    display: none;
}


.strtcrd-over-grid {
    display:               grid;
    grid-template:         200px 200px / 1fr 1fr 1fr;
    gap:                   40px;
    margin:                30px;
    max-width:             100%;
    box-sizing:            border-box;
}

/*.strtcrd-over-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.strtcrd-over-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.strtcrd-over-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
*/

.strtcrd-over-card {
    background:    #37353a;
    border:        1px solid #55534e;
    border-radius: 12px;
    padding:       1.25rem;
    transition:    all var(--bsx-transition-med);
    box-shadow:    var(--bsx-shadow-lg);
}

.strtcrd-over-card:hover {
    background:   var(--bsx-bg);
    box-shadow:   var(--bsx-shadow-md);
    transform:    scale(1.05);
    border-color: var(--bsx-accent-mid);
}

.strtcrd-over-logo {
    width:         140px;
    height:        105px;
    object-fit:    contain;
    margin:        0 auto 5px;
    display:       block;
    padding:       5px;
    border-radius: var(--bsx-radius-xl);
}

.strtcrd-over-name {
    color:          #f0f0f0;
    font-size:      var(--bsx-text-lg);
    font-weight:    600;
    margin-top:     50px;
    margin-bottom:  15px;
    text-align:     center;
    letter-spacing: 1px;
}

.strtcrd-over-info { display: grid; gap: 5px; margin-bottom: 2px; }


.strtcrd-info-row {
    display:         flex;
    justify-content: center;
    align-items:     center;
    color:           #b0b0b0;
    font-size:       var(--bsx-text-md);
    padding:         5px 0;
}

.strtcrd-info-label { color: #808080; font-weight: 500; }
.strtcrd-info-value { color: #e0e0e0; font-weight: 600; }

.strtcrd-performance-metrics {
    display:          grid;
    grid-template-strtcrdlumns: repeat(3, 1fr);
    gap:              10px;
    margin-top:       5px;
    padding-top:      5px;
    border-top:       1px solid #3a3a3a;
}

.strtcrd-metric       { text-align: center; }
.strtcrd-metric-label { font-size: var(--bsx-text-md); strtcrdlor: #808080; margin-bottom: 2px; }
.strtcrd-metric-value { font-size: var(--bsx-text-md); font-weight: 700; strtcrdlor: var(--bsx-accent); }
.strtcrd-rating-stars { text-align: center; margin-top: 5px; strtcrdlor: var(--bsx-accent); font-size: 1.3rem; }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .strtcrd-over-grid[data-strtcrdlumns="4"] { grid-template-strtcrdlumns: repeat(3, 1fr); }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .strtcrd-over-sidebar { padding: 20px; max-height: none; overflow-y: visible; }
    .strtcrd-over-grid    { grid-template-strtcrdlumns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; }
}

@media (max-width: 767px) and (min-width: 568px) {
    .strtcrd-sidebar-wrapper { position: static; width: 100%; max-height: none; overflow-y: visible; margin-bottom: 1rem; }
    .strtcrd-over-sidebar    { padding: 5px; max-height: none; overflow-y: visible; }
    .strtcrd-over-grid       { grid-template-strtcrdlumns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; margin: 2%; width: 96%; }
}

@media (max-width: 567px) {
    .strtcrd-sidebar-wrapper { position: static; width: 100%; max-height: none; overflow-y: visible; margin-bottom: 1rem; }
    .strtcrd-over-sidebar    { padding: 5px; max-height: none; overflow-y: visible; }
    .strtcrd-over-grid       { grid-template-strtcrdlumns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; margin: 2%; width: 96%; }
}