/* ==========================================================================
   optima-content.css — UI-Kit контентных страниц
   Все селекторы ограничены корнями .optima-content и .optima-modal,
   глобальных правил нет.
   Шрифт, базовый размер, межстрочный интервал и цвет текста наследуются от сайта.
   Размеры: rem / em / vw. Брейкпоинты — container queries по ширине .optima-content,
   поэтому кит одинаково работает и в полной ширине, и в узкой колонке шаблона.

   Модальное окно dialog.optima-modal — отдельный корень кита. Оно может стоять
   вне .optima-content (например, в подвале, в div.global-forms-block): токены
   и общие компоненты (типографика, кнопки, поля формы) объявлены для обоих
   корней через :is(.optima-content, .optima-modal), специфичность прежняя.

   Содержание
   01 Токены                08 Таблица параметров   15 Галерея
   02 Основа и типографика  09 Плашки               16 Слайдер
   03 Секции и сетки        10 Спецификация         17 Кнопки-иконки и формы
   04 Кнопки                11 Аккордеон            18 Модальное окно
   05 Hero                  12 Табы                 19 Панель запроса
   06 Карточка оборудования 13 Поиск                20 CTA-блок
   07 Блок изделия          14 Список определений   21 Адаптив
   ========================================================================== */


/* 01 Токены: общие для .optima-content и модального окна ------------------- */
.optima-content,
.optima-modal {
  /* Цвет */
  --oc-accent: #cc0000;
  --oc-accent-strong: #a8121a;
  --oc-accent-gradient: repeating-linear-gradient(96deg, #a8121a 0%, #ee151f 100%);
  --oc-dark: #0b0b0b;
  --oc-dark-red: #2a0000;
  --oc-ink: #2b2b2b;                /* текст на собственных подложках кита */
  --oc-ink-muted: #5f6163;
  --oc-subhead: #a68b6e;            /* подзаголовки: крупный текст или тёмный фон */
  --oc-surface: #ffffff;
  --oc-surface-soft: #f4f4f3;
  --oc-surface-figure: #e6e7e8;     /* подложка чертежей */
  --oc-border: rgba(0, 0, 0, 0.1);
  --oc-border-strong: rgba(0, 0, 0, 0.24);
  --oc-on-dark: #ffffff;
  --oc-on-dark-muted: rgba(255, 255, 255, 0.74);
  --oc-on-dark-border: rgba(255, 255, 255, 0.2);

  /* Отступы */
  --oc-space-1: 0.25rem;
  --oc-space-2: 0.5rem;
  --oc-space-3: 0.75rem;
  --oc-space-4: 1rem;
  --oc-space-5: 1.5rem;
  --oc-space-6: 2rem;
  --oc-space-7: 3rem;
  --oc-space-8: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);

  /* Размер текста */
  --oc-text-xs: 0.8125rem;
  --oc-text-sm: 0.875rem;
  --oc-text-md: 1rem;
  --oc-text-lg: 1.1875rem;
  --oc-title-1: clamp(1.875rem, 1.5rem + 1.8vw, 2.875rem);
  --oc-title-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --oc-title-3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --oc-title-4: 1.125rem;

  /* Геометрия */
  --oc-line: 0.0625rem;
  --oc-line-bold: 0.1875rem;
  --oc-radius: 0.125rem;
  --oc-control-height: 2.75rem;
  --oc-sticky-offset: 1rem;         /* высота фиксированной шапки сайта + зазор */

  /* Hero: путь к картинке задаётся на самом блоке через style */
  --oc-hero-image: none;
}

.optima-content {
  container: optima-content / inline-size;
  inline-size: 100%;
  min-inline-size: 0;
}


/* 02 Основа и типографика ------------------------------------------------- */
:is(.optima-content, .optima-modal) *,
:is(.optima-content, .optima-modal) *::before,
:is(.optima-content, .optima-modal) *::after {
  box-sizing: border-box;
}

:is(.optima-content, .optima-modal) [hidden] {
  display: none !important;
}

