/* The base calculator stays small; optional inputs appear only when enabled. */
body .metal-calculator { position:absolute; right:0; bottom:0; width:min(382px,calc(var(--smc-viewport-width,100vw) - 34px)); max-height:min(740px,calc(var(--smc-viewport-height,100dvh) - var(--smc-tool-bottom) - 18px)); display:flex; flex-direction:column; margin:0; padding:0; color:#35424b; background:transparent; font-family:var(--font-ui); border:0; border-radius:0; opacity:0; transition:opacity 100ms; }
body .metal-calculator.is-open { opacity:1; transition:opacity 160ms 240ms; }
body .metal-calculator[hidden],body .metal-calculator [hidden] { display:none !important; }
body .metal-calculator *,body .metal-calculator *::before { box-sizing:border-box; }
body .metal-calculator button { font:inherit; cursor:pointer; }
body .metal-calculator .mc-header { display:flex; align-items:center; justify-content:space-between; flex:none; gap:10px; padding:11px 13px; border-bottom:1px solid #e9ecee; }
body .metal-calculator .mc-header h2 { margin:0; font-size:16px; line-height:1.35; font-weight:600; letter-spacing:-.02em; }
body .metal-calculator .mc-close { display:grid; place-items:center; flex:none; width:30px; height:30px; margin:0; padding:6px; border:1px solid transparent; border-radius:5px; background:transparent; color:#7b8790; }
body .metal-calculator .mc-close svg { display:block; width:16px; height:16px; }
body .metal-calculator .mc-close:hover { border-color:#e3e8eb; background:#f8fafb; }
body .metal-calculator .mc-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:12px 13px; }
body .metal-calculator form { margin:0; }
body .metal-calculator :is(input,select) { display:block; min-width:0; width:100%; height:38px; margin:0; border:1px solid #dfe5e9; border-radius:5px; background:#fff; padding:7px 9px; color:#35434d; font:inherit; font-size:15px; line-height:1.3; box-shadow:none; }
body .metal-calculator :is(input,select):focus { outline:none; border-color:#e5bc7f; box-shadow:none; }
body .metal-calculator button:focus-visible,body .metal-calculator a:focus-visible { outline:2px solid #e5bc7f; outline-offset:2px; }
body .metal-calculator select { appearance:auto; }
body .metal-calculator .mc-field { display:flex; flex-direction:column; min-width:0; gap:5px; margin:0; color:#7c8993; font-size:12px; line-height:1.4; }
body .metal-calculator :is(.mc-material-row,.mc-fields,.mc-order-fields) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
body .metal-calculator :is(.mc-input,.mc-price-input) { display:flex; align-items:center; min-width:0; overflow:hidden; background:#fff; border:1px solid #dfe5e9; border-radius:5px; }
body .metal-calculator :is(.mc-input,.mc-price-input):focus-within { border-color:#e5bc7f; }
body .metal-calculator :is(.mc-input,.mc-price-input) input { border:0; border-radius:0; height:36px; background:transparent; }
body .metal-calculator .mc-input small { font-size:11px; white-space:nowrap; padding-right:9px; }
body .metal-calculator .mc-price-input select { height:26px; flex:0 0 57px; border:0; border-left:1px solid #e9edef; border-radius:0; padding:2px; font-size:12px; }
body .metal-calculator .mc-form-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; font-size:12px; color:#87929a; }
body .metal-calculator .mc-form-label strong { font-weight:500; color:#53636e; }
body .metal-calculator .mc-shapes { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-bottom:12px; }
body .metal-calculator .mc-shapes button { display:grid; place-items:center; min-width:0; height:46px; padding:4px; border:1px solid #e1e6e9; border-radius:5px; background:#fff; transition:background-color 140ms,border-color 140ms; }
body .metal-calculator .mc-shapes img { display:block; width:36px; height:34px; max-width:100%; object-fit:contain; }
body .metal-calculator .mc-shapes button>span { display:none; }
body .metal-calculator .mc-shapes button[aria-pressed=true] { border-color:#e6bc7b; background:#fff8ec; }
body .metal-calculator .mc-shapes button:hover { border-color:#d5b98e; }
body .metal-calculator .mc-dimension-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:12px; color:#7c8993; }
body .metal-calculator .mc-dimension-heading select { width:57px; height:28px; padding:3px 5px; font-size:12px; }
body .metal-calculator .mc-options { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
body .metal-calculator .mc-options button { display:inline-flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid #e7eaed; border-radius:4px; background:#fff; color:#7c8993; font-size:12px; line-height:1.5; }
body .metal-calculator .mc-options button::before { content:'+'; display:block; width:10px; line-height:1; font-size:14px; text-align:center; }
body .metal-calculator .mc-options button[aria-pressed=true] { background:#fff9ee; border-color:#e8d0a8; color:#876b40; }
body .metal-calculator .mc-options button[aria-pressed=true]::before { content:'−'; }
body .metal-calculator .mc-extra { margin-top:12px; padding-top:12px; border-top:1px solid #edf0f2; }
body .metal-calculator .mc-reference { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12px; }
body .metal-calculator .mc-reference:has(>:not([hidden])) { margin-top:8px; }
body .metal-calculator .mc-source { margin-left:auto; flex:none; color:#917447; text-decoration:none; font-size:11px; }
body .metal-calculator .mc-replacements { color:#78858e; min-width:0; }
body .metal-calculator summary { cursor:pointer; font-size:12px; }
body .metal-calculator [data-replacement-list] { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
body .metal-calculator [data-replacement-list] button { padding:5px 8px; border:1px solid #e7d2ad; border-radius:5px; background:#fffbf3; color:#826738; font-size:12px; }
body .metal-calculator .mc-from-product { margin-top:10px; padding:7px 0; border:0; background:transparent; color:#8b6c3d; font-size:12px; }
body .metal-calculator .mc-history { margin-top:12px; color:#83909a; font-size:12px; }
body .metal-calculator [data-history-list] { display:grid; gap:6px; margin-top:8px; }
body .metal-calculator .mc-history button { display:flex; gap:8px; align-items:center; text-align:left; padding:7px; border:1px solid #e3e8eb; border-radius:5px; background:#fff; color:#63737e; font-size:12px; }
body .metal-calculator .mc-history small { margin-left:auto; white-space:nowrap; }
body .metal-calculator .mc-result { flex:none; border-top:1px solid #e5e9ec; background:#fafbfc; padding:12px 13px; }
body .metal-calculator .mc-result-top { display:flex; justify-content:space-between; gap:12px; }
body .metal-calculator .mc-result-top>div { min-width:0; }
body .metal-calculator .mc-result-top>div>span { font-size:12px; color:#7e8a93; }
body .metal-calculator .mc-result-value { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px; margin-top:4px; }
body .metal-calculator .mc-result-value strong { font-size:28px; line-height:1.2; font-weight:550; letter-spacing:-.03em; overflow-wrap:anywhere; }
body .metal-calculator .mc-result-value>span { font-size:13px; color:#859199; }
body .metal-calculator .mc-cost { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:6px; text-align:right; }
body .metal-calculator .mc-cost strong { font-size:20px; font-weight:550; overflow-wrap:anywhere; }
body .metal-calculator .mc-cost strong.is-empty { font-size:12px; font-weight:400; color:#939da5; }
body .metal-calculator .mc-result-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; margin:7px 0 12px; font-size:11px; color:#85919b; }
body .metal-calculator .mc-result-meta b { font-weight:500; color:#5f717d; }
body .metal-calculator .mc-density-note { padding:0; border:0; background:transparent; color:inherit; font-size:11px; }
body .metal-calculator .mc-density-note:hover { color:#917447; }
body .metal-calculator .mc-error { color:#a15f41; margin:5px 0 10px; font-size:12px; line-height:1.4; }
body .metal-calculator .mc-result-actions { display:flex; align-items:stretch; gap:6px; }
body .metal-calculator .mc-catalog { display:flex; flex:1; min-width:0; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid #e5bc7e; border-radius:5px; background:#fff7e7; color:#775d33; font-size:13px; text-decoration:none; }
body .metal-calculator .mc-result-actions button { display:grid; place-items:center; flex:0 0 34px; padding:7px; border:1px solid #dfe5e9; border-radius:5px; color:#7a8790; background:#fff; }
body .metal-calculator .mc-result-actions svg { width:18px; height:18px; }
body .metal-calculator button:disabled,body .metal-calculator .mc-catalog[aria-disabled=true] { opacity:.45; cursor:default; }
body .metal-calculator .mc-feedback { display:block; min-height:0; font-size:11px; line-height:1.5; color:#63816d; }
body .metal-calculator .mc-feedback:not(:empty) { padding-top:6px; }
@media(max-width:600px) {
  body .metal-calculator { width:calc(var(--smc-viewport-width,100vw) - 34px); max-width:382px; }
  body .metal-calculator :is(input,select) { font-size:16px; }
  body .metal-calculator .mc-scroll { padding:12px; }
  body .metal-calculator .mc-shapes { gap:5px; }
  body .metal-calculator .mc-shapes img { width:34px; height:32px; }
  body .metal-calculator .mc-options button { font-size:12px; }
}
@media(max-width:360px) {
  body .metal-calculator .mc-shapes button { padding:3px; }
  body .metal-calculator .mc-options { gap:5px; }
  body .metal-calculator .mc-options button { padding:5px 6px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { body .metal-calculator { transition:none !important; } }

body .metal-calculator .mc-field>span:first-child { flex:1; }
body .metal-calculator .mc-field>input,body .metal-calculator .mc-input,body .metal-calculator .mc-price-input { flex:0 0 38px; height:38px; }

body .metal-calculator .mc-history-copy { display:grid; gap:4px; min-width:0; }
body .metal-calculator .mc-history-dimensions { white-space:normal; overflow-wrap:anywhere; font-size:11px; line-height:1.5; color:#83909a; }