@font-face{font-family:"MAYHM Display";src:url("fonts/display.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* MAYHM Design Studio – scoped under .mh so it will not fight your WooCommerce theme */
.mh,.mh *{box-sizing:border-box}
.mh{--bg:#e9e9eb;--panel:#fafafa;--stage:#dddbd6;--ink:#222;--mute:#6c6c6c;--line:#cfcfcf;--btn:#222;--focus:#2f5588;
  font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);padding:24px;line-height:1.4}
.mh-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;max-width:1180px;margin:0 auto;align-items:start}
.mh button,.mh input,.mh select{font:inherit;color:inherit}
.mh :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mh-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0}

/* stage */
.mh-stage{background:var(--panel);position:sticky;top:24px}
.mh-stage-box{background:radial-gradient(120% 90% at 50% 30%,#f1efea 0%,#dedbd4 60%,#d3d0c9 100%);border:1px solid #d3d1cc}
.mh-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}
.mh-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#2f6652;margin-right:8px;vertical-align:middle}
.mh-canvas{display:flex;justify-content:center;padding:4px 20px 0}
.mh-canvas svg{width:100%;max-width:340px;height:auto;max-height:470px;display:block}
.mh-canvas [data-panel]{cursor:pointer}
.mh-canvas .mh-sel{filter:drop-shadow(0 0 3px rgba(47,85,136,.95))}
.mh-seg{display:flex;justify-content:center;margin:12px 0 14px}
.mh-seg-inner{display:flex;border:1px solid #cfcdc7;background:#e6e4df}
.mh-seg button{border:0;background:transparent;padding:10px 30px;cursor:pointer;font-size:14px;color:var(--mute)}
.mh-seg button[aria-pressed=true]{background:var(--btn);color:#fff}
.mh-hint{text-align:center;font-size:12px;color:var(--mute);margin:0 0 18px}
.mh-state{border-top:1px solid #cfcdc7;padding:14px 20px}
.mh-note{font-size:12px;color:var(--mute);padding:14px 0;margin:0}
.mh-download{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;padding:16px 0;cursor:pointer;font-size:14px;text-align:left}
.mh-download span:first-child{display:flex;gap:12px;align-items:center}
.mh-download small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* controls */
.mh-controls{background:var(--panel);padding:24px 28px 28px}
.mh-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.mh-reset{background:none;border:0;cursor:pointer;font-size:13px;display:flex;gap:6px;align-items:center;color:var(--mute)}
.mh-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);margin-bottom:26px}
.mh-tab{display:block;text-align:center;padding:14px 4px;font-size:13px;color:var(--mute);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;text-decoration:none}
.mh-tab[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}
.mh h2{font-family:"MAYHM Display","Roboto Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;font-size:32px;line-height:1.1;margin:0 0 8px;letter-spacing:-.01em}
.mh-sub{font-size:13px;color:var(--mute);margin:0 0 22px}
.mh-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.mh-preset,.mh-panelbtn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 10px;border:1px solid var(--line);background:#fff0;cursor:pointer;font-size:13px}
.mh-preset[aria-pressed=true]{background:#efeeea;border-color:var(--ink)}
.mh-dot{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.25);flex:none}
.mh-panels{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:26px}
.mh-panelbtn{justify-content:flex-start;padding:12px 12px;font-size:12px;width:100%;text-align:left}
.mh-panelbtn[aria-pressed=true]{background:#efeeea;border-color:var(--ink)}
.mh-panelbtn[aria-pressed=true]::after{content:"";margin-left:auto;width:4px;height:4px;border-radius:50%;background:var(--ink)}
.mh-colorrow{display:flex;gap:18px;align-items:flex-end;margin-bottom:18px}
.mh-big{width:49px;height:49px;border:0;padding:0;cursor:pointer;position:relative;display:block;flex:none;overflow:hidden}
.mh-big input[type=color]{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);border:0;padding:0;cursor:pointer;opacity:0}
.mh-hexwrap label{display:block;font-size:11px;color:var(--mute);margin-bottom:2px}
.mh-hex{border:0;border-bottom:1px solid var(--line);background:transparent;font-family:Consolas,Menlo,monospace;font-size:14px;width:170px;padding:8px 0}
.mh-swatches{display:flex;flex-wrap:wrap;gap:8px 12px;margin-bottom:14px}
.mh-sw{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.2);cursor:pointer;padding:0}
.mh-sw[aria-pressed=true]{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--ink)}
.mh-help{font-size:12px;color:var(--mute);margin:0 0 24px}
.mh-actions{border-top:1px solid var(--line);padding-top:24px;margin-top:6px}
.mh button.mh-primary,.mh button.mh-secondary{display:block;width:100%;padding:18px;font-size:14px;cursor:pointer;text-align:center}
.mh button.mh-primary{background:var(--btn);color:#fff;border:1px solid var(--btn);font-weight:700}
.mh button.mh-secondary{background:transparent;border:1px solid var(--line);padding:14px;font-size:13px}
.mh button.mh-secondary:hover{border-color:var(--ink)}
.mh-fine{font-size:11px;color:var(--mute);margin:10px 0 16px}
.mh details{margin-top:16px;font-size:12px;color:var(--mute)}
.mh summary{cursor:pointer}
.mh pre{white-space:pre-wrap;background:#fff;border:1px solid var(--line);padding:12px;font-family:Consolas,Menlo,monospace;font-size:12px;color:var(--ink);margin:10px 0 0}

/* logo */
.mh-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:230px;border:1px dashed #9a9a9a;background:#efeeec;cursor:pointer;text-align:center;padding:20px;margin-bottom:16px}
.mh-drop.is-over{background:#e4e2dd;border-color:var(--ink)}
.mh-drop strong{font-weight:400;font-size:16px;margin-top:8px}
.mh-drop small{font-size:12px;color:var(--mute)}
.mh-drop input{position:absolute;width:1px;height:1px;opacity:0}
.mh-logo-preview{display:none;align-items:center;gap:14px;border:1px solid var(--line);padding:10px 12px;margin-bottom:16px;font-size:13px}
.mh-logo-preview.on{display:flex}
.mh-logo-preview img{width:48px;height:48px;object-fit:contain;background:repeating-conic-gradient(#e6e6e6 0 25%,#fff 0 50%) 0 0/12px 12px}
.mh-logo-preview button{margin-left:auto;background:none;border:0;text-decoration:underline;cursor:pointer;font-size:13px}
.mh-err{color:#b83a30;font-size:12px;min-height:16px;margin:-6px 0 12px}

/* initials */
.mh label.mh-lbl{display:block;font-size:14px;margin:0 0 8px}
.mh label.mh-lbl small{font-size:11px;color:var(--mute)}
.mh-text{width:100%;border:1px solid var(--line);background:#fff0;height:49px;padding:0 16px;font-size:22px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px}
.mh-select{width:100%;height:46px;border:1px solid var(--line);background:#fff0;padding:0 14px;font-size:13px;margin:8px 0 22px}
.mh-range{margin-bottom:20px}
.mh-range .row{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-bottom:6px}
.mh-range .row output{color:var(--ink)}
.mh input[type=range]{width:100%;accent-color:#222}
.mh-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}

@media (max-width:860px){.mh{padding:12px}.mh-wrap{grid-template-columns:1fr}.mh-controls{padding:20px 18px 24px}.mh h2{font-size:28px}}
@media (prefers-reduced-motion:no-preference){.mh-tab,.mh-preset,.mh-panelbtn,.mh-primary{transition:background .15s,border-color .15s}}

/* product header + purchase block */
.mh-product{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mh .mh-title{font-family:"MAYHM Display","Roboto Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;font-size:26px;line-height:1.1;margin:0;letter-spacing:-.01em}
.mh-price{font-size:20px;margin:0;white-space:nowrap}
.mh-price del{color:var(--mute);font-size:14px;margin-right:6px}
.mh-price ins{text-decoration:none}
.mh-buy{border-top:1px solid var(--line);padding-top:22px;margin-top:6px}
.mh-buy-row{margin-bottom:18px}
.mh-lbl2{display:block;font-size:12px;color:var(--mute);margin-bottom:8px}
.mh-sizes{display:flex;flex-wrap:wrap;gap:8px}
.mh-sizes button{min-width:64px;height:44px;border:1px solid var(--line);background:#fff0;cursor:pointer;font-size:13px;padding:0 14px}
.mh-sizes button:hover{border-color:var(--ink)}
.mh-sizes button[aria-pressed=true]{background:var(--btn);border-color:var(--btn);color:#fff}
.mh-buy-cta{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-bottom:12px}
.mh-qty{display:flex;align-items:center;border:1px solid var(--line);height:56px}
.mh-qty button{width:44px;height:100%;border:0;background:none;cursor:pointer;font-size:20px;line-height:1}
.mh-qty button:hover{background:#efeeea}
.mh-qty output{min-width:32px;text-align:center;font-size:15px}
.mh-buy .mh-primary{height:56px;padding:0 20px}
.mh button.mh-primary:hover{background:#000}
.mh-links{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-top:6px}
.mh button.mh-linkbtn{background:none;border:0;padding:0;cursor:pointer;font-size:12px;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.mh button.mh-linkbtn:hover{color:var(--ink)}
.mh .mh-links details{margin:0}
.mh-links pre{flex-basis:100%}
.mh-actions{border-top:0;padding-top:0;margin-top:14px}
.mh-controls{box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 48px -32px rgba(0,0,0,.25)}
.mh-tab{font-size:14px}
.mh-panelbtn:hover,.mh-preset:hover{border-color:#8d8d8d}
.mh-seg-inner{box-shadow:inset 0 0 0 1px #cfcdc7}

@media (max-width:860px){
  .mh-stage{position:static}
  .mh-buy{position:sticky;bottom:0;background:var(--panel);margin:18px -18px -24px;padding:14px 18px 18px;box-shadow:0 -10px 24px -14px rgba(0,0,0,.25);z-index:5}
  .mh-buy .mh-lbl2{display:none}
  .mh-buy-row{margin-bottom:10px}
  .mh-buy .mh-fine{display:none}
}
.mh-note{padding:16px 20px}
.mh-download{padding:16px 20px}

/* ===== THEME: Monochrome =====
   Light by default. Add data-theme="dark" to #mayhm-studio for a black site.
   Edit the tokens below to fine-tune. */
.mh{--bg:#fff;--panel:#fff;--ink:#0a0a0a;--mute:#707070;--line:#e0e0e0;--btn:#0a0a0a;--on:#fff;--focus:#0a0a0a;--stage1:#f6f6f6;--stage2:#e3e3e3;--soft:#f5f5f5;--edge:rgba(128,128,128,.55);
  background:var(--bg);padding:48px 28px}
.mh[data-theme=dark]{--bg:#0a0a0a;--panel:#0a0a0a;--ink:#f4f4f4;--mute:#9b9b9b;--line:#2b2b2b;--btn:#f4f4f4;--on:#0a0a0a;--focus:#fff;--stage1:#222;--stage2:#0e0e0e;--soft:#141414;--edge:rgba(160,160,160,.55)}
.mh-wrap{gap:72px;max-width:1240px}

/* stage */
.mh-stage{background:transparent;color:var(--ink)}
.mh-stage-box{background:radial-gradient(75% 65% at 50% 36%,var(--stage1) 0%,var(--stage2) 100%);border:0}
.mh-eyebrow{color:var(--mute);letter-spacing:.18em}
.mh-live::before{background:var(--ink)}
.mh-canvas .mh-sel{filter:drop-shadow(0 0 4px rgba(128,128,128,.9))}
.mh-state{border-top:1px solid var(--line)}
.mh-seg-inner{border:1px solid var(--ink);background:transparent;box-shadow:none}
.mh-seg button{color:var(--ink);padding:11px 34px;font-size:13px;letter-spacing:.06em}
.mh-seg button[aria-pressed=true]{background:var(--ink);color:var(--on)}
.mh-hint,.mh-note{color:var(--mute)}
.mh-note{padding:18px 0}
.mh-download{padding:18px 0;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mh-download small{color:var(--mute)}
.mh-download:hover{opacity:.65}

/* controls */
.mh-controls{background:transparent;border:0;box-shadow:none;padding:0}
.mh-head{margin-bottom:28px}
.mh-reset{color:var(--mute)}
.mh-reset:hover{color:var(--ink)}
.mh h2{font-size:46px;line-height:.98;text-transform:uppercase;letter-spacing:0;margin:0 0 12px}
.mh .mh-title{font-size:28px;text-transform:uppercase;letter-spacing:.01em}
.mh-price{font-size:18px;font-weight:400}
.mh-product{border-bottom:1px solid var(--ink);padding-bottom:20px;margin-bottom:6px}
.mh-sub,.mh-help,.mh-fine{color:var(--mute)}
.mh-tabs{border-bottom:1px solid var(--line);margin-bottom:34px}
.mh-tab{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:20px 4px 16px}
.mh-tab:hover{color:var(--ink)}
.mh-tab[aria-current=page]{color:var(--ink);border-bottom:2px solid var(--ink)}

.mh-preset,.mh-panelbtn,.mh-sizes button,.mh-qty,.mh-text,.mh-select,.mh-logo-preview{border:1px solid var(--line);background:transparent;color:var(--ink)}
.mh-preset:hover,.mh-panelbtn:hover,.mh-sizes button:hover{border-color:var(--ink)}
.mh-preset[aria-pressed=true],.mh-panelbtn[aria-pressed=true],.mh-sizes button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on)}
.mh-panelbtn[aria-pressed=true]::after{width:6px;height:6px;background:var(--on)}
.mh-dot{border:1px solid var(--edge)}
.mh-sw{border:1px solid var(--edge)}
.mh-sw[aria-pressed=true]{box-shadow:0 0 0 3px var(--panel),0 0 0 4px var(--ink)}
.mh-big{border:1px solid var(--edge)}
.mh-hex{border-bottom:1px solid var(--ink);color:var(--ink)}
.mh-hexwrap label,.mh-lbl2{color:var(--mute)}
.mh label.mh-lbl{color:var(--ink)}
.mh-text{font-size:24px}
.mh-select{background:var(--panel)}
.mh-drop{border:1px dashed var(--mute);background:var(--soft);color:var(--ink)}
.mh-drop:hover,.mh-drop.is-over{border-color:var(--ink)}
.mh-err{color:var(--ink);font-weight:700}
.mh input[type=range]{accent-color:var(--ink)}
.mh-qty button:hover{background:var(--soft)}
.mh-qty button,.mh-qty output{color:var(--ink)}

.mh-buy{border-top:1px solid var(--ink);padding-top:28px;margin-top:10px}
.mh button.mh-primary{background:var(--btn);color:var(--on);border:1px solid var(--btn);height:58px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.mh button.mh-primary:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.mh button.mh-linkbtn,.mh details summary{color:var(--ink)}
.mh pre{background:var(--soft);border:1px solid var(--line);color:var(--ink)}

@media (max-width:860px){
  .mh{padding:20px 14px}
  .mh-wrap{gap:28px}
  .mh h2{font-size:36px}
  .mh-buy{background:var(--panel);border-top:1px solid var(--ink);margin:18px -14px -20px;padding:14px;box-shadow:none}
}

/* ===== Colours step: palette cards + panel list ===== */
.mh .mh-lbl2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px}
.mh .mh-presets{gap:10px;margin-bottom:30px}
.mh .mh-preset{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;padding:16px 16px 14px;text-align:left}
.mh .mh-pname{font-size:15px;font-weight:700;letter-spacing:.02em}
.mh .mh-strip{display:flex;height:14px;border:1px solid var(--edge)}
.mh .mh-strip i{flex:1;display:block}
.mh .mh-preset[aria-pressed=true] .mh-strip{border-color:var(--on)}

.mh .mh-panels{display:block;border-top:1px solid var(--ink);margin-bottom:22px}
.mh .mh-row{display:flex;align-items:center;gap:14px;width:100%;padding:15px 6px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font-size:14px;text-align:left;cursor:pointer;transform:none;box-shadow:none}
.mh .mh-row:hover{background:var(--soft);border-color:var(--line);transform:none;box-shadow:none}
.mh .mh-row[aria-pressed=true]{background:transparent;color:var(--ink);border-color:var(--line);font-weight:700}
.mh .mh-row[aria-pressed=true]::after{content:none}
.mh .mh-row .mh-dot{width:24px;height:24px}
.mh .mh-rname{flex:1}
.mh .mh-rhex{font-family:Consolas,Menlo,monospace;font-size:12px;font-weight:400;color:var(--mute);letter-spacing:.04em}
.mh .mh-row[aria-pressed=true] .mh-dot{box-shadow:0 0 0 3px var(--panel),0 0 0 4px var(--ink)}

.mh .mh-editor{background:var(--soft);padding:22px 20px 20px;border-bottom:1px solid var(--line)}
.mh .mh-editor .mh-colorrow{margin-bottom:20px}
.mh .mh-editor .mh-big{width:56px;height:56px}
.mh .mh-editor .mh-hex{background:transparent;width:190px}
.mh .mh-editor .mh-swatches{margin:0;gap:10px 12px}
.mh .mh-editor .mh-sw{width:34px;height:34px}
.mh .mh-editor .mh-sw[aria-pressed=true]{box-shadow:0 0 0 3px var(--soft),0 0 0 4px var(--ink)}
.mh .mh-help{margin-top:16px}
@media (prefers-reduced-motion:no-preference){.mh .mh-editor{animation:mhopen .18s ease-out}}
@keyframes mhopen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.mh .mh-pickname{display:block;font-size:14px;font-weight:700;margin-bottom:4px}
.mh .mh-pickhint{display:block;font-size:12px;color:var(--mute)}
.mh .mh-colorrow{align-items:center}
.mh .mh-big{cursor:pointer}

/* real glove artwork: same height for both views */
.mh .mh-canvas svg{height:470px;width:auto;max-width:100%;max-height:none}
.mh .mh-canvas{padding-top:8px}
@media (max-width:860px){.mh .mh-canvas svg{height:min(440px,105vw)}}

/* Velcro: white / black only */
.mh .mh-editor.is-velcro .mh-big{display:none}
.mh .mh-editor.is-velcro .mh-colorrow{margin-bottom:16px}
.mh .mh-vel{width:auto;height:46px;border-radius:0;padding:0 18px 0 12px;display:inline-flex;align-items:center;gap:10px;background:transparent;font-size:13px;color:var(--ink);cursor:pointer;border:1px solid var(--line)}
.mh .mh-vel i{width:22px;height:22px;border-radius:50%;border:1px solid var(--edge);display:block}
.mh .mh-vel:hover{border-color:var(--ink)}
.mh .mh-editor .mh-vel[aria-pressed=true]{background:var(--ink);color:var(--on);border-color:var(--ink);box-shadow:none}
.mh .mh-editor.is-velcro .mh-swatches{gap:10px}
.mh .mh-editor .mh-vel{width:auto;min-width:112px;height:48px;border-radius:0;padding:0 20px 0 12px;display:inline-flex;align-items:center;gap:12px;background:transparent;border:1px solid var(--line);font-size:13px}
.mh .mh-editor .mh-vel:hover{border-color:var(--ink)}
.mh .mh-editor .mh-vel[aria-pressed=true]{background:var(--ink);color:var(--on);border-color:var(--ink);box-shadow:none}

/* logo step: preview card + placement controls */
.mh .mh-sr{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mh .mh-drop[hidden],.mh .mh-logo-controls[hidden]{display:none}
.mh .mh-logo-preview{align-items:center;gap:16px;padding:14px 16px;background:var(--soft);border:1px solid var(--line);margin-bottom:26px}
.mh .mh-logo-preview img{width:56px;height:56px;flex:none}
.mh .mh-logo-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.mh .mh-logo-name{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh .mh-replace{font-size:12px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mh .mh-replace:hover{color:var(--ink)}
.mh .mh-logo-preview button.mh-x{margin-left:auto;text-decoration:none;font-size:26px;line-height:1;color:var(--mute);background:none;border:0;cursor:pointer;padding:0 4px}
.mh .mh-logo-preview button.mh-x:hover{color:var(--ink)}