/* Blog post body (single.php, templates/page-pretty-content.php), enqueued by inc/blog-content.php
   outside Perfmatters RUCSS. Selectors start with "body" to outweigh the same rules in
   application.css and in the RUCSS used.css copy of it. */

/* application.css draws a separator under <thead> with thead::after { display:inline-table;
   min-width:820px } (290px on mobile). The pseudo-element becomes a table cell, so the first
   column grows to 820px and the other columns end up outside the post. */
body .section-tips-inside-content .section.tips-content .section-main-content table thead::after {
  display: none;
}

body .section-tips-inside-content .section.tips-content .section-main-content table thead tr th {
  border-bottom: 1px solid #D8D8D8;
}

body .section-tips-inside-content .section.tips-content .section-main-content table th,
body .section-tips-inside-content .section.tips-content .section-main-content table tbody tr td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

/* Wide tables scroll inside the post instead of pushing the page sideways on a phone. */
body .section-tips-inside-content .section-main-content figure.wp-block-table {
  overflow-x: auto;
}

/* Product grid (woocommerce/handpicked-products): the card image is 610px wide by its
   width attribute, and wc-blocks.css arrives after first paint. */
body .section-tips-inside-content .section-main-content .wc-block-grid__product-image img {
  max-width: 100%;
  height: auto;
}