/* ==========================================================================
   Tables
   --------------------------------------------------------------------------
   Every list in the app is a Bootstrap table, most of them driven by
   DataTables with the layout set in common.js. This restyles the table and
   the controls around it without touching either.

   Nothing here changes behaviour: sorting, search, paging, the export
   buttons and the column-visibility menu keep their own markup and hooks.
   ========================================================================== */

body:not(.pos-rd) {
  --rt-surface:    #FFFFFF;
  --rt-surface-2:  #F5F7FB;
  --rt-line:       #E4EAF2;
  --rt-line-soft:  #EDF1F7;
  --rt-text:       #101828;
  --rt-text-2:     #5A6779;
  --rt-text-3:     #8A94A6;
  --rt-brand:      var(--theme-700, #004EEB);
  --rt-brand-wash: color-mix(in srgb, var(--theme-700, #004EEB) 9%, #FFFFFF);
  --rt-radius:     12px;
  --rt-ease:       cubic-bezier(.4, 0, .2, 1);
  /* Figures in a readable sans with even-width digits. This was IBM Plex Mono,
     which only the POS loaded; everywhere else it fell back to Courier New. */
  --rt-mono: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   1. The table itself
   ========================================================================== */

body:not(.pos-rd) .table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

body:not(.pos-rd) .table > thead > tr > th {
  padding: 11px 14px;
  border: 0 !important;
  border-bottom: 1px solid var(--rt-line) !important;
  background: var(--rt-surface-2);
  color: var(--rt-text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
body:not(.pos-rd) .table > thead > tr > th:first-child { border-radius: var(--rt-radius) 0 0 0; }
body:not(.pos-rd) .table > thead > tr > th:last-child { border-radius: 0 var(--rt-radius) 0 0; }

body:not(.pos-rd) .table > tbody > tr > td {
  padding: 11px 14px;
  border: 0 !important;
  border-bottom: 1px solid var(--rt-line-soft) !important;
  color: var(--rt-text);
  vertical-align: middle;
}
body:not(.pos-rd) .table > tbody > tr:last-child > td { border-bottom: 0 !important; }

/* Striping reads as noise once rows have room; a hover tint is enough. */
/* Bootstrap sets the stripe on the row, DataTables on tr.odd; both have to go
   for hover to be the only row state. */
body:not(.pos-rd) .table-striped > tbody > tr:nth-of-type(odd),
body:not(.pos-rd) .table-striped > tbody > tr:nth-of-type(odd) > td,
body:not(.pos-rd) .table > tbody > tr.odd,
body:not(.pos-rd) .table > tbody > tr.odd > td { background-color: transparent; }
body:not(.pos-rd) .table > tbody > tr { transition: background .14s var(--rt-ease); }
body:not(.pos-rd) .table > tbody > tr:hover > td { background: var(--rt-surface-2); }

/* The bordered variant keeps its outline as a single card edge. */
body:not(.pos-rd) .table-bordered {
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  overflow: hidden;
}
body:not(.pos-rd) .table-bordered > thead > tr > th,
body:not(.pos-rd) .table-bordered > tbody > tr > td { border-left: 0 !important; border-right: 0 !important; }

/* Money and counts line up. */
body:not(.pos-rd) .table .display_currency,
body:not(.pos-rd) .table td.text-right,
body:not(.pos-rd) .table th.text-right {
  font-family: var(--rt-mono);
  font-variant-numeric: tabular-nums;
}

body:not(.pos-rd) .table > tfoot > tr > th,
body:not(.pos-rd) .table > tfoot > tr > td {
  padding: 11px 14px;
  border: 0 !important;
  border-top: 1px solid var(--rt-line) !important;
  background: var(--rt-surface-2);
  color: var(--rt-text);
  font-family: var(--rt-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Status pills already carried by rows. */
body:not(.pos-rd) .table .label,
body:not(.pos-rd) .table .badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ==========================================================================
   2. DataTables chrome
   ========================================================================== */

body:not(.pos-rd) .dataTables_wrapper { color: var(--rt-text-2); }

/* The toolbar row from common.js's dom (Show entries, buttons, search) is
   Bootstrap columns whose content outgrows col-sm-1/8/3, so search fell to a
   second line. One flex line instead: entries left, buttons next, search
   right; on a narrow screen they wrap cleanly. */
body:not(.pos-rd) .dataTables_wrapper > .row.margin-bottom-20 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
body:not(.pos-rd) .dataTables_wrapper > .row.margin-bottom-20::before,
body:not(.pos-rd) .dataTables_wrapper > .row.margin-bottom-20::after { display: none; }
body:not(.pos-rd) .dataTables_wrapper > .row.margin-bottom-20 > [class*="col-sm-"] {
  float: none;
  width: auto;
  min-height: 0;
  padding: 0;
}
body:not(.pos-rd) .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-3 { margin-left: auto; }
/* Too narrow for one line: entries and search share the top line and the
   buttons take the next, instead of search dropping onto a line of its own. */
@media (max-width: 1439px) {
  body:not(.pos-rd) .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-3 { order: 1; }
  body:not(.pos-rd) .dataTables_wrapper > .row.margin-bottom-20 > .col-sm-8 { order: 2; flex-basis: 100%; }
}
body:not(.pos-rd) .dataTables_wrapper > .row.margin-bottom-20 .dataTables_length label,
body:not(.pos-rd) .dataTables_wrapper > .row.margin-bottom-20 .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

body:not(.pos-rd) .dataTables_wrapper .dataTables_length label,
body:not(.pos-rd) .dataTables_wrapper .dataTables_filter label {
  color: var(--rt-text-2);
  font-size: 12.5px;
  font-weight: 500;
}

body:not(.pos-rd) .dataTables_wrapper .dataTables_length select,
body:not(.pos-rd) .dataTables_wrapper .dataTables_filter input {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--rt-line);
  border-radius: 9px;
  background: var(--rt-surface);
  box-shadow: none;
  color: var(--rt-text);
  font-size: 13px;
  transition: border-color .15s var(--rt-ease), box-shadow .15s var(--rt-ease);
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_filter input {
  width: 220px;
  max-width: 100%;
  box-sizing: border-box;
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_filter { max-width: 100%; }
body:not(.pos-rd) .dataTables_wrapper .dataTables_length select:focus,
body:not(.pos-rd) .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--rt-brand);
  box-shadow: 0 0 0 3px var(--rt-brand-wash);
  outline: none;
}

/* Export and column-visibility buttons. */
body:not(.pos-rd) .dt-buttons > a,
body:not(.pos-rd) .dt-buttons > button,
body:not(.pos-rd) .dt-buttons .dt-button,
body:not(.pos-rd) .dt-buttons .btn {
  height: 36px;
  margin: 0 6px 0 0 !important;
  padding: 0 12px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rt-line) !important;
  border-radius: 9px !important;
  background: var(--rt-surface) !important;
  box-shadow: none !important;
  color: var(--rt-text-2) !important;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .15s var(--rt-ease), color .15s var(--rt-ease), border-color .15s var(--rt-ease), transform .15s var(--rt-ease);
}
body:not(.pos-rd) .dt-buttons > a:hover,
body:not(.pos-rd) .dt-buttons > button:hover,
body:not(.pos-rd) .dt-buttons .dt-button:hover,
body:not(.pos-rd) .dt-buttons .btn:hover {
  border-color: var(--rt-brand) !important;
  background: var(--rt-brand-wash) !important;
  color: var(--rt-brand) !important;
  transform: translateY(-1px);
}

body:not(.pos-rd) .dataTables_wrapper .dataTables_info { padding-top: 14px; color: var(--rt-text-3); font-size: 12px; }
body:not(.pos-rd) .dataTables_wrapper .dataTables_empty { padding: 28px 14px; color: var(--rt-text-3); text-align: center; }

/* Sort arrows sit in the header's own colour rather than the default blue. */
body:not(.pos-rd) table.dataTable thead .sorting,
body:not(.pos-rd) table.dataTable thead .sorting_asc,
body:not(.pos-rd) table.dataTable thead .sorting_desc { cursor: pointer; }
body:not(.pos-rd) table.dataTable thead th.sorting_asc,
body:not(.pos-rd) table.dataTable thead th.sorting_desc { color: var(--rt-brand); }

/* The column-visibility menu. */
body:not(.pos-rd) div.dt-button-collection {
  padding: 6px;
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  box-shadow: 0 20px 44px -18px rgba(16, 24, 40, .3);
}
body:not(.pos-rd) div.dt-button-collection .dt-button {
  width: 100%;
  margin: 0 0 2px !important;
  border: 0 !important;
  text-align: left;
}
body:not(.pos-rd) div.dt-button-collection .dt-button.active {
  background: var(--rt-brand-wash) !important;
  color: var(--rt-brand) !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.pos-rd) .table > tbody > tr,
  body:not(.pos-rd) .dt-buttons .dt-button { transition: none !important; }
}

/* DataTables paints its own striping and tints the sorted column. With rows
   this open, the hover state is enough, and one background keeps the sorted
   column from looking selected. */
body:not(.pos-rd) table.dataTable.stripe tbody tr.odd,
body:not(.pos-rd) table.dataTable.display tbody tr.odd,
body:not(.pos-rd) table.dataTable.stripe tbody tr.odd > .sorting_1,
body:not(.pos-rd) table.dataTable.display tbody tr.odd > .sorting_1,
body:not(.pos-rd) table.dataTable.order-column tbody tr > .sorting_1,
body:not(.pos-rd) table.dataTable.display tbody tr > .sorting_1 { background-color: transparent; }

body:not(.pos-rd) table.dataTable.hover tbody tr:hover,
body:not(.pos-rd) table.dataTable.display tbody tr:hover,
body:not(.pos-rd) table.dataTable.hover tbody tr:hover > .sorting_1,
body:not(.pos-rd) table.dataTable.display tbody tr:hover > .sorting_1 { background-color: var(--rt-surface-2); }

/* ==========================================================================
   3. Paging
   --------------------------------------------------------------------------
   DataTables renders these as <li class="paginate_button"><a>, so the button
   is the link inside; styling the item gave two nested boxes.
   ========================================================================== */

body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate { padding-top: 12px; text-align: right; }

body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate ul.pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.paginate_button {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.paginate_button > a {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--rt-line) !important;
  border-radius: 9px !important;
  background: var(--rt-surface) !important;
  color: var(--rt-text-2) !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s var(--rt-ease), color .15s var(--rt-ease), border-color .15s var(--rt-ease), transform .15s var(--rt-ease);
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.paginate_button:not(.disabled) > a:hover {
  border-color: var(--rt-brand) !important;
  background: var(--rt-brand-wash) !important;
  color: var(--rt-brand) !important;
  transform: translateY(-1px);
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.paginate_button.active > a,
body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.paginate_button.current > a {
  border-color: var(--rt-brand) !important;
  background: var(--rt-brand) !important;
  color: #fff !important;
}

/* Disabled stays a control: quiet, but still a shape. */
body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.paginate_button.disabled > a {
  background: var(--rt-surface-2) !important;
  color: var(--rt-text-3) !important;
  cursor: not-allowed;
}

/* Direction reads before the word. */
body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.previous > a::before,
body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.next > a::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--rt-chevron) center / 14px 14px no-repeat;
  mask: var(--rt-chevron) center / 14px 14px no-repeat;
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.previous > a::before { transform: rotate(90deg); }
body:not(.pos-rd) .dataTables_wrapper .dataTables_paginate li.next > a::after { transform: rotate(-90deg); }

body:not(.pos-rd) {
  --rt-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* The app hands DataTables a `col-sm-1` to hold the entries picker, which is
   narrower than the words "Show ... entries" and lets them run under the
   export buttons beside it. The column takes the width of what is in it. */
body:not(.pos-rd) .dataTables_wrapper .row > [class*="col-"]:has(> .dataTables_length) {
  width: auto;
  max-width: 100%;
  padding-right: 20px;
}

/* Entries picker: label and control on one line, with our own chevron. */
body:not(.pos-rd) .dataTables_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--rt-text-3);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_length select {
  width: auto;
  min-width: 74px;
  padding: 0 28px 0 10px;
  font-family: var(--rt-mono);
  font-variant-numeric: tabular-nums;
  background-image: var(--rt-chevron-grey);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px 13px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
body:not(.pos-rd) {
  --rt-chevron-grey: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_length select:hover { border-color: #CFD9E8; }

/* Search sits in the same family. */
body:not(.pos-rd) .dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* ==========================================================================
   4. The counter's table, brought to the lists
   --------------------------------------------------------------------------
   The cart on the POS counter is the table this app reads best: one framed
   card, a tinted header strip that stays put while the rows move under it,
   hairline separators, and figures in tabular mono. These rules bring the
   same treatment to every DataTables list, at the density a list needs.
   ========================================================================== */

/* The scroller is the card: one edge around head and body together. */
body:not(.pos-rd) .dataTables_wrapper .dataTables_scroll {
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  overflow: hidden;
  background: var(--rt-surface);
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_scrollHead {
  background: var(--rt-surface-2);
  border-bottom: 1px solid var(--rt-line);
}
body:not(.pos-rd) .dataTables_wrapper .dataTables_scrollHead .table > thead > tr > th { border-bottom: 0 !important; }
body:not(.pos-rd) .dataTables_wrapper .dataTables_scrollBody { background: var(--rt-surface); }
/* One scroll per page. Most lists ask DataTables for scrollY: 75vh, which
   boxed the rows in a second scroller inside the page; here the list grows
   with its rows and only the page scrolls. Wide lists still scroll sideways. */
body:not(.pos-rd) .dataTables_wrapper .dataTables_scrollBody {
  height: auto !important;
  max-height: none !important;
}
/* The head table draws its own corners inside the frame; the frame owns them. */
body:not(.pos-rd) .dataTables_wrapper .dataTables_scroll .table > thead > tr > th:first-child,
body:not(.pos-rd) .dataTables_wrapper .dataTables_scroll .table > thead > tr > th:last-child { border-radius: 0; }

/* A list with no scroller gets the same frame from the table itself. */
body:not(.pos-rd) .dataTables_wrapper > .table,
body:not(.pos-rd) .dataTables_wrapper > .row > div > .table {
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius);
  overflow: hidden;
}

/* Header strip: the counter's 10px caps, and room for the sort arrow so it
   stops sitting on the last letter. */
body:not(.pos-rd) .table > thead > tr > th {
  padding: 9px 12px;
  font-size: 10px;
  line-height: 1.5;
}
body:not(.pos-rd) .table > thead > tr > th.sorting,
body:not(.pos-rd) .table > thead > tr > th.sorting_asc,
body:not(.pos-rd) .table > thead > tr > th.sorting_desc { padding-right: 26px; }
body:not(.pos-rd) .table > thead > tr > th.sorting::after,
body:not(.pos-rd) .table > thead > tr > th.sorting_asc::after,
body:not(.pos-rd) .table > thead > tr > th.sorting_desc::after,
body:not(.pos-rd) .table > thead > tr > th.sorting::before,
body:not(.pos-rd) .table > thead > tr > th.sorting_asc::before,
body:not(.pos-rd) .table > thead > tr > th.sorting_desc::before {
  right: 9px;
  color: var(--rt-text-3);
  font-size: 9px;
  opacity: .5;
}
body:not(.pos-rd) .table > thead > tr > th.sorting_asc::after,
body:not(.pos-rd) .table > thead > tr > th.sorting_desc::after { color: var(--rt-brand); opacity: 1; }
body:not(.pos-rd) .table > thead > tr > th.sorting:hover { color: var(--rt-text-2); cursor: pointer; }

/* Rows: the counter's density. 73px of air per line made a page of ten rows
   scroll; this reads as a list again. */
body:not(.pos-rd) .table > tbody > tr > td {
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}
body:not(.pos-rd) .table > tbody > tr > td .tw-dw-btn-xs { margin: 0; }

/* Every figure lines up under the one above it, as on the counter. */
body:not(.pos-rd) .table > tbody > tr > td,
body:not(.pos-rd) .table > tfoot > tr > th { font-variant-numeric: tabular-nums; }

/* Thumbnails are a glance, not a panel. */
body:not(.pos-rd) .table td .product-thumbnail-small,
body:not(.pos-rd) .table td img {
  width: 34px;
  height: 34px;
  max-width: 34px;
  object-fit: cover;
  border: 1px solid var(--rt-line);
  border-radius: 8px;
  background: var(--rt-surface-2);
}

/* Row actions: the counter's quiet chip, not a coloured outline button. */
body:not(.pos-rd) .table td .btn-group > .dropdown-toggle {
  height: 28px;
  padding: 0 9px !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--rt-line) !important;
  border-radius: 8px !important;
  background: var(--rt-surface) !important;
  color: var(--rt-text-2) !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  transition: background .15s var(--rt-ease), color .15s var(--rt-ease), border-color .15s var(--rt-ease);
}
body:not(.pos-rd) .table td .btn-group > .dropdown-toggle:hover,
body:not(.pos-rd) .table td .btn-group.open > .dropdown-toggle {
  border-color: var(--rt-brand) !important;
  background: var(--rt-brand-wash) !important;
  color: var(--rt-brand) !important;
}
body:not(.pos-rd) .table td .btn-group > .dropdown-toggle .caret { margin-left: 1px; opacity: .6; }

body:not(.pos-rd) .table td .dropdown-menu {
  padding: 6px !important;
  border: 1px solid var(--rt-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 38px -16px rgba(16, 24, 40, .3) !important;
}
body:not(.pos-rd) .table td .dropdown-menu > li > a {
  padding: 7px 9px !important;
  border-radius: 7px;
  color: var(--rt-text-2) !important;
  font-size: 12.5px;
  transition: background .14s var(--rt-ease), color .14s var(--rt-ease);
}
body:not(.pos-rd) .table td .dropdown-menu > li > a:hover {
  background: var(--rt-brand-wash) !important;
  color: var(--rt-brand) !important;
}

/* Selection checkbox, sized like the counter's controls. */
body:not(.pos-rd) .table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--rt-brand);
  vertical-align: middle;
}

/* ==========================================================================
   5. Scrollbars
   --------------------------------------------------------------------------
   The platform scrollbar is a grey slab that reads as part of the page. These
   are thin, rounded and out of the way until they are used: the thumb takes
   the business colour under the pointer and fills out as it does.
   ========================================================================== */

body:not(.pos-rd) {
  scrollbar-width: thin;
  scrollbar-color: #C6D0E0 transparent;
}

body:not(.pos-rd) ::-webkit-scrollbar { width: 12px; height: 12px; }
body:not(.pos-rd) ::-webkit-scrollbar-track { background: transparent; }
body:not(.pos-rd) ::-webkit-scrollbar-corner { background: transparent; }

/* The border is transparent and clipped away, which is how a 12px track
   carries a 4px bar with room around it. */
body:not(.pos-rd) ::-webkit-scrollbar-thumb {
  background-color: #C6D0E0;
  background-clip: content-box;
  border: 4px solid transparent;
  border-radius: 999px;
  transition: background-color .2s var(--rt-ease), border-width .2s var(--rt-ease);
}
body:not(.pos-rd) ::-webkit-scrollbar-thumb:hover {
  background-color: var(--rt-brand, #004EEB);
  border-width: 3px;
}
body:not(.pos-rd) ::-webkit-scrollbar-thumb:active { background-color: var(--rt-brand, #004EEB); border-width: 2px; }

/* ==========================================================================
   6. Columns that hold a control rather than data
   --------------------------------------------------------------------------
   A checkbox, a thumbnail, a row menu: each needs only as much room as the
   thing in it. Left to itself a column takes its share of whatever is going,
   so a 34px thumbnail sat in a column wider than the product name beside it.
   ========================================================================== */

body:not(.pos-rd) .table > thead > tr > th.selectable_td,
body:not(.pos-rd) .table > tbody > tr > td.selectable_td { width: 44px; }

body:not(.pos-rd) .table > tbody > tr > td > div:has(> .product-thumbnail-small) { display: block !important; }
body:not(.pos-rd) .table td .product-thumbnail-small { display: block; }

/* The column a row's menu sits in. */
body:not(.pos-rd) .rd-page .table > tbody > tr > td:has(> .rp-menu) { width: 56px; text-align: center; }
body:not(.pos-rd) .rd-page .table > tbody > tr > td:has(> .rp-menu) .rp-menu { position: static; }

/* A column that holds a control has no data to keep on one line, so its
   heading may wrap rather than setting the column's width from its own
   length — "Product image" is twelve characters over a 34px thumbnail. */
body:not(.pos-rd) .table > thead > tr > th.selectable_td,
body:not(.pos-rd) .dataTables_scrollHead th:nth-child(-n+3),
body:not(.pos-rd) .rd-page .table > thead > tr > th:nth-child(-n+3) {
  /* At spaces only: breaking inside a word turned "Product image" into
     "Prod ct mag". */
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}