/* ============================================================
   FABBRUCCIO: THE FAQ BAND (section slug: faq)

   RESTORED 2026-07-25 alongside fab-clips.css, for the same reason: the
   beta2 approval settled the DESIGN LANGUAGE, not the section list.

   Data comes from fabbruccio_pdp_faq(), which merges the product's own
   MetaBox `product_faq` cloneable repeater with three shared questions
   (sizing, shipping, returns). So the copy is per-product and the shared
   answers cannot drift between PDPs.

   Language: components.md section on disclosure. Hairline-separated rows,
   a +/- affordance, NO boxes, NO shadows, NO radius. Native <details> so
   it is keyboard and screen-reader correct without any JS.
   ============================================================ */

.fab-faq {
  padding: var(--fab-band-md) 0;
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
}

.fab-faq__head {
  margin-bottom: clamp(18px, 2.6vw, 32px);
}

.fab-faq__eyebrow {
  display: block;
  font-size: var(--fab-eyebrow-size);
  letter-spacing: var(--fab-eyebrow-tracking);
  font-weight: var(--fab-eyebrow-weight);
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}

.fab-faq__list {
  max-width: var(--fab-measure-wide);
}

.fab-faq__item {
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
}

.fab-faq__item:last-child {
  border-bottom: var(--fab-hairline-width) solid var(--fab-hairline);
}

.fab-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fab-space-md);
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fab-size-detail);
  line-height: var(--fab-leading-compact);
  color: var(--fab-ink);
}

/* Kill the native marker in both engines. */
.fab-faq__q::-webkit-details-marker { display: none; }
.fab-faq__q::marker { content: ""; }

/* The affordance is a character, not an icon font and not an image.
   `content` is not animatable, so there is deliberately no transition
   here (the parent theme carries a dead one of exactly this shape). */
.fab-faq__q::after {
  content: "+";
  color: var(--fab-ink-secondary);
  font-size: var(--fab-size-small);
  line-height: 1;
  flex: 0 0 auto;
}

.fab-faq__item[open] > .fab-faq__q::after { content: "\2013"; }

.fab-faq__a {
  padding: 0 0 18px;
  max-width: var(--fab-measure-prose);
  font-size: var(--fab-size-prose);
  line-height: var(--fab-leading-prose);
  color: var(--fab-ink-secondary);
}