/* ============================================================
   B00b · Header — меню «Напрямки» (ПРОБА v3, 2026-10-04)
   Мега-полка под шапкой по образцу OneSkin: второй уровень — полоса
   вкладок (разделы SmartCell), под ней панель раздела, справа — анонс
   статьи журнала с квадратной обложкой. Раскрытие — как полочка тем
   журнала (vm-topics.css): строка сетки 0fr → 1fr с выраженным ease-out.
   Поведение — assets/js/header-directions.js
   Зависит от b00b-header.css (подключается после него).
   v2 (колонка разделов слева, без вкладок) — коммит 614e825.
   ============================================================ */

.sc-header {
  --hdir-open-dur: 600ms;
  --hdir-tab-dur: 420ms;                       /* бегунок вкладки — как в sc-dtabs */
  --hdir-indicator-h: 3px;                      /* бегунок в макете вкладок 3 px */
  --hdir-cols: minmax(0, 1fr) var(--sc-cta-block-w); /* панель · статья (колонка = плита 320) */
  --hdir-scrim-blur: 16px;                      /* размытие страницы под полкой — как --modal-blur */
  --hdir-tile-w: 200px;                         /* плитка консультанта: квадрат 200 */
}

/* Обёртка пункта не позиционирована: полка встаёт от края шапки
   (position: fixed у .sc-header), а не от пункта меню */
.sc-hdir { display: contents; }

.sc-hdir__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-1_5);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer; /* кегль — от .sc-t-small, как у соседних пунктов */
}

.sc-hdir__chevron {
  flex: none;
  inline-size: var(--sc-space-2_5);
  block-size: var(--sc-space-2_5);
  transition: transform var(--sc-dur) var(--sc-ease-out);
}

.sc-hdir__trigger[aria-expanded="true"] { color: var(--foreground); }
.sc-hdir__trigger[aria-expanded="true"] .sc-hdir__chevron { transform: rotate(180deg); }

/* ---------- Полка ---------- */

.sc-hdir__panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  display: grid;
  grid-template-rows: 0fr;
  background: var(--background);
  color: var(--foreground);
  border-block-end: 0 solid var(--border);
  transition:
    grid-template-rows var(--hdir-open-dur) var(--sc-ease-out-expo),
    border-block-end-width 0s linear var(--hdir-open-dur);
}

/* Страница под открытой полкой затемнена и размыта — как оверлей модалки
   (#000 40% + blur 16; правка 2026-10-06). Клики проходят сквозь скрим
   на страницу — их ловит документ и закрывает меню. */
.sc-hdir__panel::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  block-size: 100vh;
  background: var(--sc-black-alpha-40);
  -webkit-backdrop-filter: blur(var(--hdir-scrim-blur));
  backdrop-filter: blur(var(--hdir-scrim-blur));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sc-dur) var(--sc-ease);
}

.sc-hdir.sc-is-open .sc-hdir__panel::after { opacity: 1; }

.sc-hdir.sc-is-open .sc-hdir__panel {
  grid-template-rows: 1fr;
  border-block-end-width: var(--sc-line);
  box-shadow: var(--shadow-lg);
  transition:
    grid-template-rows var(--hdir-open-dur) var(--sc-ease-out-expo),
    border-block-end-width 0s;
}

.sc-hdir__clip {
  min-block-size: 0;
  overflow: hidden;
}

.sc-hdir__shelf {
  display: flex;
  flex-direction: column;
}

/* ---------- Полоса вкладок: разделы SmartCell ---------- */

/* Полоса меню (2026-10-27): вкладки; посилання на хаб справа знято того ж дня.
   Тёплий фон і лінія — на полосі, а не на списку вкладок */
.sc-hdir__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-8);
  padding-inline: var(--sc-pad-x);
  background: var(--warm); /* полоса вкладок отбита тёплым, как у OneSkin (2026-10-06) */
  border-block-end: var(--sc-line) solid var(--border);
}

.sc-hdir__tabs {
  position: relative;
  display: flex;
  gap: var(--sc-space-8); /* 32, как у вкладок страницы */
  min-inline-size: 0;
}


.sc-hdir__tab {
  padding: var(--sc-space-4) 0; /* 16: строка 48 */
  border: 0;
  background: none;
  color: var(--sc-neutral-600);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sc-dur-fast) var(--sc-ease);
}

.sc-hdir__tab[aria-selected="true"] { color: var(--foreground); }

