/* v0.2.1 — ensure inactive render modules stay hidden.
   Author CSS display:flex can otherwise override the browser's hidden attribute. */
.sdcmb [hidden]{display:none!important;}
.sdcmb [data-render][hidden]{display:none!important;}

.sdcmb{--navy:#0c1735;--orange:#ff7a00;--line:#dfe5ec;--muted:#667085;width:min(96vw,1500px);margin:26px auto 52px;font-family:Inter,Arial,sans-serif;color:#151b26}
.sdcmb *{box-sizing:border-box}.sdcmb button,.sdcmb input,.sdcmb select{font:inherit}
.sdcmb-top{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.sdcmb-eyebrow{font-size:11px;font-weight:900;color:var(--orange);letter-spacing:.8px}.sdcmb-top h2{font-size:32px;line-height:1.05;margin:5px 0 7px;color:var(--navy);letter-spacing:-1px}.sdcmb-top p{margin:0;color:var(--muted)}.sdcmb-mini-note{font-size:11px;color:#7a8391;text-align:right;max-width:260px}
.sdcmb-typebar{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}.sdcmb-typebar button{border:1px solid var(--line);border-radius:10px;background:#fff;padding:13px 15px;text-align:left;cursor:pointer;transition:.18s}.sdcmb-typebar button:hover{border-color:#9eb9ff;transform:translateY(-1px)}.sdcmb-typebar button.active{background:#0e1c3c;color:#fff;border-color:#0e1c3c;box-shadow:0 7px 20px rgba(14,28,60,.16)}.sdcmb-typebar b{display:block;font-size:14px}.sdcmb-typebar span{display:block;font-size:10px;opacity:.68;margin-top:3px}
.sdcmb-layout{display:grid;grid-template-columns:330px 1fr;gap:14px;align-items:start}.sdcmb-controls{background:#f7f9fb;border:1px solid var(--line);border-radius:12px;padding:14px;max-height:none}.sdcmb-controls section{background:#fff;border:1px solid #e8ecf1;border-radius:9px;padding:12px;margin-bottom:10px}.sdcmb-controls section:last-child{margin-bottom:0}.sdcmb-controls h3{font-size:12px;text-transform:uppercase;letter-spacing:.55px;color:#344057;margin:0 0 10px}.sdcmb-controls label{display:block;font-size:11px;font-weight:750;color:#475467;margin:8px 0}.sdcmb-controls input[type=text],.sdcmb-controls select{display:block;width:100%;height:38px;border:1px solid #cfd7e2;border-radius:6px;margin-top:5px;padding:0 9px;background:#fff;color:#111827}.sdcmb-controls input[type=color]{display:block;width:100%;height:36px;border:1px solid #cfd7e2;border-radius:6px;padding:3px;margin-top:5px;background:#fff}.sdcmb-controls input[type=range]{width:100%;margin-top:8px}.sdcmb-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sdcmb-bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.sdcmb-bg-grid button{border:1px solid #d5dce5;border-radius:7px;background:#fff;padding:5px;text-align:left;font-size:10px;color:#354052;cursor:pointer}.sdcmb-bg-grid button.active{border:2px solid #1f66e5;padding:4px}.bg-thumb{display:block;height:46px;border-radius:4px;margin-bottom:5px;background-size:cover;background-position:center}.bg-thumb.brick{background-image:url("../images/brick.jpg")}.bg-thumb.concrete{background-image:url("../images/concrete.jpg")}.bg-thumb.black-acm{background-image:url("../images/black-acm.jpg")}.bg-thumb.light-panel{background-image:url("../images/light-panel.jpg")}
.sdcmb-upload-label{border:1px dashed #c8d0db;border-radius:7px;padding:8px!important;margin-top:10px!important}.sdcmb-upload-label input{display:block;margin-top:6px;font-size:10px;width:100%}.sdcmb-secondary{width:100%;border:1px solid #cad3df;background:#fff;color:#334155;border-radius:6px;padding:7px 8px;font-size:10px;cursor:pointer}.sdcmb-view-toggle{display:grid;grid-template-columns:1fr 1fr;border:1px solid #ccd5e1;border-radius:7px;overflow:hidden}.sdcmb-view-toggle button{height:35px;border:0;background:#fff;color:#455266;cursor:pointer;font-weight:800}.sdcmb-view-toggle button.active{background:#0e1c3c;color:#fff}
.sdcmb-stage-wrap{min-width:0}.sdcmb-stage{position:relative;min-height:640px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:filter .25s,background .25s}.sdcmb-stage.bg-brick{background-image:url("../images/brick.jpg");background-size:720px auto;background-repeat:repeat;background-position:center}.sdcmb-stage.bg-concrete{background-image:url("../images/concrete.jpg")}.sdcmb-stage.bg-black-acm{background-image:url("../images/black-acm.jpg")}.sdcmb-stage.bg-light-panel{background-image:url("../images/light-panel.jpg")}
.sdcmb-vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 38%,rgba(0,0,0,.14) 100%);pointer-events:none}
[data-render]{position:relative;z-index:2;width:88%;display:flex;align-items:center;justify-content:center}
.sdcmb-sign{position:relative;display:inline-block;white-space:nowrap;font-weight:900;line-height:1;letter-spacing:.4px;max-width:100%;transform:perspective(800px) rotateX(1deg)}.sdcmb-sign span{display:block}.sdcmb-sign .rear{position:absolute;inset:0;z-index:1;transform:translate(8px,9px);color:#262a31;text-shadow:1px 1px 0 #16191e,2px 2px 0 #16191e,3px 3px 0 #121418,4px 4px 0 #121418,5px 5px 0 #0e1013}.sdcmb-sign .face{position:relative;z-index:3;color:#fff}
.channel-front .face{text-shadow:0 0 4px currentColor,0 0 13px currentColor,0 0 25px rgba(255,255,255,.8)}
.channel-halo:before,.channel-front-halo:before,.channel-gold:before,.channel-chrome:before{content:"";position:absolute;z-index:0;inset:-16% -7%;border-radius:25px;background:var(--halo,#fff2d6);filter:blur(var(--halo-blur,18px));opacity:var(--halo-opacity,.7)}.channel-front-halo .face{text-shadow:0 0 4px currentColor,0 0 13px currentColor}.channel-gold .face,.three-d.gold .face{background:linear-gradient(90deg,#5f4310 0%,#c99a35 10%,#fff0a5 21%,#8d661d 34%,#f6db83 48%,#7d5b18 62%,#e4bd55 80%,#6a4c13 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.15)}.channel-gold .rear{color:#6d5324}.channel-chrome .face,.three-d.chrome .face{background:linear-gradient(180deg,#4d545b 0%,#fafcff 17%,#7c858e 32%,#ffffff 48%,#60686f 63%,#e9edf0 80%,#555c62 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.channel-chrome .rear{color:#50565c}
.sdcmb-3d-render .three-d .face{text-shadow:0 2px 2px rgba(0,0,0,.18)}.three-d.black .face{color:#090a0b!important}.three-d.black .rear{color:#23262b}.three-d.paint .rear{color:#30343a}
.sdcmb-lightbox{position:relative;width:min(75%,760px);aspect-ratio:3/1;background:#181b1f;border-radius:8px;padding:14px;box-shadow:14px 18px 24px rgba(0,0,0,.28),inset 0 0 0 2px rgba(255,255,255,.14)}.sdcmb-lightbox:after{content:"";position:absolute;left:10px;right:-16px;bottom:-16px;height:16px;background:#08090a;transform:skewX(-45deg);transform-origin:left top;opacity:.75}.sdcmb-lb-face{height:100%;border-radius:3px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 18px rgba(255,255,255,.95),0 0 28px rgba(255,255,255,.34);font-weight:900;font-size:50px;padding:18px;text-align:center}.sdcmb-lb-face img{max-width:92%;max-height:86%;object-fit:contain}.sdcmb-lb-face span{max-width:95%;overflow:hidden;text-overflow:ellipsis}
.sdcmb-neon-render{position:relative}.sdcmb-neon{position:relative;z-index:3;font-size:72px;font-family:cursive;font-weight:500;color:#ff3f8e;-webkit-text-stroke:2px currentColor;text-shadow:0 0 4px currentColor,0 0 10px currentColor,0 0 20px currentColor,0 0 38px currentColor;white-space:nowrap}.sdcmb-neon-backing{position:absolute;z-index:1;inset:-18px -28px;border:1px solid rgba(255,255,255,.42);border-radius:10px;background:rgba(255,255,255,.06);backdrop-filter:blur(1px)}
.sdcmb-stage-meta{position:absolute;z-index:5;left:18px;right:18px;bottom:14px;display:flex;justify-content:space-between;color:rgba(255,255,255,.9);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.sdcmb-bottom{margin-top:10px;background:#0e1c3c;color:#fff;border-radius:10px;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px}.sdcmb-bottom strong{display:block;font-size:15px}.sdcmb-bottom span{display:block;font-size:11px;opacity:.72;margin-top:3px}.sdcmb-bottom button{border:0;background:var(--orange);color:#fff;border-radius:7px;padding:12px 16px;font-weight:900;cursor:pointer}
@media(max-width:1050px){.sdcmb-layout{grid-template-columns:280px 1fr}.sdcmb-stage{min-height:560px}.sdcmb-typebar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.sdcmb-top{display:block}.sdcmb-mini-note{text-align:left;margin-top:8px}.sdcmb-layout{grid-template-columns:1fr}.sdcmb-controls{order:2}.sdcmb-stage-wrap{order:1}.sdcmb-stage{min-height:430px}.sdcmb-typebar{grid-template-columns:1fr 1fr}.sdcmb-neon{font-size:44px}.sdcmb-lb-face{font-size:30px}.sdcmb-bottom{flex-direction:column;align-items:flex-start}.sdcmb-bottom button{width:100%}}


/* === v0.3.0 refinement pass === */
.sdcmb [hidden],
.sdcmb [data-render][hidden],
.sdcmb [data-panel][hidden]{display:none!important}

/* Keep every renderer perfectly centered inside the stage. */
.sdcmb [data-render]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8% 7%;
}
.sdcmb-sign{
  display:inline-block;
  max-width:86%;
  text-align:center;
  transform-origin:center center;
}
.sdcmb-sign .face,
.sdcmb-sign .rear{
  white-space:nowrap;
  transform-origin:center center;
}

/* More dimensional, fabricated feel. */
.sdcmb-sign .rear{
  text-shadow:
    1px 1px 0 rgba(0,0,0,.92),
    2px 2px 0 rgba(0,0,0,.88),
    3px 3px 0 rgba(0,0,0,.82),
    4px 4px 0 rgba(0,0,0,.78),
    5px 5px 0 rgba(0,0,0,.72),
    7px 8px 10px rgba(0,0,0,.35);
}
.channel-halo:before,.channel-front-halo:before,.channel-gold:before,.channel-chrome:before{
  inset:-13% -5%;
  filter:blur(var(--halo-blur,18px));
  box-shadow:0 0 22px var(--halo,#fff2d6);
}
.channel-gold .face,.three-d.gold .face{
  background:
    linear-gradient(100deg,#4f3607 0%,#8f6716 7%,#f7db7b 16%,#fff1ad 22%,#8e6718 31%,#d7a83c 42%,#fff0a4 49%,#705015 58%,#c99a32 71%,#fff1a8 80%,#705013 91%,#c08c27 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.channel-chrome .face,.three-d.chrome .face{
  background:
    linear-gradient(180deg,#343a40 0%,#d6dde2 10%,#ffffff 18%,#707981 28%,#f7fafc 40%,#4f585f 52%,#ffffff 62%,#858f97 73%,#e8edf0 84%,#50575d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sdcmb-stage.night .channel-halo:before,
.sdcmb-stage.night .channel-front-halo:before,
.sdcmb-stage.night .channel-gold:before,
.sdcmb-stage.night .channel-chrome:before{
  opacity:calc(var(--halo-opacity,.7) + .13);
}

/* Neon: thinner luminous tube with bright inner core and soft outer bloom. */
.sdcmb-neon{
  font-weight:500;
  letter-spacing:1px;
  line-height:1.05;
  text-align:center;
  -webkit-text-stroke:1px rgba(255,255,255,.72);
  paint-order:stroke fill;
}
.sdcmb-neon:after{
  content:attr(data-text-copy);
  position:absolute;
  inset:0;
  color:rgba(255,255,255,.76);
  -webkit-text-stroke:0;
  text-shadow:0 0 2px #fff;
  opacity:.42;
  pointer-events:none;
}

/* Gloss black ACM should look reflective rather than simply dark. */
.sdcmb-stage.bg-black-acm:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.12) 48%,rgba(255,255,255,.035) 54%,transparent 64%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 32%,rgba(255,255,255,.03) 78%,transparent);
  pointer-events:none;
  z-index:1;
}

/* Better small-screen fitting. */
@media(max-width:760px){
  .sdcmb [data-render]{padding:12% 4%}
  .sdcmb-sign{max-width:92%}
}


/* v0.3.1 — Light-box proportions + wedding script polish */
.sdcmb-controls input[type=number]{
  display:block;width:100%;height:38px;border:1px solid #cfd7e2;border-radius:6px;
  margin-top:5px;padding:0 9px;background:#fff;color:#111827;
}
.sdcmb-lightbox{transition:width .22s ease,aspect-ratio .22s ease}
.sdcmb-neon{font-kerning:normal;text-rendering:geometricPrecision}


/* === v0.3.2 — Night lighting + text scale === */
.sdcmb-range-row{
  display:grid;
  grid-template-columns:1fr 52px;
  gap:9px;
  align-items:center;
  margin-top:6px;
}
.sdcmb-range-row input[type=range]{margin:0;width:100%}
.sdcmb-range-row output{
  display:grid;
  place-items:center;
  height:30px;
  border:1px solid #d5dce5;
  border-radius:6px;
  background:#f8fafc;
  font-size:10px;
  font-weight:800;
  color:#344057;
}

/* Night should darken the environment, not the illuminated sign. */
.sdcmb-stage.night:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(2,6,13,.58);
  pointer-events:none;
}
.sdcmb-stage.night .sdcmb-vignette{
  z-index:2;
  background:
    radial-gradient(circle at center,rgba(0,0,0,.03) 28%,rgba(0,0,0,.30) 100%);
}
.sdcmb-stage.night [data-render]{
  z-index:4;
  filter:none!important;
}
.sdcmb-stage.night .sdcmb-stage-meta{z-index:6}

/* Lights get brighter at night rather than darker. */
.sdcmb-stage.night .channel-front .face,
.sdcmb-stage.night .channel-front-halo .face{
  filter:brightness(1.34) saturate(1.04);
  text-shadow:
    0 0 4px currentColor,
    0 0 12px currentColor,
    0 0 26px currentColor,
    0 0 42px rgba(255,255,255,.72);
}
.sdcmb-stage.night .channel-halo:before,
.sdcmb-stage.night .channel-front-halo:before,
.sdcmb-stage.night .channel-gold:before,
.sdcmb-stage.night .channel-chrome:before{
  opacity:min(1, calc(var(--halo-opacity,.70) + .20));
  filter:blur(calc(var(--halo-blur,18px) + 4px));
}
.sdcmb-stage.night .channel-gold .face,
.sdcmb-stage.night .channel-chrome .face{
  filter:brightness(1.18);
}
.sdcmb-stage.night .sdcmb-lightbox{
  filter:brightness(1.18);
}
.sdcmb-stage.night .sdcmb-lb-face{
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.98),
    0 0 30px rgba(255,255,255,.48),
    0 0 58px rgba(255,255,255,.24);
}
.sdcmb-stage.night .sdcmb-neon{
  filter:brightness(1.18) saturate(1.12);
}

/* Keep the background reflections subdued at night. */
.sdcmb-stage.night.bg-black-acm:after{opacity:.35}


/* === v0.3.3 — Channel-letter legibility refinement === */
/* Front-lit acrylic should read as a letter first, glow second. */
.sdcmb .channel-front .face{
  -webkit-text-stroke:1px rgba(25,28,33,.38);
  paint-order:stroke fill;
  text-shadow:
    0 0 2px currentColor,
    0 0 6px currentColor,
    0 2px 2px rgba(0,0,0,.25);
}
.sdcmb .channel-front-halo .face{
  -webkit-text-stroke:1px rgba(25,28,33,.34);
  paint-order:stroke fill;
  text-shadow:
    0 0 2px currentColor,
    0 0 5px currentColor,
    0 2px 2px rgba(0,0,0,.22);
}

/* At night, retain crisp edges and add controlled light spill. */
.sdcmb-stage.night .channel-front .face{
  filter:none!important;
  -webkit-text-stroke:1px rgba(20,23,28,.52);
  text-shadow:
    0 0 2px #fff,
    0 0 5px currentColor,
    0 0 11px currentColor,
    0 0 20px color-mix(in srgb,currentColor 55%,transparent),
    0 3px 3px rgba(0,0,0,.32);
}
.sdcmb-stage.night .channel-front-halo .face{
  filter:none!important;
  -webkit-text-stroke:1px rgba(20,23,28,.48);
  text-shadow:
    0 0 2px #fff,
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 2px 3px rgba(0,0,0,.28);
}

/* Preserve a visible return/depth silhouette around illuminated faces. */
.sdcmb-stage.night .channel-front .rear,
.sdcmb-stage.night .channel-front-halo .rear{
  color:#171a1f;
  opacity:1;
  filter:none!important;
}

/* Light-box text stays crisp even when the cabinet is luminous. */
.sdcmb-stage.night .sdcmb-lb-face span{
  filter:none!important;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
}


/* === v0.3.4 — storefront editing + presentation preview === */

/* Desktop: stay inside Elementor/shortcode parent instead of using viewport width. */
.sdcmb{
  width:100%;
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
}
.sdcmb-layout,.sdcmb-stage-wrap,.sdcmb-stage,.sdcmb-presentation-shell{min-width:0;max-width:100%}

/* Added controls intentionally inherit the v0.3.3 visual language. */
.sdcmb-advanced{margin-top:9px;border-top:1px solid #edf0f4;padding-top:8px}
.sdcmb-advanced summary{cursor:pointer;font-size:11px;font-weight:850;color:#344057}
.sdcmb-help{font-size:9px;line-height:1.45;color:#7a8493;margin:5px 0 8px}
.sdcmb-tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}
.sdcmb-tool-grid button{border:1px solid #cfd7e2;background:#fff;color:#344057;border-radius:6px;padding:8px 3px;font-size:9px;font-weight:800;cursor:pointer}
.sdcmb-tool-grid button.active{background:#0e1c3c;color:#fff;border-color:#0e1c3c}
.sdcmb-tool-done{margin-top:7px!important}
.sdcmb-controls input[type=number]{display:block;width:100%;height:38px;border:1px solid #cfd7e2;border-radius:6px;margin-top:5px;padding:0 9px;background:#fff;color:#111827}

/* Storefront repair layer. */
.sdcmb-cover-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.sdcmb-cover-canvas.editing{pointer-events:auto;cursor:crosshair}
.sdcmb-cover-hint{position:absolute;z-index:8;top:14px;left:50%;transform:translateX(-50%);background:rgba(14,28,60,.92);color:#fff;border-radius:7px;padding:8px 12px;font-size:10px;font-weight:800;pointer-events:none}
.sdcmb [data-render]{cursor:grab}
.sdcmb [data-render].dragging{cursor:grabbing}
.sdcmb.cover-mode [data-render]{pointer-events:none}

/* Presentation preview uses the same canvas. */
.sdcmb-presentation-shell{perspective:1600px;background:#eef1f4;border-radius:12px;overflow:visible}
.sdcmb-stage{transform-origin:center center;transition:transform .45s ease,filter .25s,background .25s,box-shadow .45s ease}
.sdcmb-stage.presentation-mode{box-shadow:0 24px 46px rgba(0,0,0,.24),inset 0 0 0 1px rgba(0,0,0,.08)}
.sdcmb-stage.presentation-left{transform:perspective(1600px) rotateY(7deg) scale(.955)}
.sdcmb-stage.presentation-right{transform:perspective(1600px) rotateY(-7deg) scale(.955)}
.sdcmb-stage.presentation-front{transform:perspective(1600px) rotateY(0deg) scale(.98)}
.sdcmb-stage.presentation-mode [data-render]{cursor:default}
.sdcmb-stage.presentation-mode .sdcmb-stage-meta{opacity:.72}
.sdcmb-presentation-actions{margin-top:10px}
.sdcmb-preview-primary{width:100%;border:0;background:#172b55;color:#fff;border-radius:9px;padding:13px 15px;font-weight:900;cursor:pointer}
.sdcmb-presentation-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#f7f9fb;border:1px solid #dfe5ec;border-radius:9px;padding:8px}
.sdcmb-presentation-controls[hidden]{display:none!important}
.sdcmb-presentation-controls button{border:1px solid #cbd4df;background:#fff;color:#344057;border-radius:6px;padding:8px 10px;font-size:10px;font-weight:800;cursor:pointer}
.sdcmb-presentation-controls button.active{background:#0e1c3c;color:#fff;border-color:#0e1c3c}
.sdcmb-present-sep{width:1px;height:25px;background:#d4dbe4;margin:0 2px}
.sdcmb-presentation-controls .sdcmb-back-edit{margin-left:auto;border-color:#ff7a00;color:#d76000}
.sdcmb-presentation-note{font-size:9px;color:#758091;margin:6px 3px 0}
.sdcmb-stage.presentation-mode .sdcmb-sign .rear{filter:brightness(.92)}
.sdcmb-stage.presentation-left .sdcmb-sign .rear{transform:translate(7px,5px)!important}
.sdcmb-stage.presentation-right .sdcmb-sign .rear{transform:translate(-7px,5px)!important}
.sdcmb-stage.presentation-left .sdcmb-lightbox:after{right:-11px;bottom:-10px;height:10px}
.sdcmb-stage.presentation-right .sdcmb-lightbox:after{right:10px;left:-11px;bottom:-10px;height:10px;transform:skewX(45deg)}
.sdcmb-stage.presentation-mode .sdcmb-lightbox{box-shadow:8px 11px 20px rgba(0,0,0,.25),inset 0 0 0 2px rgba(255,255,255,.14)}

/* Presentation night remains crisp: dark environment, luminous sign. */
.sdcmb-stage.presentation-mode.night:before{background:rgba(2,6,13,.64)}
.sdcmb-stage.presentation-mode.night .sdcmb-lightbox{filter:brightness(1.24)}
.sdcmb-stage.presentation-mode.night .sdcmb-neon{filter:brightness(1.22) saturate(1.14)}

@media(max-width:760px){
  .sdcmb{width:100%}
  .sdcmb-presentation-controls .sdcmb-back-edit{margin-left:0}
  .sdcmb-stage.presentation-left{transform:perspective(1200px) rotateY(5deg) scale(.94)}
  .sdcmb-stage.presentation-right{transform:perspective(1200px) rotateY(-5deg) scale(.94)}
}


/* === v0.3.5 bug-fix pass === */
.sdcmb-three{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sdcmb-bg-mode-buttons{margin-top:7px}
.sdcmb-bg-mode-buttons button:disabled,
.sdcmb-repair-section button:disabled{opacity:.45;cursor:not-allowed}
.sdcmb [data-render]{touch-action:none;user-select:none;-webkit-user-select:none}
.sdcmb-cover-canvas{touch-action:none}
.sdcmb-stage{overflow:hidden}


/* === v0.3.6 — explicit layer order ===
   0 background image
   1 vignette / environmental shading
   2 repair canvas (covers old sign)
   4 new sign renderer
   7 labels / hints / UI
*/
.sdcmb-stage{isolation:isolate}
.sdcmb-stage .sdcmb-vignette{z-index:1;pointer-events:none}
.sdcmb-stage .sdcmb-cover-canvas{z-index:2}
.sdcmb-stage [data-render]{z-index:4!important}
.sdcmb-stage .sdcmb-stage-meta{z-index:7}
.sdcmb-stage .sdcmb-cover-hint{z-index:8}

/* In cover mode, the repair canvas owns pointer input.
   Outside cover mode, the new sign is fully draggable above the repair layer. */
.sdcmb.cover-mode .sdcmb-cover-canvas{z-index:6}
.sdcmb.cover-mode [data-render]{pointer-events:none}
.sdcmb:not(.cover-mode) .sdcmb-cover-canvas{pointer-events:none}
.sdcmb:not(.cover-mode) [data-render]{pointer-events:auto}

/* Presentation keeps the same visual stack: repair below the new sign. */
.sdcmb-stage.presentation-mode .sdcmb-cover-canvas{z-index:2}
.sdcmb-stage.presentation-mode [data-render]{z-index:4!important}


/* === v0.3.7 cover editing / perspective / halo refinement === */
.sdcmb-tool-grid-four{grid-template-columns:repeat(2,1fr)}
.sdcmb-cover-canvas.editing[data-edit-tool="select"]{cursor:default}

/* Tight, believable halo: keep light close to the letter silhouette. */
.sdcmb .channel-halo:before,
.sdcmb .channel-front-halo:before,
.sdcmb .channel-gold:before,
.sdcmb .channel-chrome:before{
  inset:-4% -2%!important;
  filter:blur(var(--halo-blur,7px))!important;
  box-shadow:0 0 9px var(--halo,#fff2d6)!important;
}
.sdcmb-stage.night .channel-halo:before,
.sdcmb-stage.night .channel-front-halo:before,
.sdcmb-stage.night .channel-gold:before,
.sdcmb-stage.night .channel-chrome:before{
  filter:blur(calc(var(--halo-blur,7px) + 1px))!important;
}

/* Perspective sign extrusion must follow the same viewing direction as the background.
   These rules intentionally reverse v0.3.6's letter-side offsets. */
.sdcmb-stage.presentation-left .sdcmb-sign .rear{transform:translate(-7px,5px)!important}
.sdcmb-stage.presentation-right .sdcmb-sign .rear{transform:translate(7px,5px)!important}
.sdcmb-stage.presentation-left .sdcmb-lightbox:after{
  left:-10px!important;right:10px!important;bottom:-9px!important;height:9px!important;
  transform:skewX(42deg)!important;
}
.sdcmb-stage.presentation-right .sdcmb-lightbox:after{
  left:10px!important;right:-10px!important;bottom:-9px!important;height:9px!important;
  transform:skewX(-42deg)!important;
}


/* === v0.3.8 — letter-shaped halo ===
   The previous pseudo-element halo was a rectangular blurred box.
   Halo is now generated from the actual glyph alpha shape via CSS drop-shadow. */
.sdcmb .channel-halo:before,
.sdcmb .channel-front-halo:before,
.sdcmb .channel-gold:before,
.sdcmb .channel-chrome:before{
  display:none!important;
  content:none!important;
}

/* Keep halo behind/around the actual letter silhouette. */
.sdcmb .channel-halo .face,
.sdcmb .channel-front-halo .face,
.sdcmb .channel-gold .face,
.sdcmb .channel-chrome .face{
  filter:
    drop-shadow(0 0 var(--halo-small,3px) var(--halo-rgba-strong,rgba(255,242,214,.82)))
    drop-shadow(0 0 var(--halo-medium,6px) var(--halo-rgba,rgba(255,242,214,.58)));
}

/* A slightly softer second halo layer comes from the dimensional rear glyph,
   still following the letter shape rather than a rectangle. */
.sdcmb .channel-halo .rear,
.sdcmb .channel-front-halo .rear,
.sdcmb .channel-gold .rear,
.sdcmb .channel-chrome .rear{
  filter:
    drop-shadow(0 0 var(--halo-small,3px) var(--halo-rgba,rgba(255,242,214,.48)));
}

/* Night view intensifies the glyph-shaped halo without expanding it far from the letters. */
.sdcmb-stage.night .channel-halo .face,
.sdcmb-stage.night .channel-front-halo .face,
.sdcmb-stage.night .channel-gold .face,
.sdcmb-stage.night .channel-chrome .face{
  filter:
    brightness(1.05)
    drop-shadow(0 0 var(--halo-small,3px) var(--halo-rgba-strong,rgba(255,242,214,.92)))
    drop-shadow(0 0 var(--halo-medium,6px) var(--halo-rgba,rgba(255,242,214,.70)))
    drop-shadow(0 0 var(--halo-large,9px) var(--halo-rgba-soft,rgba(255,242,214,.30)));
}

/* Front+Halo keeps a crisp illuminated face while the halo hugs the outline. */
.sdcmb-stage.night .channel-front-halo .face{
  text-shadow:
    0 0 2px #fff,
    0 0 4px currentColor,
    0 2px 3px rgba(0,0,0,.26);
}


/* === v0.3.9 selected cover editing === */
.sdcmb-delete-cover{margin-top:6px!important}
.sdcmb-selected-cover-status{
  margin-top:6px;padding:6px 8px;border:1px solid #e1e6ed;border-radius:6px;
  background:#f8fafc;color:#7a8493;font-size:9px;font-weight:750
}
.sdcmb-selected-cover-status.active{color:#0e1c3c;border-color:#a9c5ff;background:#f2f7ff}


/* === v0.4.0 — solid extruded perspective letters ===
   Presentation mode now builds a thicker side/return body behind the face
   so Gold/Chrome no longer appear as two thin offset panels. */
.sdcmb-stage.presentation-mode .sdcmb-sign{
  --present-depth-x:6px;
  --present-depth-y:4px;
}

/* The rear glyph becomes a solid "return/body" by stacking many tiny offsets. */
.sdcmb-stage.presentation-mode .sdcmb-sign .rear{
  opacity:1!important;
  color:#1a1b1d;
  filter:none!important;
  text-shadow:
    1px 0 0 #18191b,
    2px 1px 0 #18191b,
    3px 1px 0 #17181a,
    4px 2px 0 #17181a,
    5px 2px 0 #161719,
    6px 3px 0 #161719,
    7px 3px 0 #151618,
    8px 4px 0 #151618,
    9px 4px 0 #141517,
    10px 5px 0 #141517,
    11px 5px 0 #131416,
    12px 6px 0 #131416,
    13px 6px 1px rgba(0,0,0,.28)!important;
}

/* LEFT perspective: body extends left/back from the face. */
.sdcmb-stage.presentation-left .sdcmb-sign .rear{
  transform:translate(-10px,5px)!important;
  text-shadow:
    -1px 0 0 #18191b,
    -2px 1px 0 #18191b,
    -3px 1px 0 #17181a,
    -4px 2px 0 #17181a,
    -5px 2px 0 #161719,
    -6px 3px 0 #161719,
    -7px 3px 0 #151618,
    -8px 4px 0 #151618,
    -9px 4px 0 #141517,
    -10px 5px 0 #141517,
    -11px 5px 0 #131416,
    -12px 6px 0 #131416,
    -13px 6px 1px rgba(0,0,0,.28)!important;
}

/* RIGHT perspective: body extends right/back from the face. */
.sdcmb-stage.presentation-right .sdcmb-sign .rear{
  transform:translate(10px,5px)!important;
  text-shadow:
    1px 0 0 #18191b,
    2px 1px 0 #18191b,
    3px 1px 0 #17181a,
    4px 2px 0 #17181a,
    5px 2px 0 #161719,
    6px 3px 0 #161719,
    7px 3px 0 #151618,
    8px 4px 0 #151618,
    9px 4px 0 #141517,
    10px 5px 0 #141517,
    11px 5px 0 #131416,
    12px 6px 0 #131416,
    13px 6px 1px rgba(0,0,0,.28)!important;
}

/* Gold return/body: darker gold side metal rather than black duplicate. */
.sdcmb-stage.presentation-mode .channel-gold .rear,
.sdcmb-stage.presentation-mode .three-d.gold .rear{
  color:#71511a!important;
  -webkit-text-fill-color:#71511a!important;
}
.sdcmb-stage.presentation-left .channel-gold .rear,
.sdcmb-stage.presentation-left .three-d.gold .rear{
  text-shadow:
    -1px 0 #7d5b1d,-2px 1px #76561b,-3px 1px #705019,-4px 2px #684a18,
    -5px 2px #624516,-6px 3px #5c4015,-7px 3px #563b14,-8px 4px #503712,
    -9px 4px #4a3311,-10px 5px #442f10,-11px 5px #3e2b0f,-12px 6px #39270e,
    -13px 6px 2px rgba(0,0,0,.35)!important;
}
.sdcmb-stage.presentation-right .channel-gold .rear,
.sdcmb-stage.presentation-right .three-d.gold .rear{
  text-shadow:
    1px 0 #7d5b1d,2px 1px #76561b,3px 1px #705019,4px 2px #684a18,
    5px 2px #624516,6px 3px #5c4015,7px 3px #563b14,8px 4px #503712,
    9px 4px #4a3311,10px 5px #442f10,11px 5px #3e2b0f,12px 6px #39270e,
    13px 6px 2px rgba(0,0,0,.35)!important;
}

/* Chrome return/body gets a darker neutral metallic side. */
.sdcmb-stage.presentation-mode .channel-chrome .rear,
.sdcmb-stage.presentation-mode .three-d.chrome .rear{
  color:#444b52!important;
  -webkit-text-fill-color:#444b52!important;
}

/* Keep the metallic face large enough to cover the return edge cleanly after perspective transform. */
.sdcmb-stage.presentation-mode .channel-gold .face,
.sdcmb-stage.presentation-mode .channel-chrome .face,
.sdcmb-stage.presentation-mode .three-d.gold .face,
.sdcmb-stage.presentation-mode .three-d.chrome .face{
  position:relative;
  z-index:5;
  transform:scale(1.006);
  transform-origin:center center;
}

/* Presentation halo follows the face and does not create a second-layer appearance. */
.sdcmb-stage.presentation-mode .channel-gold .rear,
.sdcmb-stage.presentation-mode .channel-chrome .rear,
.sdcmb-stage.presentation-mode .channel-halo .rear,
.sdcmb-stage.presentation-mode .channel-front-halo .rear{
  filter:none!important;
}


/* === v0.4.1 — realistic channel return + separate cast shadow ===
   The v0.4.0 return stack was visually too deep and read like a second letter.
   Keep the return shallow (3–4 in visual equivalent) and separate it from the wall shadow. */

/* Reset the heavy v0.4.0 presentation extrusion stack. */
.sdcmb-stage.presentation-mode .sdcmb-sign .rear,
.sdcmb-stage.presentation-left .sdcmb-sign .rear,
.sdcmb-stage.presentation-right .sdcmb-sign .rear{
  opacity:1!important;
  filter:none!important;
  text-shadow:none!important;
}

/* Front view: almost no visible side, only a small body and natural wall shadow. */
.sdcmb-stage.presentation-front .sdcmb-sign .rear{
  transform:translate(2px,2px)!important;
  color:#202328!important;
  -webkit-text-fill-color:#202328!important;
  text-shadow:
    1px 0 0 #202328,
    2px 1px 0 #1b1e22,
    3px 2px 4px rgba(0,0,0,.34)!important;
}

/* Slight Left: visible return on the LEFT side only. */
.sdcmb-stage.presentation-left .sdcmb-sign .rear{
  transform:translate(-5px,2px)!important;
  color:#202328!important;
  -webkit-text-fill-color:#202328!important;
  text-shadow:
    -1px 0 0 #202328,
    -2px 0 0 #1e2125,
    -3px 1px 0 #1c1f23,
    -4px 1px 0 #1a1d21,
    -5px 2px 0 #181b1f,
    -7px 4px 5px rgba(0,0,0,.30)!important;
}

/* Slight Right: visible return on the RIGHT side only. */
.sdcmb-stage.presentation-right .sdcmb-sign .rear{
  transform:translate(5px,2px)!important;
  color:#202328!important;
  -webkit-text-fill-color:#202328!important;
  text-shadow:
    1px 0 0 #202328,
    2px 0 0 #1e2125,
    3px 1px 0 #1c1f23,
    4px 1px 0 #1a1d21,
    5px 2px 0 #181b1f,
    7px 4px 5px rgba(0,0,0,.30)!important;
}

/* Gold metal face: keep the face gold, but the channel return itself is a darker
   fabricated metal side instead of another full gold letter. */
.sdcmb-stage.presentation-mode .channel-gold .rear,
.sdcmb-stage.presentation-mode .three-d.gold .rear{
  color:#4d3a18!important;
  -webkit-text-fill-color:#4d3a18!important;
}
.sdcmb-stage.presentation-left .channel-gold .rear,
.sdcmb-stage.presentation-left .three-d.gold .rear{
  text-shadow:
    -1px 0 0 #6a4f1c,
    -2px 0 0 #614819,
    -3px 1px 0 #594217,
    -4px 1px 0 #503b15,
    -5px 2px 0 #483514,
    -7px 4px 5px rgba(0,0,0,.28)!important;
}
.sdcmb-stage.presentation-right .channel-gold .rear,
.sdcmb-stage.presentation-right .three-d.gold .rear{
  text-shadow:
    1px 0 0 #6a4f1c,
    2px 0 0 #614819,
    3px 1px 0 #594217,
    4px 1px 0 #503b15,
    5px 2px 0 #483514,
    7px 4px 5px rgba(0,0,0,.28)!important;
}

/* Chrome face gets a compact dark/silver return, not a broad black duplicate. */
.sdcmb-stage.presentation-mode .channel-chrome .rear,
.sdcmb-stage.presentation-mode .three-d.chrome .rear{
  color:#555d64!important;
  -webkit-text-fill-color:#555d64!important;
}
.sdcmb-stage.presentation-left .channel-chrome .rear,
.sdcmb-stage.presentation-left .three-d.chrome .rear{
  text-shadow:
    -1px 0 0 #737b82,
    -2px 0 0 #656d74,
    -3px 1px 0 #596168,
    -4px 1px 0 #4d555c,
    -5px 2px 0 #424950,
    -7px 4px 5px rgba(0,0,0,.30)!important;
}
.sdcmb-stage.presentation-right .channel-chrome .rear,
.sdcmb-stage.presentation-right .three-d.chrome .rear{
  text-shadow:
    1px 0 0 #737b82,
    2px 0 0 #656d74,
    3px 1px 0 #596168,
    4px 1px 0 #4d555c,
    5px 2px 0 #424950,
    7px 4px 5px rgba(0,0,0,.30)!important;
}

/* The face must sit cleanly above the return. Do not scale it beyond the real glyph. */
.sdcmb-stage.presentation-mode .sdcmb-sign .face{
  position:relative;
  z-index:5;
  transform:none!important;
}

/* Separate wall shadow from the channel body. Keep it soft and modest. */
.sdcmb-stage.presentation-mode .sdcmb-sign{
  filter:drop-shadow(var(--wall-shadow-x,3px) var(--wall-shadow-y,5px) 4px rgba(0,0,0,.22));
}
.sdcmb-stage.presentation-left .sdcmb-sign{
  --wall-shadow-x:-3px;
  --wall-shadow-y:5px;
}
.sdcmb-stage.presentation-right .sdcmb-sign{
  --wall-shadow-x:3px;
  --wall-shadow-y:5px;
}
.sdcmb-stage.presentation-front .sdcmb-sign{
  --wall-shadow-x:1px;
  --wall-shadow-y:4px;
}

/* Halo should stay independent of the side return and remain glyph-shaped. */
.sdcmb-stage.presentation-mode .channel-halo .rear,
.sdcmb-stage.presentation-mode .channel-front-halo .rear,
.sdcmb-stage.presentation-mode .channel-gold .rear,
.sdcmb-stage.presentation-mode .channel-chrome .rear{
  filter:none!important;
}


/* === v0.4.2 — polished mirror chrome face ===
   Replace the broad striped chrome look with a tighter, high-polish mirror-metal
   reflection similar to fabricated polished stainless/chrome letters. */
.sdcmb .channel-chrome .face,
.sdcmb .three-d.chrome .face{
  color:#f8f8f6!important;
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(
      180deg,
      #111317 0%,
      #3c4248 5%,
      #fdfdfb 12%,
      #aeb4b8 20%,
      #ffffff 29%,
      #e7e9e8 39%,
      #6f777d 48%,
      #fafaf8 55%,
      #ffffff 66%,
      #a7adb1 76%,
      #f7f7f5 86%,
      #3a3f44 96%,
      #15171a 100%
    )!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.92),
    1px 0 0 rgba(70,74,78,.55),
    0 1px 0 rgba(25,28,31,.72),
    -1px 0 0 rgba(255,255,255,.55)!important;
}

/* Add a narrow diagonal specular sweep to avoid the flat horizontal-band appearance. */
.sdcmb .channel-chrome .face,
.sdcmb .three-d.chrome .face{
  background-image:
    linear-gradient(108deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 31%,
      rgba(255,255,255,.70) 39%,
      rgba(255,255,255,.10) 45%,
      rgba(255,255,255,0) 53%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      180deg,
      #121418 0%,#4a5056 6%,#ffffff 13%,#bcc1c4 21%,
      #ffffff 31%,#e3e5e5 40%,#686f75 48%,#fbfbf9 55%,
      #ffffff 66%,#a1a7ab 77%,#fafaf8 87%,#3c4146 96%,#17191c 100%
    )!important;
}

/* Polished chrome return: silver side walls with darker lower/away-facing edge. */
.sdcmb-stage.presentation-mode .channel-chrome .rear,
.sdcmb-stage.presentation-mode .three-d.chrome .rear{
  color:#70777c!important;
  -webkit-text-fill-color:#70777c!important;
}
.sdcmb-stage.presentation-left .channel-chrome .rear,
.sdcmb-stage.presentation-left .three-d.chrome .rear{
  text-shadow:
    -1px 0 0 #d6d9da,
    -2px 0 0 #aeb4b7,
    -3px 1px 0 #858c91,
    -4px 1px 0 #62696e,
    -5px 2px 0 #444a4f,
    -7px 4px 5px rgba(0,0,0,.28)!important;
}
.sdcmb-stage.presentation-right .channel-chrome .rear,
.sdcmb-stage.presentation-right .three-d.chrome .rear{
  text-shadow:
    1px 0 0 #d6d9da,
    2px 0 0 #aeb4b7,
    3px 1px 0 #858c91,
    4px 1px 0 #62696e,
    5px 2px 0 #444a4f,
    7px 4px 5px rgba(0,0,0,.28)!important;
}

/* Night: chrome stays metallic rather than turning into a glowing white face. */
.sdcmb-stage.night .channel-chrome .face,
.sdcmb-stage.night .three-d.chrome .face{
  filter:brightness(.90) contrast(1.08);
}


/* === v0.4.3 — polished mirror gold face ===
   High-polish gold reflection: bright upper gold, strong dark environmental
   reflection through the middle/lower face, and warm bronze lower reflection. */
.sdcmb .channel-gold .face,
.sdcmb .three-d.gold .face{
  color:#f5c34f!important;
  -webkit-text-fill-color:transparent!important;
  background-image:
    linear-gradient(106deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 28%,
      rgba(255,247,190,.62) 36%,
      rgba(255,255,255,.12) 43%,
      rgba(255,255,255,0) 52%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      180deg,
      #5a2d05 0%,
      #b66a0a 4%,
      #ffd86a 10%,
      #fff0a0 18%,
      #f5bd38 31%,
      #c9790b 43%,
      #17120b 48%,
      #030303 55%,
      #1a1107 61%,
      #8b4c08 68%,
      #d58a13 78%,
      #8f4d08 89%,
      #3e2005 100%
    )!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:
    0 -1px 0 rgba(255,237,150,.92),
    1px 0 0 rgba(91,48,6,.70),
    0 1px 0 rgba(54,27,3,.86),
    -1px 0 0 rgba(255,210,90,.62)!important;
}

/* Gold return stays metallic but darker than the mirror-polished face. */
.sdcmb-stage.presentation-mode .channel-gold .rear,
.sdcmb-stage.presentation-mode .three-d.gold .rear{
  color:#6a3c08!important;
  -webkit-text-fill-color:#6a3c08!important;
}
.sdcmb-stage.presentation-left .channel-gold .rear,
.sdcmb-stage.presentation-left .three-d.gold .rear{
  text-shadow:
    -1px 0 0 #d38a18,
    -2px 0 0 #ad6a0e,
    -3px 1px 0 #875008,
    -4px 1px 0 #6d3e06,
    -5px 2px 0 #512d04,
    -7px 4px 5px rgba(0,0,0,.28)!important;
}
.sdcmb-stage.presentation-right .channel-gold .rear,
.sdcmb-stage.presentation-right .three-d.gold .rear{
  text-shadow:
    1px 0 0 #d38a18,
    2px 0 0 #ad6a0e,
    3px 1px 0 #875008,
    4px 1px 0 #6d3e06,
    5px 2px 0 #512d04,
    7px 4px 5px rgba(0,0,0,.28)!important;
}

/* Gold remains reflective at night rather than becoming a flat luminous yellow. */
.sdcmb-stage.night .channel-gold .face,
.sdcmb-stage.night .three-d.gold .face{
  filter:brightness(.92) contrast(1.06);
}


/* === v0.4.4 — angled environmental metal reflections ===
   Multiple oblique highlight/shadow bands simulate random reflected architecture
   across polished Gold and Chrome faces. The pattern is clipped to the glyphs. */

/* GOLD: irregular champagne / amber / near-black reflected planes. */
.sdcmb .channel-gold .face,
.sdcmb .three-d.gold .face{
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(151deg,
      transparent 0 16%,
      rgba(255,244,174,.72) 17% 24%,
      transparent 25% 100%),
    linear-gradient(24deg,
      transparent 0 34%,
      rgba(20,12,3,.94) 35% 43%,
      rgba(92,48,4,.68) 44% 49%,
      transparent 50% 100%),
    linear-gradient(163deg,
      transparent 0 58%,
      rgba(255,226,102,.56) 59% 66%,
      transparent 67% 100%),
    linear-gradient(73deg,
      transparent 0 70%,
      rgba(255,249,203,.38) 71% 75%,
      transparent 76% 100%),
    linear-gradient(180deg,
      #6c3505 0%,
      #d48712 8%,
      #ffe47d 18%,
      #f7bd32 35%,
      #b96808 48%,
      #211307 57%,
      #060504 63%,
      #8d4a07 72%,
      #e69a19 84%,
      #754008 100%)!important;
  background-size:
    137% 126%,
    149% 133%,
    121% 142%,
    173% 119%,
    100% 100%!important;
  background-position:
    11% 17%,
    61% 38%,
    29% 71%,
    77% 14%,
    0 0!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

/* CHROME: irregular white / silver / graphite / black reflected planes. */
.sdcmb .channel-chrome .face,
.sdcmb .three-d.chrome .face{
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(147deg,
      transparent 0 17%,
      rgba(255,255,255,.92) 18% 25%,
      rgba(174,181,186,.54) 26% 29%,
      transparent 30% 100%),
    linear-gradient(22deg,
      transparent 0 35%,
      rgba(7,9,11,.96) 36% 43%,
      rgba(64,70,75,.72) 44% 50%,
      transparent 51% 100%),
    linear-gradient(160deg,
      transparent 0 56%,
      rgba(255,255,255,.72) 57% 64%,
      rgba(130,138,145,.42) 65% 68%,
      transparent 69% 100%),
    linear-gradient(67deg,
      transparent 0 72%,
      rgba(20,23,26,.58) 73% 77%,
      transparent 78% 100%),
    linear-gradient(180deg,
      #1b1e21 0%,
      #737b81 7%,
      #ffffff 16%,
      #b7bdc1 28%,
      #f7f8f8 39%,
      #626a70 50%,
      #15181b 58%,
      #eef0f0 67%,
      #ffffff 78%,
      #858c91 89%,
      #272b2f 100%)!important;
  background-size:
    143% 131%,
    151% 137%,
    127% 145%,
    169% 123%,
    100% 100%!important;
  background-position:
    7% 19%,
    58% 42%,
    34% 69%,
    81% 11%,
    0 0!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

/* Presentation angles shift the reflection field slightly, so Left / Front / Right
   do not look like the identical flat texture pasted onto the letters. */
.sdcmb-stage.presentation-left .channel-gold .face,
.sdcmb-stage.presentation-left .three-d.gold .face,
.sdcmb-stage.presentation-left .channel-chrome .face,
.sdcmb-stage.presentation-left .three-d.chrome .face{
  background-position:3% 14%,54% 35%,22% 74%,70% 17%,0 0!important;
}
.sdcmb-stage.presentation-right .channel-gold .face,
.sdcmb-stage.presentation-right .three-d.gold .face,
.sdcmb-stage.presentation-right .channel-chrome .face,
.sdcmb-stage.presentation-right .three-d.chrome .face{
  background-position:18% 21%,69% 45%,41% 65%,88% 9%,0 0!important;
}

/* Preserve crisp metallic edges and restrained depth. */
.sdcmb .channel-gold .face,
.sdcmb .three-d.gold .face{
  text-shadow:
    0 -1px 0 rgba(255,237,150,.88),
    1px 0 0 rgba(91,48,6,.68),
    0 1px 0 rgba(54,27,3,.82),
    -1px 0 0 rgba(255,210,90,.58)!important;
}
.sdcmb .channel-chrome .face,
.sdcmb .three-d.chrome .face{
  text-shadow:
    0 -1px 0 rgba(255,255,255,.90),
    1px 0 0 rgba(65,70,74,.58),
    0 1px 0 rgba(24,27,30,.72),
    -1px 0 0 rgba(255,255,255,.52)!important;
}


/* === v0.4.5 — 50/20/10/20 reflection applied in PRESENTATION VIEW ONLY ===
   Editing view stays clean and readable. The stronger architectural metal
   reflection appears only after Create Realistic Presentation Preview. */

/* EDIT MODE — return to a restrained polished-metal face. */
.sdcmb-stage:not(.presentation-mode) .channel-gold .face,
.sdcmb-stage:not(.presentation-mode) .three-d.gold .face{
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(180deg,
      #8a4e08 0%,
      #e3a52f 10%,
      #fff0a0 24%,
      #f4c34c 43%,
      #c47a11 58%,
      #f1bb3e 74%,
      #8c4d08 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

.sdcmb-stage:not(.presentation-mode) .channel-chrome .face,
.sdcmb-stage:not(.presentation-mode) .three-d.chrome .face{
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(180deg,
      #373d42 0%,
      #cbd0d3 10%,
      #ffffff 24%,
      #d8dcde 43%,
      #7b8388 58%,
      #f2f4f4 74%,
      #42484d 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

/* PRESENTATION VIEW — exact requested face distribution:
   Top-to-bottom: 50% Light / 20% Medium / 10% Dark / 20% Light.
   CSS gradient direction 105deg makes the band boundaries about 15deg
   from horizontal across the letter faces. */

/* GOLD */
.sdcmb-stage.presentation-mode .channel-gold .face,
.sdcmb-stage.presentation-mode .three-d.gold .face{
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(105deg,
      #fff1a6 0%,
      #ffd866 49.5%,
      #d78b16 50%,
      #c9750b 69.5%,
      #5b3108 70%,
      #211306 79.5%,
      #f3b93d 80%,
      #ffe984 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:
    0 -1px 0 rgba(255,244,176,.92),
    1px 0 0 rgba(102,58,7,.65),
    0 1px 0 rgba(61,34,5,.78),
    -1px 0 0 rgba(255,215,91,.55)!important;
}

/* CHROME / SILVER */
.sdcmb-stage.presentation-mode .channel-chrome .face,
.sdcmb-stage.presentation-mode .three-d.chrome .face{
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(105deg,
      #ffffff 0%,
      #e6e9eb 49.5%,
      #9ba2a7 50%,
      #747c82 69.5%,
      #343a3f 70%,
      #121518 79.5%,
      #d8dcdf 80%,
      #ffffff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.95),
    1px 0 0 rgba(79,85,90,.60),
    0 1px 0 rgba(31,35,39,.72),
    -1px 0 0 rgba(255,255,255,.58)!important;
}

/* Keep the reflection proportions consistent for Front / Slight Left / Slight Right.
   Perspective comes from the scene/sign transform, not from changing the material pattern. */
.sdcmb-stage.presentation-left .channel-gold .face,
.sdcmb-stage.presentation-front .channel-gold .face,
.sdcmb-stage.presentation-right .channel-gold .face,
.sdcmb-stage.presentation-left .three-d.gold .face,
.sdcmb-stage.presentation-front .three-d.gold .face,
.sdcmb-stage.presentation-right .three-d.gold .face,
.sdcmb-stage.presentation-left .channel-chrome .face,
.sdcmb-stage.presentation-front .channel-chrome .face,
.sdcmb-stage.presentation-right .channel-chrome .face,
.sdcmb-stage.presentation-left .three-d.chrome .face,
.sdcmb-stage.presentation-front .three-d.chrome .face,
.sdcmb-stage.presentation-right .three-d.chrome .face{
  background-position:0 0!important;
  background-size:100% 100%!important;
}

/* Night presentation retains the reflection bands instead of washing them out. */
.sdcmb-stage.presentation-mode.night .channel-gold .face,
.sdcmb-stage.presentation-mode.night .three-d.gold .face{
  filter:brightness(.90) contrast(1.08)!important;
}
.sdcmb-stage.presentation-mode.night .channel-chrome .face,
.sdcmb-stage.presentation-mode.night .three-d.chrome .face{
  filter:brightness(.88) contrast(1.10)!important;
}


/* === v0.4.6 — second metallic face overlay in Presentation Preview ===
   Do NOT try to make the base face calculate a complex environment reflection.
   Presentation Preview creates a separate face-only layer clipped to the exact
   lettering, above the original face and below nothing else. */

/* The generated overlay is a sibling of the original face inside the same sign wrapper,
   so it automatically inherits the sign position, scale, and scene perspective. */
.sdcmb .presentation-metal-overlay{
  position:absolute;
  inset:0;
  z-index:8;
  display:block;
  width:100%;
  height:100%;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  filter:none!important;
  opacity:1;
}

/* GOLD overlay: requested top-to-bottom proportion along a 15° reflection band:
   50% light / 20% medium / 10% dark / 20% light. */
.sdcmb .presentation-metal-overlay.metal-gold{
  background-image:
    linear-gradient(
      105deg,
      #fff4b2 0%,
      #ffdf72 49.7%,
      #d9961e 50%,
      #c77b0d 69.7%,
      #5a3108 70%,
      #201305 79.7%,
      #f2bc43 80%,
      #ffeb8c 100%
    )!important;
  -webkit-text-stroke:.6px rgba(111,63,5,.55);
  text-shadow:
    0 -1px 0 rgba(255,248,197,.76),
    0 1px 0 rgba(72,38,4,.44);
}

/* CHROME overlay: same geometry, silver palette. */
.sdcmb .presentation-metal-overlay.metal-chrome{
  background-image:
    linear-gradient(
      105deg,
      #ffffff 0%,
      #e8ebed 49.7%,
      #a2a9ae 50%,
      #777f85 69.7%,
      #373d42 70%,
      #111417 79.7%,
      #dce0e2 80%,
      #ffffff 100%
    )!important;
  -webkit-text-stroke:.55px rgba(74,80,85,.46);
  text-shadow:
    0 -1px 0 rgba(255,255,255,.78),
    0 1px 0 rgba(26,30,33,.38);
}

/* Small reflection-field shift for the three presentation views.
   The overlay itself remains geometrically locked to the letter face. */
.sdcmb .presentation-metal-overlay.overlay-left{background-position:-5px 0!important}
.sdcmb .presentation-metal-overlay.overlay-front{background-position:0 0!important}
.sdcmb .presentation-metal-overlay.overlay-right{background-position:5px 0!important}

/* Presentation overlay is the visible polished face.
   Suppress the original metallic-face gradient only underneath the overlay,
   but preserve the base element because it still provides dimensions/halo geometry. */
.sdcmb-stage.presentation-mode .channel-gold.has-metal-overlay .face,
.sdcmb-stage.presentation-mode .channel-chrome.has-metal-overlay .face,
.sdcmb-stage.presentation-mode .three-d.gold.has-metal-overlay .face,
.sdcmb-stage.presentation-mode .three-d.chrome.has-metal-overlay .face{
  opacity:.16!important;
}

/* Keep halo and return independent from the overlay. */
.sdcmb-stage.presentation-mode .presentation-metal-overlay{
  mix-blend-mode:normal;
}
.sdcmb-stage.presentation-mode.night .presentation-metal-overlay.metal-gold{
  filter:brightness(.92) contrast(1.06)!important;
}
.sdcmb-stage.presentation-mode.night .presentation-metal-overlay.metal-chrome{
  filter:brightness(.90) contrast(1.08)!important;
}


/* === v0.4.7 — refined presentation face overlay ===
   Reflection overlay only: 4 visible bands across the full letter height.
   Pattern is scaled to the glyph area and uses a shallow ~8° slant. */

/* Exact overlay footprint = same sign wrapper / glyph height. */
.sdcmb .presentation-metal-overlay{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  line-height:1!important;
  background-size:100% 100%!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}

/* 98deg in CSS gives a shallow visual slant of about 8deg across the face.
   Stops are intentionally high-contrast and all four zones remain visible. */
.sdcmb .presentation-metal-overlay.metal-gold{
  background-image:
    linear-gradient(
      98deg,
      #fff2a6 0%,
      #ffe47b 48.5%,
      #e6aa2d 50.5%,
      #c98212 68.5%,
      #6c3b08 70.5%,
      #2a1805 78.5%,
      #e7a72b 80.5%,
      #ffd85f 100%
    )!important;
  -webkit-text-stroke:.55px rgba(100,55,5,.60);
  text-shadow:
    0 -1px 0 rgba(255,246,185,.80),
    0 1px 0 rgba(66,34,4,.48)!important;
}

.sdcmb .presentation-metal-overlay.metal-chrome{
  background-image:
    linear-gradient(
      98deg,
      #ffffff 0%,
      #eceff1 48.5%,
      #b8bec2 50.5%,
      #8b9297 68.5%,
      #4a5055 70.5%,
      #171a1d 78.5%,
      #d7dbde 80.5%,
      #ffffff 100%
    )!important;
  -webkit-text-stroke:.5px rgba(70,76,81,.52);
  text-shadow:
    0 -1px 0 rgba(255,255,255,.84),
    0 1px 0 rgba(25,29,32,.42)!important;
}

/* Do not slide the band field far between views.
   Perspective changes the geometry; only tiny field offsets are needed. */
.sdcmb .presentation-metal-overlay.overlay-left{
  background-position:-2px center!important;
}
.sdcmb .presentation-metal-overlay.overlay-front{
  background-position:center center!important;
}
.sdcmb .presentation-metal-overlay.overlay-right{
  background-position:2px center!important;
}

/* Keep all four shades readable in Day and Night presentation. */
.sdcmb-stage.presentation-mode.night .presentation-metal-overlay.metal-gold{
  filter:brightness(.94) contrast(1.14)!important;
}
.sdcmb-stage.presentation-mode.night .presentation-metal-overlay.metal-chrome{
  filter:brightness(.92) contrast(1.16)!important;
}


/* === v0.4.8 — guaranteed visible presentation band overlay ===
   Key correction: CSS 90deg is left->right, not top->bottom.
   For shallow horizontal bands tilted about 8deg, use ~188deg.
   The reflection is repeated in a tile sized from the ACTUAL letter height,
   so every section of a long word sees all four shade bands. */

.sdcmb .presentation-metal-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:12!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  background-repeat:repeat-x!important;
  background-size:var(--metal-tile-w,180px) 100%!important;
  background-position:center center!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* 4 zones across letter height:
   50% LIGHT / 20% MEDIUM / 10% DARK / 20% LIGHT.
   188deg = about 8deg visual tilt from horizontal band edges. */
.sdcmb .presentation-metal-overlay.metal-gold{
  background-image:linear-gradient(
    188deg,
    #fff3ad 0%,
    #ffe27a 49.5%,
    #dc9b25 50%,
    #bd7410 69.5%,
    #693906 70%,
    #241404 79.5%,
    #e7a72d 80%,
    #ffdf69 100%
  )!important;
  -webkit-text-stroke:.55px rgba(96,51,4,.66)!important;
  text-shadow:
    0 -1px 0 rgba(255,248,198,.88),
    1px 0 0 rgba(110,62,6,.44),
    0 1px 0 rgba(55,29,3,.52)!important;
}

.sdcmb .presentation-metal-overlay.metal-chrome{
  background-image:linear-gradient(
    188deg,
    #ffffff 0%,
    #e8ecee 49.5%,
    #aab1b6 50%,
    #777f85 69.5%,
    #454b50 70%,
    #121518 79.5%,
    #d7dcdf 80%,
    #ffffff 100%
  )!important;
  -webkit-text-stroke:.5px rgba(65,71,76,.58)!important;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.90),
    1px 0 0 rgba(83,89,94,.38),
    0 1px 0 rgba(24,28,31,.46)!important;
}

/* Keep the original face fully present underneath for its halo/edge geometry.
   The new overlay is opaque inside the glyph and visually replaces only the face finish. */
.sdcmb-stage.presentation-mode .channel-gold.has-metal-overlay .face,
.sdcmb-stage.presentation-mode .channel-chrome.has-metal-overlay .face,
.sdcmb-stage.presentation-mode .three-d.gold.has-metal-overlay .face,
.sdcmb-stage.presentation-mode .three-d.chrome.has-metal-overlay .face{
  opacity:1!important;
}

/* Tiny pattern phase shift only; do not change band angle/scale between views. */
.sdcmb .presentation-metal-overlay.overlay-left{background-position:-4px center!important}
.sdcmb .presentation-metal-overlay.overlay-front{background-position:center center!important}
.sdcmb .presentation-metal-overlay.overlay-right{background-position:4px center!important}

.sdcmb-stage.presentation-mode.night .presentation-metal-overlay.metal-gold{
  filter:brightness(.94) contrast(1.18)!important;
}
.sdcmb-stage.presentation-mode.night .presentation-metal-overlay.metal-chrome{
  filter:brightness(.92) contrast(1.20)!important;
}


/* === v0.4.9 — SVG metallic face overlay ===
   The presentation metal finish is now an SVG <text> layer with an SVG gradient.
   This avoids browser background-clip:text inconsistencies entirely. */

.sdcmb .presentation-metal-svg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:14!important;
  overflow:visible!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  display:block!important;
}

/* Base face stays underneath to keep halo/edge geometry; SVG sits visibly on top. */
.sdcmb-stage.presentation-mode .channel-gold.has-metal-overlay .face,
.sdcmb-stage.presentation-mode .channel-chrome.has-metal-overlay .face,
.sdcmb-stage.presentation-mode .three-d.gold.has-metal-overlay .face,
.sdcmb-stage.presentation-mode .three-d.chrome.has-metal-overlay .face{
  opacity:.08!important;
}

/* SVG overlay follows presentation brightness without losing the four bands. */
.sdcmb-stage.presentation-mode.night .presentation-metal-svg{
  filter:brightness(.92) contrast(1.12);
}


/* === v0.5.0 — SVG registration fix ===
   The SVG overlay now lives in the same LOCAL coordinate box as the face.
   No getBoundingClientRect-based screen coordinates are used for text placement. */
.sdcmb .presentation-metal-svg{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  z-index:14!important;
  overflow:visible!important;
  pointer-events:none!important;
  transform:none!important;
  transform-origin:0 0!important;
}


/* === v0.5.1 — vertical SVG registration ===
   SVG text now uses the same alphabetic-baseline model as the HTML face.
   No visual offset is added here; registration is calculated in local JS metrics. */
.sdcmb .presentation-metal-svg{
  transform:none!important;
  transform-origin:0 0!important;
}


/* === v0.6.0 — single-layer Presentation Preview === */
.sdcmb.presentation-mode .presentation-metal-svg text{
  filter:drop-shadow(1.5px 2.5px 1.4px rgba(0,0,0,.38));
}


/* === v0.6.1 — true single-layer preview ===
   Both original HTML identities (face AND rear/extrusion text) are hidden.
   The SVG presentation face is the sole visible text object. */
.sdcmb-stage.presentation-mode [data-presentation-base-hidden="1"]{
  visibility:hidden!important;
}

/* Give the single SVG face just enough fabricated depth/contact shadow. */
.sdcmb-stage.presentation-mode .presentation-metal-svg text{
  filter:
    drop-shadow(1px 1px 0 rgba(42,28,10,.52))
    drop-shadow(2px 2px 0 rgba(32,24,16,.36))
    drop-shadow(3px 4px 2px rgba(0,0,0,.30));
}


/* === v0.6.2 — second shadow-only layer for Presentation Preview ===
   The metallic SVG remains the only visible letter face.
   This separate SVG copy is shadow only and sits behind the face. */
.sdcmb .presentation-shadow-svg{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  z-index:11!important;
  overflow:visible!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.sdcmb .presentation-metal-svg{
  z-index:14!important;
}

/* Keep the face crisp; depth comes from the dedicated shadow copy. */
.sdcmb-stage.presentation-mode .presentation-metal-svg text{
  filter:drop-shadow(1px 1px 0 rgba(36,24,10,.24))!important;
}
.sdcmb-stage.presentation-mode.night .presentation-shadow-svg{
  opacity:.78;
}


/* === v0.6.3 desktop workspace re-balance ===
   Fine adjustments moved below the mock-up, above Presentation Preview.
   Rendering/presentation logic is unchanged. */
.sdcmb-fine-adjustments{margin-top:12px;padding:14px 16px;border:1px solid #d9e0ea;border-radius:12px;background:#fff}
.sdcmb-fine-title{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;color:#102044}
.sdcmb-fine-title span{font-size:12px;color:#6b778c}
.sdcmb-fine-grid{display:grid;grid-template-columns:minmax(360px,1.6fr) minmax(230px,.8fr) minmax(230px,1fr);gap:14px;align-items:end}
.sdcmb-fine-adjustments .sdcmb-advanced{margin:0}
.sdcmb-fine-adjustments .sdcmb-help{margin:4px 0 8px}
.sdcmb-fine-adjustments label{margin-bottom:0}
.sdcmb-fine-halo input[type=range]{width:100%}
@media(max-width:900px){.sdcmb-fine-grid{grid-template-columns:1fr}.sdcmb-fine-title{display:block}.sdcmb-fine-title span{display:block;margin-top:3px}}

/* v0.6.4 — move storefront setup below the design screen */
.sdcmb-under-stage-tools{margin-top:12px;padding:14px 16px;border:1px solid #d9e0ea;border-radius:12px;background:#f7f9fb}
.sdcmb-under-stage-title{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;color:#102044}
.sdcmb-under-stage-title span{font-size:12px;color:#6b778c}
.sdcmb-under-stage-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(520px,1.65fr);gap:12px;align-items:stretch}
.sdcmb-under-stage-grid section{background:#fff;border:1px solid #e3e8ef;border-radius:9px;padding:12px;margin:0;min-width:0}
.sdcmb-under-stage-grid h3{font-size:12px;text-transform:uppercase;letter-spacing:.55px;color:#344057;margin:0 0 10px}
.sdcmb-under-stage-grid label{display:block;font-size:11px;font-weight:750;color:#475467;margin:8px 0}
.sdcmb-under-stage-grid select{display:block;width:100%;height:38px;border:1px solid #cfd7e2;border-radius:6px;margin-top:5px;padding:0 9px;background:#fff;color:#111827}
.sdcmb-under-stage-grid input[type=color]{display:block;width:100%;height:36px;border:1px solid #cfd7e2;border-radius:6px;padding:3px;margin-top:5px;background:#fff}
.sdcmb-under-stage-grid input[type=range]{width:100%;margin-top:8px}
.sdcmb-under-stage-grid .sdcmb-bg-grid{grid-template-columns:repeat(4,1fr)}
.sdcmb-under-stage-grid .bg-thumb{height:42px}
.sdcmb-under-stage-grid .sdcmb-upload-label{margin-top:10px}
.sdcmb-under-stage-grid .sdcmb-tool-grid-four{grid-template-columns:repeat(4,1fr)}
.sdcmb-under-cover{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px;align-content:start}
.sdcmb-under-cover h3,.sdcmb-under-cover>p,.sdcmb-under-cover>.sdcmb-tool-grid,.sdcmb-under-cover>.sdcmb-three,.sdcmb-under-cover>.sdcmb-delete-cover,.sdcmb-under-cover>.sdcmb-selected-cover-status,.sdcmb-under-cover>.sdcmb-tool-done{grid-column:1/-1}
.sdcmb-under-cover>.sdcmb-tool-grid{margin-bottom:2px}
.sdcmb-under-cover>.sdcmb-three{margin-top:4px}
.sdcmb-under-cover>.sdcmb-tool-done{margin-top:8px}
.sdcmb-under-stage-grid button{min-height:36px}
@media(max-width:1100px){.sdcmb-under-stage-grid{grid-template-columns:1fr}.sdcmb-under-stage-grid .sdcmb-bg-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.sdcmb-under-stage-tools{padding:10px}.sdcmb-under-stage-title{display:block}.sdcmb-under-stage-title span{display:block;margin-top:3px}.sdcmb-under-stage-grid .sdcmb-bg-grid{grid-template-columns:1fr 1fr}.sdcmb-under-stage-grid .sdcmb-tool-grid-four{grid-template-columns:1fr 1fr}.sdcmb-under-cover{display:block}}


/* === v0.6.7 — Preview button moved into left-side empty area ===
   This follows the marked screenshot: the Preview button belongs under the sidebar,
   while the right workspace keeps Storefront Setup and the final concept CTA. */
.sdcmb-sidebar-preview-action{
  margin-top:12px;
}

.sdcmb-sidebar-preview-action .sdcmb-preview-primary{
  width:100%;
  min-height:52px;
  white-space:normal;
  line-height:1.25;
  padding:12px 10px;
}

/* The presentation controls remain with the right workspace when preview is active. */
.sdcmb-stage-wrap .sdcmb-presentation-actions{
  margin-top:10px;
}

/* The final CTA remains in the right workspace below Storefront Setup. */
.sdcmb-stage-wrap .sdcmb-bottom{
  margin-top:10px;
}

/* On mobile, keep the button in the natural stacked flow. */
@media (max-width:899px){
  .sdcmb-sidebar-preview-action{
    margin-top:10px;
  }
}