/* Technical overview, FAQ and related-guides sections on the six product pages.
   Built on the pages' own .info-section / .section-label / .section-title /
   .info-card classes, so spacing, colours and the 700px breakpoint (where
   .info-grid drops to one column) all come from the existing design. */

.jp-detail, .jp-faq, .jp-related { padding-top: 24px; }

.jp-prose p {
  font-size: 16px; line-height: 1.8; color: var(--text-2);
  max-width: 780px; margin: 22px 0 0;
}
.jp-detail .info-grid { margin-top: 32px; }
h3.info-card-label { margin: 0 0 14px; font-family: inherit; }
.jp-card-text { font-size: 15px; line-height: 1.75; color: var(--text-2); margin: 0; }

.jp-faq-list { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.jp-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.jp-faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 600; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--text);
}
.jp-faq-item summary::-webkit-details-marker { display: none; }
.jp-faq-item summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--accent); transition: transform .2s; flex-shrink: 0; }
.jp-faq-item[open] summary::after { transform: rotate(45deg); }
.jp-faq-item summary:focus:not(:focus-visible) { outline: none; }
.jp-faq-item p { padding: 0 22px 20px; margin: 0; color: var(--text-2); line-height: 1.75; font-size: 15px; }

.jp-related-list {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.jp-related-list a {
  display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.45;
  transition: border-color .2s;
}
.jp-related-list a:hover { border-color: var(--accent); }
.jp-related-list a::after { content: ' \2192'; color: var(--accent); }
[dir="rtl"] .jp-related-list a::after { content: ' \2190'; }

.jp-siblings { margin-top: 28px; font-size: 14px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.jp-siblings a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; }
.jp-siblings a:hover { color: var(--accent); border-color: var(--accent); }