.rf-config-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:2rem; align-items:start; }
.rf-preview-column { grid-column:1; grid-row:1 / span 2; position:sticky; top:5rem; min-width:0; }
.rf-config-options,.rf-config-quote { grid-column:2; min-width:0; }
.rf-preview { color:#e8e5df; background:#171b20; border:1px solid #303741; border-radius:1rem; overflow:hidden; }
.rf-preview-heading { padding:1.25rem 1.5rem 0; display:flex; justify-content:space-between; align-items:center; }
.rf-preview-heading p { color:#bac0c6; font-size:.75rem; }
.rf-preview-heading h2 { font-size:1.9rem; letter-spacing:.14em; font-weight:800; }
.rf-preview-mark { color:#9e8c6a; font-size:.7rem; letter-spacing:.12em; }
.rf-preview-stage { padding:1rem .5rem; background:radial-gradient(ellipse at center,#30353b 0,#171b20 75%); }
.rf-preview-stage svg { display:block; width:100%; height:auto; aspect-ratio:1.55; }
.rf-preview-sides { display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.25rem; }
.rf-preview-sides button { padding:.6rem .7rem; min-height:44px; font-size:.78rem; border:1px solid #5b636c; border-radius:.4rem; }
.rf-preview-sides button[aria-pressed=true] { background:#e5d9bf; color:#242628; border-color:#e5d9bf; }
.rf-preview-note { font-size:.73rem; color:#c5cbd0; margin:.8rem 1.25rem; line-height:1.5; }
.rf-preview-parts { font-size:.72rem; color:#e5d9bf; margin:.7rem 1.25rem; overflow-wrap:anywhere; }
.rf-preview-warning { font-size:.75rem; color:#f8dca3; margin:.75rem 1.25rem; }
.rf-preview-scope { padding:.9rem 1.25rem; font-size:.75rem; border-top:1px solid #414952; max-height:30vh; overflow:auto; }
.rf-preview-scope summary { cursor:pointer; min-height:30px; font-weight:700; }
.rf-preview-scope p { margin:.5rem 0; color:#c5cbd0; line-height:1.5; }
.rf-preview-scope a { display:inline-block; text-decoration:underline; color:#e5d9bf; margin:.5rem 0; }
.rf-preview-scope dl>div { display:grid; grid-template-columns:1fr 1.3fr; gap:.5rem; border-top:1px solid #3c424b; padding:.5rem 0; }
.rf-preview-scope dt { color:#aeb6bf; } .rf-preview-scope dd { overflow-wrap:anywhere; }
.rf-preview-scope small { display:block; color:#c8b58b; font-size:.65rem; margin-top:.2rem; }
.rf-preview-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.rf-colour-controls { margin-top:1rem; } .rf-colour-controls p { font-size:.75rem; color:#64748b; line-height:1.6; }
.rf-colour-swatches { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1rem 0; }
.rf-colour-swatches button { width:44px; height:44px; border-radius:50%; border:2px solid #a8adb5; color:#1c222b; font-weight:700; }
.rf-colour-swatches button[aria-pressed=true] { outline:3px solid #9f292a; outline-offset:3px; }
.rf-colour-swatches label { font-size:.75rem; display:flex; gap:.5rem; align-items:center; }
.rf-colour-swatches input { width:44px; height:44px; cursor:pointer; }
.rf-colour-modes { display:flex; gap:.5rem; flex-wrap:wrap; }
.rf-colour-modes button { border:1px solid #94a3b8; padding:.6rem .85rem; border-radius:.5rem; font-size:.8rem; }
.rf-colour-modes button[aria-pressed=true] { background:#e2e8f0; } .rf-colour-modes button:disabled { opacity:.5; }
.rf-preview button:focus-visible,.rf-colour-controls button:focus-visible,.rf-preview summary:focus-visible { outline:3px solid #daab65; outline-offset:3px; }
@media (max-width:1023px) {
  .rf-config-grid { display:flex; flex-direction:column; gap:1.25rem; }
  .rf-preview-column,.rf-config-options,.rf-config-quote { width:100%; }
  .rf-preview-column { position:static; }
  .rf-preview { border-radius:.6rem; box-shadow:0 6px 16px #0002; }
  .rf-preview-heading { padding:.4rem .8rem 0; } .rf-preview-heading h2 { font-size:1rem; }
  .rf-preview-heading p { font-size:.65rem; } .rf-preview-mark { font-size:.6rem; }
  .rf-preview-stage { padding:0 .4rem; } .rf-preview-stage svg { height:130px; aspect-ratio:auto; }
  .rf-preview-sides { padding:0 .7rem; gap:.3rem; }
  .rf-preview-sides button { padding:.25rem .6rem; font-size:.7rem; min-height:36px; }
  .rf-preview-note { font-size:.65rem; margin:.35rem .8rem; }
  .rf-preview-parts { font-size:.65rem; margin:.3rem .8rem; }
  .rf-preview-scope { padding:.35rem .8rem; max-height:22vh; } .rf-preview-scope summary { min-height:26px; }
  .rf-preview-warning { margin:.3rem .8rem; font-size:.65rem; }
  .rf-config-options [data-category],.rf-config-options #finish-color { scroll-margin-top:6rem; }
}
@media (max-width:420px) { .rf-preview-stage svg { height:105px; } }
@media (max-height:600px) { .rf-preview-column { position:static; } }
@media print { .rf-preview-column { display:none; } }
/* Sample-render compositing review: give the instrument a proper product stage. */
.rf-preview { background:#121416; border-color:#393a36; }
.rf-preview-heading p { text-transform:uppercase; letter-spacing:.14em; color:#bba581; }
.rf-preview-heading h2 { font-size:2.15rem; font-weight:500; letter-spacing:.22em; }
.rf-preview-mark { font-size:.58rem; max-width:6rem; text-align:right; line-height:1.6; }
.rf-preview-mode { display:flex; gap:1.1rem; padding:.85rem 1.5rem .3rem; }
.rf-preview-mode button { min-height:34px; color:#8d9297; font-size:.73rem; border-bottom:1px solid transparent; }
.rf-preview-mode button[aria-pressed=true] { color:#e4cc9d; border-color:#c9ae7a; }
.rf-preview-stage { padding:.5rem 1.1rem; background:radial-gradient(ellipse at 42% 45%,#343530 0%,#1b1d1b 44%,#121416 80%); }
.rf-preview-stage svg { height:min(57vh,580px); aspect-ratio:auto; }
.rf-preview-reference { padding:1rem; background:#121416; }
.rf-preview-reference img { width:100%; height:min(57vh,580px); object-fit:contain; }
.rf-preview-reference p { margin:.65rem .3rem 0; font-size:.73rem; color:#e4cc9d; }
.rf-preview-sides { justify-content:center; padding:.25rem 1rem .5rem; }
.rf-preview-sides button { border-color:#484a46; border-radius:2rem; padding:.45rem 1rem; }
.rf-preview-sides button[aria-pressed=true] { background:#cdb78d; color:#1b1c19; border-color:#cdb78d; }
.rf-preview-parts { color:#c3b59e; font-size:.7rem; line-height:1.5; }
.rf-preview-note { color:#9ca3a7; }
@media (max-width:1023px) {
  .rf-preview-heading { padding:.55rem .8rem 0; }
  .rf-preview-heading h2 { font-size:1.2rem; }
  .rf-preview-heading p { font-size:.6rem; letter-spacing:.08em; }
  .rf-preview-mode { padding:.1rem .8rem; gap:1rem; }
  .rf-preview-mode button { min-height:30px; font-size:.65rem; }
  .rf-preview-stage { padding:0 .25rem; }
  .rf-preview-stage svg { height:150px; }
  .rf-preview-reference { padding:.25rem .8rem; }
  .rf-preview-reference img { height:150px; }
  .rf-preview-reference p { font-size:.65rem; margin:.2rem 0; }
  .rf-preview-sides { padding:.1rem .7rem .2rem; }
  .rf-preview-sides button { min-height:32px; padding:.2rem .7rem; }
  .rf-preview-parts { font-size:.62rem; line-height:1.35; }
  .rf-preview-note { font-size:.62rem; }
}
@media (max-width:420px) { .rf-preview-stage svg,.rf-preview-reference img { height:125px; } }

/* Full front/back views only; never enlarge a source crop. */
.rf-preview-sides { justify-content:flex-start; padding:.65rem 1.5rem .1rem; }
.rf-preview-stage svg,.rf-preview-reference img { height:min(52vh,520px); }
.rf-preview-unavailable { height:min(52vh,520px); display:flex; flex-direction:column; justify-content:center; gap:.7rem; padding:2rem; text-align:center; background:radial-gradient(ellipse at center,#242823,#121416 80%); }
.rf-preview-unavailable strong { color:#dec79e; font-size:.95rem; }
.rf-preview-unavailable p { color:#a6adaf; font-size:.78rem; line-height:1.65; max-width:22rem; margin:0 auto; }
.rf-bindrune-examples { margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid #d5d9dd; }
.rf-bindrune-examples h4 { font-weight:700; color:#263b3e; }
.rf-bindrune-examples p { margin:.5rem 0 1rem; color:#59676b; font-size:.78rem; line-height:1.6; }
.rf-bindrune-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
.rf-bindrune-grid figure { background:#f1f4f2; border:1px solid #dde3df; border-radius:.6rem; padding:.75rem .35rem; min-width:0; }
.rf-bindrune-grid img { width:100%; height:330px; object-fit:contain; }
.rf-bindrune-grid figcaption { text-align:center; font-size:.7rem; color:#28565c; margin-top:.6rem; overflow-wrap:anywhere; }
.rf-bindrune-examples small { display:block; margin-top:.8rem; font-size:.65rem; color:#758084; }
@media (max-width:1023px) {
  .rf-preview-sides { padding:.3rem .8rem .1rem; }
  .rf-preview-stage svg,.rf-preview-reference img,.rf-preview-unavailable { height:150px; }
  .rf-preview-unavailable { padding:.75rem 1rem; gap:.35rem; }
  .rf-preview-unavailable strong { font-size:.8rem; }
  .rf-preview-unavailable p { font-size:.7rem; }
}
@media (max-width:600px) { .rf-bindrune-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .rf-bindrune-grid img { height:280px; } }
@media (max-width:420px) { .rf-preview-stage svg,.rf-preview-reference img,.rf-preview-unavailable { height:125px; } }

.rf-oval-example { margin-top:1rem; border:1px solid #d5ddda; border-radius:.6rem; overflow:hidden; }
.rf-oval-example>div { background:#252e2e; padding:.2rem; }
.rf-oval-example svg { width:100%; height:105px; }
.rf-oval-example figcaption { padding:.75rem; font-size:.8rem; }
.rf-oval-example p { font-size:.72rem; color:#5e696b; margin-top:.3rem; line-height:1.5; }

.rf-bindrune-examples a { display:inline-block; margin-top:.6rem; color:#28565c; font-size:.75rem; text-decoration:underline; }
.rf-bindrune-grid button { background:#f1f4f2; border:2px solid #dde3df; border-radius:.6rem; padding:.75rem .35rem; min-width:0; cursor:pointer; }
.rf-bindrune-grid button[aria-pressed=true] { border-color:#936d32; background:#f5eddf; box-shadow:0 0 0 2px #936d3224; }
.rf-bindrune-grid button:focus-visible { outline:3px solid #28565c; outline-offset:3px; }
.rf-bindrune-grid button span { display:block; text-align:center; font-size:.7rem; color:#28565c; margin-top:.6rem; }

/* Display-only controls remain outside quote state. */
.rf-preview-guard{padding:14px 20px;border-top:1px solid #3d474b;color:#d9cfb3;font-size:12px}
.rf-preview-guard-options{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}
.rf-preview-guard button{border:1px solid #68706d;border-radius:7px;padding:7px 10px;background:#171d1e;color:#f1ead8;cursor:pointer;min-height:36px}
.rf-preview-guard button[aria-pressed="true"]{background:#cbb88c;color:#161918;border-color:#cbb88c}
.rf-preview-guard button:focus-visible{outline:2px solid #ecd5a0;outline-offset:3px}
.rf-preview-guard p{line-height:1.5;margin:0;color:#a9b9ba}

/* v13: preview left, options centre, live specification and price right.
   Quote rules are scoped to the live quote wrapper: the detached PDF snapshot retains
   its existing print layout and export pagination. */
.rf-config-grid { grid-template-columns:minmax(220px,.8fr) minmax(380px,1.45fr) minmax(280px,1.05fr); gap:1rem; }
.rf-preview-column { grid-column:1; grid-row:1; }
.rf-config-options { grid-column:2; grid-row:1; }
.rf-config-quote { grid-column:3; grid-row:1; }
.rf-preview-column,.rf-config-quote { position:sticky; top:4.5rem; max-height:calc(100dvh - 5.25rem); overflow:auto; scrollbar-width:thin; }
.rf-preview-heading { padding:.8rem 1rem 0; }
.rf-preview-heading h2 { font-size:1.5rem; }
.rf-preview-settings { border-top:1px solid #3d474b; padding:.6rem 0; font-size:.73rem; }
.rf-preview-settings>summary { cursor:pointer; padding:.2rem 1rem; color:#d4c6aa; min-height:32px; }
.rf-eq-legend { padding:10px 20px; font-size:.72rem; line-height:1.65; }
.rf-eq-legend ol { margin-top:6px; }
.rf-config-quote #quote-summary-card { position:static; border-width:1px; box-shadow:none; }
.rf-config-quote #ui-header { padding:12px 16px; }
.rf-config-quote #ui-header h3 { font-size:.9rem; }
.rf-config-quote #ui-header>div { font-size:.7rem; }
.rf-config-quote #quote-summary-card>#ui-header~div:last-child { padding:14px; }
.rf-config-quote #quote-scroll-area { min-height:0; max-height:calc(100dvh - 380px); margin-bottom:10px; }
.rf-config-quote #quote-list-container { display:block; }
.rf-config-quote #quote-list-container>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; border-bottom:1px solid #edf0ed; padding:7px 0; margin:0; }
.rf-config-quote #quote-list-container>div>div:first-child { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:6px; padding:0; align-items:baseline; }
.rf-config-quote #quote-list-container>div>div:first-child>div { margin:0; font-size:10px; line-height:1.4; overflow-wrap:anywhere; letter-spacing:0; }
.rf-config-quote [data-summary-total] { padding-top:10px; }
.rf-config-quote [data-summary-total] .text-3xl { font-size:1.55rem; }
.rf-config-quote [data-pricing-footnote] { margin-top:8px; font-size:10px; }
.rf-config-quote #quote-actions-area button { margin-top:12px; padding:10px; font-size:11px; }
.rf-preview-column .rf-preview-stage svg,.rf-preview-column .rf-preview-reference img,.rf-preview-column .rf-preview-unavailable { height:min(54vh,560px); }
.rf-mobile-review { display:none; }
@media (min-width:1280px) {
  main.max-w-7xl { max-width:1560px; }
  .rf-config-grid { gap:1.25rem; }
  .rf-preview-column .rf-preview-stage svg,.rf-preview-column .rf-preview-reference img,.rf-preview-column .rf-preview-unavailable { height:min(54vh,560px); }
  .rf-preview-column .rf-preview-heading { flex-wrap:wrap; gap:4px; }
  .rf-preview-column .rf-preview-mark { display:none; }
  .rf-preview-column .rf-preview-mode { gap:.6rem; padding:.5rem 1rem .2rem; }
  .rf-preview-column .rf-preview-sides { padding:.5rem 1rem .1rem; }
}
@media (max-width:1023px) {
  .rf-config-grid { display:flex; }
  .rf-preview-column,.rf-config-quote { position:static; max-height:none; overflow:visible; }
  .rf-preview-column { order:0; }
  .rf-preview { width:100%; }
  .rf-config-quote { order:1; }
  .rf-config-options { order:2; }
  .rf-preview-column .rf-preview-stage svg,.rf-preview-column .rf-preview-reference img,.rf-preview-column .rf-preview-unavailable { height:165px; }
  .rf-config-quote #quote-scroll-area { max-height:140px; }
  .rf-mobile-review { display:flex; position:fixed; z-index:45; left:0; right:0; bottom:0; background:#101818; color:#eee4cc; border-top:1px solid #7c735d; align-items:center; justify-content:space-around; gap:8px; padding:8px 12px max(8px,env(safe-area-inset-bottom)); font-size:12px; }
  .rf-mobile-review a { padding:8px; text-decoration:underline; }
  .rf-mobile-review strong { margin-left:auto; }
  body { padding-bottom:60px; }
  #instrument-preview,#config-options,#quote-summary-card { scroll-margin-top:80px; }
}
@media (max-height:600px) { .rf-preview-column,.rf-config-quote { position:static; max-height:none; overflow:visible; } }
@media print { .rf-mobile-review { display:none; } }
.rf-pickup-card{margin:10px 0 6px;min-width:0}
.rf-pickup-card-image{height:96px;display:flex;align-items:center;justify-content:center;background:#d8dbd8;border:1px solid #bdc3c0;border-radius:7px;overflow:hidden}
.rf-pickup-card-image svg{display:block;width:100%;height:100%;max-width:240px}
.rf-pickup-card p{font-size:11px;line-height:1.5;color:#536267;margin:5px 0 0;overflow-wrap:anywhere}
.rf-pickup-source{margin:0;padding:8px 16px 12px;font-size:11px;line-height:1.5;color:#c7c8be;overflow-wrap:anywhere}
.rf-pickup-source a{color:#ddc798;text-decoration:underline;text-underline-offset:3px}
.rf-colour-group { margin:.9rem 0 0; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#475569; }