/*
 * CJ product illustrations v2 — prepared locally 2026-09-28.
 * Scope is limited to product icons; generic interface icons remain SVG.
 */

:root {
  --cj-product-sprite: url("/user/documents/upload/cj-guide-product-illustrations-v1-20260912.png");
}

/* Product solution cards only; S = 46 px. */
.howto-solution-card__icon:is([data-how-icon="droplet"], [data-how-icon="cov"], [data-how-icon="tank"], [data-how-icon="septic"], [data-how-icon="rain"], [data-how-icon="waves"], [data-how-icon="pump"], [data-how-icon="gauge"], [data-how-icon="well"]) {
  width: 46px;
  height: 46px;
  background-color: transparent;
  background-image: var(--cj-product-sprite);
  background-repeat: no-repeat;
  background-size: 184px auto;
  background-position: var(--cj-product-x) var(--cj-product-y);
}
.howto-solution-card__icon:is([data-how-icon="droplet"], [data-how-icon="cov"]) { --cj-product-x: 0px; --cj-product-y: -2.15625px; }
.howto-solution-card__icon[data-how-icon="tank"] { --cj-product-x: -46px; --cj-product-y: -2.15625px; }
.howto-solution-card__icon[data-how-icon="septic"] { --cj-product-x: -92px; --cj-product-y: -2.15625px; }
.howto-solution-card__icon[data-how-icon="rain"] { --cj-product-x: -138px; --cj-product-y: -2.15625px; }
.howto-solution-card__icon[data-how-icon="waves"] { --cj-product-x: 0px; --cj-product-y: -57.5px; }
.howto-solution-card__icon[data-how-icon="pump"] { --cj-product-x: -46px; --cj-product-y: -57.5px; }
.howto-solution-card__icon[data-how-icon="gauge"] { --cj-product-x: -92px; --cj-product-y: -57.5px; }
.howto-solution-card__icon[data-how-icon="well"] { --cj-product-x: -138px; --cj-product-y: -57.5px; }
.howto-solution-card__icon:is([data-how-icon="droplet"], [data-how-icon="cov"], [data-how-icon="tank"], [data-how-icon="septic"], [data-how-icon="rain"], [data-how-icon="waves"], [data-how-icon="pump"], [data-how-icon="gauge"], [data-how-icon="well"]) > svg { visibility: hidden; }

/* Wizard product choices only; S = 44 px. */
.howto-option > span:is([data-how-icon="droplet"], [data-how-icon="cov"], [data-how-icon="tank"], [data-how-icon="septic"], [data-how-icon="rain"], [data-how-icon="waves"], [data-how-icon="pump"], [data-how-icon="gauge"], [data-how-icon="well"]) {
  width: 44px;
  height: 44px;
  background-color: transparent;
  background-image: var(--cj-product-sprite);
  background-repeat: no-repeat;
  background-size: 176px auto;
  background-position: var(--cj-product-x) var(--cj-product-y);
}
.howto-option > span:is([data-how-icon="droplet"], [data-how-icon="cov"]) { --cj-product-x: 0px; --cj-product-y: -2.0625px; }
.howto-option > span[data-how-icon="tank"] { --cj-product-x: -44px; --cj-product-y: -2.0625px; }
.howto-option > span[data-how-icon="septic"] { --cj-product-x: -88px; --cj-product-y: -2.0625px; }
.howto-option > span[data-how-icon="rain"] { --cj-product-x: -132px; --cj-product-y: -2.0625px; }
.howto-option > span[data-how-icon="waves"] { --cj-product-x: 0px; --cj-product-y: -55px; }
.howto-option > span[data-how-icon="pump"] { --cj-product-x: -44px; --cj-product-y: -55px; }
.howto-option > span[data-how-icon="gauge"] { --cj-product-x: -88px; --cj-product-y: -55px; }
.howto-option > span[data-how-icon="well"] { --cj-product-x: -132px; --cj-product-y: -55px; }
.howto-option > span:is([data-how-icon="droplet"], [data-how-icon="cov"], [data-how-icon="tank"], [data-how-icon="septic"], [data-how-icon="rain"], [data-how-icon="waves"], [data-how-icon="pump"], [data-how-icon="gauge"], [data-how-icon="well"]) > svg { visibility: hidden; }

