/*
 * Shared foundation for every catalogue section (Claude, UI/UX pass).
 *
 * Why: each section stylesheet styles its own cards but none sets the page
 * container, so category and product pages ran edge to edge on wide screens.
 * Presentation only. Specificity is deliberately low (:where) so section
 * rules still win. No markup, copy, URL, SEO or WooCommerce data is touched.
 */

:where(body[class*="em26-category--"], body[class*="em26-product--"]) {
  --em26f-gutter: clamp(1rem, 4vw, 2.5rem);
}

/* Category pages. */
:where(body[class*="em26-category--"]) .em26-woo-surface--category {
  box-sizing: border-box;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--em26f-gutter);
  padding-block-end: clamp(3rem, 6vw, 5rem);
}

:where(body[class*="em26-category--"]) .em26-woo-surface--category .em26-woocommerce-breadcrumb {
  margin: 0;
  padding: 1.25rem 0 1.5rem;
  color: var(--em26-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

:where(body[class*="em26-category--"]) .em26-woo-surface--category .em26-woocommerce-breadcrumb a {
  color: var(--em26-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:where(body[class*="em26-category--"]) .em26-woo-surface--category .em26-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-family: var(--em26-font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

:where(body[class*="em26-category--"]) .em26-woo-surface--category .em26-eyebrow::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
}

:where(body[class*="em26-category--"]) .em26-category-hero {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

/* The hero closes with a coloured rule and the first row of cards opens with a coloured rule of its own.
 * Touching, the two read as one broken line, so the grid always starts a clear step below the hero. */
body[class*="em26-category--"] .em26-woo-surface--category .em26-category-hero:has(~ ul.products) {
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

:where(body[class*="em26-category--"]) .em26-category-hero h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}

:where(body[class*="em26-category--"]) .em26-category-hero__lead {
  max-width: 50ch;
  margin: 1.1rem 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
}

/* Sub-category photo tiles need breathing room around their captions. Resin and
 * colour effects own their tile presentation, so the shared rule excludes them. */
body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects) ul.products > li.product-category .woocommerce-loop-category__title {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

:where(body[class*="em26-category--"]) .em26-category-editorial__inner {
  max-width: 46rem;
  margin: 0;
  padding: 0;
}

:where(body[class*="em26-category--"]) .em26-category-editorial__inner :where(p, li) {
  font-size: 1.0625rem;
  line-height: 1.62;
}

:where(body[class*="em26-category--"]) .em26-category-editorial__inner :where(table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Product pages. */
:where(body[class*="em26-product--"]) .em26-woo-surface--product {
  box-sizing: border-box;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--em26f-gutter);
  padding-block-end: clamp(3rem, 6vw, 5rem);
}

:where(body[class*="em26-product--"]) .em26-woo-surface--product .em26-woocommerce-breadcrumb {
  padding: 1.25rem 0 0;
}

:where(body[class*="em26-product--"]) div.product > .woocommerce-tabs,
:where(body[class*="em26-product--"]) div.product > .related,
:where(body[class*="em26-product--"]) div.product > .upsells {
  position: relative;
  z-index: 3;
  background: var(--em26-paper, #f7f4ec);
}

@media (max-width: 40rem) {
  :where(body[class*="em26-category--"]) .em26-category-hero h1 {
    max-width: none;
  }
}

/* Keep WooCommerce's hidden reset link from reserving a dead row below the
 * final variation. It returns to the same visual position once a selection is
 * made, while the native variation field remains the source of truth. */
body[class*="em26-product--"] form.variations_form table.variations td.value {
  position: relative;
}

body[class*="em26-product--"] form.variations_form .reset_variations {
  position: absolute;
  top: -2.3rem;
  right: 0;
  margin: 0;
}

body[class*="em26-product--"] form.variations_form table.variations .iconic-was-swatches {
  margin-bottom: 0.25rem;
}

/* --- 02:3xZ fixes found on decor product page (Liquid Leaf Cold Gold) --- */

/* Clear link: woocommerce/base CSS gives it left:0 as well, so it stretched over the label. Pin it to the right. */
body[class*="em26-product--"] form.variations_form .reset_variations {
  left: auto !important; right: 0 !important; width: auto;
}

/* Product tabs: the active tab had dark text on the ink fill (woocommerce.css "color: inherit" beats the theme rule).
 * !important is deliberate and limited to these two colour properties. */
body[class*="em26-product--"] .woocommerce-tabs ul.tabs li.active a {
  color: #f7f4ec !important; -webkit-text-fill-color: #f7f4ec !important;
}
body[class*="em26-product--"] .woocommerce-tabs ul.tabs li:not(.active) a { color: #16353d !important; }
body[class*="em26-product--"] .woocommerce-tabs ul.tabs li { background: transparent; }
body[class*="em26-product--"] .woocommerce-tabs .woocommerce-Tabs-panel { background: transparent; }

/* CommerceKit swatches: the selected swatch was white text on a near-white fill (looked like an empty box). */
body[class*="em26-product--"] form.variations_form button.cgkit-swatch.cgkit-swatch-selected {
  background: #16353d !important; border-color: #16353d !important; color: #f7f4ec !important; box-shadow: none !important;
}

/* Sticky gallery used to show through the 64px gap between the tabs card and the related-products card.
   A paper-coloured band below the tabs card (related has margin-top 4rem) hides it. */
body[class*="em26-product--"] div.product > .woocommerce-tabs::after {
  content: ""; position: absolute; left: calc(-1 * var(--em26f-gutter)); right: calc(-1 * var(--em26f-gutter)); top: 100%; height: 9rem;
  background: var(--em26-paper, #f7f4ec); pointer-events: none;
}

/* Artboard product page: keep the production-time marker attached to its note. */
.em26-artboard-delivery { display: grid !important; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; }
.em26-artboard-delivery > span {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: #f2b632; color: #16353d; font-weight: 800; font-size: 0.8rem; line-height: 1;
}
.em26-artboard-delivery p { margin: 0; }
.em26-artboard-delivery strong { display: block; margin-bottom: 0.2rem; }

/* Tools route cards: one distinct icon per route. */

body.em26-category--tools .em26-tools-route__glyph::before{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:left center;background-size:contain}
body.em26-category--tools .em26-tools-route--workspace .em26-tools-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%2238%22 width=%2250%22 height=%229%22 rx=%223%22/%3E%3Cpath d=%22M18 38v-5h32v5%22/%3E%3Crect x=%2226%22 y=%2241.5%22 width=%2216%22 height=%222.6%22 rx=%221.3%22 fill=%22%231D5DBB%22 stroke=%22none%22 /%3E%3Cpath d=%22M34 6c3 4.5 5 7.6 5 10.3a5 5 0 0 1-10 0C29 13.6 31 10.5 34 6z%22 fill=%22%231D5DBB%22 stroke=%22none%22 /%3E%3C/svg%3E")}
body.em26-category--tools .em26-tools-route--uv .em26-tools-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 28a26 26 0 0 1 52 0z%22/%3E%3Cpath d=%22M38 6v4%22/%3E%3Cpath d=%22M22 42l-4 8M38 42v9M54 42l4 8%22 stroke=%22%23F2B632%22 stroke-width=%223.2%22/%3E%3C/svg%3E")}
body.em26-category--tools .em26-tools-route--safety .em26-tools-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M38 5l22 7v14c0 13-9 21-22 25C25 47 16 39 16 26V12z%22/%3E%3Cpath d=%22M28 27l7 7 13-14%22 stroke=%22%23B31368%22 stroke-width=%223.6%22/%3E%3C/svg%3E")}
body.em26-category--tools .em26-tools-route--preparation .em26-tools-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2214%22 y=%2226%22 width=%2248%22 height=%2220%22 rx=%223%22/%3E%3Cpath d=%22M8 24c10-16 50-16 60 0%22 stroke-dasharray=%221 6%22 stroke=%22%23129A9A%22 stroke-width=%223.4%22/%3E%3Ccircle cx=%2238%22 cy=%2236%22 r=%224%22 fill=%22%23129A9A%22 stroke=%22none%22 /%3E%3C/svg%3E")}
body.em26-category--tools .em26-tools-route--finishing .em26-tools-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%2219%22/%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%229%22/%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%222%22 fill=%22%2316353D%22 stroke=%22none%22 /%3E%3Cpath d=%22M58 8l2.6 6.4L67 17l-6.4 2.6L58 26l-2.6-6.4L49 17l6.4-2.6z%22 fill=%22%231D5DBB%22 stroke=%22none%22 /%3E%3C/svg%3E")}
body.em26-category--tools .em26-tools-route--cleaning .em26-tools-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 24h14v-8h8l-2-6H30%22/%3E%3Crect x=%2220%22 y=%2224%22 width=%2222%22 height=%2225%22 rx=%225%22/%3E%3Ccircle cx=%2253%22 cy=%2214%22 r=%222.4%22 fill=%22%23129A9A%22 stroke=%22none%22 /%3E%3Ccircle cx=%2260%22 cy=%2222%22 r=%222.4%22 fill=%22%23129A9A%22 stroke=%22none%22 /%3E%3Ccircle cx=%2254%22 cy=%2229%22 r=%222.4%22 fill=%22%23129A9A%22 stroke=%22none%22 /%3E%3C/svg%3E")}
body.em26-category--tools .em26-tools-route--repair .em26-tools-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 38l30-22 8 11-30 22z%22/%3E%3Cpath d=%22M44 16l5-4 6 8-4 3z%22 fill=%22%23B31368%22 stroke=%22none%22 /%3E%3Cpath d=%22M62 38c2.4 3.4 4 5.8 4 7.8a4 4 0 0 1-8 0c0-2 1.6-4.4 4-7.8z%22 fill=%22%23B31368%22 stroke=%22none%22 /%3E%3C/svg%3E")}

/* Mobile and contrast fixes verified by the visual-review pass. */
body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects) ul.products li.product .button,
body[class*="em26-product--"]:not(.em26-product--resin):not(.em26-product--colour-effects) ul.products li.product .button {
  background: #16353d !important; color: #f7f4ec !important; border-color: #16353d !important;
}
body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects) ul.products li.product .button:hover,
body[class*="em26-product--"]:not(.em26-product--resin):not(.em26-product--colour-effects) ul.products li.product .button:hover {
  background: #1d5dbb !important; border-color: #1d5dbb !important;
}

body[class*="em26-product--"] form.variations_form .iconic-was-swatches__item { max-width: 100%; }
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch { white-space: normal !important; max-width: 100%; line-height: 1.35; }



/* Learning route cards: one distinct icon per route (was one generic glyph for all five). */

body.em26-category--learning .em26-learning-route__glyph::before{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:left center;background-size:contain}
body.em26-category--learning .em26-learning-route--artboxes .em26-learning-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2212%22 y=%2224%22 width=%2252%22 height=%2224%22 rx=%223%22/%3E%3Crect x=%228%22 y=%2214%22 width=%2260%22 height=%2210%22 rx=%223%22/%3E%3Cpath d=%22M38 14v34%22 stroke=%22%23F2B632%22 stroke-width=%224%22/%3E%3Cpath d=%22M38 14c-4-9-14-8-11-3 2 3 8 3 11 3zM38 14c4-9 14-8 11-3-2 3-8 3-11 3z%22/%3E%3C/svg%3E")}
body.em26-category--learning .em26-learning-route--courses .em26-learning-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%228%22 y=%226%22 width=%2260%22 height=%2236%22 rx=%224%22/%3E%3Cpath d=%22M32 16l16 8-16 8z%22 fill=%22%231D5DBB%22 stroke=%22none%22/%3E%3Cpath d=%22M26 49h24%22/%3E%3C/svg%3E")}
body.em26-category--learning .em26-learning-route--resin-set .em26-learning-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%2222%22 width=%2216%22 height=%2225%22 rx=%223%22/%3E%3Crect x=%2230%22 y=%2216%22 width=%2216%22 height=%2231%22 rx=%223%22/%3E%3Crect x=%2251%22 y=%2222%22 width=%2216%22 height=%2225%22 rx=%223%22/%3E%3Crect x=%2211%22 y=%2214%22 width=%2212%22 height=%226%22 rx=%221.5%22 fill=%22%23129A9A%22 stroke=%22none%22/%3E%3Crect x=%2232%22 y=%228%22 width=%2212%22 height=%226%22 rx=%221.5%22 fill=%22%23129A9A%22 stroke=%22none%22/%3E%3Crect x=%2253%22 y=%2214%22 width=%2212%22 height=%226%22 rx=%221.5%22 fill=%22%23129A9A%22 stroke=%22none%22/%3E%3C/svg%3E")}
body.em26-category--learning .em26-learning-route--colour-sets .em26-learning-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M38 5C20 5 8 17 8 29c0 11 9 19 19 19 5 0 6-4 3-7-2-3 0-7 5-7h9c8 0 14-5 14-12C58 14 50 5 38 5z%22/%3E%3Ccircle cx=%2221%22 cy=%2225%22 r=%223.4%22 fill=%22%23B31368%22 stroke=%22none%22/%3E%3Ccircle cx=%2231%22 cy=%2215%22 r=%223.4%22 fill=%22%23F2B632%22 stroke=%22none%22/%3E%3Ccircle cx=%2244%22 cy=%2215%22 r=%223.4%22 fill=%22%23129A9A%22 stroke=%22none%22/%3E%3Ccircle cx=%2252%22 cy=%2226%22 r=%223.4%22 fill=%22%231D5DBB%22 stroke=%22none%22/%3E%3C/svg%3E")}
body.em26-category--learning .em26-learning-route--certificate .em26-learning-route__glyph::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 76 54%22 fill=%22none%22 stroke=%22%2316353D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%227%22 y=%228%22 width=%2262%22 height=%2238%22 rx=%224%22/%3E%3Cpath d=%22M16 19h30M16 27h20%22/%3E%3Ccircle cx=%2254%22 cy=%2233%22 r=%227%22 fill=%22%2316353D%22 stroke=%22none%22/%3E%3Cpath d=%22M50 39l-2 10 6-3 6 3-2-10%22 stroke=%22%2316353D%22 stroke-width=%222.4%22/%3E%3C/svg%3E")}

/* Filament root: route/utility/guide cards are whole-card links; the global link underline
   was running through every line of body copy. Underline only the card title. */
body.em26-category--filament :is(a.em26-filament-route,a.em26-filament-utility__refill,a.em26-filament-utility__bot,.em26-filament-guides a){text-decoration:none}
body.em26-category--filament :is(a.em26-filament-route,a.em26-filament-utility__refill,a.em26-filament-utility__bot,.em26-filament-guides a) strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:currentColor}
body.em26-category--filament :is(a.em26-filament-route,a.em26-filament-utility__refill,a.em26-filament-utility__bot,.em26-filament-guides a):is(:hover,:focus-visible) strong{text-decoration-thickness:2px}

/* Decor glittery: the colour-landing option grid is 3 columns but holds 2 cards; leave no empty third. */
@media (min-width:48rem){body.em26-category--decor .em26-colour-landing__options:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Resin product page: remove doubled UI (owner decision, 21 Oct) =====
   Everything below is visual only. Duplicates are visually hidden with the clip technique,
   so they stay in the DOM (crawlers and screen readers still get them). */

/* 1. CommerceKit swatch row duplicates the theme's own "Оберіть фасування" chips.
      The variation <select> stays the source of truth; the theme chips drive it. */
body.em26-product--resin-technical form.variations_form :is(.cgkit-as-wrap,.cgkit-attribute-swatches,.cgkit-swatch-title,.cgkit-chosen-attribute){position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;padding:0 !important;border:0 !important}
body.em26-product--resin-technical form.variations_form table.variations{margin-bottom:0}
body.em26-product--resin-technical form.variations_form table.variations td.value{padding-bottom:0}

/* 2. Reviews: the theme section already has the "Відгуки" title; keep WooCommerce's own for crawlers only. */
body.em26-product--resin-technical .em26-resin-section--reviews .woocommerce-Reviews-title{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;padding:0 !important}

/* 3. Description / usage: when the editorial text opens with its own heading, the generic
      section title above it is redundant ("Як використовувати" + "Як використовувати Liquidissima"). */
body.em26-product--resin-technical :is(.em26-resin-section--description,.em26-resin-section--usage):has(> .em26-resin-section__body > :is(h2,h3):first-child) > h2:first-of-type{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0}
body.em26-product--resin-technical .em26-resin-section--usage .em26-resin-section__body > h3:first-child{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);letter-spacing:-.03em;line-height:1.08;margin-bottom:1rem}

/* 4. Hide a raw Instagram source only when the normalized theme video card really exists.
      A legacy source that the adapter cannot normalize must remain visible instead of disappearing. */
body.em26-product--resin-technical .em26-resin-section__body--video-source:has(~ .em26-resin-videos){display:none}

/* 5. Sticky gallery peeked out between the last section card and "Схожі товари". */
body.em26-product--resin-technical .em26-resin-sections::after{content:"";position:absolute;left:calc(-1 * var(--em26r-gutter,var(--em26f-gutter,2.5rem)));right:calc(-1 * var(--em26r-gutter,var(--em26f-gutter,2.5rem)));top:100%;height:12rem;background:var(--em26-paper,#f7f4ec);pointer-events:none}

/* ---------- Variation swatches: ONE frame (all products) ----------
   CommerceKit renders <li.cgkit-attribute-swatch><button.cgkit-swatch>. colour-product-design.css styles both,
   so a rounded outer box held a second square box (white fill, 2px radius, own border). The <li> is now the only
   visible frame; the native <button> is a flush, transparent hit area inside it. Selected state is carried by the <li>.
   !important is narrow: WooCommerce/CommerceKit CSS is unlayered and wins over @layer pages. */
body[class*="em26-product--"] form.variations_form li.cgkit-attribute-swatch {
  padding: 0; overflow: hidden; display: flex;
}
body[class*="em26-product--"] form.variations_form li.cgkit-attribute-swatch > button.cgkit-swatch {
  flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 1rem;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: inherit; font: inherit; cursor: pointer;
}
body[class*="em26-product--"] form.variations_form li.cgkit-attribute-swatch:has(> button.cgkit-swatch-selected) {
  background: #16353d; border-color: #16353d; color: #f7f4ec;
}
body[class*="em26-product--"] form.variations_form li.cgkit-attribute-swatch > button.cgkit-swatch.cgkit-swatch-selected {
  background: transparent !important; color: #f7f4ec !important;
}
body[class*="em26-product--"] form.variations_form li.cgkit-attribute-swatch > button.cgkit-swatch:focus-visible {
  outline: 3px solid #1d5dbb; outline-offset: 3px; border-radius: 8px !important;
}

/* The chosen value was printed twice ("Об'єм: 15 мл: 15 мл") and CommerceKit added a vague "Більше варіантів" line.
   Clipped (still in the DOM and read by assistive tech), not removed. Iconic's label keeps the single visible value. */
body[class*="em26-product--"]:not(.em26-product--resin-technical) form.variations_form :is(.cgkit-swatch-title, .cgkit-chosen-attribute, .ckit-chosen-attribute_semicolon) {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip-path: inset(50%) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
}

/* Colour swatches (Iconic WAS): the plugin draws a round white ring (a::before, 63px, grey border) inside the square
   tile, so a colour dot sat in a circle in a square. The tile is the only frame; the dot is larger. */
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch::before { content: none !important; }
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch .iconic-was-swatch__graphic--colour { width: 2.6rem !important; height: 2.6rem !important; }

/* Colour swatches, site-wide (owner, 22 Oct): no square frame. A round ring around the colour, the colour centred
   (the plugin's 30px container sat top-left in a 55px box), an even grid so every row lines up. Hover lifts the ring,
   the chosen colour shrinks a little inside a cobalt ring. White and pale colours keep a hairline so they stay visible. */
body[class*="em26-product--"] form.variations_form ul.iconic-was-swatches--colour-swatch {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
  gap: 0.5rem !important;
  justify-items: center;
  margin: 0;
  padding: 0;
}
body[class*="em26-product--"] form.variations_form ul.iconic-was-swatches--colour-swatch > .iconic-was-swatches__item { margin: 0 !important; }
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch {
  position: relative;
  display: inline-block !important; /* not grid: a 100% child of an auto grid track collapsed to 0 width */
  box-sizing: border-box;
  width: 3rem !important;
  height: 3rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.1875rem !important;
  border: 0.09375rem solid var(--em26-border) !important;
  border-radius: 50% !important;
  background: var(--em26-surface, #fffefa) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch .iconic-was-swatch__container {
  position: relative;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
}
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch .iconic-was-swatch__graphic--colour {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(22, 53, 61, 0.14);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch .iconic-was-swatch__container::after { border-radius: 50%; }
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch:hover { border-color: var(--em26-ink, #16353d) !important; }
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch:hover .iconic-was-swatch__graphic--colour { transform: scale(0.92); }
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch.iconic-was-swatch--selected {
  border: 0.125rem solid var(--em26-cobalt, #1d5dbb) !important;
  box-shadow: 0 0 0 0.1875rem rgba(29, 93, 187, 0.18) !important;
}
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch.iconic-was-swatch--selected .iconic-was-swatch__graphic--colour { transform: scale(0.84); }
body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb) !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch,
  body[class*="em26-product--"] form.variations_form a.iconic-was-swatch--colour-swatch .iconic-was-swatch__graphic--colour { transition: none; }
}

/* Product page, all sections but filament (it has its own): gallery + summary sit in .em26-pdp-top (assets/js/pdp-top.js).
   The wrapper reuses the product grid's columns, so the sticky photo now stops where the summary ends and the
   description no longer slides over it. */
body[class*="em26-product--"] div.product > .em26-pdp-top {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: inherit;
  align-items: start;
  min-width: 0;
}

/* Product glance on phones: WooCommerce's p.price green (#77a464) beat the ink colour. */
body.woocommerce div.product .em26-product-glance__price p.price,
body.woocommerce div.product .em26-product-glance__price p.price .amount { color: var(--em26-ink, #16353d); }

/* ---------- Catalogue product cards: one geometry for artboards, clocks, decor, silicones, tools, learning ----------
   Found on stage (21 Oct): in these sections the layered card rules in pages.css lose to WooCommerce's unlayered CSS,
   so the title and price touched the card edges and the price used WooCommerce's default green (#77a464, off-palette).
   Resin, colour effects and filament own their cards and are excluded. Same rhythm as the approved colour cards
   (0.75rem inset, 0.25rem text indent, ink price). Presentation only: no markup, price value, link or data changes. */
body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament) ul.products:not(:has(> li.product-category)) > li.product:not(.product-category) {
  box-sizing: border-box;
  padding: 0.75rem !important;
}

body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament) ul.products > li.product:not(.product-category) > a.woocommerce-LoopProduct-link {
  border-radius: 0.5rem;
  overflow: hidden;
}

body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament) ul.products > li.product:not(.product-category) .woocommerce-loop-product__title {
  margin: 0.9rem 0.25rem 0.5rem !important;
  padding: 0 !important;
  font-weight: 650;
  letter-spacing: -0.01em;
}

body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament) ul.products > li.product:not(.product-category) .price {
  margin: auto 0.25rem 0 !important;
  padding: 0 !important;
  color: var(--em26-ink, #16353d) !important;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament) ul.products > li.product:not(.product-category) .price :is(.woocommerce-Price-amount, bdi, ins) {
  color: inherit !important;
  background: transparent;
  text-decoration: none;
}

body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament) ul.products > li.product:not(.product-category) .price del {
  color: var(--em26-muted, #5a6f75);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Same card geometry for "Схожі товари" / upsells on product pages (found on stage: title on the card edge, small green price).
   Resin product pages and filament own their related cards and are excluded. */
body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) :is(.related, .upsells) ul.products > li.product {
  box-sizing: border-box;
  padding: 0.75rem !important;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) :is(.related, .upsells) ul.products > li.product > a.woocommerce-LoopProduct-link {
  border-radius: 0.5rem;
  overflow: hidden;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) :is(.related, .upsells) ul.products > li.product .woocommerce-loop-product__title {
  margin: 0.9rem 0.25rem 0.5rem !important;
  padding: 0 !important;
  font-weight: 650;
  letter-spacing: -0.01em;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) :is(.related, .upsells) ul.products > li.product .price {
  margin: auto 0.25rem 0 !important;
  padding: 0 !important;
  color: var(--em26-ink, #16353d) !important;
  font-size: 1.125rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) :is(.related, .upsells) ul.products > li.product .price :is(.woocommerce-Price-amount, bdi, ins) {
  color: inherit !important;
  background: transparent;
  text-decoration: none;
}

/* ---------- product pages of every section except resin-technical and filament:
 * ink price instead of WooCommerce green, the same title scale and tab spacing as colourants ---------- */
body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary .price,
body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary .price .amount,
body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary .price ins,
body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary .woocommerce-variation-price .price,
body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary .woocommerce-variation-price .amount {
  color: var(--em26-ink, #16353d) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

body.woocommerce[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) 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[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) div.product .woocommerce-tabs {
  margin-top: 1.75rem;
}

/* ---------- category plates of clocks, decor, silicones, tools, learning: same family as artboards ---------- */
body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament):not(.em26-category--artboards) ul.products > li.product-category {
  overflow: hidden;
  border-radius: var(--em26-radius-card, 0.75rem);
  box-shadow: 0 1px 2px rgba(22, 53, 61, 0.05), 0 9px 26px rgba(22, 53, 61, 0.07);
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament):not(.em26-category--artboards) ul.products > li.product-category:hover,
body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament):not(.em26-category--artboards) ul.products > li.product-category:focus-within {
  transform: translateY(-0.1875rem);
  box-shadow: 0 2px 4px rgba(22, 53, 61, 0.07), 0 16px 36px rgba(22, 53, 61, 0.12);
}

@media (max-width: 47.99rem), (prefers-reduced-motion: reduce) {
  body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament):not(.em26-category--artboards) ul.products > li.product-category:hover,
  body[class*="em26-category--"]:not(.em26-category--resin):not(.em26-category--colour-effects):not(.em26-category--filament):not(.em26-category--artboards) ul.products > li.product-category:focus-within {
    transform: none;
  }
}

/* =====================================================================
 * Filament: product cards, filter bar, packaging mini-landing
 * ===================================================================== */

/* cards: the button no longer runs past the card (WooCommerce gives it width:100% plus our side margins) */
body.em26-category--filament ul.products li.product:not(.product-category) a.button {
  width: auto !important;
  box-sizing: border-box;
  align-self: stretch;
}

body.em26-category--filament ul.products li.product:not(.product-category) {
  position: relative;
}

/* the "universal refill" star from the stock plugin: a pill over the photo instead of an empty band above it */
body.em26-category--filament li.product .sky-product-badges,
body.em26-category--filament li.product .em26-fil-badges {
  position: absolute;
  z-index: 2;
  top: 0.6rem;
  left: 0.6rem;
  display: flex;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

body.em26-category--filament li.product .sky-badge-star,
body.em26-category--filament li.product .em26-fil-star {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem 0.25rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 254, 250, 0.94);
  box-shadow: 0 1px 3px rgba(22, 53, 61, 0.18);
  color: var(--em26-ink, #16353d);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

body.em26-category--filament li.product .sky-badge-star::after,
body.em26-category--filament li.product .em26-fil-star::after {
  content: "рефіл";
  letter-spacing: 0.01em;
}

/* images: one frame for every colour, rating stars never push the title up */
body.em26-category--filament ul.products li.product:not(.product-category) img {
  padding: 0;
  object-fit: cover !important;
}

body.em26-category--filament ul.products li.product:not(.product-category) .star-rating {
  order: 0;
  margin-block: 0 0.25rem;
}

/* the photo link must not stretch: it pushed the title down on cards that share a row with a taller sibling */
body.em26-category--filament ul.products li.product:not(.product-category) > a.woocommerce-LoopProduct-link {
  flex: 0 0 auto;
}

body.em26-category--filament ul.products li.product:not(.product-category) .onsale {
  top: 0.6rem;
  left: 0.6rem;
  right: auto;
  min-height: 0;
  min-width: 0;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--em26-magenta, #b31368);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
}

/* out of stock cards read as unavailable but stay clickable (notify-me button remains) */
body.em26-category--filament ul.products li.product.outofstock:not(.product-category) img {
  opacity: 0.72;
}

body.em26-category--filament ul.products li.product.outofstock:not(.product-category) a.button {
  background: transparent !important;
  color: var(--em26-ink, #16353d) !important;
}

body.em26-category--filament ul.products li.product.is-filtered-out {
  display: none !important;
}

/* ---------- filter bar ---------- */
.em26-fil-filters {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--em26-border, rgba(22, 53, 61, 0.18));
  border-radius: var(--em26-radius-card, 0.75rem);
  background: var(--em26-surface, #fffefa);
  box-shadow: 0 1px 2px rgba(22, 53, 61, 0.05), 0 8px 22px rgba(22, 53, 61, 0.06);
}

.em26-fil-filters__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.em26-fil-filters__search {
  display: grid;
  gap: 0.3rem;
  min-width: min(100%, 15rem);
  flex: 0 1 18rem;
  color: var(--em26-muted, #5b6f73);
  font-size: 0.8125rem;
  font-weight: 700;
}

.em26-fil-filters__search input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--em26-border, rgba(22, 53, 61, 0.28));
  border-radius: var(--em26-radius-control, 0.5rem);
  background: #fff;
  color: var(--em26-ink, #16353d);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
}

.em26-fil-filters__search input:focus-visible,
.em26-fil-chip:focus-visible,
.em26-fil-filters__reset:focus-visible {
  outline: 0.1875rem solid var(--em26-cobalt, #1d5dbb);
  outline-offset: 0.125rem;
}

.em26-fil-filters__chips {
  display: flex;
  flex: 1 1 18rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.em26-fil-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--em26-border, rgba(22, 53, 61, 0.28));
  border-radius: 999px;
  background: #fff;
  color: var(--em26-ink, #16353d);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.em26-fil-chip i {
  min-width: 1.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--em26-ink, #16353d) 8%, transparent);
  font-size: 0.75rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.em26-fil-chip:hover { border-color: var(--em26-ink, #16353d); }

.em26-fil-chip[aria-pressed="true"] {
  border-color: var(--em26-ink, #16353d);
  background: var(--em26-ink, #16353d);
  color: #fff;
}

.em26-fil-chip[aria-pressed="true"] i { background: rgba(255, 255, 255, 0.22); }

.em26-fil-filters__reset {
  min-height: 2.75rem;
  padding: 0.35rem 0.5rem;
  border: 0;
  background: none;
  color: var(--em26-cobalt, #1d5dbb);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.em26-fil-filters__status {
  margin: 0;
  color: var(--em26-muted, #5b6f73);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.em26-fil-filters__legend {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--em26-border, rgba(22, 53, 61, 0.14));
  color: var(--em26-ink, #16353d);
  font-size: 0.875rem;
  line-height: 1.5;
}

.em26-fil-empty {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 2rem;
  padding: 1.5rem;
  border: 1px dashed var(--em26-border, rgba(22, 53, 61, 0.3));
  border-radius: var(--em26-radius-card, 0.75rem);
  background: var(--em26-surface, #fffefa);
  color: var(--em26-muted, #5b6f73);
}

.em26-fil-empty strong { color: var(--em26-ink, #16353d); font-size: 1.125rem; }

@media (max-width: 40rem) {
  .em26-fil-filters { padding: 0.9rem; }
  .em26-fil-filters__search { flex-basis: 100%; }
}

/* ---------- packaging mini-landing (filament root) ---------- */
.em26-filament-packaging {
  margin-block: clamp(2rem, 5vw, 3.5rem);
}

.em26-filament-packaging__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.em26-filament-pack {
  --pack: var(--em26-cobalt, #1d5dbb);
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--em26-border, rgba(22, 53, 61, 0.18));
  border-top: 0.25rem solid var(--pack);
  border-radius: var(--em26-radius-card, 0.75rem);
  background: var(--em26-surface, #fffefa);
  box-shadow: 0 1px 2px rgba(22, 53, 61, 0.05), 0 9px 26px rgba(22, 53, 61, 0.07);
}

.em26-filament-pack--refill { --pack: var(--em26-turquoise, #129a9a); }
.em26-filament-pack--weight { --pack: var(--em26-magenta, #b31368); }

.em26-filament-pack__tag {
  align-self: flex-start;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pack) 12%, transparent);
  color: var(--em26-ink, #16353d);
  font-size: 0.78rem;
  font-weight: 800;
}

.em26-filament-pack h3 {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.em26-filament-pack p {
  margin: 0;
  color: var(--em26-muted, #4d6469);
  line-height: 1.6;
}

.em26-filament-pack ul {
  display: grid;
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--em26-border, rgba(22, 53, 61, 0.14));
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.5;
}

.em26-filament-pack li {
  position: relative;
  padding-left: 1.1rem;
}

.em26-filament-pack li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pack);
}

.em26-filament-pack__link {
  color: var(--em26-cobalt, #1d5dbb);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.em26-filament-pack__link:focus-visible {
  outline: 0.1875rem solid var(--em26-cobalt, #1d5dbb);
  outline-offset: 0.125rem;
}

@media (max-width: 63.99rem) {
  .em26-filament-packaging__grid { grid-template-columns: minmax(0, 1fr); }
}

/* sale pill sits under the refill pill when a card has both; the wishlist heart keeps the right corner */
body.em26-category--filament ul.products li.product:not(.product-category):has(.sky-badge-star) .onsale,
body.em26-category--filament ul.products li.product:not(.product-category):has(.em26-fil-star) .onsale {
  top: 2.4rem;
}

/* Tools root: the seventh route would sit alone in a third row; on wide screens it becomes a full-width strip. */
@media (min-width: 64rem) {
  body .em26-tools-routes > .em26-tools-route:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    grid-template-columns: auto auto minmax(0, 1.4fr) minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas: "num glyph title small action" "num glyph desc small action";
    align-items: center;
    column-gap: 1.75rem;
    row-gap: 0.25rem;
    min-height: 0;
    padding-block: 1.4rem;
  }
  body .em26-tools-routes > .em26-tools-route:last-child:nth-child(3n + 1) .em26-tools-route__number { grid-area: num; }
  body .em26-tools-routes > .em26-tools-route:last-child:nth-child(3n + 1) .em26-tools-route__glyph { grid-area: glyph; margin: 0; }
  body .em26-tools-routes > .em26-tools-route:last-child:nth-child(3n + 1) strong { grid-area: title; align-self: end; margin: 0; }
  body .em26-tools-routes > .em26-tools-route:last-child:nth-child(3n + 1) p { grid-area: desc; align-self: start; margin: 0; }
  body .em26-tools-routes > .em26-tools-route:last-child:nth-child(3n + 1) small { grid-area: small; align-self: center; margin: 0; border: 0; padding: 0; }
  body .em26-tools-routes > .em26-tools-route:last-child:nth-child(3n + 1) .em26-tools-route__action { grid-area: action; margin: 0; border: 0; padding: 0; white-space: nowrap; }
}

/* Route grids: no lonely last card. When the last row would hold two cards in a 4-column grid, or five cards sit in a 3-column grid, the last cards widen to fill the row. */
@media (min-width: 64rem) {
  body .em26-clocks-routes > :nth-last-child(2):nth-child(4n + 1),
  body .em26-clocks-routes > :last-child:nth-child(4n + 2) {
    grid-column: span 2;
  }
  body .em26-learning-routes:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body .em26-learning-routes:has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }
  body .em26-learning-routes:has(> :nth-child(5):last-child) > :nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* Filament product page: the price amount took WooCommerce green inside an ink price block. */
body.em26-product--filament .summary .price,
body.em26-product--filament .summary .price .amount,
body.em26-product--filament .summary .price .woocommerce-Price-amount,
body.em26-product--filament .summary .price bdi,
body.em26-product--filament .summary .price ins,
body.em26-product--filament .summary .woocommerce-variation-price .price,
body.em26-product--filament .summary .woocommerce-variation-price .price .amount {
  color: var(--em26-ink) !important;
}

/* Artboards: preparation links start at the same line instead of centring their text in uneven boxes. */
body .em26-artboards-preparation > div > a {
  align-content: start;
}

/* ---------- product tabs (description / reviews): one calm style for decor, clocks, moulds, tools, learning ----------
 * WooCommerce's white tab with a -5px overlap collided with the theme's ink link; tabs become plain controls. */
body[class*="em26-product--"]:not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none;
}

body[class*="em26-product--"]:not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs ul.tabs::before,
body[class*="em26-product--"]:not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs ul.tabs li::before,
body[class*="em26-product--"]:not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

body[class*="em26-product--"]:not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--em26-border) !important;
  border-radius: var(--em26-radius-control, 0.5rem) !important;
  background: var(--em26-surface, #fffefa) !important;
}

body[class*="em26-product--"]:not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--em26-ink) !important;
  font-weight: 750;
  text-decoration: none;
}

body[class*="em26-product--"]:not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs ul.tabs li.active {
  border-color: var(--em26-ink) !important;
  background: var(--em26-ink) !important;
}

body[class*="em26-product--"]:not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs ul.tabs li.active a {
  color: var(--em26-paper, #f7f4ec) !important;
}

/* description headings: editorial scale, not display scale */
body[class*="em26-product--"]:not(.em26-product--resin-technical) .woocommerce-Tabs-panel h2 {
  margin-top: 1.7em;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical) .woocommerce-Tabs-panel h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.25;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical) .woocommerce-Tabs-panel > h2:first-child,
body[class*="em26-product--"]:not(.em26-product--resin-technical) .woocommerce-Tabs-panel > :first-child h2:first-child {
  margin-top: 0;
}

/* Entry 22: one vertical rhythm for stored product copy, one gallery rail state.
 * WooCommerce/reset leave every paragraph, list and table in descriptions at margin 0, so the saved
 * copy ran together. :where() keeps this a floor: section files that set their own rhythm
 * (filament, technical resins) still win. */
:where(body[class*="em26-product--"]:not(.em26-product--filament):not(.em26-product--resin-technical)) :where(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) :where(p) {
  margin-block: 0 0.9rem;
}

:where(body[class*="em26-product--"]:not(.em26-product--filament):not(.em26-product--resin-technical)) :where(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) :where(ul, ol) {
  margin-block: 0 1.1rem;
  padding-inline-start: 1.35rem;
}

:where(body[class*="em26-product--"]:not(.em26-product--filament):not(.em26-product--resin-technical)) :where(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) :where(li + li) {
  margin-top: 0.3rem;
}

:where(body[class*="em26-product--"]:not(.em26-product--filament):not(.em26-product--resin-technical)) :where(.woocommerce-Tabs-panel) :where(table) {
  margin-block: 1.25rem 1.75rem;
}

:where(body[class*="em26-product--"]:not(.em26-product--filament):not(.em26-product--resin-technical)) :where(.woocommerce-Tabs-panel, .woocommerce-product-details__short-description) > :where(:last-child) {
  margin-bottom: 0;
}

/* stored headings are often written in capitals: tight display tracking makes them hard to read */
body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .woocommerce-Tabs-panel :is(h2, h3) {
  letter-spacing: -0.012em;
}

/* gallery rail (CommerceKit): visible, calmer states; the first thumbnail reads as current until the slider starts */
.em26-woo-surface--product .cg-thumb-swiper .swiper-slide {
  border-radius: 0.5rem;
  overflow: hidden;
  opacity: 0.62;
  cursor: pointer;
  transition: opacity var(--em26-motion-fast, 160ms ease);
}

.em26-woo-surface--product .cg-thumb-swiper .swiper-slide:hover {
  opacity: 1;
}

.em26-woo-surface--product .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active,
.em26-woo-surface--product .cg-thumb-swiper .swiper-wrapper:not(:has(.swiper-slide-thumb-active)) > .swiper-slide:first-child {
  opacity: 1;
  outline: 2px solid var(--em26-cobalt);
  outline-offset: -2px;
}

/* Decor and clocks styled `.woocommerce-product-gallery`, which CommerceKit's markup does not use, so the
 * gallery card kept the generic cobalt top line next to a saffron summary card. Same card as moulds/tools. */
.em26-product--decor #commercegurus-pdp-gallery-wrapper.images,
.em26-product--clock #commercegurus-pdp-gallery-wrapper.images {
  position: sticky;
  top: 7rem;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border: 1px solid var(--em26-border);
  border-top: 4px solid var(--em26-saffron);
  border-radius: var(--em26-radius-card);
  background: var(--em26-surface);
}

.em26-product--decor #commercegurus-pdp-gallery-wrapper.images { box-shadow: var(--em26decor-product-shadow); }
.em26-product--clock #commercegurus-pdp-gallery-wrapper.images { box-shadow: var(--em26clock-shadow); }

@media (max-width: 47.99rem) {
  .em26-product--decor #commercegurus-pdp-gallery-wrapper.images,
  .em26-product--clock #commercegurus-pdp-gallery-wrapper.images {
    position: relative;
    top: auto;
    margin-bottom: 1rem !important;
  }
}

/* filament product page: the sale flag was WooCommerce's default green circle hanging off the gallery corner.
 * Same pill as every other section, inside the gallery card. */
body.em26-product--filament div.product > .onsale {
  top: 1.1rem;
  left: 1.1rem;
  right: auto;
  min-height: 0;
  min-width: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--em26-magenta, #b31368);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
}

/* WooCommerce's clearfix pseudo-elements on the cart form become real flex/grid items once a section lays the form out
 * as a row: on simple products at 390 px the empty ::before took the quantity column and the button was squeezed to
 * 72 px (text broke per syllable); on desktop they add a phantom gap. Every product section, one rule. */
.em26-woo-surface--product :is(form.cart, .woocommerce-variation-add-to-cart)::before,
.em26-woo-surface--product :is(form.cart, .woocommerce-variation-add-to-cart)::after {
  content: none !important;
  display: none !important;
}

/* Entry 24: tab labels and the review panel, every product section except technical resins (they have their own).
 * The review count is a <span> inside an inline-flex link, which swallows the space before it ("Відгуки0"). */
body[class*="em26-product--"]:not(.em26-product--resin-technical) .woocommerce-tabs ul.tabs li a > span {
  margin-inline-start: 0.4rem;
  font-weight: 600;
  opacity: 0.75;
}

@media (max-width: 47.99rem) {
  body[class*="em26-product--"]:not(.em26-product--resin-technical) .woocommerce-tabs > ul.tabs {
    flex-direction: row !important;
    flex-wrap: wrap;
  }

  body[class*="em26-product--"]:not(.em26-product--resin-technical) .woocommerce-tabs > ul.tabs > li {
    flex: 1 1 auto;
  }

  body[class*="em26-product--"]:not(.em26-product--resin-technical) .woocommerce-tabs > ul.tabs > li > a {
    width: 100%;
    justify-content: center;
  }
}

/* the panel heading repeats the tab label directly above it: kept in the DOM for screen readers, not shown */
body[class*="em26-product--"]:not(.em26-product--resin-technical) .woocommerce-Tabs-panel--reviews .woocommerce-Reviews-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical) #review_form #reply-title {
  display: block;
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.35;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical) #review_form label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 650;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical) #review_form p.stars a {
  color: var(--em26-cobalt);
  font-size: 1.25rem;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical) #review_form textarea#comment {
  width: 100%;
  min-height: 8rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--em26-border-strong);
  border-radius: var(--em26-radius-control, 0.5rem);
  background: var(--em26-surface, #fffefa);
  color: var(--em26-ink);
  font: inherit;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical) #review_form input#submit {
  min-height: 2.75rem;
  padding: 0.6rem 1.5rem;
  border: 0;
  border-radius: var(--em26-radius-control, 0.5rem);
  background: var(--em26-ink);
  color: var(--em26-paper, #f7f4ec);
  font-weight: 800;
  cursor: pointer;
}

body[class*="em26-product--"]:not(.em26-product--resin-technical) #review_form input#submit:hover {
  background: var(--em26-cobalt);
}

/* ===== Entry 25 (21 Oct): ONE purchase window for every product type =====
   Owner: "all product pages into one coherent layout; work out every WooCommerce window type".
   Reference = the colour-effects window (rounded card, cobalt top stripe, 16px sentence-case label, 3rem controls).
   Each section file kept its own copy of these rules (square corners, 13px uppercase labels, 80px qty, 52px button),
   so the window differed per section. Presentation only: no markup, price, stock, variation or form-data changes.
   Resin-technical keeps its own theme chips and is excluded. */
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 0.0625rem solid var(--em26-border);
  border-top: 0.25rem solid var(--em26-cobalt);
  border-radius: var(--em26-radius-card);
  background: var(--em26-paper);
  box-shadow: none;
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart table.variations :is(th.label, th.label label) {
  display: block; margin: 0 0 0.6rem; padding: 0;
  color: var(--em26-ink); font: 700 0.9375rem/1.35 var(--em26-font-sans);
  letter-spacing: 0; text-transform: none;
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart .reset_variations {
  color: var(--em26-cobalt); font-weight: 700; opacity: 1; text-underline-offset: 0.2em;
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart :is(.woocommerce-variation-add-to-cart, .variations_button),
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart:not(.variations_form) {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.65rem;
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart .quantity { margin: 0; }
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart .quantity input.qty {
  width: 4.5rem; min-height: 3rem; height: auto; padding-inline: 0.5rem;
  border: 0.09375rem solid var(--em26-border-strong); border-radius: var(--em26-radius-control);
  background: var(--em26-surface); color: var(--em26-ink);
  font: 700 1rem var(--em26-font-sans); text-align: center;
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart .single_add_to_cart_button {
  flex: 1 1 11rem; min-height: 3rem; height: auto; padding-inline: 1.35rem;
  border: 0 !important; border-radius: var(--em26-radius-control) !important;
}

/* Sold-out options: CommerceKit sets opacity .1 on the button, so the size was nearly invisible (and invisible when
   it was also the selected one). Keep them legible, dashed and struck through; the selected one keeps the ink fill. */
body[class*="em26-product--"] form.variations_form li.cgkit-attribute-swatch > button.cgkit-swatch.cgkit-as-outofstock {
  opacity: 1 !important; text-decoration: line-through; text-decoration-thickness: 0.0625rem;
}
body[class*="em26-product--"] form.variations_form li.cgkit-attribute-swatch:has(> button.cgkit-as-outofstock):not(:has(> button.cgkit-swatch-selected)) {
  border-style: dashed; background: transparent; color: var(--em26-muted);
}

/* Stock state + "notify me" (CommerceKit waitlist): a quiet pill instead of bright red on mint, and a cobalt action
   that is clearly different from the magenta buy button. */
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart .woocommerce-variation-availability p.stock {
  display: inline-flex; align-items: center; margin: 0 0 0.85rem; padding: 0.35rem 0.8rem; border-radius: 999px;
  font: 700 0.875rem/1.3 var(--em26-font-sans);
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart .woocommerce-variation-availability p.stock.out-of-stock {
  background: color-mix(in srgb, var(--em26-magenta) 10%, var(--em26-surface));
  color: color-mix(in srgb, var(--em26-magenta) 76%, var(--em26-ink));
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart :is(#ckwtl-button2, #ckwtl-button3) {
  min-height: 3rem; padding-inline: 1.35rem; border: 0; border-radius: var(--em26-radius-control);
  background: var(--em26-cobalt); color: #fff; font: 800 1rem/1.2 var(--em26-font-sans); cursor: pointer;
  transition: background 180ms ease;
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart :is(#ckwtl-button2, #ckwtl-button3):hover { background: var(--em26-ink); }
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart :is(#ckwtl-button2, #ckwtl-button3):focus-visible {
  outline: 0.1875rem solid var(--em26-cobalt); outline-offset: 0.1875rem;
}

/* The variations table carried its own tinted box (cream on decor, blue-grey on moulds) inside the card: a double frame. */
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart table.variations {
  margin: 0 0 1rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart .ckwtl-os-label-text {
  color: var(--em26-muted); font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
body[class*="em26-product--"]:not(.em26-product--resin-technical) .summary form.cart #ckwtl-button3 { flex: 1 1 11rem; width: auto; margin: 0; }

/* Gallery and summary card share one top stripe (owner: pick the most harmonious pairing). Colour, filament and resin had
   a cobalt gallery stripe above a magenta summary stripe; the other sections already matched. The purchase window inside
   keeps its cobalt stripe, so cobalt still marks "buy here". */
body.em26-product--colour-effects #commercegurus-pdp-gallery-wrapper.images,
body.em26-product--filament #commercegurus-pdp-gallery-wrapper.images,
body.em26-product--resin-technical #commercegurus-pdp-gallery-wrapper.images {
  border-top-color: var(--em26-magenta);
}

/* Filament: the stored short description is very long (the buy controls sat ~2900px down on a phone and 1565px down
   at 1470). The purchase window is shown directly under the price at every width, the description follows it.
   Only the visual order changes; DOM order, copy and links are untouched (same approach as resin products). */
body.em26-product--filament .summary { display: flex; flex-direction: column; }
body.em26-product--filament .summary > * { order: 7; }
body.em26-product--filament .summary > .product_title { order: 1; }
body.em26-product--filament .summary > :is(p.price, .sky-single-product-badges, .woocommerce-product-rating) { order: 2; }
body.em26-product--filament .summary > form.cart { order: 3; margin-bottom: 1.25rem; }
body.em26-product--filament .summary > :is(.woocommerce-product-details__short-description, .em26-filament-delivery, .em26-filament-product-context) { order: 4; }
body.em26-product--filament .summary > .commercekit-wishlist { order: 5; }
body.em26-product--filament .summary > .product_meta { order: 6; }

/* the gallery follows the reader while the long right column scrolls (the old sticky rule targeted a gallery class
   this product template does not print). Blocks below the buy area cover it, as on resin products. */
@media (min-width: 48rem) {
  body.em26-product--filament div.product > #commercegurus-pdp-gallery-wrapper.images {
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
  body.em26-product--filament div.product > :is(.woocommerce-tabs, .related, .upsells) {
    position: relative;
    z-index: 3;
    background: var(--em26-paper, #f7f4ec);
  }
}

/* Entry 27: gilding showcase (dekoruvannya/zolochennya-kantiv), Liquid Leaf first.
 * Presentation only; markup lives in template-parts/commerce/decor-gilding-showcase.php.
 * Every selector starts with body .em26-gilding so decor-design.css cannot reset it. */
body .em26-gilding { position: relative; display: flex; flex-direction: column; gap: 3.5rem; margin: 0 0 3rem; color: var(--em26-ink); }
body .em26-gilding__intro { display: flex; flex-direction: column; gap: 1.25rem; }
body .em26-gilding__nowrap { white-space: nowrap; }
body .em26-gilding__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
body .em26-gilding h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; color: var(--em26-ink); text-transform: none; }
body .em26-gilding h3 { margin: 0; letter-spacing: -0.01em; text-transform: none; }
body .em26-gilding p { margin: 0; }
body .em26-gilding ul { margin: 0; padding: 0; list-style: none; }
body .em26-gilding__block { display: flex; flex-direction: column; gap: 1.25rem; scroll-margin-top: 6rem; }
body .em26-gilding__block > header { display: flex; flex-direction: column; gap: 0.4rem; }
body .em26-gilding__block > header p { max-width: 60rem; font-size: 0.9375rem; line-height: 1.55; color: var(--em26-muted); }
body .em26-gilding__top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }

body .em26-gilding__hero { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--em26-ink); border-radius: var(--em26-radius-card); color: var(--em26-paper); }
body .em26-gilding__hero::before { content: ""; position: absolute; inset: 0.625rem; border: 0.0625rem solid rgba(242, 182, 50, 0.34); border-radius: 0.5rem; pointer-events: none; z-index: 3; }
body .em26-gilding__hero-main { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); flex: 1; }
body .em26-gilding__hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: 3.25rem 1.25rem 2.75rem 3.25rem; }
body .em26-gilding__hero-copy h3 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; color: var(--em26-paper); text-wrap: balance; }
body .em26-gilding__hero-copy p { max-width: 40ch; font-size: 1rem; line-height: 1.6; color: rgba(247, 244, 236, 0.88); }
body .em26-gilding__hero-actions { display: flex; flex-wrap: wrap; gap: 0.875rem 1.25rem; align-items: center; margin-top: 0.25rem; }
body .em26-gilding__cta { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.5rem; background: var(--em26-saffron); color: var(--em26-ink); border-radius: var(--em26-radius-control); font-size: 1rem; font-weight: 800; text-decoration: none; }
body .em26-gilding__cta:hover { background: #f7c654; color: var(--em26-ink); }
body .em26-gilding__text-link { color: var(--em26-paper); font-size: 0.9375rem; font-weight: 700; text-underline-offset: 0.2em; }
body .em26-gilding__text-link:hover { color: #fff; }
body .em26-gilding__cta:focus-visible, body .em26-gilding__text-link:focus-visible, body .em26-gilding__hero-shades a:focus-visible { outline: 0.1875rem solid var(--em26-saffron); outline-offset: 0.25rem; }
body .em26-gilding__hero-photo { position: relative; min-height: 25rem; }
body .em26-gilding__hero-photo img { position: absolute; top: 0; bottom: 0; left: 2.125rem; width: calc(100% - 2.125rem); height: 100%; max-width: none; object-fit: cover; object-position: 0% 40%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.875rem); mask-image: linear-gradient(90deg, transparent 0, #000 1.875rem); }
body .em26-gilding__hero-strip { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.625rem 2.625rem 2.125rem 3.25rem; margin: 0 0.625rem; border-top: 0.0625rem solid rgba(242, 182, 50, 0.34); }
body .em26-gilding__hero-shades { display: grid; grid-template-columns: repeat(2, max-content); grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 1rem 2.5rem; }
body .em26-gilding__hero-shades a { display: flex; align-items: center; gap: 0.75rem; color: var(--em26-paper); font-size: 0.9375rem; font-weight: 700; line-height: 1.2; text-decoration: none; }
body .em26-gilding__hero-shades a:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
body .em26-gilding__hero-shades small { display: block; margin-top: 0.125rem; font: 500 0.625rem/1.3 var(--em26-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(247, 244, 236, 0.66); }
body .em26-gilding__hero-shades .em26-gilding__dot { width: 3rem; height: 3rem; flex: 0 0 3rem; box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.35), inset 0 -0.5rem 0.75rem rgba(0, 0, 0, 0.16), 0 0 0 0.1875rem rgba(242, 182, 50, 0.22); }
body .em26-gilding__signature { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; flex: 0 0 auto; padding-left: 1.75rem; border-left: 0.0625rem solid rgba(242, 182, 50, 0.4); }
body .em26-gilding__signature span { font: 500 0.6875rem/1.3 var(--em26-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247, 244, 236, 0.72); }
body .em26-gilding__signature img { display: block; width: 14.75rem; height: auto; max-width: none; margin: 0 -1rem -0.875rem -0.875rem; }
body .em26-gilding__sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
body .em26-gilding__sheen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 170, 0.26) 50%, transparent 62%); transform: translateX(-130%); animation: em26-gilding-sheen 2.8s ease-out 0.8s 1 both; }
@keyframes em26-gilding-sheen { to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { body .em26-gilding__sheen::after { animation: none; } }

body .em26-gilding__dot { display: inline-block; width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; border-radius: 50%; box-shadow: inset 0 0 0 0.0625rem rgba(22, 53, 61, 0.25), inset 0 -0.375rem 0.625rem rgba(0, 0, 0, 0.12); }
body .em26-gilding__dot--gold { background: linear-gradient(135deg, #f3dd9a 0%, #d9a93f 48%, #a97a22 100%); }
body .em26-gilding__dot--silver { background: linear-gradient(135deg, #f4f6f7 0%, #b4bec3 50%, #8a979d 100%); }
body .em26-gilding__dot--bronze { background: linear-gradient(135deg, #e2b58a 0%, #b27a45 50%, #7b4a24 100%); }
body .em26-gilding__dot--cold { background: linear-gradient(135deg, #f3ead0 0%, #d4c48d 52%, #b9a56a 100%); }

body .em26-gilding__aside { display: flex; flex-direction: column; gap: 1.25rem; }
body .em26-gilding__card { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; box-sizing: border-box; padding: 1.5rem; background: var(--em26-surface); border: 0.0625rem solid var(--em26-border); border-radius: var(--em26-radius-card); }
body .em26-gilding__card h3 { font-size: 1.125rem; line-height: 1.25; font-weight: 800; }
body .em26-gilding__card p { font-size: 0.875rem; line-height: 1.55; color: var(--em26-muted); }
body .em26-gilding__card-links { margin-top: auto !important; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
body .em26-gilding__card-links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.875rem; font-weight: 700; color: var(--em26-cobalt); text-underline-offset: 0.2em; }
body .em26-gilding__card-links a:focus-visible, body .em26-gilding__shade-link:focus-visible { outline: 0.1875rem solid var(--em26-cobalt); outline-offset: 0.125rem; }

body .em26-gilding__uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
body .em26-gilding__use { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.625rem 1.5rem 1.5rem; background: var(--em26-surface); border: 0.0625rem solid var(--em26-border); border-radius: var(--em26-radius-card); }
body .em26-gilding__use-icon { display: block; margin-bottom: 0.375rem; max-width: 100%; }
body .em26-gilding__use h3 { font-size: 1rem; line-height: 1.3; font-weight: 800; }
body .em26-gilding__use p { font-size: 0.875rem; line-height: 1.55; color: var(--em26-muted); }

body .em26-gilding__table-wrap { background: var(--em26-surface); border: 0.0625rem solid var(--em26-border); border-radius: var(--em26-radius-card); overflow: hidden; }
body .em26-gilding__table { width: 100%; margin: 0; border-collapse: collapse; border: 0; font-size: 0.9375rem; line-height: 1.5; table-layout: auto; }
body .em26-gilding__table thead th { padding: 0.875rem 1.25rem; text-align: left; font: 500 0.6875rem/1.3 var(--em26-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--em26-muted); background: transparent; border: 0; border-bottom: 0.125rem solid var(--em26-ink); }
body .em26-gilding__table tbody th, body .em26-gilding__table tbody td { padding: 1.125rem 1.25rem; vertical-align: top; text-align: left; background: transparent; border: 0; border-bottom: 0.0625rem solid var(--em26-border); font-weight: 400; color: var(--em26-ink); }
body .em26-gilding__table tbody td { padding-top: 1.625rem; }
body .em26-gilding__table tbody tr:last-child th, body .em26-gilding__table tbody tr:last-child td { border-bottom: 0; }
body .em26-gilding__table tbody th { font-weight: 800; white-space: nowrap; }
body .em26-gilding__shade-link { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; color: var(--em26-ink); font-weight: 800; text-decoration: none; }
body .em26-gilding__shade-link:hover span { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 71.99rem) {
	body .em26-gilding__top { grid-template-columns: minmax(0, 1fr); }
	body .em26-gilding__aside { flex-direction: row; }
	body .em26-gilding__card { min-width: 0; }
	body .em26-gilding__uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
	body .em26-gilding { gap: 2.5rem; }
	body .em26-gilding__hero-main { grid-template-columns: minmax(0, 1fr); }
	body .em26-gilding__hero-copy { padding: 2rem 1.5rem 1.5rem; }
	body .em26-gilding__hero-photo { min-height: 0; aspect-ratio: 1 / 1; }
	body .em26-gilding__hero-photo img { left: 0; width: 100%; object-position: 50% 50%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.5rem); mask-image: linear-gradient(180deg, transparent 0, #000 1.5rem); }
	body .em26-gilding__hero-strip { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1.5rem 1.5rem 1.75rem; }
	body .em26-gilding__hero-shades { gap: 1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, max-content)); }
	body .em26-gilding__hero-shades .em26-gilding__dot { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; }
	body .em26-gilding__signature { padding-left: 0; border-left: 0; padding-top: 1.25rem; border-top: 0.0625rem solid rgba(242, 182, 50, 0.4); align-self: stretch; }
	body .em26-gilding__signature img { width: 12.5rem; }
	body .em26-gilding__aside { flex-direction: column; }
	body .em26-gilding__uses { grid-template-columns: minmax(0, 1fr); }
	body .em26-gilding__use { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.25rem; padding: 1.25rem; align-items: start; }
	body .em26-gilding__use-icon { grid-row: 1 / span 2; width: 4.5rem; height: 4.5rem; margin: 0; }
	body .em26-gilding__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	body .em26-gilding__table, body .em26-gilding__table tbody, body .em26-gilding__table tr, body .em26-gilding__table th, body .em26-gilding__table td { display: block; }
	body .em26-gilding__table tbody tr { padding: 1rem 1.25rem; border-bottom: 0.0625rem solid var(--em26-border); }
	body .em26-gilding__table tbody tr:last-child { border-bottom: 0; }
	body .em26-gilding__table tbody th, body .em26-gilding__table tbody td { padding: 0.25rem 0; border: 0; white-space: normal; }
	body .em26-gilding__table tbody td { padding-top: 0.25rem; }
	body .em26-gilding__table tbody td::before { content: attr(data-label); display: block; font: 500 0.6875rem/1.3 var(--em26-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--em26-muted); margin-bottom: 0.125rem; }
}

/* Entry 27b: Liquid Leaf product card: sibling shade links + own-production signature */
body .em26-leaf-shades { display: flex; flex-direction: column; gap: 0.625rem; margin: 0 0 1.25rem; }
body .em26-leaf-shades__label { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--em26-ink); }
body .em26-leaf-shades__list { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
body .em26-leaf-shades__list li { margin: 0; padding: 0; }
body .em26-leaf-shades__link { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.375rem 1rem 0.375rem 0.5rem; background: var(--em26-surface); border: 0.09375rem solid var(--em26-border-strong); border-radius: var(--em26-radius-control); color: var(--em26-ink); font-size: 0.875rem; font-weight: 700; line-height: 1.2; text-decoration: none; }
body .em26-leaf-shades__link:hover { border-color: var(--em26-ink); color: var(--em26-ink); }
body .em26-leaf-shades__link.is-current { border-color: var(--em26-ink); box-shadow: 0 0 0 0.1875rem rgba(29, 93, 187, 0.2); }
body .em26-leaf-shades__link:focus-visible { outline: 0.1875rem solid var(--em26-cobalt); outline-offset: 0.125rem; }
body .em26-leaf-shades .em26-gilding__dot { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; }
body .em26-leaf-shades__made { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; }
body .em26-leaf-shades__made span { font: 500 0.6875rem/1.3 var(--em26-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--em26-muted); }
body .em26-leaf-shades__made img { display: block; width: 9.375rem; height: auto; max-width: none; margin: -0.625rem 0 -0.625rem -0.5rem; }

/* Entry 27c: tables in stored product text span the text column (they shrank to their content and left a blank strip beside them) */
body[class*="em26-product--"]:not(.em26-product--colour-effects):not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-Tabs-panel table:not(.shop_attributes) { width: 100%; max-width: 100%; }
@media (max-width: 47.99rem) {
	body[class*="em26-product--"]:not(.em26-product--colour-effects):not(.em26-product--artboard):not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-Tabs-panel table:not(.shop_attributes) { display: block; overflow-x: auto; }
}

/* Entry 28: gilding category hero: gold medallion replaces the legacy leaf glyph */
body .em26-category-hero__medal { display: block; flex: 0 0 7rem; width: 7rem; height: 7rem; max-width: none; }
@media (max-width: 40rem) { body .em26-category-hero__medal { display: none; } }

/* Entry 30: artboards root: light wood hero (square photo, uncropped), own icons on the route cards, "what people make" block */
body .em26-wood-defs { position: absolute; width: 0; height: 0; }
body .em26-category-hero--wood { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem); align-items: center; gap: 3rem; margin-top: 1rem; padding: 2.75rem; border: 0.0625rem solid rgba(107, 68, 35, 0.24); border-radius: var(--em26-radius-card); background: repeating-linear-gradient(98deg, rgba(120, 78, 38, 0.035) 0 0.125rem, transparent 0.125rem 0.6875rem), linear-gradient(135deg, #fcf4e2 0%, #f6e6c6 55%, #eed7ad 100%); color: #3b2a1c; }
body .em26-category-hero--wood .em26-category-hero__content { position: relative; max-width: none; min-width: 0; }
body .em26-category-hero--wood .em26-eyebrow { color: #8a4b12; }
body .em26-category-hero--wood h1 { color: #2e2116; font-size: clamp(2.5rem, 2rem + 2.2vw, 3.75rem); }
body .em26-category-hero--wood .em26-category-hero__lead { color: #4a3623; }
body .em26-category-hero--wood .em26-category-hero__trust { color: #3b2a1c; border-left-color: #b8742a; }
body .em26-wood-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1.25rem; margin-top: 1.75rem; }
body .em26-wood-hero__cta { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.5rem; background: var(--em26-ink); color: var(--em26-paper); border-radius: var(--em26-radius-control); font-size: 1rem; font-weight: 800; text-decoration: none; }
body .em26-wood-hero__cta:hover { background: #0f262c; color: var(--em26-paper); }
body .em26-wood-hero__link { display: inline-flex; align-items: center; min-height: 2.75rem; color: #2e2116; font-size: 0.9375rem; font-weight: 700; text-underline-offset: 0.2em; }
body .em26-wood-hero__cta:focus-visible, body .em26-wood-hero__link:focus-visible { outline: 0.1875rem solid var(--em26-cobalt); outline-offset: 0.1875rem; }
body .em26-wood-hero__strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 1.5rem; padding-top: 1.375rem; border-top: 0.0625rem solid rgba(107, 68, 35, 0.28); }
body .em26-wood-hero__facts { display: grid; grid-template-columns: repeat(3, max-content); gap: 0.875rem 1.75rem; margin: 0; padding: 0; list-style: none; }
body .em26-wood-hero__facts small { max-width: 8.5rem; }
body .em26-wood-hero__signature { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; margin: 0; padding-left: 1.5rem; border-left: 0.0625rem solid rgba(107, 68, 35, 0.4); }
body .em26-wood-hero__signature span { font: 500 0.6875rem/1.3 var(--em26-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #6b5039; }
body .em26-wood-hero__signature img { display: block; width: 11rem; height: auto; max-width: none; margin: 0 -0.75rem -0.625rem -0.625rem; }
body .em26-wood-hero__facts li { display: flex; flex-direction: column; gap: 0.125rem; margin: 0; padding: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.2; color: #2e2116; }
body .em26-wood-hero__facts b { font-size: 1.625rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: #8a4b12; }
body .em26-wood-hero__facts small { font: 500 0.625rem/1.3 var(--em26-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #6b5039; }
body .em26-wood-hero__photo { position: relative; width: 100%; max-width: 32.5rem; justify-self: end; aspect-ratio: 1 / 1; overflow: hidden; border: 0.0625rem solid rgba(107, 68, 35, 0.28); border-radius: 0.625rem; box-shadow: 0 1.125rem 2.5rem rgba(59, 42, 28, 0.2); background: #f0dcb4; }
body .em26-wood-hero__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }

body .em26-artboards-route__icon { display: block; line-height: 0; }
body .em26-artboards-route__icon .em26-wood-icon { display: block; }

body .em26-wood-uses { display: flex; flex-direction: column; gap: 1.25rem; margin: 3.5rem 0 0; }
body .em26-wood-uses h2 { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
body .em26-wood-uses__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
body .em26-wood-use { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.625rem 1.5rem 1.5rem; background: var(--em26-surface); border: 0.0625rem solid var(--em26-border); border-top: 0.1875rem solid #c08a4a; border-radius: var(--em26-radius-card); }
body .em26-wood-use .em26-wood-icon { display: block; margin-bottom: 0.375rem; }
body .em26-wood-use h3 { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 800; }
body .em26-wood-use p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--em26-muted); }
body .em26-wood-uses + .em26-artboards-preparation { margin-top: 3.5rem; }

@media (max-width: 71.99rem) {
	body .em26-category-hero--wood { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2rem; }
	body .em26-wood-hero__photo { max-width: 32.5rem; justify-self: center; }
	body .em26-wood-uses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
	body .em26-category-hero--wood { padding: 1.25rem; gap: 1.5rem; }
	body .em26-wood-hero__signature { padding-left: 0; border-left: 0; padding-top: 1.25rem; border-top: 0.0625rem solid rgba(107, 68, 35, 0.4); align-self: stretch; }
	body .em26-wood-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1.25rem; width: 100%; }
	body .em26-wood-hero__facts small { max-width: none; }
	body .em26-wood-hero__facts small { overflow-wrap: break-word; }
	body .em26-wood-uses__grid { grid-template-columns: minmax(0, 1fr); }
	body .em26-wood-use { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.25rem; padding: 1.25rem; align-items: start; }
	body .em26-wood-use .em26-wood-icon { grid-row: 1 / span 2; width: 4.5rem; height: 4.5rem; margin: 0; }
}

/* Entry 30b: artboards category header: wooden-board medallion instead of the legacy glyph */
body .em26-category-hero__medal--wood { display: block; flex: 0 0 7rem; width: 7rem; height: 7rem; line-height: 0; }
body .em26-category-hero__medal--wood .em26-wood-icon { display: block; width: 100%; height: 100%; }
@media (max-width: 40rem) { body .em26-category-hero__medal--wood { display: none; } }

/* Entry 31: artboards root: workflow block in wood tones instead of dark ink (matches the light wood hero) */
body .em26-artboards-workflow { background: repeating-linear-gradient(98deg, rgba(120, 78, 38, 0.045) 0 0.125rem, transparent 0.125rem 0.6875rem), linear-gradient(135deg, #f2e0c0 0%, #e6c796 60%, #d9b98a 100%); border: 0.0625rem solid rgba(107, 68, 35, 0.28); box-shadow: none; color: #3b2a1c; }
body .em26-artboards-workflow .em26-eyebrow { color: #8a4b12; }
body .em26-artboards-workflow article h3 { color: #2e2116; }
body .em26-artboards-workflow article > p:last-child { color: #4a3623; }
body .em26-artboards-workflow article > p:last-child strong, body .em26-artboards-workflow li strong { color: #2e2116; }
body .em26-artboards-workflow ol { border-top-color: rgba(107, 68, 35, 0.35); border-left-color: rgba(107, 68, 35, 0.35); }
body .em26-artboards-workflow li { border-right-color: rgba(107, 68, 35, 0.35); border-bottom-color: rgba(107, 68, 35, 0.35); background: rgba(255, 252, 244, 0.35); }
body .em26-artboards-workflow li > b { color: #8a4b12; }
body .em26-artboards-workflow li span { color: #4a3623; }

/* Entry 34: gilding category: Liquid Leaf hero merged into the category header (light champagne, square photo) */
body .em26-category-hero--gilded { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem); align-items: center; gap: 3rem; margin-top: 1rem; padding: 2.75rem; border: 0.0625rem solid rgba(148, 107, 28, 0.28); border-radius: var(--em26-radius-card); background: repeating-linear-gradient(98deg, rgba(148, 107, 28, 0.03) 0 0.125rem, transparent 0.125rem 0.6875rem), linear-gradient(135deg, #fdf7e6 0%, #f8ecc9 55%, #f0dca8 100%); color: var(--em26-ink); }
body .em26-category-hero--gilded .em26-category-hero__content { position: relative; max-width: none; min-width: 0; }
body .em26-category-hero--gilded .em26-eyebrow { color: #7a5614; }
body .em26-category-hero--gilded h1 { font-size: clamp(2.5rem, 2rem + 2.2vw, 3.75rem); }
body .em26-category-hero--gilded .em26-category-hero__lead { color: #4a4636; }
body .em26-gilding__pitch { max-width: 58rem; margin: 1.5rem 0 0; padding-left: 1rem; border-left: 0.25rem solid #d4a43a; font-size: 1rem; line-height: 1.6; color: var(--em26-ink); }
body .em26-category-hero--gilded .em26-gilding__hero-actions { margin-top: 1.5rem; }
body .em26-category-hero--gilded .em26-gilding__text-link { color: var(--em26-ink); }
body .em26-category-hero--gilded .em26-gilding__text-link:hover { color: var(--em26-ink); }
body .em26-category-hero--gilded .em26-gilding__cta:focus-visible, body .em26-category-hero--gilded .em26-gilding__text-link:focus-visible, body .em26-category-hero--gilded .em26-gilding__hero-shades a:focus-visible { outline-color: var(--em26-cobalt); }
body .em26-category-hero--gilded .em26-gilding__hero-strip { position: static; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem 2rem; margin: 1.5rem 0 0; padding: 1.375rem 0 0; border-top: 0.0625rem solid rgba(148, 107, 28, 0.32); }
body .em26-category-hero--gilded .em26-gilding__hero-shades { margin: 0; padding: 0; list-style: none; }
body .em26-category-hero--gilded .em26-gilding__hero-shades a { color: var(--em26-ink); }
body .em26-category-hero--gilded .em26-gilding__hero-shades small { color: #6b6246; }
body .em26-category-hero--gilded .em26-gilding__hero-shades .em26-gilding__dot { box-shadow: inset 0 0 0 0.0625rem rgba(22, 53, 61, 0.2), inset 0 -0.5rem 0.75rem rgba(0, 0, 0, 0.12), 0 0 0 0.1875rem rgba(212, 164, 58, 0.28); }
body .em26-category-hero--gilded .em26-gilding__signature { padding-left: 1.5rem; border-left: 0.0625rem solid rgba(148, 107, 28, 0.4); }
body .em26-category-hero--gilded .em26-gilding__signature span { color: #6b6246; }
body .em26-category-hero--gilded .em26-gilding__signature img { width: 12.5rem; margin: 0 -0.875rem -0.75rem -0.75rem; }
/* Hero photo is part of the panel, not a framed picture inside it: it bleeds to the panel's top, right and bottom edges. */
body .em26-category-hero--gilded { overflow: hidden; align-items: stretch; }
body .em26-category-hero--gilded .em26-category-hero__content { align-self: center; }
body .em26-category-hero--gilded .em26-gilding__hero-photo { position: relative; display: block; width: auto; max-width: none; min-height: 26rem; margin: -2.75rem -2.75rem -2.75rem 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
body .em26-category-hero--gilded .em26-gilding__hero-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
body .em26-gilding__top { grid-template-columns: minmax(0, 1fr); }
body .em26-gilding__aside { flex-direction: row; }
body .em26-gilding__card { min-width: 0; }
@media (max-width: 71.99rem) {
	body .em26-category-hero--gilded { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2rem; }
	/* Safari (iOS): a stretched grid item with only absolute children ignores aspect-ratio and collapses to a 60 px thumbnail
	   (owner's phone screenshot, 25 Oct). The photo itself now carries the ratio, so the box takes its height in every engine. */
	body .em26-category-hero--gilded .em26-gilding__hero-photo { align-self: end; min-height: 0; aspect-ratio: auto; margin: 0 -2rem -2rem; }
	body .em26-category-hero--gilded .em26-gilding__hero-photo img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 47.99rem) {
	body .em26-category-hero--gilded { padding: 1.25rem; gap: 1.5rem; }
	body .em26-category-hero--gilded .em26-gilding__hero-photo { margin: 0 -1.25rem -1.25rem; }
	body .em26-category-hero--gilded .em26-gilding__hero-strip { padding: 1.375rem 0 0; flex-direction: column; align-items: flex-start; }
	body .em26-category-hero--gilded .em26-gilding__signature { padding-left: 0; border-left: 0; padding-top: 1.25rem; border-top: 0.0625rem solid rgba(148, 107, 28, 0.4); align-self: stretch; }
	body .em26-gilding__aside { flex-direction: column; }
}


/* Entry 35: one icon system for every category header (replaces the legacy CSS-drawn glyphs) and for decor route cards */
body .em26-category-hero__medal--icon {
	--ic-c: var(--em26-cobalt);
	display: grid; place-items: center; box-sizing: border-box; flex: 0 0 9.5rem; width: 9.5rem; height: 9.5rem; padding: 0.875rem;
	border: 1px solid color-mix(in srgb, var(--ic-c) 32%, var(--em26-border));
	border-radius: 1.75rem; background: color-mix(in srgb, var(--ic-c) 8%, var(--em26-surface));
	box-shadow: 0 10px 26px rgba(22, 53, 61, 0.1);
}
body .em26-category-hero__medal--icon .em26-section-icon { display: block; width: 100%; height: 100%; max-width: none; }
body .em26-category-hero__medal--decor, body .em26-category-hero__medal--gilding, body .em26-category-hero__medal--stands, body .em26-category-hero__medal--clock { --ic-c: var(--em26-saffron); }
body .em26-category-hero__medal--glass, body .em26-category-hero__medal--botanical, body .em26-category-hero__medal--printing { --ic-c: var(--em26-turquoise); }
body .em26-category-hero__medal--marine, body .em26-category-hero__medal--tools, body .em26-category-hero__medal--colorfun { --ic-c: var(--em26-magenta); }
body .em26-category-hero__medal--stones, body .em26-category-hero__medal--molds, body .em26-category-hero__medal--learning { --ic-c: var(--em26-cobalt); }
@media (max-width: 40rem) { body .em26-category-hero__medal--icon { display: none; } }

body .em26-decor-route { --ic-c: var(--em26-turquoise); }
body .em26-decor-route--stones { --ic-c: var(--em26-cobalt); }
body .em26-decor-route--marine, body .em26-decor-route--textures { --ic-c: var(--em26-magenta); }
body .em26-decor-route--gilding, body .em26-decor-route--stands { --ic-c: var(--em26-saffron); }
body .em26-decor-route__icon {
	display: grid; place-items: center; box-sizing: border-box; width: 4.5rem; height: 4.5rem; padding: 0.4rem;
	border: 1px solid color-mix(in srgb, var(--ic-c) 32%, var(--em26-border)); border-radius: 1rem;
	background: color-mix(in srgb, var(--ic-c) 8%, var(--em26-surface));
}
body .em26-decor-route__icon .em26-section-icon { display: block; width: 100%; height: 100%; }

/* EM-05: «Очистити» sat absolutely above the value row (top: -2.3rem) and overlapped the spec tiles and the
 * variation frame on phones. It now sits in the flow under the options, right-aligned, with a 44 px target.
 * One rule for every product family (the family sheets already set the same colour and size). */
body[class*="em26-product--"] form.variations_form .reset_variations {
  position: static;
  display: flex;
  width: fit-content;
  min-height: 2.75rem;
  align-items: center;
  margin: 0.25rem 0 0 auto;
}

/* EM-06: the description panel had padding 0 (WooCommerce's panel rule beat the family sheets), so text sat on the
 * frame; tabs of colour products overlapped by 2 px. Panels get 16 px (20-24 px from tablet), one rule for all
 * families that do not carry their own panel design (filament, resin). Colour products now share the calm tab style. */
body[class*="em26-product--"]:not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs .woocommerce-Tabs-panel {
  padding: 1rem;
  box-sizing: border-box;
}

@media (min-width: 48rem) {
  body[class*="em26-product--"]:not(.em26-product--filament):not(.em26-product--resin-technical) .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 1.5rem;
  }
}

/* The refill star tells the truth: it stays only while a refill that earns it is in stock (classes come from inc/filament-supply-formats.php). */
body.em26-category--filament li.product.em26-fmt-known:not(.em26-fmt-ref-in) .sky-product-badges,
body.em26-category--filament li.product.em26-fmt-known:not(.em26-fmt-ref-in) .sky-badge-star {
  display: none;
}

body.em26-category--filament ul.products li.product.em26-fmt-known:not(.em26-fmt-ref-in):not(.product-category) .onsale {
  top: 0.6rem;
}

/* Touch targets (44 px): the wishlist heart is 30 px on every product card, the filament swatches are 38-42 px tall, the related-product button is 36 px. */
body.woocommerce ul.products li.product .commercekit-save-wishlist::after {
  content: "";
  position: absolute;
  inset: -0.4375rem;
}

body.em26-product--filament .iconic-was-swatch,
body.em26-product--filament .cgkit-swatch,
body.em26-product--filament ul.products li.product a.button {
  min-height: 2.75rem;
}

/* Breadcrumbs on every category and product page: WooCommerce's clearfix ::before/::after became empty flex items, so the
   8 px gap pushed the first crumb 8 px right of the hero and the gallery. Same left edge everywhere now. */
nav.woocommerce-breadcrumb.em26-woocommerce-breadcrumb::before,
nav.woocommerce-breadcrumb.em26-woocommerce-breadcrumb::after { display: none; }
/* 44 px hit area without moving the line: padding and an equal negative margin, crumbs centred on one axis */
nav.woocommerce-breadcrumb.em26-woocommerce-breadcrumb { align-items: center; }
nav.woocommerce-breadcrumb.em26-woocommerce-breadcrumb a { margin-block: -0.75rem; padding-block: 0.75rem; }

/* Gilding page v2 (22 Oct): task first (ways), Liquid Leaf shades once with a real photo, product grid earlier,
   real-work gallery after the products. Owner workshop photos in assets/images/gilding/. */
body .em26-gilding--choice { gap: 3rem; margin: 0 0 2.5rem; }
body .em26-gilding--uses { gap: 1.5rem; margin: 3rem 0; }
body .em26-gilding__head { display: flex; flex-direction: column; gap: 0.5rem; }
body .em26-gilding__head p { max-width: 60rem; font-size: 1rem; line-height: 1.55; color: var(--em26-muted); }


body .em26-gilding__shades { display: flex; flex-direction: column; gap: 1.5rem; }
body .em26-gilding__block > header.em26-gilding__shades-head { flex-direction: row; text-align: start; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
body .em26-gilding__shade-effect { font-size: 0.9375rem; font-weight: 650; line-height: 1.45; }
body .em26-gilding__shade-pair { font-size: 0.9375rem; line-height: 1.5; color: var(--em26-muted); }
body .em26-gilding__shade-pair span { color: var(--em26-ink); }
body .em26-gilding__signature.em26-gilding__signature--shades { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0; border: 0; }
body .em26-gilding__signature--shades span { color: #6b6246; }
body .em26-gilding__signature--shades img { width: 9rem; height: auto; margin: 0; }

body .em26-gilding__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
body .em26-gilding__photo-card { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
body .em26-gilding__photo-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 0.375rem; border-radius: var(--em26-radius-card, 0.75rem); }
body .em26-gilding__photo-card h3 { font-size: 1.125rem; font-weight: 750; line-height: 1.2; }
body .em26-gilding__photo-card p { font-size: 0.9375rem; line-height: 1.5; color: var(--em26-muted); }
body .em26-gilding__also { font-size: 0.9375rem; line-height: 1.55; color: var(--em26-muted); }

body #em26-gilding-shades, body #em26-gilding-more, body #em26-gilding-use { scroll-margin-top: 6rem; }

@media (max-width: 71.99rem) {
}
@media (max-width: 63.99rem) {
  body .em26-gilding__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 37.49rem) {
  body .em26-gilding__gallery { grid-template-columns: minmax(0, 1fr); }
  body .em26-gilding--choice { gap: 2rem; }
}

/* Site notices moved under the products (inc/single-navigation.php): plain text, no coloured plate. */
body .em26-moved-notices { max-width: 46rem; margin: clamp(2rem, 4vw, 3rem) 0 0; }
body .em26-moved-notices > section { margin: 0 0 1rem !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--em26-ink, #16353d) !important; }
body .em26-moved-notices p { margin: 0 0 0.9rem !important; color: inherit !important; font-size: 1.0625rem; line-height: 1.62; }
body .em26-moved-notices strong { font-weight: 600; }

/* ---------- Artboards root: route cards with real photos (owner-approved prototype, 22 Oct) ----------
   One warm plate for every photo; white photo backgrounds melt into it (multiply); one soft floor shadow, so photos
   shot with and without shadows read as one series. One magenta top line for all cards. Phones: photo left, text right. */
body .em26-artboards-routes .em26-artboards-route { padding: 0; gap: 0; border-top-color: var(--em26-magenta); grid-template-rows: auto auto 1fr; }
body .em26-artboards-route__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid rgba(22, 53, 61, 0.12);
  background: linear-gradient(180deg, #f6efe2, #efe4d1);
}
body .em26-artboards-route__photo img,
body .em26-artboards-route__photo svg {
  position: absolute;
  inset: 13% 12% 15%;
  width: 76%;
  height: 72%;
  max-width: none;
  object-fit: contain;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body .em26-artboards-route__photo--cutout img { mix-blend-mode: multiply; }
body .em26-artboards-route__photo--cutout::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 9%;
  height: 8%;
  background: radial-gradient(ellipse at center, rgba(22, 53, 61, 0.22), rgba(22, 53, 61, 0) 70%);
  pointer-events: none;
}
body .em26-artboards-route__photo--scene img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
body .em26-artboards-route__photo--svg svg { inset: 8% 10% 6%; width: 80%; height: 86%; }
body .em26-artboards-route__photo--whale img { transform: rotate(-38deg) scale(1.12); }
body .em26-artboards-route__photo--map img { transform: scale(1.22); }
body .em26-artboards-route__photo--plank img { transform: scale(0.8); }
body .em26-artboards-route__photo--framed img { transform: scale(1.14); }
body .em26-artboards-route:hover .em26-artboards-route__photo--cutout:not(.em26-artboards-route__photo--whale):not(.em26-artboards-route__photo--map):not(.em26-artboards-route__photo--plank):not(.em26-artboards-route__photo--framed) img,
body .em26-artboards-route:hover .em26-artboards-route__photo--scene img { transform: scale(1.03); }
body .em26-artboards-routes .em26-artboards-route > strong { margin: 1.1rem 1.25rem 0.35rem; }
body .em26-artboards-routes .em26-artboards-route > small { margin: 0 1.25rem 1.4rem; }
body .em26-artboards-routes .em26-artboards-route > i { z-index: 1; }
@media (max-width: 47.99rem) {
  body .em26-artboards-routes .em26-artboards-route { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; min-height: 0; }
  body .em26-artboards-route__photo { grid-row: 1 / span 2; grid-column: 1; width: 7.5rem; height: auto; min-height: 7.5rem; align-self: stretch; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid rgba(22, 53, 61, 0.12); }
  body .em26-artboards-routes .em26-artboards-route > strong,
  body .em26-artboards-routes .em26-artboards-route > small { grid-column: 2; min-width: 0; }
  body .em26-artboards-routes .em26-artboards-route > strong { margin: 0.9rem 2.25rem 0.25rem 0.9rem; }
  body .em26-artboards-routes .em26-artboards-route > small { margin: 0 0.9rem 0.9rem; font-size: 0.875rem; line-height: 1.45; }
  /* narrow photo column: the larger desktop scales would clip the whale and the framed boards */
  body .em26-artboards-route__photo--whale img { transform: rotate(-38deg) scale(0.92); }
  body .em26-artboards-route__photo--framed img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body .em26-artboards-route__photo img { transition: none; }
}

/* ===================== Category SEO texts: one reading format on every category (owner, 22 Oct 15:49) =====================
   The text, its order and every link stay as written in the admin; only the reading layout changes. One quiet divider
   instead of a card with a coloured bar, no 200 px gap above, headings sized for reading (not hero size), even rhythm,
   ink dots for lists, the editor's ✅ emoji drawn as a small ink tick (inc: category-editorial.php wraps it). */
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial {
  clear: both;
  width: 100%;
  max-width: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0 !important;
  padding: clamp(2rem, 4vw, 2.75rem) 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(22, 53, 61, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner {
  max-width: 44rem;
  margin: 0;
  padding: 0;
  color: #2c4850;
  font-family: var(--em26-font-sans);
  font-size: 1rem;
  line-height: 1.7;
}
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner :is(p, li) {
  max-width: none;
  margin: 0 0 0.85rem;
  color: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner :is(strong, b) { color: var(--em26-ink); font-weight: 650; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner [style*="font-weight"] { font-weight: inherit !important; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner h2 {
  max-width: 30ch;
  margin: 2.5rem 0 0.9rem;
  color: var(--em26-ink);
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner :is(h3, h4, h5) {
  margin: 1.9rem 0 0.6rem;
  color: var(--em26-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner > :first-child { margin-top: 0; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner > :last-child { margin-bottom: 0; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner :is(ul, ol) { margin: 0 0 1.1rem; padding-left: 1.35rem; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner li { margin-bottom: 0.4rem; padding-left: 0.2rem; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner ul > li::marker { color: var(--em26-turquoise); font-size: 1.1em; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner ol > li::marker { color: #0b6e6e; font-weight: 700; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner a { color: var(--em26-cobalt); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner table { display: block; max-width: 100%; overflow-x: auto; margin: 0 0 1.2rem; border-collapse: collapse; font-size: 0.9375rem; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner :is(th, td) { padding: 0.55rem 0.75rem; border: 1px solid rgba(22, 53, 61, 0.16); text-align: left; vertical-align: top; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner img { max-width: 100%; height: auto; border-radius: var(--em26-radius-card, 0.75rem); }
/* the editor's ✅ → a small ink tick (the character stays in the text for readers and search) */
body .em26-ed-tick {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 0.45em 0 0;
  overflow: hidden;
  color: transparent;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.12em;
  background: no-repeat center / 0.95em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23129A9A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 47.99rem) {
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner h2 { margin-top: 2rem; }
}
/* SEO texts on desktop: H2 in a side column on the left, the text on the right; together they fill the container width
   (owner approved 22 Oct 16:21). One reading direction, nothing split. Spacing only by margin-top, so a floated H2 and
   the first block of its section start on the same line. Phones keep the single column above. */
@media (min-width: 64rem) {
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner {
    --em26-ed-side: clamp(13rem, calc(100% - 50rem), 24rem);
    display: flow-root;
    max-width: none;
  }
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner.em26-category-editorial__inner > * {
    max-width: 46rem;
    margin: 0.9rem 0 0 calc(var(--em26-ed-side) + 3.5rem);
  }
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner.em26-category-editorial__inner > :first-child,
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner.em26-category-editorial__inner > :is(h2, .em26-ed-head, .em26-ed-label):first-child + * { margin-top: 0; }
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner.em26-category-editorial__inner > :is(h2, .em26-ed-head, .em26-ed-label) {
    float: left;
    clear: both;
    width: var(--em26-ed-side);
    max-width: none;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.25;
  }
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner.em26-category-editorial__inner > :is(h2, .em26-ed-head):not(:first-child),
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner.em26-category-editorial__inner > :is(h2, .em26-ed-head):not(:first-child) + * { margin-top: 3rem; }
  /* when the section headings are H3/H4 or bold paragraphs, the H2s (if any) are not side headings: they keep the text column */
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner.em26-category-editorial__inner:has(> .em26-ed-head:not(h2)) > h2:not(.em26-ed-head) {
    float: none; width: auto; max-width: 46rem; margin: 2rem 0 0 calc(var(--em26-ed-side) + 3.5rem);
  }
}
/* Every section heading reads the same, whatever level the editor used (H2/H3/H4 or a bold line); the tag stays as written. */
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner .em26-ed-head {
  color: var(--em26-ink);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner .em26-ed-head :is(strong, b) { font-weight: inherit; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner .em26-ed-label {
  margin: 0;
  color: var(--em26-ink);
  font-size: 1.5rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
@media (max-width: 63.99rem) {
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner .em26-ed-head { margin: 2rem 0 0.75rem; }
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner .em26-ed-head:first-child { margin-top: 0; }
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner .em26-ed-label { margin-bottom: 0.9rem; font-size: 1.25rem; }
}
/* Editor leftovers that centred or narrowed the text (inline styles, alignment classes): one left-aligned reading column. */
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner :is(p, li, h2, h3, h4, h5, div, span, ul, ol)[style*="text-align"] { text-align: left !important; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner :is(p, h2, h3, h4, h5, ul, ol, div, table)[style*="width"] { width: auto !important; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner > * :is(p, h2, h3, h4, h5, ul, ol, div)[style*="margin"] { margin-left: 0 !important; margin-right: 0 !important; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner > * :is(p, div, table)[style*="max-width"] { max-width: 100% !important; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner > [style*="margin"] { margin-left: 0 !important; margin-right: 0 !important; }
@media (min-width: 64rem) {
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner.em26-category-editorial__inner > [style*="margin"]:not(.em26-ed-head):not(.em26-ed-label) { margin-left: calc(var(--em26-ed-side) + 3.5rem) !important; }
  body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner.em26-category-editorial__inner > [style*="max-width"]:not(.em26-ed-head) { max-width: 46rem !important; }
}
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial__inner :is(p, h2, h3, h4, h5, li).has-text-align-center { text-align: left; }
body[class*="em26-category--"] .em26-woo-surface .em26-category-editorial { margin-top: 1.5rem !important; }

/* ---------- Clocks hardware root: route cards with photos (owner-approved prototype, 22 Oct) ----------
   The photos are one retouched series on a neutral grey-white plate (baked into the files); the plate colour below is the
   same, so the illustration card matches. Square photo on top; the last card (Розмітка й трафарети) spans the row with
   the illustration on the left. Phones: photo left, text right, like the artboards cards. */
body .em26-clocks-routes .em26-clocks-route { padding: 0; gap: 0; min-height: 0; grid-template-rows: auto auto auto 1fr; }
body .em26-clocks-route__photo {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid rgba(22, 53, 61, 0.12);
  background: linear-gradient(180deg, #efefec, #e3e3e0);
  line-height: 0;
}
body .em26-clocks-route__photo img,
body .em26-clocks-route__photo svg { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
body .em26-clocks-routes .em26-clocks-route__number { margin: 1rem 1.25rem 0; }
body .em26-clocks-routes .em26-clocks-route strong { margin: 0.3rem 1.25rem 0.4rem; padding-right: 0; }
body .em26-clocks-routes .em26-clocks-route small { margin: 0 2.5rem 1.3rem 1.25rem; }
body .em26-clocks-routes .em26-clocks-route i { top: auto; bottom: 1.1rem; right: 1.1rem; }
@media (min-width: 48rem) {
  body .em26-clocks-routes > .em26-clocks-route:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: calc((100% - var(--em26-space-4)) / 2) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
  }
  body .em26-clocks-routes > .em26-clocks-route:last-child:nth-child(odd) .em26-clocks-route__photo {
    grid-row: 1 / -1;
    aspect-ratio: auto;
    height: 12rem;
    padding: 0.4rem 0;
    border-bottom: 0;
    border-right: 1px solid rgba(22, 53, 61, 0.12);
  }
  body .em26-clocks-routes > .em26-clocks-route:last-child:nth-child(odd) .em26-clocks-route__number { grid-row: 2; align-self: end; margin: 0 2rem; }
  body .em26-clocks-routes > .em26-clocks-route:last-child:nth-child(odd) strong { grid-row: 3; max-width: none; margin: 0.3rem 2rem 0.4rem; }
  body .em26-clocks-routes > .em26-clocks-route:last-child:nth-child(odd) small { grid-row: 4; align-self: start; max-width: 40rem; margin: 0 3rem 0 2rem; }
}
@media (min-width: 64rem) {
  body .em26-clocks-routes > .em26-clocks-route:last-child:nth-child(odd) { grid-template-columns: calc((100% - 3 * var(--em26-space-4)) / 4) minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  body .em26-clocks-routes .em26-clocks-route { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  body .em26-clocks-route__photo { grid-row: 1 / -1; aspect-ratio: auto; min-height: 7.5rem; border-bottom: 0; border-right: 1px solid rgba(22, 53, 61, 0.12); }
  body .em26-clocks-route__photo img, body .em26-clocks-route__photo svg { height: 7.5rem; }
  body .em26-clocks-route__photo { display: flex; align-items: center; }
  body .em26-clocks-routes .em26-clocks-route__number { margin: 0.9rem 0.9rem 0; }
  body .em26-clocks-routes .em26-clocks-route strong { margin: 0.2rem 2.25rem 0.25rem 0.9rem; }
  body .em26-clocks-routes .em26-clocks-route small { margin: 0 0.9rem 0.9rem; font-size: 0.875rem; line-height: 1.45; }
}
@media (max-width: 22.5rem) {
  body .em26-clocks-routes .em26-clocks-route { grid-template-columns: 6.25rem minmax(0, 1fr); }
  body .em26-clocks-route__photo { min-height: 6.25rem; }
  body .em26-clocks-route__photo img, body .em26-clocks-route__photo svg { height: 6.25rem; }
}

/* ---------- Mini hero: artboards and clock-hardware sub-categories (owner-approved etalon, 22 Oct 18:25) ----------
   Text runs across the content width from one left line (breadcrumbs, sorting, first card); the section medallion sits on
   the right, centred on the text, its right edge on the product grid edge. No bar under the hero, no side bar on the
   trust line. One type scale: eyebrow 13 / lead 17 / trust 15 / H1 28→36 px. Phones: medallion 64 px beside the heading. */
html:not(#em26-hero) body .em26-category-hero--mini { display: block; min-height: 0; padding-block: 1.5rem 2rem; border-bottom: 0; }
html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  column-gap: 4rem;
  align-items: start;
  max-width: none;
  padding: 0;
}
html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__content > * { grid-column: 1; min-width: 0; }
html:not(#em26-hero) body .em26-category-hero__mini-icon {
  grid-column: 2 !important;
  grid-row: 1 / span 4;
  align-self: center;
  display: grid;
  place-items: center;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  background: var(--em26-surface, #fffefa);
  box-shadow: inset 0 0 0 1.5px var(--em26-mini-ring, #c08a4a), 0 10px 28px rgba(22, 53, 61, 0.08);
  line-height: 0;
}
html:not(#em26-hero) body .em26-category-hero__mini-icon--clocks { --em26-mini-ring: #d9a63c; }
html:not(#em26-hero) body .em26-category-hero__mini-icon .em26-wood-icon { display: block; width: 100%; height: 100%; }
html:not(#em26-hero) body .em26-category-hero__mini-icon .em26-wood-icon > circle:nth-child(-n + 2) { display: none; }
html:not(#em26-hero) body .em26-category-hero__mini-icon .em26-section-icon { display: block; width: 62%; height: 62%; max-width: none; }
html:not(#em26-hero) body .em26-category-hero--mini .em26-eyebrow { margin: 0 0 0.8rem; font-size: 0.8125rem; line-height: 1.3; }
html:not(#em26-hero) body .em26-category-hero--mini h1 {
  max-width: none;
  margin: 0 0 0.8rem;
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__lead { max-width: 58rem; margin: 0; font-size: 1.0625rem; line-height: 1.6; }
html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__trust { max-width: none; margin: 0.8rem 0 0; padding: 0; border: 0; background: none; color: #4a6168; font-size: 0.9375rem; line-height: 1.55; }
html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__trust strong { color: var(--em26-ink); font-weight: 650; }
@media (max-width: 47.99rem) {
  html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__content { grid-template-columns: minmax(0, 1fr) 4rem; column-gap: 1rem; }
  html:not(#em26-hero) body .em26-category-hero__mini-icon { grid-row: 1 / span 2; align-self: start; width: 4rem; height: 4rem; }
  html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__lead,
  html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__trust { grid-column: 1 / -1; }
  html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__lead { font-size: 1rem; line-height: 1.55; }
  html:not(#em26-hero) body .em26-category-hero--mini .em26-category-hero__trust { font-size: 0.875rem; }
}

/* ---------- Root mini-landings with a workshop photo (owner approved 22 Oct 19:19) ----------
   Годинники, Силікони й молди, Інструменти й безпека, Набори й навчання: one plate in the section tone,
   copy left, the photo bleeding to the plate's top, right and bottom edges — the geometry of «Золочення»
   (32.5 rem photo column, 2.75 rem padding, 26 rem minimum height), so every root photo hero has one proportion. */
body .em26-category-hero--photo-root {
	--em26-root-tone: var(--em26-saffron, #f2b632);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 32.5rem);
	align-items: stretch;
	gap: 3rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	padding: 2.75rem;
	overflow: hidden;
	border: 0.0625rem solid color-mix(in srgb, var(--em26-root-tone) 34%, transparent);
	border-radius: var(--em26-radius-card, 0.75rem);
	background: linear-gradient(120deg, color-mix(in srgb, var(--em26-root-tone) 13%, #fffefa) 0%, #fffefa 72%);
	color: var(--em26-ink);
}
body .em26-category-hero--photo-root.em26-category-hero--tone-cobalt { --em26-root-tone: var(--em26-cobalt, #1d5dbb); }
body .em26-category-hero--photo-root.em26-category-hero--tone-turquoise { --em26-root-tone: var(--em26-turquoise, #129a9a); }
body .em26-category-hero--photo-root::before,
body .em26-category-hero--photo-root::after { content: none; display: none; }
body .em26-category-hero--photo-root .em26-category-hero__content { align-self: center; max-width: none; min-width: 0; }
body .em26-category-hero--photo-root h1 { max-width: 16ch; font-size: clamp(2.25rem, 1.75rem + 1.8vw, 3.25rem); line-height: 1.02; }
body .em26-category-hero--photo-root .em26-category-hero__lead { max-width: 46ch; }
body .em26-category-hero--photo-root .em26-category-hero__trust { max-width: 52ch; margin-top: 1.25rem; border-left-color: var(--em26-root-tone); }
body .em26-category-hero__photo { position: relative; min-width: 0; min-height: 26rem; margin: -2.75rem -2.75rem -2.75rem 0; overflow: hidden; }
body .em26-category-hero__photo > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Own-production mark on the clock hero photo: one quiet surface plate in the bottom-left corner, logo file as approved. */
body .em26-category-hero__own-mark { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; margin: 0; padding: 0.75rem 1rem 0.625rem; border-radius: 0.625rem; background: rgba(255, 254, 250, 0.94); box-shadow: 0 0.375rem 1.25rem rgba(22, 53, 61, 0.14); }
body .em26-category-hero__own-mark img { display: block; width: 9.375rem; height: auto; }
body .em26-category-hero__own-mark span { color: var(--em26-ink); font-size: 0.8125rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; }
@media (max-width: 71.99rem) {
	body .em26-category-hero--photo-root { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2rem; }
	/* Same Safari rule as the gilding hero: the photo carries the ratio, the box takes its height from it. */
	body .em26-category-hero__photo { align-self: end; min-height: 0; aspect-ratio: auto; margin: 0 -2rem -2rem; }
	body .em26-category-hero__photo > img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 47.99rem) {
	body .em26-category-hero--photo-root { gap: 1.5rem; padding: 1.25rem; }
	body .em26-category-hero--photo-root h1 { max-width: none; font-size: clamp(1.875rem, 7.4vw, 2.375rem); }
	body .em26-category-hero__photo { margin: 0 -1.25rem -1.25rem; }
	body .em26-category-hero__photo > img { aspect-ratio: 4 / 3; }
	body .em26-category-hero__own-mark { left: 0.875rem; bottom: 0.875rem; padding: 0.5rem 0.75rem; }
	body .em26-category-hero__own-mark img { width: 7.5rem; }
	body .em26-category-hero__own-mark span { font-size: 0.75rem; }
}

/* ---------- Artboards root «Що створюють на артбордах»: one finished work beside the six uses ----------
   The photo takes the left 5/12 and the full height of the six cards (2 × 3); the card edges, radius and gaps stay. */
body .em26-wood-uses__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: stretch; }
body .em26-wood-uses__layout .em26-wood-uses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .em26-wood-uses__photo { position: relative; min-width: 0; min-height: 24rem; margin: 0; overflow: hidden; border-radius: var(--em26-radius-card, 0.75rem); }
body .em26-wood-uses__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 30%; } /* the painter's head and the clock stay in */
@media (max-width: 63.99rem) {
	body .em26-wood-uses__layout { grid-template-columns: minmax(0, 1fr); }
	body .em26-wood-uses__photo { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 47.99rem) {
	body .em26-wood-uses__layout .em26-wood-uses__grid { grid-template-columns: minmax(0, 1fr); }
	body .em26-wood-uses__photo { aspect-ratio: 4 / 3; }
}

/* ---------- Decor root: «Глітери» joins the fillers (owner, 22 Oct 23:27): four cards in one row, two on tablets ---------- */
body .em26-decor-route--glitter { --ic-c: var(--em26-saffron); border-top-color: var(--em26-saffron); }
@media (min-width: 72rem) { html:not(#em26-decor) body .em26-decor-routes--fillers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 48rem) and (max-width: 71.99rem) { html:not(#em26-decor) body .em26-decor-routes--fillers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Decor / gilding architecture (owner approved 25 Oct 18:45 and 18:49) ---------- */
/* Gilding: four Liquid Leaf shades as product cards, the rest of the section below */
body .em26-gilding__shade-meta { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.25rem 0 0.5rem; }
body .em26-gilding__shade-effect { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 650; line-height: 1.4; color: var(--em26-ink); }
body .em26-gilding__shade-effect .em26-gilding__dot { flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; margin: 0; }
body .em26-gilding__shade-pair { font-size: 0.8125rem; line-height: 1.45; color: var(--em26-muted); }
body .em26-gilding__more { margin: 3rem 0 1rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; scroll-margin-top: 6rem; }
body.tax-product_cat .em26-gilding__more ~ .woocommerce-result-count { display: none; }
body .em26-gilding--choice .em26-cx-products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 63.99rem) { body .em26-gilding--choice .em26-cx-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Decor root: counts under the cards, popular products, teaser for the coming own-production pastes */
body .em26-decor-route__count { display: block; margin-top: 0.5rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8125rem; line-height: 1.4; color: #4a6168; }
body .em26-decor-popular { margin: 3rem 0; }
body .em26-decor-popular ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 63.99rem) { body .em26-decor-popular ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body .em26-decor-textures__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 63.99rem) { body .em26-decor-textures__grid { grid-template-columns: minmax(0, 1fr); } }
body .em26-decor-teaser { display: flex; flex-direction: column; justify-content: center; gap: 0.625rem; min-width: 0; padding: 1.5rem; border: 1px solid rgba(148, 107, 28, 0.35); border-radius: var(--em26-radius-card, 0.75rem); background: linear-gradient(135deg, #fdf7e6 0%, #f0dca8 100%); color: var(--em26-ink); }
body .em26-decor-teaser__badge { align-self: flex-start; padding: 0.125rem 0.75rem; border-radius: 999px; background: var(--em26-ink); color: #fffefa; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
body .em26-decor-teaser h4 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; text-wrap: balance; }
body .em26-decor-teaser p { font-size: 0.9375rem; line-height: 1.55; }
body .em26-decor-teaser__sig { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.25rem; }
body .em26-decor-teaser__sig img { width: 9rem; height: auto; }
body .em26-decor-teaser__sig span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.75rem; color: #6b4c10; }

/* ---------- section hero: one quiet rule instead of two coloured rails ----------
   The hero closed with a 0.35rem rule in the section colour, and the product cards directly
   below open with a tab in the same colour. On a phone the two sit a few pixels apart and read
   as noise (owner, 26 Oct). The hairline keeps the separation; the section colour still comes
   from the eyebrow dash, the hero icon and the card tabs. Presentation only. */
html:not(#em26-hero) body .em26-category-hero:not(.em26-category-hero--mini) {
  border-bottom: 1px solid var(--em26-border);
}