@media screen and (max-width: 768px) {
    /* Force table elements to stack as blocks */
    .wp-block-table table,
    .wp-block-table thead,
    .wp-block-table tbody,
    .wp-block-table th,
    .wp-block-table td,
    .wp-block-table tr {
        display: block;
        width: 100%;
    }

    /* Visually hide the original table headers for accessibility */
    .wp-block-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* Style each row to look like a separate card */
    .wp-block-table tr {
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        background: #fff;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* Flexbox lines up the CSS label on the left and your data on the right */
    .wp-block-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 5px !important;
        text-align: right;
    }

    /* Remove the bottom line from the last item in the card */
    .wp-block-table td:last-child {
        border-bottom: none;
    }

    /* Set up the styling for the injected labels */
    .wp-block-table td::before {
        font-weight: 600;
        text-align: left;
        padding-right: 15px;
        color: #333;
    }

    /* Inject your specific column headers using nth-of-type */
    .wp-block-table td:nth-of-type(1)::before { content: "Item"; }
    .wp-block-table td:nth-of-type(2)::before { content: "Item Code"; }
    .wp-block-table td:nth-of-type(3)::before { content: "Download"; }
    .wp-block-table td:nth-of-type(4)::before { content: "Certificate of Conformity"; }
    .wp-block-table td:nth-of-type(5)::before { content: "Inspection Procedure"; }

    /* Hide empty cells completely so the cards remain clean */
    .wp-block-table td:empty {
        display: none;
    }
}