.component-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;flex-direction:column;transition:box-shadow .2s,border-color .2s;display:flex;position:relative;overflow:hidden}.component-card:before{display:none}.component-card:hover{box-shadow:var(--shadow-md);border-color:#bbb}.component-card--selectable{cursor:pointer;-webkit-user-select:none;user-select:none}.component-card--selectable:hover{border-color:var(--accent);box-shadow:0 2px 12px #00823c1f}.component-card--selectable:active{transform:scale(.99)}.component-card .card-link{color:inherit;flex-direction:column;flex:1;text-decoration:none;display:flex}.component-card .card-image-wrap{aspect-ratio:4/3;border-bottom:1px solid var(--border);background:#fff;justify-content:center;align-items:center;padding:1rem;display:flex;position:relative;overflow:hidden}.component-card .card-image-wrap:after{display:none}.component-card .card-image-wrap img{object-fit:contain;max-width:100%;max-height:100%;transition:transform .3s}.component-card:hover .card-image-wrap img{transform:scale(1.03)}.card-category-tag{text-transform:uppercase;letter-spacing:.04em;border-radius:var(--radius-sm);background:var(--accent-light);color:var(--accent);z-index:1;border:1px solid #00823c1f;padding:.1875rem .4375rem;font-size:.5625rem;font-weight:700;position:absolute;top:8px;left:8px}.component-card .card-body{flex-direction:column;flex:1;gap:.25rem;padding:.875rem 1rem 1rem;display:flex}.component-card .card-brand{text-transform:uppercase;letter-spacing:.04em;color:var(--accent);font-size:.625rem;font-weight:700}.component-card .card-name{color:var(--scan-blue);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:.8125rem;font-weight:600;line-height:1.35;display:-webkit-box;overflow:hidden}.component-card .card-specs{flex-wrap:wrap;gap:.25rem;margin-top:.25rem;display:flex}.component-card .spec-pill{border-radius:var(--radius-sm);background:var(--surface);color:var(--text-secondary);border:1px solid var(--border);white-space:nowrap;text-overflow:ellipsis;max-width:180px;padding:.125rem .375rem;font-size:.5625rem;font-weight:600;overflow:hidden}.component-card .card-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:auto;padding-top:.625rem;display:flex}.stock-indicator{letter-spacing:.02em;text-transform:uppercase;align-items:center;gap:.375rem;font-size:.625rem;font-weight:600;display:flex}.stock-indicator .stock-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.stock-indicator.in-stock{color:var(--accent)}.stock-indicator.in-stock .stock-dot{background:var(--accent)}.stock-indicator.out-of-stock{color:var(--text-secondary)}.stock-indicator.out-of-stock .stock-dot{background:#bbb}.btn-add-build{text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--accent);border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.375rem;width:calc(100% - 1.5rem);margin:0 .75rem .75rem;padding:.4375rem;font-family:inherit;font-size:.6875rem;font-weight:700;transition:background .15s,box-shadow .15s;display:flex}.btn-add-build:hover{background:var(--accent-hover);box-shadow:0 2px 8px #00823c33}.btn-add-build:active{transform:translateY(0)}