/* =============================================================================
   Iktató — GYAKORI KÉRDÉSEK a termék-nyitólapon: details/summary harmonika, JS nélkül.
   Az absec.hu faq.css-ének mintája (.faq__* → .f-gyik__*). A + jel a ::before/::after vonalakból áll.
   ============================================================================= */
.f-gyik { background: var(--f-ground); }

.f-gyik__elrendezes {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: start;
}

.f-gyik__bevezeto { display: grid; gap: 1rem; align-content: start; }
.f-gyik__bevezeto h2 {
  max-width: 12ch;
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -0.043em;
  text-wrap: balance;
}
.f-gyik__bevezeto p { margin: 0; font-size: var(--t-lead); line-height: 1.45; }

.f-gyik__lista { border-top: 1px solid var(--f-line); }
.f-gyik__elem { border-bottom: 1px solid var(--f-line); }

/* A böngésző saját háromszöge elrejtve, saját +/− jel jön helyette. */
.f-gyik__kerdes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 44px;
  padding: 1.1rem 0.25rem;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--f-ink);
  cursor: pointer;
}
.f-gyik__kerdes::-webkit-details-marker { display: none; }
.f-gyik__kerdes:hover { color: var(--f-primary-ink); }

.f-gyik__jel {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}
.f-gyik__jel::before,
.f-gyik__jel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.f-gyik__jel::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform var(--dur) var(--ease);
}
.f-gyik__elem[open] .f-gyik__jel::after { transform: translate(-50%, -50%) rotate(0deg); }

.f-gyik__valasz { max-width: 66ch; padding: 0 0.25rem 1.4rem; }
.f-gyik__valasz p { margin: 0; line-height: 1.6; color: var(--f-ink-soft); }

@media (max-width: 900px) {
  .f-gyik__elrendezes { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}