:is(.optima-content, .optima-modal) h1,
:is(.optima-content, .optima-modal) h2,
:is(.optima-content, .optima-modal) h3,
:is(.optima-content, .optima-modal) h4,
:is(.optima-content, .optima-modal) h5,
:is(.optima-content, .optima-modal) h6 {
  margin-block: 0;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

:is(.optima-content, .optima-modal) h1 { font-size: var(--oc-title-1); }
:is(.optima-content, .optima-modal) h2 { font-size: var(--oc-title-2); }
:is(.optima-content, .optima-modal) h3 { font-size: var(--oc-title-3); }
:is(.optima-content, .optima-modal) h4 { font-size: var(--oc-title-4); }
:is(.optima-content, .optima-modal) h5 { font-size: var(--oc-text-md); }
:is(.optima-content, .optima-modal) h6 { font-size: var(--oc-text-sm); }

:is(.optima-content, .optima-modal) p {
  margin-block: 0;
}

:is(.optima-content, .optima-modal) img,
:is(.optima-content, .optima-modal) svg {
  display: block;
  max-inline-size: 100%;
}

:is(.optima-content, .optima-modal) a:focus-visible,
:is(.optima-content, .optima-modal) button:focus-visible,
:is(.optima-content, .optima-modal) input:focus-visible,
:is(.optima-content, .optima-modal) textarea:focus-visible,
:is(.optima-content, .optima-modal) summary:focus-visible {
  outline: 0.125rem solid var(--oc-accent);
  outline-offset: 0.125rem;
}

:is(.optima-content, .optima-modal) .optima-content__icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Тексты статусов из JS: пишутся в атрибут, чтобы не менять текстовые узлы
   внутри разметки, которую может гидрировать React */
:is(.optima-content, .optima-modal) [data-optima-text]::before {
  content: attr(data-optima-text);
}

:is(.optima-content, .optima-modal) .optima-content__sr {
  position: absolute;
  inline-size: 0.0625rem;
  block-size: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* 03 Секции и сетки ------------------------------------------------------- */
.optima-content .optima-content__section {
  margin-block-start: var(--oc-space-8);
  scroll-margin-block-start: var(--oc-sticky-offset);
}

.optima-content .optima-content__head {
  display: grid;
  gap: var(--oc-space-2);
  margin-block-end: var(--oc-space-5);
}

.optima-content .optima-content__sub {
  font-size: var(--oc-text-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--oc-subhead);
}

.optima-content .optima-content__lead {
  max-inline-size: 46rem;
}

.optima-content .optima-content__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  gap: var(--oc-space-4);
}


/* 04 Кнопки --------------------------------------------------------------- */
:is(.optima-content, .optima-modal) .optima-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oc-space-2);
  min-block-size: var(--oc-control-height);
  margin: 0;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  border: var(--oc-line) solid transparent;
  border-radius: var(--oc-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--oc-text-md);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
}

:is(.optima-content, .optima-modal) .optima-btn--primary {
  background: var(--oc-accent-gradient);
  color: var(--oc-on-dark);
}

:is(.optima-content, .optima-modal) .optima-btn--primary:hover {
  background: var(--oc-accent-strong);
  color: var(--oc-on-dark);
}

:is(.optima-content, .optima-modal) .optima-btn--secondary {
  border-color: var(--oc-border-strong);
  background: var(--oc-surface);
  color: var(--oc-ink);
}

:is(.optima-content, .optima-modal) .optima-btn--secondary:hover {
  border-color: var(--oc-accent);
  color: var(--oc-accent);
}

:is(.optima-content, .optima-modal) .optima-btn--on-dark {
  border-color: var(--oc-on-dark-border);
  color: var(--oc-on-dark);
}

:is(.optima-content, .optima-modal) .optima-btn--on-dark:hover {
  border-color: var(--oc-on-dark);
  color: var(--oc-on-dark);
}

:is(.optima-content, .optima-modal) .optima-btn--block {
  inline-size: 100%;
}

:is(.optima-content, .optima-modal) .optima-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

:is(.optima-content, .optima-modal) .optima-link {
  color: var(--oc-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

:is(.optima-content, .optima-modal) .optima-link:hover {
  color: var(--oc-accent-strong);
}


/* 05 Hero ----------------------------------------------------------------- */
.optima-content .optima-hero {
  display: grid;
  gap: var(--oc-space-6);
  padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 5rem);
  padding-inline: clamp(1.25rem, 0.75rem + 3vw, 4rem);
  background-color: var(--oc-dark-red);
  background-image: var(--oc-hero-image);
  background-position: center bottom;
  background-size: cover;
  color: var(--oc-on-dark);
}

.optima-content .optima-hero__body {
  display: grid;
  gap: var(--oc-space-4);
  max-inline-size: 42rem;
}

.optima-content .optima-hero__sub {
  font-size: var(--oc-text-lg);
  font-weight: 600;
  line-height: 1.35;
  color: var(--oc-subhead);
}

.optima-content .optima-hero__lead {
  color: var(--oc-on-dark-muted);
}

.optima-content .optima-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oc-space-3);
  margin-block-start: var(--oc-space-2);
}

