/*
 * Colour materials: visual polish overlay (Claude, UI/UX pass).
 *
 * Presentation only. Load AFTER colour-effects-design.css on the colour/effects
 * taxonomy routes (body.em26-category--colour-effects). No markup, copy, URL,
 * SEO or WooCommerce data is touched. Codex may append this file to
 * colour-effects-design.css or enqueue it after it.
 */

body.em26-category--colour-effects,
body.em26-product--colour-effects {
  --em26c-gutter: clamp(1rem, 4vw, 2.5rem);
  /* same values as colour-effects-design.css, repeated so this file stands alone */
  --em26c-sunk: #efebe1;
  --em26c-shadow: 0 1px 2px rgba(22, 53, 61, 0.06), 0 8px 24px rgba(22, 53, 61, 0.07);
  --em26c-shadow-up: 0 2px 4px rgba(22, 53, 61, 0.08), 0 14px 32px rgba(22, 53, 61, 0.12);
  --em26c-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- foundation: centred container, gutters, breadcrumb ---------- */

body.em26-category--colour-effects .em26-woo-surface--category {
  box-sizing: border-box;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--em26c-gutter);
  padding-block-end: clamp(3rem, 6vw, 5rem);
}

body.em26-category--colour-effects .em26-woocommerce-breadcrumb {
  margin: 0;
  padding: 1.25rem 0 1.5rem;
  color: var(--em26-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

body.em26-category--colour-effects .em26-woocommerce-breadcrumb a {
  color: var(--em26-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.em26-category--colour-effects .em26-woocommerce-breadcrumb a:hover {
  color: var(--em26-cobalt);
}

body.em26-category--colour-effects :focus-visible {
  outline: 3px solid var(--em26-cobalt);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- hero: same type rhythm as the resin category ---------- */

body.em26-category--colour-effects .em26-category-hero--colour-effects {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 4px solid var(--em26-turquoise);
}

body.em26-category--colour-effects .em26-eyebrow,
body.em26-category--colour-effects .em26-section-heading .em26-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  color: #0b6e6e;
  font-family: var(--em26-font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body.em26-category--colour-effects .em26-eyebrow::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--em26-turquoise);
}

body.em26-category--colour-effects .em26-category-hero--colour-effects h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}

body.em26-category--colour-effects .em26-category-hero__lead {
  max-width: 50ch;
  margin: 1.1rem 0 0;
  color: var(--em26-muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
}

/* ---------- route and guide cards: quiet links, one hover state ---------- */

body.em26-category--colour-effects .em26-colour-route,
body.em26-category--colour-effects .em26-colour-guide__grid a,
body.em26-category--colour-effects .em26-colour-landing__options a {
  text-decoration: none;
}

body.em26-category--colour-effects .em26-colour-route strong,
body.em26-category--colour-effects .em26-colour-route small,
body.em26-category--colour-effects .em26-colour-guide__grid a * {
  text-decoration: none;
}

body.em26-category--colour-effects .em26-colour-route:hover strong,
body.em26-category--colour-effects .em26-colour-route:focus-visible strong {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--em26-turquoise);
}

body.em26-category--colour-effects .em26-colour-guide__grid a:hover strong,
body.em26-category--colour-effects .em26-colour-guide__grid a:focus-visible strong,
body.em26-category--colour-effects .em26-colour-guide__grid a:hover b,
body.em26-category--colour-effects .em26-colour-guide__grid a:focus-visible b {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- photo tiles of the sub-categories ---------- */

body.em26-category--colour-effects ul.products:has(> li.product-category) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem !important;
  margin-top: 0.5rem !important;
}

body.em26-category--colour-effects li.product-category {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--em26-border);
  border-top: 4px solid var(--em26-turquoise);
  border-radius: var(--em26-radius-card);
  background: var(--em26-surface);
  box-shadow: var(--em26c-shadow);
  transition: transform 0.2s var(--em26c-ease), box-shadow 0.2s var(--em26c-ease);
}

body.em26-category--colour-effects li.product-category:nth-child(3n + 2) { border-top-color: var(--em26-cobalt); }
body.em26-category--colour-effects li.product-category:nth-child(3n) { border-top-color: var(--em26-magenta); }

body.em26-category--colour-effects li.product-category:hover {
  transform: translateY(-3px);
  box-shadow: var(--em26c-shadow-up);
}

body.em26-category--colour-effects li.product-category > a {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  color: var(--em26-ink);
  text-decoration: none;
}

@media (min-width: 62.01rem) {
  body.em26-category--colour-effects ul.products:has(> li.product-category) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.875rem !important;
  }
}

body.em26-category--colour-effects li.product-category img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover;
  border-bottom: 1px solid var(--em26-border);
  background: #fff;
  transition: transform 0.35s var(--em26c-ease);
}

body.em26-category--colour-effects li.product-category:hover img {
  transform: scale(1.03);
}

