#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;
        }

    }