/* Greetd editor — Greetd brand skin.
   Loaded AFTER style.css. Delete this file and the editor reverts to its own look.

   Tokens taken from the theme's settings_data.json so the editor matches the shop:
     type     Raleway (body), Besley italic (headings)
     colour   foreground #3D3D3D, linen #F0EAE1, sage #BECABF, yellow #FFF9AE
     shape    6px on controls, 1px hairline borders
*/

:root{
  --ink:#3D3D3D;        /* buttons, tool rail, headings */
  --accent:#764A4A;     /* eyebrow labels */
  --page:#F0EAE1;       /* behind the card */
  --white:#FFFFFF;      /* working surfaces */
  --line:#E3DBD0;
  --muted:#7A736B;
  --text:#3D3D3D;
  --sky:#E5DFD4;        /* selected states on light surfaces */
}

/* the site header already carries the brand, so drop it from the editor bar */
#topbar .brand{display:none}

/* ---- type ---- */
body, button, input, select { font-family:'Raleway', system-ui, sans-serif; font-weight:400 }
h4, .phead h3 { font-family:'Besley', Georgia, serif; font-style:italic; font-weight:400 }
h4 { font-size:19px; margin-bottom:12px }
.eyebrow { font-weight:600; letter-spacing:.16em; color:var(--muted) }
.wordmark { font-weight:600; letter-spacing:.14em }

/* ---- controls ---- */
.btn, .qtygrid button, .qtyrow button, .shapegrid button, .emojigrid button,
.maskgrid button, .toggle button, .optlist label, .layeritem, .colourrow,
.tplitem, .slotitem, .saveitem, .basketitem, .pricebox { border-radius:6px }
select, input[type=text], input[type=number] { border-radius:6px }
.btn { font-weight:500 }
.btn.accent, .btn.primary { background:var(--ink); border-color:var(--ink); color:#FDFCFA;
  font-weight:500; padding:12px 24px }
.btn.accent:hover, .btn.primary:hover { background:#2A2A2A; border-color:#2A2A2A }
.btn.small { padding:6px 10px }
.btn.icon { padding:8px }
.btn.icon.small { padding:4px }
#orderbar .ob-total .btn { padding:13px 26px }
.qtygrid button.on, .qtyrow button.on { background:var(--ink); border-color:var(--ink); color:#FDFCFA }

/* ---- surfaces ---- */
#topbar, #stagebar, #panel { background:var(--white) }
#orderbar { background:var(--page) }
#canvaswrap { background:var(--page); background-image:none }
.side .canvas-container { box-shadow:0 16px 40px rgba(61,61,61,.20) }
.note { background:#FFF9AE; border-color:#F2E9A0; color:#4A4630 }
.optlist label.on, .layeritem.on { border-color:var(--ink); background:var(--page) }
#toast { background:var(--ink); box-shadow:0 8px 24px rgba(61,61,61,.28) }

/* ---- dark tool rail ---- */
#rail { background:var(--ink); border-right:0 }
#rail .tool { color:#EDE7DE; opacity:.85 }
#rail .tool:hover { background:rgba(255,255,255,.10); opacity:1 }
#rail .tool.active { background:rgba(255,255,255,.16); opacity:1 }
#rail .rail-sep { background:rgba(255,255,255,.22) }

/* ---- dark panel header ---- */
.phead { background:var(--ink); border-bottom:0; padding:15px 16px }
.phead h3 { color:#EDE7DE; font-size:16px }
#panelIcon { color:#EDE7DE }
#panelClose { color:#EDE7DE; background:transparent; border-color:rgba(255,255,255,.30) }
#panelClose:hover { background:rgba(255,255,255,.12) }

/* ---- price set to match the site's headings ---- */
.ob-total b, .pricebox .total b { font-family:'Besley', Georgia, serif; font-style:italic; font-weight:400 }

/* ---- stage tabs as underlines rather than pills ---- */
.tabs { background:transparent; padding:0; gap:18px }
.tabs button { border-radius:0; padding:6px 2px; background:transparent }
.tabs button.active { background:transparent; box-shadow:inset 0 -2px 0 var(--ink); color:var(--ink) }

/* ---- recolour chips as a plain list ---- */
.chip { border-radius:6px }
.chip.changed { border-color:var(--ink) }
.chip.changed .swatch { box-shadow:0 0 0 2px var(--ink) inset }

/* ---- mobile bar matches the rail ---- */
#mobilebar { background:var(--ink); border-top:0 }
#mobilebar .tool { color:#EDE7DE }
#mobilebar .tool.active { background:rgba(255,255,255,.16) }
#mobilecta { background:var(--page) }