/* Direct category SVG only; arrows inside the menu buttons remain untouched. */
.cj-mm-v2__category:is([data-category-index="0"], [data-category-index="1"], [data-category-index="2"], [data-category-index="3"], [data-category-index="4"], [data-category-index="5"]) > svg.cj-mm-v2__icon,
.cj-mm-v2__mobile-category:is([data-category-index="0"], [data-category-index="1"], [data-category-index="2"], [data-category-index="3"], [data-category-index="4"], [data-category-index="5"]) > svg.cj-mm-v2__icon {
  width: 24px;
  height: 24px;
  background-color: transparent;
  background-image: var(--cj-product-sprite);
  background-repeat: no-repeat;
  background-size: 96px auto;
  background-position: var(--cj-product-x) var(--cj-product-y);
}
.cj-mm-v2__category[data-category-index="0"] > svg.cj-mm-v2__icon,
.cj-mm-v2__mobile-category[data-category-index="0"] > svg.cj-mm-v2__icon { --cj-product-x: 0px; --cj-product-y: -1.125px; }
.cj-mm-v2__category[data-category-index="1"] > svg.cj-mm-v2__icon,
.cj-mm-v2__mobile-category[data-category-index="1"] > svg.cj-mm-v2__icon { --cj-product-x: -72px; --cj-product-y: -1.125px; }
.cj-mm-v2__category[data-category-index="2"] > svg.cj-mm-v2__icon,
.cj-mm-v2__mobile-category[data-category-index="2"] > svg.cj-mm-v2__icon { --cj-product-x: -24px; --cj-product-y: -1.125px; }
.cj-mm-v2__category[data-category-index="3"] > svg.cj-mm-v2__icon,
.cj-mm-v2__mobile-category[data-category-index="3"] > svg.cj-mm-v2__icon { --cj-product-x: 0px; --cj-product-y: -30px; }
.cj-mm-v2__category[data-category-index="4"] > svg.cj-mm-v2__icon,
.cj-mm-v2__mobile-category[data-category-index="4"] > svg.cj-mm-v2__icon { --cj-product-x: -48px; --cj-product-y: -1.125px; }
.cj-mm-v2__category[data-category-index="5"] > svg.cj-mm-v2__icon,
.cj-mm-v2__mobile-category[data-category-index="5"] > svg.cj-mm-v2__icon { --cj-product-x: -48px; --cj-product-y: -30px; }
.cj-mm-v2__category:is([data-category-index="0"], [data-category-index="1"], [data-category-index="2"], [data-category-index="3"], [data-category-index="4"], [data-category-index="5"]) > svg.cj-mm-v2__icon > *,
.cj-mm-v2__mobile-category:is([data-category-index="0"], [data-category-index="1"], [data-category-index="2"], [data-category-index="3"], [data-category-index="4"], [data-category-index="5"]) > svg.cj-mm-v2__icon > * { visibility: hidden; }

/* FAQ product illustrations only. */
[data-faq-open-question="faq-choice-solution"] > span[data-faq-icon="tanks"] {
  width: 52px;
  height: 52px;
  background-color: transparent;
  background-image: var(--cj-product-sprite);
  background-repeat: no-repeat;
  background-size: 208px auto;
  background-position: 0px -2.4375px;
}
[data-faq-open-question="faq-choice-solution"] > span[data-faq-icon="tanks"] > svg { visibility: hidden; }

button[data-faq-topic="construction"] > span[data-faq-icon="tank"],
button[data-faq-topic="rainwater"] > span[data-faq-icon="rain"] {
  width: 32px;
  height: 32px;
  background-color: transparent;
  background-image: var(--cj-product-sprite);
  background-repeat: no-repeat;
  background-size: 128px auto;
  background-position: var(--cj-product-x) -1.5px;
}
button[data-faq-topic="construction"] > span[data-faq-icon="tank"] { --cj-product-x: -32px; }
button[data-faq-topic="rainwater"] > span[data-faq-icon="rain"] { --cj-product-x: -96px; }
button[data-faq-topic="construction"] > span[data-faq-icon="tank"] > svg,
button[data-faq-topic="rainwater"] > span[data-faq-icon="rain"] > svg { visibility: hidden; }