@layer layout {
  .em26-container { width: min(calc(100% - 2rem), var(--em26-container)); margin-inline: auto; }
  .em26-content-grid { display: grid; gap: var(--em26-space-6); padding-block: var(--em26-space-7); }
  .em26-site-header__inner { min-height: 5rem; display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; align-items: center; gap: var(--em26-space-6); }
  .em26-site-main { min-height: 60vh; }
  .em26-woo-surface { padding-block: var(--em26-space-6) var(--em26-space-8); }

  @media (max-width: 63.99rem) {
    .em26-site-header__inner { min-height: 4.25rem; grid-template-columns: minmax(7.5rem, 10rem) 1fr auto; gap: var(--em26-space-4); }
    .em26-header-search { grid-column: 1 / -1; grid-row: 2; }
    /* SYS-03: profile/cart sit on the logo row instead of a third row of their own (-64 px on phones). */
    .em26-header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  }

  @media (min-width: 48rem) {
    .em26-container { width: min(calc(100% - 3rem), var(--em26-container)); }
  }

  @media (min-width: 80rem) {
    .em26-container { width: min(calc(100% - 4rem), var(--em26-container)); }
  }
}

/* Text pages and articles (owner, 14 Nov 2026: «верстка статті розсипалась»). The page title sat at the left edge of the
   wide container while the text ran in a centred reading column, so the title, its rule and the text had different axes.
   On text pages the title now shares the reading column with the text. «Контакти» (2639) and «Статті» (761) keep their own
   layouts. Presentation only: same H1, text, links and order. */
.em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))) > .em26-entry__title { max-width: min(100%, 46.5rem); margin-inline: auto; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.08; text-wrap: balance; }
.em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))) > .em26-entry__content > p:first-child { font-size: var(--em26-text-lg, 1.125rem); line-height: 1.6; }
.em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))) > .em26-entry__content > :where(p, ul, ol, blockquote) { max-width: 46.5rem; }
.em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))) > .em26-entry__content > figure[class~="wp-block-image"] { max-width: 46.5rem; margin-inline: auto; margin-block: var(--em26-space-5, 1.5rem); }
.em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))) > .em26-entry__content > p[class~="em-author-card"] { margin-top: var(--em26-space-8, 3rem); padding: 1.25rem 1.5rem; border: 1px solid rgba(22, 53, 61, 0.14); border-left: 0.35rem solid var(--em26-teal, #129a9a); border-radius: 0 0.75rem 0.75rem 0; background: var(--em26-surface, #fffefa); }
@media (max-width: 47.99rem) {
  .em26-breadcrumbs ol:has(> li:nth-child(2):last-child) { flex-wrap: nowrap; }
  .em26-breadcrumbs ol:has(> li:nth-child(2):last-child) > li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Articles on wide screens (owner, 14 Nov 2026: «ширина блоків статей досі не розтягнута в ширину верхньої шапки»).
   Same pattern as the approved editorial layout: the title and its rule span the container, each section heading sits in
   a side column on the left and the text runs on the right, so the article is as wide as the header. CSS only: the
   heading levels, text, links and order stay as written. Pages without section headings keep the single column. */
@media (min-width: 64rem) {
  .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__title { max-width: none; margin-inline: 0; }
  .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); column-gap: 3.5rem; align-items: start; }
  .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content > * { grid-column: 2; max-width: none; margin-inline: 0; }
  .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content > p:first-child { grid-column: 1 / -1; max-width: 60rem; margin-bottom: 0; font-size: clamp(1.125rem, 1.4vw, 1.3125rem); }
  .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content > h2, .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content:not(:has(> h2)) > h3, .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content:not(:has(> :where(h2, h3))) > h4 { grid-column: 1; grid-row: span 3; margin: 3.5rem 0 0; padding-top: 1.25rem; border-top: 0.25rem solid var(--em26-teal, #129a9a); color: var(--em26-ink, #16353d); font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.15; text-wrap: balance; }
  .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content > h2 + *, .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content:not(:has(> h2)) > h3 + *, .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content:not(:has(> :where(h2, h3))) > h4 + * { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 0.0625rem solid rgba(22, 53, 61, 0.18); }
  .em26-entry--page:not([class*="em26-entry--workshop"]):not([class~="post-2639"]):not([class~="post-761"]):not(:has(> .em26-entry__eyebrow)):has(> .em26-entry__content > :where(p, h2, h3, h4)):not(:has(> .em26-entry__content > :where([class~="woocommerce"], [class*="em26-hub"], [class~="helpie-faq"], [class~="wp-block-columns"], [class~="wp-block-buttons"], form, div:not([class])))):has(> .em26-entry__content > :where(h2, h3, h4)) > .em26-entry__content > figure[class~="wp-block-image"] { max-width: none; }
}