/*
 * Colour section system (owner audit, 22 Oct 2026): barvnyky i pigmenty, tonery, pigmenty, efekty, spyrtovi chornyla, nabory.
 * Loads after section-foundation on colour categories and colour products. Presentation only: no copy, URL, SEO,
 * product or price change. Body class em26-colour--{family} comes from inc/colour-section.php.
 *
 * Rules
 * 1. One accent per page = the material family: dense COLORFUN magenta, clear toners cobalt, shine pigments saffron,
 *    special effects turquoise, alcohol inks ink, sets cobalt. Root pages keep turquoise.
 * 2. No pastel gradients and no frame inside a frame. Panels are surface + hairline; a nested box becomes a divider.
 * 3. The coloured tab on a card is the family accent, not a colour cycling by position.
 */

body[class*="em26-colour--"],
body.em26-category--colour-effects,
body.em26-product--colour-effects { --em26-cx: var(--em26-turquoise); }
body.em26-colour--dense { --em26-cx: var(--em26-magenta); }
body.em26-colour--clear { --em26-cx: var(--em26-cobalt); }
body.em26-colour--shine { --em26-cx: var(--em26-saffron); }
body.em26-colour--effects { --em26-cx: var(--em26-turquoise); }
body.em26-colour--inks { --em26-cx: var(--em26-ink); }
body.em26-colour--sets { --em26-cx: var(--em26-cobalt); }

/* ---------- product cards: the family tab instead of five colours cycling by position ---------- */
body.woocommerce.em26-category--colour-effects ul.products li.product:not(.product-category),
body.woocommerce.em26-category--colour-effects ul.products li.product:not(.product-category):nth-child(n) { --tab: var(--em26-cx); }
body.em26-product--colour-effects :is(.related, .upsells) ul.products li.product { --tab: var(--em26-cx); }

/* ---------- category tiles: no hyphen breaks inside words ("чорни-ло", "спирто-ві") ---------- */
body.woocommerce.em26-category--colour-effects ul.products li.product-category .woocommerce-loop-category__title {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
}

/* ---------- mini-landing under the hero: the eyebrow repeated the hero eyebrow ("Спеціальні ефекти" twice) ---------- */
body.em26-category--colour-effects .em26-colour-landing__header > .em26-eyebrow { display: none; }

/* ---------- product page: gallery top line in the family accent ---------- */
body.em26-product--colour-effects :is(div.product, .em26-pdp-top) > :is(.images, .woocommerce-product-gallery) {
  border-top-color: var(--em26-cx) !important;
}

/* A learning note (sets) carried order 0 and sat above the H1. It belongs under the buy box. */
body.em26-product--colour-effects .summary > .em26-learning-product-context { order: 5; }

/* ---------- product texts with inline styles (COLORFUN and sets): pastel gradients and frames inside frames ----------
   The text and its order stay exactly as written in the admin; only the inline paint is replaced with the system. */
body.em26-product--colour-effects :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel) :is(section, div)[style*="gradient"],
body.em26-product--colour-effects :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel) section[style*="background:#f"] {
  padding: clamp(1rem, 2.4vw, 1.5rem) !important;
  border: 1px solid var(--em26-border) !important;
  border-left: 3px solid var(--em26-cx) !important;
  border-radius: var(--em26-radius-card, 0.75rem) !important;
  background: var(--em26-surface, #fffefa) !important;
  color: var(--em26-ink) !important;
  box-shadow: none !important;
}

/* the white box inside a panel was a second frame: now a divider line in the same panel */
body.em26-product--colour-effects :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel) :is(section, div)[style*="background"] div[style*="background:#fff"] {
  margin: 1rem 0 0 !important;
  padding: 1rem 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--em26-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* stand-alone white boxes and photo tiles: system hairline and radius */
body.em26-product--colour-effects .woocommerce-Tabs-panel :is(div, figure)[style*="background:#fff"] {
  border-color: var(--em26-border) !important;
}

/* inline text colours (purple #653a74, #24172b, #5b5260 ...) follow the ink and muted tokens */
body.em26-product--colour-effects :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel) [style*="color:#"]:not([style*="background"]) {
  color: inherit !important;
}
body.em26-product--colour-effects :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel) p[style*="uppercase"] {
  color: #0b6e6e !important;
  font-family: var(--em26-font-sans) !important;
  letter-spacing: 0.04em !important;
}
body.em26-product--colour-effects .woocommerce-Tabs-panel figure[style] span[style*="color:#"] { color: var(--em26-muted) !important; }
body.em26-product--colour-effects :is(.woocommerce-product-details__short-description, .woocommerce-Tabs-panel) :is(h2, h3)[style] { color: var(--em26-ink) !important; }
body.em26-product--colour-effects .woocommerce-Tabs-panel details[style] { border-bottom-color: var(--em26-border) !important; }

