/* product-qa.css — «Вопрос-ответ» на странице товара (#qa): аккордеон на <details>, кнопка чата.
   В WP — template-parts/sections/product-qa.php темы; пары вопрос/ответ — поле товара в админке (README вёрстки, п. 11). */

.faq {
  display: grid;
  gap: var(--space-8);
  max-width: calc(900 * var(--vw-unit));
}

.faq__item {
  border-radius: var(--radius-14);
  background: var(--color-bg-soft);
  transition: background var(--transition-base);
}

.faq__item[open] {
  background: var(--color-bg-soft-3);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-18) var(--space-20);
  border-radius: inherit;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: var(--lh-1-3);
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question .icon {
  flex: none;
  color: var(--color-text-2);
  transition: transform var(--transition-medium);
}

.faq__item[open] .faq__question .icon {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .faq__item:not([open]):hover {
    background: var(--color-bg-soft-2);
  }
}

.faq__answer {
  padding: 0 var(--space-20) var(--space-18);
}

.product-section .faq__answer p {
  margin: 0;
  font-size: var(--fs-15);
}

.faq__ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  max-width: calc(900 * var(--vw-unit));
  margin-top: var(--space-16);
  padding: var(--space-20) var(--space-24);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-14);
}

.faq__ask b {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-16);
}

.faq__ask span {
  font-size: var(--fs-14);
  color: var(--color-text-2);
}

@media (max-width: 767px) {
  .faq__question {
    padding: var(--space-16);
    font-size: var(--fs-15);
  }

  .faq__answer {
    padding: 0 var(--space-16) var(--space-16);
  }

  .faq__ask {
    padding: var(--space-16);
  }

  .faq__ask .btn {
    width: 100%;
  }
}