/* Ecomus compare.html uses tf-compare-table/row/col, not an HTML table.
   Variable selection count and complete tech names are the only layout adapters. */
.native-compare .tf-compare-col { flex: 0 0 calc((100% - 200px) / var(--compare-count, 4)); }
.native-compare .tf-compare-title { white-space: normal; overflow-wrap: anywhere; }
.native-compare .tf-compare-item { height: 100%; }
.native-compare .tf-compare-image { max-width: 240px; margin-inline: auto; }
.native-compare .tf-compare-image img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.native-compare .tf-compare-group-btns { margin-top: auto; padding-top: 14px; }
.native-compare .tf-compare-remove { border: 0; background: transparent; }
.native-compare .tf-compare-value { overflow-wrap: anywhere; }
.native-compare .tf-compare-field { flex: 0 0 200px; min-width: 200px; font-weight: 500; }
.native-compare [data-placeholder-caption] { font-size: 12px; color: var(--text); }

/* Keep Ecomus flex rows; reduce the criteria column so two products fit on a phone. */
@media (max-width: 767px) {
    .native-compare .tf-compare-col {
        flex-basis: calc((100% - 84px) / var(--compare-count, 2));
        min-width: 126px;
        font-size: 13px;
        line-height: 1.5;
    }
    .native-compare .tf-compare-field {
        flex: 0 0 84px;
        min-width: 84px;
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--white);
        overflow-wrap: anywhere;
    }
    .native-compare .tf-compare-row:nth-child(2n+2) > .tf-compare-field { background: #f2f2f2; }
    .native-compare .tf-compare-field,
    .native-compare .tf-compare-value { padding: 12px 8px; }
    .native-compare .tf-compare-item { padding: 12px 8px; }
    .native-compare .tf-compare-title { font-size: 15px; line-height: 1.4; }
    .native-compare .tf-compare-group-btns { margin: auto 0 0; }
    .native-compare .tf-compare-group-btns a { padding: 0 10px; }
    .native-compare .tf-compare-group-btns a span { display: inline; }
    .native-compare .tf-compare-group-btns .icon { display: none; }
}