.optima-content .optima-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oc-space-4) var(--oc-space-7);
  margin: 0;
  padding-block-start: var(--oc-space-4);
  border-block-start: var(--oc-line) solid var(--oc-on-dark-border);
  max-inline-size: 42rem;
}

.optima-content .optima-hero__fact {
  display: grid;
  gap: var(--oc-space-1);
}

.optima-content .optima-hero__fact-label {
  order: 1;
  margin: 0;
  font-size: var(--oc-text-sm);
  color: var(--oc-on-dark-muted);
}

.optima-content .optima-hero__fact-value {
  margin: 0;
  font-size: var(--oc-title-3);
  font-weight: 700;
  line-height: 1.2;
}


/* 06 Карточка оборудования ------------------------------------------------ */
.optima-content .optima-equip-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: var(--oc-line) solid var(--oc-border);
  border-radius: var(--oc-radius);
  background: var(--oc-surface);
  color: var(--oc-ink);
  text-decoration: none;
  transition: border-color 0.15s linear;
}

.optima-content a.optima-equip-card:hover {
  border-color: var(--oc-accent);
  color: var(--oc-ink);
}

.optima-content a.optima-equip-card:hover .optima-equip-card__title {
  color: var(--oc-accent);
}

.optima-content .optima-equip-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--oc-space-4);
  background: var(--oc-surface-figure);
  color: var(--oc-ink);
}

.optima-content .optima-equip-card__media img,
.optima-content .optima-equip-card__media svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.optima-content .optima-equip-card__body {
  display: grid;
  align-content: start;
  gap: var(--oc-space-2);
  padding: var(--oc-space-4);
}

.optima-content .optima-equip-card__title {
  font-size: var(--oc-text-md);
  font-weight: 700;
  line-height: 1.3;
}

.optima-content .optima-equip-card__meta {
  font-size: var(--oc-text-sm);
  line-height: 1.4;
  color: var(--oc-ink-muted);
}


/* 07 Блок изделия: чертёж и описание слева, таблица справа ----------------- */
.optima-content .optima-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "aside" "main";
  gap: var(--oc-space-4);
  padding-block: var(--oc-space-6);
  border-block-start: var(--oc-line) solid var(--oc-border);
  scroll-margin-block-start: var(--oc-sticky-offset);
}

.optima-content .optima-product__aside {
  grid-area: aside;
  display: grid;
  align-content: start;
  gap: var(--oc-space-4);
  min-inline-size: 0;
}

.optima-content .optima-product__main {
  grid-area: main;
  display: grid;
  align-content: start;
  gap: var(--oc-space-3);
  min-inline-size: 0;
}

.optima-content .optima-product__head {
  grid-area: head;
  display: grid;
  gap: var(--oc-space-1);
}

.optima-content .optima-product__standard {
  font-size: var(--oc-text-sm);
  color: var(--oc-ink-muted);
}

.optima-content .optima-product__figure {
  margin: 0;
  padding: var(--oc-space-5);
  background: var(--oc-surface-figure);
  color: var(--oc-ink);
}

.optima-content .optima-product__figure svg,
.optima-content .optima-product__figure img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 15rem;
  margin-inline: auto;
}

.optima-content .optima-product__note {
  font-size: var(--oc-text-sm);
  color: var(--oc-ink-muted);
}


/* 08 Таблица параметров ---------------------------------------------------- */
.optima-content .optima-table-wrap {
  overflow-x: auto;
  border: var(--oc-line) solid var(--oc-border);
  border-radius: var(--oc-radius);
  background: var(--oc-surface);
  color: var(--oc-ink);
  -webkit-overflow-scrolling: touch;
}

.optima-content .optima-table {
  inline-size: 100%;
  min-inline-size: 34rem;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--oc-text-sm);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.optima-content .optima-table--wide {
  min-inline-size: 42rem;
}

