/* ── Health Solutions category icons ──────────────────────────────────
   The PNGs carry their own purple disc, so nothing here paints a circle —
   each wrapper just sets the box the artwork fills. */

.hs-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Home page cards. .btn-icon-custom (style.css) draws a purple circle with a
   grey halo for icon-font glyphs; both would sit behind the artwork. */
.listcard .btn-icon-custom {
  margin: 0;
  box-shadow: none;
  background-color: transparent;
}

/* Sidebar lists on health-solutions.php and ingredient-single.php.
   These rules replace the per-<li> inline styles the markup used to carry. */
.hs-categories li,
.ingredient-categories li {
  display: flex;
  align-items: center;
}

.hs-categories li a,
.ingredient-categories li a {
  flex: 1;
}

.hs-sidebar-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin-right: 10px;
}

/* Header mega-menu. layout-header.css gives .hs-cat-icon a pale rounded tile
   sized for a 28px glyph; the artwork brings its own disc, so drop the tile
   and let it fill the 42px box instead. */
.hs-cat-icon {
  background: transparent;
  border-radius: 0;
}

.hs-cat-icon .hs-icon {
  width: 42px;
  height: 42px;
}