/* Бегунок: позицию и ширину ставит скрипт (--tab-x, --tab-w) */
.sc-hdir__indicator {
  position: absolute;
  inset-block-end: calc(-1 * var(--sc-line));
  inset-inline-start: 0;
  inline-size: var(--tab-w, 0);
  block-size: var(--hdir-indicator-h);
  background: var(--foreground);
  transform: translateX(var(--tab-x, 0));
}

.sc-hdir__tabs.sc-is-ready .sc-hdir__indicator {
  transition:
    transform var(--hdir-tab-dur) var(--sc-ease-out-expo),
    inline-size var(--hdir-tab-dur) var(--sc-ease-out-expo);
}

/* ---------- Тело полки: панель раздела + анонс ---------- */

.sc-hdir__body {
  display: grid;
  grid-template-columns: var(--hdir-cols);
  gap: var(--section-gap); /* 56 — колонки разведены воздухом */
  padding: var(--sc-space-10) var(--sc-pad-x) var(--sc-space-12); /* 40 / 48 */
}

.sc-hdir__panels { min-inline-size: 0; }

/* Панели разделов */
.sc-hdir__pane {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-lg);
  min-inline-size: 0;
}

.sc-hdir__pane[hidden] { display: none; }

/* Заголовок вкладки — ссылкой на раздел, без подчёркивания (появляется на ховере) */
.sc-hdir__heading {
  color: var(--foreground);
  text-decoration: none;
}

/* «Усі напрямки…» / «Перейти до розділу» — подчёркнутой ссылкой, как в полочке тем */
.sc-hdir__all {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Опис протоколу — wysiwyg з адмінки (2026-11-05): звичайні <p> без класів, стиль за тегом.
   Відступи теми обнуляємо, між абзацами — менший крок, ніж до заголовка й плашок;
   порожні <p> від редактора не роблять дір. */
.sc-hdir__protocol-desc {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-md); /* 14 */
  max-inline-size: var(--sc-measure);
}

.sc-hdir__protocol-desc > p {
  margin: 0;
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
}

.sc-hdir__protocol-desc > p:empty { display: none; }

/* Напрямки: 16 в три колонки, порядок как на virtus.ua */
.sc-hdir__list {
  columns: 3;
  column-gap: var(--sc-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  inline-size: 100%;
}

.sc-hdir__list--short { columns: 1; }

/* Банк и консультанти — в строку под напрямками */
.sc-hdir__list--row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sc-space-8);
  columns: auto;
}

/* Кнопки «де саме» — чипы как «Показання» на странице напрямку (12/14, волосяная кромка);
   текущий напрямок — залитый, как активная рубрика в ленте */
.sc-hdir__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-gap); /* 10 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-hdir__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sc-space-3) var(--sc-space-3_5);
  border: var(--sc-line) solid var(--border);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color var(--sc-dur-fast) var(--sc-ease);
}

.sc-hdir__chip[aria-current="page"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

/* Вкладки «Клітинні технології» и «Препарати»: группы друг под другом, вторая — за волосяной линией (2026-10-05) */
.sc-hdir__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-lg);
  inline-size: 100%;
}

.sc-hdir__group + .sc-hdir__group {
  padding-block-start: var(--stack-gap-lg);
  border-block-start: var(--hairline) solid var(--border);
}

.sc-hdir__list > li {
  break-inside: avoid;
  padding-block-end: var(--sc-space-3);
}

.sc-hdir__link {
  position: relative;
  color: var(--foreground);
  text-decoration: none;
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
}

/* Текущий напрямок: квадратная метка слева и вес — «ви тут» без лишних слов */
.sc-hdir__link[aria-current="page"] { font-weight: var(--sc-weight-medium); }

.sc-hdir__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--sc-space-3));
  inset-block-start: 50%;
  inline-size: var(--sc-space-1_5);
  block-size: var(--sc-space-1_5);
  background: var(--foreground);
  transform: translateY(-50%);
}

/* ---------- Протоколи: витрина Face Control 365 (2026-10-05) ----------
   Вкладка без анонса журнала (data-hdir-full → .sc-is-full на полке): витрина
   во всю ширину. Квадрат слева — 5 колонок сетки кита (12 колонок, гаттер 24),
   справа название и описание, ссылка на этапы — в нижнем углу. */
