/*
 * Category colour palette — single source of truth.
 *
 * Each category slug maps to ONE background value (solid or gradient) via a
 * custom property, plus an optional foreground override for light swatches.
 * Both the filter checkbox swatch (.epg-filter-term-swatch) and the per-
 * product "Details" element (.sc-av-details / [data-primary-cat]) read from
 * these variables, so adding a category is a one-line change here — no
 * duplicated rule pairs, no sibling-selector gymnastics.
 *
 * TO ADD A CATEGORY
 * ─────────────────
 *   1. Add --epg-cat-{slug} (and --epg-cat-{slug}-fg if the background is
 *      light and needs dark text) to the :root-level block below.
 *   2. Add the two mapping lines in the "Apply" sections (swatch + details),
 *      or rely on the [data-primary-cat="{slug}"] attribute mapping already
 *      generated below.
 *
 * Ported from the Bionnovation Search & Filter Pro styles, de-duplicated and
 * corrected (the old "accessories" rule pointed at growth-factors::after).
 */

.epg-filters,
.product-grid-wrapper {
  /* Solids */
  --epg-cat-membranes:            #00b6a5;
  --epg-cat-matrices:             #e5007d;
  --epg-cat-bone-harvesting:      #8945c1;
  --epg-cat-growth-factors:       #832937;
  --epg-cat-accessories:          #cccccc;
  --epg-cat-3d-titanium-scaffold: #ffed00;
  --epg-cat-combination-products: var(--dk-blue);

  /* Gradients */
  --epg-cat-bone-substitutes:     linear-gradient(45deg, rgba(0,182,165,1) 0%, rgba(0,155,250,1) 100%);
  --epg-cat-membrane-fixation:    linear-gradient(45deg, rgba(255,237,0,1) 0%, rgba(0,182,165,1) 100%);
  --epg-cat-rpm-reinforced-ptfe-mesh: linear-gradient(45deg, rgba(239,124,0,1) 10%, rgba(229,0,125,1) 90%);

  /* Foreground overrides for light backgrounds (default is #fff). */
  --epg-cat-membrane-fixation-fg:    var(--dk-blue);
  --epg-cat-3d-titanium-scaffold-fg: var(--dk-blue);
  --epg-cat-combination-products-fg: #fff;

  /* Fallback for any category without a defined colour. */
  --epg-cat-default:    #cccccc;
  --epg-cat-default-fg: #fff;
}

/* ──────────────────────────────────────────────────────────────────────────
 * FILTER CHECKBOX SWATCHES
 * The swatch is a small element before the term name whose colour is the
 * category colour; on check it shows a checkmark. Only product_cat terms get
 * a coloured swatch (treatment-solution has no colour mapping), so swatches
 * default to hidden and are turned on per known slug.
 * ────────────────────────────────────────────────────────────────────────── */

.epg-filter-term-swatch {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: .25rem;
  border: solid 1px #555;
  box-shadow: 0 0.09rem 0.125rem rgba(0, 0, 0, .2);
  /* Dashicons checkmark, hidden until the box is checked. */
  font-family: dashicons;
  font-size: 1.3rem;
  line-height: 1rem;
  text-align: center;
  color: transparent;
  background: #fff;
  display: block;
}

.epg-filter-term-swatch::before {
  left: -.2rem;
  position: relative;
  top: -.05rem;
}

/* Show + colour the swatch for each mapped category. */
.epg-filter-term[data-taxonomy="product_cat"][data-term="membranes"]            .epg-filter-term-swatch { background: var(--epg-cat-membranes); }
.epg-filter-term[data-taxonomy="product_cat"][data-term="matrices"]             .epg-filter-term-swatch { background: var(--epg-cat-matrices); }
.epg-filter-term[data-taxonomy="product_cat"][data-term="bone-harvesting"]      .epg-filter-term-swatch { background: var(--epg-cat-bone-harvesting); }
.epg-filter-term[data-taxonomy="product_cat"][data-term="growth-factors"]       .epg-filter-term-swatch { background: var(--epg-cat-growth-factors); }
.epg-filter-term[data-taxonomy="product_cat"][data-term="accessories"]          .epg-filter-term-swatch { background: var(--epg-cat-accessories); }
.epg-filter-term[data-taxonomy="product_cat"][data-term="3d-titanium-scaffold"] .epg-filter-term-swatch { background: var(--epg-cat-3d-titanium-scaffold); }
.epg-filter-term[data-taxonomy="product_cat"][data-term="combination-products"] .epg-filter-term-swatch { background: var(--epg-cat-combination-products); }
.epg-filter-term[data-taxonomy="product_cat"][data-term="bone-substitutes"]     .epg-filter-term-swatch { background: var(--epg-cat-bone-substitutes); }
.epg-filter-term[data-taxonomy="product_cat"][data-term="membrane-fixation"]    .epg-filter-term-swatch { background: var(--epg-cat-membrane-fixation); }
.epg-filter-term[data-taxonomy="product_cat"][data-term="rpm-reinforced-ptfe-mesh"] .epg-filter-term-swatch { background: var(--epg-cat-rpm-reinforced-ptfe-mesh); }