/* ---------- root editorial text: empty paragraphs from the editor made 3-line gaps ---------- */
body.em26-category--colour-effects .em26-category-editorial__inner p:empty { display: none; }

/* ---------- hero with a real photo instead of the decorative ink bubbles (prototype for the owner, 22 Oct) ----------
   Category photo on sub-categories; on the colour root and the inks root a 2×2 mosaic of the collection photos. */
body.em26-category--colour-effects .em26-category-hero--colour-effects.em26-category-hero--photo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  align-items: center;
  border-bottom-color: var(--em26-cx);
}
body.em26-category--colour-effects .em26-category-hero--colour-effects.em26-category-hero--photo::before { content: none; }
body.em26-category--colour-effects .em26-category-hero--photo .em26-eyebrow::before { background: var(--em26-cx); }

.em26-colour-hero-photo {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--em26-border);
  border-radius: var(--em26-radius-card, 0.75rem);
  background: var(--em26-surface);
  box-shadow: 0 1px 2px rgba(22, 53, 61, 0.05), 0 12px 32px rgba(22, 53, 61, 0.08);
}
.em26-colour-hero-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}
.em26-colour-hero-photo--mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.em26-colour-hero-photo--mosaic .em26-colour-hero-photo__img {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--em26-border);
  border-radius: 0.6rem;
  background: var(--em26-surface);
}

@media (max-width: 47.99rem) {
  body.em26-category--colour-effects .em26-category-hero--colour-effects.em26-category-hero--photo { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .em26-colour-hero-photo { aspect-ratio: 16 / 10; }
  .em26-colour-hero-photo--mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); aspect-ratio: auto; gap: 0.375rem; }
}

/* ---------- mini-landing options with the photo of where they lead (jars, bottles, crystals) ---------- */
body.em26-category--colour-effects .em26-colour-landing__options > article.has-photo { padding: 0 1.5rem 1.5rem !important; overflow: hidden; }
.em26-colour-landing__photo {
  display: block;
  aspect-ratio: 16 / 10;
  margin: 0 -1.5rem 0.25rem;
  overflow: hidden;
  background: var(--em26-surface);
  border-bottom: 1px solid var(--em26-border);
}
.em26-colour-landing__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.em26-category--colour-effects .em26-colour-landing__options > article.has-photo:hover .em26-colour-landing__photo img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .em26-colour-landing__photo img { transition: none; }
}

/* =====================================================================================================
   Colour section architecture (owner approved 22 Oct 22:49 – 23:15)
   Root: plate in the four brand colours with the 2×2 photo series → result cards → popular → guide.
   Families: mini hero with the section bubbles behind the medallion → photo cards → all products.
   Listings: calm mini hero (no bubbles).
   ===================================================================================================== */

