/* .ap-faq — accordion used on the homepage FAQ section, store pages, and
   anywhere else FAQs appear. Shared component (not page-scoped) so every
   page that uses <details class="ap-faq__item"> gets the same styling. */

.ap-faq {
  max-width: 760px;
  margin-inline: auto;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  overflow: hidden;
  background: var(--ap-surface-alt);
  box-shadow: var(--ap-shadow-md);
}

.ap-faq__item {
  border-bottom: 1px solid var(--ap-border);
}

.ap-faq__item:last-child {
  border-bottom: none;
}

.ap-faq__item summary {
  cursor: pointer;
  font-weight: 700;
  padding: var(--ap-space-md) var(--ap-space-lg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ap-space-md);
  transition: background var(--ap-transition);
}

.ap-faq__item summary:hover {
  background: var(--ap-surface);
}

.ap-faq__item summary::-webkit-details-marker { display: none; }

.ap-faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ap-text-muted);
  border-bottom: 2px solid var(--ap-text-muted);
  transform: rotate(45deg);
  transition: transform var(--ap-transition);
  margin-top: -4px;
}

.ap-faq__item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.ap-faq__item summary:focus-visible {
  outline: none;
  box-shadow: inset var(--ap-focus-ring);
}

.ap-faq__answer {
  color: var(--ap-text-muted);
  padding: 0 var(--ap-space-lg) var(--ap-space-lg);
}