/* Checkmark appears in the swatch when the box is checked. */
.epg-filter-term[data-taxonomy="treatment-solution"] .epg-filter-term-swatch::before {
  content: "\f147"; /* dashicons "yes" checkmark */
  opacity: 0;
  color: var(--blue);
}
.epg-filter-term[data-taxonomy="treatment-solution"] .epg-filter-checkbox:checked ~ .epg-filter-term-swatch::before {
  opacity: 1;
}

/* Checkmark appears in the swatch when the box is checked. */
.epg-filter-term[data-taxonomy="product_cat"] .epg-filter-term-swatch::before {
  content: "\f147"; /* dashicons "yes" checkmark */
  opacity: 0;
  color: #fff;
}
.epg-filter-term[data-taxonomy="product_cat"] .epg-filter-checkbox:checked ~ .epg-filter-term-swatch::before {
  opacity: 1;
}
/* Dark checkmark on light swatches. */
.epg-filter-term[data-taxonomy="product_cat"][data-term="membrane-fixation"]    .epg-filter-term-swatch::before,
.epg-filter-term[data-taxonomy="product_cat"][data-term="3d-titanium-scaffold"] .epg-filter-term-swatch::before {
  color: var(--dk-blue);
}

/* Hide the native checkbox for product_cat — the swatch is the control. */
.epg-filter-term[data-taxonomy="product_cat"] .epg-filter-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.epg-filter-term[data-taxonomy="product_cat"] .epg-filter-term-label {
  cursor: pointer;
}

/* ───────────────────────────────────────────────────────────────────────────────
 * PER-PRODUCT "DETAILS" BADGE
 * The Details badge is `.product h2 a::after` (see variation-selector
 * style.css). Its colour comes from the product's primary category.
 *
 * We key off data-primary-cat on the .sc-av-wrap (emitted by the variation-
 * selector block's render.php — always present in every card). The wrap is a
 * sibling of the title inside the card, so we reach the badge from their
 * common ancestor using :has(). This needs no PHP class-stamping and doesn't
 * depend on the item <li>'s classes, which differ between the core Query Loop
 * and Product Collection blocks.
 *
 * "Card" = the common ancestor of the title and the .sc-av-wrap. We match a
 * few likely wrappers so it works regardless of what you grouped them in:
 *   li.wp-block-post  — core Query Loop item
 *   li.product        — WooCommerce loop item
 *   .wp-block-group    — if you wrapped the card contents in a Group
 * Adjust the ancestor list if your card uses a different container.
 *
 * The optional `.sc-av-details` element is also supported for any custom
 * per-card accent you add inside the Product Template.
 * ────────────────────────────────────────────────────────────────────────────── */

/* Common-ancestor selector fragment, repeated per category below.
 * Card candidates: li.wp-block-post, li.product, .wp-block-group. */

.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="membranes"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="membranes"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="membranes"] .sc-av-details { background: var(--epg-cat-membranes); }
.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="matrices"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="matrices"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="matrices"] .sc-av-details { background: var(--epg-cat-matrices); }
.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="bone-harvesting"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="bone-harvesting"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="bone-harvesting"] .sc-av-details { background: var(--epg-cat-bone-harvesting); }
.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="growth-factors"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="growth-factors"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="growth-factors"] .sc-av-details { background: var(--epg-cat-growth-factors); color: #fff; }
.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="accessories"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="accessories"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="accessories"] .sc-av-details { background: var(--epg-cat-accessories); }
.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="bone-substitutes"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="bone-substitutes"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="bone-substitutes"] .sc-av-details { background: var(--epg-cat-bone-substitutes); }
.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="rpm-reinforced-ptfe-mesh"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="rpm-reinforced-ptfe-mesh"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="rpm-reinforced-ptfe-mesh"] .sc-av-details { background: var(--epg-cat-rpm-reinforced-ptfe-mesh); }
.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="3d-titanium-scaffold"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="3d-titanium-scaffold"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="3d-titanium-scaffold"] .sc-av-details {
  background: var(--epg-cat-3d-titanium-scaffold);
  color: var(--epg-cat-3d-titanium-scaffold-fg);
}
.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="membrane-fixation"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="membrane-fixation"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="membrane-fixation"] .sc-av-details {
  background: var(--epg-cat-membrane-fixation);
  color: var(--epg-cat-membrane-fixation-fg);
}
.product-grid-wrapper li:has(.sc-av-wrap[data-primary-cat="combination-products"]) h2 a::after,
.product-grid-wrapper .wp-block-group:has(.sc-av-wrap[data-primary-cat="combination-products"]) h2 a::after,
.product-grid-wrapper [data-primary-cat="combination-products"] .sc-av-details {
  background: var(--epg-cat-combination-products);
  color: var(--epg-cat-combination-products-fg);
}