/* ---------- root hero: variant D (four quiet brand-colour washes), the photo series on the right ---------- */
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero.em26-category-hero--photo-root.em26-category-hero--tone-spectrum {
  --em26-root-tone: var(--em26-ink, #16353d);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem);
  gap: 3rem;
  min-height: 0;
  padding: 2.75rem;
  overflow: hidden;
  border: 1px solid rgba(22, 53, 61, 0.14);
  border-bottom: 0.25rem solid var(--em26-ink, #16353d);
  border-radius: var(--em26-radius-card, 0.75rem);
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(179, 19, 104, 0.11), transparent 70%),
    radial-gradient(50% 60% at 30% 100%, rgba(242, 182, 50, 0.16), transparent 70%),
    radial-gradient(45% 55% at 62% 20%, rgba(18, 154, 154, 0.12), transparent 70%),
    radial-gradient(40% 50% at 55% 95%, rgba(29, 93, 187, 0.09), transparent 70%),
    var(--em26-surface, #fffefa);
}
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero--tone-spectrum::before,
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero--tone-spectrum::after { content: none !important; display: none !important; }
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero--tone-spectrum .em26-category-hero__content { align-self: center; max-width: none; padding: 0; }
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero--tone-spectrum .em26-category-hero__lead { max-width: 46ch; }
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero__photo.em26-category-hero__photo--mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  min-height: 0;
  aspect-ratio: 1;
  margin: -2.75rem -2.75rem -2.75rem 0;
  background: var(--em26-surface, #fffefa);
}
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero__photo--mosaic > img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: 1;
  object-fit: cover;
}
@media (max-width: 71.99rem) {
  html:not(#em26-hero):not(#em26-cx) body .em26-category-hero.em26-category-hero--photo-root.em26-category-hero--tone-spectrum { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2rem; }
  html:not(#em26-hero):not(#em26-cx) body .em26-category-hero__photo.em26-category-hero__photo--mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); aspect-ratio: auto; margin: 0 -2rem -2rem; }
}
@media (max-width: 47.99rem) {
  html:not(#em26-hero):not(#em26-cx) body .em26-category-hero.em26-category-hero--photo-root.em26-category-hero--tone-spectrum { gap: 1.5rem; padding: 1.25rem; }
  html:not(#em26-hero):not(#em26-cx) body .em26-category-hero__photo.em26-category-hero__photo--mosaic { margin: 0 -1.25rem -1.25rem; gap: 0.1875rem; }
}

/* ---------- mini hero of the colour section: magenta ring; families carry the bubbles behind the medallion ---------- */
html:not(#em26-hero) body .em26-category-hero__mini-icon--colour-effects { --em26-mini-ring: var(--em26-magenta, #b31368); }
html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--colour-effects.em26-category-hero--mini {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: none;
}
html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini:not(.em26-category-hero--blooms)::before,
html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini::after { content: none !important; }
html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini.em26-category-hero--blooms::before {
  display: block;
  inset: -1.5rem -2rem -1.5rem auto;
  width: min(34rem, 50%);
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40%);
  background-position: right center;
}
@media (max-width: 47.99rem) {
  html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini.em26-category-hero--blooms::before {
    inset: 0 -0.5rem auto auto;
    width: 11rem;
    height: 7rem;
    opacity: 0.7;
    -webkit-mask-image: none;
    mask-image: none;
    background-position: right top;
  }
}

/* ---------- photo cards (root results and family sub-categories) ---------- */
.em26-cx-head { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; }
.em26-cx-head h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.em26-cx-root { margin-top: 2.5rem; }
.em26-cx-root__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
.em26-cx-root__grid > .em26-cx-card { grid-column: span 3; }
.em26-cx-root__grid--n7 > .em26-cx-card:nth-child(n + 5) { grid-column: span 4; }
.em26-cx-root__grid--n7 > .em26-cx-card:nth-child(n + 5) .em26-cx-card__photo { aspect-ratio: 4 / 3; }
.em26-cx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(22, 53, 61, 0.12);
  border-top: 0.1875rem solid var(--em26-magenta, #b31368);
  border-radius: var(--em26-radius-card, 0.75rem);
  background: var(--em26-surface, #fffefa);
  color: var(--em26-ink, #16353d);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.em26-cx-card:hover { transform: translateY(-2px); box-shadow: 0 0.75rem 1.75rem rgba(22, 53, 61, 0.1); }
.em26-cx-card:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: 3px; }
.em26-cx-card__photo { display: block; aspect-ratio: 1; overflow: hidden; background: #efefec; }
.em26-cx-card__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.em26-cx-card__body { position: relative; display: grid; gap: 0.35rem; padding: 1rem 2.75rem 1.1rem 1.1rem; }
.em26-cx-card__sub { color: #0b6e6e; font: 600 0.8125rem/1.3 var(--em26-font-mono, "IBM Plex Mono", monospace); }
.em26-cx-card__title { font-size: 1.125rem; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.em26-cx-card__count { color: #4a6168; font-size: 0.9375rem; }
.em26-cx-card__go { position: absolute; right: 1rem; bottom: 1rem; font-weight: 700; }

.em26-cx-family { display: grid; gap: 1rem; margin: 0.5rem 0 2.5rem; }
.em26-cx-family--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.em26-cx-family--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.em26-cx-family--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.em26-cx-family .em26-cx-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: stretch; }
.em26-cx-family--n4 .em26-cx-card { grid-template-columns: minmax(0, 1fr); }
.em26-cx-family .em26-cx-card__photo { aspect-ratio: auto; min-height: 8.5rem; }
.em26-cx-family--n4 .em26-cx-card__photo { aspect-ratio: 4 / 3; min-height: 0; }
.em26-cx-family .em26-cx-card__body { align-content: center; }

.em26-cx-products { margin: 0 0 2.5rem; }
.em26-cx-products--popular { margin-top: 3rem; }
html:not(#em26-cx) body .em26-cx-products__title { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.em26-cx-products__title span { color: #4a6168; font: 500 0.875rem/1 var(--em26-font-mono, "IBM Plex Mono", monospace); vertical-align: middle; }

/* product grids in the section: always the normal card size (4 per row), even for 1–3 products */
@media (min-width: 64rem) {
  html:not(#em26-cx):not(#em26-cx4) body.em26-category--colour-effects ul.products:not(:has(> li.product-category)) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 71.99rem) {
  .em26-cx-root__grid > .em26-cx-card,
  .em26-cx-root__grid--n7 > .em26-cx-card:nth-child(n + 5) { grid-column: span 6; }
  .em26-cx-root__grid--n7 > .em26-cx-card:last-child { grid-column: 1 / -1; }
  .em26-cx-family--n3, .em26-cx-family--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em26-cx-family--n4 .em26-cx-card { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .em26-cx-family--n4 .em26-cx-card__photo { aspect-ratio: auto; min-height: 8.5rem; }
}
@media (max-width: 47.99rem) {
  .em26-cx-root { margin-top: 2rem; }
  .em26-cx-root__grid { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .em26-cx-root__grid > .em26-cx-card,
  .em26-cx-root__grid--n7 > .em26-cx-card:nth-child(n + 5),
  .em26-cx-root__grid--n7 > .em26-cx-card:last-child { grid-column: 1; display: grid; grid-template-columns: 7rem minmax(0, 1fr); }
  .em26-cx-root__grid .em26-cx-card__photo,
  .em26-cx-root__grid--n7 > .em26-cx-card:nth-child(n + 5) .em26-cx-card__photo { aspect-ratio: auto; min-height: 7rem; }
  .em26-cx-family, .em26-cx-family--n2, .em26-cx-family--n3, .em26-cx-family--n4 { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
  .em26-cx-family .em26-cx-card, .em26-cx-family--n4 .em26-cx-card { grid-template-columns: 7rem minmax(0, 1fr); }
  .em26-cx-family .em26-cx-card__photo, .em26-cx-family--n4 .em26-cx-card__photo { aspect-ratio: auto; min-height: 7rem; }
  .em26-cx-card__body { padding: 0.85rem 2.5rem 0.9rem 1rem; }
  .em26-cx-card__title { font-size: 1.0625rem; }
}
@media (max-width: 22.5rem) {
  .em26-cx-root__grid > .em26-cx-card, .em26-cx-family .em26-cx-card { grid-template-columns: 5.75rem minmax(0, 1fr) !important; }
  .em26-cx-root__grid .em26-cx-card__photo, .em26-cx-family .em26-cx-card__photo { min-height: 5.75rem; }
}
@media (prefers-reduced-motion: reduce) { .em26-cx-card { transition: none; } .em26-cx-card:hover { transform: none; } }

/* ---------- guide under the products: quiet motion in the illustrations (owner idea, 22 Oct 23:11) ---------- */
.em26-finder--guide { margin-top: 3rem; }
.em26-finder__art svg * { transform-box: fill-box; transform-origin: center; }
.em26-finder__art .em26-wave { transform-box: view-box; transform-origin: 0 0; animation: em26-roll 7s linear infinite; }
.em26-finder__art .em26-wave--b { animation-duration: 9s; animation-direction: reverse; }
.em26-finder__art .em26-wave--c { animation-duration: 8s; }
.em26-tw, .em26-node { animation: em26-twinkle 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.em26-node { animation-duration: 3s; }
.em26-star { animation: em26-star 4.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.em26-lace-glint { stroke: #fffefa; stroke-width: 2.5; stroke-dasharray: 7 240; stroke-dashoffset: 247; animation: em26-glint 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.em26-blob { animation: em26-breathe 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes em26-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: 0.25; transform: scale(0.6); } 55% { opacity: 0.35; transform: scale(0.7); } }
@keyframes em26-star { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 40% { opacity: 0.45; transform: scale(0.72) rotate(12deg); } 60% { opacity: 1; transform: scale(1.08) rotate(0); } }
@keyframes em26-glint { 0% { stroke-dashoffset: 247; opacity: 0; } 10% { opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 80%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes em26-roll { from { transform: translateX(0); } to { transform: translateX(-50px); } }
@keyframes em26-breathe { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(var(--x, 0), var(--y, 0)) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .em26-finder__art .em26-wave, .em26-tw, .em26-node, .em26-star, .em26-lace-glint, .em26-blob { animation: none; }
  .em26-lace-glint { opacity: 0; }
}

/* guide on phones: the illustration as a small tile beside the text, so seven answers stay a short read under the products */
@media (max-width: 47.99rem) {
  html:not(#em26-cx) body .em26-finder--guide .em26-finder__item {
    display: grid !important;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: start;
    min-height: 0;
  }
  html:not(#em26-cx) body .em26-finder--guide .em26-finder__art {
    display: flex !important;
    align-self: stretch;
    align-items: flex-start;
    justify-content: center;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.75rem 0.5rem !important;
  }
  html:not(#em26-cx) body .em26-finder--guide .em26-finder__art svg { width: 100%; height: auto; }
  html:not(#em26-cx) body .em26-finder--guide .em26-finder__body { padding: 0.9rem 1rem 1rem !important; }
  html:not(#em26-cx) body .em26-finder--guide .em26-finder__body h3 { font-size: 1.0625rem !important; line-height: 1.3 !important; margin: 0 0 0.4rem !important; }
  html:not(#em26-cx):not(#em26-g) body .em26-finder--guide .em26-finder__item .em26-finder__body p { font-size: 0.9375rem !important; line-height: 1.5 !important; margin: 0 0 0.75rem !important; }
  html:not(#em26-cx) body .em26-finder--guide .em26-finder__ctas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  html:not(#em26-cx) body .em26-finder--guide .em26-finder__cta { min-height: 2.75rem; padding: 0.55rem 0.9rem !important; font-size: 0.875rem !important; width: auto !important; }
}

/* ---------- root cards carry the guide (owner, 25 Oct 18:00–18:07) ----------
   Front: the guide illustration on the card's tinted plate (quiet motion from the rules above).
   Back: the category photo, shown on hover / keyboard focus with a flip. Touch screens keep the illustration:
   the first tap opens the family, where the photo is in the hero. Reduced motion: a plain crossfade. */
.em26-cx-card__flip { position: relative; perspective: 1200px; overflow: visible; background: transparent; }
.em26-cx-card__flip-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.em26-cx-card__front, .em26-cx-card__back { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.em26-cx-card__front { background: color-mix(in srgb, var(--c, var(--em26-turquoise, #129a9a)) 22%, var(--em26-surface, #fffefa)); }
.em26-cx-card__front .em26-finder__art { display: grid; place-items: center; width: 100%; height: 100%; }
.em26-cx-card__front svg { width: 62%; max-width: 12rem; height: auto; }
.em26-cx-card__back { transform: rotateY(180deg); background: #efefec; }
.em26-cx-card__back img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .em26-cx-card--flip:hover .em26-cx-card__flip-in { transform: rotateY(180deg); }
}
.em26-cx-card--flip:focus-visible .em26-cx-card__flip-in { transform: rotateY(180deg); }
.em26-cx-card__text { color: #4a6168; font-size: 0.875rem; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .em26-cx-card__flip-in { transition: none; }
  .em26-cx-card--flip:hover .em26-cx-card__flip-in, .em26-cx-card--flip:focus-visible .em26-cx-card__flip-in { transform: none; }
  .em26-cx-card__front, .em26-cx-card__back { transition: opacity 0.25s ease; }
  .em26-cx-card__back { transform: none; opacity: 0; }
  @media (hover: hover) and (pointer: fine) {
    .em26-cx-card--flip:hover .em26-cx-card__back { opacity: 1; }
  }
  .em26-cx-card--flip:focus-visible .em26-cx-card__back { opacity: 1; }
}
/* phones: the root cards are a photo-left row; the flip plate keeps the row's height */
@media (max-width: 47.99rem) {
  .em26-cx-root__grid .em26-cx-card__flip { min-height: 7rem; }
  .em26-cx-card__front svg { width: 70%; }
}

/* ---------- editorial contents on the colour root (owner, 25 Oct 18:04: simple type, tidy) ---------- */
.em26-ed-contents { margin: 0 0 2.5rem; padding: 1.25rem 0 1.5rem; border-top: 3px solid var(--em26-turquoise, #129a9a); border-bottom: 1px solid rgba(22, 53, 61, 0.14); }
.em26-ed-contents .em26-eyebrow { margin: 0 0 0.75rem; }
.em26-ed-contents__list { display: flex; flex-wrap: wrap; gap: 0.35rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.em26-ed-contents__list a { display: inline-flex; align-items: baseline; gap: 0.6rem; min-height: 44px; color: var(--em26-ink, #16353d); font-weight: 700; font-size: 1rem; line-height: 1.3; text-decoration: none; border-bottom: 2px solid transparent; }
.em26-ed-contents__list a:hover { border-bottom-color: var(--em26-magenta, #b31368); }
.em26-ed-contents__list a:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: 3px; }
.em26-ed-contents__list i { font: 600 0.78rem/1 var(--em26-font-mono, "IBM Plex Mono", monospace); font-style: normal; color: var(--em26-turquoise, #129a9a); }
.em26-category-editorial .em26-ed-head { scroll-margin-top: 6rem; }
@media (max-width: 47.99rem) {
  .em26-ed-contents__list { flex-direction: column; gap: 0; }
}

/* ── Colour palettes (inc/colour-palette.php, owner approved 25 Oct 19:19) ─────────────────────────────────────
   One card for every line: head (kicker, title, lead, optional button), rows of circles with code and name.
   Accent follows the family: tonery teal, inks magenta, COLORFUN cobalt. */
.em26-pal {
  --em26-pal-acc: var(--em26-cobalt, #1d5dbb);
  margin: 0 0 2.25rem;
  padding: 1.4rem 1.6rem 0.9rem;
  border: 1px solid rgba(22, 53, 61, 0.14);
  border-radius: 1rem;
  background: var(--em26-surface, #fffefa);
  color: var(--em26-ink, #16353d);
}
.em26-pal--tint { --em26-pal-acc: var(--em26-turquoise, #129a9a); }
.em26-pal--kamenskaya,
.em26-pal--pinata,
.em26-pal--flamenco { --em26-pal-acc: var(--em26-magenta, #b31368); }
.em26-pal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin: 0 0 0.9rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(22, 53, 61, 0.1);
}
.em26-pal__intro { min-width: 0; }
.em26-pal__kicker { margin: 0 0 0.2rem; color: var(--em26-pal-acc); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2; }
.em26-pal__title { margin: 0 0 0.35rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; }
.em26-pal__lead { margin: 0; max-width: 62ch; color: #4d6268; font-size: 0.93rem; line-height: 1.45; }
.em26-pal__cta {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.65rem 1.3rem;
  border-radius: 0.6rem;
  background: var(--em26-magenta, #b31368);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}
.em26-pal__cta small { margin-top: 0.2rem; font-size: 0.74rem; font-weight: 600; opacity: 0.88; }
.em26-pal__cta:hover { background: #95105a; color: #fff; }
.em26-pal__cta:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: 3px; }
.em26-pal__row {
  display: grid;
  grid-template-columns: 11.25rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 0.8rem 0;
  border-bottom: 1px dashed rgba(22, 53, 61, 0.12);
}
.em26-pal__row:last-child { border-bottom: 0; }
.em26-pal--flat .em26-pal__row { grid-template-columns: minmax(0, 1fr); }
.em26-pal__group { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; padding-top: 0.35rem; color: inherit; text-decoration: none; }
.em26-pal__group strong { font-size: 0.93rem; font-weight: 800; line-height: 1.2; }
.em26-pal__group span { color: var(--em26-pal-acc); font-size: 0.75rem; font-weight: 600; line-height: 1.25; }
a.em26-pal__group:hover span { text-decoration: underline; text-underline-offset: 0.15em; }
a.em26-pal__group:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: 3px; border-radius: 0.3rem; }
.em26-pal__dots { display: flex; flex-wrap: wrap; gap: 0.6rem 0.3rem; margin: 0; padding: 0; list-style: none; }
.em26-pal__dots > li { margin: 0; padding: 0; list-style: none; }
.em26-pal__dot { display: flex; flex-direction: column; align-items: center; width: 4.875rem; min-height: 44px; color: inherit; text-decoration: none; }
.em26-pal__circle {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55) 0, transparent 45%), var(--em26-pal-fill, #fff);
  box-shadow: 0 0 0 2px var(--em26-surface, #fffefa), 0 0 0 3px rgba(22, 53, 61, 0.16);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.em26-pal__dot.is-crystal .em26-pal__circle { background-color: #e4e5e7; background-repeat: no-repeat; }
.em26-pal__dot.is-swatch .em26-pal__circle { background: var(--em26-surface, #fffefa); }
/* the swatch file: a 300 px square with the resin disc in its upper part and a caption below; only the disc shows */
.em26-pal__dot.is-swatch .em26-pal__circle img { position: absolute; top: -3.46%; left: -37.5%; width: 175%; max-width: none; height: auto; }
.em26-pal__dot.is-tbd .em26-pal__circle {
  background: repeating-linear-gradient(45deg, #f1eee6 0 5px, var(--em26-surface, #fffefa) 5px 10px);
  box-shadow: 0 0 0 2px var(--em26-surface, #fffefa), 0 0 0 3px var(--em26-magenta, #b31368);
}
.em26-pal__dot:hover .em26-pal__circle,
.em26-pal__dot:focus-visible .em26-pal__circle { transform: scale(1.12); box-shadow: 0 0 0 2px var(--em26-surface, #fffefa), 0 0 0 3px var(--em26-pal-acc); }
.em26-pal__dot:focus-visible { outline: none; }
.em26-pal__dot:focus-visible .em26-pal__circle { box-shadow: 0 0 0 2px var(--em26-surface, #fffefa), 0 0 0 5px var(--em26-cobalt, #1d5dbb); }
@media (prefers-reduced-motion: reduce) { .em26-pal__circle { transition: none; } .em26-pal__dot:hover .em26-pal__circle { transform: none; } }
.em26-pal__label { display: flex; flex-direction: column; align-items: center; margin-top: 0.3rem; text-align: center; }
.em26-pal__code { color: #4d6268; font-family: var(--em26-font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 0.64rem; font-weight: 700; line-height: 1.1; }
.em26-pal__name { max-width: 4.875rem; font-size: 0.63rem; font-weight: 600; line-height: 1.15; }
@media (max-width: 43.75rem) {
  .em26-pal { padding: 1.05rem 0.9rem 0.6rem; }
  .em26-pal__head { flex-direction: column; gap: 0.85rem; }
  .em26-pal__title { font-size: 1.18rem; }
  .em26-pal__cta { align-self: stretch; }
  .em26-pal__row { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; padding: 0.65rem 0; }
  .em26-pal__dots { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: 0.5rem 0.1rem; }
  .em26-pal__dot { width: auto; }
  .em26-pal__name { max-width: 4.25rem; font-size: 0.6rem; }
}

/* ── Family chips (audit point 2): the sub-categories as a row of chips, same links as the former cards ── */
.em26-cx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; }
.em26-cx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border: 1.5px solid rgba(22, 53, 61, 0.18);
  border-radius: 999px;
  background: var(--em26-surface, #fffefa);
  color: var(--em26-ink, #16353d);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.em26-cx-chip img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.em26-cx-chip small { font-weight: 600; opacity: 0.7; }
.em26-cx-chip:hover { border-color: var(--em26-ink, #16353d); }
.em26-cx-chip.is-current { padding-left: 0.95rem; border-color: var(--em26-ink, #16353d); background: var(--em26-ink, #16353d); color: var(--em26-paper, #f7f4ec); }
.em26-cx-chip:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: 2px; }

/* ── COLORFUN buy box (assets/js/colour-palette.js): the real resin swatch in every colour circle, grouped by gamut ── */
form.variations_form ul.iconic-was-swatches.em26-real-swatches li.em26-real-swatch .iconic-was-swatch__graphic {
  background-color: var(--em26-surface, #fffefa) !important;
  background-image: var(--em26-swatch) !important;
  background-repeat: no-repeat !important;
  background-size: 175% auto !important;
  background-position: 50% 21% !important;
}
form.variations_form ul.iconic-was-swatches.em26-real-swatches li.em26-real-swatches__label {
  grid-column: 1 / -1;
  flex: 0 0 100%;
  margin: 0.5rem 0 -0.1rem;
  color: #4d6268;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  list-style: none;
  justify-self: start;
}

/* ---------- colour heroes: bubbles in the family accent, no medallion (owner approved 23 Oct 17:07 / 17:13, pushed 25 Oct 19:19) ----------
   Same bubble picture as the section, recoloured: tonery and effects teal, inks magenta, pigments saffron, COLORFUN cobalt.
   «Набори» keeps the multicolour bubbles. Every page below the root carries them, families and listings alike. */
html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini.em26-category-hero--accent-teal::before { background-image: 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%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3CradialGradient id='g0' 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='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='%23129A9A' stop-opacity='0.87'/%3E%3Cstop offset='.6' stop-color='%23129A9A' stop-opacity='0.62'/%3E%3Cstop offset='1' stop-color='%23129A9A' stop-opacity='0.22'/%3E%3C/radialGradient%3E%3CradialGradient id='g3' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%23129A9A' stop-opacity='0.73'/%3E%3Cstop offset='.6' stop-color='%23129A9A' stop-opacity='0.48'/%3E%3Cstop offset='1' stop-color='%23129A9A' 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='%23129A9A' 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='%23129A9A' 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"); }
html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini.em26-category-hero--accent-magenta::before { background-image: 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%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3CradialGradient id='g0' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%23B31368' stop-opacity='0.75'/%3E%3Cstop offset='.6' stop-color='%23B31368' stop-opacity='0.50'/%3E%3Cstop offset='1' stop-color='%23B31368' stop-opacity='0.17'/%3E%3C/radialGradient%3E%3CradialGradient id='g1' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%23B31368' stop-opacity='0.75'/%3E%3Cstop offset='.6' stop-color='%23B31368' stop-opacity='0.50'/%3E%3Cstop offset='1' stop-color='%23B31368' stop-opacity='0.17'/%3E%3C/radialGradient%3E%3CradialGradient id='g2' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%23B31368' stop-opacity='0.87'/%3E%3Cstop offset='.6' stop-color='%23B31368' stop-opacity='0.62'/%3E%3Cstop offset='1' stop-color='%23B31368' 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='%23B31368' 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='%23B31368' 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='%23B31368' fill-opacity='.85'/%3E%3Ccircle cx='600.0' cy='259.0' r='2.8' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E"); }
html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini.em26-category-hero--accent-saffron::before { background-image: 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%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3CradialGradient id='g0' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%23F2B632' stop-opacity='0.75'/%3E%3Cstop offset='.6' stop-color='%23F2B632' stop-opacity='0.50'/%3E%3Cstop offset='1' stop-color='%23F2B632' stop-opacity='0.17'/%3E%3C/radialGradient%3E%3CradialGradient id='g1' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%23F2B632' stop-opacity='0.75'/%3E%3Cstop offset='.6' stop-color='%23F2B632' stop-opacity='0.50'/%3E%3Cstop offset='1' stop-color='%23F2B632' 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='%23F2B632' stop-opacity='0.73'/%3E%3Cstop offset='.6' stop-color='%23F2B632' stop-opacity='0.48'/%3E%3Cstop offset='1' stop-color='%23F2B632' 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='%23F2B632' 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='%23F2B632' fill-opacity='.85'/%3E%3Ccircle cx='600.0' cy='259.0' r='2.8' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E"); }
html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini.em26-category-hero--accent-cobalt::before { background-image: 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%25' y='-30%25' width='160%25' height='160%25'%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='%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='g2' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%231D5DBB' stop-opacity='0.87'/%3E%3Cstop offset='.6' stop-color='%231D5DBB' stop-opacity='0.62'/%3E%3Cstop offset='1' stop-color='%231D5DBB' stop-opacity='0.22'/%3E%3C/radialGradient%3E%3CradialGradient id='g3' cx='.4' cy='.36' r='.75'%3E%3Cstop offset='0' stop-color='%231D5DBB' stop-opacity='0.73'/%3E%3Cstop offset='.6' stop-color='%231D5DBB' stop-opacity='0.48'/%3E%3Cstop offset='1' stop-color='%231D5DBB' 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='%231D5DBB' 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='%231D5DBB' fill-opacity='.85'/%3E%3Ccircle cx='600.0' cy='259.0' r='2.8' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E"); }
/* without the medallion the text takes the full row; on wide screens it stays left of the bubbles */
html:not(#em26-hero) body .em26-category-hero--mini.em26-category-hero--no-medallion .em26-category-hero__content { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
  html:not(#em26-hero) body .em26-category-hero--mini.em26-category-hero--no-medallion .em26-category-hero__content > * { max-width: min(46rem, 62%); }
}
@media (max-width: 47.99rem) {
  /* phones: small bubbles beside the heading (the eyebrow line stays whole above them) */
  html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini.em26-category-hero--no-medallion::before {
    inset: 3.6rem -0.5rem auto auto;
    width: 7.5rem;
    height: 5.25rem;
    opacity: 0.8;
    background-size: contain;
  }
  html:not(#em26-hero) body .em26-category-hero--mini.em26-category-hero--no-medallion h1 { padding-right: 6.25rem; }
}

/* ---------- inks root (audit point 5, owner approved 25 Oct): FLAMENCO and the sets first, the leftover brands in a quieter second row ---------- */
.em26-cx-tier { margin: -1.25rem 0 0.75rem; color: #4a6168; font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.em26-cx-family--rest { margin-top: 0; }
.em26-cx-family--rest .em26-cx-card { opacity: 0.86; }
.em26-cx-family--rest .em26-cx-card:hover, .em26-cx-family--rest .em26-cx-card:focus-visible { opacity: 1; }
.em26-cx-family--rest .em26-cx-card__photo { min-height: 6.5rem; }

/* ---------- phones: the bubbles sit beside the heading, never on the lead text (owner, 26 Oct) ----------
   The first placement started 3.6rem below the hero top and ran 5.25rem down, so on a one-line H1
   it reached into the description. Measured on «Прозорі тонери» at 390 px: eyebrow ends at y 41,
   H1 at 85, the lead starts at 98 — the band between 46 and 98 is the only safe one, and it also
   works for a two-line H1. */
@media (max-width: 47.99rem) {
  html:not(#em26-hero):not(#em26-cx) body.em26-category--colour-effects .em26-category-hero--mini.em26-category-hero--no-medallion::before {
    inset: 2.9rem -0.5rem auto auto;
    width: 5.6rem;
    height: 3.25rem;
  }
  html:not(#em26-hero) body .em26-category-hero--mini.em26-category-hero--no-medallion h1 { padding-right: 5.5rem; }
}

/* Colour root hero mosaic, owner review 26 Oct 18:37 (Safari at a wide window showed each photo blown up and clipped, with a white strip on the right).
   Each photo now sits in its own square tile; the picture is absolutely filled into it, so no browser has to guess the image's height. */
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero__photo.em26-category-hero__photo--mosaic {
  aspect-ratio: auto;
  align-self: stretch;
  grid-auto-rows: auto;
}
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero__photo--mosaic > .em26-category-hero__tile {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
}
html:not(#em26-hero):not(#em26-cx) body .em26-category-hero__photo--mosaic > .em26-category-hero__tile > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
}
/* Phones: whole photos need room, so two by two (four across made 70–90 px thumbnails). */
@media (max-width: 47.99rem) {
  html:not(#em26-hero):not(#em26-cx) body .em26-category-hero__photo.em26-category-hero__photo--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}