/* Product list block (wp-content/mu-plugins/product-list.php) */
.upl { margin: 1.2em 0 1.6em; }
.upl .upl-title { margin: 0 0 .5em; }
.upl a { text-decoration: none; }
.upl a:hover { text-decoration: underline; }
.upl img { max-width: 100px; height: auto; border: 0; padding: 0; margin: 0; display: block; }
.upl .upl-model { color: #666; font-size: .9em; }

/* table */
.upl table.upl-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; background: #fff; }
.upl-table th { background: #eef2f5; text-align: left; padding: 7px 8px; border-bottom: 2px solid #d9e3ea; white-space: nowrap; }
.upl-table th[data-sort] { cursor: pointer; user-select: none; }
.upl-table th[data-sort]::after { content: " \2195"; color: #9aa9b5; font-weight: normal; }
.upl-table th[aria-sort="ascending"]::after { content: " \2191"; color: #046fb3; }
.upl-table th[aria-sort="descending"]::after { content: " \2193"; color: #046fb3; }
.upl-table td { padding: 7px 8px; border-bottom: 1px solid #e3e9ee; vertical-align: top; text-align: left; }
.upl-table tbody tr:hover { background: #f7fafc; }
.upl-table .upl-c-image { width: 100px; }
.upl-table td.upl-c-image img { max-width: 90px; }
.upl-table .upl-c-screen, .upl-table .upl-c-weight, .upl-table .upl-c-added { white-space: nowrap; }
.upl-table td { word-break: normal; overflow-wrap: normal; hyphens: manual; }
.upl-table td.upl-c-name { min-width: 8em; }
.upl-table .upl-c-opinion { font-size: 14px; color: #444; }
.upl .upl-scroll { max-width: 100%; overflow-x: auto; }
/* long notes: first 4 lines, the rest is on the product page */
.upl-table .upl-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

/* cards and compact list */
.upl .upl-items { list-style: none !important; margin: 0; padding: 0; }
.upl .upl-items li { list-style: none !important; margin: 0; }
.upl-cards .upl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.upl-cards .upl-items li { border: 1px solid #d9e3ea; border-radius: 6px; background: #fff; overflow: hidden; }
.upl-cards .upl-img { background: #f4f7f9; display: flex; justify-content: center; padding: 10px; }
.upl-cards .upl-img img { max-width: 160px; max-height: 120px; width: auto; }
.upl-cards .upl-body { padding: 10px 12px; }
.upl-list .upl-items li { padding: 6px 0; border-bottom: 1px solid #e3e9ee; }
.upl .upl-facts { color: #555; font-size: 14px; margin-top: 2px; }
.upl .upl-body p { margin: 6px 0 0; font-size: 14px; color: #444; }

.upl .upl-compare { margin: .7em 0 0; font-weight: bold; }
.upl-empty { font-style: italic; color: #666; }

/* phones: each table row becomes a small card */
@media (max-width: 640px) {
    .upl-table thead { display: none; }
    .upl-table, .upl-table tbody, .upl-table tr, .upl-table td { display: block; width: auto !important; }
    .upl-table tr { padding: 8px 0; border-bottom: 1px solid #d9e3ea; display: grid; grid-template-columns: 90px 1fr; column-gap: 10px; }
    .upl-table td { border: 0; padding: 1px 0; }
    .upl-table .upl-clamp { -webkit-line-clamp: 5; line-clamp: 5; }
    .upl-table td.upl-c-image { grid-row: span 12; align-self: start; }
    .upl-table td.upl-c-image img { max-width: 90px; }
    .upl-table td:empty { display: none; }
    .upl-table td.upl-c-screen::before, .upl-table td.upl-c-cpu::before, .upl-table td.upl-c-os::before,
    .upl-table td.upl-c-weight::before, .upl-table td.upl-c-added::before, .upl-table td.upl-c-status::before { content: attr(data-label) ": "; color: #777; }
}