.sc-hdir__panel.sc-is-full .sc-hdir__body { grid-template-columns: minmax(0, 1fr); }
.sc-hdir__panel.sc-is-full .sc-hdir__col--article { display: none; }

.sc-hdir__protocol {
  --hdir-protocol-photo: calc(5 * (100% - 11 * var(--sc-grid-gutter)) / 12 + 4 * var(--sc-grid-gutter));
  display: grid;
  grid-template-columns: var(--hdir-protocol-photo) minmax(0, 1fr);
  gap: var(--section-gap);
  inline-size: 100%;
}

.sc-hdir__protocol-photo {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--muted);
}

.sc-hdir__protocol-photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--sc-dur-slow) var(--sc-ease-out);
}

.sc-hdir__protocol-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--section-gap);
  min-inline-size: 0;
}

.sc-hdir__protocol-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-lg);
}

.sc-hdir__protocol-title {
  color: var(--foreground);
  text-decoration: none;
}

/* Три опоры программы — плашки как в B02 (sc-difference__tag) */
.sc-hdir__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-hdir__tag {
  padding: var(--sc-space-2) var(--sc-space-3_5); /* 8 / 14, как в B02 */
  background: var(--secondary);
  color: var(--foreground);
}

/* Button/Block — плита 320×76, как на первом экране лендинга (там на стекле,
   здесь на светлом — primary): лейбл сверху слева, стрелка снизу справа; в углу витрины */
.sc-hdir__block {
  align-self: flex-end;
  inline-size: var(--sc-cta-block-w);
  block-size: var(--sc-cta-block-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--grid-gap);
  background: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
  transition: background-color var(--sc-dur) var(--sc-ease);
}

.sc-hdir__block-label {
  text-transform: uppercase;
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
}

.sc-hdir__block-arrow { display: flex; justify-content: flex-end; }

.sc-hdir__block-arrow svg {
  display: block;
  transform: rotate(45deg);
  transition: transform var(--sc-dur-arrow) var(--sc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sc-hdir__protocol-title:hover {
    text-decoration: underline;
    text-underline-position: from-font;
  }
  .sc-hdir__protocol-photo:hover img { transform: scale(1.03); }
  .sc-hdir__chip:not([aria-current="page"]):hover { background: var(--muted); }
  .sc-hdir__heading:hover { text-decoration: underline; text-underline-position: from-font; }
  .sc-hdir__block:hover { background: var(--sc-primary-hover); }
  .sc-hdir__block:hover .sc-hdir__block-arrow svg {
    transform: translate(calc(var(--grid-gap) / 2), calc(var(--grid-gap) / 2)) rotate(45deg);
  }
}

.sc-hdir__block:active { background: var(--sc-primary-hover); }

.sc-hdir__protocol-title:focus-visible,
.sc-hdir__heading:focus-visible,
.sc-hdir__chip:focus-visible,
.sc-hdir__block:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .sc-hdir__protocol-photo img,
  .sc-hdir__block-arrow svg { transition: none; }
}

@media (max-width: 1279px) {
  /* на телефоне кадр не нужен — как и анонс статьи */
  .sc-hdir__protocol { grid-template-columns: minmax(0, 1fr); }
  .sc-hdir__protocol-photo { display: none; }
  .sc-hdir__protocol-copy { gap: var(--stack-gap-lg); }
  .sc-hdir__block { align-self: stretch; inline-size: 100%; }
}

/* Плитки консультантов: квадратное фото, узкая щель (--grid-gap, как в ленте) */
.sc-hdir__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--hdir-tile-w));
  gap: var(--sc-tile-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  inline-size: 100%;
}

/* Четыре продукта во всю ширину полки */
.sc-hdir__tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sc-hdir__tile {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-1);
}

.sc-hdir__tile-photo {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-block-end: var(--sc-space-2);
  background: var(--muted);
}

.sc-hdir__tile-photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--sc-dur-slow) var(--sc-ease-out);
}

.sc-hdir__tile-title {
  color: var(--foreground);
  text-decoration: none;
}

.sc-hdir__tile-meta { color: var(--sc-neutral-600); }

/* текст не ближе 95% ширины плитки */
.sc-hdir__tile-title,
.sc-hdir__tile-meta { padding-inline-end: var(--sc-tile-text-inset); }

/* ---------- Анонс статьи: колонка 320 с подписью, внутри — карточка ленты ---------- */

.sc-hdir__col--article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-lg);
  min-inline-size: 0;
}