.optima-content .optima-table caption {
  position: absolute;
  inline-size: 0.0625rem;
  block-size: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
}

.optima-content .optima-table th,
.optima-content .optima-table td {
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border: 0;
  border-block-end: var(--oc-line) solid var(--oc-border);
  background: var(--oc-surface);
  color: inherit;
  text-align: end;
  vertical-align: middle;
  white-space: nowrap;
}

.optima-content .optima-table thead th {
  background: var(--oc-dark);
  color: var(--oc-on-dark);
  font-size: var(--oc-text-xs);
  font-weight: 600;
}

.optima-content .optima-table tbody tr:last-child th,
.optima-content .optima-table tbody tr:last-child td {
  border-block-end: 0;
}

.optima-content .optima-table tbody tr:hover th,
.optima-content .optima-table tbody tr:hover td {
  background: var(--oc-surface-soft);
}

.optima-content .optima-table tbody tr:has(input:checked) th,
.optima-content .optima-table tbody tr:has(input:checked) td {
  background: var(--oc-surface-figure);
}

/* Первая колонка закреплена при горизонтальной прокрутке */
.optima-content .optima-table .optima-table__key {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  text-align: start;
}

.optima-content .optima-table tbody .optima-table__key {
  color: var(--oc-accent);
  font-weight: 700;
}

.optima-content .optima-table .optima-table__code {
  font-weight: 600;
}

.optima-content .optima-table__check {
  display: inline-flex;
  align-items: center;
  gap: var(--oc-space-2);
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.optima-content .optima-table__check input {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  margin: 0;
  accent-color: var(--oc-accent);
  cursor: pointer;
}


/* 09 Плашки «Важно / Внимание / Справка» ------------------------------------ */
.optima-content .optima-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--oc-space-3);
  padding: var(--oc-space-4);
  border-inline-start: var(--oc-line-bold) solid var(--oc-border-strong);
  background: var(--oc-surface-soft);
  color: var(--oc-ink);
}

.optima-content .optima-note__body {
  display: grid;
  gap: var(--oc-space-1);
  min-inline-size: 0;
}

.optima-content .optima-note__title {
  font-weight: 700;
}

.optima-content .optima-note--important {
  border-inline-start-color: var(--oc-accent);
}

.optima-content .optima-note--important .optima-content__icon {
  color: var(--oc-accent);
}

.optima-content .optima-note--warning {
  border-inline-start-color: var(--oc-subhead);
}

.optima-content .optima-note--warning .optima-content__icon {
  color: #7d6549;
}

.optima-content .optima-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--oc-space-4);
  margin-block-start: var(--oc-space-5);
}


/* 10 Спецификация ---------------------------------------------------------- */
.optima-content .optima-spec {
  display: grid;
  margin: 0;
  font-size: var(--oc-text-sm);
  line-height: 1.4;
}

.optima-content .optima-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--oc-space-3);
  padding-block: 0.4375rem;
  border-block-end: var(--oc-line) solid var(--oc-border);
}

.optima-content .optima-spec__row:last-child {
  border-block-end: 0;
}

.optima-content .optima-spec dt {
  color: var(--oc-ink-muted);
  font-weight: 400;
}

.optima-content .optima-spec dd {
  margin: 0;
  font-weight: 600;
}


/* 11 Аккордеон: нативный details, работает без JS --------------------------- */
.optima-content .optima-accordion {
  border-block: var(--oc-line) solid var(--oc-border);
}

.optima-content .optima-accordion + .optima-accordion {
  border-block-start: 0;
}

.optima-content .optima-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-3);
  padding-block: var(--oc-space-3);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.optima-content .optima-accordion__summary::-webkit-details-marker {
  display: none;
}

.optima-content .optima-accordion__summary::after {
  content: "";
  inline-size: 0.5625rem;
  block-size: 0.5625rem;
  margin-inline-end: 0.25rem;
  border-block-end: 0.125rem solid currentColor;
  border-inline-end: 0.125rem solid currentColor;
  transform: rotate(45deg) translate(-0.125rem, -0.125rem);
  flex: none;
}

.optima-content .optima-accordion[open] > .optima-accordion__summary::after {
  transform: rotate(-135deg) translate(-0.125rem, -0.125rem);
}

.optima-content .optima-accordion__summary:hover {
  color: var(--oc-accent);
}

