/* ═══════════════════════════════════════════════════════════════════
   PRODUCT INFO TABS  (About · Research · Storage · Specifications)
   Everything is scoped under .product-info and prefixed pi-. The content is real HTML in each product page's source,
   so search engines index every tab; js/product-info.js only shows and hides panels.
   Without JavaScript the tab bar stays hidden and the four panels simply stack, each under its own heading.
   Uses the site's tokens only. The panels sit on a white card so link and text colours meet contrast anywhere on
   the page's background.
   ═══════════════════════════════════════════════════════════════════ */
.product-info { margin: 0 0 64px; }
.product-info [hidden] { display: none !important; }              /* hidden must always win over the display rules below */
.pi-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 4px 32px 32px; color: var(--text); }

/* tab bar (only once JS has run) */
.pi-tablist { display: none; gap: 4px; margin: 0 -8px; border-bottom: 1px solid var(--line-strong); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pi-tablist::-webkit-scrollbar { display: none; }
.product-info.pi-js .pi-tablist { display: flex; }
.product-info .pi-tab {
  flex: 0 0 auto; appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  min-height: 52px; padding: 14px 18px; cursor: pointer; white-space: nowrap;
  font-family: var(--display); font-size: 15.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--text-dim);
}
.product-info .pi-tab:hover { color: var(--text); }
.product-info .pi-tab[aria-selected="true"] { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.product-info .pi-tab:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; border-radius: 6px; }
.pi-panel:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 8px; border-radius: 6px; }

/* panels */
.pi-panel { padding: 28px 0 4px; font-size: 16px; line-height: 1.7; }
.pi-panel-title { margin: 0 0 14px; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.product-info:not(.pi-js) .pi-panel + .pi-panel { margin-top: 12px; padding-top: 32px; border-top: 1px solid var(--line-strong); }
/* with JS the tab label is the title; the heading stays for screen readers and search engines */
.product-info.pi-js .pi-panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pi-panel h3 { margin: 30px 0 10px; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.pi-panel h3:first-of-type { margin-top: 0; }
.pi-panel p { margin: 0 0 14px; max-width: 70ch; }
.pi-lead { font-size: 17.5px; }
.pi-aka { font-size: 14.5px; color: var(--text-dim); }

/* literature */
.pi-studies { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pi-study { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated); }
.pi-study-design { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.pi-study p { margin: 0 0 8px; font-size: 15.5px; }
.pi-cite { font-size: 14.5px; font-weight: 600; color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.pi-cite:hover { color: var(--text); }
.pi-note { margin-top: 14px; font-size: 14px; color: var(--text-dim); }

/* storage list */
.pi-list { margin: 0; }
.pi-list > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pi-list > div:last-child { border-bottom: 0; }
.pi-list dt { font-weight: 700; }
.pi-list dd { margin: 0; color: var(--text); }

/* specifications table */
.pi-spec-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; font-size: 15.5px; }
.pi-spec-table th, .pi-spec-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pi-spec-table tr:last-child th, .pi-spec-table tr:last-child td { border-bottom: 0; }
.pi-spec-table th { width: 34%; background: var(--bg-elevated); font-weight: 700; }
.pi-mono { font-family: var(--mono); font-size: 13.5px; word-break: break-word; }
.pi-spec-table a { color: var(--accent-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* research-use notice */
.pi-notice { margin-top: 22px !important; padding: 12px 16px; border-radius: 10px; background: var(--bg-elevated); font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }

@media (prefers-reduced-motion: no-preference) {
  .product-info .pi-tab { transition: color .15s ease, border-color .15s ease; }
}
@media (max-width: 640px) {
  .pi-card { padding: 2px 18px 24px; }
  .product-info .pi-tab { padding: 12px 14px; font-size: 14.5px; }
  .pi-panel { font-size: 15.5px; padding-top: 22px; }
  .pi-list > div { grid-template-columns: 1fr; gap: 4px; }
  .pi-spec-table th { width: 40%; }
  .pi-panel-title { font-size: 21px; }
}