/*
 * The listing's machine and range cards, tighter (Keian, 4 Oct 2026: "each
 * product card takes up so much more room than needed"). Same information;
 * less padding, tighter spec rows, the photo area sized to the photo, the
 * hire and purchase bars side by side where both show, and on phones the
 * photo beside the details instead of above them.
 *
 * Keyed to the card's own markup (.product-section .main_box, the theme's
 * listing card, which Astro's StockGridSSR and ProductCard reproduce), so the
 * same block tightens the WordPress listing templates too (SEO Work installs
 * it there). !important where the theme sets the value inline (the details
 * column's min-height) or with !important itself.
 */
/* The theme lays cards out lazily (content-visibility: auto) with a 320 px
   placeholder; the placeholder follows the tighter card, so the page does not
   jump as cards come into view. */
body .product-section .single_product_html > .main_box { margin-bottom: 12px; contain-intrinsic-size: auto 210px; }
body .product-section .single_product_html .main_box > .row > a { align-items: stretch; }

/* The photo (Keian, 4 Oct): "fit the image in the available space, but no
   purposeful margin". The photo area keeps the card's design size (its half of
   the card, the card's height); the whole photo is fitted inside it, centred,
   never cropped, with no padding, so the only gap is what the photo's own
   shape leaves. */
body .product-section .single_product_html .main_box .image-box {
  position: relative; display: block; align-self: stretch; overflow: hidden;
  height: auto !important; min-height: 186px !important; padding: 0 !important; margin: 0 !important; background: #fff;
}
body .product-section .single_product_html .main_box .image-box .product-image {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center;
}

/* The details: no 280 px floor; less air around the title and rows. */
body .product-section .single_product_html .main_box .description-box {
  min-height: 0 !important; padding: 8px 0 0 !important;
}
body .product-section .single_product_html .main_box .description-box h3 {
  font-size: 16px !important; line-height: 1.25; padding: 0 !important; margin: 0 10px 4px !important;
}
body .product-section .single_product_html .main_box .modals_box { margin: 0 10px 8px !important; }
body .product-section .single_product_html .main_box .modals_box .headings,
body .product-section .single_product_html .main_box .modals_box .headings-1 { padding: 1px 0 !important; }
body .product-section .single_product_html .main_box .modals_box .headings strong { font-size: 13px; }
body .product-section .single_product_html .main_box .modals_box .headings-1 p { font-size: 13px !important; line-height: 1.35 !important; margin: 0; }

/* The price bars stay as live prints them (24 px, 36 px tall; 16 px on a
   phone): the card is tightened by its white space, not its prices (Keian). */

/* Phones: two cards a row, photo above details (as the home page's 2x2;
   Keian, 4 Oct). */
/* The theme lays the list out as a grid below 992 px with every row as tall as
   its tallest card (grid-auto-rows: 1fr); rows follow their own cards. */
@media (max-width: 991.98px) {
  body .product-section .single_product_html { grid-auto-rows: auto !important; }
}
@media (max-width: 767px) {
  body .product-section .single_product_html { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body .product-section .single_product_html > .main_box {
    flex: none !important; max-width: 100% !important; width: auto !important; min-width: 0;
    margin: 0 !important; contain-intrinsic-size: auto 260px;
  }
  /* The phone listing's "Total Results 376" line, smaller. */
  body .filter_section .total_posts_count { font-size: 20px !important; line-height: 1.2 !important; margin: 4px 0 8px !important; }
  body .product-section .single_product_html .main_box > .row { margin: 0 !important; height: 100%; }
  body .product-section .single_product_html .main_box > .row > a { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; }
  body .product-section .single_product_html .main_box .image-box { flex: none !important; max-width: 100% !important; width: 100% !important; height: 122px !important; min-height: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
  body .product-section .single_product_html .main_box .image-box .product-image { max-height: none !important; }
  body .product-section .single_product_html .main_box .description-box { flex: 1 1 auto !important; max-width: 100% !important; width: 100% !important; padding-top: 2px !important; box-sizing: border-box !important; }
  body .product-section .single_product_html .main_box .description-box h3 { text-align: left !important; font-size: 13.5px !important; margin: 0 6px 3px !important; overflow-wrap: anywhere; }
  body .product-section .single_product_html .main_box .modals_box { margin: 0 6px 6px !important; }
  body .product-section .single_product_html .main_box .modals_box .headings { width: 44% !important; max-width: 44% !important; flex: 0 0 44% !important; text-align: left !important; padding: 0 4px 0 0 !important; }
  body .product-section .single_product_html .main_box .modals_box .headings-1 { width: 56% !important; max-width: 56% !important; flex: 0 0 56% !important; text-align: left !important; padding: 0 !important; }
  body .product-section .single_product_html .main_box .modals_box .headings strong,
  body .product-section .single_product_html .main_box .modals_box .headings-1 p { font-size: 11.5px !important; line-height: 1.3 !important; }
}

/* Above the list: the section's top margin, the title's gap and the finder
   line's padding (Keian: "white space above the list"), so the first row of
   cards starts close under the finder line. */
body .filter_section.pro-cat-single-product { margin-top: 8px !important; }
body .filter_section .acl-page-title { margin-bottom: 6px !important; }
body .filter_section .acl-finder__in { padding: 6px 0 10px !important; }
body .filter_section .acl-finder__btn { padding: 7px 18px !important; }
/* The card link's screen-reader note ("opens in a new tab") takes no room in
   the row (on phones it pushed the details under the photo). */
body .product-section .single_product_html .main_box > .row > a > .acl-mc-sr { position: absolute !important; }