/* ═══════════════════════════════════════════════════════
   KHASIS — CONTENT PAGE STYLES · loads after style.css
   Used by /parts/* and /guides/* static pages.
   ═══════════════════════════════════════════════════════ */

.pagewrap{max-width:800px;margin:0 auto;padding:0 20px 80px}

/* breadcrumbs */
.crumbs{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);
  padding:22px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 7px;color:var(--rule)}

/* page head */
.phead{padding:16px 0 0}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent);margin-bottom:10px}
.pagewrap h1{font-family:var(--display);font-style:italic;font-weight:800;
  font-size:clamp(32px,6vw,54px);line-height:.98;text-transform:uppercase}
.deck{font-size:17px;color:#C9C9CD;margin-top:14px;max-width:620px}
.phead .rule{height:3px;background:var(--accent);margin:22px 0 30px}

/* article body */
article h2{font-family:var(--display);font-style:italic;font-weight:800;
  font-size:clamp(24px,4vw,34px);text-transform:uppercase;line-height:1;
  margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--rule)}
article h3{font-family:var(--label);font-weight:700;font-size:17px;
  letter-spacing:.02em;margin:26px 0 8px;color:var(--line)}
article p{color:#C9C9CD;margin-bottom:15px;font-size:15.5px}
article ul,article ol{color:#C9C9CD;padding-left:22px;margin-bottom:16px;font-size:15.5px}
article li{margin-bottom:8px}
article strong{color:var(--line)}
article a{color:var(--accent)}
.lede{font-size:17px;color:#D2D2D6}

/* spec / fitment tables */
.spec{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:14px}
.spec th{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--muted);
  font-weight:400;text-align:left;padding:0 10px 9px;border-bottom:1px solid var(--accent)}
.spec td{padding:10px;border-bottom:1px solid var(--rule);color:#C9C9CD;vertical-align:top}
.spec td:first-child{font-family:var(--mono);font-size:12px;color:var(--muted);
  white-space:nowrap;width:34%}
.spec .pn{font-family:var(--mono);font-size:13px;color:var(--line)}

/* callout boxes */
.box{background:var(--alt,#111113);border:1px solid var(--rule);
  border-left:3px solid var(--accent);padding:16px 18px;margin:22px 0}
.box.warn{border-left-color:var(--warn)}
.box.ok{border-left-color:var(--ok)}
.box h4{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted);
  font-weight:400;margin-bottom:8px}
.box p{margin-bottom:0;font-size:14.5px}
.box p+p{margin-top:10px}

/* honesty label */
.conf{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  padding:3px 8px;border:1px solid currentColor;margin-bottom:10px}
.c-doc{color:var(--ok)}.c-common{color:var(--warn)}.c-verify{color:var(--accent)}

/* product buy panel */
.buypanel{background:#111113;border:1px solid var(--rule);padding:22px;margin:26px 0}
.buypanel .status{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--warn);margin-bottom:10px}
.buypanel .price{font-family:var(--display);font-style:italic;font-weight:800;font-size:34px;line-height:1}
.buypanel .sub{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:8px;line-height:1.8}
.buypanel .btn{margin-top:16px}

/* faq */
.faq{border-top:1px solid var(--rule);margin-top:8px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{font-family:var(--label);font-weight:700;font-size:15.5px;
  padding:15px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--mono);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 16px;margin:0;font-size:14.5px}

/* related links */
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px}
.related a{display:block;background:#111113;border:1px solid var(--rule);padding:16px;
  text-decoration:none;transition:border-color .2s}
.related a:hover{border-color:var(--accent)}
.related .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--accent)}
.related .t{font-family:var(--display);font-style:italic;font-weight:800;font-size:18px;
  text-transform:uppercase;color:var(--line);margin-top:6px;line-height:1.05}
.related .d{font-size:12.5px;color:var(--muted);margin-top:6px}

/* index hub list */
.hublist{display:grid;gap:12px;margin-top:8px}
.hublist a{display:block;background:#111113;border:1px solid var(--rule);
  border-left:3px solid var(--rule);padding:18px 20px;text-decoration:none;transition:border-color .2s}
.hublist a:hover{border-left-color:var(--accent)}
.hublist .t{font-family:var(--display);font-style:italic;font-weight:800;font-size:22px;
  text-transform:uppercase;color:var(--line);line-height:1.05}
.hublist .d{font-size:14px;color:#BDBDC2;margin-top:7px}
.hublist .m{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted);margin-top:9px}

.updated{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted);
  border-top:1px solid var(--rule);margin-top:44px;padding-top:16px;line-height:1.9}