.SaveNowTable {
    display: table;
    width: 95%;
    max-width: 100%;
    overflow-x: auto;
}

.SaveNowTableTitle {
    display: table-caption;
    text-align: center;
    font-weight: bold;
    font-size: larger;
    padding: 10px 0;
}

.SaveNowTableHeading {
    display: table-row;
    color: #000;
    font-weight: bold;
    text-align: center;
}

.HCell {
    display: table-cell;
    padding: 8px 5px;
    border-bottom: 2px solid #4164E3;
    border-left: 2px solid #fff;
    font-size: 14px;
}

.Row {
    display: table-row;
    color: #000000;
    background: #BED2D6;
}

.Row-Alternate {
    display: table-row;
    color: #000000;
    background: #E0F1B5;
}

.Cell {
    display: table-cell;
    border: solid;
    border-color: #fff;
    border-width: thin;
    padding: 5px 3px;
    border-bottom: 1px solid #BED2D6;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.SaveNowSize-Cell {
    background: #fff;
}

.SaveNowPrice-Cell {
    text-decoration: line-through;
    text-align: right;
    background: #DEE4F0;
    border-bottom: 1px solid #fff;
    padding-right: 5px;
}

.SaveNowPromo-Cell {
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    color: #004887;
    background: #fff;
    padding-right: 5px;
}

.Qty-Cell {
    background: #fff;
    border-bottom: 1px solid #BED2D6;
    text-align: center;
}

a:link.SaveNowLink { color: #4454A1; font-weight: 600; }
a:visited.SaveNowLink { color: #4454A1; }
a:hover.SaveNowLink { color: #4454A1; }
a:active.SaveNowLink { color: #4454A1; }

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
    .SaveNowTable {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .SaveNowTableTitle {
        font-size: 18px;
        padding: 8px 5px;
    }
    
    .SaveNowTableHeading {
        display: none; /* Hide header on mobile, consider alternative display */
    }
    
    .Row, .Row-Alternate {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
        background: #f9f9f9;
    }
    
    .HCell, .Cell, .SaveNowSize-Cell, 
    .SaveNowPrice-Cell, .SaveNowPromo-Cell, .Qty-Cell {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        padding: 5px 0;
        text-align: left;
        background: transparent;
        border-bottom: 1px solid #eee;
    }
    
    /* Remove last border */
    .Cell:last-child, .SaveNowSize-Cell:last-child,
    .SaveNowPrice-Cell:last-child, .SaveNowPromo-Cell:last-child,
    .Qty-Cell:last-child {
        border-bottom: none;
    }
    
    /* Add labels for mobile view */
    .Cell::before, .SaveNowSize-Cell::before,
    .SaveNowPrice-Cell::before, .SaveNowPromo-Cell::before,
    .Qty-Cell::before {
        content: attr(data-label);
        font-weight: bold;
        display: inline-block;
        width: 40%;
        color: #4164E3;
    }
    
    .SaveNowPrice-Cell, .SaveNowPromo-Cell {
        text-align: left;
    }
    
    .SaveNowPromo-Cell {
        font-size: 16px;
        color: #d32f2f; /* More visible color for mobile */
    }
    
    /* Alternative: Keep table layout but make scrollable */
    .SaveNowTable-mobile-scroll {
        display: table;
        min-width: 600px; /* Minimum width for horizontal scroll */
    }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
    .SaveNowTableTitle {
        font-size: 16px;
    }
    
    .SaveNowPromo-Cell {
        font-size: 15px;
    }
    
    .Cell, .HCell {
        font-size: 13px;
        padding: 4px 0;
    }
    
    /* Adjust label width for very small screens */
    .Cell::before, .SaveNowSize-Cell::before,
    .SaveNowPrice-Cell::before, .SaveNowPromo-Cell::before,
    .Qty-Cell::before {
        width: 45%;
        font-size: 12px;
    }
}

/* For very small screens, stack everything vertically */
@media screen and (max-width: 360px) {
    .SaveNowTableTitle {
        font-size: 14px;
    }
    
    .Cell::before, .SaveNowSize-Cell::before,
    .SaveNowPrice-Cell::before, .SaveNowPromo-Cell::before,
    .Qty-Cell::before {
        display: block;
        width: 100%;
        margin-bottom: 2px;
    }
    
    .SaveNowPromo-Cell {
        font-size: 14px;
    }
}