/* Accordion — WowVendor DS.
   Оси component set: Type (simple/accent) × Close (true=свёрнут / false=развёрнут)
   × Interaction (default / hover & focus).

   Кликабельная область — вся строка заголовка (кроме содержимого), поэтому
   заголовок — <button>. Hover & Focus меняет ТОЛЬКО цвет заголовка (gray-900 →
   gray-500); стрелка остаётся gray-900 (проверено пиксельным сэмплингом эталона).

   Разделитель снизу — inset box-shadow, а не border: в Figma stroke лежит внутри
   и не раздвигает габарит (64px у Simple, 62px у Accent).

   Значения — только токены. Типографика — utility-классами в разметке:
   заголовок Simple .text-body-16m, Accent .text-display-16; текст .text-body-16.
   Под-компонент: feedback-question (только у Simple). */

.acc {
  --acc-divider: inset 0 -1px 0 0 var(--color-gray-50);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  box-shadow: var(--acc-divider);
  font-family: var(--font-family-base);
  /* Inter Variable несёт ось opsz и по умолчанию (auto) сужает глифы на мелких
     кеглях; Figma рендерит статическим Inter без неё. Без отключения переносы
     длинного текста уезжают на строку раньше (honest diff 1.74% → 0.94%). */
  font-optical-sizing: none;
}

/* ---- Строка заголовка (кликабельная) ---- */
.acc__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-20);
  width: 100%;
  padding: var(--spacing-20) 0;
  box-sizing: border-box;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.acc__title {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  color: var(--color-gray-900);
  overflow-wrap: break-word;
}

.acc__header:hover .acc__title,
.acc__header:focus-visible .acc__title,
.acc--hover .acc__title { color: var(--color-gray-500); }

/* Клавиатурный фокус — видимая рамка, как у button/product-card (сверх макета:
   в Figma Hover и Focus — одна ось, различимая только цветом заголовка). */
.acc__header:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

/* ---- Стрелка (icon-arrow-down / icon-arrow-up, 20px) ---- */
.acc__icon {
  display: inline-flex;
  flex: none;
  width: var(--spacing-20);
  height: var(--spacing-20);
  color: var(--color-gray-900);
}
.acc__icon svg { display: block; width: 100%; height: 100%; }

/* ---- Содержимое ---- */
.acc__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-32);
  width: 100%;
  box-sizing: border-box;
  padding-bottom: var(--spacing-36);
}

.acc__text {
  margin: 0;
  width: 100%;
  color: var(--color-gray-700);
  overflow-wrap: break-word;
}

/* Свёрнутое состояние: содержимого нет */
.acc--closed .acc__content { display: none; }

/* ---- Type=Accent ----
   Отступ слева 32px, у развёрнутого — белая подложка и акцентная полоса 4px
   (в Figma заливка #0059de без переменной = --color-accent-400). */
.acc--accent { padding-left: var(--spacing-32); }
.acc--accent .acc__content { padding-right: var(--spacing-32); }

.acc--accent.acc--open {
  background: var(--color-gray-0);
  box-shadow: inset var(--spacing-4) 0 0 0 var(--color-accent-400), var(--acc-divider);
}

/* У развёрнутого Accent стрелки нет (так в мастере) */
.acc--accent.acc--open .acc__icon { display: none; }