/* Match hardware-size-chart.css: white drafting paper, charcoal, and fine rules. */
.hardware-catalog-page {
  --bg:#fff; --surface:#fff; --text:#171716; --muted:#4d535a; --dim:#626b75;
  --border:#d9dde1; --border-md:#a8adb3; --accent:#20201e;
  --accent-dim:#f3f4f5; --accent-br:#a8adb3;
  /* Legacy markup uses these tokens for links, labels, and notes. */
  --gold:#20201e; --gold-dim:#f3f4f5; --gold-br:#d9dde1;
  background:#fff;
}
.catalog-main { position:relative; isolation:isolate; padding-bottom:64px; }
.catalog-main::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(28,39,51,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(28,39,51,.06) 1px,transparent 1px),linear-gradient(rgba(28,39,51,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(28,39,51,.025) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
}
.page-header,.stat-bar,.intro-band,.hw-section,.catalog-photo-note { max-width:1560px; padding-inline:clamp(24px,3.6vw,64px); }
.page-header { padding-top:126px; padding-bottom:40px; }
.breadcrumb { margin-bottom:30px; font:400 12px/1.6 Inter,sans-serif; text-transform:none; letter-spacing:0; }
.breadcrumb span { color:var(--muted); }
.page-header h1 { margin-bottom:24px; }
.page-header p { max-width:760px; font-size:16px; line-height:1.8; }
.stat-bar { margin-bottom:40px; }
.stat-bar-inner { border-inline:0; background:transparent; }
.stat-item { padding:22px 24px; text-align:left; }
.stat-item:first-child { padding-left:0; }
.stat-num { color:var(--text); font:400 30px/1.2 Inter,sans-serif; margin-bottom:8px; }
.stat-lbl { font-size:12px; font-weight:400; letter-spacing:.04em; line-height:1.6; }
.section-label { font-size:12px; font-weight:400; letter-spacing:.1em; line-height:1.6; margin-bottom:20px; }
.hw-section { padding-bottom:24px; }
.hw-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; background:transparent; border:0; }
.hw-card { border:1px solid var(--border); background:#fff; animation:none; transition:border-color .18s ease; }
.hw-card:hover { background:#fff; border-color:var(--border-md); transform:none; box-shadow:none; }
.hw-card-accent { display:none; }
.hw-card-diagram { height:auto; aspect-ratio:4/3; padding:22px 24px 40px; background:#fff; }
.hw-card-diagram img { display:block; width:100%; height:100%; object-fit:contain; }
.hw-photo-caption { position:absolute; bottom:12px; left:12px; right:12px; text-align:center; font:400 12px/1.5 Inter,sans-serif; color:var(--muted); }
.hw-card-body { padding:26px; }
.hw-card-eyebrow { font:400 12px/1.6 Inter,sans-serif; text-transform:none; letter-spacing:0; color:var(--dim); margin-bottom:12px; }
.hw-card-name { font:500 28px/1.15 Inter,sans-serif; letter-spacing:-.035em; margin-bottom:14px; }
.hw-card-desc { font-size:15px; line-height:1.75; margin-bottom:22px; }
.hw-card-tags { gap:6px; }
.tag,.tag.hi { color:var(--muted); border-color:var(--border); background:#fff; font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; padding:4px 8px; line-height:1.4; }
.hw-card-footer { margin-top:24px; padding-top:18px; }
.hw-card-count { font:400 12px/1.5 Inter,sans-serif; color:var(--muted); letter-spacing:0; text-transform:none; }
.hw-card-arrow { display:none; }
.hw-card-btn { min-height:46px; padding:12px 16px; background:#fff; border:1px solid var(--border-md); color:var(--text); font-size:14px; line-height:1.5; letter-spacing:0; text-transform:none; }
.hw-card:hover .hw-card-btn,.hw-card-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.catalog-photo-note { margin:0 auto; padding-bottom:48px; color:var(--muted); font-size:13px; line-height:1.8; }
.intro-band { margin-bottom:0; }
.intro-inner { grid-template-columns:repeat(2,minmax(0,1fr)); padding:28px; background:#fff; border:1px solid var(--border); }
.intro-block-label { color:var(--dim); font-size:12px; font-weight:400; letter-spacing:.08em; line-height:1.6; }
.intro-block-text { font-size:14px; line-height:1.8; }
.intro-block-text a { text-underline-offset:3px; }

/* Detail panel shares the calculator's cards, table rules, and controls. */
.drawer-overlay { z-index:1200; background:rgba(23,23,22,.32); backdrop-filter:blur(3px); }
.drawer { z-index:1201; background:#fff; border-left:1px solid var(--border); box-shadow:-8px 0 32px rgba(23,23,22,.08); }
.drawer-topbar { height:68px; padding-inline:24px; background:#fff; border-bottom:1px solid var(--border); }
.drawer-topbar-left { min-width:0; }
.drawer-mono { color:var(--muted); font-size:12px; letter-spacing:.05em; }
.drawer-close-btn { width:44px; height:44px; flex-shrink:0; color:var(--muted); border:1px solid var(--border); font-size:24px; }
.drawer-close-btn:hover { color:var(--text); background:#f3f4f5; }
.drawer-hero { padding:32px 32px 28px; background:#fff; }
.drawer-series-tag { font:400 13px/1.6 Inter,sans-serif; letter-spacing:0; text-transform:none; color:var(--dim); margin-bottom:14px; }
.drawer-title { font-size:36px; line-height:1.15; font-weight:400; letter-spacing:-.035em; margin-bottom:16px; }
.drawer-desc { max-width:none; font-size:15px; line-height:1.8; }
.drawer-chips { gap:6px; margin-top:22px; }
.drawer-chip,.drawer-chip.gold { color:var(--muted); background:#fff; border-color:var(--border); font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; line-height:1.4; padding:5px 9px; }
.drawer-body { padding:28px 32px; gap:32px; }
.dr-section-label { color:var(--dim); font-size:12px; letter-spacing:.08em; line-height:1.6; }
.dr-section-label::before { display:none; }
.pem-series-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pem-series-photo { min-width:0; border:1px solid var(--border); background:#fff; }
.pem-series-photo > a { display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; padding:16px; }
.pem-series-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.pem-series-photo figcaption { border-top:1px solid var(--border); padding:14px 16px; display:grid; grid-template-columns:1fr auto; gap:5px 12px; font-size:14px; }
.pem-series-photo figcaption strong { font-weight:500; }
.pem-series-photo figcaption > span { color:var(--muted); }
.pem-series-photo figcaption > a { grid-column:1/-1; color:var(--text); font-size:13px; line-height:1.6; text-underline-offset:3px; }
.pem-example-part { display:block; color:var(--muted); font-family:'Share Tech Mono',monospace; overflow-wrap:anywhere; }
.pem-photo-note { margin-top:12px; font-size:13px; line-height:1.8; color:var(--muted); }
.material-toggle { gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.mat-btn { min-height:44px; padding:10px 16px; background:#fff; font-size:14px; line-height:1.5; text-transform:none; letter-spacing:0; border-color:var(--border-md); }
.mat-btn.active { background:var(--accent); border-color:var(--accent); }
.spec-table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; border:1px solid var(--border); }
.spec-table { min-width:620px; }
.spec-table th { padding:14px 12px; background:#fff; font:500 12px/1.5 Inter,sans-serif; letter-spacing:0; text-transform:none; color:var(--muted); }
.spec-table td { padding:16px 12px; color:var(--text); }
.spec-table tbody tr:hover td { background:#f7f8f9; }
.spec-table .mono { font-weight:500; }
.spec-table .pn { font-size:12px; }
.spec-table .pn a { color:var(--text); text-underline-offset:4px; }
.unit-badge,.unit-badge.in,.unit-badge.mm { color:var(--muted); background:#f3f4f5; border-color:var(--border); font-size:10px; font-weight:400; letter-spacing:0; }
.callout,.callout-blue { padding:18px 20px; color:var(--muted); background:#fff; border:1px solid var(--border); border-left:2px solid var(--border-md); font-size:14px; line-height:1.8; }
.callout strong,.callout-blue strong { color:var(--text); font-weight:500; }
.info-block { background:#fff; padding:20px; }
.info-block-label { font:400 12px/1.5 Inter,sans-serif; letter-spacing:0; text-transform:none; color:var(--muted); }
.info-block-value { font:500 24px/1.3 Inter,sans-serif; }
.info-block-sub { font-size:13px; line-height:1.6; }
.drawer-cta { padding:20px 32px; background:#fff; }
.drawer-cta-note { font-size:13px; line-height:1.6; }
.btn-gold { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; background:var(--accent); border:1px solid var(--accent); color:#fff; font-size:14px; font-weight:500; line-height:1.5; letter-spacing:0; text-transform:none; }
.btn-gold:hover { background:#393936; border-color:#393936; }
.drawer-topbar .btn-gold { background:#fff; color:var(--text); border-color:var(--border-md); }
.drawer-topbar .btn-gold:hover { background:#f3f4f5; }
.drawer-cta .btn-gold { flex-shrink:0; }
.catalog-main :focus-visible,.drawer :focus-visible { outline:2px solid #42677d; outline-offset:4px; }
@media(max-width:1100px) { .hw-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
  .page-header { padding-top:108px; padding-bottom:28px; }
  .page-header h1 { margin-bottom:18px; }
  .stat-bar-inner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat-item { min-width:0; padding:18px 12px; border:0; border-bottom:1px solid var(--border); }
  .stat-item:nth-child(odd) { padding-left:0; border-right:1px solid var(--border); }
  .stat-item:last-child { grid-column:1/-1; border:0; }
  .stat-num { font-size:26px; }
  .stat-lbl { font-size:11px; }
  .hw-grid { grid-template-columns:minmax(0,1fr); }
  .hw-card-body { padding:24px; }
  .section-label { letter-spacing:.04em; }
  .intro-inner { grid-template-columns:minmax(0,1fr); padding:22px; }
  .drawer-hero { padding:26px 20px 22px; }
  .drawer-title { font-size:32px; }
  .drawer-body { padding:24px 20px; gap:28px; }
  .drawer-topbar { padding:0 16px; }
  .drawer-mono { display:none; }
  .drawer-cta { padding:16px 20px; flex-direction:column; align-items:stretch; gap:12px; }
  .pem-series-gallery { gap:10px; }
  .pem-series-photo > a { padding:6px; }
  .pem-series-photo figcaption { padding:10px; grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .hw-card,.drawer,.drawer-overlay { animation:none; transition:none; } }
@media print { .catalog-main::before { display:none; } }