/* =========================================================================
   MICRO-RAY — TYPE AND CARD SIZES
   Written 3 September 2026. Loaded after style.css.

   THIS FILE IS THE ONLY PLACE TYPE SIZES AND CARD IMAGE SIZES ARE SET.

   It replaces six separate blocks that had accumulated at the end of
   style.css during one afternoon. They overlapped, two of them defined the
   datasheet badge twice with identical specificity, and which one won came
   down to the order they happened to be appended in — so the same page could
   render correctly in one build and wrong in the next. That is the fault this
   file exists to make impossible: every rule below is stated exactly once.

   TO RETUNE THE SITE, EDIT A VARIABLE. Do not add a font-size or an image
   height anywhere else, and do not append another block to style.css.

   Sizes approved by Ray:
     --mr-tbl-size    15px   every word of text in every table and every card
     --mr-tbl-line    1.4    the line height that goes with it
     --mr-tile-photo  240px  the white photo area on a card. Larger = a
                             taller, more generous card.
     --mr-tile-img    190px  the picture inside it. Smaller = more white space
                             around the product. Keep it BELOW the photo
                             value; the centring padding is their difference.

   WHY !important APPEARS. Three things in style.css and in the templates
   outrank any plain selector written here, and they are not negotiable from
   a stylesheet loaded afterwards:
     1. xref-phoenix.php writes font-size into a style ATTRIBUTE on its table.
        Only !important beats an inline style.
     2. catalog-table.php prints an inline <style> block in wp_head, which
        loads after this file.
     3. `.woocommerce .mr-wc ul.products li.product a img` and the theme's
        global img rule are (0,4,3) and set height:auto — they silently beat
        a card rule and were why product photos rendered at 271px and were
        cropped, however small the box was set.
   Everywhere else, ordinary specificity is used.

   CONTENTS
     1  variables
     2  one type size — every table on the site
     3  one type size — the furniture around a table view
     4  table headings
     5  table column widths
     6  the datasheet badge  (defined ONCE — see the note there)
     7  availability: Made to Order
     8  grid cards: photo, part number, description, footer
     9  the other card families: related products, categories
   ========================================================================= */


/* ---- 1. variables ------------------------------------------------------ */

:root{
  --mr-tbl-size:15px;
  --mr-tbl-line:1.4;
  --mr-tile-photo:240px;
  --mr-tile-img:190px;
}


/* ---- 2. one type size, every table on the site -------------------------
   Before this, the catalogue table alone rendered TEN sizes at once: 11px
   document badge, 11.5px headings, 11.5px made-to-order chip, 11.5px lead
   time, 12px cross-reference link, 12.3px description snippet, 12.5px series
   label, 12.5px Add button, 13px quantity box, 13.5px price and
   availability, 14px description, 17px part numbers. Each came from a rule
   written at a different time by someone unaware of the others.

   The tables named here, and why each needed naming:
     .mr-parts        catalogue rows and search results
     .mr-xref__index  the series index on each brand's hub page
     .mr-xref__table  the part-by-part cross tables — AMP, Molex,
                      distributor, and the JST tables in crossref.php and
                      jst-seo.php, which carry no .mr-parts class
     .mr-xtable       Phoenix Contact, built with inline style attributes
     .spec-table      the specification table on every product page
     .tier-table      quantity-break pricing
     .pdp-desc table  part-number tables inside a product description
     .shop_table      cart and checkout
     plus the .section / .panel / .entry-content fallback

   DELIBERATELY EXCLUDED, and stated so a later pass does not "finish the
   job": table.variations, table.woocommerce-grouped-product-list and
   .cart_totals table. Those are not columns of data — they are layout
   scaffolding around form controls, and forcing a data-table size on them
   restyles select boxes and labels. ---------------------------------------- */

:is(table.mr-parts,
    table.mr-xref__index,
    table.mr-xref__table,
    table.mr-xtable,
    table.spec-table,
    table.tier-table,
    .mr-xref__scroll>table,
    .mr-scroll>table,
    .mr-xrefpage table,
    .guide table,
    .panel table,
    .entry-content table,
    .mr-pdp .pdp-desc table,
    .mr-pdp .spec-table,
    .mr-wc table.shop_table,
    .section table:not(.variations):not(.woocommerce-grouped-product-list)),
