/*
 * Tables inside merchant-authored content (product short description, product
 * description tab, pages, blog posts).
 *
 * That markup comes out of CKEditor as `<figure class="table"><table>…`, and it
 * is frequently pasted from Amazon, which brings inline pixel widths along with
 * it (`figure` at 513px, cells at 122px / 390px). Two things went wrong on a
 * phone: those widths overflow a 390px viewport, and the `figure`'s `table`
 * class collided with the theme's cart-table rules, which stack every `td` into
 * its own full-width centred block below 480px. The result was a single column
 * of alternating labels and values.
 *
 * Keep editor tables as real tables, drop the pasted widths, and let the
 * container scroll sideways if a table genuinely needs more room.
 */

.ck-content figure.table,
.short-desc figure.table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ck-content table,
.short-desc table {
    display: table !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 15px;
    border-collapse: collapse;
    table-layout: auto;
}

.ck-content figure.table table,
.short-desc figure.table table {
    margin: 0;
}

.ck-content thead,
.short-desc thead {
    display: table-header-group;
}

.ck-content tbody,
.short-desc tbody {
    display: table-row-group;
}

.ck-content tr,
.short-desc tr {
    display: table-row;
}

.ck-content th,
.ck-content td,
.short-desc th,
.short-desc td {
    display: table-cell !important;
    /* Beats the pasted inline widths, so the browser can size the columns to
       whatever space the screen actually has. */
    width: auto !important;
    max-width: none !important;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--color-grey-8, #e4e4e4);
    text-align: start;
    vertical-align: top;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* The stacked-cart rules print `data-title` before each cell; editor tables
   have no such attribute, but the pseudo-element still takes up a line. */
.ck-content td:before,
.short-desc td:before {
    content: none !important;
}

.ck-content tr:last-child td,
.short-desc tr:last-child td {
    border-bottom: 0;
}

/* Label / value tables are the common shape: keep the first column compact so
   the value gets the room. */
.ck-content tr > td:first-child:nth-last-child(2),
.short-desc tr > td:first-child:nth-last-child(2) {
    width: 40% !important;
}

.ck-content td:first-child strong,
.short-desc td:first-child strong {
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .ck-content th,
    .ck-content td,
    .short-desc th,
    .short-desc td {
        padding: 7px 8px;
        font-size: 13px;
    }

    .ck-content tr > td:first-child:nth-last-child(2),
    .short-desc tr > td:first-child:nth-last-child(2) {
        width: 45% !important;
    }
}