/* Big Mulberry Nursery — plant category pages (shrubs, trees, wildlife-plants, 111-2)
 *
 * Why this file exists:
 * These four pages were recovered from an archived capture in which WP Rocket had
 * inlined a pruned "used CSS" instead of linking the real stylesheets. That pruned
 * copy kept Kadence's generated per-block rules (colours, grid-row-gap, the 16px
 * icon font-size) but dropped the plugin's BASE rules. Consequently:
 *   - the inline <svg> icons carry no width/height and no CSS gave them one, so
 *     they rendered at the browser's default replaced-element size (giant checks);
 *   - "grid-row-gap" had no "display:grid" to attach to, so the plant lists ran
 *     as one long single column.
 * The Kadence icon-list stylesheet is not recoverable (it is absent from the
 * deployment and was never archived), so the base rules are restored here, plus a
 * multi-column layout for the plant lists.
 *
 * Linked only from the four plant pages. Added 2026-08-11.
 */

/* --- Icons: give the inline SVGs an intrinsic size ------------------------ */
.kb-svg-icon-wrap {
  display: inline-flex;
  align-items: center;
}

.kb-svg-icon-wrap > svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* --- Plant lists: lay out in responsive columns --------------------------- */
.wp-block-kadence-iconlist ul.kt-svg-icon-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  column-gap: 28px;
}

/* Kadence's generated CSS puts margin-right:15px on each item, which throws off
   grid columns — the column-gap above replaces it. */
.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin: 0 !important;
  line-height: 1.5;
}

/* Match the icon box to the text line-height so it centres on the first line
   even when a long plant name wraps. */
.wp-block-kadence-iconlist ul.kt-svg-icon-list .kb-svg-icon-wrap {
  height: 1.5em;
}

.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-text {
  min-width: 0;
}