/* Material Copilot: catalog filters, comparison workspace, and reserved AI advisor. */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body.material-copilot-page { --text:#171716; --muted:#4d535a; --dim:#626b75; --border:#d9dde1; --border-md:#a8adb3; --accent:#20201e; --surface:#f7f8f8; --gutter:clamp(24px,3.6vw,64px); --xeon-title-size:clamp(42px,5vw,76px); margin:0; color:var(--text); background:#fff; font-family:Inter,Arial,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
#main-nav { position:fixed; top:0; left:0; right:0; }
[hidden] { display:none !important; }
.cp-skip { position:fixed; top:-90px; left:20px; z-index:2000; padding:12px 20px; background:#20201e; color:#fff; }
.cp-skip:focus { top:12px; }
#copilot-main { 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; padding-bottom:72px; }
#copilot-main :is(h1,h2,h3,p) { margin:0; }
#copilot-main a { color:inherit; text-decoration:none; }
#copilot-main a:hover { text-decoration:underline; text-underline-offset:3px; }
#copilot-main :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid #42677d; outline-offset:3px; }
#copilot-main :is(button,input,select,textarea) { font:inherit; border-radius:0; }
#copilot-main button { cursor:pointer; }
#copilot-main button:disabled { cursor:not-allowed; }
#copilot-main h2 { font-size:clamp(23px,2.1vw,31px); }
.cp-container { max-width:1600px; padding-inline:var(--gutter); margin-inline:auto; }
.cp-hero { padding-top:122px; padding-bottom:36px; }
.cp-breadcrumb { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted); margin-bottom:32px; }
.cp-hero-grid { display:grid; grid-template-columns:1.08fr 1fr; gap:44px; align-items:end; }
#copilot-main .cp-eyebrow { color:var(--dim); font-size:10px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:13px; }
.cp-intro { font-size:16px; color:var(--muted); max-width:620px; }
.cp-process-links { display:flex; gap:10px 20px; align-items:center; flex-wrap:wrap; margin-top:20px; font-size:12px; }
.cp-process-links>span { color:var(--muted); }
.cp-process-links a { border-bottom:1px solid var(--border-md); padding-block:8px; }
.cp-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--border-md); margin-top:34px; background:#fff; }
.cp-steps a { display:flex; gap:13px; align-items:center; padding:18px; border-right:1px solid var(--border); font-size:13px; }
.cp-steps a:last-child { border-right:0; }
.cp-steps a:hover { background:var(--surface); text-decoration:none !important; }
.cp-steps a>span { color:var(--dim); font-family:'IBM Plex Mono',monospace; font-size:11px; }
.cp-steps b { margin-left:auto; font-weight:400; }
.cp-steps small { border:1px solid var(--border); padding:2px 6px; font-size:9px; white-space:nowrap; }
.cp-workspace { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
.cp-selector { min-width:0; }
.cp-panel { padding:26px; border:1px solid var(--border); background:#fff; }
.cp-section-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.cp-text-button { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:6px 0; border:0; background:transparent; color:var(--muted); font-size:11px !important; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }
.cp-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cp-field { min-width:0; }
.cp-field label { display:block; font-size:12px; color:var(--muted); margin-bottom:8px; }
.cp-field :is(input,select) { display:block; width:100%; min-width:0; height:46px; padding:10px 12px; border:1px solid var(--border-md); background:#fff; color:var(--text); font-size:13px !important; }
.cp-field input::placeholder { color:var(--dim); }
#copilot-main .cp-help { font-size:11px; line-height:1.7; color:var(--muted); }
#copilot-main #priorityHelp { margin-top:12px; min-height:36px; }
.cp-requirements fieldset { border:0; padding:0; margin:22px 0 0; min-width:0; }
.cp-requirements legend { padding:0; margin-bottom:10px; font-size:12px; }
.cp-requirements legend span { color:var(--dim); font-size:10px; margin-left:8px; }
.cp-pills { display:flex; flex-wrap:wrap; gap:7px; }
.cp-pills button { min-height:40px; padding:8px 12px; border:1px solid var(--border); background:#fff; color:var(--muted); font-size:11px !important; }
.cp-pills button:hover { border-color:var(--border-md); background:var(--surface); }
.cp-pills button[aria-pressed="true"],.cp-units button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
.cp-thickness-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:22px 0 12px; font-size:12px; }
.cp-units { display:flex; }
.cp-units button { min-width:40px; min-height:36px; background:#fff; color:var(--muted); border:1px solid var(--border); font-size:12px !important; }
.cp-units button+button { border-left:0; }
.cp-thickness { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:12px; }
.cp-thickness>span { padding-bottom:10px; color:var(--dim); }
#copilot-main .cp-bottom-note { margin-top:12px; }
.cp-shortlist { margin-top:20px; }
.cp-shortlist .cp-section-head { margin-bottom:14px; }
#shortlistCount { color:var(--dim); font-size:15px; letter-spacing:0; white-space:nowrap; margin-left:8px; }
.cp-shortlist-items { display:flex; flex-wrap:wrap; gap:8px; }
.cp-shortlist-items:not(:empty) { margin-top:16px; }
.cp-shortlist-items button { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:8px 12px; min-height:40px; border:1px solid var(--border-md); background:var(--surface); color:var(--text); font-size:11px !important; }
.cp-table-scroll { max-width:100%; overflow-x:auto; margin-top:20px; border:1px solid var(--border); }
.cp-table-scroll table { border-collapse:collapse; width:100%; font-size:11px; background:#fff; min-width:510px; }
.cp-table-scroll caption { text-align:left; padding:12px; color:var(--muted); background:var(--surface); border-bottom:1px solid var(--border); font-size:10px; }
.cp-table-scroll th,.cp-table-scroll td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); vertical-align:top; }
.cp-table-scroll th { font-weight:500; }
.cp-table-scroll thead th { background:var(--surface); }
.cp-table-scroll tbody th { color:var(--muted); }
.cp-table-scroll tr:last-child :is(th,td) { border-bottom:0; }
.cp-table-scroll tr>:last-child { border-right:0; }
#shortlistComparison .cp-help { margin-top:12px; }
.cp-results-head { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:end; gap:18px; margin:32px 0 14px; }
#resultCount { color:var(--muted); font-size:12px; }
#copilot-main .cp-rating-note { font-size:11px; color:var(--dim); margin-bottom:20px; max-width:700px; }
.cp-material-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.cp-card { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--border); }
.cp-card:hover,.cp-card:focus-within { border-color:var(--border-md); }
.cp-card-photo { display:block; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.cp-card-photo img { display:block; width:100%; height:auto; aspect-ratio:1.8; object-fit:cover; }
.cp-card-photo>span { position:absolute; left:14px; top:14px; font-size:10px; background:#fff; border:1px solid var(--border); padding:5px 8px; }
.cp-card-body { display:flex; flex-direction:column; flex:1; padding:22px 20px 0; }
.cp-badges { display:flex; flex-wrap:wrap; gap:6px; min-height:26px; margin-bottom:10px; }
.cp-badges span { color:#fff; background:var(--accent); padding:4px 7px; font-size:10px; }
#copilot-main .cp-card h3 { font-size:23px; margin-bottom:12px; }
#copilot-main .cp-card-desc { font-size:12px; line-height:1.8; color:var(--muted); margin-bottom:20px; }
#copilot-main .cp-match-reason { padding:12px; border-left:2px solid var(--accent); background:var(--surface); margin-bottom:20px; font-size:11px; color:var(--muted); }
.cp-ratings { display:grid; gap:8px; margin-top:auto; margin-bottom:22px; }
.cp-rating { display:grid; grid-template-columns:minmax(0,1fr) 65px 28px; gap:10px; align-items:center; font-size:10px; color:var(--muted); }
.cp-rating strong { font-weight:500; color:var(--text); text-align:right; }
.cp-rating-track { height:3px; background:#e4e6e7; }
.cp-rating-track i { display:block; height:100%; background:var(--accent); }
#copilot-main .cp-small-label { font-size:10px; color:var(--dim); margin-bottom:9px; }
.cp-stock-links { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.cp-stock-links a { display:flex; align-items:center; min-height:34px; padding:6px 8px; font-size:10px; background:var(--surface); border:1px solid var(--border); }
.cp-caps { display:flex; gap:5px 12px; flex-wrap:wrap; margin-bottom:18px; font-size:10px; color:var(--dim); }
.cp-card-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--border); padding-block:14px; }
.cp-card-actions a { display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:11px; }
.cp-card-actions button { padding:8px 10px; min-height:40px; background:#fff; border:1px solid var(--border-md); color:var(--text); font-size:11px !important; }
.cp-card-actions button[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
.cp-card-actions button:disabled { color:var(--dim); border-color:var(--border); background:var(--surface); }
.cp-empty { grid-column:1/-1; text-align:center; padding:48px 24px; border:1px solid var(--border); background:#fff; }
.cp-empty h3 { font-size:25px; }
#copilot-main .cp-empty p { margin:16px 0 24px; font-size:13px; color:var(--muted); }
.cp-empty button { min-height:44px; padding:12px 18px; background:var(--accent); color:#fff; border:0; font-size:12px !important; }
.cp-advisor-column { position:sticky; top:100px; min-width:0; }
.cp-advisor { border:1px solid var(--border-md); background:#fff; scroll-margin-top:10px; }
.cp-advisor>summary { display:flex; align-items:center; gap:12px; padding:20px; list-style:none; cursor:pointer; background:var(--accent); color:#fff; }
.cp-advisor>summary::-webkit-details-marker { display:none; }
.cp-advisor-mark { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #676763; }
.cp-advisor-mark svg { width:22px; height:22px; }
.cp-advisor summary strong { font-size:14px; font-weight:500; }
.cp-advisor summary small { display:block; font-size:10px; color:#d7d7d3; margin-top:2px; }
.cp-disclosure { margin-left:auto; font-size:18px; }
.cp-advisor[open] .cp-disclosure { transform:rotate(180deg); }
.cp-advisor-content { padding:24px; }
#copilot-main .cp-advisor h2 { font-size:32px; line-height:1.05 !important; margin-bottom:20px; }
#copilot-main .cp-advisor-desc { font-size:13px; color:var(--muted); margin-bottom:24px; }
#copilot-main .cp-question-label { font-size:10px; color:var(--dim); margin-bottom:10px; }
.cp-example-questions { display:grid; gap:8px; padding:0; margin:0 0 24px; list-style:none; }
.cp-example-questions li { border:1px solid var(--border); padding:10px 12px; font-size:11px; background:var(--surface); color:var(--muted); }
.cp-advisor label { font-size:11px; display:block; margin-bottom:8px; }
.cp-advisor textarea { display:block; min-width:0; width:100%; resize:none; padding:12px; border:1px solid var(--border); background:var(--surface); font-size:12px !important; color:var(--muted); opacity:1; }
.cp-advisor textarea::placeholder { color:var(--dim); opacity:1; }
.cp-chat-button { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:44px; margin-top:8px; border:1px solid var(--border); background:#eceeed; color:#626760; padding:10px 12px; font-size:12px !important; }
#copilot-main #advisorStatus { color:var(--muted); font-size:11px; margin-top:12px; }
.cp-context { margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }
.cp-context p:not(.cp-question-label) { font-size:10px; color:var(--muted); overflow-wrap:anywhere; }
#copilot-main #advisorShortlist { margin-top:8px; }
.cp-guide-links { margin-top:20px; padding:22px; border:1px solid var(--border); background:#fff; }
.cp-guide-links a { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px; padding-block:12px; border-bottom:1px solid var(--border); font-size:11px; }
.cp-guide-links a:last-child { border-bottom:0; padding-bottom:0; }
#material-advisor-mount { width:100%; min-height:520px; }
#material-advisor-mount openai-chatkit { display:block; width:100%; height:620px; }
@media(max-height:1100px) { .cp-advisor-column { position:static; } }
@media(max-width:1250px) { .cp-workspace { grid-template-columns:minmax(0,1fr) 320px; gap:20px; } .cp-hero-grid { grid-template-columns:1fr; gap:22px; } .cp-steps a { flex-wrap:wrap; gap:8px; padding:15px; } .cp-panel { padding:22px; } .cp-section-head { align-items:start; } .cp-card-actions { flex-wrap:wrap; gap:6px; } .cp-rating { grid-template-columns:minmax(0,1fr) 48px 26px; gap:6px; } .cp-advisor-content { padding:20px; } }
@media(max-width:1000px) { .cp-workspace { display:flex; flex-direction:column; } .cp-selector { width:100%; } .cp-advisor-column { position:static; order:-1; width:100%; } .cp-guide-links { display:none; } .cp-advisor-content { display:grid; grid-template-columns:1.4fr 1fr; gap:28px; } .cp-context { margin-top:0; padding-top:0; border-top:0; border-left:1px solid var(--border); padding-left:24px; } .cp-advisor h2 br { display:none; } .cp-material-grid { gap:18px; } .cp-card-actions { flex-wrap:nowrap; } }
@media(max-width:600px) { .cp-hero { padding-top:106px; padding-bottom:24px; } .cp-breadcrumb { margin-bottom:24px; } .cp-intro { font-size:14px; } .cp-steps { grid-template-columns:1fr; margin-top:24px; } .cp-steps a { border-right:0; border-bottom:1px solid var(--border); padding:15px; flex-wrap:nowrap; } .cp-steps a:last-child { border-bottom:0; } .cp-steps small { font-size:8px; padding:2px 4px; } .cp-panel { padding:20px; } .cp-section-head { flex-wrap:wrap; gap:8px; margin-bottom:20px; } .cp-section-head .cp-text-button { min-height:36px; } .cp-field-grid { grid-template-columns:1fr; gap:16px; } .cp-field :is(input,select) { font-size:16px !important; } .cp-pills button { flex:1 1 42%; min-height:44px; padding-inline:8px; } .cp-units button { min-height:44px; min-width:44px; } .cp-thickness { gap:8px; } .cp-thickness .cp-field select { padding-inline:8px; } .cp-requirements legend span { display:block; margin-left:0; margin-top:3px; } .cp-material-grid { grid-template-columns:1fr; } .cp-card-body { padding:22px 20px 0; } .cp-stock-links a { min-height:44px; } .cp-card-actions :is(a,button) { min-height:44px; } .cp-advisor-content { display:block; } .cp-context { border-left:0; padding-left:0; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); } .cp-advisor>summary { padding:16px; } .cp-advisor summary strong { font-size:13px; } .cp-shortlist-items button { min-height:44px; } #copilot-main { padding-bottom:40px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }