/**
 * Questions and answers on the product page.
 *
 * Inherits the product page's tokens, so it belongs to the page rather than
 * arriving from a plugin. Built on <details>, so it works with JavaScript off
 * and is reachable from the keyboard without anything being wired up.
 *
 * Sits between the description and the reviews, on the page's own background
 * rather than the warm sand band — the panels above it are the shop talking,
 * and this is closer in kind to the reviews below it.
 */

.gms-faq {
  margin: 40px auto 0;
  max-width: 860px;
  padding: 0 20px;
}

.gms-faq__title {
  margin: 0 0 18px;
  font-family: var(--ss-serif, Georgia, serif);
  font-size: clamp(26px, 6vw, 32px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ss-ink, #2c2721);
}

.gms-faq__item { border-bottom: 1px solid var(--ss-line, rgba(87, 82, 74, .18)); }
.gms-faq__item:first-of-type { border-top: 1px solid var(--ss-line, rgba(87, 82, 74, .18)); }

.gms-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ss-ink, #2c2721);
  cursor: pointer;

  /* Both, because Safari uses the pseudo-element and everything else uses
     this — a stray triangle beside a drawn chevron looks like a bug. */
  list-style: none;
}

.gms-faq__q::-webkit-details-marker { display: none; }

/* A drawn chevron: no icon font, no image request. */
.gms-faq__q::after {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-top: 7px;
  border-right: 1.5px solid var(--ss-ink-3, #8a837a);
  border-bottom: 1.5px solid var(--ss-ink-3, #8a837a);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}

.gms-faq__item[open] .gms-faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.gms-faq__q:hover { color: var(--ss-ember-ink, #a83e05); }

.gms-faq__q:focus-visible {
  outline: 2px solid var(--ss-ember-ink, #a83e05);
  outline-offset: 2px;
  border-radius: 4px;
}

.gms-faq__a {
  padding: 0 32px 20px 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ss-ink-2, #57524a);
}

.gms-faq__a p { margin: 0 0 12px; }
.gms-faq__a p:last-child { margin-bottom: 0; }

.gms-faq__a a {
  color: var(--ss-indigo, #2f3d7e);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 900px) {
  .gms-faq { padding: 0; }
  .gms-faq__title { margin-bottom: 22px; }
}