.optima-content .optima-accordion__panel {
  padding-block-end: var(--oc-space-3);
}


/* 12 Табы ------------------------------------------------------------------- */
.optima-content .optima-tabs__list {
  display: flex;
  gap: var(--oc-space-1);
  overflow-x: auto;
  border-block-end: var(--oc-line) solid var(--oc-border-strong);
}

.optima-content .optima-tabs__tab {
  flex: none;
  margin: 0;
  margin-block-end: calc(var(--oc-line) * -1);
  padding-block: var(--oc-space-3);
  padding-inline: var(--oc-space-4);
  border: 0;
  border-block-end: var(--oc-line-bold) solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.optima-content .optima-tabs__tab:hover {
  color: var(--oc-accent);
}

.optima-content .optima-tabs__tab[aria-selected="true"] {
  border-block-end-color: var(--oc-accent);
  color: var(--oc-accent);
}

.optima-content .optima-tabs__tab:focus-visible {
  outline-offset: -0.125rem;
}

.optima-content .optima-tabs__panel {
  padding-block-start: var(--oc-space-5);
}


/* 13 Поиск по каталогу ------------------------------------------------------ */
.optima-content .optima-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oc-space-3) var(--oc-space-4);
  padding: var(--oc-space-4);
  background: var(--oc-surface-soft);
  color: var(--oc-ink);
}

.optima-content .optima-search__field {
  position: relative;
  flex: 1 1 18rem;
  min-inline-size: 0;
}

.optima-content .optima-search__field .optima-content__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.75rem;
  transform: translateY(-50%);
  color: var(--oc-ink-muted);
  pointer-events: none;
}

.optima-content .optima-search__input {
  padding-inline-start: 2.5rem;
  box-sizing: border-box;
}

.optima-content .optima-search__status {
  font-size: var(--oc-text-sm);
  color: var(--oc-ink-muted);
}


/* 14 Список определений ----------------------------------------------------- */
.optima-content .optima-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0 var(--oc-space-6);
  margin: 0;
}

.optima-content .optima-terms__row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--oc-space-3);
  padding-block: var(--oc-space-2);
  border-block-end: var(--oc-line) solid var(--oc-border);
}

.optima-content .optima-terms dt {
  font-weight: 700;
}

.optima-content .optima-terms dd {
  margin: 0;
}


/* 15 Галерея ---------------------------------------------------------------- */
.optima-content .optima-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--oc-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.optima-content .optima-gallery__item {
  margin: 0;
  background: var(--oc-surface-figure);
}

.optima-content .optima-gallery__item img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.optima-content .optima-gallery__caption {
  padding-block: var(--oc-space-2);
  padding-inline: var(--oc-space-3);
  font-size: var(--oc-text-xs);
  line-height: 1.4;
  background: var(--oc-surface);
  color: var(--oc-ink-muted);
}


/* 16 Слайдер: scroll-snap, кнопки добавляет JS-атрибут data-optima-slider ---- */
.optima-content .optima-slider {
  display: grid;
  gap: var(--oc-space-3);
}

.optima-content .optima-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(85%, 18rem), 1fr);
  gap: var(--oc-space-4);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  list-style: none;
}

.optima-content .optima-slider__slide {
  min-inline-size: 0;
  margin: 0;
  scroll-snap-align: start;
}

.optima-content .optima-slider__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--oc-space-2);
}


/* 17 Кнопки-иконки и формы -------------------------------------------------- */
:is(.optima-content, .optima-modal) .optima-icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--oc-control-height);
  block-size: var(--oc-control-height);
  margin: 0;
  padding: 0;
  border: var(--oc-line) solid var(--oc-border-strong);
  border-radius: var(--oc-radius);
  background: var(--oc-surface);
  color: var(--oc-ink);
  cursor: pointer;
}

:is(.optima-content, .optima-modal) .optima-icon-btn:hover {
  border-color: var(--oc-accent);
  color: var(--oc-accent);
}

:is(.optima-content, .optima-modal) .optima-form {
  display: grid;
  gap: var(--oc-space-4);
}

:is(.optima-content, .optima-modal) .optima-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--oc-space-4);
}

:is(.optima-content, .optima-modal) .optima-field {
  display: grid;
  gap: var(--oc-space-1);
  margin: 0;
  font-size: var(--oc-text-sm);
  font-weight: 600;
}

