/*
 * Styling for spec/feature tables inside product descriptions (the AI
 * "Feature | Specification" table from MageosLocal_WebSearch, and any other
 * table authored in description content). Scoped to .prose so it never touches
 * layered-nav / cart / other tables. Plain CSS (not a Tailwind utility), so it
 * is NOT affected by the Tailwind purge and needs no theme rebuild.
 *
 * Also applied to .bm-pdp-short — the PDP short-description panel holds the
 * same kind of unvetted authored HTML, and a table there should look identical
 * to one in the description tab. That panel adds its own horizontal scroll
 * (product-page.css) because its column is much narrower.
 *
 * DESIGN RULE (2026-08-10): description HTML is not ours. It arrives from
 * supplier feeds and pasted content carrying arbitrary inline styles, so every
 * rule here must produce a readable table for ANY such markup rather than
 * assume a shape. Three defences, learned from a real breakage where the
 * first column rendered 13px wide (Shell Helix HX7, table pasted with
 * `table-layout: fixed; width: 1270px`):
 *
 *   1. neutralise inline `table-layout: fixed`   — under fixed layout the
 *      shrink-to-fit trick below is taken literally (1% of the table) instead
 *      of meaning "as narrow as the content"
 *   2. clamp the table to its container          — pasted tables carry pixel
 *      widths (1270px) that otherwise overflow the page
 *   3. never let a cell clip its own text        — pasted cells carry
 *      `overflow: hidden; text-overflow: ellipsis`
 */
.prose table,
.bm-pdp-short table {
    width: 100%;
    /* !important beats the inline width/table-layout that pasted tables carry.
       Both are deliberate: without them the rules further down misfire. */
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}
.prose table td,
.prose table th,
.bm-pdp-short table td,
.bm-pdp-short table th {
    border: 1px solid #e5e7eb;
    padding: 0.45rem 0.75rem;
    text-align: left;
    vertical-align: top;
    /* Pasted cells often ship overflow:hidden + text-overflow:ellipsis. If any
       rule ever narrows the column, that silently hides content — text must
       stay readable, so the clipping is disarmed. */
    overflow: visible !important;
    text-overflow: clip !important;
}
.prose table tr:nth-child(odd) td,
.bm-pdp-short table tr:nth-child(odd) td {
    background-color: #f9fafb;
}
/* The label treatment applies ONLY to two-column label/value tables — that is
 * what `:first-child:nth-last-child(2)` tests: a first cell that is also the
 * second-from-last, i.e. the row has exactly two cells. A genuine data table
 * with three or more columns keeps normal, evenly negotiated widths instead of
 * having its first column forced narrow.
 *
 * width:1% + nowrap = shrink-to-fit: the label sits on one line and the value
 * column takes the rest. Correct only under automatic layout, which the rule
 * above now guarantees.
 */
.prose table tr > td:first-child:nth-last-child(2),
.bm-pdp-short table tr > td:first-child:nth-last-child(2) {
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    width: 1%;
}
/* The value column beside such a label may wrap normally. */
.prose table tr > td:first-child:nth-last-child(2) + td,
.bm-pdp-short table tr > td:first-child:nth-last-child(2) + td {
    width: auto;
    white-space: normal;
}
/* Narrow screens: let a wide table scroll instead of squashing the labels. */
@media (max-width: 640px) {
    .prose table {
        display: block;
        overflow-x: auto;
    }
}