.sc-hdir__label {
  margin: 0;
  color: var(--sc-neutral-600);
}

/* Сама карточка — Card/Article из B17 (.sc-mag__card, b17-magazine.css): свои правила
   для анонса сняты 2026-10-06, страница подключает b17-magazine.css. */

/* ---------- GSAP-режим (root.sc-hdir--gsap ставит header-directions.js, 2026-10-06) ----------
   Высоту, скрим и волну ведёт скрипт: CSS-переходы и анимации полки выключены,
   трек сетки сразу 1fr, высота режется на .sc-hdir__clip; скрим читает --hdir-scrim.
   NB: блок случайно вырезали при замене анонса на карточку (2e39994) — полка
   тогда снова ехала CSS-переходом 600 мс и «тупила»; восстановлен 2026-10-06. */
.sc-hdir--gsap .sc-hdir__panel,
.sc-hdir--gsap.sc-is-open .sc-hdir__panel {
  grid-template-rows: 1fr;
  transition: none;
}
.sc-hdir--gsap:not(.sc-is-open) .sc-hdir__clip { block-size: 0; }
.sc-hdir--gsap .sc-hdir__panel::after {
  opacity: var(--hdir-scrim, 0);
  transition: none;
  will-change: opacity; /* размытие на весь экран — свой слой, чтобы не дёргать полку */
  inset-block-start: 100%;
}
.sc-hdir--gsap.sc-is-open .sc-hdir__body > * { animation: none; }

/* Пока полка открыта, планка шапки — сплошная, полка и шапка одним куском */
.sc-header.sc-hdir-open {
  background: var(--background);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Состояния ---------- */

@media (hover: hover) and (pointer: fine) {
  .sc-hdir__tab[aria-selected="false"]:hover { color: var(--foreground); }
  .sc-hdir__link:hover,
  .sc-hdir__tile-title:hover {
    text-decoration: underline;
    text-underline-position: from-font;
  }
  .sc-hdir__all:hover { text-decoration: none; }
  .sc-hdir__tile-photo:hover img { transform: scale(1.03); }
}

.sc-hdir__trigger:focus-visible,
.sc-hdir__tab:focus-visible,
.sc-hdir__link:focus-visible,
.sc-hdir__all:focus-visible,
.sc-hdir__tile-photo:focus-visible,
.sc-hdir__tile-title:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .sc-hdir__chevron,
  .sc-hdir__panel,
  .sc-hdir__panel::after,
  .sc-hdir.sc-is-open .sc-hdir__panel,
  .sc-hdir__tab,
  .sc-hdir__tabs.sc-is-ready .sc-hdir__indicator,
  .sc-hdir__tile-photo img { transition: none; }
  .sc-hdir.sc-is-open .sc-hdir__body > * { animation: none; }
}

/* На десктопі шапок другого/третього рівня і рядка «Усі клітинні технології» немає */
.sc-hdir__mobhead,
.sc-hdir__hub { display: none; }

/* ---------- Телефон: «Клітинні технології» — два екрани вглиб (2026-11-03) ----------
   Пункт у шторці веде на другий екран (в'їжджає справа): «← Меню», три розділи рядками —
   Протоколи · Терапія · Препарати — і 4-й рядок «Усі клітинні технології» (хаб).
   Тап по розділу відкриває третій екран з його вмістом — як він виглядав у старому
   акордеоні: витрина протоколу без фото, чипи напрямків, продукти у два стовпці.
   Зверху третього екрана — «← Клітинні технології». Клас sc-hdir--sub ставить скрипт. */

