/* =========================================================
   BOM Shelter — 05 Refine: calmer reading layer for every page.
   Loaded last. Sans for labels, sentence case, fewer boxes, more air.
   Monospace is kept only where it carries data: SKUs, specs, prices.
   ========================================================= */

:root { --font-mono: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; --font-data: "IBM Plex Mono", ui-monospace, monospace; }

/* No shouting: labels in sentence case at a readable size */
main *:not(h1):not(h2):not(h3),
.site-foot *,
.drawer *,
.modal * { text-transform: none !important; letter-spacing: 0 !important; }

.kicker, .eyebrow, .mono, .field-label, .fgroup__title, .filters__head,
.page-head__meta dt, .kit-card__meta, .kit-card__specs, .part-card__sku,
.tag, .chip, .pill, .pfilter, .stock, .toolbar, .cat__count,
.bom-sheet__th, .fieldlist__head, .pindex__head, th {
  font-size: 13px !important;
}
.kicker, .eyebrow { color: var(--ink-3); font-weight: 500; }

/* Data keeps its fixed-width face */
.part-card__sku, .part-card__spec, .spec-table td, .bom-sheet__table td,
.cart-line__meta, .kit-card__specs, td.num, .fieldrow__support {
  font-family: var(--font-data);
  font-size: 12.5px;
}

/* Page heads: one title, one paragraph, room to breathe */
.crumbs, .page-head__meta, .page-head .kicker, .filters__note { display: none !important; }
.page-head { padding: 64px 0 40px; border-bottom: 0; }
.page-head__grid { display: block; }
.page-head h1 { font-size: clamp(40px, 4.6vw, 64px); margin: 0 0 14px; line-height: 1; }
.page-head p { max-width: 58ch; font-size: 17px; line-height: 1.65; color: var(--ink-2); }

/* Sections: separation by space, not rules */
.section { padding: 56px 0; }
.section--line { border-top: 0; }
.sec-head { border-top: 0; padding-top: 0; margin-bottom: 24px; }
.sec-head .kicker { display: none; }

/* Surfaces: quiet cards, single hairline, no hover lift */
.part-card, .kit-card, .feature, .cat, .startpick, .cta, .plate, .bom-sheet,
.filters, .kit-buy, .panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: none !important;
  transform: none !important;
}
.part-card:hover, .kit-card:hover, .feature:hover, .startpick:hover { border-color: var(--line-2); }
.part-card { padding: 22px; }
.part-card__icon { border: 0; background: transparent; padding: 0; }
.part-card__tags .tag:nth-child(n+3) { display: none; }
.kit-card__media { background-image: none; background-color: var(--paper); }
.kit-card__stamp { background: var(--paper-2); border: 0; }
.kit-card__specs span, .cat__count { background: transparent; padding: 0; }

/* Tags and filters: text chips, not boxes */
.tag { border: 0; background: var(--raised); padding: 3px 8px; color: var(--ink-2); }
.pill, .pfilter, .chip {
  border: 1px solid var(--line-2);
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--ink-2);
}
.pill.is-on, .pill[aria-pressed="true"], .pfilter.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}

/* Filter sidebar: plain list */
.filters { background: transparent; border: 0; padding: 0; }
.filters__head { border-bottom: 1px solid var(--line); padding-bottom: 12px; font-weight: 600; color: var(--ink); }
.fgroup { border-top: 0; padding-top: 20px; }
.fgroup__title { color: var(--ink); font-weight: 600; margin-bottom: 8px; }

/* Tables: taller rows, lighter rules */
table th { font-weight: 500; color: var(--ink-3); background: transparent !important; }
table td, table th { padding-top: 14px !important; padding-bottom: 14px !important; }
table tr { border-color: var(--line) !important; }

/* Tabs */
.tabs button, [role="tab"] { font-size: 15px !important; font-weight: 500; }

/* Body copy minimums */
main p, main li { line-height: 1.65; }

/* Oxanium for headings and bold text; it runs wider than the old condensed face */
b, strong, .brand__name, .foot__word, .price, .hero__facts dt { font-family: var(--font-display); font-weight: 600; }
h1, h2, h3, h4 { letter-spacing: -0.01em; }
.hero h1 { font-size: clamp(36px, 4.4vw, 62px); }
.page-head h1 { font-size: clamp(34px, 3.8vw, 54px); }
.brand__name { font-size: 20px; letter-spacing: 0.02em; }