:is(.optima-content, .optima-modal) .optima-input {
  display: block;
  inline-size: 100%;
  min-block-size: var(--oc-control-height);
  margin: 0;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border: var(--oc-line) solid var(--oc-border-strong);
  border-radius: var(--oc-radius);
  background: var(--oc-surface);
  color: var(--oc-ink);
  font: inherit;
  font-size: var(--oc-text-md);
  font-weight: 400;
  line-height: 1.4;
}

:is(.optima-content, .optima-modal) textarea.optima-input {
  min-block-size: 6.5rem;
  resize: vertical;
}

:is(.optima-content, .optima-modal) .optima-input:focus {
  border-color: var(--oc-accent);
}

:is(.optima-content, .optima-modal) .optima-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--oc-space-2);
  margin: 0;
  font-size: var(--oc-text-sm);
  line-height: 1.4;
  cursor: pointer;
}

:is(.optima-content, .optima-modal) .optima-consent input {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  margin: 0;
  margin-block-start: 0.0625rem;
  accent-color: var(--oc-accent);
}

:is(.optima-content, .optima-modal) .optima-form__status {
  padding: var(--oc-space-3);
  border-inline-start: var(--oc-line-bold) solid var(--oc-border-strong);
  background: var(--oc-surface-soft);
  font-size: var(--oc-text-sm);
}

:is(.optima-content, .optima-modal) .optima-form__status--error {
  border-inline-start-color: var(--oc-accent);
}

:is(.optima-content, .optima-modal) .optima-form__status--success {
  border-inline-start-color: var(--oc-dark);
}


/* 18 Модальное окно: нативный dialog --------------------------------------
   Самостоятельный корень: может стоять где угодно на странице, в том числе
   в подвале (div.global-forms-block). Открывается через showModal() в верхнем
   слое браузера, поэтому overflow, transform и z-index обёрток подвала
   на него не влияют. Шрифт наследуется от сайта, размер и цвет текста заданы
   явно, чтобы стили подвала не меняли вид формы. */
dialog.optima-modal {
  inline-size: min(40rem, calc(100vw - 2rem));
  max-inline-size: none;
  max-block-size: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-block-start: var(--oc-line-bold) solid var(--oc-accent);
  border-radius: var(--oc-radius);
  background: var(--oc-surface);
  color: var(--oc-ink);
  font: inherit;
  font-size: var(--oc-text-md);
  line-height: 1.5;
  text-align: start;
}

/* Закрытое окно скрыто, даже если стили подвала переопределяют display у dialog */
dialog.optima-modal:not([open]) {
  display: none;
}

dialog.optima-modal::backdrop {
  background: rgba(11, 11, 11, 0.62);
}

.optima-modal .optima-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--oc-space-4);
  padding: var(--oc-space-5);
  padding-block-end: var(--oc-space-3);
}

.optima-modal .optima-modal__head h2 {
  font-size: var(--oc-title-3);
}

.optima-modal .optima-modal__body {
  padding-inline: var(--oc-space-5);
  padding-block-end: var(--oc-space-5);
}

/* Форма CMS (.tpl-anketa) внутри окна: поля в две колонки,
   список позиций и кнопка на всю ширину */
.optima-modal .tpl-anketa {
  color: var(--oc-ink);
}

/* Заголовок формы повторяет заголовок окна */
.optima-modal .tpl-anketa > .title {
  display: none;
}

.optima-modal .tpl-anketa form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--oc-space-4);
  margin: 0;
}

.optima-modal .tpl-anketa form > * {
  grid-column: 1 / -1;
  min-inline-size: 0;
}

.optima-modal .tpl-anketa .tpl-field {
  display: grid;
  gap: var(--oc-space-1);
  margin: 0;
  padding: 0;
}

.optima-modal .tpl-anketa .tpl-field:is(.type-text, .type-phone, .type-email) {
  grid-column: auto;
}

.optima-modal .tpl-anketa .field-title {
  font-size: var(--oc-text-sm);
  font-weight: 600;
  line-height: 1.3;
}

.optima-modal .tpl-anketa .field-value :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), textarea, select) {
  display: block;
  inline-size: 100%;
  min-block-size: var(--oc-control-height);
  margin: 0;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border: var(--oc-line) solid var(--oc-border-strong);
  border-radius: var(--oc-radius);
  background: var(--oc-surface);
  color: var(--oc-ink);
  font: inherit;
  font-size: var(--oc-text-md);
  font-weight: 400;
  line-height: 1.4;
}

