/* =========================
   PixelToWeb Documentation
   Isolated documentation-only styles
========================= */
.docs-index-page .all-templates-hero,
.docs-detail-page .docs-hero { border-bottom: 1px solid var(--border-color, #e5e7eb); }
.docs-index-page .catalog-grid { min-height: 220px; }
.documentation-item[hidden] { display: none !important; }
.docs-empty { display:none; text-align:center; padding:4rem 1.5rem; border:1px dashed #cfd2d6; border-radius:24px; background:#fff; }
.docs-empty.show { display:block; }
.documentation-card .template-actions { align-items:center; }
.documentation-card .docs-primary-link { font-weight:800; }
.docs-guide-meta { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.35rem; }
.docs-guide-meta span { border:1px solid #dedede; background:#fff; border-radius:999px; padding:.5rem .8rem; font-size:.82rem; font-weight:700; }
.docs-hero { padding:2.25rem 0 2rem; background:#f7f7f8; }
.docs-hero h1 { font-size:clamp(2.25rem,5vw,4.9rem); line-height:.98; margin:.6rem 0 1rem; }
.docs-hero .docs-lead { max-width:760px; font-size:1.08rem; color:#616161; }
.docs-hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.docs-shell { padding:3rem 0 6rem; }
.docs-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:3.5rem; align-items:start; }
.docs-sidebar { position:sticky; top:105px; max-height:calc(100vh - 125px); overflow:auto; padding-right:.35rem; }
.docs-sidebar-label { display:block; margin-bottom:.8rem; text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:800; color:#777; }
.docs-toc { display:flex; flex-direction:column; gap:.12rem; }
.docs-toc a { color:#5a5a5a; text-decoration:none; padding:.48rem .65rem; border-radius:10px; font-size:.92rem; }
.docs-toc a:hover,.docs-toc a:focus-visible { background:#f1f1f1; color:#111; outline:none; }
.docs-content { min-width:0; max-width:900px; }
.docs-section { scroll-margin-top:115px; padding:0 0 3.6rem; margin:0 0 3.6rem; border-bottom:1px solid #e7e7e7; }
.docs-section:last-child { border-bottom:0; }
.docs-section h2 { font-size:clamp(1.7rem,3vw,2.5rem); margin-bottom:1rem; }
.docs-section h3 { font-size:1.14rem; margin:1.7rem 0 .6rem; }
.docs-section p,.docs-section li { color:#555; line-height:1.8; }
.docs-section ul,.docs-section ol { padding-left:1.25rem; }
.docs-section code:not(pre code) { background:#f1f1f1; border-radius:6px; padding:.14rem .35rem; color:#222; }
.docs-code { background:#151515; color:#f4f4f4; border-radius:18px; padding:1.2rem; overflow:auto; margin:1.15rem 0; }
.docs-code code { color:inherit; white-space:pre; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:.88rem; }
.docs-note { border-left:4px solid #111; background:#f7f7f8; padding:1rem 1.15rem; border-radius:0 12px 12px 0; margin:1.2rem 0; color:#444; }
.docs-warning { border-left-color:#a06b00; background:#fff8e9; }
.docs-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1rem; padding:0!important; list-style:none; }
.docs-checklist li { padding:.6rem .75rem; border:1px solid #e5e5e5; border-radius:12px; background:#fff; }
.docs-checklist li::before { content:'✓'; font-weight:900; margin-right:.5rem; color:#111; }
.docs-section-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; padding:0!important; list-style:none; }
.docs-section-list li { border:1px solid #e5e5e5; border-radius:12px; padding:.75rem .9rem; background:#fff; }
.docs-mobile-toc { display:none; margin-bottom:1.5rem; }
.docs-mobile-toc .accordion-button { font-weight:800; }
.docs-mobile-toc .accordion-body { padding:.75rem; }
.docs-mobile-toc .docs-toc a { display:block; }
.docs-spec-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.docs-spec-grid div { padding:1rem; border:1px solid #e5e5e5; border-radius:14px; }
.docs-spec-grid span { display:block; color:#777; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.docs-spec-grid strong { display:block; margin-top:.25rem; }
.docs-back-top { display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; }
@media (max-width: 991.98px) {
  .docs-layout { grid-template-columns:1fr; gap:1.5rem; }
  .docs-sidebar { display:none; }
  .docs-mobile-toc { display:block; }
  .docs-shell { padding-top:2rem; }
}
@media (max-width: 575.98px) {
  .docs-checklist,.docs-section-list,.docs-spec-grid { grid-template-columns:1fr; }
  .docs-hero-actions .btn { width:100%; }
}