/* Shared Materials headings, comparison tables, controls and catalogue layout. */
.materials-page { font-family:var(--font-interface); }
.materials-actions { display:flex; align-items:stretch; flex-wrap:wrap; gap:12px; }
.materials-page .button.materials-button { min-height:0; padding:13px 24px; border:1px solid var(--color-primary); border-radius:6px; background:var(--color-primary); color:#fff; font:600 14.5px/23.2px var(--font-interface); text-transform:none; letter-spacing:0; box-shadow:none; }
.materials-page .button.materials-button--outline { background:#fff; color:var(--color-primary); }
.materials-page .materials-button:hover { background:var(--color-deep-blue); border-color:var(--color-deep-blue); color:#fff; }
.materials-icon { width:13px; height:13px; color:var(--color-deep-blue); }
.materials-icon svg [stroke] { stroke:currentColor; }
.materials-content { padding:56px 0 92px; }
.materials-content--detail { padding-bottom:42px; }
.materials-tables { min-width:0; }
.materials-layout { display:grid; grid-template-columns:296px minmax(0,1fr); gap:46px; align-items:start; }
.materials-sidebar { position:sticky; top:calc(97px + var(--boyi-toolbar-offset,0px)); padding:12px 10px; border:1px solid var(--color-border); border-radius:14px; background:#fff; box-shadow:0 2px 4px rgb(16 28 46 / 3%); }
.materials-sidebar > p { padding:0 10px; margin-bottom:12px; color:var(--color-muted); font-size:11px; font-weight:800; line-height:18px; letter-spacing:1.4px; text-transform:uppercase; }
.materials-sidebar ul { display:grid; gap:4px; }
.materials-sidebar li a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px solid transparent; border-radius:6px; color:#343741; font-size:14px; font-weight:600; line-height:22px; }
.materials-count { color:var(--color-muted); font-size:12px; font-weight:700; }
.materials-sidebar li a:hover { background:var(--color-tint); color:var(--color-deep-blue); }
.materials-sidebar li a[aria-current] { background:var(--color-primary); color:#fff; }
.materials-sidebar li a[aria-current] .materials-count { color:#fff; }
.materials-engineer { display:flex; align-items:center; gap:16px; margin:12px 4px 0; padding-top:15px; border-top:1px solid var(--color-border); color:var(--color-primary); font-size:13.2px; font-weight:600; line-height:21.12px; }
.materials-engineer > span:first-child { flex:1; }
.materials-note { display:flex; gap:10px; align-items:flex-start; padding:12px 15px; margin-bottom:12px; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); font-size:12.8px; line-height:20.48px; }
.materials-note .materials-icon { width:16px; height:16px; margin-top:2px; }
.materials-note strong { font-weight:700; }
.materials-table-section { padding-bottom:44px; border-bottom:1px solid var(--color-border); }
.materials-table-section + .materials-table-section { margin-top:44px; }
.materials-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.materials-section-heading h2 { color:var(--color-ink); font-size:27px; font-weight:800; line-height:43.2px; letter-spacing:-.7px; }
.materials-more { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--color-border); border-radius:8px; color:var(--color-primary); font-size:13.5px; font-weight:700; line-height:21.6px; }
.materials-more:hover { border-color:var(--color-deep-blue); color:var(--color-deep-blue); }
.materials-section-description { margin:6px 0 18px; font-size:14.2px; line-height:22.72px; }
.materials-table-scroll { position:relative; border-radius:14px; box-shadow:0 2px 4px rgb(16 28 46 / 3%); }
.materials-table { table-layout:fixed; min-width:800px; color:#343741; font-size:13.7px; line-height:21.92px; }
.materials-table .materials-col-name { width:27%; }
.materials-table .materials-col-price { width:120px; }
.materials-table th,.materials-table td { padding:15px 20px; }
.materials-table thead th { padding:14px 20px; font-size:12.4px; line-height:19.84px; letter-spacing:1.2px; }
.materials-table thead th + th { border-left:0; }
.materials-name { display:flex; align-items:center; gap:13px; color:var(--color-ink); font-size:14.4px; font-weight:700; line-height:18.72px; }
.materials-name > span { min-width:0; overflow-wrap:anywhere; }
.materials-name .materials-thumbnail { flex:0 0 42px; width:42px; height:42px; object-fit:cover; border:1px solid var(--color-border); border-radius:7px; }
.materials-name small { display:block; margin-top:4px; color:var(--color-muted); font-size:11.6px; font-weight:500; line-height:18.56px; }
.materials-price { display:flex; flex-direction:column; gap:3px; }
.materials-price-symbols { color:var(--color-border); font-size:14px; font-weight:800; line-height:22.4px; letter-spacing:1.15px; white-space:nowrap; }
.materials-price-symbols > span { color:var(--color-deep-blue); }
.materials-price small { color:var(--color-muted); font-size:11px; font-weight:600; line-height:17.6px; letter-spacing:.15px; }
.materials-table--specifications { min-width:1050px; }
.materials-table--specifications .materials-col-name { width:21%; }
.materials-table--specifications .materials-col-description { width:33%; }
.materials-table--specifications .materials-col-spec { width:15%; }
.materials-table--specifications .materials-col-price { width:16%; }
.materials-table--specifications td,.materials-table--specifications tbody th { padding:13px 18px; }
.materials-table--summary { min-width:0; width:100%; }
.materials-table--summary .materials-col-name { width:30%; }
.materials-table--summary .materials-col-description { width:70%; }
@media(max-width:600px) { .materials-table--summary .materials-col-name { width:38%; } .materials-table--summary .materials-col-description { width:62%; } .materials-table--summary th,.materials-table--summary td { padding:12px 10px; overflow-wrap:anywhere; } .materials-table--summary .materials-name { flex-wrap:wrap; gap:8px; } }
@media(max-width:1100px) { .materials-layout { grid-template-columns:240px minmax(0,1fr); gap:24px; } .materials-sidebar li a { padding:10px 8px; font-size:13px; } .materials-section-heading h2 { font-size:25px; } }
@media(max-width:900px) { .materials-layout { grid-template-columns:minmax(0,1fr); gap:28px; } .materials-sidebar { position:static; } .materials-sidebar ul { grid-template-columns:repeat(2,minmax(0,1fr)); } .materials-engineer > span:first-child { flex:0 1 auto; } .materials-content { padding:36px 0 56px; } .materials-content--detail { padding-bottom:36px; } }
@media(max-width:600px) { .materials-section-heading { align-items:flex-start; flex-direction:column; gap:8px; } .materials-section-heading h2 { font-size:24px; line-height:1.4; } .materials-section-description { margin-top:12px; } .materials-table-section { padding-bottom:32px; } .materials-table-section + .materials-table-section { margin-top:32px; } .materials-sidebar li a { gap:7px; font-size:12px; line-height:18px; } .materials-sidebar { padding:12px 8px; } .materials-page .button.materials-button { padding:12px 18px; font-size:13px; } }