:is(table.mr-parts,
    table.mr-xref__index,
    table.mr-xref__table,
    table.mr-xtable,
    table.spec-table,
    table.tier-table,
    .mr-xref__scroll>table,
    .mr-scroll>table,
    .mr-xrefpage table,
    .guide table,
    .panel table,
    .entry-content table,
    .mr-pdp .pdp-desc table,
    .mr-pdp .spec-table,
    .mr-wc table.shop_table,
    .section table:not(.variations):not(.woocommerce-grouped-product-list))
  :is(th, td, a, span, small, strong, em, b, i, del, ins, p, li, label,
      button, input, select,
      .btn, .btn-sm, .amount, .woocommerce-Price-amount, .price,
      .mr-part, .mr-jst, .mr-jst-series, .mr-jst-more, .mr-title, .mr-blurb,
      .mr-none, .mr-instock, .mr-out, .mr-lead, .mto-badge, .mr-qty,
      .product-name, .product-total, .quantity){
  font-size:var(--mr-tbl-size) !important;
  line-height:var(--mr-tbl-line);
}

/* The excluded three keep their own type. */
:is(table.variations, table.woocommerce-grouped-product-list, .cart_totals table)
  :is(th, td, label, select, input){
  font-size:inherit;
}


/* ---- 3. the furniture around a table view ------------------------------
   "Table view" means the whole view, not just the <table>. These were still
   mixed while every cell was already correct: the word VIEW at 12px, the
   Table/Grid buttons at 13px, the filter sidebar's headings at 13 and 14px,
   its labels and counts at 14px, and the pagination at 14px.

   NOTE: WooCommerce's pager is nav.woocommerce-pagination > ul.page-numbers,
   NOT the .navigation.pagination the theme styles elsewhere. A rule written
   for the theme's spelling misses it and it silently stays 14px. Both
   spellings are named.

   The page H1 and section headings are left alone on purpose — they are the
   page's title, not part of the data view. ---------------------------------- */

form.shop-layout :is(.mr-viewbar, .filters, .woocommerce-result-count,
                     .woocommerce-ordering),
form.shop-layout :is(.mr-viewbar, .filters, .woocommerce-result-count,
                     .woocommerce-ordering)
  :is(h4, h5, a, span, label, li, p, small, strong, em, button, input,
      select, option, .btn, .btn-sm, .mr-viewbtn, .mr-viewbar-label),
.woocommerce-pagination :is(a, span, li, .page-numbers),
.navigation.pagination :is(a, span, li, .page-numbers),
ul.page-numbers :is(a, span, li, .page-numbers){
  font-size:var(--mr-tbl-size) !important;
  line-height:var(--mr-tbl-line);
}


/* ---- 4. table headings -------------------------------------------------
   Same size as the body, still bold, and no small-caps tracking. The caps
   had to go with the size: at 15px, uppercase with .06em tracking,
   "AMP / TE Equivalent" measures about 174px inside a 152px column, and
   "Availability" is a single word that cannot wrap out of trouble. Sentence
   case fits and still reads as a heading because it stays bold above a rule.
   ------------------------------------------------------------------------- */

:is(table.mr-parts,
    table.mr-xref__index,
    table.mr-xref__table,
    table.mr-xtable,
    table.spec-table,
    table.tier-table,
    .mr-scroll>table,
    .mr-xrefpage table,
    .panel table,
    .entry-content table,
    .mr-pdp .pdp-desc table,
    .mr-wc table.shop_table,
    .section table:not(.variations):not(.woocommerce-grouped-product-list))
  :is(thead th, tr:first-child th){
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:700;
  white-space:normal;
  padding-top:11px;
  padding-bottom:11px;
  vertical-align:bottom;
}