@media (max-width: 1279px) {
  .sc-hdir { display: block; }

  .sc-hdir__trigger {
    inline-size: 100%;
    justify-content: space-between;
    min-block-size: var(--control-square);
    padding-block: var(--stack-gap-sm);
    font-size: var(--p-size);
    line-height: var(--p-lh);
  }

  /* шеврон дивиться праворуч — «далі», а не «розгорнути» */
  .sc-hdir__chevron,
  .sc-hdir__trigger[aria-expanded="true"] .sc-hdir__chevron {
    inline-size: var(--sc-space-3);
    transform: rotate(-90deg);
  }

  /* --- другий екран --- */
  .sc-hdir__panel {
    position: absolute;
    inset: 0;
    z-index: 1;
    box-shadow: none;
    background: var(--background);
    overflow: hidden auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform var(--header-portal-dur) var(--sc-ease-out),
      visibility 0s linear var(--header-portal-dur);
  }

  .sc-hdir.sc-is-open .sc-hdir__panel {
    box-shadow: none;
    border-block-end-width: 0;
    visibility: visible;
    transform: none;
    transition: transform var(--header-portal-dur) var(--sc-ease-out), visibility 0s;
  }

  .sc-hdir--gsap:not(.sc-is-open) .sc-hdir__clip { block-size: auto; }
  .sc-hdir__clip { overflow: visible; }
  .sc-hdir__shelf { position: static; }

  .sc-hdir__mobhead {
    display: flex;
    align-items: center;
    min-block-size: var(--control-square);
    border-block-end: var(--hairline) solid var(--border);
  }

  /* Шеврони рядків і «назад» — той самий знак, що в рядку «Клітинні технології» (sc-hdir__chevron),
     малюється маскою, колір — currentColor */
  .sc-hdir__back,
  .sc-hdir__tab,
  .sc-hdir__hub { --sc-hdir-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.5 3.5L5 7L8.5 3.5' stroke='%23000'/%3E%3C/svg%3E"); }

  .sc-hdir__back::before,
  .sc-hdir__tab::after,
  .sc-hdir__hub::after {
    content: "";
    flex: none;
    inline-size: var(--sc-space-3);
    block-size: var(--sc-space-3);
    background: currentColor;
    -webkit-mask: var(--sc-hdir-chev) center / contain no-repeat;
    mask: var(--sc-hdir-chev) center / contain no-repeat;
  }

  .sc-hdir__back {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-1_5);
    padding: 0;
    border: 0;
    background: none;
    color: var(--foreground);
    cursor: pointer;
  }

  .sc-hdir__back::before { transform: rotate(90deg); } /* ‹ */

  .sc-hdir__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: 0;
    background: transparent;
    border-block-end: 0;
  }

  /* розділи — рядками, як пункти меню; бігунка немає */
  .sc-hdir__tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
  }

  .sc-hdir__indicator { display: none; }

  .sc-hdir__tab,
  .sc-hdir__hub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: var(--control-square);
    padding: var(--stack-gap-sm) 0;
    border: 0;
    border-block-start: var(--hairline) solid var(--border);
    background: none;
    color: var(--foreground);
    font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
    text-decoration: none;
    cursor: pointer;
  }

  .sc-hdir__tabs .sc-hdir__tab:first-child { border-block-start: 0; }
  .sc-hdir__tab[aria-selected="true"] { color: var(--foreground); }

  /* шеврон «далі» праворуч, приглушений — як у рядку «Клітинні технології» в меню */
  .sc-hdir__tab::after,
  .sc-hdir__hub::after {
    transform: rotate(-90deg); /* › */
    color: var(--muted-foreground);
  }

  /* --- третій екран: вміст розділу поверх другого --- */
  .sc-hdir__body {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 var(--sc-space-6);
    background: var(--background);
    overflow: hidden auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform var(--header-portal-dur) var(--sc-ease-out),
      visibility 0s linear var(--header-portal-dur);
  }

  .sc-hdir--sub .sc-hdir__body {
    visibility: visible;
    transform: none;
    transition: transform var(--header-portal-dur) var(--sc-ease-out), visibility 0s;
  }

  .sc-hdir__panels { padding-block-start: var(--stack-gap-lg); }
  .sc-hdir__pane { gap: var(--stack-gap-md); }

  /* вміст — як у старому акордеоні (2026-10-05): без фото, кнопка на всю ширину, продукти у два стовпці */
  .sc-hdir__protocol { grid-template-columns: minmax(0, 1fr); }
  .sc-hdir__protocol-photo { display: none; }
  .sc-hdir__protocol-copy { gap: var(--stack-gap-lg); }
  .sc-hdir__block { align-self: stretch; inline-size: 100%; }

  .sc-hdir__list { columns: 1; }
  .sc-hdir__list > li { padding-block-end: var(--stack-gap-sm); }
  .sc-hdir__link { font-size: var(--p-small-size); line-height: var(--p-small-lh); }

  .sc-hdir__tiles,
  .sc-hdir__tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sc-hdir__col--article { display: none; }

  .sc-header.sc-hdir-open { background: var(--background); }

  /* полка всередині шторки — скрим сторінки не потрібен */
  .sc-hdir__panel::after { display: none; }
}