/* ---------- Layout: one content width, header aligned to it ---------- */
:root { --wrap: 1360px; }
.wrap, .site-head .wrap { max-width: var(--wrap); padding-inline: clamp(20px, 3.2vw, 44px); }

/* ---------- Readable sizes: nothing important below 13.5px ---------- */
.kit-card__meta { font-size: 13.5px !important; color: var(--ink-3); }
.kit-card__specs { font-family: var(--font-body) !important; font-size: 13.5px !important; gap: 4px 14px; }
.kit-card__desc { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.kit-card h3 { font-size: 22px; }
.kit-card__body { padding: 22px 24px 24px; }
.part-card__spec { font-size: 13px !important; line-height: 1.55; }
.prow__note { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.prow__meta { font-size: 13.5px; gap: 16px; }
.prow__title, .prow__title a { font-size: 19px; }
.prow { padding-top: 22px !important; padding-bottom: 22px !important; }
.fieldrow { padding-top: 18px; padding-bottom: 18px; }
.fieldrow__by { font-size: 14.5px; }
.fieldrow__support, .fieldrow__link { font-size: 14px; }
.sec-head__side, .sec-head__side .mono { font-size: 14px !important; color: var(--ink-3); }

/* ---------- Kit thumbnails: quieter drawing, no tiny annotations ---------- */
.kit-card__media { padding: 22px 28px; }
.kit-card__media .sch-text, .kit-card__media .sch-dim { display: none; }
.kit-card__media svg { opacity: 0.85; }

/* ---------- Projects: start picks in a roomier grid ---------- */
.startpicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; border: 0 !important; background: none !important; }
.startpick { padding: 26px 28px; border-radius: 2px; }
.startpick__tag { font-size: 13px !important; color: var(--orange); }
.startpick__name { font-size: 21px !important; margin: 8px 0 10px; }
.startpick__note { font-size: 15px !important; line-height: 1.6; color: var(--ink-2); }

/* ---------- Kits: value props as plain columns ---------- */
.features { gap: 40px; }
.feature { background: none !important; border: 0 !important; border-top: 1px solid var(--line-2) !important; border-radius: 0; padding: 20px 0 0; }
.feature__icon { display: none; }
.feature h3 { font-size: 20px; margin-bottom: 10px; }
.feature p { font-size: 15px; line-height: 1.6; }

/* ---------- Calls to action: one message, one button ---------- */
.cta { padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta .kicker { display: none; }
.cta h2 { font-size: clamp(28px, 2.8vw, 38px); }
.cta p { font-size: 16px; }

/* ---------- BOM import side panel ---------- */
.bom-side .plate { padding: 28px; }
.bom-side .plate h3 { font-size: 22px; margin-bottom: 10px; }
.bom-side .plate p, .bom-side .plate li { font-size: 15px; color: var(--ink-2); }
.bom-side .plate li span { font-family: var(--font-body) !important; font-weight: 400 !important; color: var(--ink-2) !important; font-size: 15px !important; }
.bom-side .plate li span:first-child { color: var(--orange) !important; font-weight: 600 !important; }
.bom-side__note { margin-top: 18px; padding: 0 4px; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.bom-side__note b { color: var(--ink-2); }

@media (max-width: 980px) {
  .features { grid-template-columns: 1fr 1fr; gap: 28px; }
  .startpicks { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
  .cta { padding: 28px 24px; }
}

/* ---------- BOM matcher: readable table and controls ---------- */
.bom-panel__head { font-size: 15px !important; font-weight: 600; padding: 16px 20px; }
.bom-panel__head button, .bom-panel__head a { font-size: 14px !important; font-weight: 500; }
.bom-panel__hint { font-size: 13.5px !important; }
.bom-panel .textarea { font-family: var(--font-data); font-size: 14px; line-height: 1.7; }
.match-summary h2 { font-size: 24px; }
.match-summary__stats { font-size: 14px !important; gap: 22px; }
.match-summary__stats b { font-size: 15px; }
.bom-results td { font-size: 15px; padding: 14px 16px; }
.bom-results__raw { font-size: 13.5px; color: var(--ink-2); }
.bom-results select { font-size: 14px; padding: 9px 30px 9px 12px; background-color: var(--paper); }
.bom-results input[type="number"] { font-size: 14px; width: 64px; padding: 8px; background: var(--paper); }
.bom-results__status { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; }
.bom-results__num { font-size: 14px; }
.match-actions { padding: 18px 22px; font-size: 14.5px; }
.match-actions__total { font-size: 14px; }

/* ---------- Small inline elements ---------- */
.textlink { font-size: 14.5px; font-weight: 500; }
.startpick__link { font-size: 14px !important; }
.pathbadge { font-size: 12px; padding: 2px 8px; }
.toolbar, .toolbar * { font-size: 14px !important; }
.kit-card__stamp { font-size: 12px !important; }

/* ---------- Kit thumbnails: shorter, so the text leads ---------- */
.kit-card__media { padding: 10px 40px; }
.kit-card__media svg { aspect-ratio: 16 / 8; }

/* ---------- Kit detail ---------- */
.kit-hero .kicker { display: block; font-size: 14px !important; }
.kit-hero__by { font-size: 14px; }
.kit-hero__desc { font-size: 17px; line-height: 1.65; }
.kit-buy__note { font-size: 13.5px; gap: 18px; }
.kit-stats div { padding: 18px 22px; background: var(--paper-2); }
.kit-stats dt { font-size: 13px; margin-bottom: 4px; }
.kit-stats dd { font-size: 22px; }
.kit-stats dd small { font-size: 13px; margin-top: 4px; }
.bom-table td { font-size: 15px; padding: 15px 18px; }
.bom-table__name { font-size: 15.5px; }
.bom-table__spec { font-size: 13px; margin-top: 4px; color: var(--ink-3); }
.bom-table__ref { font-size: 13.5px; }
.bom-table__price { font-size: 14px; }
.bom-total { font-size: 14.5px; }
.runlist__step { font-size: 13.5px; }
.runlist h3 { font-size: 19px; }
.runlist p { font-size: 15.5px; line-height: 1.65; }
.file__type, .file__meta { font-size: 13px; }
.file__name { font-size: 15px; }
.kit-media__cap { font-size: 13px !important; }
.dwg__strip { font-size: 13px !important; }

/* ---------- Responsive guards ---------- */
@media (max-width: 980px) {
  .kit-grid { grid-template-columns: 1fr 1fr !important; }
  .kit-hero__grid { grid-template-columns: 1fr !important; }
  .kit-stats { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 680px) {
  .kit-grid { grid-template-columns: 1fr !important; }
  .page-head { padding: 40px 0 28px; }
  .page-head p, .kit-hero__desc { font-size: 16px; }
  .pills, .pfilters { flex-wrap: wrap; }
}
.startpicks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
@media (max-width: 900px) {
  .catalog { grid-template-columns: 1fr; gap: 24px; }
  .filters { position: static; }
  .bom-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .grid-parts, .parts-grid { grid-template-columns: 1fr !important; }
  .bom-results { font-size: 14px; }
  .match-summary { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- Phone: tables and section heads ---------- */
@media (max-width: 680px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fieldrow__name { font-size: 18px; }
  /* Kit parts list: drop row number and unit price so part, qty, line total and Add fit */
  .bom-table th:nth-child(1), .bom-table td:nth-child(1),
  .bom-table th:nth-child(4), .bom-table td:nth-child(4) { display: none; }
  .bom-table td { padding: 14px 10px; font-size: 14.5px; }
  .bom-table td:nth-child(2) { width: 100%; }
  .bom-table__spec { display: none; }
  .bom-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bom-total { flex-wrap: wrap; justify-content: flex-start !important; gap: 8px 16px; }
  .kit-stats dd { font-size: 18px; overflow-wrap: anywhere; }
}
@media (max-width: 680px) {
  /* BOM results: each row becomes a stacked card with labelled values */
  .bom-results thead { display: none; }
  .bom-results, .bom-results tbody { display: block; }
  .bom-results tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--line);
  }
  .bom-results td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; }
  .bom-results td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12.5px;
    color: var(--ink-3);
  }
  .bom-results__raw, .bom-results__match { grid-column: 1 / -1; max-width: none; }
  .bom-results select { width: 100%; min-width: 0; }
}
@media (max-width: 680px) {
  .bom-results__raw { order: 1; } .bom-results__match { order: 2; } .bom-results__qty { order: 3; }
  .bom-results__statuscell { order: 4; } .bom-results__unit { order: 5; } .bom-results__line { order: 6; }
}
