/* ============================================================
   markenhub theme for the design editor and the product page.
   Colours and shapes only - edit the tokens to restyle everything.
   ============================================================ */
:root{
  --mh-ink:#18211d;      /* dark green-black (brand) */
  --mh-acc:#c2410c;      /* orange accent */
  --mh-sand:#e2c9a6;     /* star beige */
  --mh-cream:#f7f3ec;    /* soft background */
  --mh-line:#e5dfd3;     /* borders */
  --mh-mut:#5f665f;      /* secondary text */
  --mh-ok:#1f7a4a;
  --mh-radius:14px;
}

/* ---------- product page: "Dein Design" box ---------- */
.cl-wrap{font-family:'Figtree',inherit}
.cl-choice-h{font-size:14px!important;font-weight:700!important;color:var(--mh-ink);margin:10px 0 8px!important;letter-spacing:.1px}
.cl-choice{gap:10px!important}
.cl-opt{position:relative;border:1.5px solid var(--mh-line)!important;border-radius:var(--mh-radius)!important;
  padding:13px 14px 13px 42px!important;background:#fff!important;color:var(--mh-ink)!important;
  box-shadow:0 1px 2px rgba(24,33,29,.05);transition:border-color .18s,background-color .18s,box-shadow .18s,transform .18s!important}