.optima-modal .tpl-anketa .field-value textarea {
  min-block-size: 6.5rem;
  resize: vertical;
}

.optima-modal .tpl-anketa .field-value :is(input, textarea, select):focus {
  border-color: var(--oc-accent);
}

.optima-modal .tpl-anketa .field-value :is(input, textarea, select):focus-visible {
  outline: 0.125rem solid var(--oc-accent);
  outline-offset: 0.125rem;
}

.optima-modal .tpl-anketa .field-value :is([type="checkbox"], [type="radio"]) {
  accent-color: var(--oc-accent);
}

.optima-modal .tpl-anketa .tpl-form-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: var(--oc-control-height);
  margin: 0;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  border: 0;
  border-radius: var(--oc-radius);
  background: var(--oc-accent-gradient);
  color: var(--oc-on-dark);
  font: inherit;
  font-size: var(--oc-text-md);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s linear;
}

.optima-modal .tpl-anketa .tpl-form-button:hover {
  background: var(--oc-accent-strong);
}

.optima-modal .tpl-anketa .tpl-form-button:focus-visible {
  outline: 0.125rem solid var(--oc-accent);
  outline-offset: 0.125rem;
}

.optima-modal .tpl-anketa .tpl-form-button[disabled] {
  opacity: 0.6;
  cursor: progress;
}


/* 19 Панель запроса: появляется при выборе позиций в таблицах --------------- */
.optima-content .optima-quote-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-2) var(--oc-space-4);
  margin-block-start: var(--oc-space-6);
  padding-block: var(--oc-space-3);
  padding-inline: var(--oc-space-4);
  background: var(--oc-dark);
  color: var(--oc-on-dark);
}

/* Режим Popover: панель в верхнем слое, прижата к низу окна браузера.
   Браузеры без :popover-open пропускают правило и используют sticky выше. */
.optima-content .optima-quote-bar:popover-open {
  position: fixed;
  inset-block: auto 0;
  inset-inline: 0;
  inline-size: auto;
  block-size: auto;
  max-inline-size: none;
  margin: 0;
  border: 0;
  overflow: visible;
}

.optima-content .optima-quote-bar__count {
  font-weight: 600;
}

.optima-content .optima-quote-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oc-space-2);
}


/* 20 CTA-блок --------------------------------------------------------------- */
.optima-content .optima-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-4) var(--oc-space-6);
  margin-block-start: var(--oc-space-8);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--oc-dark);
  color: var(--oc-on-dark);
}

.optima-content .optima-cta__body {
  display: grid;
  flex: 1 1 22rem;
  gap: var(--oc-space-2);
}

.optima-content .optima-cta__text {
  color: var(--oc-on-dark-muted);
}


/* 21 Адаптив: ширина контейнера, а не окна ----------------------------------- */
@container optima-content (min-width: 62em) {
  .optima-content .optima-product {
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "aside head" "aside main";
    gap: var(--oc-space-3) var(--oc-space-6);
  }

  .optima-content .optima-product__aside {
    position: sticky;
    inset-block-start: var(--oc-sticky-offset);
    align-self: start;
  }
}

@container optima-content (max-width: 30em) {
  .optima-content .optima-hero__actions .optima-btn,
  .optima-content .optima-cta .optima-btn {
    inline-size: 100%;
  }

  .optima-content .optima-content__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--oc-space-3);
  }

  .optima-content .optima-equip-card__media,
  .optima-content .optima-equip-card__body {
    padding: var(--oc-space-3);
  }
}

/* Модальное окно не входит в контейнер .optima-content:
   адаптив по ширине окна браузера */
@media (max-width: 30em) {
  .optima-modal .optima-modal__head {
    padding: var(--oc-space-4);
  }

  .optima-modal .optima-modal__body {
    padding-inline: var(--oc-space-4);
    padding-block-end: var(--oc-space-4);
  }

  .optima-modal .tpl-anketa form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.optima-content, .optima-modal) .optima-btn,
  .optima-modal .tpl-anketa .tpl-form-button,
  .optima-content .optima-equip-card {
    transition: none;
  }

  .optima-content .optima-slider__track {
    scroll-behavior: auto;
  }
}