#cr_tbl_head

{

    font-weight: bold;

    background-color: #f2f2f2;

    border: 1px solid #f2f2f2;

    padding: 0.6em 0.8em 0.5em 1em;

    display: block;

}

#cr_variant_container

{

    height:auto;

    overflow:auto;

}

.cr_stock-in-stock

{

    color: green;

}

.cr_stock-backorder

{

    color: orange;

}

#cr_variant_table th,

#cr_variant_table td

{

    padding: 0.3em;

    border: 0;

}

#cr_variant_table

{

    display: block;

    width: 100%;

}

#cr_variant_table tr

{

    display: grid;

    grid-template-columns: 100px 1fr 1fr 1fr 1fr;   /* Adjusted to fit five columns */

    grid-template-rows: auto auto;                  /* Two rows for content */

    grid-gap: 10px;

    align-items: center;                            /* Aligns all content in the center vertically */

}

#cr_variant_table td

{

    display: block;

    text-align: left;

}

#cr_variant_table td.cr_variant_prod_img

{

    grid-row: 1 ;                           /* Make image span two rows */

    grid-column: 1;

    font-weight: default;

    font-size: 0.8rem;

}

.cr_variant_tr

{

    display: grid;

    grid-template-columns: 100px 2fr 1fr 1fr 1fr; /* Adjusted columns */

    grid-template-rows: auto auto;

    grid-gap: 10px;

    border-bottom: 1px solid #ccc;

}

.cr_variant_td.title,                           /* Title and excerpt */

.cr_variant_td.cr_excerpt

{

    grid-column: 2 / span 4;                    /* Span all available columns for content */

    grid-row: 1;

}

.cr_variant_td.cr_stock,                        /* Stock status */

.cr_variant_td.cr_price,                        /* Price */

.cr_variant_td.cr_add-to-cart

{                                               /* Add to cart */

    grid-column: 3 / 5;                         /* Adjust grid column span */

    grid-row: 2;

    align-self: center;                         /* Vertically center align within the cell */

    text-align: right !important;                          /* Right align the content */

}

.cr_price

{

    min-width: 100px;

    white-space: nowrap;

}

.cr_variant_td.cr_price

{

    grid-column: 3;                             /* Second column on the second row */

}

.cr_variant_td.cr_stock

{

    grid-column: 4;                             /* Third column on the second row */

}

.cr_variant_td.cr_add-to-cart

{

    grid-column: 5;                             /* Fourth column on the second row */

}

    @media screen and (min-width: 600px)

    {

        #cr_variant_container

        {

            max-height:400px;

        }

        #cr_variant_table

        {

            display: table; /* Resets display for the table */

            width: 100%;

            border-collapse: collapse;

            margin-bottom: 1em;

        }

        #cr_variant_table th,

        #cr_variant_table td

        {

            display: table-cell; /* Resets cells to behave as table cells */

            padding: 0.5em;

            border: 1px solid #ccc;

        }

        #cr_variant_table tr

        {

            display: table-row; /* Ensures rows are displayed as table rows */

        }

        #cr_variant_table th

        {

            background-color: #f2f2f2;

            color: #333;

            font-weight: bold;

        }

        #cr_variant_table td img

        {

            max-width: 80px;

            height: auto;

        }

        #cr_variant_table td p

        {

            margin: 0;

        }

        #cr_variant_table td p span a

        {

            color: #333;

            text-decoration: none;

        }

        #cr_variant_table td p span a:hover

        {

            text-decoration: underline;

        }

        #cr_variant_table td p span a:visited

        {

            color: #333;

        }

        #cr_variant_table td p span a:active

        {

            color: #333;

        }

        #cr_variant_table td p span a:focus

        {

            color: #333;

        }

        #cr_variant_table td p span a:link

        {

            color: #333;

        }

        #cr_variant_table td p span a:target

        {

            color: #333;

        }

        .cr_product_title

        {

            font-size: 1.1rem;

        }

        .cr_excerpt

        {

            font-size: 0.8rem;

            color: #333;

        }

        .cr_variant_input

        {

            width: 40px !important;

            padding: 5px !important;

        }

    }