.cl-opt::before{content:"";position:absolute;left:14px;top:15px;width:18px;height:18px;border-radius:50%;
  border:2px solid #b9b3a6;background:#fff;transition:.18s}
.cl-opt:hover{border-color:var(--mh-ink)!important;box-shadow:0 6px 16px rgba(24,33,29,.08);transform:translateY(-1px)}
.cl-opt.cl-on{border-color:var(--mh-ink)!important;background:var(--mh-cream)!important;color:var(--mh-ink)!important;
  box-shadow:0 0 0 3px rgba(24,33,29,.08)}
.cl-opt.cl-on::before{border-color:var(--mh-ink);background:var(--mh-ink);box-shadow:inset 0 0 0 4px #fff}
.cl-opt b,.cl-opt strong{font-weight:700}
.cl-choice-msg{font-size:12.5px!important;font-weight:600}

.cl-ed-open-btn{background:var(--mh-ink)!important;border-radius:999px!important;padding:15px 20px!important;
  font-size:15px!important;font-weight:700!important;letter-spacing:.2px;box-shadow:0 10px 22px rgba(24,33,29,.18);
  transition:background-color .18s,transform .18s,box-shadow .18s!important}
.cl-ed-open-btn:hover{background:var(--mh-acc)!important;transform:translateY(-1px);box-shadow:0 12px 26px rgba(194,65,12,.25)}
.cl-ed-open-btn:active{transform:translateY(0) scale(.98)}
.cl-ed-pill{background:rgba(24,33,29,.92)!important;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15)!important;
  font-weight:700!important;padding:12px 22px!important;transition:background-color .18s,transform .18s!important}
.cl-ed-pill:hover{background:var(--mh-acc)!important;transform:translateX(-50%) translateY(-1px)!important}

.cl-drop{border:1.5px dashed var(--mh-sand)!important;border-radius:16px!important;background:var(--mh-cream)!important;
  padding:24px 16px!important}
.cl-drop:hover,.cl-drop.cl-over{border-color:var(--mh-ink)!important;background:#fff!important}
.cl-drop .cl-t{font-weight:700;color:var(--mh-ink)}
.cl-drop .cl-s{color:var(--mh-mut)}

/* ---------- editor ---------- */
.cl-ed{--line:var(--mh-line);--soft:var(--mh-cream);--mut:var(--mh-mut);--ink:var(--mh-ink);--acc:var(--mh-acc);
  font-family:'Figtree',inherit!important}
.cl-ed-head{height:64px!important;padding:0 18px!important;box-shadow:0 1px 0 var(--mh-line),0 4px 14px rgba(24,33,29,.04)}
.cl-ed-title{font-weight:700}

/* left menu */
.cl-ed-rail{padding:10px 8px!important;gap:4px!important;background:#fff}
.cl-rail-b{border:0!important;border-radius:12px!important;padding:10px 4px!important;margin:0;font-size:11.5px!important;
  color:var(--mh-mut)!important}
.cl-rail-b:hover{background:var(--mh-cream)!important;color:var(--mh-ink)!important}
.cl-rail-b.on{background:var(--mh-ink)!important;color:#fff!important}
.cl-rail-b.on svg{stroke:#fff}

/* buttons */
.cl-btn{border-radius:999px!important;height:42px!important;padding:0 18px!important;border:1.5px solid var(--mh-line)!important;
  font-weight:700!important}
.cl-btn:hover{border-color:var(--mh-ink)!important}
.cl-btn.pri{background:var(--mh-ink)!important;border-color:var(--mh-ink)!important;color:#fff!important}
.cl-btn.pri:hover{background:var(--mh-acc)!important;border-color:var(--mh-acc)!important}
.cl-ib{border-radius:10px!important}

/* panels and tiles */
.cl-ed-panel{padding-top:18px}
.cl-gsec{background:var(--mh-cream)!important;border-radius:16px!important;padding:12px!important}
.cl-gh b{font-size:13.5px;color:var(--mh-ink)}
.cl-gh button{color:var(--mh-acc)!important;font-weight:700}
.cl-tile,.cl-tpre{border:1.5px solid transparent!important;border-radius:14px!important;background:#fff!important;
  box-shadow:0 1px 2px rgba(24,33,29,.06)}
.cl-tile:hover,.cl-tpre:hover{border-color:var(--mh-ink)!important;box-shadow:0 8px 18px rgba(24,33,29,.10);transform:translateY(-1px)}
.cl-cat{border:1.5px solid var(--mh-line)!important;padding:7px 14px!important;font-weight:700!important}
.cl-cat.on,.cl-cat:hover{background:var(--mh-ink)!important;border-color:var(--mh-ink)!important;color:#fff!important}
.cl-big{border:1.5px dashed var(--mh-sand)!important;background:var(--mh-cream)!important;border-radius:16px!important}
.cl-big:hover{border-color:var(--mh-ink)!important;background:#fff!important}

/* front / back switch */
.cl-views{border-radius:18px!important;box-shadow:0 10px 28px rgba(24,33,29,.14)!important}
.cl-view{border-radius:12px!important;border-width:2px!important}
.cl-view.on{border-color:var(--mh-ink)!important}
.cl-view i{background:var(--mh-ok)!important}

@media (prefers-reduced-motion:reduce){
  .cl-opt,.cl-ed-open-btn,.cl-tile,.cl-ed-pill{transition:none!important}
  .cl-opt:hover,.cl-ed-open-btn:hover,.cl-tile:hover{transform:none!important}
}

/* ---------- 1.3.0: design library in "Grafiken" ---------- */
.cl-mh-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 14px}
.cl-mh-chip{border:1.5px solid var(--mh-line);background:#fff;color:var(--mh-ink);border-radius:999px;
  padding:6px 12px;font-size:12.5px;font-weight:700;line-height:1.2;cursor:pointer;transition:border-color .15s,background-color .15s}
.cl-mh-chip span{color:var(--mh-mut);font-weight:600;margin-left:2px}
.cl-mh-chip:hover{border-color:var(--mh-ink)}
.cl-mh-chip.season{background:var(--mh-ink);border-color:var(--mh-ink);color:#fff}
.cl-mh-chip.season span{color:var(--mh-sand)}
.cl-mh-chip:focus-visible{outline:2px solid var(--mh-acc);outline-offset:2px}
.cl-tile.gfx{position:relative}
.cl-mh-new{position:absolute;top:4px;left:4px;background:var(--mh-acc);color:#fff;border-radius:999px;
  font-size:9.5px;font-weight:800;letter-spacing:.3px;padding:2px 6px;line-height:1.2;pointer-events:none;text-transform:uppercase}