/* Shopanova Engine renderer: shared brand tokens, fonts, and the paste toolbar. */
@font-face{font-family:'Articulat CF';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/ArticulatCF-Regular.otf') format('opentype'),url('/fonts/ArticulatCF-Regular.ttf') format('truetype')}
@font-face{font-family:'Articulat CF';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/ArticulatCF-Medium.otf') format('opentype'),url('/fonts/ArticulatCF-Medium.ttf') format('truetype')}
@font-face{font-family:'Articulat CF';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/ArticulatCF-DemiBold.otf') format('opentype'),url('/fonts/ArticulatCF-DemiBold.ttf') format('truetype')}
@font-face{font-family:'Articulat CF';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/ArticulatCF-Bold.otf') format('opentype'),url('/fonts/ArticulatCF-Bold.ttf') format('truetype')}
@font-face{font-family:'Articulat CF';font-weight:900;font-style:normal;font-display:swap;src:url('/fonts/ArticulatCF-Heavy.otf') format('opentype'),url('/fonts/ArticulatCF-Heavy.ttf') format('truetype')}

:root{
  --cream:#F8F4F0;
  --forest:#525B46;
  --forest-dark:#3D4435;
  --sage:#7B897C;
  --sage-light:#C9CBC3;
  --near-black:#1B231B;
  --white:#FFFFFF;
  --pale:#EFEBE4;
  --border:rgba(82,91,70,.12);
  --font-head:'Articulat CF','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cream);color:var(--near-black);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased}
.eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--forest)}

/* ── Toolbar (paste JSON) ─────────────────────────────────────────── */
.tb{background:var(--near-black);color:#fff;padding:18px 28px;display:flex;flex-direction:column;gap:12px}
.tb-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tb-brand{display:flex;align-items:center;gap:10px}
.tb-brand img{height:13px;filter:brightness(0) invert(1);opacity:.9}
.tb-brand span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sage-light);font-weight:600}
.tb-title{font-family:var(--font-head);font-size:15px;font-weight:600;flex:1}
.tb a{color:var(--sage-light);font-size:12px;text-decoration:none;letter-spacing:.3px}
.tb a:hover{color:#fff}
.tb textarea{width:100%;min-height:120px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;resize:vertical;outline:none}
.tb textarea:focus{border-color:var(--sage)}
.tb-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.6px;padding:10px 18px;border-radius:6px;border:1.5px solid transparent;cursor:pointer;transition:background .15s}
.btn-primary{background:var(--forest);color:#fff}.btn-primary:hover{background:var(--forest-dark)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}.btn-ghost:hover{border-color:#fff}
.tb-err{font-size:12px;color:#E8D9B5;display:none}
.tb-err.show{display:block}
.tb.collapsed textarea,.tb.collapsed .tb-err{display:none}
.tb-float{position:fixed;right:20px;bottom:20px;display:none;gap:8px;z-index:50}
.tb-float.show{display:flex}
.tb-float .btn{box-shadow:0 4px 18px rgba(0,0,0,.18)}
#doc:empty::before{content:'Paste JSON above and click Render.';display:block;padding:80px 28px;text-align:center;color:var(--sage);font-size:14px}

@media print{
  .tb,.tb-float{display:none !important}
  html,body{background:#fff}
}