/* FAQ ------------------------------------------------------------------
   Questions and answers as native details/summary, so the accordion folds
   with no script at all. The twisty is the shop's own chevron, the one
   every other disclosure here turns (the drawer's groups, the facets), not
   the browser's triangle. What is left is the rule between entries and the
   room around an answer. */

.faq__item {
  border-top: 1px solid var(--line);
  /* Lets the answer's height run to auto below. The entries under it move
     while it opens, but only straight after the click that opened it, which
     is the window layout-shift scoring leaves out. A browser without
     ::details-content (Safari, Firefox today) opens at once, as before. */
  interpolate-size: allow-keywords;
}

.faq__item::details-content {
  height: 0;
  overflow: clip;
  transition:
    height var(--dur-base) var(--ease-out),
    content-visibility var(--dur-base) allow-discrete;
}

.faq__item[open]::details-content {
  height: auto;
}

.faq__item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-3) 0;
  font-weight: 700;
  font-size: var(--text-lg);
  list-style: none;
}

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

.faq__question .icon {
  flex: none;
  color: var(--ink-muted);
  transition: transform var(--dur-fast) var(--ease-out);
}

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

.faq__answer {
  padding: 0 0 var(--space-4);
  font-size: var(--text-lg);
  color: var(--ink-soft);
}

/* The answer is rendered markdown, so its first and last paragraph bring
   margins the padding above already accounts for. */
.faq__answer > :first-child {
  margin-top: 0;
}

.faq__answer > :last-child {
  margin-bottom: 0;
}