/* OBX Wrap Color Studio — themed via CSS custom properties set by the host page */
.st{--_fg:var(--st-fg,#f2efe9);--_dim:var(--st-dim,#a19c93);--_line:var(--st-line,rgba(255,255,255,.12));--_panel:var(--st-panel,#141415);--_stage:var(--st-stage,#0d0d0e);--_accent:var(--st-accent,#c8a96a);--_accent-fg:var(--st-accent-fg,#111);--_radius:var(--st-radius,6px);--_font:var(--st-font,inherit);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr);border:1px solid var(--_line);border-radius:calc(var(--_radius) + 6px);overflow:hidden;background:var(--_panel);color:var(--_fg);font-family:var(--_font)}
.st-stage{position:relative;background:radial-gradient(60% 50% at 50% 100%,rgba(255,255,255,.06),transparent 70%),var(--_stage);padding:clamp(24px,5vw,56px) clamp(16px,4vw,48px) clamp(16px,3vw,36px);display:flex;flex-direction:column;justify-content:center;min-height:360px}
.st-stage svg{width:100%;height:auto;max-width:680px;margin:0 auto;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.st-floor{height:1px;background:linear-gradient(90deg,transparent,var(--_line) 20%,var(--_line) 80%,transparent);margin-top:-6px}
.st-readout{position:absolute;left:clamp(16px,4vw,48px);top:clamp(16px,3vw,28px);display:flex;flex-direction:column;gap:2px}
.st-readout .st-color{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.01em}
.st-readout .st-finish{font-size:14px;color:var(--_dim)}
.st-panel{padding:clamp(22px,3vw,36px);display:grid;gap:22px;align-content:start;border-left:1px solid var(--_line)}
.st-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--_dim);margin-bottom:10px}
.st-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.st-swatch{aspect-ratio:1;border-radius:50%;border:2px solid transparent;outline:2px solid transparent;outline-offset:3px;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),outline-color .2s;box-shadow:inset 0 -6px 12px rgba(0,0,0,.25),inset 0 4px 8px rgba(255,255,255,.18)}
.st-swatch:hover{transform:scale(1.08)}
.st-swatch.active{outline-color:var(--_fg);transform:scale(1.08)}
.st-swatch:focus-visible{outline-color:var(--_accent)}
.st-chips{display:flex;flex-wrap:wrap;gap:8px}
.st-chip{font:inherit;font-size:14px;padding:9px 14px;border-radius:999px;border:1px solid var(--_line);background:transparent;color:var(--_fg);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.st-chip:hover{border-color:var(--_fg)}
.st-chip.active{background:var(--_fg);color:var(--_panel);border-color:var(--_fg)}
.st-chip:focus-visible{outline:2px solid var(--_accent);outline-offset:2px}
.st-est{border-top:1px solid var(--_line);padding-top:18px}
.st-est-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--_dim)}
.st-price{font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.02em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.st-note{font-size:13px;color:var(--_dim);max-width:34ch}
.st-quote{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 22px;border-radius:var(--_radius);background:var(--_accent);color:var(--_accent-fg);text-decoration:none;font-weight:600;font-size:15px;transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .2s}
.st-quote:hover{transform:translateY(-2px);filter:brightness(1.05)}
.st-quote:focus-visible{outline:2px solid var(--_fg);outline-offset:3px}
.st-presets{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;padding:16px clamp(16px,3vw,36px) 20px;border-top:1px solid var(--_line);background:var(--_stage)}
.st-presets .st-preset-label{width:100%;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--_dim);margin-bottom:4px}
.st-preset{font:inherit;font-size:13px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:999px;border:1px solid var(--_line);background:transparent;color:var(--_fg);cursor:pointer;transition:border-color .2s,transform .2s}
.st-preset i{width:18px;height:18px;border-radius:50%;display:inline-block;box-shadow:inset 0 -3px 6px rgba(0,0,0,.3)}
.st-preset:hover{border-color:var(--_fg);transform:translateY(-1px)}
@media (max-width:900px){.st{grid-template-columns:1fr}.st-panel{border-left:0;border-top:1px solid var(--_line)}.st-stage{min-height:0;padding-top:64px}.st-swatches{grid-template-columns:repeat(6,1fr)}}