/* Default: table view (desktop) */
.supplier-directory .view-cards {
    display: none;
}
.supplier-directory .view-table {
    display: block;
}

/* Toggle via JS class on wrapper */
.supplier-directory.is-card-view .view-table {
    display: none;
}
.supplier-directory.is-card-view .view-cards {
    display: block;
}

/* Responsive: automatically switch to card view on mobile */
@media (max-width: 767px) {
    .supplier-directory:not(.is-table-view-force) .view-table {
        display: none;
    }
    .supplier-directory:not(.is-table-view-force) .view-cards {
        display: block;
    }
    /* If user manually selected table view on mobile, keep it */
    .supplier-directory.is-table-view-force .view-table {
        display: block;
    }
    .supplier-directory.is-table-view-force .view-cards {
        display: none;
    }
}

/* Basic styling */
.supplier-directory table {
    width: 100%;
    border-collapse: collapse;
}
.supplier-directory th,
.supplier-directory td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.supplier-card {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
}
.view-toggle {
    margin-bottom: 15px;
}