/* ==========================================================================
   Catalog Card Styles — Grid & List Views
   Uses structured class names: .part-card, .part-card-media, .part-card-body,
   .part-card-main, .part-card-foot
   ========================================================================== */

/* --- Grid view (default) --- */
#catalog-parts-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (min-width: 640px) {
    #catalog-parts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    #catalog-parts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- List view --- */
#catalog-parts-grid.parts-list-view {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

/* --- Card base --- */
.part-card {
    will-change: transform;
}

/* --- Media area --- */
.part-card-media img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Body area --- */
.part-card-body {
    font-family: var(--font-brand, 'Outfit', system-ui, sans-serif);
}

/* --- Footer / price+cart row --- */
.part-card-foot button {
    font-family: var(--font-brand, 'Outfit', system-ui, sans-serif);
}

/* --- Responsive: stack list rows on mobile --- */
@media (max-width: 639px) {
    #catalog-parts-grid.parts-list-view .part-card {
        flex-direction: column !important;
    }
    #catalog-parts-grid.parts-list-view .part-card-media {
        width: auto !important;
        min-width: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid #f1f5f9;
    }
    #catalog-parts-grid.parts-list-view .part-card-body {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    #catalog-parts-grid.parts-list-view .part-card-foot {
        border-left: 0 !important;
        border-top: 1px solid #f1f5f9;
        padding-left: 0 !important;
        padding-top: 1rem;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-width: 0 !important;
    }
}