/* ---- 5. column widths, and the one-line part number --------------------
   Sized to the real data, not chosen. Measured at 15px:
     "MR-A121910-A-XX-T"  144px of text; 18 characters is the dominant SKU
                          length, 182 of 624 products  ->  c-sku 176px
     "Datasheet"          94px including cell padding, one word, cannot wrap
     "Availability"       118px, likewise

   A part number must sit on ONE line and must not run under the Description
   column — two requirements that pull against each other, which is why the
   column is sized to the data rather than the type being shrunk.

   A handful of rows carry a whole description in the SKU field (the worst is
   60 characters). No column width fixes those; they are a data problem in
   the product records. Until then they end in an ellipsis rather than
   crossing into the next column, with the full value in the link's title.

   These selectors MUST carry .mr-catalog / .mr-results: the MR-TABLE-COLS
   block in style.css uses that extra class, so a plain
   `table.mr-parts thead th.c-doc` loses to it on specificity and silently
   does nothing. ------------------------------------------------------------ */

body .mr-tablewrap table.mr-parts.mr-catalog,
body .mr-tablewrap table.mr-parts.mr-results{min-width:1000px}

body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-img,
body .mr-tablewrap table.mr-parts.mr-results thead th.c-img{width:74px}
body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-sku,
body .mr-tablewrap table.mr-parts.mr-results thead th.c-sku{width:176px}
body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-xref,
body .mr-tablewrap table.mr-parts.mr-results thead th.c-xref{width:158px}
body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-doc,
body .mr-tablewrap table.mr-parts.mr-results thead th.c-doc{width:96px}
body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-price,
body .mr-tablewrap table.mr-parts.mr-results thead th.c-price{width:86px}
body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-avail,
body .mr-tablewrap table.mr-parts.mr-results thead th.c-avail{width:126px}
body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-buy,
body .mr-tablewrap table.mr-parts.mr-results thead th.c-buy{width:84px}

