.slipfit-tray-builder{--navy:#1D2D44;--navy2:#263b59;--gold:#C8A96B;--cream:#f6f3ec;--ink:#172234;--muted:#687386;--line:#d9dee6;--white:#fff;--blue:#1D2D44}
.slipfit-tray-builder,.slipfit-tray-builder *{box-sizing:border-box}.slipfit-tray-builder{margin:0;color:var(--ink);font-family:Inter,"Source Sans 3",system-ui,sans-serif;background:#f8f9fb;font-size:16px}.slipfit-tray-builder .brandbar{height:70px;padding:0 max(22px,calc((100vw - 1180px)/2));background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between}.slipfit-tray-builder .brand{font-weight:750;font-size:1.05rem;display:flex;gap:11px;align-items:center}.slipfit-tray-builder .mark{border:1px solid var(--gold);border-radius:50%;color:var(--gold);width:34px;height:34px;display:grid;place-items:center;font-size:.72rem}.slipfit-tray-builder .gold{color:var(--gold)}.slipfit-tray-builder .prototype{font-size:.8rem;padding:6px 10px;border:1px solid #52657f;border-radius:99px;color:#dfe7f2}.slipfit-tray-builder .slipfit-tray-builder__inner{max-width:1180px;margin:auto;padding:32px 22px 64px}.slipfit-tray-builder .intro{max-width:720px}.slipfit-tray-builder .eyebrow{font-size:.74rem;letter-spacing:.14em;color:#997d46;font-weight:800;margin:0 0 7px}.slipfit-tray-builder .intro h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.02;margin:0 0 14px;color:var(--navy)}.slipfit-tray-builder .intro>p:last-child{color:var(--muted);line-height:1.6;margin:0}.slipfit-tray-builder .steps{display:flex;gap:10px;margin:28px 0;flex-wrap:wrap}.slipfit-tray-builder .steps span{display:flex;gap:8px;align-items:center;color:#7b8492;padding:8px 12px;border-radius:99px;font-size:.86rem}.slipfit-tray-builder .steps b{border:1px solid #b9c0cb;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;font-size:.74rem}.slipfit-tray-builder .steps .active{background:#e9edf3;color:var(--navy);font-weight:700}.slipfit-tray-builder .steps .active b{background:var(--navy);color:white;border-color:var(--navy)}.slipfit-tray-builder .tray-picker,.slipfit-tray-builder .builder-panel,.slipfit-tray-builder .summary,.slipfit-tray-builder .catalog{background:white;border:1px solid var(--line);border-radius:18px}.slipfit-tray-builder .tray-picker,.slipfit-tray-builder .catalog,.slipfit-tray-builder .builder-panel{padding:24px}.slipfit-tray-builder .section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.slipfit-tray-builder .section-head.compact{margin-bottom:8px}.slipfit-tray-builder h2{font-size:1.3rem;color:var(--navy);margin:0}.slipfit-tray-builder .secondary,.slipfit-tray-builder .text-button,.slipfit-tray-builder .primary,.slipfit-tray-builder .tray-card,.slipfit-tray-builder .product-card{font:inherit}.slipfit-tray-builder .secondary{background:#fff;border:1px solid var(--navy);color:var(--navy);font-weight:700;border-radius:9px;padding:10px 14px;cursor:pointer}.slipfit-tray-builder .text-button{border:0;background:none;color:#735c33;text-decoration:underline;cursor:pointer}.slipfit-tray-builder .tray-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.slipfit-tray-builder .tray-card{text-align:left;background:#fff;border:2px solid #e0e4ea;border-radius:12px;padding:14px;cursor:pointer;color:var(--ink)}.slipfit-tray-builder .tray-card:hover{border-color:#9ba8b9}.slipfit-tray-builder .tray-card.selected{border-color:var(--gold);box-shadow:0 0 0 3px #c8a96b24}.slipfit-tray-builder .tray-card strong,.slipfit-tray-builder .tray-card span{display:block}.slipfit-tray-builder .tray-card span{font-size:.82rem;color:var(--muted);margin-top:4px}.slipfit-tray-builder .tray-card em{font-style:normal;color:var(--navy);font-weight:750;float:right}.slipfit-tray-builder .workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;margin-top:18px}.slipfit-tray-builder .builder-panel{min-width:0}.slipfit-tray-builder .hint{color:var(--muted);font-size:.9rem;margin:0 0 16px}.slipfit-tray-builder .inline-catalog{margin:0 0 20px;padding:18px;background:#f8fafc;border-radius:14px}.slipfit-tray-builder .tray-stage{min-height:360px;border-radius:14px;background:linear-gradient(135deg,#e7e1d3,#f3efe7);display:grid;place-items:center;padding:24px;overflow:auto}.slipfit-tray-builder .tray{display:grid;gap:4px;padding:12px;border:9px solid var(--navy);border-radius:10px;background:#cad2dd;box-shadow:0 15px 30px #1d2d4430;position:relative;max-width:100%}.slipfit-tray-builder .cell{width:66px;aspect-ratio:1;border-radius:5px;background:#eef1f5;border:1px dashed #a7b0be;grid-row:auto}.slipfit-tray-builder .placed{border:2px solid var(--blue);border-radius:7px;background:linear-gradient(145deg,#fefefe,#dbe5f0);color:var(--navy);padding:6px;display:grid;place-items:center;text-align:center;font-size:.68rem;font-weight:760;line-height:1.15;cursor:pointer;box-shadow:0 3px 5px #1d2d4420;min-width:0}.slipfit-tray-builder .placed:hover{background:#fff1eb;border-color:#a64722}.slipfit-tray-builder .capacity{display:flex;align-items:center;gap:12px;margin-top:15px;color:var(--muted);font-size:.84rem}.slipfit-tray-builder .meter{height:7px;background:#e5e9ef;border-radius:20px;flex:1;overflow:hidden}.slipfit-tray-builder .meter i{height:100%;background:var(--gold);display:block;width:0;transition:width .2s}.slipfit-tray-builder .summary{padding:24px;align-self:start;position:sticky;top:18px}.slipfit-tray-builder .summary-items{margin:20px 0;min-height:120px}.slipfit-tray-builder .summary-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 0;border-bottom:1px solid #edf0f4;font-size:.86rem}.slipfit-tray-builder .summary-row small{display:block;color:var(--muted);margin-top:2px}.slipfit-tray-builder .empty{color:var(--muted);font-size:.9rem;line-height:1.5}.slipfit-tray-builder .total{display:flex;justify-content:space-between;align-items:center;padding:16px 0}.slipfit-tray-builder .total strong{font-size:1.45rem;color:var(--navy)}.slipfit-tray-builder .primary{width:100%;border:0;border-radius:10px;padding:13px 15px;background:var(--gold);color:#172234;font-weight:800;cursor:pointer}.slipfit-tray-builder .primary:hover{filter:brightness(.96)}.slipfit-tray-builder .fineprint{font-size:.72rem;color:var(--muted);text-align:center;line-height:1.4}.slipfit-tray-builder .catalog{margin-top:18px}.slipfit-tray-builder .inline-catalog{margin-top:0}.slipfit-tray-builder .catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:11px}.slipfit-tray-builder .product-card{border:1px solid var(--line);border-radius:11px;background:#fff;text-align:left;padding:13px;cursor:pointer;min-height:105px;position:relative}.slipfit-tray-builder .product-card:hover{border-color:var(--gold);transform:translateY(-1px)}.slipfit-tray-builder .product-card strong{display:block;padding-right:52px;font-size:.88rem;color:var(--navy)}.slipfit-tray-builder .product-card span{display:block;color:var(--muted);font-size:.76rem;margin-top:6px}.slipfit-tray-builder .product-card em{position:absolute;right:12px;top:12px;font-style:normal;font-weight:800;color:#735c33}.slipfit-tray-builder .fit-note{font-size:.8rem;color:var(--muted)}.slipfit-tray-builder .notice{position:fixed;left:50%;bottom:24px;transform:translate(-50%,130%);background:var(--navy);color:white;padding:12px 18px;border-radius:10px;box-shadow:0 8px 25px #0004;transition:transform .25s;z-index:5;max-width:90%;text-align:center}.slipfit-tray-builder .notice.show{transform:translate(-50%,0)}
.slipfit-tray-builder .model-badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:99px;background:var(--navy);color:#fff;font-style:normal;font-size:.62rem;vertical-align:2px}.slipfit-tray-builder .model-preview{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(220px,1fr);gap:16px;align-items:center;margin-top:14px;padding:16px;border:1px solid #d7dfeb;border-radius:13px;background:linear-gradient(135deg,#f7f9fc,#e9eff7)}.slipfit-tray-builder .model-preview h3{margin:0 0 6px;color:var(--navy);font-size:1rem}.slipfit-tray-builder .model-preview>div>p:last-of-type{margin:0;color:var(--muted);font-size:.82rem;line-height:1.4}.slipfit-tray-builder .model-preview model-viewer{display:block;width:100%;height:260px;border-radius:10px;background:radial-gradient(circle at 50% 40%,#fff,#dbe4ef);touch-action:pan-y}
.slipfit-tray-builder .tray-model-preview{margin-top:18px;border-color:#d7c28f;background:linear-gradient(135deg,#fbfaf6,#edf2f8)}.slipfit-tray-builder .tray-model-preview model-viewer{height:300px}.slipfit-tray-builder .model-switch{display:flex;gap:8px;margin-top:14px}.slipfit-tray-builder .model-switch button{border:1px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:inherit;font-size:.82rem;font-weight:750;padding:7px 14px;cursor:pointer}.slipfit-tray-builder .model-switch button.active{background:var(--navy);color:#fff}
.slipfit-tray-builder .combined-model-preview{margin-top:16px;border-color:#b5c4d7;background:linear-gradient(135deg,#f6f9fc,#e7eef7)}.slipfit-tray-builder .combined-model-preview model-viewer{height:360px}.slipfit-tray-builder .combined-model-preview.loading model-viewer{opacity:.55}.slipfit-tray-builder .combined-model-preview model-viewer{transition:opacity .2s}
@media(max-width:850px){.slipfit-tray-builder .tray-options,.slipfit-tray-builder .catalog-grid{grid-template-columns:repeat(2,1fr)}.slipfit-tray-builder .workspace{grid-template-columns:1fr}.slipfit-tray-builder .summary{position:static;order:2}.slipfit-tray-builder .tray-stage{min-height:300px}.slipfit-tray-builder .cell{width:58px}}
@media(max-width:520px){.slipfit-tray-builder .slipfit-tray-builder__inner{padding:24px 14px 52px}.slipfit-tray-builder .brandbar{height:60px;padding:0 14px}.slipfit-tray-builder .prototype{display:none}.slipfit-tray-builder .tray-picker,.slipfit-tray-builder .builder-panel,.slipfit-tray-builder .summary,.slipfit-tray-builder .catalog{padding:17px;border-radius:14px}.slipfit-tray-builder .section-head{align-items:flex-start;flex-direction:column}.slipfit-tray-builder .secondary{width:100%}.slipfit-tray-builder .section-head.compact{flex-direction:row;align-items:center}.slipfit-tray-builder .tray-stage{padding:14px;min-height:275px}.slipfit-tray-builder .cell{width:min(54px,13vw)}.slipfit-tray-builder .catalog-grid{grid-template-columns:1fr 1fr}.slipfit-tray-builder .product-card{min-height:112px}.slipfit-tray-builder .steps{gap:2px}.slipfit-tray-builder .steps span{padding:7px;font-size:.76rem}.slipfit-tray-builder .model-preview{grid-template-columns:1fr}.slipfit-tray-builder .model-preview model-viewer{height:240px}}
.slipfit-tray-builder .accessory-panel{margin:0 0 20px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fffaf0}.slipfit-tray-builder .accessory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.slipfit-tray-builder .accessory-card{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:start;border:1px solid #ddd4c1;border-radius:11px;background:#fff;padding:11px;text-align:left;color:var(--ink)}.slipfit-tray-builder .accessory-card img,.slipfit-tray-builder .accessory-thumb{width:54px;height:54px;border-radius:8px;object-fit:cover;background:#e7ecf3;display:grid;place-items:center;color:var(--navy);font-weight:800}.slipfit-tray-builder .accessory-card strong,.slipfit-tray-builder .accessory-card small{display:block}.slipfit-tray-builder .accessory-card strong{font-size:.84rem;color:var(--navy);line-height:1.2}.slipfit-tray-builder .accessory-card small{color:var(--muted);font-size:.72rem;line-height:1.35;margin-top:4px}.slipfit-tray-builder .accessory-card button{grid-column:1/-1;border:1px solid var(--navy);border-radius:8px;background:white;color:var(--navy);font:inherit;font-size:.78rem;font-weight:750;padding:8px;cursor:pointer}.slipfit-tray-builder .accessory-card button:disabled{cursor:not-allowed;opacity:.5}.slipfit-tray-builder .accessory-flag{display:block;margin-top:3px;padding:2px 4px;border-radius:4px;background:#fff2c9;color:#6d5425;font-size:.58rem}.slipfit-tray-builder .kit-row{border:1px solid #d6b96f;background:#fff9e9;border-radius:9px;padding:11px;margin-bottom:8px}.slipfit-tray-builder .kit-row small{display:block;color:var(--muted);margin-top:3px}.slipfit-tray-builder .included-label{color:#735c33;font-size:.74rem;font-weight:750}.slipfit-tray-builder .summary-row>.text-button{grid-column:1/-1;justify-self:start;padding:0;font-size:.72rem}@media(max-width:850px){.slipfit-tray-builder .accessory-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.slipfit-tray-builder .accessory-grid{grid-template-columns:1fr}}

.slipfit-tray-builder /* A single geometry system controls both the visible grid and placed pieces. */
.tray {
  display: block;
  width: min(100%, calc(var(--cols) * 108px));
  aspect-ratio: var(--cols) / var(--rows);
  padding: 0;
  flex: none;
}

.slipfit-tray-builder .gridlines,.slipfit-tray-builder .long-riser-layer,.slipfit-tray-builder .pieces {
  position: absolute;
  inset: 10px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: 4px;
}

.slipfit-tray-builder .gridlines { pointer-events: auto; }
.slipfit-tray-builder .long-riser-layer { pointer-events:none; }
.slipfit-tray-builder .pieces { pointer-events: none; }
.slipfit-tray-builder .tray.placing-riser .pieces { pointer-events:none; opacity:.72; }
.slipfit-tray-builder .tray.placing-riser .placed { pointer-events:none; }
.slipfit-tray-builder .cell {
  appearance: none;
  padding: 0;
  width: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
}
.slipfit-tray-builder .placed {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 5px;
  font-size: clamp(.55rem, 1.5vw, .68rem);
}
.slipfit-tray-builder .placed.dragging {
  cursor: grabbing;
  opacity: .78;
  z-index: 5;
  box-shadow: 0 10px 22px rgba(29,45,68,.28);
  transition: none;
}
.slipfit-tray-builder .cell.drag-target {
  background: #fff4d6;
  border-color: #C8A96B;
  box-shadow: inset 0 0 0 2px rgba(200,169,107,.45);
}
.slipfit-tray-builder .placed.selected {
  border-color: #C8A96B;
  box-shadow: 0 0 0 3px rgba(200,169,107,.42), 0 4px 8px rgba(29,45,68,.22);
  background: linear-gradient(145deg,#fffdf7,#efe3c9);
  z-index: 2;
}
.slipfit-tray-builder .riser-stack-tile {
  border-color:#9a7a3c;
  background:linear-gradient(145deg,#f7edda,#d5b978);
  color:#1D2D44;
}
.slipfit-tray-builder .riser-stack-tile .height-badge { background:#1D2D44; color:#fff; }
.slipfit-tray-builder .cell.move-target { cursor: pointer; }
.slipfit-tray-builder .cell.move-target:hover { background: #fff8e8; border-color: #C8A96B; }
.slipfit-tray-builder .piece-controls {
  margin-top: 13px;
  padding: 11px 12px;
  border: 1px solid #dbc58e;
  border-radius: 10px;
  background: #fffaf0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.slipfit-tray-builder .piece-controls[hidden] { display: none; }
.slipfit-tray-builder .piece-controls span { flex: 1; min-width: 0; }
.slipfit-tray-builder .top-system-preview { margin-top: 18px; }
.slipfit-tray-builder .arrange-heading { margin-top: 18px; }
.slipfit-tray-builder .piece-controls b,.slipfit-tray-builder .piece-controls small { display: block; }
.slipfit-tray-builder .piece-controls b { color: #1D2D44; font-size: .86rem; }
.slipfit-tray-builder .piece-controls small { color: #687386; margin-top: 2px; font-size: .73rem; }
.slipfit-tray-builder .secondary.small { padding: 7px 10px; font-size: .78rem; }
.slipfit-tray-builder .secondary.danger { color: #8b351e; border-color: #bd7864; }
.slipfit-tray-builder .riser-panel { margin-top:13px; padding:12px; border:1px solid #d9dee6; border-radius:10px; background:#f8fafc; }
.slipfit-tray-builder .riser-heading { display:flex; gap:9px; align-items:center; margin-bottom:9px; }
.slipfit-tray-builder .riser-heading>span:last-child { min-width:0; }
.slipfit-tray-builder .riser-heading b,.slipfit-tray-builder .riser-heading small { display:block; }
.slipfit-tray-builder .riser-heading b { color:#1D2D44; font-size:.86rem; }
.slipfit-tray-builder .riser-heading small { color:#687386; margin-top:2px; font-size:.73rem; }
.slipfit-tray-builder .riser-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:7px; background:#f1e5ca; color:#735c33; font-size:1.15rem; font-weight:900; }
.slipfit-tray-builder .riser-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding-top:10px; border-top:1px solid #e2e6ec; }
.slipfit-tray-builder .riser-controls p { grid-column:1/-1; margin:0 0 2px; color:#687386; font-size:.74rem; line-height:1.35; }
.slipfit-tray-builder .stack-riser-controls { margin-top:0; }
.slipfit-tray-builder .new-riser-stack { grid-column:1/-1; background:#fff; color:#1D2D44; }
.slipfit-tray-builder .riser-button { appearance:none; border:1px solid #1D2D44; background:#1D2D44; color:#fff; border-radius:7px; padding:7px 4px; font:inherit; font-size:.7rem; font-weight:750; cursor:pointer; }
.slipfit-tray-builder .riser-button.active { border-color:#9a7a3c; background:#C8A96B; color:#172234; box-shadow:0 0 0 3px rgba(200,169,107,.30); }
.slipfit-tray-builder .riser-button small { display:block; font-size:.58rem; color:#e4eaf1; margin-top:2px; }
.slipfit-tray-builder .riser-button.active small { color:#29384d; }
.slipfit-tray-builder .riser-flag { display:block; color:#735c33; font-size:.56rem; font-weight:900; margin-top:2px; }
.slipfit-tray-builder .long-riser-heading { margin-top:13px; padding-top:12px; border-top:1px solid #e2e6ec; }
.slipfit-tray-builder .long-riser-heading b,.slipfit-tray-builder .long-riser-heading small { display:block; }
.slipfit-tray-builder .long-riser-heading b { color:#1D2D44; font-size:.84rem; }
.slipfit-tray-builder .long-riser-heading small { color:#687386; font-size:.72rem; margin-top:2px; }
.slipfit-tray-builder .long-riser-controls { display:grid; grid-template-columns:1fr 1fr auto; gap:7px; margin-top:9px; }
.slipfit-tray-builder .long-riser-controls select { min-width:0; border:1px solid #cbd3de; border-radius:7px; background:#fff; color:#1D2D44; padding:8px 7px; font:inherit; font-size:.74rem; }
.slipfit-tray-builder .long-riser-controls button { border:0; border-radius:7px; background:#1D2D44; color:#fff; padding:8px 11px; font:inherit; font-size:.74rem; font-weight:800; cursor:pointer; }
.slipfit-tray-builder .long-riser { border:3px solid #b28c43; border-radius:7px; background:rgba(200,169,107,.42); box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); color:#614c27; display:grid; place-items:end center; padding:3px; font-size:.52rem; font-weight:900; overflow:hidden; }
.slipfit-tray-builder .placed-risers { display:grid; gap:6px; margin-top:9px; }
.slipfit-tray-builder .placed-riser-row { display:flex; align-items:center; gap:7px; padding:7px 8px; border-radius:7px; background:#fff; border:1px solid #e0d0aa; font-size:.7rem; }
.slipfit-tray-builder .placed-riser-row span { flex:1; min-width:0; color:#39485e; }
.slipfit-tray-builder .placed-riser-row button { border:1px solid #b9c3d0; background:#fff; border-radius:6px; padding:5px 7px; color:#1D2D44; font:inherit; font-size:.66rem; font-weight:750; cursor:pointer; }
.slipfit-tray-builder .placed-riser-row.selected { border-color:#b28c43; background:#fff9eb; box-shadow:0 0 0 2px rgba(200,169,107,.24); }
.slipfit-tray-builder .lid-option { margin-top:13px; }
.slipfit-tray-builder .standard-kit-option { margin-top:22px; padding-top:18px; border-top:1px solid #e2e6ec; }
.slipfit-tray-builder .standard-kit-option p { max-width:760px; margin:0 0 12px; color:#687386; font-size:.86rem; line-height:1.5; }
.slipfit-tray-builder .standard-kit-option p b { color:#1D2D44; }
.slipfit-tray-builder .lid-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #cbd3de; border-radius:10px; background:#f8fafc; }
.slipfit-tray-builder .lid-card>span { flex:1; min-width:0; }
.slipfit-tray-builder .lid-card b,.slipfit-tray-builder .lid-card small { display:block; }
.slipfit-tray-builder .lid-card b { color:#1D2D44; font-size:.88rem; }
.slipfit-tray-builder .lid-card small { color:#687386; font-size:.74rem; margin-top:3px; line-height:1.4; }
.slipfit-tray-builder .lid-card button { border:1px solid #1D2D44; border-radius:8px; background:#fff; color:#1D2D44; padding:8px 11px; font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; }
.slipfit-tray-builder .lid-card.selected { border-color:#C8A96B; background:#fffaf0; box-shadow:0 0 0 2px rgba(200,169,107,.2); }
.slipfit-tray-builder .lid-card.selected button { background:#1D2D44; color:#fff; }
.slipfit-tray-builder .lid-status-ok { color:#416343!important; }
.slipfit-tray-builder .lid-status-over { color:#9b3e26!important; }
.slipfit-tray-builder .riser-button:disabled { border-color:#8c96a2; background:#8c96a2; color:#eef1f4; opacity:.58; cursor:not-allowed; text-decoration:line-through; box-shadow:none; }
.slipfit-tray-builder .tray-direction { display:flex; align-items:center; gap:9px; max-width:340px; margin:0 auto; color:#687386; font-size:.65rem; font-weight:800; letter-spacing:.13em; }
.slipfit-tray-builder .tray-direction i { height:1px; background:#c6ccd5; flex:1; }
.slipfit-tray-builder .tray-back { margin-bottom:7px; }
.slipfit-tray-builder .tray-front { margin-top:7px; }
.slipfit-tray-builder .height-legend { display:flex; gap:16px; margin:4px 0 14px; color:#687386; font-size:.76rem; }
.slipfit-tray-builder .height-legend span { display:flex; align-items:center; gap:6px; }
.slipfit-tray-builder .height-legend i { width:10px; height:10px; border-radius:3px; border:1px solid #8294aa; }
.slipfit-tray-builder .height-legend .height45 { background:#dce7f2; }
.slipfit-tray-builder .height-legend .height60 { background:#eadab7; border-color:#b3914f; }
.slipfit-tray-builder .height-badge { display:inline-block; margin-top:3px; padding:2px 5px; border-radius:4px; background:#dce7f2; color:#38516f; font-size:.58rem; font-weight:850; letter-spacing:.03em; }
.slipfit-tray-builder .placed.height-60 { background:linear-gradient(145deg,#fffdf7,#eadab7); border-color:#9a7a3c; }
.slipfit-tray-builder .placed.height-60.selected { border-color:#C8A96B; box-shadow:0 0 0 3px rgba(200,169,107,.52),0 4px 8px rgba(29,45,68,.22); }
.slipfit-tray-builder .placed.selected,
.slipfit-tray-builder .placed.height-60.selected {
  background:#1D2D44;
  color:#fff;
  border-color:#C8A96B;
  box-shadow:0 0 0 4px rgba(200,169,107,.68),0 8px 18px rgba(29,45,68,.38);
  z-index:3;
}
.slipfit-tray-builder .placed.selected .height-badge { background:#fff; color:#1D2D44; }
.slipfit-tray-builder .placed.selected .riser-flag,
.slipfit-tray-builder .placed.selected .accessory-flag { background:#C8A96B; color:#172234; }
.slipfit-tray-builder .product-card.height-60 { border-top:4px solid #C8A96B; }
.slipfit-tray-builder .product-card.height-45 { border-top:4px solid #9bb1c8; }
.slipfit-tray-builder .product-card.height-30,.slipfit-tray-builder .product-card.height-15 { border-top:4px solid #9ba3ad; }
.slipfit-tray-builder .product-card { display:grid; grid-template-columns:64px minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"thumb title" "thumb meta"; column-gap:10px; align-items:start; }
.slipfit-tray-builder .product-card .product-thumb { grid-area:thumb; width:64px; height:64px; margin:0; border-radius:8px; border:1px solid #d9dee6; background:#f3f6f9; object-fit:cover; }
.slipfit-tray-builder .product-card img.product-thumb,.slipfit-tray-builder .accessory-card img { filter:brightness(.9) contrast(1.1) saturate(1.03); }
.slipfit-tray-builder .product-card .product-thumb-empty { display:grid; place-items:center; color:#997d46; font-size:.72rem; font-weight:850; }
.slipfit-tray-builder .product-card em { padding:3px 6px; border-radius:6px; background:rgba(255,255,255,.94); box-shadow:0 1px 4px rgba(29,45,68,.16); }
.slipfit-tray-builder .product-card strong { grid-area:title; min-width:0; }
.slipfit-tray-builder .product-card .product-meta { grid-area:meta; min-width:0; }
.slipfit-tray-builder .catalog-group-title { grid-column:1 / -1; display:flex; align-items:center; gap:12px; margin:14px 0 1px; color:#1D2D44; font-size:1rem; }
.slipfit-tray-builder .catalog-group-title:first-child { margin-top:2px; }
.slipfit-tray-builder .catalog-group-title::after { content:""; height:1px; flex:1; background:#d9dee6; }
.slipfit-tray-builder .catalog-group-title.height-15 strong::before,.slipfit-tray-builder .catalog-group-title.height-30 strong::before,.slipfit-tray-builder .catalog-group-title.height-45 strong::before,.slipfit-tray-builder .catalog-group-title.height-60 strong::before { content:""; display:inline-block; width:11px; height:11px; margin-right:7px; border-radius:3px; vertical-align:-1px; }
.slipfit-tray-builder .catalog-group-title.height-15 strong::before,.slipfit-tray-builder .catalog-group-title.height-30 strong::before { background:#e5e7ea; border:1px solid #9ba3ad; }
.slipfit-tray-builder .catalog-group-title.height-45 strong::before { background:#dce7f2; border:1px solid #9bb1c8; }
.slipfit-tray-builder .catalog-group-title.height-60 strong::before { background:#eadab7; border:1px solid #b3914f; }

@media (max-width: 520px) {
  .slipfit-tray-builder .tray { width: min(100%, calc(var(--cols) * 92px)); }
  .slipfit-tray-builder .gridlines,.slipfit-tray-builder .pieces { inset: 7px; gap: 3px; }
  .slipfit-tray-builder .piece-controls { flex-wrap: wrap; }
  .slipfit-tray-builder .piece-controls span { flex-basis: 100%; }
  .slipfit-tray-builder .riser-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .slipfit-tray-builder .long-riser-controls { grid-template-columns:1fr 1fr; }
  .slipfit-tray-builder .long-riser-controls button { grid-column:1/-1; }
  .slipfit-tray-builder .product-card { grid-template-columns:1fr; grid-template-rows:auto auto auto; grid-template-areas:"thumb" "title" "meta"; gap:7px; }
  .slipfit-tray-builder .product-card .product-thumb { width:100%; height:88px; }
}


/* WordPress integration */
.slipfit-tray-builder { width:100%; max-width:1180px; margin:0 auto; color:var(--ink); font-family:Inter,"Source Sans 3",system-ui,sans-serif; font-size:16px; line-height:1.4; }
.slipfit-tray-builder .slipfit-tray-builder__inner { width:100%; padding:10px 0 48px; }
.slipfit-tray-builder .builder-intro { max-width:720px; margin-bottom:24px; }
.slipfit-tray-builder .builder-intro p { margin:0; color:var(--muted); line-height:1.6; }
.slipfit-tray-builder button,.slipfit-tray-builder input,.slipfit-tray-builder select { font-family:inherit; }
.slipfit-tray-builder model-viewer { --poster-color:transparent; }
@media(max-width:520px){.slipfit-tray-builder .slipfit-tray-builder__inner{padding:6px 0 36px}}

/* Builder-to-cart next-step prompt */
.slipfit-cart-choice{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 24px;padding:20px 22px;border:1px solid #d7c28f;border-left:5px solid #C8A96B;border-radius:12px;background:#fffaf0;color:#172234}
.slipfit-cart-choice h2{margin:0;color:#1D2D44;font-size:clamp(1.2rem,2.5vw,1.65rem);line-height:1.2}
.slipfit-cart-choice p{margin:6px 0 0;color:#687386;font-size:.95rem}
.slipfit-cart-choice__actions{display:flex;gap:10px;flex:0 0 auto}
.slipfit-cart-choice__actions .button{white-space:nowrap}
@media(max-width:650px){.slipfit-cart-choice{align-items:stretch;flex-direction:column}.slipfit-cart-choice__actions{display:grid;grid-template-columns:1fr}.slipfit-cart-choice__actions .button{text-align:center}}

/* Compact, consistent insert and riser selectors */
.slipfit-tray-builder .catalog-grid{display:block}
.slipfit-tray-builder .catalog-grid-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:11px;padding:0 0 12px}
.slipfit-tray-builder .catalog-group{border-top:1px solid #e1e5eb}
.slipfit-tray-builder .catalog-group:last-child{border-bottom:1px solid #e1e5eb}
.slipfit-tray-builder .catalog-group-title{display:flex;align-items:center;gap:10px;margin:0;padding:12px 2px;color:#1D2D44;font-size:1rem;cursor:pointer;list-style:none}
.slipfit-tray-builder .catalog-group-title::-webkit-details-marker{display:none}
.slipfit-tray-builder .catalog-group-title::before{content:"+";width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px;border-radius:50%;background:#edf1f6;color:#1D2D44;font-weight:900}
.slipfit-tray-builder .catalog-group[open]>.catalog-group-title::before{content:"−"}
.slipfit-tray-builder .catalog-group-title>span{margin-left:auto;color:#687386;font-size:.7rem;font-weight:650}
.slipfit-tray-builder .catalog-group-title::after{display:none}
.slipfit-tray-builder .riser-controls{padding:10px 0 2px;border-top:0}
.slipfit-tray-builder .builder-disclosure{margin-top:9px;border-top:1px solid #e2e6ec}
.slipfit-tray-builder .builder-disclosure>summary{display:flex;align-items:center;gap:10px;padding:11px 2px 8px;cursor:pointer;list-style:none}
.slipfit-tray-builder .builder-disclosure>summary::-webkit-details-marker{display:none}
.slipfit-tray-builder .builder-disclosure>summary::before{content:"+";width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px;border-radius:50%;background:#e9edf3;color:#1D2D44;font-weight:900}
.slipfit-tray-builder .builder-disclosure[open]>summary::before{content:"−"}
.slipfit-tray-builder .builder-disclosure>summary b,.slipfit-tray-builder .builder-disclosure>summary small{display:block}
.slipfit-tray-builder .builder-disclosure>summary b{color:#1D2D44;font-size:.85rem}
.slipfit-tray-builder .builder-disclosure>summary small{margin-top:2px;color:#687386;font-size:.71rem}
.slipfit-tray-builder .remove-riser{grid-column:1/-1;background:#fff;color:#8b351e;border-color:#bd7864}
.slipfit-tray-builder .long-riser-controls{display:block;margin-top:0;padding:10px 0 2px}
.slipfit-tray-builder .riser-choice-label{margin:0 0 6px;color:#687386;font-size:.73rem;font-weight:750}
.slipfit-tray-builder .riser-choice-label:not(:first-child){margin-top:11px}
.slipfit-tray-builder .riser-choice-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.slipfit-tray-builder .place-long-riser{width:100%;margin-top:11px;border:0;border-radius:7px;background:#1D2D44;color:#fff;padding:10px 11px;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}

/* Live tray that follows the customer down the builder */
.slipfit-tray-builder .floating-tray-preview{position:fixed;right:18px;bottom:18px;z-index:20;width:min(290px,calc(100vw - 28px));padding:12px;border:1px solid #c7d0dc;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 16px 42px rgba(20,34,52,.28);opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transition:opacity .2s,transform .2s,visibility .2s;backdrop-filter:blur(8px)}
.slipfit-tray-builder .floating-tray-preview.is-visible{opacity:1;visibility:visible;transform:none}
.slipfit-tray-builder .floating-tray-preview__heading{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;color:#1D2D44;font-size:.66rem;letter-spacing:.08em}
.slipfit-tray-builder .floating-tray-preview__heading span{color:#687386;letter-spacing:0}
.slipfit-tray-builder .floating-tray-preview .tray{width:100%;border-width:6px;box-shadow:none}
.slipfit-tray-builder .floating-tray-preview .gridlines,.slipfit-tray-builder .floating-tray-preview .long-riser-layer,.slipfit-tray-builder .floating-tray-preview .pieces{inset:6px;gap:2px}
.slipfit-tray-builder .floating-tray-preview .placed{padding:2px;font-size:.45rem;cursor:pointer}
.slipfit-tray-builder .floating-tray-preview .height-badge,.slipfit-tray-builder .floating-tray-preview .riser-flag,.slipfit-tray-builder .floating-tray-preview .accessory-flag{font-size:.4rem;padding:1px 2px}
.slipfit-tray-builder .notice{z-index:25}
@media(max-width:850px){.slipfit-tray-builder .catalog-grid{display:block}.slipfit-tray-builder .catalog-grid-inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.slipfit-tray-builder .floating-tray-preview{right:8px;bottom:8px;width:180px;padding:8px}.slipfit-tray-builder .floating-tray-preview__heading span{display:none}.slipfit-tray-builder .floating-tray-preview .placed{font-size:.36rem}.slipfit-tray-builder .floating-tray-preview .height-badge,.slipfit-tray-builder .floating-tray-preview .accessory-flag{display:none}}
@media(max-width:520px){.slipfit-tray-builder .catalog-grid{display:block}.slipfit-tray-builder .catalog-grid-inner{grid-template-columns:1fr 1fr}.slipfit-tray-builder .riser-choice-row{grid-template-columns:repeat(2,minmax(0,1fr))}}