/* Main container to enable horizontal scrolling on smaller viewports */
.ce_jiproducttable_table_container {
    overflow-x: auto;
    padding-bottom: 2rem; /* 32px */
    max-width: 100%;
}

/* Core table layout */
.ce_jiproducttable_table {
    border-collapse: separate;
    border-spacing: 1.5rem 0; /* 24px 0 */
    margin: 0 auto;
}

/* General cell styling for headers and data */
.ce_jiproducttable_table th,
.ce_jiproducttable_table td {
    text-align: center;
    position: relative;
    width: 23.3125rem;     /* 373px */
    height: 6.5625rem;    /* 105px */
}

/* Header row (first row in tbody) styling */
.ce_jiproducttable_table thead + tbody tr:first-child td,
.ce_jiproducttable_table thead + tbody tr:first-child th {
    height: 5.0625rem; /* 81px */
    font-size: 1.75rem; /* 20px */
    font-weight: 600;
}

/* Empty header cell used for spacing above the 'Recommended' banner */
.ce_jiproducttable_header_cell {
    height: 1.625rem !important; /* 26px */
}

/* 'Recommended' banner cell */
.ce_jiproducttable_recommended_header {
    background: linear-gradient(90deg, var(--ji-green), var(--ji-green-dark)) !important;
}

/* Highlighted column (recommended) green border */
td.ce_jiproducttable_highlight_col{
    border-left: 0.125rem solid var(--ji-green); /* 2px */
    border-right: 0.125rem solid var(--ji-green); /* 2px */
}

/* Bottom border for the last cell of the highlighted column */
.ce_jiproducttable_table tbody tr:last-child td.ce_jiproducttable_highlight_col {
    border-bottom: 0.125rem solid var(--ji-green); /* 2px */
}

/* Text within the 'Recommended' banner */
.ce_jiproducttable_recommended_header span {
    color: white !important;
}

/* Zebra-striping for even rows in the table body */
.ce_jiproducttable_table tbody tr:nth-child(even){
    background-color: #f6f4f4;
}

/* Checkbox icon base style */
.ce_jiproducttable_pm_checkbox {
    font-size: 1.5rem; /* 24px */
    font-weight: bold;
    display: inline-block;
    line-height: 1;
}

/* SVG icon container */
.ce_jiproducttable_icon {
    display: flex;
    justify-content: center;
}

/* SVG icon dimensions */
.ce_jiproducttable_icon img {
    margin-bottom: -0.5rem;
    width: 4rem; /* 64px */
    height: 4rem; /* 64px */
}

.ce_jiproducttable_table td .ce_jiproducttable_icon {
    margin-top: -0.5rem; /* -24px, */
}

/* Pseudo-element on the first cell of each column to create the full-height shadow */
.ce_jiproducttable_table tbody tr:first-child td::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--shadow-height, 1000px); /* Set dynamically by JS */
    background: transparent;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.25); /* 0 4px 12px */
    z-index: -1;
    pointer-events: none;
}

.ce_jiproducttable_table strong {
    font-size: 1rem; /* 16px */
    font-style: normal;
    font-weight: 600;
}

/* Responsive styles for screens smaller than 992px */
@media (max-width: 991px) {
    /* Make cells wider on mobile */
    .ce_jiproducttable_table th,
    .ce_jiproducttable_table td {
        min-width: 80vw;
        width: 80vw;
    }

    /* Ensure horizontal scrolling works on touch devices */
    .ce_jiproducttable_table_container {
        -webkit-overflow-scrolling: touch;
    }

    /* Set a minimum width for the table to enforce scrolling */
    .ce_jiproducttable_table {
        min-width: 43.75rem; /* 700px */
        width: max-content;
    }
}