@media (max-width:1200px){
  body .mr-tablewrap table.mr-parts.mr-catalog,
  body .mr-tablewrap table.mr-parts.mr-results{min-width:960px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-img,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-img{width:66px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-xref,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-xref{width:150px}
}

:is(table.mr-parts, table.mr-xref__table, table.mr-xref__index) td.c-sku{
  overflow:hidden;
}
:is(table.mr-parts, table.mr-xref__table, table.mr-xref__index) .mr-part{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}


/* ---- 6. the datasheet badge -------------------------------------------
   DEFINED ONCE. HERE. The bug this replaces: two blocks defined this badge
   with identical specificity, so the winner depended purely on which was
   appended last, and one of them hid the label with font-size:0.

   It is a sheet glyph — folded corner, coloured band, NO lettering — with
   the label beside it as real text at --mr-tbl-size. An earlier attempt drew
   the word PDF inside the artwork and hid the anchor's text; that satisfied
   "no text at another size" on paper while still looking smaller on screen,
   which was the whole complaint. Scaling that badge instead would have meant
   a 55x72px tile to bring 9.2px lettering up to 15px, driving every row
   taller. Icon plus label is 18 + 6 + about 30 = 54px inside a 96px column.

   The icon is an inline data-URI SVG: nothing to upload, it cannot 404, and
   it costs no extra request.

   WHICH ICON A ROW GETS IS DECIDED BY THE FILE EXTENSION, in
   microray_product_docs(). The meta key is called _microray_drawing_pdf, but
   of the 255 drawings 211 are genuinely .pdf and 44 are .svg — labelling all
   of them PDF told the customer something untrue about the file they were
   about to open. ----------------------------------------------------------- */

:is(table.mr-parts, .mr-pdp, .mr-xrefpage, .prod-card, .mr-tile) .mr-doc{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:auto;
  height:auto;
  min-width:0;
  padding:2px 0 2px 24px;
  border:none;
  border-radius:0;
  box-shadow:none;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:18px 23px;
  font-size:var(--mr-tbl-size) !important;
  line-height:var(--mr-tbl-line);
  font-weight:700;
  letter-spacing:0 !important;
  text-decoration:none;
  transition:opacity .15s ease;
}
:is(table.mr-parts, .mr-pdp, .mr-xrefpage, .prod-card, .mr-tile) .mr-doc::before,
:is(table.mr-parts, .mr-pdp, .mr-xrefpage, .prod-card, .mr-tile) .mr-doc::after{
  content:none;
}
:is(table.mr-parts, .mr-pdp, .mr-xrefpage, .prod-card, .mr-tile) .mr-doc:hover{
  opacity:.75;
  text-decoration:underline;
}

/* The three variants. style.css gives .mr-doc colour #fff and .mr-doc-pdf a
   solid red background, both of which have to be replaced here or the badge
   is white text on a red block with no icon at all. */
:is(table.mr-parts, .mr-pdp, .mr-xrefpage, .prod-card, .mr-tile) .mr-doc-pdf{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2034%2044%22%3E%3Cpath%20d%3D%22M3%200.9h17.4L33.1%2013.6V40.1a3%203%200%200%201-3%203H3.9a3%203%200%200%201-3-3V3.9a3%203%200%200%201%203-3z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23B9C0C9%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M20.4%200.9L33.1%2013.6H23.4a3%203%200%200%201-3-3z%22%20fill%3D%22%23E1E6EC%22%20stroke%3D%22%23B9C0C9%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%220.9%22%20y%3D%2225%22%20width%3D%2232.2%22%20height%3D%2211.5%22%20fill%3D%22%23E8433A%22%2F%3E%3C%2Fsvg%3E");
  background-color:transparent;
  color:#C22E26;
}
:is(table.mr-parts, .mr-pdp, .mr-xrefpage, .prod-card, .mr-tile) .mr-doc-dwg{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2034%2044%22%3E%3Cpath%20d%3D%22M3%200.9h17.4L33.1%2013.6V40.1a3%203%200%200%201-3%203H3.9a3%203%200%200%201-3-3V3.9a3%203%200%200%201%203-3z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23B9C0C9%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M20.4%200.9L33.1%2013.6H23.4a3%203%200%200%201-3-3z%22%20fill%3D%22%23E1E6EC%22%20stroke%3D%22%23B9C0C9%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%220.9%22%20y%3D%2225%22%20width%3D%2232.2%22%20height%3D%2211.5%22%20fill%3D%22%230A5FE0%22%2F%3E%3C%2Fsvg%3E");
  background-color:transparent;
  color:var(--blue-dark);
}
:is(table.mr-parts, .mr-pdp, .mr-xrefpage, .prod-card, .mr-tile) .mr-doc-info{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2034%2044%22%3E%3Cpath%20d%3D%22M3%200.9h17.4L33.1%2013.6V40.1a3%203%200%200%201-3%203H3.9a3%203%200%200%201-3-3V3.9a3%203%200%200%201%203-3z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23B9C0C9%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M20.4%200.9L33.1%2013.6H23.4a3%203%200%200%201-3-3z%22%20fill%3D%22%23E1E6EC%22%20stroke%3D%22%23B9C0C9%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%220.9%22%20y%3D%2225%22%20width%3D%2232.2%22%20height%3D%2211.5%22%20fill%3D%22%2355606E%22%2F%3E%3C%2Fsvg%3E");
  background-color:transparent;
  color:var(--gray-600);
}


/* WHEN A ROW HAS NO DOCUMENT, the cell shows an em-dash - and that dash was
   the thing Ray could not read. It was never a size problem: it measured
   15px like everything else, but style.css gives .mr-none opacity:.6 over a
   pale grey, so it rendered at roughly a third of the contrast of the text
   beside it and effectively disappeared. Full opacity, and the same grey as
   the Other Categories links in the sidebar - the size and weight he pointed
   at as the one that reads properly. */
:is(table.mr-parts, .mr-pdp, .mr-xrefpage, .prod-card, .mr-tile) .mr-none{
  opacity:1;
  color:var(--gray-600);
  font-size:var(--mr-tbl-size) !important;
}

/* ---- 7. availability ---------------------------------------------------
   "Made to Order" was a small-caps chip. It reads as the green button it
   sits beside now, at the same type size as everything else. ---------------- */

:is(table.mr-parts, .mr-xrefpage table) .mto-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-transform:none !important;
  letter-spacing:0 !important;
  white-space:normal;
  font-weight:600;
  color:#fff !important;
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  border:2px solid transparent;
  border-radius:11px;
  padding:6px 14px;
  box-shadow:var(--shadow-green);
  line-height:1.25;
}
:is(table.mr-parts, .mr-xrefpage table) .mr-lead{
  display:block;
  margin-top:5px;
  color:var(--gray-400);
}


/* ---- 8. grid cards -----------------------------------------------------
   Order on a card: photo, part number, description, drawing, price, then
   Request a Quote with Made to Order beside it.

   THE PHOTO BOX GOES ON THE IMAGE, NOT ON THE LINK AROUND IT, and it is
   !important. Two measured failures got us here, both worth keeping:
     1. A plain `.mr-tile .mr-tile-photo img` rule loses to the theme's
        global img rule (height:auto) and to `.woocommerce .mr-wc ul.products
        li.product>a:first-of-type{display:block}` (0,4,3). So width:100%
        applied, height did not, and a 300px photo rendered 271x271 and was
        CROPPED by the box — which is why the pictures kept looking too big
        however small the box was set. The box was shrinking; the picture
        was not.
     2. Making the box a flex container instead squeezed the image to 24px
        wide: as a flex item with a percentage width it shrank to nothing
        while object-fit letterboxed what was left.
   Setting the height on the IMAGE, from the variable rather than as a
   percentage, sidesteps both.

   The part number is the card's heading. It was not on the card at all
   before — only the long description — so a card did not tell a buyer which
   part it was. It is NOT set larger than the body text: Ray asked for one
   uniform size, so it is told apart by weight and colour instead. ----------- */

.prod-card.mr-tile{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.mr-tile .mr-tile-photo{
  display:block !important;
  height:var(--mr-tile-photo) !important;
  padding:calc((var(--mr-tile-photo) - var(--mr-tile-img)) / 2) 14px;
  background:#fff;
  text-align:center;
  overflow:hidden;
  line-height:0;
}
.mr-tile .mr-tile-photo img{
  display:block !important;
  width:100% !important;
  height:var(--mr-tile-img) !important;
  max-width:100% !important;
  max-height:var(--mr-tile-img) !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto !important;
  padding:0 !important;
  border-radius:0;
  background:none;
}

.mr-tile .mr-loop-sku{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-align:center;
  margin:15px 16px 0;
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.mr-tile .mr-loop-sku:hover{ color:var(--blue); }

/* Clamped to three lines. Unclamped, a full-sentence description drove cards
   to 700-800px tall with the photograph stranded at the top. */
.mr-tile .mr-tile-title{
  text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:6px 16px 0;
  font-weight:400;
  line-height:1.45;
  color:var(--gray-600);
}
.mr-tile .mr-tile-title a{ color:inherit; text-decoration:none; }
.mr-tile .mr-tile-title a:hover{ color:var(--blue); }

.mr-tile .mr-tile-foot{
  display:flex;
  flex-direction:column;
  gap:11px;
  align-items:flex-start;
  margin:14px 16px 16px;
}
.mr-tile-docs{ display:flex; gap:8px; align-items:center; }
.mr-tile-price{ font-weight:700; color:var(--ink); margin:0; display:block; }
.mr-tile-price .price-on-request{ color:var(--blue); font-weight:700; }

/* Request a Quote and Made to Order sit SIDE BY SIDE, never stacked. They
   were wrapping, not mis-ordered: .btn carries 15px/30px padding, so the
   pair measured about 330px inside a card with roughly 320px of room and
   flex-wrap dropped the badge onto its own line. */
.mr-tile-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  width:100%;
}
.mr-tile-actions .button,
.mr-tile-actions .btn{
  margin:0;
  align-self:center;
  padding:11px 18px;
  white-space:nowrap;
  flex:0 1 auto;
  min-width:0;
}
.mr-tile-actions .screen-reader-text{ display:none; }

/* One size across the whole card, matching the tables. */
.mr-tile,
.mr-tile :is(h2, h3, p, span, a, div, button, .button, .btn, .price,
             .amount, .woocommerce-Price-amount, .mr-loop-sku,
             .mr-tile-title, .mr-tile-price, .mto-badge-tile){
  font-size:var(--mr-tbl-size) !important;
}

/* The Made to Order badge on a card. It used to be
   position:absolute;top:12px;left:12px — an overlay pinned to the corner of
   the photograph — so the absolute positioning has to be undone explicitly
   or it flies back there wherever the markup puts it. */
.mto-badge-tile,
.mr-tile .mto-badge-tile{
  position:static;
  top:auto;
  left:auto;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
  line-height:1.25;
  color:#fff;
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  border:2px solid transparent;
  border-radius:11px;
  padding:9px 13px;
  box-shadow:var(--shadow-green);
  white-space:nowrap;
  flex:0 0 auto;
}


/* ---- 9. the other card families ---------------------------------------
   Related Products is built separately in content-single-product.php as
   .prod-card > .ph, and the category cards in functions.php and
   inc/shop-by-category.php are .cat-card > .ph. Those carried their own
   photo heights — 170px and 186px — so a product looked one size on a
   category page and another beneath a product. Both are on the same two
   variables now. .ph holds a real <img> on product cards and a
   background-image on some category cards, so both forms are handled. ------- */

.prod-card .ph,
.cat-card .ph,
.res-card .ph{
  display:block;
  height:var(--mr-tile-photo) !important;
  min-height:var(--mr-tile-photo);
  padding:calc((var(--mr-tile-photo) - var(--mr-tile-img)) / 2) 14px !important;
  background-color:#fff;
  text-align:center;
  overflow:hidden;
  line-height:0;
  background-origin:content-box !important;
  background-clip:padding-box;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}
.prod-card .ph img,
.cat-card .ph img,
.res-card .ph img{
  display:block !important;
  width:100% !important;
  height:var(--mr-tile-img) !important;
  max-width:100% !important;
  max-height:var(--mr-tile-img) !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto !important;
  padding:0 !important;
  border-radius:0;
  background:none;
}
.prod-card .ph .ph-fallback,
.cat-card .ph .ph-fallback,
.res-card .ph .ph-fallback{
  line-height:1.4;
  font-size:var(--mr-tbl-size);
}

.prod-grid .prod-card .sku{
  font-size:var(--mr-tbl-size) !important;
  font-weight:700;
  color:var(--ink);
  letter-spacing:0;
  text-transform:none;
}
.prod-grid .prod-card h3,
.prod-grid .prod-card h3 a,
.prod-grid .prod-card .price,
.prod-grid .prod-card .price *,
.prod-grid .prod-card .btn,
.prod-grid .prod-card .btn-details{
  font-size:var(--mr-tbl-size) !important;
}
.prod-grid .prod-card h3{
  font-weight:400;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* ---- 10. iPhone and iPad ----------------------------------------------
   Everything above is size-agnostic; these are the things that only bite on
   a touch device, and each one is a real iOS behaviour rather than a guess.

   1. iOS SAFARI ZOOMS THE PAGE when a form field smaller than 16px is
      focused, and it does not zoom back out. At 15px every search box, the
      quantity box and the sort dropdown would jerk the layout on every tap.
      Fields are 16px on touch devices; that is the documented threshold, and
      it is why this is the ONE exception to the uniform size. Text is
      untouched - a field is not a column of type.
   2. TAP TARGETS. Apple's guidance is 44x44pt. The Add and Quote buttons at
      table type size are about 34px tall.
   3. THE TABLES MUST SCROLL INSIDE THEIR BOX, never widen the page. A
      1000px min-width in a 390px viewport is fine as long as the wrapper
      clips it; it is a horizontal page scroll that makes a site feel broken
      on a phone.
   4. A CARD ON A PHONE IS FULL WIDTH, so a 240px photo area is most of the
      first screen. The box and the picture step down together, keeping the
      proportion Ray approved rather than just cropping.
   ------------------------------------------------------------------------ */

/* 1. no zoom-on-focus. (pointer:coarse) targets touch devices only, so the
      desktop keeps the uniform 15px in its fields. */
@media (pointer:coarse){
  :is(input[type=text], input[type=search], input[type=email], input[type=tel],
      input[type=number], input[type=password], textarea, select,
      .mr-qty, .mr-search input, .filters input, .filters select,
      .woocommerce-ordering select){
    font-size:16px !important;
  }
}

/* 2. comfortable tap targets on touch, without changing the type size. */
@media (pointer:coarse){
  :is(.mr-tile-actions .btn, .mr-tile-actions .button,
      table.mr-parts .btn, table.mr-parts .button,
      .mr-viewbtn, .page-numbers){
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  table.mr-parts .mr-doc{ min-height:44px; }
}

/* 3. a wide table scrolls in its own box; the PAGE never scrolls sideways. */
.mr-tablewrap,
.mr-scroll,
.mr-xref__scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
html, body{ overflow-x:hidden; }

/* 4. cards step down together on a phone, keeping the approved proportion
      (240/190 is 79%; 180/142 is the same). */
@media (max-width:600px){
  :root{
    --mr-tile-photo:180px;
    --mr-tile-img:142px;
  }
  .mr-tile .mr-tile-foot{ margin:12px 14px 14px; }
  .mr-tile .mr-loop-sku{ margin:12px 14px 0; }
  .mr-tile .mr-tile-title{ margin:5px 14px 0; -webkit-line-clamp:2; }
  /* the two controls still share a line; on the narrowest phones let them
     wrap rather than shrink the words to nothing */
  .mr-tile-actions{ flex-wrap:wrap; }
}

/* iPad portrait sits between the two and keeps the full-size card. */
@media (min-width:601px) and (max-width:1024px){
  :root{
    --mr-tile-photo:210px;
    --mr-tile-img:166px;
  }
}

/* ---- 11. the table view uses the width the screen actually has ---------
   [Ray, 3 September 2026] "make the table wider so that all aspects fit on
   the screen."

   The archive was capped at 1460px with a 250px filter sidebar and a 34px
   gap, so on a 1440px display the table got about 1108px and on anything
   wider it stopped growing and left empty margins either side while the
   table itself scrolled. Eight columns need the room more than the margins
   do.

   min() rather than a flat number: 96vw keeps a sensible gutter on any
   screen, and the 1760px ceiling stops the rows becoming uncomfortably long
   to read across on a very wide monitor. The sidebar loses 30px and the gap
   10px, which is about 40px more table on every screen size.

   The <=1180px behaviour in style.css is untouched: below that the sidebar
   drops under the table and the table scrolls inside its own box, which is
   the right answer on a phone and is what section 10 protects.
   ------------------------------------------------------------------------ */

@media (min-width:1181px){
  .wrap:has(>form.shop-layout),
  .wrap:has(>div.shop-layout){
    max-width:min(1760px, 96vw);
  }
  .shop-layout{
    grid-template-columns:220px minmax(0,1fr);
    gap:24px;
  }
}

/* ---- 12. no horizontal scrollbar on a desktop --------------------------
   [Ray, 3 September 2026] "make the Description less wide so that the other
   columns fit without a slide bar at the bottom of the page."

   The Description column is not actually the cause, and it is worth writing
   down so this is not chased again. The table is table-layout:fixed: every
   other column has an explicit width and Description simply takes whatever
   is left, so it can never push another column out. What produced the
   scrollbar is the table's own `min-width:1000px` - a floor put there on
   2 September so the eight columns would not crush each other. Whenever the
   content area is narrower than that floor, the table refuses to shrink and
   .mr-tablewrap scrolls.

   So: above the mobile breakpoint the floor is removed entirely and the
   table is exactly as wide as the space it has - no scrollbar, ever. The
   fixed columns are trimmed by about 40px in total, which goes to
   Description, so removing the floor does not leave it starved on a
   1000-1100px window.

   Below 1181px the floor STAYS. On a phone eight columns genuinely do not
   fit, and scrolling the table inside its own box is the correct answer
   there - section 10 keeps that scroll off the page itself.
   ------------------------------------------------------------------------ */

@media (min-width:1181px){
  body .mr-tablewrap table.mr-parts.mr-catalog,
  body .mr-tablewrap table.mr-parts.mr-results{
    min-width:0;
    width:100%;
  }
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-img,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-img{width:66px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-sku,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-sku{width:168px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-xref,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-xref{width:150px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-doc,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-doc{width:92px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-price,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-price{width:84px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-avail,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-avail{width:120px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-buy,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-buy{width:80px}
}

/* ---- 13. the trademark notice runs across the page, not down it --------
   [Ray, 3 September 2026] "The trademark notice is vertical and should be
   horizontal at the bottom of this page."

   It was not styled vertically - it was in the wrong column.
   microray_trademark_on_archive() in inc/trademarks.php is hooked to
   woocommerce_after_main_content, and on an archive that hook fires INSIDE
   <form class="shop-layout">, which is a two-column grid: 220px of filters
   and the results. The notice therefore became the grid's THIRD item, was
   placed on a new row in column one, and rendered as a 172px-wide ribbon
   1079px tall - the whole notice set in a column the width of the filter
   sidebar.

   Making it span both tracks puts it where it belongs, full width under the
   table. Done in CSS rather than by moving the hook because that hook also
   feeds the product page and the plain shop page, and re-pointing it risks
   the notice disappearing from pages where it is currently correct.

   Scoped to a direct child of .shop-layout that is a <section>, which today
   is only ever this notice - the filters are an <aside> and the results a
   plain <div>.
   ------------------------------------------------------------------------ */

form.shop-layout > section.section,
div.shop-layout > section.section{
  grid-column:1 / -1;
  width:100%;
  max-width:100%;
}
form.shop-layout > section.section .mr-trademark,
div.shop-layout > section.section .mr-trademark{
  width:100%;
  max-width:100%;
}

/* ---- 14. the scrollbar, and a narrower Description ---------------------
   [Ray, 3 September 2026] "remove the slide bar at the bottom... make the
   description less wide." Same on every table view.

   MEASURED, not guessed. Cloning the table into a 1400px box and reading it
   back: the table itself was 1398px and fitted, but the WRAPPER reported a
   scroll width of 1451 against a client width of 1398. Something inside a
   cell was 53px wider than its column, and a fixed-layout table does not
   shrink content - it lets it spill and the wrapper scrolls.

   The culprit is the Qty cell. It holds a 58px number input AND an Add
   button side by side - about 121px of content in an 80px column. Nothing
   to do with Description, which in fixed layout only ever takes what is
   left over and cannot push anything out.

   So: the Qty column gets the width its contents actually need, the form
   inside it is allowed to wrap rather than spill, and Description is given
   an explicit width instead of absorbing everything. At 1400px it now lands
   around 440px rather than 638px, and the row reads as columns rather than
   one wide paragraph with slivers either side.

   Widths are shares, not absolutes: with table-layout:fixed and width:100%,
   spare space is distributed in proportion to these numbers, so they hold
   their relationship at any screen width.
   ------------------------------------------------------------------------ */

@media (min-width:1181px){
  /* 260, not 380. These widths are SHARES: with table-layout:fixed and
     width:100%, spare space is handed out in proportion to them, so a
     column with the largest number also grows the fastest on a wide
     screen. At 380 the Description still reached about 460px on a 1754px
     display; at 260 it lands near 350px and the row reads as columns.
     Lower this number to narrow it further - do not add a max-width, which
     leaves the column wide and the text floating inside it. */
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-desc,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-desc{width:260px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-buy,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-buy{width:140px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-price,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-price{width:90px}
  body .mr-tablewrap table.mr-parts.mr-catalog thead th.c-avail,
  body .mr-tablewrap table.mr-parts.mr-results thead th.c-avail{width:130px}
}

/* The buy control wraps inside its cell instead of spilling out of it.
   This is what actually removes the scrollbar. */
table.mr-parts td.c-buy{ overflow:hidden; }
table.mr-parts td.c-buy form.mr-buy{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0;
  max-width:100%;
}
table.mr-parts td.c-buy .mr-qty{
  width:54px;
  min-width:0;
  flex:0 0 auto;
}
table.mr-parts td.c-buy .btn,
table.mr-parts td.c-buy .button{
  padding:8px 12px;
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
}

/* Nothing in any other cell may spill either - the same fault would show as
   the same scrollbar. Cells whose content can be long are clipped to their
   column; the full value is on the product page. */
body .mr-tablewrap table.mr-parts .mr-blurb{-webkit-line-clamp:2}

table.mr-parts td.c-sku,
table.mr-parts td.c-xref,
table.mr-parts td.c-doc,
table.mr-parts td.c-price,
table.mr-parts td.c-avail{ overflow:hidden; }
table.mr-parts td.c-avail .mto-badge,
table.mr-parts td.c-avail .mr-instock,
table.mr-parts td.c-avail .mr-out{ max-width:100%; }
/* ===== end ============================================================== */