@media (max-width: 768px) {
            .services-table {
                border: 0;
            }

            .services-table thead {
                display: none;
            }

            .services-table tbody,
            .services-table tr,
            .services-table td {
                display: block;
                width: 100%;
            }

            /* CATEGORY PILL */
            .services-table tr.category-row td {
                background-color: #3d3d3d !important;
                font-size: 1rem !important;
                text-align: center;
                justify-content: center;
                align-items: center;
                border-radius: 0.75rem;
                padding: 0.5rem 0;
            }

            .services-table tr.category-row {
                margin-bottom: 0.7rem;
            }

            .services-table tr.category-row td::before {
                display: none;
            }

            /* SERVICE CARD WRAPPER */
            .services-table tr.service-row {
                margin-bottom: 0.75rem;
                border-radius: 0.75rem;
                background-color: #141414;
                /*border: 1px solid #262626;*/
                overflow: hidden;
            }

            .services-table tr.service-row td {
                border: none !important;
                padding: 0.35rem 0.9rem !important;
                font-size: 0.9rem;
                color: #f5f5f5;
            }

            /* TOP YELLOW BAR: "Service ID: 1205" */
            .services-table tr.service-row td[data-label="Service ID"] {
                font-size: 0.9rem !important;
                background-color: hsl(41, 92%, 45%) !important;
                color: #fff !important;
                font-weight: 500;
                text-align: center;
                padding: 0.35rem 0.9rem !important;
                margin: 0;
            }

            .services-table tr.service-row td[data-label="Service ID"]::before {
                content: "Service ID: ";
                font-weight: 500;
                color: #fff !important;
                margin-right: 4px;
            }

            .services-table tr.service-row td[data-label="Service ID"] .service-id-badge {
                background: transparent;
                color: #fff !important;
                padding: 0;
            }

            /* Disable generic label for this one, we already set it above */
            /* (kept here just in case) */
            /* TITLE – big heading, no label before it */
            .services-table tr.service-row td[data-label="Title"] {
                font-weight: 600;
                font-size: 1.2rem !important;
                padding-top: 0.45rem;
                padding-bottom: 0.1rem !important;
            }

            .services-table tr.service-row td[data-label="Title"]::before {
                content: "";
                margin-right: 0;
            }

            /* GENERIC LABELS: Rate / Quantity / Time */
            .services-table tr.service-row td[data-label="Rate Per 1000"],
            .services-table tr.service-row td[data-label="Order Quantity"],
            .services-table tr.service-row td[data-label="Average Time"] {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 0.5rem;
            }

            .services-table tr.service-row td[data-label="Rate Per 1000"]::before,
            .services-table tr.service-row td[data-label="Order Quantity"]::before,
            .services-table tr.service-row td[data-label="Average Time"]::before {
                font-weight: 500;
                color: #cfcfcf;
            }

            .services-table tr.service-row td[data-label="Rate Per 1000"]::before {
                content: "Rate Per 1000:";
            }

            .services-table tr.service-row td[data-label="Order Quantity"]::before {
                content: "Order Quantity:";
            }

            .services-table tr.service-row td[data-label="Average Time"]::before {
                content: "Average Time:";
            }

            /* Highlight rate value */
            .services-table tr.service-row td[data-label="Rate Per 1000"] .service-rate-value {
                font-size: 1.2rem !important;
                font-weight: 500 !important;
                color: #f6b121;
            }

            .services-table tr.service-row td[data-label="Rate Per 1000"] .service-rate-value small {
                font-size: 0.8rem !important;
            }

            /* Average time badge tweak */
            .services-table tr.service-row td[data-label="Average Time"] .badge {
                background-color: transparent !important;
                border: 0;
                padding: 0;
                color: #f5f5f5;
            }

            /* MORE BUTTON – full width green pill at bottom */
            .services-table tr.service-row td[data-label="More"] {
                padding-top: 0.45rem;
                padding-bottom: 0.6rem !important;
            }

            .services-table tr.service-row td[data-label="More"]::before {
                content: "";
                display: none;
            }

            .services-table tr.service-row td[data-label="More"] .mobile-more-btn {
                width: 100%;
                border-radius: 999px;
                font-weight: 600;
                background-color: #1dd164 !important;
            }
        }