body.em26-category--colour-effects li.product-category .woocommerce-loop-category__title {
  margin: 0;
  padding: 0.85rem 3.5rem 1rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

body.em26-category--colour-effects li.product-category > a::after {
  content: "→";
  position: absolute;
  right: 0.9rem;
  bottom: 0.8rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--em26-cobalt) 12%, var(--em26-surface));
  color: var(--em26-cobalt);
  transition: background 0.2s, color 0.2s, transform 0.2s var(--em26c-ease);
}

body.em26-category--colour-effects li.product-category:hover > a::after {
  background: var(--em26-cobalt);
  color: #fff;
  transform: translate(2px, -2px);
}

/* ---------- editorial text under the products ---------- */

body.em26-category--colour-effects .em26-category-editorial {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 4px solid var(--em26-turquoise);
  background: transparent;
}

body.em26-category--colour-effects .em26-category-editorial__inner {
  max-width: 46rem;
  margin: 0;
  padding: 0;
}

body.em26-category--colour-effects .em26-category-editorial__inner :where(p, li) {
  font-size: 1.0625rem;
  line-height: 1.62;
}

body.em26-category--colour-effects .em26-category-editorial__inner :where(p) {
  margin: 0 0 0.9rem;
}

body.em26-category--colour-effects .em26-category-editorial__inner :where(h2) {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

body.em26-category--colour-effects .em26-category-editorial__inner :where(h3, h4) {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.em26-category--colour-effects .em26-category-editorial__inner > :first-child:where(h2, h3, h4) {
  margin-top: 0;
}

body.em26-category--colour-effects .em26-category-editorial__inner :where(ul, ol) {
  margin: 0 0 1.1rem;
  padding-left: 1.25rem;
}

body.em26-category--colour-effects .em26-category-editorial__inner :where(li) {
  margin-bottom: 0.35rem;
}

body.em26-category--colour-effects .em26-category-editorial__inner :where(li)::marker {
  color: var(--em26-cobalt);
}

body.em26-category--colour-effects .em26-category-editorial__inner :where(a) {
  color: var(--em26-cobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.em26-category--colour-effects .em26-category-editorial__inner :where(table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  body.em26-category--colour-effects li.product-category,
  body.em26-category--colour-effects li.product-category img,
  body.em26-category--colour-effects li.product-category > a::after {
    transition: none;
  }
}

/* ---------- hero decoration: ink blooms in the logo colours (mixing colour into resin) ---------- */

body.em26-category--colour-effects .em26-category-hero--colour-effects::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: min(40rem, 58%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 340'%3E%3Cdefs%3E%3Cfilter id='f' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3CradialGradient id='g0' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%231D5DBB' stop-opacity='0.75'/%3E%3Cstop offset='.6' stop-color='%231D5DBB' stop-opacity='0.50'/%3E%3Cstop offset='1' stop-color='%231D5DBB' stop-opacity='0.17'/%3E%3C/radialGradient%3E%3CradialGradient id='g1' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%23129A9A' stop-opacity='0.75'/%3E%3Cstop offset='.6' stop-color='%23129A9A' stop-opacity='0.50'/%3E%3Cstop offset='1' stop-color='%23129A9A' stop-opacity='0.17'/%3E%3C/radialGradient%3E%3CradialGradient id='g2' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%23F2B632' stop-opacity='0.87'/%3E%3Cstop offset='.6' stop-color='%23F2B632' stop-opacity='0.62'/%3E%3Cstop offset='1' stop-color='%23F2B632' stop-opacity='0.22'/%3E%3C/radialGradient%3E%3CradialGradient id='g3' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%23B31368' stop-opacity='0.73'/%3E%3Cstop offset='.6' stop-color='%23B31368' stop-opacity='0.48'/%3E%3Cstop offset='1' stop-color='%23B31368' stop-opacity='0.17'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='330' cy='160' r='112' fill='url(%23g0)' filter='url(%23f)'/%3E%3Ccircle cx='335.6' cy='165.6' r='91.83999999999999' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2.2'/%3E%3Cpath d='M268.4 117.4 A76.2 76.2 0 0 1 314.3 83.8' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='470' cy='110' r='92' fill='url(%23g1)' filter='url(%23f)'/%3E%3Ccircle cx='474.6' cy='114.6' r='75.44' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2.2'/%3E%3Cpath d='M419.4 75.0 A62.6 62.6 0 0 1 457.1 47.4' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='455' cy='225' r='88' fill='url(%23g2)' filter='url(%23f)'/%3E%3Ccircle cx='459.4' cy='229.4' r='72.16' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2.2'/%3E%3Cpath d='M406.6 191.6 A59.8 59.8 0 0 1 442.7 165.2' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='560' cy='175' r='64' fill='url(%23g3)' filter='url(%23f)'/%3E%3Ccircle cx='563.2' cy='178.2' r='52.48' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2.2'/%3E%3Cpath d='M524.8 150.7 A43.5 43.5 0 0 1 551.0 131.5' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='352' cy='252' r='11' fill='%2316353D' fill-opacity='.85'/%3E%3Ccircle cx='348.7' cy='248.7' r='3.1' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='585' cy='98' r='9' fill='%231D5DBB' fill-opacity='.85'/%3E%3Ccircle cx='582.3' cy='95.3' r='2.5' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='395' cy='60' r='8' fill='%23F2B632' fill-opacity='.85'/%3E%3Ccircle cx='392.6' cy='57.6' r='2.2' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='603' cy='262' r='10' fill='%23129A9A' fill-opacity='.85'/%3E%3Ccircle cx='600.0' cy='259.0' r='2.8' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E") no-repeat right center / contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40%);
  pointer-events: none;
}

/* The decorative glyph plate duplicates the blooms above; it carries no content (aria-hidden). */


/* ---------- landing under the sub-category hero: one clear heading level below the H1 ---------- */

body.em26-category--colour-effects .em26-colour-landing__header h2 {
  max-width: 24ch;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ---------- responsive ---------- */

@media (max-width: 62rem) {
  body.em26-category--colour-effects ul.products:has(> li.product-category) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  body.em26-category--colour-effects ul.products:has(> li.product-category) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* keep body copy readable: blooms become a faint wash behind the headline */
  body.em26-category--colour-effects .em26-category-hero--colour-effects::before {
    width: 100%;
    opacity: 0.32;
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 75%);
    mask-image: linear-gradient(180deg, #000 0, transparent 75%);
    background-position: right top;
  }
}

/* listing pages put breadcrumb, intro, count and sorting in one grid, like the resin sub-categories */
body.em26-category--colour-effects .em26-woo-surface--category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
}

body.em26-category--colour-effects .em26-woo-surface--category > * {
  grid-column: 1 / -1;
  min-width: 0;
}

body.em26-category--colour-effects h1.page-title {
  max-width: 18ch;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

body.em26-category--colour-effects .term-description {
  max-width: 62ch;
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}

body.em26-category--colour-effects .term-description :where(p) {
  margin: 0 0 0.75rem;
}

/* ---------- product listing pages (3rd level): cards, sorting, sale flag ----------
 * Needs body.em26-category--colour-effects on these terms; see colour-effects-notes.md. */

body.em26-category--colour-effects .woocommerce-result-count {
  grid-column: 1 !important;
  margin: 0 0 1rem;
  color: var(--em26-muted);
  font-family: var(--em26-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
}

body.em26-category--colour-effects .woocommerce-ordering {
  grid-column: 2 !important;
  margin: 0 0 1rem;
}

body.em26-category--colour-effects .woocommerce-ordering select {
  min-height: 2.75rem;
  padding-inline: 0.85rem 2rem;
  border: 1.5px solid var(--em26-border);
  border-radius: var(--em26-radius-control);
  background-color: var(--em26-surface);
  color: var(--em26-ink);
  font: 600 0.9375rem var(--em26-font-sans);
}

body.em26-category--colour-effects ul.products:not(:has(> li.product-category)) {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem !important;
  margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

body.em26-category--colour-effects li.product:not(.product-category) {
  position: relative;
  display: flex !important;
  flex-direction: column;
  padding: 0.75rem !important;
  border: 1px solid var(--em26-border);
  border-top: 4px solid var(--em26-cobalt);
  border-radius: var(--em26-radius-card);
  background: var(--em26-surface);
  box-shadow: var(--em26c-shadow);
  overflow: visible;
  transition: transform 0.2s var(--em26c-ease), box-shadow 0.2s var(--em26c-ease);
}

body.em26-category--colour-effects li.product:not(.product-category):hover {
  transform: translateY(-3px);
  box-shadow: var(--em26c-shadow-up);
}

body.em26-category--colour-effects li.product:not(.product-category) > a.woocommerce-LoopProduct-link {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--em26-surface), var(--em26c-sunk));
}

body.em26-category--colour-effects li.product:not(.product-category) img {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0.5rem;
  object-fit: contain;
  background: transparent;
  transition: transform 0.35s var(--em26c-ease);
}

body.em26-category--colour-effects li.product:not(.product-category):hover img {
  transform: scale(1.04);
}

body.em26-category--colour-effects li.product:not(.product-category) .woocommerce-loop-product__title {
  min-height: 3.9em;
  margin: 0.9rem 0.25rem 0.5rem;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

body.em26-category--colour-effects li.product:not(.product-category) .woocommerce-loop-product__title a {
  color: var(--em26-ink);
  text-decoration: none;
}

body.em26-category--colour-effects li.product:not(.product-category) .price {
  margin: auto 0.25rem 0;
  color: var(--em26-ink) !important;
  font-size: 1.375rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

body.em26-category--colour-effects li.product:not(.product-category) .price ins {
  background: transparent;
  text-decoration: none;
}

body.em26-category--colour-effects li.product:not(.product-category) .price del {
  color: var(--em26-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

/* actions: one primary style, a quiet outline for "notify me" */
body.em26-category--colour-effects li.product:not(.product-category) a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  margin: 1rem 0 0;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--em26-radius-control);
  background: var(--em26-magenta);
  color: #fff;
  font: 800 1rem/1.2 var(--em26-font-sans);
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

body.em26-category--colour-effects li.product:not(.product-category) a.button:hover {
  background: var(--em26-ink);
  color: #fff;
  transform: translateY(-1px);
}

body.em26-category--colour-effects li.product:not(.product-category) a.button.product_type_variable:not(.add_to_cart_button) {
  background: transparent;
  color: var(--em26-ink);
  box-shadow: inset 0 0 0 1.5px var(--em26-ink);
}

body.em26-category--colour-effects li.product:not(.product-category) a.button.product_type_variable:not(.add_to_cart_button):hover {
  background: var(--em26-ink);
  color: #fff;
}

/* EM-03: colour-effects-design.css forces `background: ink !important` on every card button, so the
 * outline "notify me" button (variable products) became ink text on an ink fill and only showed on hover.
 * The same quiet outline now applies to every card button without add-to-cart (variable or simple). */
body.em26-category--colour-effects li.product:not(.product-category) a.button:not(.add_to_cart_button) {
  background: transparent !important;
  color: var(--em26-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--em26-ink);
}

body.em26-category--colour-effects li.product:not(.product-category) a.button:not(.add_to_cart_button):is(:hover, :focus-visible) {
  background: var(--em26-ink) !important;
  color: #fff !important;
}

/* sale flag: a small magenta tag inside the card, top-left (one rule set for
 * cards and the product page; the word itself comes from WooCommerce) */
body.em26-category--colour-effects .onsale {
  position: absolute !important;
  top: 1.15rem !important;
  left: 1.15rem !important;
  right: auto !important;
  z-index: 3;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: calc(100% - 2.3rem);
  margin: 0 !important;
  padding: 0.45rem 0.65rem !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--em26-magenta) !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 700 0.8125rem/1 var(--em26-font-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow: hidden;
}

body.em26-category--colour-effects .onsale::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--em26-saffron);
}

/* one glint when the card appears, no loop */
body.em26-category--colour-effects .onsale::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: em26c-glint 1.2s 0.6s 1 ease-out forwards;
}

@keyframes em26c-glint {
  to { transform: translateX(120%); }
}


/* ---------- product page (body.em26-product--colour-effects) ---------- */

/* centred container, like the resin product page (colour-product-design.css had none) */
body.em26-product--colour-effects .em26-woo-surface--product {
  box-sizing: border-box;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--em26c-gutter);
  padding-block-end: clamp(3rem, 6vw, 5rem);
}

body.em26-product--colour-effects .em26-woocommerce-breadcrumb {
  padding: 1.25rem 0 0;
}

/* A sticky grid item is bounded by the whole grid, not by its row, so the gallery rode over the
   description. Full-width blocks below the buy area sit above it on an opaque paper layer. */
body.em26-product--colour-effects div.product > .woocommerce-tabs,
body.em26-product--colour-effects div.product > .related,
body.em26-product--colour-effects div.product > .upsells {
  position: relative;
  z-index: 3;
  background: var(--em26-paper, #f7f4ec);
}

/* 40 colour swatches: tighter spacing so a row holds five instead of four */
body.em26-product--colour-effects .summary .iconic-was-swatches {
  gap: 0.375rem !important;
}

body.em26-product--colour-effects .summary .iconic-was-swatches .iconic-was-swatches__item {
  margin: 0 !important;
}

/* =====================================================================
 * Collection cards: colour plate instead of the cut-off 4px top rule.
 * Colour = material type (magenta dense colour, cobalt transparent, saffron pigments,
 * turquoise effects, ink alcohol inks, cobalt-to-magenta sets). Unknown slugs cycle
 * through the same five tokens. Presentation only: no markup, copy, URL or data change.
 * WooCommerce (unlayered, higher specificity) zeroed the title padding, so the title rules below carry
 * body.woocommerce + ul.products to win without !important. The title row is now a flex row (title + count chip + arrow) so the arrow can no longer
 * sit on top of the text.
 * ===================================================================== */

body.em26-category--colour-effects li.product-category {
  --c: var(--em26-turquoise);
  --on: var(--em26-ink);
  border-top: 1px solid var(--em26-border);
}
body.em26-category--colour-effects li.product-category:nth-child(5n + 1) { --c: var(--em26-magenta); --on: #fff; }
body.em26-category--colour-effects li.product-category:nth-child(5n + 2) { --c: var(--em26-cobalt); --on: #fff; }
body.em26-category--colour-effects li.product-category:nth-child(5n + 3) { --c: var(--em26-saffron); --on: var(--em26-ink); }
body.em26-category--colour-effects li.product-category:nth-child(5n + 4) { --c: var(--em26-turquoise); --on: var(--em26-ink); }
body.em26-category--colour-effects li.product-category:nth-child(5n)     { --c: var(--em26-ink); --on: var(--em26-paper); }

/* slug-based colour keeps a material the same colour wherever it is listed (children inherit it through the parent path).
   Match whole path segments: "barvnyky-i-pigmenty" itself contains "pigment" and must not colour every card. */
body.em26-category--colour-effects li.product-category:has(> a[href*="/shhilni-koler-pasty-colorfun"]) { --c: var(--em26-magenta); --on: #fff; }
body.em26-category--colour-effects li.product-category:has(> a[href*="/prozori-tonery"]) { --c: var(--em26-cobalt); --on: #fff; }
body.em26-category--colour-effects li.product-category:has(> a[href*="/suhi-blyskuchi-pigmenty"]) { --c: var(--em26-saffron); --on: var(--em26-ink); }
body.em26-category--colour-effects li.product-category:has(> a[href*="/poroshok-dlya-hvyl"]) { --c: var(--em26-turquoise); --on: var(--em26-ink); }
body.em26-category--colour-effects li.product-category:has(> a[href*="/spyrtovi-chornyla"]) { --c: var(--em26-ink); --on: var(--em26-paper); }
body.em26-category--colour-effects li.product-category:has(> a[href*="/sety"]) { --c: var(--em26-cobalt); --on: #fff; }

body.em26-category--colour-effects li.product-category img {
  border-bottom: 0;
}

body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title {
  display: flex;
  align-items: center;
  gap: 0.35rem 0.75rem;
  flex-wrap: wrap;
  min-height: 4.75rem;
  margin: 0;
  padding: 0.95rem 4.1rem 1rem 1.1rem;
  position: relative;
  background: var(--c);
  color: var(--on);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title .count {
  flex: none;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on) 18%, transparent);
  color: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}

/* sets: one plate that holds every colour */
body.woocommerce.em26-category--colour-effects ul.products li.product-category:has(> a[href*="/sety"]) .woocommerce-loop-category__title {
  background: linear-gradient(100deg, var(--em26-cobalt) 0%, var(--em26-magenta) 100%);
}

/* the arrow lives in the plate, centred, and no longer floats over the text */
body.em26-category--colour-effects li.product-category > a::after { content: none; }
body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title::after {
  content: "→";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 2.4rem;
  height: 2.4rem;
  margin-top: -1.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--on);
  color: var(--c);
  font-size: 1.1rem;
  font-weight: 800;
  transition: transform 0.2s var(--em26c-ease);
}
body.woocommerce.em26-category--colour-effects ul.products li.product-category:has(> a[href*="/sety"]) .woocommerce-loop-category__title::after { color: var(--em26-magenta); }
body.em26-category--colour-effects li.product-category:hover .woocommerce-loop-category__title::after { transform: translateX(3px); }

/* five or six collections read as 3 + 3 (or 3 + 2), not 4 + 2 */
@media (min-width: 62.01rem) {
  body.em26-category--colour-effects ul.products:has(> li.product-category:nth-child(5)):not(:has(> li.product-category:nth-child(7))) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title::after { transition: none; }
}

/* ---------- product tiles: accent tab instead of the cut-off 4px top rule ----------
   border-top on a rounded card is clipped by the radius and reads as a broken line. The accent is now a short tab
   inside the card edge; colour cycles through the five brand tokens (it is a colour shop). */
body.woocommerce.em26-category--colour-effects ul.products li.product:not(.product-category) {
  --tab: var(--em26-cobalt);
  border-top: 1px solid var(--em26-border);
  border-top-color: var(--em26-border) !important; /* another unlayered rule keeps painting this edge turquoise */
}
body.woocommerce.em26-category--colour-effects ul.products li.product:not(.product-category):nth-child(5n + 1) { --tab: var(--em26-magenta); }
body.woocommerce.em26-category--colour-effects ul.products li.product:not(.product-category):nth-child(5n + 2) { --tab: var(--em26-cobalt); }
body.woocommerce.em26-category--colour-effects ul.products li.product:not(.product-category):nth-child(5n + 3) { --tab: var(--em26-saffron); }
body.woocommerce.em26-category--colour-effects ul.products li.product:not(.product-category):nth-child(5n + 4) { --tab: var(--em26-turquoise); }
body.woocommerce.em26-category--colour-effects ul.products li.product:not(.product-category):nth-child(5n) { --tab: var(--em26-ink); }
body.woocommerce.em26-category--colour-effects ul.products li.product:not(.product-category)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.25rem;
  width: 2.75rem;
  height: 5px;
  border-radius: 0 0 5px 5px;
  background: var(--tab);
  z-index: 1;
}

/* ---------- mid-level landing cards (pigments, special effects, inks): one colour tab each, no orphan card ---------- */

body.woocommerce.em26-category--colour-effects .em26-colour-landing__options > article {
  --tab: var(--em26-turquoise);
  position: relative;
  overflow: hidden;
}

body.woocommerce.em26-category--colour-effects .em26-colour-landing__options > article:nth-child(5n + 1) { --tab: var(--em26-cobalt); }
body.woocommerce.em26-category--colour-effects .em26-colour-landing__options > article:nth-child(5n + 2) { --tab: var(--em26-turquoise); }
body.woocommerce.em26-category--colour-effects .em26-colour-landing__options > article:nth-child(5n + 3) { --tab: var(--em26-saffron); }
body.woocommerce.em26-category--colour-effects .em26-colour-landing__options > article:nth-child(5n + 4) { --tab: var(--em26-magenta); }
body.woocommerce.em26-category--colour-effects .em26-colour-landing__options > article:nth-child(5n + 5) { --tab: var(--em26-ink); }

body.woocommerce.em26-category--colour-effects .em26-colour-landing__options > article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--tab);
}

/* the arrow was glued to the label because the flex button dropped the space */
body.woocommerce.em26-category--colour-effects .em26-colour-landing__options a b {
  margin-inline-start: 0.45rem;
}

/* 4 cards: 2 x 2 instead of 3 + 1 orphan */
@media (min-width: 48rem) {
  body.woocommerce.em26-category--colour-effects .em26-colour-landing__options:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 5 property tiles: 3 + 2 stretched to full width instead of a ragged last row */
@media (min-width: 64rem) {
  body.woocommerce.em26-category--colour-effects .em26-colour-landing__facts > div:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body.woocommerce.em26-category--colour-effects .em26-colour-landing__facts > div:has(> :nth-child(5):last-child) > :nth-child(-n + 3) { grid-column: span 2; }
  body.woocommerce.em26-category--colour-effects .em26-colour-landing__facts > div:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: span 3; }
}

/* ---------- colour product pages: long names, space above the tabs; landing proof image gets air ---------- */

body.woocommerce.em26-product--colour-effects div.product .summary h1.product_title {
  font-size: clamp(1.55rem, 1.1rem + 1.3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

body.woocommerce.em26-product--colour-effects div.product .woocommerce-tabs {
  margin-top: 1.75rem;
}

body.em26-category--colour-effects .em26-colour-landing__proof {
  margin: 1.5rem 0 0;
}

body.em26-category--colour-effects .em26-colour-landing__proof img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

body.em26-category--colour-effects .em26-colour-landing__proof figcaption {
  margin-top: 0.6rem;
  color: var(--em26-muted);
  font-size: 0.875rem;
}

/* ---------- colour root: result-first finder (replaces the routes + cheat-sheet blocks) ---------- */

body.em26-category--colour-effects .em26-finder {
  --em26f-line: var(--em26-border, rgba(22, 53, 61, 0.18));
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  color: var(--em26-ink);
}

body.em26-category--colour-effects .em26-finder__head {
  display: grid;
  gap: 0.5rem;
  max-width: 40rem;
  margin-bottom: 1.4rem;
}

body.em26-category--colour-effects .em26-finder__head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

body.em26-category--colour-effects .em26-finder__head p {
  margin: 0;
  color: var(--em26-muted);
}

/* no JavaScript: every answer is a card with a real link */
body.em26-category--colour-effects .em26-finder__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

body.em26-category--colour-effects .em26-finder__item {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  overflow: hidden;
  border: 1px solid var(--em26f-line);
  border-radius: 1rem;
  background: var(--em26-surface);
  box-shadow: var(--em26c-shadow);
}

body.em26-category--colour-effects .em26-finder__art {
  display: grid;
  place-items: center;
  min-height: 9rem;
  background: color-mix(in srgb, var(--c, var(--em26-turquoise)) 22%, var(--em26-surface));
}

body.em26-category--colour-effects .em26-finder__art svg {
  width: 78%;
  max-width: 13rem;
  height: auto;
}

body.em26-category--colour-effects .em26-finder__body {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
}

body.em26-category--colour-effects .em26-finder__body h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

body.em26-category--colour-effects .em26-finder__body p {
  margin: 0;
  color: var(--em26-muted);
  line-height: 1.55;
}

body.em26-category--colour-effects .em26-finder__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  border-radius: 0.625rem;
  background: var(--em26-ink);
  color: var(--em26-paper);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s;
}

body.em26-category--colour-effects .em26-finder__cta:hover {
  background: #0e2a31;
}

body.em26-category--colour-effects .em26-finder__cta:focus-visible,
body.em26-category--colour-effects .em26-finder__chip:focus-visible {
  outline: 3px solid var(--em26-cobalt);
  outline-offset: 3px;
}

/* with JavaScript: chips on the left, one panel on the right */
body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__shell {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1.25rem;
  align-items: stretch;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__items {
  display: block;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__item {
  display: none;
  height: 100%;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__item.is-active {
  display: grid;
}

body.em26-category--colour-effects .em26-finder__chips {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

body.em26-category--colour-effects .em26-finder__chip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.85rem;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--em26-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, box-shadow 0.18s;
}

body.em26-category--colour-effects .em26-finder__dot {
  grid-row: 1 / 3;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent);
}

body.em26-category--colour-effects .em26-finder__chip b {
  font-weight: 700;
  line-height: 1.25;
}

body.em26-category--colour-effects .em26-finder__chip small {
  color: var(--em26-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

body.em26-category--colour-effects .em26-finder__chip:hover {
  background: var(--em26-surface);
  border-color: var(--em26f-line);
}

body.em26-category--colour-effects .em26-finder__chip[aria-checked="true"] {
  background: var(--em26-surface);
  border-color: var(--em26f-line);
  box-shadow: inset 3px 0 0 var(--c), var(--em26c-shadow);
}

@media (max-width: 62rem) {
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__shell {
    grid-template-columns: minmax(0, 1fr);
  }
  body.em26-category--colour-effects .em26-finder__chips {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.6rem;
    scroll-snap-type: x proximity;
  }
  body.em26-category--colour-effects .em26-finder__chip {
    flex: 0 0 15.5rem;
    scroll-snap-align: start;
  }
}

@media (max-width: 40rem) {
  body.em26-category--colour-effects .em26-finder__items,
  body.em26-category--colour-effects .em26-finder__item,
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__item {
    grid-template-columns: minmax(0, 1fr);
  }
  body.em26-category--colour-effects .em26-finder__art {
    min-height: 8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.em26-category--colour-effects .em26-finder__chip,
  body.em26-category--colour-effects .em26-finder__cta {
    transition: none;
  }
}

/* =====================================================================
 * Colour root: hero proof chips, "Усі колекції" heading, collection counts, starter strip
 * (approved prototype, 21 Oct). Presentation only; all strings are theme-owned UI copy.
 * ===================================================================== */

body.em26-category--colour-effects .em26-category-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

body.em26-category--colour-effects .em26-category-hero__proof-item {
  --dot: var(--em26-turquoise);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem 0.35rem 0.55rem;
  border: 1px solid var(--em26-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--em26-surface) 70%, transparent);
  color: var(--em26-muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

body.em26-category--colour-effects .em26-category-hero__proof-item::before {
  content: "";
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--dot);
}

body.em26-category--colour-effects .em26-category-hero__proof-item--magenta { --dot: var(--em26-magenta); }
body.em26-category--colour-effects .em26-category-hero__proof-item--cobalt { --dot: var(--em26-cobalt); }
body.em26-category--colour-effects .em26-category-hero__proof-item--saffron { --dot: var(--em26-saffron); }

body.em26-category--colour-effects .em26-collections-head {
  margin: clamp(2rem, 4vw, 3rem) 0 1rem;
}

body.em26-category--colour-effects .em26-collections-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

body.em26-category--colour-effects .em26-collections-head p {
  margin: 0.4rem 0 0;
  color: var(--em26-muted);
}

/* WooCommerce's own count is shown as "N товарів" chip in the plate (woocommerce-overrides.css hides it with !important) */
body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title mark.count {
  display: inline-block !important;
}

body.em26-category--colour-effects .em26-colour-starter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--em26-border);
  border-left: 5px solid var(--em26-saffron);
  border-radius: var(--em26-radius-card);
  background: var(--em26-surface);
  color: var(--em26-ink);
}

body.em26-category--colour-effects .em26-colour-starter h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

body.em26-category--colour-effects .em26-colour-starter p {
  max-width: 38rem;
  margin: 0;
  color: var(--em26-muted);
}

body.em26-category--colour-effects .em26-colour-starter__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0.65rem 1.35rem;
  border-radius: var(--em26-radius-control);
  background: var(--em26-ink);
  color: var(--em26-paper);
  font-weight: 700;
  text-decoration: none;
}

body.em26-category--colour-effects .em26-colour-starter__cta:hover,
body.em26-category--colour-effects .em26-colour-starter__cta:focus-visible {
  background: var(--em26-cobalt);
}

@media (max-width: 40rem) {
  body.em26-category--colour-effects .em26-colour-starter {
    grid-template-columns: minmax(0, 1fr);
  }
  body.em26-category--colour-effects .em26-colour-starter__cta {
    justify-content: center;
  }
}

/* Landing option buttons ("Набір по 5 мл" / "Набір по 15 мл"): never wrap the label, so both buttons keep one height. */
body.em26-category--colour-effects .em26-colour-landing__options nav a { white-space: nowrap; }

/* Category plates: the "N товарів" chip always sits under the title (it jumped between beside and below depending on title length). */
body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* Editorial text: its first heading is stored as H4 (kept as is); give it the same visual weight as the other section headings. */
body.em26-category--colour-effects .em26-category-editorial__inner > h4:first-child {
  margin: 0 0 1.25rem;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* =====================================================================
 * 21 Oct (owner review): softer collection plates, calmer and more usable finder.
 * Presentation only. Same markup, same links; later rules of equal specificity win.
 * ===================================================================== */

/* ---------- collection plates: a tint of the material colour, ink text, colour kept in the accent line, dot, chip and arrow ---------- */
body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title {
  background: color-mix(in srgb, var(--c) 11%, var(--em26-surface, #fffefa));
  color: var(--em26-ink);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--c) 85%, transparent);
  padding-block: 1.1rem 1rem;
  font-weight: 750;
}

body.woocommerce.em26-category--colour-effects ul.products li.product-category:has(> a[href*="/sety"]) .woocommerce-loop-category__title {
  background: linear-gradient(100deg, color-mix(in srgb, var(--em26-cobalt) 11%, var(--em26-surface, #fffefa)) 0%, color-mix(in srgb, var(--em26-magenta) 11%, var(--em26-surface, #fffefa)) 100%);
  box-shadow: inset 0 3px 0 transparent;
  border-image: none;
  background-clip: padding-box;
}

body.woocommerce.em26-category--colour-effects ul.products li.product-category:has(> a[href*="/sety"]) .woocommerce-loop-category__title::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(100deg, var(--em26-cobalt), var(--em26-magenta));
}

body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title .count {
  background: color-mix(in srgb, var(--c) 20%, var(--em26-surface, #fffefa));
  color: var(--em26-ink);
  font-weight: 700;
}

body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title::after,
body.woocommerce.em26-category--colour-effects ul.products li.product-category:has(> a[href*="/sety"]) .woocommerce-loop-category__title::after {
  width: 2.2rem;
  height: 2.2rem;
  margin-top: -1.1rem;
  background: color-mix(in srgb, var(--c) 18%, var(--em26-surface, #fffefa));
  color: var(--em26-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
  transition: transform 0.2s var(--em26c-ease), background-color 0.2s, color 0.2s;
}

body.em26-category--colour-effects li.product-category:hover .woocommerce-loop-category__title::after {
  background: var(--c);
  color: var(--on);
}

body.woocommerce.em26-category--colour-effects ul.products li.product-category {
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(22, 53, 61, 0.05), 0 8px 24px rgba(22, 53, 61, 0.07);
}

/* ---------- finder ---------- */
body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__shell {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1.5rem;
  align-items: start;
}

/* the list is one card with hairlines, not eight floating rows */
body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chips {
  gap: 0;
  padding: 0.35rem;
  border: 1px solid var(--em26f-line);
  border-radius: 1rem;
  background: var(--em26-surface, #fffefa);
  box-shadow: 0 1px 2px rgba(22, 53, 61, 0.05), 0 8px 24px rgba(22, 53, 61, 0.06);
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip {
  position: relative;
  min-height: 3.5rem;
  padding: 0.65rem 2.5rem 0.65rem 0.9rem;
  border: 0;
  border-radius: 0.7rem;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip + .em26-finder__chip::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 2.6rem;
  right: 0.9rem;
  height: 1px;
  background: var(--em26f-line);
  opacity: 0.6;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip::after {
  content: "→";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--em26-muted);
  opacity: 0;
  transition: opacity 0.18s, translate 0.18s;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip:hover {
  background: color-mix(in srgb, var(--c) 7%, var(--em26-surface, #fffefa));
  border: 0;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip:hover::after,
body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip[aria-checked="true"]::after {
  opacity: 1;
  color: var(--em26-ink);
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip[aria-checked="true"] {
  background: color-mix(in srgb, var(--c) 12%, var(--em26-surface, #fffefa));
  border: 0;
  box-shadow: inset 3px 0 0 var(--c);
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip[aria-checked="true"] + .em26-finder__chip::before,
body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip[aria-checked="true"]::before {
  opacity: 0;
}

/* the answer panel keeps its natural height and stays next to the list while the list is read */
body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__items {
  position: sticky;
  top: 6.5rem;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__item {
  height: auto;
  min-height: 21rem;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  border-radius: 1rem;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__art {
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c, var(--em26-turquoise)) 10%, #fff) 0%, transparent 60%),
    color-mix(in srgb, var(--c, var(--em26-turquoise)) 14%, var(--em26-surface, #fffefa));
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__art svg {
  width: 82%;
  max-width: 15rem;
  filter: drop-shadow(0 10px 18px rgba(22, 53, 61, 0.14));
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__body {
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  gap: 0.9rem;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__body h3 {
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem);
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__body p {
  max-width: 44ch;
  font-size: 1rem;
}

body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__cta {
  margin-top: 0.35rem;
  background: var(--em26-ink);
}

@media (max-width: 62rem) {
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__items { position: static; }
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chips {
    padding: 0.35rem;
    gap: 0.35rem;
  }
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip {
    flex: 0 0 15rem;
    border: 1px solid var(--em26f-line);
  }
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip::before,
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip::after { content: none; }
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__item { min-height: 0; }
}

@media (max-width: 40rem) {
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__item {
    grid-template-columns: minmax(0, 1fr);
  }
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__art {
    min-height: 7.5rem;
  }
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__art svg {
    width: auto;
    height: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.em26-category--colour-effects .em26-finder.is-enhanced .em26-finder__chip::after { transition: none; }
}

/* phones: same fix as the resin sub-categories, count and sorting each get a full row */
@media (max-width: 47.99rem) {
  body.em26-category--colour-effects .em26-woo-surface--category {
    grid-template-columns: minmax(0, 1fr);
  }

  body.em26-category--colour-effects .woocommerce-result-count,
  body.em26-category--colour-effects .woocommerce-ordering {
    grid-column: 1 / -1 !important;
  }
}