@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
.sms *,.sms *::before,.sms *::after{box-sizing:border-box;margin:0;padding:0;}
.sms{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#222;background:#fff;}
/* Force the storefront site header to remain visible on the studio page.
   Something in the theme's JS sets inline display:none on .header__wrapper
   when navigating to this page — this overrides it. */
body:has(.sticker-lab-v2-section) .header__wrapper{display:block !important;}
/* Force Shopify page containers to not constrain the fixed editor */
.sticker-lab-v2-section,
.sticker-lab-v2-section ~ *,
body:has(.sticker-lab-v2-section),
body:has(.sticker-lab-v2-section) > *:not(#shopify-section-header):not([id*="header"]),
body:has(.sticker-lab-v2-section) main,
body:has(.sticker-lab-v2-section) [role="main"],
body:has(.sticker-lab-v2-section) .page-width,
body:has(.sticker-lab-v2-section) .sf-main,
body:has(.sticker-lab-v2-section) .main-content{
  padding:0 !important;margin:0 !important;max-width:none !important;
  transform:none !important;filter:none !important;contain:none !important;
  overflow:visible !important;
}
body:has(.sticker-lab-v2-section) #shopify-section-header{position:relative !important;z-index:200 !important;}
body:has(.sticker-lab-v2-section) #shopify-section-header .sf-menu-wrapper{z-index:9999 !important;}
html:has(.sticker-lab-v2-section),
body:has(.sticker-lab-v2-section){overflow:hidden !important;background:#fff !important;margin:0 !important;padding:0 !important;width:100% !important;}
body:has(.sticker-lab-v2-section) footer,
body:has(.sticker-lab-v2-section) #shopify-section-footer{display:none !important;}
.sms-page-active,
.sms-page-active body{margin:0 !important;padding:0 !important;overflow:hidden !important;}
.sms-page-active .sf-breadcrumb,
.sms-page-active footer,
.sms-page-active #shopify-section-footer,
.sms-page-active .shopify-section:not(.sticker-studio-section):not(#shopify-section-header):not([id*="header"]){display:none !important;}
.sms-page-active .sticker-studio-section{padding:0 !important;margin:0 !important;}
.sms-page-active #TrustedSiteFloatingBadge,
.sms-page-active [id*="trustedsite"],
.sms-page-active [class*="trustedsite"],
.sms-page-active [id*="TrustedSite"],
.sms-page-active [class*="TrustedSite"],
.sms-page-active .tsf-badge,
.sms-page-active [id*="gsr-badge"],
.sms-page-active [class*="gsr-badge"],
.sms-page-active [id*="google-store"],
.sms-page-active [class*="google-store"],
.sms-page-active [data-store-badge],
.sms-page-active iframe[src*="trustedsite"],
.sms-page-active iframe[src*="google"],
.sms-page-active .shopify-cleanslate,
.sms-page-active #chat-widget-container,
.sms-page-active [class*="widget-badge"]{display:none !important;z-index:-1 !important;visibility:hidden !important;}
.sms-page-active main,
.sms-page-active .main-content,
.sms-page-active .page-width,
.sms-page-active .sf-main,
.sms-page-active [role="main"]{padding:0 !important;margin:0 !important;max-width:none !important;}
.sms-editor{display:flex;position:fixed;top:var(--sl2-header-h,0px);left:0;right:0;bottom:0;width:100%;overflow:visible;z-index:50;background:linear-gradient(160deg,#f0f2f5 0%,#e6e9ed 50%,#e2e6ea 100%);}
.sms-config{
  order:1;
  width:clamp(310px, 22vw, 380px);flex-shrink:0;
  background:rgb(248,249,250);background:rgba(248,249,250,0.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-left:1px solid rgba(0,0,0,0.06);
  overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  justify-content:flex-start;
  position:relative;z-index:10;
  margin:8px 8px 8px 0;border-radius:14px;
}
.sms-config::-webkit-scrollbar{width:0;display:none;}
.sms-config-hdr{display:none;}
.sms-config-section{padding:clamp(4px,0.6vh,8px) 12px clamp(3px,0.5vh,6px);position:relative;}
.sms-config-section + .sms-config-section{border-top:1px solid #f8f9fa;}
.sms-config-section h3{
  font-size:9px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:clamp(2px,0.4vh,5px);
  display:flex;align-items:center;gap:6px;
}
.sms-config-section h3 svg{width:12px;height:12px;stroke:rgba(0,0,0,0.15);fill:none;stroke-width:2;}
.sms-sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
.sms-size-radio{display:none;}
.sms-size-label{
  padding:clamp(6px,0.7vh,10px) 0;border-radius:20px;cursor:pointer;
  font-size:11px;font-weight:600;color:#777;background:#f8f9fa;
  border:1.5px solid #e5e7eb;transition:all .18s ease;white-space:nowrap;
  text-align:center;
}
.sms-size-label:hover{border-color:rgba(0,0,0,0.08);color:#444;background:rgba(0,0,0,0.04);transform:translateY(-1px);}
.sms-size-radio:checked + .sms-size-label{
  background:rgba(0,122,255,0.15);color:var(--sm-c-accent);border-color:rgba(0,122,255,0.4);box-shadow:0 0 12px rgba(0,122,255,0.2);transform:translateY(-1px);
}
.sms-size-dot{display:none;}
.sms-custom-size{margin-top:8px;animation:sms-fade-in .2s ease;}
.sms-custom-size-row{display:flex;align-items:center;gap:8px;}
.sms-custom-field{display:flex;flex-direction:column;flex:1;}
.sms-custom-field label{font-size:10px;font-weight:600;color:#888;margin-bottom:3px;}
.sms-custom-input{
  width:100%;padding:8px 10px;border:1.5px solid rgba(0,0,0,0.06);border-radius:10px;
  font-size:14px;font-weight:700;color:#e0e0e8;background:#f8f9fa;outline:none;
  text-align:center;transition:border-color .15s;
  -moz-appearance:textfield;
}
.sms-custom-input::-webkit-inner-spin-button,
.sms-custom-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.sms-custom-input:focus{border-color:var(--sm-c-accent);}
.sms-custom-x{font-size:14px;font-weight:700;color:rgba(0,0,0,0.15);margin-top:14px;}
.sms-shapes.sl2-shape-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(3px,0.4vw,6px);}
.sms-shape-btn.sl2-shape-card{
  height:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(2px,0.3vw,4px);
  padding:clamp(4px,0.4vw,8px) clamp(2px,0.2vw,4px);border:2px solid #e5e7eb;border-radius:clamp(8px,0.6vw,12px);cursor:pointer;background:#fff;
  transition:all .18s;position:relative;
}
.sms-shape-btn.sl2-shape-card span{display:block;font-size:clamp(7px,0.55vw,9px);font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:#666;line-height:1;}
.sms-shape-btn.sl2-shape-card:hover{border-color:rgba(0,0,0,0.12);background:rgba(0,0,0,0.02);transform:translateY(-1px);}
.sms-shape-btn.sl2-shape-card.active{border-color:var(--sm-c-accent);background:#f0f5ff;box-shadow:0 2px 8px rgba(0,122,255,0.15);transform:translateY(-1px);}
.sms-shape-btn.sl2-shape-card.active span{color:var(--sm-c-accent);}
.sms-config .sl2-shape-icon{width:clamp(28px,2.2vw,38px);height:clamp(28px,2.2vw,38px);}
.sms-config .sl2-shape-icon img{width:clamp(14px,1.1vw,20px);height:clamp(14px,1.1vw,20px);}
.sms-config .sl2-shape-card.active .sl2-shape-icon{border-color:var(--sm-c-accent);background:#e8f0fe;}
.sms-qty-row{display:flex;align-items:center;gap:10px;margin-top:4px;}
.sms-qty-slider{flex:1;-webkit-appearance:none;height:4px;border-radius:2px;background:rgba(0,0,0,0.06);outline:none;}
.sms-qty-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--sm-c-accent);cursor:pointer;border:2px solid rgba(0,0,0,0.3);box-shadow:0 0 8px rgba(0,122,255,.3);}
.sms-qty-val{width:52px;text-align:center;padding:5px;border:1.5px solid rgba(0,0,0,0.06);background:#f8f9fa;color:#e0e0e8;border-radius:6px;font-size:13px;font-weight:700;outline:none;}
.sms-qty-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.sms-qty-pre{
  padding:clamp(6px,0.7vh,10px) 0;
  border:1.5px solid #e5e7eb;border-radius:20px;
  font-size:10px;font-weight:700;cursor:pointer;background:#f8f9fa;color:#777;
  transition:all .18s ease;text-align:center;
}
.sms-qty-pre:hover{border-color:rgba(0,0,0,0.08);color:#444;background:rgba(0,0,0,0.04);transform:translateY(-1px);}
.sms-qty-pre.active{background:rgba(0,122,255,0.15);color:var(--sm-c-accent);border-color:rgba(0,122,255,0.4);box-shadow:0 0 12px rgba(0,122,255,0.2);transform:translateY(-1px);}
.sms-finish-opts{display:flex;gap:5px;}
.sms-finish-btn{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:clamp(6px,0.7vh,10px) 6px;
  border:1.5px solid #e5e7eb;border-radius:20px;cursor:pointer;background:#f8f9fa;
  font-size:11px;font-weight:600;color:#777;transition:all .15s;overflow:hidden;
}
.sms-finish-btn:hover{border-color:rgba(0,0,0,0.08);color:#444;background:rgba(0,0,0,0.04);transform:translateY(-1px);}
.sms-finish-btn.active{border-color:rgba(0,122,255,0.4);background:rgba(0,122,255,0.12);color:var(--sm-c-accent);box-shadow:0 0 12px rgba(0,122,255,0.15);transform:translateY(-1px);}
.sms-finish-swatch{width:16px;height:16px;border-radius:50%;border:1px solid #e0e0e0;flex-shrink:0;}
.sms-finish-btn.active .sms-finish-swatch{border-color:rgba(255,255,255,.3);}
.sms-swatch-matte{background:#d0d0d0;}
.sms-swatch-glossy{background:linear-gradient(135deg,#f8f8f8 0%,#e0e0e0 40%,#fff 50%,#e0e0e0 60%,#f0f0f0 100%);}
.sms-swatch-holo{background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 15%,#a1c4fd 30%,#c2e9fb 45%,#d4fc79 60%,#ffecd2 75%,#ff9a9e 100%);background-size:200% 200%;animation:sms-holo-swatch 3s ease infinite;}
@keyframes sms-holo-swatch{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.sms-sticker-stage canvas{mix-blend-mode:normal;}

#stickerStage .upper-canvas{z-index:20 !important;}

/* Drag-perf: hide expensive overlay layers and disable canvas filter/blend during
   user gestures so the browser doesn't have to re-clip a 5000-cmd path or
   re-blend/filter the canvas on every mousemove. They restore on mouseup. */
.sms-sticker-stage.sms-dragging .sms-gloss-layer,
.sms-sticker-stage.sms-dragging .sms-holo-overlay,
.sms-sticker-stage.sms-dragging .sms-vinyl-texture,
.sms-sticker-stage.sms-dragging .sms-vinyl-specular,
.sms-sticker-stage.sms-dragging .sms-edge-rim,
.sms-sticker-stage.sms-dragging .sms-gloss-overlay,
.sms-sticker-stage.sms-dragging .sms-holo-overlay-alt{display:none!important;}
.sms-sticker-stage.sms-dragging.finish-holographic canvas,
.sms-sticker-stage.sms-dragging.finish-glossy canvas,
.sms-sticker-stage.sms-dragging.finish-matte canvas{mix-blend-mode:normal!important;filter:none!important;}

.sms-gloss-layer{
  position:absolute;inset:0;pointer-events:none;z-index:10;
  opacity:0;transition:opacity 0.3s;
  background:url('https://images.pexels.com/photos/15166530/pexels-photo-15166530.jpeg?cs=srgb&dl=pexels-ricardo-olvera-225422504-15166530.jpg&fm=jpg') center/200%;
  mix-blend-mode:soft-light;
}
.sms-sticker-stage.finish-glossy .sms-gloss-layer{opacity:0.35;filter:url(#smsGlossWarp);}
.sms-sticker-stage.finish-glossy canvas{filter:contrast(1.18) saturate(1.30) brightness(1.02);}
.sms-sticker-stage.finish-matte canvas{filter:contrast(1.10) saturate(1.15) brightness(1.01);}
.sms-sticker-stage.finish-glossy .sms-edge-rim{
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,0.85),
    inset 0 -1.5px 0 rgba(0,0,0,0.22),
    inset 2.5px 0 0 rgba(255,255,255,0.50),
    inset -1.5px 0 0 rgba(255,255,255,0.35),
    inset 0 0 6px rgba(255,255,255,0.12);
}
.sms-vinyl-texture{
  position:absolute;inset:0;pointer-events:none;z-index:7;
  opacity:0;transition:opacity 0.3s;
  background:
    linear-gradient(128deg,
      transparent 0%, transparent 34%,
      rgba(255,255,255,0.05) 37%,
      rgba(255,255,255,0.13) 40%,
      rgba(255,255,255,0.05) 43%,
      transparent 46%, transparent 100%),
    linear-gradient(175deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.02) 30%,
      transparent 50%,
      rgba(0,0,0,0.02) 80%,
      rgba(0,0,0,0.04) 100%);
}
.sms-sticker-stage .sms-vinyl-texture{opacity:1;}

.sms-sticker-stage.finish-glossy .sms-vinyl-texture{
  background:
    linear-gradient(128deg,
      transparent 0%, transparent 15%,
      rgba(255,255,255,0.06) 20%,
      rgba(255,255,255,0.18) 26%,
      rgba(255,255,255,0.38) 31%,
      rgba(255,255,255,0.58) 36%,
      rgba(255,255,255,0.38) 41%,
      rgba(255,255,255,0.18) 46%,
      rgba(255,255,255,0.06) 52%,
      transparent 58%, transparent 100%),
    linear-gradient(138deg,
      transparent 0%, transparent 48%,
      rgba(255,255,255,0.08) 52%,
      rgba(255,255,255,0.18) 56%,
      rgba(255,255,255,0.08) 60%,
      transparent 64%, transparent 100%),
    linear-gradient(120deg,
      transparent 0%, transparent 63%,
      rgba(255,255,255,0.04) 66%,
      rgba(255,255,255,0.10) 69%,
      rgba(255,255,255,0.04) 72%,
      transparent 76%, transparent 100%),
    linear-gradient(175deg,
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0.12) 18%,
      transparent 38%,
      rgba(0,0,0,0.04) 70%,
      rgba(0,0,0,0.10) 100%) !important;
}

.sms-vinyl-specular{
  position:absolute;inset:0;pointer-events:none;z-index:8;
  opacity:0;transition:opacity 0.3s;
  background:radial-gradient(ellipse 50% 35% at 30% 20%,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 35%,
    transparent 60%);
}
.sms-sticker-stage .sms-vinyl-specular{opacity:1;}
.sms-sticker-stage.finish-glossy .sms-vinyl-specular{
  background:
    
    radial-gradient(ellipse 60% 45% at 28% 18%,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.25) 20%,
      rgba(255,255,255,0.06) 40%,
      transparent 55%),
    radial-gradient(ellipse 18% 12% at 30% 16%,
      rgba(255,255,255,0.70) 0%,
      rgba(255,255,255,0.20) 30%,
      transparent 50%),
    radial-gradient(ellipse 35% 25% at 72% 75%,
      rgba(255,255,255,0.12) 0%,
      transparent 45%),
    radial-gradient(ellipse 90% 85% at 50% 50%,
      transparent 55%,
      rgba(255,255,255,0.08) 70%,
      rgba(255,255,255,0.18) 85%,
      rgba(255,255,255,0.25) 100%) !important;
}

.sms-edge-rim{
  position:absolute;inset:0;pointer-events:none;z-index:9;
  opacity:0;transition:opacity 0.3s;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    inset 1px 0 0 rgba(255,255,255,0.18),
    inset -1px 0 0 rgba(255,255,255,0.18);
  border-radius:inherit;
}
.sms-sticker-stage .sms-edge-rim{opacity:1;}

.sms-sticker-depth{
  position:absolute;left:2px;right:2px;bottom:-2px;height:4px;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0.18) 0%,rgba(0,0,0,0.04) 100%);
  border-radius:0 0 8px 8px;filter:blur(0.8px);
  opacity:0;transition:opacity 0.3s;
}
.sms-sticker-stage .sms-sticker-depth{opacity:0;}

.sms-blank-shape{
  position:absolute;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  pointer-events:auto;cursor:pointer;z-index:6;
  transition:opacity 0.4s,transform 0.3s;
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:16px;
  box-shadow:0 2px 16px rgba(0,0,0,0.10);

  width:280px;height:280px;
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.sms-blank-shape.hidden{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(0.92);}
.sms-blank-shape svg{
  width:44px;height:44px;color:rgba(0,0,0,0.06);margin-bottom:10px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.06));
  transition:color 0.2s,transform 0.2s;
  animation:sms-float 3s ease-in-out infinite;
}
@keyframes sms-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sms-blank-shape:hover svg{color:rgba(0,122,255,0.5);animation:none;transform:translateY(-2px);}
.sms-blank-shape span{
  font-size:11px;font-weight:700;color:rgba(0,0,0,0.08);
  letter-spacing:0.08em;text-transform:uppercase;
  transition:color 0.2s;
}
.sms-blank-shape:hover span{color:rgba(0,122,255,0.6);}

.sms-blank-shape.finish-glossy{
  background:linear-gradient(145deg,rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.02) 50%,rgba(0,0,0,0.04) 100%);
  box-shadow:0 8px 32px rgba(0,0,0,0.22),0 2px 8px rgba(0,0,0,0.10),inset 0 2px 0 rgba(255,255,255,0.95),inset 0 -1px 0 rgba(0,0,0,0.08);
  filter:contrast(1.05) saturate(1.1);
}

.sms-blank-shape.finish-glossy::before{
  background:
    linear-gradient(var(--gloss-angle,128deg),
      transparent 0%, transparent 18%,
      #e5e7eb 23%,
      rgba(255,255,255,0.22) 28%,
      rgba(255,255,255,0.42) 33%,
      rgba(255,255,255,0.60) var(--gloss-center,37%),
      rgba(255,255,255,0.42) 41%,
      rgba(255,255,255,0.22) 46%,
      #e5e7eb 51%,
      transparent 56%, transparent 100%),
    linear-gradient(calc(var(--gloss-angle,128deg) + 10deg),
      transparent 0%, transparent 52%,
      rgba(255,255,255,0.10) 56%,
      rgba(255,255,255,0.20) 59%,
      rgba(255,255,255,0.10) 62%,
      transparent 66%, transparent 100%),
    linear-gradient(175deg,
      rgba(255,255,255,0.30) 0%,
      #e5e7eb 20%,
      transparent 40%,
      rgba(0,0,0,0.04) 75%,
      rgba(0,0,0,0.10) 100%) !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  transition:background 0.08s ease;
}

.sms-blank-shape.finish-glossy::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 40% at var(--spec-x,28%) var(--spec-y,20%),
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.22) 22%,
      transparent 50%),
    radial-gradient(ellipse 16% 11% at var(--spec-x,30%) var(--spec-y,18%),
      rgba(255,255,255,0.75) 0%,
      transparent 45%),
    radial-gradient(ellipse 30% 22% at calc(100% - var(--spec-x,28%)) calc(100% - var(--spec-y,20%)),
      rgba(255,255,255,0.10) 0%,
      transparent 40%),
    radial-gradient(ellipse 90% 85% at 50% 50%,
      transparent 55%,
      rgba(0,0,0,0.04) 70%,
      rgba(255,255,255,0.14) 85%,
      rgba(255,255,255,0.22) 100%);
  transition:background 0.08s ease;
}
.sms-blank-shape.finish-holographic{
  background:linear-gradient(135deg,
    rgba(255,200,200,0.18) 0%,
    rgba(200,255,200,0.18) 25%,
    rgba(200,200,255,0.18) 50%,
    rgba(255,255,200,0.18) 75%,
    rgba(255,200,255,0.18) 100%),rgba(255,255,255,0.98);
  box-shadow:0 8px 32px rgba(0,0,0,0.2),0 2px 8px rgba(0,0,0,0.08),inset 0 0 30px rgba(200,100,255,0.06);
}
.sms-blank-shape.finish-holographic::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,
    rgba(255,100,100,0.08) 0%,
    rgba(100,255,100,0.06) 30%,
    rgba(100,100,255,0.08) 60%,
    rgba(255,255,100,0.06) 100%);
  background-size:200% 200%;
  animation:sms-holo-blank 4s ease infinite;
  mix-blend-mode:overlay;
}
@keyframes sms-holo-blank{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}

.sms-blank-shape::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.02) 30%,
      rgba(0,0,0,0.015) 60%,
      rgba(0,0,0,0.04) 100%),
    radial-gradient(ellipse at 30% 25%,
      rgba(255,255,255,0.10) 0%,
      transparent 55%);
  mix-blend-mode:overlay;
  opacity:0.5;
}
.sms-blank-shape[data-shape="circle"]{border-radius:50%;}
.sms-blank-shape[data-shape="oval"]{border-radius:50%;}
.sms-blank-shape[data-shape="square"]{border-radius:8px;}
.sms-blank-shape[data-shape="rectangle"]{border-radius:8px;}
.sms-blank-shape[data-shape="die-cut"]{border-radius:16px;}
.sms-blank-shape[data-shape="rounded-square"]{border-radius:24px;}

.sms-holo-overlay{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:0;transition:opacity 0.3s;
  background:url('/builder-assets/holographic.svg') center/150%;
  image-rendering:auto;
}
.sms-sticker-stage.finish-holographic .sms-holo-overlay{opacity:1;}
.sms-sticker-stage.finish-holographic canvas{
  position:relative;z-index:2;
  mix-blend-mode:multiply;
  filter:brightness(1.35) saturate(1.2);
}

.sms-sticker-stage.finish-holographic .sms-vinyl-texture{opacity:0 !important;}
.sms-sticker-stage.finish-holographic .sms-vinyl-specular{opacity:0 !important;}
.sms-sticker-stage.finish-holographic .sms-gloss-layer{opacity:0 !important;}
.sms-sticker-stage.finish-holographic .sms-edge-rim{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    inset 1px 0 0 rgba(255,255,255,0.10),
    inset -1px 0 0 rgba(255,255,255,0.10);
}
.sms-price-box{
  padding:clamp(4px,0.6vh,8px) 12px clamp(3px,0.5vh,6px);margin-top:auto;
  background:rgba(255,255,255,0.02);
  border-top:1px solid rgba(0,0,0,0.04);
}
.sms-price-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;}
.sms-price-label{font-size:12px;color:#888;}
.sms-price-val{font-size:12px;font-weight:600;color:rgba(255,255,255,0.7);}
.sms-price-total{font-size:clamp(16px,2vh,22px);font-weight:800;color:#222;letter-spacing:-0.03em;transition:transform 0.15s ease;}
.sms-price-total.sms-price-bump{animation:sms-price-bump 0.35s ease;}
@keyframes sms-price-bump{0%{transform:scale(1)}30%{transform:scale(1.08);color:var(--sm-c-accent)}100%{transform:scale(1);color:#222}}
.sms-price-unit{font-size:11px;color:#888;margin-top:1px;transition:opacity 0.15s;}
.sms-atc-bottom{
  margin:clamp(3px,0.4vh,6px) 0 0;padding:clamp(6px,0.7vh,10px);
  background:linear-gradient(135deg,var(--sm-c-accent) 0%,#3B82F6 50%,#2176CC 100%);
  color:#222;border:none;border-radius:10px;
  font-size:11px;font-weight:700;cursor:pointer;transition:all .25s ease;
  display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:0.04em;
  position:relative;overflow:hidden;
  box-shadow:0 3px 14px rgba(0,122,255,0.3);
}
.sms-atc-bottom::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 0%,rgba(0,0,0,0.06) 50%,transparent 100%);
  opacity:0;transition:opacity 0.3s;
}
.sms-atc-bottom:hover:not(:disabled)::before{opacity:1;}
.sms-atc-bottom:hover:not(:disabled){
  box-shadow:0 6px 30px rgba(0,122,255,0.45),0 0 40px rgba(0,122,255,0.1);
  transform:translateY(-2px);
}
.sms-atc-bottom:active:not(:disabled){transform:scale(0.97) translateY(0);}
#btnViewCart:hover{background:#e5e7eb !important;color:#222 !important;transform:translateY(-1px) !important;}
#btnCheckout:hover{background:rgba(0,122,255,0.8) !important;transform:translateY(-1px) !important;}
.sms-atc-bottom:disabled{opacity:.2;cursor:not-allowed;transform:none;box-shadow:none;}
.sms-atc-bottom:not(:disabled){animation:sms-atc-ready 0.5s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 3px 12px rgba(0,0,0,0.15);}
@keyframes sms-atc-ready{0%{transform:scale(0.94) translateY(6px);opacity:0}60%{transform:scale(1.02) translateY(-2px)}100%{transform:scale(1) translateY(0);opacity:1}}
.sms-atc-bottom.sms-atc-success{
  background:linear-gradient(135deg,var(--sm-c-accent) 0%,#3B82F6 100%) !important;
  box-shadow:0 4px 20px rgba(0,122,255,0.35) !important;
  animation:sms-atc-success-pulse 0.6s ease !important;
}
@keyframes sms-atc-success-pulse{0%{transform:scale(0.97)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.sms-download-btn{
  margin:6px 0 0;padding:10px;background:#f8f9fa;color:#777;border:1.5px solid #e5e7eb;border-radius:12px;
  font-size:11px;font-weight:600;cursor:pointer;transition:all .18s ease;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.sms-download-btn:hover{background:#e5e7eb;border-color:rgba(0,0,0,0.08);color:#444;transform:translateY(-1px);}
.sms-download-btn:disabled{opacity:.2;cursor:not-allowed;}
@media(max-width:768px){
  .sms-editor{
    flex-direction:column;position:relative !important;inset:auto !important;
    height:auto !important;min-height:100vh;min-height:100dvh;
    overflow-y:auto !important;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  }

  .sms-page-active,
  .sms-page-active body{overflow:auto !important;overflow-y:auto !important;}
  .sms-editor{
    position:relative !important;
    overflow-y:auto !important;overflow-x:hidden !important;
    height:auto !important;min-height:100vh !important;min-height:100dvh !important;
    flex-direction:column !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .sms-toolstrip{
    order:0 !important;width:100% !important;flex-shrink:0 !important;
    display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;
    padding:clamp(3px,1vw,6px) clamp(4px,1.2vw,8px) !important;
    border:none !important;
    align-items:stretch !important;justify-content:center !important;
    gap:clamp(3px,1vw,5px) !important;
    overflow:visible !important;
  }

  .sms-tool-group{
    display:flex !important;flex-direction:column !important;
    flex:1 1 40% !important;min-width:0 !important;
    border:1px solid rgba(255,255,255,0.12) !important;
    border-radius:clamp(8px,2.5vw,12px) !important;
    padding:clamp(3px,0.8vw,6px) clamp(3px,1vw,6px) clamp(4px,1vw,7px) !important;
    background:#f8f9fa !important;
    gap:0 !important;
  }

  
  .sms-tool-group-label{
    display:block !important;
    font-size:0 !important;
    font-weight:700 !important;
    color:rgba(255,255,255,0.40) !important;
    text-transform:uppercase !important;
    letter-spacing:0.8px !important;
    text-align:center !important;
    margin-bottom:clamp(2px,0.6vw,4px) !important;
    padding:0 !important;line-height:1 !important;
  }
  .sms-tool-group-label::after{
    display:block !important;height:auto !important;
    font-size:clamp(8px,2.4vw,12px) !important;
    font-weight:700 !important;color:rgba(255,255,255,0.50) !important;
    text-transform:uppercase !important;letter-spacing:0.6px !important;text-align:center !important;
    margin-bottom:clamp(1px,0.4vw,3px) !important;
  }
  .sms-tool-group:nth-child(1) .sms-tool-group-label::after{content:'BORDER';}
  .sms-tool-group:nth-child(2) .sms-tool-group-label::after{content:'BACKGROUND';}
  .sms-tool-group:nth-child(3) .sms-tool-group-label::after{content:'ADD';}
  .sms-tool-group:nth-child(4) .sms-tool-group-label::after{content:'EDIT';}
  .sms-tool-group-icons{
    display:flex !important;gap:clamp(1px,0.5vw,3px) !important;
    justify-content:center !important;flex-wrap:nowrap !important;
    width:100% !important;
  }
  .sms-add-grid{
    display:flex !important;gap:clamp(1px,0.5vw,3px) !important;
    justify-content:center !important;flex-wrap:nowrap !important;
    width:100% !important;
    grid-template-columns:none !important;
  }

  .sms-tool-group:last-child{
    flex-direction:row !important;flex-wrap:wrap !important;
    align-items:center !important;
  }
  .sms-tool-group:last-child > .sms-tool-group-label{flex:0 0 100% !important;}
  .sms-edit-tools{
    display:flex !important;gap:clamp(1px,0.5vw,3px) !important;
    margin-top:0 !important;flex-wrap:nowrap !important;
  }
  .sms-tool-icon span,
  .sms-tool-action span{display:block !important;font-size:8px !important;line-height:1 !important;margin-top:1px !important;opacity:0.7 !important;}

  .sms-tool-icon,
  .sms-edit-tools .sms-tool-icon{
    flex:1 1 0 !important;min-width:0 !important;
    max-width:56px !important;
    width:auto !important;height:44px !important;
    padding:4px 0 2px !important;display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;
    border-radius:8px !important;gap:0 !important;position:relative !important;
  }
  .sms-tool-icon svg{
    width:20px !important;
    height:20px !important;
  }
  .sms-tool-action{
    flex:1 1 0 !important;min-width:0 !important;
    max-width:56px !important;
    width:auto !important;height:44px !important;
    padding:4px 0 2px !important;display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;
    border-radius:8px !important;gap:0 !important;position:relative !important;
  }
  .sms-tool-action svg{
    width:20px !important;
    height:20px !important;
  }
  .sms-tool-icon[data-cut="loose"]::after,
  .sms-tool-icon[data-bg="ai"]::after,.sms-tool-icon[data-bg="pro"]::after,
  #btnTemplates::after,#btnRedo::after{content:none !important;}
  .sms-tool-icon[data-cut="loose"],.sms-tool-icon[data-bg="ai"],.sms-tool-icon[data-bg="pro"],
  #btnTemplates,#btnRedo{margin-right:0 !important;}
  #smsBorderColorRow{display:none !important;}
  #bgStatus{display:none !important;}
  #btnDownload{display:none !important;}
  .sms-canvas-area{order:1 !important;flex:none;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 0 52px 0;}
  #btnShareLink{bottom:-44px !important;left:12px !important;padding:10px 18px !important;font-size:13px !important;border-radius:12px !important;}
  #btnShareLink svg{width:14px !important;height:14px !important;}
  #smsZoomControls{bottom:-44px !important;right:12px !important;}
  #smsZoomControls button{width:40px !important;height:40px !important;font-size:18px !important;}
  #smsZoomControls #btnZoomReset{min-width:48px !important;font-size:12px !important;}
  .sms-preview{position:relative !important;inset:auto !important;min-height:280px;width:100%;display:flex !important;align-items:center !important;justify-content:center !important;perspective:900px !important;}
  .sms-dz-inner{padding:24px 16px;}
  .sms-dz h3{font-size:15px;}
  .sms-dz p{font-size:12px;margin-bottom:10px;}

  .sms-config{order:2 !important;width:100% !important;border-left:none;border-top:1px solid rgba(0,0,0,0.04);max-height:none;overflow-y:visible;justify-content:flex-start;margin:0 !important;border-radius:0 !important;}
  .sms-config-section{padding:10px 16px !important;}
  .sms-config-section h3{font-size:13px !important;}
  .sms-sizes{grid-template-columns:repeat(5,1fr) !important;gap:6px !important;}
  .sms-size-label{min-height:40px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:14px !important;border-radius:10px !important;}
  .sms-shapes{grid-template-columns:repeat(3,1fr) !important;gap:6px !important;}
  .sms-shape-btn{min-height:44px !important;border-radius:10px !important;font-size:10px !important;}
  .sms-shape-btn svg{width:20px !important;height:20px !important;}
  .sms-qty-presets{grid-template-columns:repeat(5,1fr) !important;gap:6px !important;}
  .sms-qty-pre{min-height:40px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:13px !important;border-radius:10px !important;}
  .sms-finish-opts{display:flex;gap:6px !important;}
  .sms-finish-btn{min-height:40px !important;font-size:13px !important;border-radius:10px !important;flex:1 !important;}
  .sms-price-box{padding:10px 16px;}
  .sms-atc-bottom{margin:8px 0 0 !important;min-height:50px !important;font-size:15px !important;border-radius:14px !important;}
  .sms-download-btn{margin:0 16px 16px;}
  #smsQuickBar{top:auto !important;bottom:8px !important;}
  #smsTextToolbar{
    left:0 !important;right:0 !important;transform:none !important;
    top:0 !important;border-radius:0 0 14px 14px !important;
    padding:10px 12px !important;
  }
  #smsTbRow1{gap:5px !important;flex-wrap:nowrap !important;}
  #smsTbFont{max-width:none !important;font-size:12px !important;flex:1 !important;min-width:0 !important;}
  #smsTbSize{width:42px !important;font-size:12px !important;}
  #smsTbSwatches{justify-content:space-between !important;gap:0 !important;margin-top:8px !important;}
  #smsTbSwatches span[data-c]{width:24px !important;height:24px !important;}
  #smsTbSwatches #smsTbColor{width:26px !important;height:26px !important;}
}
.sms-canvas-area{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-width:0;position:relative;overflow:visible;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,122,255,0.025) 0%, transparent 70%),
    linear-gradient(160deg,#f0f2f5 0%,#e6e9ed 50%,#e2e6ea 100%);
}
.sms-canvas-area::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,0,0,0.06) 1px,transparent 1px);
  background-size:24px 24px;
  opacity:0.6;
}
.sms-dz{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  cursor:pointer;z-index:5;
}
.sms-dz.visible{display:flex;}
.sms-dz:hover .sms-dz-inner{border-color:var(--sm-c-accent);background:rgba(0,122,255,.04);}
.sms-dz.dragover .sms-dz-inner{border-color:var(--sm-c-accent);background:rgba(0,122,255,.08);}
.sms-dz-inner{border:2px dashed rgba(0,0,0,0.08);border-radius:16px;padding:60px 40px;text-align:center;transition:all .2s;max-width:440px;}
.sms-dz-icon{width:56px;height:56px;background:rgba(0,122,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.sms-dz-icon svg{width:24px;height:24px;color:var(--sm-c-accent);}
.sms-dz h3{font-size:17px;font-weight:700;color:#e0e0e8;margin-bottom:5px;}
.sms-dz p{font-size:13px;color:#888;margin-bottom:16px;}
.sms-dz-browse{padding:12px 28px;background:var(--sm-c-accent);color:#222;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;}
.sms-dz-browse:hover{background:#3B82F6;}
.sms-preview{display:flex;position:absolute;inset:0;perspective:900px;overflow:visible;align-items:center;justify-content:center;}
.sms-preview.visible{display:flex;}
.sms-sticker-stage{
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.08s ease-out;
  will-change:transform;
  isolation:isolate;
  min-width:280px;min-height:280px;
  flex-shrink:0;
}
.sms-sticker-stage canvas{display:block;border-radius:12px;image-rendering:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.sms-sticker-stage.sms-enter{animation:sms-sticker-enter 0.5s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes sms-sticker-enter{0%{opacity:0;transform:scale(0.85) translateY(12px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.sms-gloss{
  position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:12px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 60%);
  opacity:0;transition:opacity 0.15s;mix-blend-mode:overlay;
}
.sms-sticker-stage:hover .sms-gloss{opacity:1;}
.sms-stage-shadow{display:none;}
.sms-dim-label{display:none;}
.sms-rulers{position:absolute;pointer-events:none;z-index:10;}
.sms-ruler{position:absolute;display:flex;align-items:center;justify-content:center;}
.sms-ruler-line{background:rgba(0,0,0,0.1);}
.sms-ruler-h{bottom:-28px;left:0;right:0;height:26px;flex-direction:column;}
.sms-ruler-h .sms-ruler-line{width:100%;height:1px;}
.sms-ruler-h .sms-ruler-cap{position:absolute;top:0;width:1px;height:10px;background:rgba(0,0,0,0.1);}
.sms-ruler-h .sms-ruler-cap.left{left:0;}
.sms-ruler-h .sms-ruler-cap.right{right:0;}
.sms-ruler-h .sms-ruler-label{margin-top:4px;}
.sms-ruler-v{right:-36px;top:0;bottom:0;width:34px;flex-direction:row;align-items:center;}
.sms-ruler-v .sms-ruler-line{height:100%;width:1px;}
.sms-ruler-v .sms-ruler-cap{position:absolute;left:0;height:1px;width:10px;background:rgba(0,0,0,0.1);}
.sms-ruler-v .sms-ruler-cap.top{top:0;}
.sms-ruler-v .sms-ruler-cap.bottom{bottom:0;}
.sms-ruler-v .sms-ruler-label{margin-left:6px;writing-mode:vertical-lr;text-orientation:mixed;}
.sms-ruler-label{
  font-size:13px;font-weight:800;color:#666;font-family:'SF Mono',Monaco,monospace;
  letter-spacing:0.3px;white-space:nowrap;
}
.sms-adjust-bar{
  display:none;position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:30;
  background:rgba(255,255,255,0.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #e5e7eb;border-radius:10px;padding:4px;box-shadow:0 4px 20px rgba(0,0,0,.12);
  gap:4px;align-items:center;
}
.sms-adjust-bar.visible{display:flex;}
#smsQuickBar button:hover{background:rgba(255,255,255,0.12);}
#smsQuickBar.visible{display:flex;}
.sms-adjust-bar button{
  padding:8px 16px;border:none;border-radius:7px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px;
}
.sms-adjust-rotate{background:rgba(0,0,0,0.04);color:#666;}
.sms-adjust-rotate:hover{background:rgba(0,0,0,0.06);color:#222;}
.sms-adjust-rotate svg{width:14px;height:14px;}
.sms-adjust-done{background:var(--sm-c-accent);color:#222;font-weight:600;}
.sms-adjust-done:hover{background:#3B82F6;}
.sms-adjust-hint{
  display:none;position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:30;
  padding:6px 16px;background:rgba(0,0,0,0.7);color:#222;border-radius:6px;
  font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;
}
.sms-adjust-hint.visible{display:block;}
.sms-progress{position:absolute;inset:0;background:rgba(255,255,255,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;}
.sms-progress.hidden{display:none;}
.sms-spinner{width:32px;height:32px;border:3px solid #e0e0e0;border-top-color:var(--sm-c-accent);border-radius:50%;animation:sms-spin .8s linear infinite;}
@keyframes sms-spin{to{transform:rotate(360deg)}}
@keyframes sms-fade-in{from{opacity:0}to{opacity:1}}
@keyframes sms-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.sms-progress-text{margin-top:8px;font-size:13px;font-weight:600;color:#888;}
.sms-toolstrip{
  order:-1;
  width:clamp(240px, 18vw, 290px);flex-shrink:0;
  background:rgb(248,249,250);background:rgba(248,249,250,0.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-right:1px solid rgba(0,0,0,0.06);
  display:flex;flex-direction:column;padding:0;gap:0;
  overflow:hidden;
  position:relative;z-index:10;
  margin:8px 0 8px 8px;border-radius:14px;
}
.sms-toolstrip::-webkit-scrollbar{width:0;display:none;}
.sms-tool-group{display:flex;flex-direction:column;align-items:stretch;padding:clamp(5px,0.8vh,10px) 10px clamp(4px,0.6vh,8px);border-bottom:1px solid #f8f9fa;flex-shrink:1;min-height:0;}
.sms-tool-group-label{font-size:10px;font-weight:800;color:rgba(0,0,0,0.55);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:clamp(4px,0.6vh,7px);padding-left:2px;}
.sms-tool-group-icons{display:flex;flex-wrap:wrap;gap:6px;width:100%;}
.sms-tool-icon{
  flex:1 1 0;min-width:0;padding:clamp(4px,0.5vh,7px) 4px;border:1.5px solid transparent;background:rgba(255,255,255,.04);color:#888;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  border-radius:8px;transition:all .15s;font-size:0;
}
.sms-tool-icon span{font-size:8px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;line-height:1;white-space:nowrap;}
.sms-tool-icon:hover{background:rgba(255,255,255,.08);color:#ccc;border-color:rgba(255,255,255,.10);transform:translateY(-1px);}
.sms-tool-icon.active{background:rgba(0,122,255,.12);color:var(--sm-c-accent);border-color:rgba(0,122,255,.3);box-shadow:0 0 8px rgba(0,122,255,0.1);}
.sms-tool-icon svg{width:20px;height:20px;}
.sms-tool-icon.disabled{opacity:.2;pointer-events:none;}
.sms-add-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%;}
/* AI Image action — distinct gradient bg + NEW badge to signal new capability */
.sms-tool-action.sms-ai-action,.sms-tool-icon.sms-ai-action{background:linear-gradient(135deg,rgba(0,122,255,0.10),rgba(0,122,255,0.10));border-color:rgba(0,122,255,0.35);position:relative;}
.sms-tool-action.sms-ai-action svg,.sms-tool-icon.sms-ai-action svg{color:#00a087;}
.sms-tool-action.sms-ai-action::after,.sms-tool-icon.sms-ai-action::after{content:'NEW';position:absolute;top:2px;right:2px;background:linear-gradient(135deg,#00d2b0,#00a087);color:#fff;font-size:7px;font-weight:800;padding:1px 4px;border-radius:4px;letter-spacing:0.5px;line-height:1;box-shadow:0 1px 3px rgba(0,122,255,0.4);}
.sms-tool-action.sms-ai-action:hover,.sms-tool-icon.sms-ai-action:hover{background:linear-gradient(135deg,rgba(0,122,255,0.18),rgba(0,122,255,0.18));border-color:var(--sm-c-brand);}
.sms-add-grid .sms-tool-icon{padding:5px 2px;font-size:9px;}
.sms-add-grid .sms-tool-icon svg{width:18px;height:18px;}
.sms-add-grid .sms-tool-icon span{font-size:8.5px;letter-spacing:0.02em;}
.sms-tool-action{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:clamp(4px,0.5vh,7px) 4px;border:1.5px solid transparent;background:rgba(255,255,255,.04);
  color:#888;cursor:pointer;border-radius:8px;transition:all .15s ease;font-size:0;
  position:relative;overflow:hidden;
}
.sms-tool-action::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,122,255,0.06) 0%,transparent 60%);
  opacity:0;transition:opacity .2s;border-radius:inherit;
}
.sms-tool-action svg{width:18px;height:18px;flex-shrink:0;transition:color .2s,transform .2s;}
.sms-tool-action span{font-size:7px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;white-space:nowrap;line-height:1;}
.sms-tool-action:hover{background:rgba(255,255,255,.08);color:#ccc;border-color:rgba(255,255,255,.10);transform:translateY(-1px);}
.sms-tool-action:hover::before{opacity:1;}
.sms-tool-action:hover svg{color:var(--sm-c-accent);transform:scale(1.08);}
.sms-tool-action:active{transform:scale(0.97);}
.sms-edit-tools{display:flex;gap:4px;width:100%;}
.sms-edit-tools .sms-tool-icon{padding:clamp(3px,0.4vh,6px) 2px;flex:1 1 0;}
.sms-edit-tools .sms-tool-icon svg{width:14px;height:14px;}
.sms-edit-tools .sms-tool-icon span{font-size:7px;}
.sms-bg-status{font-size:9px;color:#666;padding:4px 2px 0;}

.sms-file-input{display:none;}
#smsTbColor::-webkit-color-swatch-wrapper{padding:0;}
#smsTbColor::-webkit-color-swatch{border:none;border-radius:50%;}
#smsTbColor::-moz-color-swatch{border:none;border-radius:50%;}
#smsTbStrokeColor::-webkit-color-swatch-wrapper{padding:0;}
#smsTbStrokeColor::-webkit-color-swatch{border:none;border-radius:50%;}
#smsTbStrokeColor::-moz-color-swatch{border:none;border-radius:50%;}
#smsTextColor::-webkit-color-swatch-wrapper{padding:0;}
#smsTextColor::-webkit-color-swatch{border:none;border-radius:50%;}
#smsTextColor::-moz-color-swatch{border:none;border-radius:50%;}
#smsTbSwatches span[data-c]:hover{transform:scale(1.2) !important;}
@media(min-width:769px) and (max-width:900px){
  .sms-editor{flex-direction:column;height:auto;min-height:100vh;min-height:100dvh;}
  .sms-canvas-area{order:0;min-height:45vh;overflow:visible;flex:none;}
  .sms-config{order:1;width:100%;max-height:none;border-left:none;border-top:1px solid rgba(0,0,0,0.04);margin:0;border-radius:0;}
  .sms-toolstrip{order:2;width:100%;flex-direction:row;overflow-x:auto;border-right:none;border-top:1px solid rgba(0,0,0,0.04);padding:0;gap:0;margin:0;border-radius:0;}
  .sms-tool-group{flex-direction:row;padding:4px 6px;border-bottom:none;border-right:1px solid rgba(0,0,0,0.04);flex-shrink:0;gap:0;}
  .sms-tool-group-label{display:none;}
  .sms-tool-group-icons{flex-wrap:nowrap;gap:0;}
  .sms-tool-icon{width:auto;padding:6px 8px;gap:2px;}
  .sms-tool-icon span{font-size:8px;}
  .sms-tool-icon svg{width:16px;height:16px;}
  .sms-flyout{right:0;top:auto;bottom:60px;width:100%;height:300px;}
}
.sms-border-color-btn{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.55);cursor:pointer;padding:0;transition:all .15s;box-sizing:border-box;}
.sms-border-color-btn[data-bcolor="#ffffff"]{border-color:#666;}
.sms-border-color-btn.active{border-color:#fff !important;box-shadow:0 0 0 1.5px #1a1a1a,0 0 0 3px rgba(0,122,255,0.85);}
.sms-border-color-btn[data-bcolor="#ffffff"].active{border-color:#666 !important;box-shadow:0 0 0 1.5px #fff,0 0 0 3px rgba(0,122,255,0.85);}
/* Custom color picker — visually obvious as a "rainbow" picker so users can
   tell it's clickable and not just another color swatch. Uses a conic
   gradient through the spectrum, with the actual selected swatch inset
   slightly so the rainbow ring is always visible around the picked color. */
#smsBorderColorCustom{background:conic-gradient(from 0deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)!important;border-color:#666!important;}
#smsBorderColorCustom::-webkit-color-swatch-wrapper{padding:3px;border-radius:50%;}
#smsBorderColorCustom::-webkit-color-swatch{border:1px solid rgba(0,0,0,0.25);border-radius:50%;}
#smsBorderColorCustom::-moz-color-swatch{border:1px solid rgba(0,0,0,0.25);border-radius:50%;}
.sms-csw{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s;}
.sms-gsw{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s;flex-shrink:0;}
.sms-qbb{width:32px;height:32px;border:none;background:transparent;color:#fff;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.sms-swlbl{font-size:8px;font-weight:700;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.5px;width:42px;flex-shrink:0;}
.sms-dlbtn{position:absolute;bottom:12px;margin:0;padding:8px 16px;font-size:11px;border-radius:10px;z-index:10;backdrop-filter:blur(6px);background:rgba(255,255,255,0.85);border:1px solid rgba(0,0,0,0.08);box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.sms-zb{border:none;background:none;cursor:pointer;color:#555;transition:background .15s;}
.sms-zb:hover{background:#f0f0f0;}
.sms-tbi{background:#2a2a3e!important;color:#fff!important;border:1px solid #444!important;border-radius:6px;outline:none;}
.sms-tbb{border:none;background:#2a2a3e;color:#fff;border-radius:5px;cursor:pointer;transition:background .15s;width:28px;height:28px;line-height:28px;font-size:13px;}
#smsPreviewOverlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
#smsPreviewClose{position:absolute;top:20px;right:24px;z-index:10;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,0.1);color:#fff;font-size:20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;}
#smsPreviewClose:hover{background:rgba(255,255,255,0.2);}
#smsPreviewCarousel{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#smsPreviewDots{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
#smsPreviewATC{padding:12px 32px;border-radius:24px;border:none;background:linear-gradient(135deg,var(--sm-c-brand),#00b896);color:#fff;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:0.03em;transition:all .2s;box-shadow:0 4px 20px rgba(0,122,255,0.3);}
.sms-preview-group{margin-top:auto;flex-shrink:0;padding:6px 10px 8px !important;border-bottom:none !important;border-top:1px solid rgba(0,0,0,0.06);display:flex;flex-direction:column;gap:5px;}
.sms-preview-pill,.sms-startover-pill{width:100%;padding:7px 0;border-radius:10px;border:1.5px solid rgba(0,0,0,0.08);background:rgba(255,255,255,0.92);color:#555;font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 1px 4px rgba(0,0,0,0.06);letter-spacing:0.02em;}
.sms-startover-pill:hover{border-color:#e53935;color:#e53935;background:rgba(255,255,255,0.95);transform:translateY(-1px);box-shadow:0 4px 12px rgba(229,57,53,0.12);}
.sms-startover-pill:disabled{opacity:0.3;cursor:not-allowed;}
.sms-ca{flex:1;padding:6px 0;border-radius:10px;font-size:10px;font-weight:700;text-align:center;transition:all .18s;letter-spacing:0.02em;text-decoration:none;cursor:pointer;}
#smsTextToolbar{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:20;background:linear-gradient(135deg,#1a1a2e,#1e1e36);border-radius:14px;padding:8px 12px;gap:0;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(8px);min-width:0;}
#smsQuickBar{position:absolute;z-index:22;left:50%;transform:translateX(-50%);background:rgba(30,30,46,0.95);border-radius:10px;padding:3px 4px;gap:2px;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,0.4),0 1px 4px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(8px);}
.sms-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:sms-fade-in .2s ease;}
.sms-modal-box{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:24px;width:90%;max-width:520px;max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 24px 80px rgba(0,0,0,0.2);animation:sms-slide-up .25s ease;color:#222;}
.sms-modal-box h3{font-size:18px;font-weight:700;margin-bottom:16px;color:#222;}
.sms-modal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.sms-modal-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .15s;background:#fff;-webkit-tap-highlight-color:rgba(0,122,255,0.1);touch-action:manipulation;}
.sms-modal-item:hover,.sms-modal-item:active{border-color:var(--sm-c-accent);background:rgba(0,122,255,0.06);}
.sms-modal-item svg{width:40px;height:40px;}
.sms-modal-item span{font-size:10px;font-weight:600;color:#666;text-align:center;line-height:1.2;}
.sms-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:22px;color:#888;cursor:pointer;padding:4px;}
.sms-modal-close:hover{color:#222;}
.sms-template-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;border:2px solid #e5e7eb;border-radius:14px;cursor:pointer;transition:all .15s;background:rgba(0,0,0,0.02);text-align:center;}
.sms-template-card:hover{border-color:var(--sm-c-accent);background:rgba(0,122,255,0.06);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2);}
.sms-template-card .sms-tpl-icon{width:56px;height:56px;background:rgba(255,255,255,0.05);border-radius:12px;display:flex;align-items:center;justify-content:center;}
.sms-template-card .sms-tpl-icon svg{width:32px;height:32px;}
.sms-template-card .sms-tpl-name{font-size:12px;font-weight:700;color:#e0e0e8;}
.sms-template-card .sms-tpl-desc{font-size:10px;color:#888;line-height:1.3;}
.sms-clipart-cat{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:1px;padding:8px 0 4px;grid-column:1/-1;}

/* ── PREVIEW MOCKUP ── */
.sms-preview-pill:not(:disabled):hover{border-color:var(--sm-c-accent);color:var(--sm-c-accent);background:rgba(255,255,255,0.95);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,122,255,0.15);}
.sms-preview-pill:disabled{opacity:0.3;cursor:not-allowed;}
#smsPreviewCarousel::-webkit-scrollbar{display:none;}
.sms-scene{
  flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;position:relative;
  perspective:1200px;
}
.sms-scene-surface{
  position:relative;transform-style:preserve-3d;
  transition:transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.sms-scene-sticker{
  position:absolute;transform-origin:center center;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.35)) drop-shadow(0 5px 14px rgba(0,0,0,0.32));
  will-change:transform,opacity;
}
.sms-scene-label{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:#888;font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;white-space:nowrap;
}
.sms-dot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.25);
  cursor:pointer;transition:all .2s;
}
.sms-dot.active{background:var(--sm-c-accent);transform:scale(1.3);}

/* Slap animation */
@keyframes sms-slap-in{
  0%{opacity:0;transform:translate(-50%,-50%) translate(120px,-180px) rotate(25deg) scale(1.3);}
  40%{opacity:1;transform:translate(-50%,-50%) translate(0,0) rotate(-3deg) scale(1);}
  55%{transform:translate(-50%,-50%) translate(0,4px) rotate(0deg) scaleX(1.06) scaleY(0.94);}
  70%{transform:translate(-50%,-50%) translate(0,-2px) rotate(1deg) scale(1);}
  85%{transform:translate(-50%,-50%) translate(0,1px) rotate(0deg) scale(1.01);}
  100%{transform:translate(-50%,-50%) translate(0,0) rotate(0deg) scale(1);}
}
@keyframes sms-shadow-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,122,255,0);}
  50%{box-shadow:0 0 0 20px rgba(0,122,255,0.08);}
  100%{box-shadow:0 0 0 40px rgba(0,122,255,0);}
}
.sms-sticker-slap{animation:sms-slap-in 0.7s cubic-bezier(0.22,1,0.36,1) forwards;}
.sms-slap-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  animation:sms-shadow-pulse 0.6s ease-out forwards;
}

/* Scene backgrounds — real photos via CSS custom properties set in Liquid */
.sms-scene-bumper{
  width:min(700px,85vw);height:min(400px,50vh);border-radius:12px;overflow:hidden;
  background-image:var(--lab-scene-escalade);
  background-size:cover;background-position:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  position:relative;
}
.sms-scene-bumper::before,.sms-scene-bumper::after{display:none;}

.sms-scene-stopsign{
  width:min(500px,70vw);height:min(420px,55vh);border-radius:12px;overflow:hidden;
  background-image:var(--lab-scene-stopsign);
  background-size:cover;background-position:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  position:relative;
}
.sms-stopsign-oct,.sms-stopsign-pole{display:none;}

.sms-scene-laptop{
  width:min(500px,70vw);height:min(450px,58vh);border-radius:12px;overflow:hidden;
  background-image:var(--lab-scene-laptop);
  background-size:cover;background-position:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  position:relative;
}
.sms-scene-laptop::before{display:none;}

.sms-scene-iphone{
  width:min(340px,50vw);height:min(480px,62vh);border-radius:12px;overflow:hidden;
  background-image:var(--lab-scene-iphone);
  background-size:cover;background-position:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  position:relative;
}

/* ══════════ CANVA-STYLE MOBILE UI ══════════ */
/* Scoped to lab section only */
@media(max-width:768px){
  .sticker-lab-v2-section .sms-editor{
    flex-direction:column !important;position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100% !important;height:100% !important;overflow:visible !important;
    max-width:none !important;margin:0 !important;padding:0 !important;
  }
  .sticker-lab-v2-section .sms-page-active,
  .sticker-lab-v2-section .sms-page-active body{overflow:hidden !important;}

  /* Canvas gets prime real estate */
  .sticker-lab-v2-section .sms-canvas-area{
    order:0 !important;flex:1 1 0 !important;min-height:0 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    padding:0 !important;position:relative !important;overflow:visible !important;
    background:radial-gradient(circle at 50% 50%,rgba(0,122,255,0.025) 0%,transparent 70%),linear-gradient(160deg,#f0f2f5 0%,#e6e9ed 50%,#e2e6ea 100%) !important;
  }

  /* Hide desktop toolstrip */
  .sticker-lab-v2-section .sms-toolstrip{display:none !important;}

  /* V2: Config panel hidden on mobile — specs screen replaces it */
  .sticker-lab-v2-section .sms-config{
    display:none !important;
  }
  .sticker-lab-v2-section .sms-config::before{
    content:'';display:block;width:36px;height:4px;border-radius:2px;
    background:rgba(0,0,0,0.08);margin:10px auto 6px;flex-shrink:0;
  }

  /* Mobile bottom bar — absolute inside the fixed editor */
  .sms-mob-bar{
    display:flex !important;position:absolute !important;bottom:0 !important;left:0 !important;
    width:100vw !important;height:64px;background:#f0f1f3;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(0,0,0,0.04);z-index:110;
    padding:0 8px;padding-bottom:env(safe-area-inset-bottom,0);
    align-items:center;justify-content:space-around;
    box-shadow:0 -4px 24px rgba(0,0,0,0.4);
  }
  .sms-mob-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;padding:8px 14px;border:none;background:none;cursor:pointer;
    color:#222;font-size:10px;font-weight:800;letter-spacing:0.5px;
    text-transform:uppercase;transition:color .2s;position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .sms-mob-tab svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.2;}
  .sms-mob-tab.active{color:var(--sm-c-accent);}
  .sms-mob-tab.active::after{
    content:'';position:absolute;bottom:2px;left:25%;right:25%;height:2px;
    background:var(--sm-c-accent);border-radius:1px;box-shadow:0 0 8px rgba(0,122,255,0.5);
  }

  /* Mobile FAB */
  .sms-mob-fab{
    width:54px;height:54px;border-radius:50%;border:none;
    background:linear-gradient(135deg,var(--sm-c-accent),#3B82F6);color:#222;
    font-size:28px;font-weight:300;cursor:pointer;
    box-shadow:0 4px 20px rgba(0,122,255,0.4),0 0 30px rgba(0,122,255,0.15);
    display:flex;align-items:center;justify-content:center;
    margin-top:-20px;transition:transform .2s,box-shadow .2s;
    -webkit-tap-highlight-color:transparent;
    animation:sms-fab-pulse 3s ease-in-out infinite;
  }
  @keyframes sms-fab-pulse{
    0%,100%{box-shadow:0 4px 20px rgba(0,122,255,0.4),0 0 30px rgba(0,122,255,0.15);}
    50%{box-shadow:0 4px 20px rgba(0,122,255,0.4),0 0 50px rgba(0,122,255,0.25);}
  }
  .sms-mob-fab:active{transform:scale(0.92);box-shadow:0 2px 8px rgba(0,122,255,0.25);animation:none;}

  /* Mobile add panel (slides up from FAB) */
  .sms-mob-add-panel{
    position:absolute;bottom:60px;left:0;right:0;width:100%;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-radius:20px 20px 0 0;border-top:1px solid #e5e7eb;
    box-shadow:0 -8px 40px rgba(0,0,0,0.4);
    transform:translateY(110%);transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
    z-index:115;padding:16px 20px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0));
  }
  .sms-mob-add-panel.open{transform:translateY(0);}
  .sms-mob-add-panel::before{
    content:'';display:block;width:36px;height:4px;border-radius:2px;
    background:rgba(0,0,0,0.1);margin:0 auto 12px;
  }
  .sms-mob-add-grid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  }
  .sms-mob-add-item{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:12px 4px;border:1px solid rgba(0,0,0,0.04);background:#f8f9fa;border-radius:14px;
    cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;
  }
  .sms-mob-add-item:active{transform:scale(0.95);background:rgba(0,122,255,0.08);}
  .sms-mob-add-item svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;}
  .sms-mob-add-item span{font-size:10px;font-weight:700;color:#333;text-transform:uppercase;letter-spacing:0.3px;}

  /* Overlay dimmer for sheets */
  .sms-mob-dim{
    position:absolute;inset:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:105;
    opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .sms-mob-dim.active{opacity:1;pointer-events:auto;}

  /* Adjust canvas area for bottom bar */
  .sticker-lab-v2-section .sms-canvas-area{
    padding-bottom:60px !important;
    background:radial-gradient(circle at 50% 50%,rgba(0,122,255,0.025) 0%,transparent 70%),linear-gradient(160deg,#f0f2f5 0%,#e6e9ed 50%,#e2e6ea 100%) !important;
  }

  /* Hide dropzone close button on mobile */
  .sticker-lab-v2-section .sms-dz{padding-bottom:70px;}

  /* Preview button full width in mobile config */
  .sms-preview-pill,.sms-startover-pill{display:none !important;}

  /* Quick bar adjustments for mobile */
  .sticker-lab-v2-section #smsQuickBar{bottom:70px !important;}
  .sticker-lab-v2-section #smsTextToolbar{top:auto !important;bottom:70px !important;}
}

/* V2: Always hide V1 mobile bar elements */
.sms-mob-bar,.sms-mob-add-panel,.sms-mob-dim{display:none !important;}

/* Desktop: hide mobile-only V2 elements */
@media(min-width:769px){
  .sl2-specs{display:none !important;}
  .sl2-specs-pill{display:none !important;}
}

/* ══════════ STICKER LAB V2 — SPECS SCREEN ══════════ */
.sl2-specs{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:80;
  background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
}
.sl2-specs-header{
  text-align:center;padding:80px 20px 16px;
  background:linear-gradient(180deg,#f0f5ff 0%,#fff 100%);
}
.sl2-specs-header h1{
  font-size:24px;font-weight:800;color:#222;margin:0 0 4px;letter-spacing:-0.02em;
}
.sl2-specs-header p{
  font-size:14px;color:#888;margin:0;font-weight:500;
}
.sl2-specs-body{
  flex:1;padding:8px 20px 20px;overflow-y:auto;
}
.sl2-spec-group{margin-bottom:20px;}
.sl2-spec-label{
  display:block;font-size:12px;font-weight:700;color:#888;
  text-transform:uppercase;letter-spacing:1.2px;margin-bottom:8px;
}
.sl2-spec-pills{display:flex;flex-wrap:wrap;gap:8px;}
.sl2-pill{
  padding:10px 18px;border-radius:24px;border:1.5px solid #e5e7eb;
  background:#fff;color:#555;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.sl2-pill:hover{border-color:#bbb;color:#333;background:#f8f9fa;}
.sl2-pill.active{
  background:var(--sm-c-accent);color:#fff;border-color:var(--sm-c-accent);
  box-shadow:0 2px 8px rgba(0,122,255,0.25);
}
/* Shape cards with SM logo */
.sl2-shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.sl2-shape-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;border:2px solid #e5e7eb;border-radius:14px;
  background:#fff;cursor:pointer;transition:all .18s;
  -webkit-tap-highlight-color:transparent;
}
.sl2-shape-card:active{transform:scale(0.96);}
.sl2-shape-card.active{border-color:var(--sm-c-accent);background:#f0f5ff;box-shadow:0 2px 8px rgba(0,122,255,0.15);}
.sl2-shape-card span{font-size:11px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:0.3px;}
.sl2-shape-card.active span{color:var(--sm-c-accent);}
.sl2-shape-icon{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#f8f9fa;
}
.sl2-shape-icon img{width:32px;height:32px;object-fit:contain;}
.sl2-shape-icon{display:flex;align-items:center;justify-content:center;}
.sl2-shape-diecut{border-radius:8px 2px 8px 2px;border:2px dashed #ccc;}
.sl2-shape-circle{border-radius:50%;border:2px solid #ddd;}
.sl2-shape-square{border-radius:3px;border:2px solid #ddd;}
.sl2-shape-rect{border-radius:3px;border:2px solid #ddd;aspect-ratio:4/3;}
.sl2-shape-oval{border-radius:50%;border:2px solid #ddd;aspect-ratio:4/3;}
.sl2-shape-rounded{border-radius:8px;border:2px solid #ddd;}
.sl2-shape-card.active .sl2-shape-icon{border-color:var(--sm-c-accent);background:#e8f0fe;}

.sl2-specs-footer{
  padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0));
  border-top:1px solid #e5e7eb;background:#fff;
  display:flex;align-items:center;gap:16px;
}
.sl2-specs-price{display:flex;flex-direction:column;}
.sl2-specs-price-total{font-size:28px;font-weight:800;color:#222;letter-spacing:-0.03em;}
.sl2-specs-price-unit{font-size:12px;color:#888;margin-top:-2px;}
.sl2-start-btn{
  flex:1;padding:16px 24px;border-radius:14px;border:none;
  background:linear-gradient(135deg,var(--sm-c-accent),#3B82F6);color:#fff;
  font-size:16px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 16px rgba(0,122,255,0.3);
  transition:all .2s ease;letter-spacing:0.02em;
}
.sl2-start-btn:active{transform:scale(0.97);box-shadow:0 2px 8px rgba(0,122,255,0.2);}

/* Specs summary pill — restored to original pre-today setup */
.sl2-specs-pill{
  position:fixed;top:var(--sl2-header-h,0px);left:0;right:0;z-index:60;
  height:40px;background:#fff;border-bottom:1px solid #e5e7eb;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 16px;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  font-size:13px;font-weight:600;color:#555;
}
/* Once made visible by JS, never let interaction class hide it. */
body.sms-interacting .sl2-specs-pill{visibility:visible !important;}
.sl2-specs-pill #sl2PillPrice{
  font-weight:800;color:var(--sm-c-accent);
}
.sl2-specs-pill svg{color:#888;flex-shrink:0;}

/* ══════════ V2 MOBILE TOOLBAR ══════════ */
.sl2-toolbar{
  display:none;position:absolute;bottom:0;left:0;right:0;
  width:100%;height:72px;background:#fff;
  border-top:1px solid #e5e7eb;z-index:110;
  padding:0 4px;padding-bottom:env(safe-area-inset-bottom,0);
  align-items:center;justify-content:space-evenly;
  box-shadow:0 -2px 12px rgba(0,0,0,0.06);
  gap:0;
}
@media(max-width:768px){
  .sl2-toolbar{display:flex;}
  .sticker-lab-v2-section .sms-canvas-area{padding-bottom:72px !important;}

  /* Zoom controls — fixed bottom-right, above toolbar */
  .sticker-lab-v2-section #smsZoomControls{position:fixed !important;bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;right:8px !important;z-index:112 !important;transform:scale(0.9);transform-origin:bottom right;}
  /* Share — fixed bottom-left, above toolbar, aligned with zoom */
  .sticker-lab-v2-section #btnShareLink{position:fixed !important;bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;left:8px !important;right:auto !important;z-index:112 !important;transform:scale(0.9);transform-origin:bottom left;margin:0 !important;}
  /* Hide download on mobile */
  .sticker-lab-v2-section #btnDownload{display:none !important;}
  /* Adjust bar — fixed at bottom, above toolbar */
  .sticker-lab-v2-section .sms-adjust-bar{
    position:fixed !important;bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;left:50% !important;transform:translateX(-50%) scale(0.9) !important;
    z-index:115 !important;background:#fff !important;
    border:1px solid #e5e7eb !important;border-radius:12px !important;
    box-shadow:0 4px 16px rgba(0,0,0,0.1) !important;
  }
  .sticker-lab-v2-section .sms-adjust-hint{
    top:90px !important;
  }
  /* Hide the old black QuickBar — replaced by V2 context toolbar */
  .sticker-lab-v2-section #smsQuickBar{display:none !important;}
  .sticker-lab-v2-section #smsTextToolbar{
    top:70px !important;bottom:auto !important;z-index:65 !important;
  }
  .sticker-lab-v2-section #smsAutoSaveIndicator{display:none !important;}
  /* Ruler — make visible and position below sticker */
  .sticker-lab-v2-section .sms-ruler-label{
    color:#666 !important;font-size:12px !important;font-weight:700 !important;
  }
  .sticker-lab-v2-section .sms-ruler-line{background:#999 !important;}
  .sticker-lab-v2-section .sms-ruler-cap{background:#999 !important;}
}
@media(min-width:769px){
  .sl2-toolbar{display:none !important;}
}
.sl2-tb-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:8px 2px;border:none;background:none;cursor:pointer;
  color:#555;font-size:9px;font-weight:700;letter-spacing:0.2px;
  text-transform:uppercase;transition:color .15s;flex:1;min-width:0;
  -webkit-tap-highlight-color:transparent;overflow:hidden;
}
.sl2-tb-btn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0;}
.sl2-tb-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:block;}
.sl2-tb-btn:active{color:var(--sm-c-accent);}
.sl2-tb-cart{color:var(--sm-c-accent);font-weight:800;}
.sl2-tb-cart svg{stroke:var(--sm-c-accent);}
.sl2-tb-cart:disabled{opacity:.3;cursor:not-allowed;}
.sl2-tb-cart:disabled svg{stroke:#555;}

/* ══════════ LOCAL CART DRAWER ══════════ */
.sl2-lc-wrap{position:fixed;inset:0;z-index:9999999;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;}
.sl2-lc-box{background:#1a1a2e;border-radius:16px 16px 0 0;width:100%;max-width:480px;padding:20px 20px 28px;box-shadow:0 -8px 40px rgba(0,0,0,.4);}
.sl2-lc-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.sl2-lc-ht{color:#fff;font-size:16px;font-weight:700;}
.sl2-lc-xb{background:none;border:none;color:#888;font-size:24px;cursor:pointer;line-height:1;padding:0;}
.sl2-lc-row{display:flex;gap:14px;align-items:center;margin-bottom:16px;}
.sl2-lc-img{width:70px;height:70px;object-fit:contain;border-radius:10px;background:#111;flex-shrink:0;}
.sl2-lc-info{flex:1;}
.sl2-lc-info b{color:#fff;font-size:13px;font-weight:600;display:block;}
.sl2-lc-sub{color:#aaa;font-size:12px;margin:4px 0 6px;padding:0;}
.sl2-lc-pr{color:var(--sm-c-brand)!important;font-size:20px!important;font-weight:800!important;}
.sl2-lc-co{display:block;width:100%;padding:14px;background:var(--sm-c-brand);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.5px;}
.sl2-lc-ct{display:block;width:100%;padding:10px;background:none;border:none;color:#888;font-size:13px;cursor:pointer;margin-top:6px;text-decoration:underline;}

/* ══════════ V2 CONTEXT SELECTION TOOLBAR ══════════ */
.sl2-ctx-bar{
  display:none;position:fixed;bottom:72px;left:8px;right:8px;
  background:#fff;border-radius:14px;border:1px solid #e5e7eb;
  box-shadow:0 4px 20px rgba(0,0,0,0.12);z-index:115;
  padding:6px 8px;gap:4px;align-items:center;justify-content:center;
  animation:sl2-ctx-in 0.2s ease;
}
/* Desktop: hide context bar — toolstrip has all the same options */
@media(min-width:769px){
  .sl2-ctx-bar{display:none !important;}
}
.sl2-ctx-bar.visible{display:flex;}
@keyframes sl2-ctx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sl2-hint-fade{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
.sl2-ctx-btn{
  flex:1 1 0;padding:8px 4px;border:1px solid #e5e7eb;background:#f8f9fa;
  color:#444;border-radius:10px;cursor:pointer;font-size:11px;font-weight:700;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.sl2-ctx-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
.sl2-ctx-btn:active{background:var(--sm-c-accent);color:#fff;border-color:var(--sm-c-accent);}
.sl2-ctx-btn:active svg{stroke:#fff;}
.sl2-ctx-btn.sl2-ctx-text{color:var(--sm-c-accent);border-color:var(--sm-c-accent);background:#f0f5ff;}
.sl2-ctx-btn.sl2-ctx-text svg{stroke:var(--sm-c-accent);}

/* ══════════ PROOF APPROVAL MODAL ══════════ */
.sl2-proof-ol{position:fixed;inset:0;z-index:999999998;background:rgba(15,20,28,0.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:12px;animation:sl2-proof-fade .2s ease;}
@keyframes sl2-proof-fade{from{opacity:0}to{opacity:1}}
@keyframes sl2-proof-pop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.sl2-proof{background:#fff;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.45);width:100%;max-width:460px;max-height:94vh;overflow-y:auto;animation:sl2-proof-pop .25s cubic-bezier(.3,1.4,.5,1);display:flex;flex-direction:column;}
.sl2-proof-hd{padding:10px 14px 8px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.sl2-proof-ht{font-size:15px;font-weight:800;color:#1a1a1a;margin:0;}
.sl2-proof-x{background:none;border:none;font-size:20px;color:#999;cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px;transition:background .15s;}
.sl2-proof-x:hover{background:#f3f3f3;color:#333;}
.sl2-proof-body{padding:10px 14px 8px;}
.sl2-proof-stage{padding:2px 0 6px;display:flex;align-items:center;justify-content:center;position:relative;}
.sl2-proof-scale{position:absolute;bottom:8px;right:10px;font-size:10px;font-weight:700;color:#555;background:rgba(255,255,255,.7);padding:3px 7px;border-radius:4px;letter-spacing:.4px;text-transform:uppercase;}
.sl2-proof-warn{margin-top:8px;padding:7px 10px;border-radius:8px;display:flex;gap:8px;font-size:11.5px;line-height:1.35;background:#fff8e1;color:#8a5d00;border:1px solid #ffe082;}
.sl2-proof-warn.sl2-pw-err{background:#fde8e8;color:#9b1c1c;border-color:#f5b5b5;}
.sl2-proof-warn svg{flex-shrink:0;width:14px;height:14px;margin-top:1px;}
.sl2-proof-specs{margin-top:8px;background:#f7f9fb;border-radius:8px;padding:7px 10px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;border:1px solid #eef1f4;}
.sl2-proof-spec-row{display:flex;flex-wrap:wrap;gap:5px;}
.sl2-proof-chip{background:#fff;border:1px solid #e3e6ea;padding:2px 7px;border-radius:6px;font-size:10.5px;font-weight:700;color:#333;text-transform:capitalize;}
.sl2-proof-price{font-size:16px;font-weight:800;color:#00a085;letter-spacing:-.2px;}
.sl2-proof-ack{margin-top:8px;display:flex;gap:8px;padding:7px 10px;border-radius:8px;background:#f0f7ff;border:1.5px solid #c9e0fb;cursor:pointer;user-select:none;transition:all .15s;}
.sl2-proof-ack:hover{border-color:var(--sm-c-accent);}
.sl2-proof-ack input{margin-top:1px;accent-color:var(--sm-c-accent);width:15px;height:15px;cursor:pointer;flex-shrink:0;}
.sl2-proof-ack span{font-size:12px;color:#2c3e50;line-height:1.35;}
.sl2-proof-ft{padding:8px 14px 10px;border-top:1px solid #f0f0f0;display:flex;gap:8px;background:#fafafa;border-bottom-left-radius:14px;border-bottom-right-radius:14px;}
.sl2-proof-back{flex:0 0 auto;padding:8px 12px;background:#fff;border:1.5px solid #e0e4e9;border-radius:8px;font-size:12.5px;font-weight:700;color:#555;cursor:pointer;transition:all .15s;}
.sl2-proof-back:hover{background:#f3f5f8;color:#222;border-color:#ccd1d8;}
.sl2-proof-back-cta{flex:1;background:linear-gradient(135deg,#ff6b6b,#e53935);color:#fff;border:none;font-weight:800;font-size:13px;letter-spacing:.3px;box-shadow:0 4px 14px rgba(229,57,53,.35);}
.sl2-proof-back-cta:hover{background:linear-gradient(135deg,#e53935,#c62828);color:#fff;border:none;}
.sl2-proof-ok{flex:1;padding:9px 14px;background:linear-gradient(135deg,#00d2b0,#00a087);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:800;cursor:pointer;letter-spacing:.3px;transition:all .15s;box-shadow:0 4px 14px rgba(0,122,255,.35);}
.sl2-proof-ok:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,122,255,.45);}
.sl2-proof-ok:disabled{opacity:.5;cursor:not-allowed;background:#b0b4b9;box-shadow:none;}
@media(max-height:680px){.sl2-proof-stage{padding:0 0 4px;}.sl2-proof-img{max-height:140px!important;}.sl2-proof-warn{padding:5px 9px;font-size:11px;}.sl2-proof-specs{padding:5px 9px;}.sl2-proof-ack{padding:5px 9px;}.sl2-proof-ack span{font-size:11.5px;}.sl2-proof-hd{padding:7px 14px 6px;}.sl2-proof-ft{padding:6px 14px 8px;}}
@media(max-width:560px){.sl2-proof{max-height:96vh;max-width:100%;}.sl2-proof-img{max-height:160px;}.sl2-proof-ft{flex-direction:row;}}

/* Proof modal preview wrap — finish effects are baked into the preview PNG at
   capturePreview() time, so no CSS overlays needed. The same PNG used in cart,
   admin line item, and share page now also shows correctly here. */
.sl2-proof-img-wrap{position:relative;display:inline-block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.22));}
.sl2-proof-finish-bg{position:absolute;inset:0;z-index:1;display:none;-webkit-mask-image:var(--sl2-mask);mask-image:var(--sl2-mask);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.sl2-proof-finish-ovr{position:absolute;inset:0;pointer-events:none;display:none;z-index:3;-webkit-mask-image:var(--sl2-mask);mask-image:var(--sl2-mask);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.sl2-proof-img-wrap.finish-holographic .sl2-proof-finish-bg{display:block;background:url('/builder-assets/holographic.svg') center/180%;}
.sl2-proof-img-wrap.finish-holographic .sl2-proof-img{mix-blend-mode:multiply;filter:brightness(1.35) saturate(1.2);}
.sl2-proof-img-wrap.finish-glossy .sl2-proof-finish-ovr{display:block;background:linear-gradient(118deg,transparent 25%,rgba(255,255,255,.55) 47%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.55) 53%,transparent 75%);mix-blend-mode:soft-light;opacity:.85;}
.sl2-proof-img{max-width:100%;max-height:min(180px,28vh);display:block;object-fit:contain;position:relative;z-index:2;}
.sl2-proof-finish-label{position:absolute;top:8px;left:10px;font-size:10px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase;backdrop-filter:blur(4px);z-index:4;}
.sl2-proof-cut{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible;}
.sl2-cd-pill{display:inline-block;background:#f0f0f0;padding:1px 6px;border-radius:8px;margin-right:4px;}

/* Smart border hint tooltip — shown when die-cut produces multiple cut paths
   and user has Small/Edge border (suggesting they bump to Medium/Large) */
.sl2-bhint{position:fixed;background:linear-gradient(135deg,var(--sm-c-accent),#1976d2);color:#fff;padding:11px 14px;border-radius:10px;font-size:12.5px;font-weight:600;line-height:1.4;z-index:99999990;box-shadow:0 6px 20px rgba(0,122,255,.4);max-width:260px;animation:sl2-bhint-in .3s cubic-bezier(.3,1.4,.5,1);}
.sl2-bhint::after{content:'';position:absolute;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid #1976d2;bottom:-7px;left:50%;transform:translateX(-50%);}
.sl2-bhint b{font-weight:800;}
.sl2-bhint button{display:inline-block;margin-top:8px;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.3px;}
.sl2-bhint button:hover{background:rgba(255,255,255,.3);}
@keyframes sl2-bhint-in{from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM UPGRADE — drop-in token + component layer that sits on top
   of the existing CSS without rewriting it. Adds Inter as the primary face,
   consistent spacing/radii/shadow tokens, real button hierarchy, polished
   hover/active states, proper focus rings, and tooltips.
   ══════════════════════════════════════════════════════════════════════════ */

.sms,.sms-editor,.sms *{
  --sm-c-brand:var(--sm-c-brand);
  --sm-c-brand-2:#00a087;
  --sm-c-brand-3:#00d2b0;
  --sm-c-accent:var(--sm-c-accent);
  --sm-c-accent-2:#1976d2;
  --sm-c-bg:#f7f8fa;
  --sm-c-surface:#ffffff;
  --sm-c-surface-2:#f1f3f6;
  --sm-c-surface-3:#e8ebef;
  --sm-c-border:#dde2e8;
  --sm-c-border-strong:#c2c9d2;
  --sm-c-text:#1a1f2e;
  --sm-c-text-2:#525a6b;
  --sm-c-text-3:#8a93a3;
  --sm-c-text-on-brand:#fff;
  --sm-c-warn:#ff9800;
  --sm-c-error:#e53935;
  --sm-c-success:#4caf50;
  --sm-sh-1:0 1px 2px rgba(15,20,28,0.05),0 1px 3px rgba(15,20,28,0.06);
  --sm-sh-2:0 2px 4px rgba(15,20,28,0.06),0 4px 12px rgba(15,20,28,0.08);
  --sm-sh-3:0 4px 8px rgba(15,20,28,0.06),0 12px 32px rgba(15,20,28,0.14);
  --sm-sh-brand:0 4px 14px rgba(0,122,255,0.25);
  --sm-sh-brand-hover:0 6px 20px rgba(0,122,255,0.35);
  --sm-sh-inset:inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(0,0,0,0.03);
  --sm-r-xs:4px;
  --sm-r-sm:6px;
  --sm-r-md:10px;
  --sm-r-lg:14px;
  --sm-r-xl:20px;
  --sm-t-fast:120ms cubic-bezier(0.4,0,0.2,1);
  --sm-t-base:180ms cubic-bezier(0.4,0,0.2,1);
  --sm-t-spring:300ms cubic-bezier(0.34,1.56,0.64,1);
}
.sms,.sms-editor{font-family:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-feature-settings:'cv11','ss01','ss03';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* Toolbar / left sidebar polish */
.sms-toolstrip{background:linear-gradient(180deg,#fafbfc 0%,#f3f5f8 100%)!important;border-right:1px solid var(--sm-c-border)!important;}
.sms-tool-group{padding:clamp(8px,1vh,14px) clamp(10px,1vw,14px)!important;border-bottom:1px solid rgba(0,0,0,0.04)!important;}
.sms-tool-group:last-of-type{border-bottom:none!important;}
.sms-tool-group-label{font-size:10.5px!important;font-weight:800!important;color:var(--sm-c-text-2)!important;letter-spacing:1.2px!important;text-transform:uppercase!important;margin-bottom:8px!important;padding-left:1px!important;display:flex!important;align-items:center!important;gap:6px!important;}
.sms-tool-group-label::before{content:'';display:inline-block;width:3px;height:11px;background:linear-gradient(180deg,var(--sm-c-brand),var(--sm-c-accent));border-radius:2px;}

/* Tool icons — unified style */
.sms-tool-icon,.sms-tool-action{
  border:1px solid var(--sm-c-border)!important;
  background:var(--sm-c-surface)!important;
  color:var(--sm-c-text-2)!important;
  border-radius:var(--sm-r-md)!important;
  box-shadow:var(--sm-sh-1),var(--sm-sh-inset)!important;
  transition:transform var(--sm-t-base),box-shadow var(--sm-t-base),border-color var(--sm-t-base),background var(--sm-t-base),color var(--sm-t-base)!important;
}
.sms-tool-icon:hover,.sms-tool-action:hover{
  background:var(--sm-c-surface)!important;
  border-color:var(--sm-c-border-strong)!important;
  color:var(--sm-c-text)!important;
  transform:translateY(-1px)!important;
  box-shadow:var(--sm-sh-2),var(--sm-sh-inset)!important;
}
.sms-tool-icon:active,.sms-tool-action:active{transform:translateY(0) scale(0.97)!important;box-shadow:var(--sm-sh-1)!important;}
.sms-tool-icon.active,.sms-tool-action.active{
  background:linear-gradient(180deg,#e7fbf6 0%,#daf5ec 100%)!important;
  border-color:var(--sm-c-brand)!important;
  color:var(--sm-c-brand-2)!important;
  box-shadow:0 0 0 3px rgba(0,122,255,0.10),var(--sm-sh-inset)!important;
}
.sms-tool-icon.active svg,.sms-tool-action.active svg{color:var(--sm-c-brand-2)!important;}
.sms-tool-icon.disabled,.sms-tool-action.disabled,.sms-tool-icon[disabled],.sms-tool-action[disabled]{opacity:0.4!important;cursor:not-allowed!important;pointer-events:none!important;}

/* AI button — keep its distinct identity but consistent with new system */
.sms-tool-action.sms-ai-action,.sms-tool-icon.sms-ai-action{
  background:linear-gradient(135deg,#e6fbf5 0%,#dff0fe 100%)!important;
  border-color:rgba(0,122,255,0.4)!important;
  color:var(--sm-c-brand-2)!important;
}
.sms-tool-action.sms-ai-action:hover,.sms-tool-icon.sms-ai-action:hover{
  background:linear-gradient(135deg,#d4f7ec 0%,#cae6fb 100%)!important;
  border-color:var(--sm-c-brand)!important;
  box-shadow:0 4px 14px rgba(0,122,255,0.18),var(--sm-sh-inset)!important;
}
.sms-tool-action.sms-ai-action::after,.sms-tool-icon.sms-ai-action::after{box-shadow:0 1px 3px rgba(0,122,255,0.45),0 0 0 2px rgba(255,255,255,0.7)!important;}

/* Border color swatches — slightly tighter and bound to BORDER section */
.sms-border-colors-row{padding:4px 2px 0!important;}
.sms-csw,.sms-border-color-btn{box-shadow:var(--sm-sh-1),inset 0 0 0 1.5px rgba(0,0,0,0.06)!important;transition:transform var(--sm-t-base),box-shadow var(--sm-t-base)!important;}
.sms-csw:hover,.sms-border-color-btn:hover{transform:scale(1.08)!important;box-shadow:var(--sm-sh-2),inset 0 0 0 1.5px rgba(0,0,0,0.1)!important;}
.sms-csw.active,.sms-border-color-btn.active{box-shadow:0 0 0 2px var(--sm-c-brand),var(--sm-sh-1)!important;}

/* Right config panel polish */
.sms-config{background:linear-gradient(180deg,#fcfcfd 0%,#f5f6f9 100%)!important;border-left:1px solid var(--sm-c-border)!important;}
.sms-config h3{font-weight:800!important;color:var(--sm-c-text)!important;letter-spacing:0.3px!important;}

/* Price block — make it feel like a real e-commerce price */
.sms-price-box,#smsPriceBox{
  background:linear-gradient(180deg,#fff 0%,#f6f8fb 100%)!important;
  border:1px solid var(--sm-c-border)!important;
  border-radius:var(--sm-r-lg)!important;
  box-shadow:var(--sm-sh-2)!important;
  padding:14px 16px!important;
}

/* ATC — primary action with proper weight */
#btnATCBottom,.sms-atc{
  background:linear-gradient(135deg,var(--sm-c-accent) 0%,#1976d2 100%)!important;
  border:none!important;
  border-radius:var(--sm-r-md)!important;
  color:#fff!important;
  font-weight:800!important;
  letter-spacing:0.3px!important;
  box-shadow:0 6px 20px rgba(0,122,255,0.35),inset 0 1px 0 rgba(255,255,255,0.2)!important;
  transition:transform var(--sm-t-base),box-shadow var(--sm-t-base)!important;
}
#btnATCBottom:hover,.sms-atc:hover{transform:translateY(-2px)!important;box-shadow:0 10px 28px rgba(0,122,255,0.45),inset 0 1px 0 rgba(255,255,255,0.2)!important;}
#btnATCBottom:active,.sms-atc:active{transform:translateY(0)!important;}

/* Section section padding consistency */
.sms-section{padding:clamp(12px,1.6vh,18px) clamp(12px,1.3vw,18px)!important;border-bottom:1px solid rgba(0,0,0,0.04)!important;}
.sms-section:last-of-type{border-bottom:none!important;}

/* Pill buttons (size, qty, finish, shape) — proper hover + active */
.sms-pill,.sms-size-btn,.sms-qty-btn,.sms-shape-btn,.sms-finish-btn{
  border:1px solid var(--sm-c-border)!important;
  background:var(--sm-c-surface)!important;
  color:var(--sm-c-text-2)!important;
  border-radius:var(--sm-r-md)!important;
  font-weight:700!important;
  transition:transform var(--sm-t-base),box-shadow var(--sm-t-base),border-color var(--sm-t-base),color var(--sm-t-base)!important;
  box-shadow:var(--sm-sh-1)!important;
}
.sms-pill:hover,.sms-size-btn:hover,.sms-qty-btn:hover,.sms-shape-btn:hover,.sms-finish-btn:hover{
  border-color:var(--sm-c-border-strong)!important;
  color:var(--sm-c-text)!important;
  transform:translateY(-1px)!important;
  box-shadow:var(--sm-sh-2)!important;
}
.sms-pill.active,.sms-size-btn.active,.sms-qty-btn.active,.sms-shape-btn.active,.sms-finish-btn.active{
  background:linear-gradient(180deg,#eaf4ff 0%,#d8ebff 100%)!important;
  border-color:var(--sm-c-accent)!important;
  color:var(--sm-c-accent-2)!important;
  box-shadow:0 0 0 3px rgba(0,122,255,0.12),var(--sm-sh-1)!important;
}

/* Save badge — green chip with shine */
.sms-save,.sms-save-badge{background:linear-gradient(135deg,#11c98a 0%,#0aa978 100%)!important;color:#fff!important;border:none!important;font-weight:800!important;letter-spacing:0.4px!important;box-shadow:0 2px 6px rgba(17,201,138,0.3)!important;}

/* CSS tooltip system removed — labels are visible under every button so the
   tooltip-from-title hover caption was redundant and rendered messy when
   overlapping adjacent items. */
.sms-tool-icon[title]:hover::before,.sms-tool-action[title]:hover::before{content:none!important;display:none!important;}
@keyframes smTipIn{from{opacity:0;transform:translateX(-50%) translateY(2px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.sms-tool-icon,.sms-tool-action{position:relative;}

/* Focus accessibility */
.sms button:focus-visible,.sms input:focus-visible,.sms select:focus-visible,.sms textarea:focus-visible{outline:2px solid var(--sm-c-accent)!important;outline-offset:2px!important;border-radius:var(--sm-r-sm);}

/* Subtle scrollbar */
.sms-toolstrip::-webkit-scrollbar,.sms-config::-webkit-scrollbar{width:6px;}
.sms-toolstrip::-webkit-scrollbar-thumb,.sms-config::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:3px;}
.sms-toolstrip::-webkit-scrollbar-thumb:hover,.sms-config::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.2);}

/* ══════════════════════════════════════════════════════════════════════════
   APPLE-STYLE OVERRIDE LAYER
   - SF Pro / Inter blended font stack
   - iOS blue (#007AFF) as the single accent
   - Filled-selection state (not bordered) — Apple's signature interaction
   - Hairline borders, generous radii, refined stroke weights
   - Frosted glass on the toolbar, subtle depth via shadow stacks
   - Section labels become near-invisible — let icons carry meaning
   ══════════════════════════════════════════════════════════════════════════ */

.sms,.sms-editor,.sms *{
  --sm-c-brand:#007AFF;
  --sm-c-brand-2:#0062cc;
  --sm-c-brand-3:#3395ff;
  --sm-c-brand-soft:rgba(0,122,255,0.10);
  --sm-c-accent:#007AFF;
  --sm-c-accent-rgb:0,122,255;
  --sm-c-brand-rgb:0,122,255;
  --sm-c-bg:#f5f5f7;
  --sm-c-surface:#ffffff;
  --sm-c-surface-2:#fafafa;
  --sm-c-surface-3:#f0f0f2;
  --sm-c-border:rgba(60,60,67,0.12);
  --sm-c-border-strong:rgba(60,60,67,0.22);
  --sm-c-text:#1d1d1f;
  --sm-c-text-2:#6e6e73;
  --sm-c-text-3:#a1a1a6;
  --sm-sh-1:0 0.5px 1.5px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.04);
  --sm-sh-2:0 2px 6px rgba(0,0,0,0.06),0 8px 24px rgba(0,0,0,0.08);
  --sm-sh-3:0 4px 12px rgba(0,0,0,0.08),0 16px 40px rgba(0,0,0,0.12);
  --sm-sh-brand:0 4px 14px rgba(0,122,255,0.30);
  --sm-r-sm:8px;
  --sm-r-md:12px;
  --sm-r-lg:16px;
  --sm-r-xl:22px;
  --sm-t-fast:140ms cubic-bezier(0.32,0.72,0,1);
  --sm-t-base:220ms cubic-bezier(0.32,0.72,0,1);
  --sm-t-spring:380ms cubic-bezier(0.34,1.4,0.64,1);
}
.sms,.sms-editor{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',system-ui,sans-serif!important;
  letter-spacing:-0.005em!important;
  -webkit-font-smoothing:antialiased!important;
  color:var(--sm-c-text)!important;
}

/* Toolstrip — floating column with rounded top, distinct from canvas */
.sms-toolstrip{
  background:#ffffff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:0.5px solid rgba(60,60,67,0.10)!important;
  border-radius:18px!important;
  margin:10px 0 10px 10px!important;
  padding:8px 8px!important;
  overflow-y:auto!important;
  box-shadow:0 2px 6px rgba(0,0,0,0.05),0 8px 28px rgba(0,0,0,0.08)!important;
  height:calc(100% - 20px)!important;
}

/* Tool group cards — soft surface, no borders (rely on bg contrast + shadow) */
.sms-tool-group{
  background:var(--sm-c-surface)!important;
  border:none!important;
  border-radius:12px!important;
  padding:5px 8px 4px!important;
  margin-bottom:3px!important;
  box-shadow:var(--sm-sh-1)!important;
}

/* Section label — barely there, lets icons carry the weight */
.sms-tool-group-label{
  font-size:10px!important;
  font-weight:600!important;
  color:var(--sm-c-text-2)!important;
  letter-spacing:-0.01em!important;
  text-transform:none!important;
  margin-bottom:3px!important;
  padding:0 2px!important;
  display:block!important;
  line-height:1.2!important;
}
.sms-tool-group-label::before,.sms-tool-group-label::after{display:none!important;content:none!important;}

/* Tool icons — clean unweighted plate, hover lifts subtly, ACTIVE = filled blue */
.sms-tool-icon,.sms-tool-action{
  border:none!important;
  background:transparent!important;
  color:var(--sm-c-text-2)!important;
  border-radius:9px!important;
  box-shadow:none!important;
  padding:3px 2px!important;
  font-weight:500!important;
  letter-spacing:-0.01em!important;
  transition:background var(--sm-t-fast),color var(--sm-t-fast),transform var(--sm-t-fast)!important;
}
.sms-tool-icon span,.sms-tool-action span{
  font-size:9px!important;
  font-weight:500!important;
  letter-spacing:-0.01em!important;
  text-transform:none!important;
  margin-top:1px!important;
  color:inherit!important;
  opacity:1!important;
  line-height:1!important;
}
.sms-tool-icon:hover,.sms-tool-action:hover{
  background:rgba(60,60,67,0.06)!important;
  color:var(--sm-c-text)!important;
  transform:none!important;
}
.sms-tool-icon:active,.sms-tool-action:active{
  background:rgba(60,60,67,0.10)!important;
  transform:scale(0.96)!important;
}
.sms-tool-icon.active,.sms-tool-action.active{
  background:var(--sm-c-brand)!important;
  color:#fff!important;
  box-shadow:var(--sm-sh-brand)!important;
}
.sms-tool-icon.active svg,.sms-tool-action.active svg{
  color:#fff!important;
  stroke:#fff!important;
}
.sms-tool-icon.active span,.sms-tool-action.active span{color:#fff!important;}
.sms-tool-icon.disabled,.sms-tool-action.disabled{opacity:0.32!important;}

/* SVG icons — uniform refinement (keep existing fills, only normalize strokes) */
.sms-tool-icon svg,.sms-tool-action svg{
  width:18px!important;
  height:18px!important;
  stroke-width:1.6!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  color:currentColor!important;
}

/* AI button — keep blue gradient signature, but Apple-style */
.sms-tool-action.sms-ai-action,.sms-tool-icon.sms-ai-action{
  background:linear-gradient(135deg,rgba(0,122,255,0.10),rgba(94,92,230,0.10))!important;
  color:var(--sm-c-brand-2)!important;
}
.sms-tool-action.sms-ai-action:hover,.sms-tool-icon.sms-ai-action:hover{
  background:linear-gradient(135deg,rgba(0,122,255,0.18),rgba(94,92,230,0.18))!important;
}
.sms-tool-action.sms-ai-action::after,.sms-tool-icon.sms-ai-action::after{
  content:'NEW'!important;
  background:#34c759!important;
  color:#fff!important;
  font-size:8px!important;
  font-weight:700!important;
  padding:1.5px 5px!important;
  border-radius:8px!important;
  letter-spacing:0.3px!important;
  top:4px!important;right:4px!important;
  box-shadow:0 1px 3px rgba(52,199,89,0.4)!important;
}

/* "Color" label above border swatches — was white-on-white inline, force visible */
#smsBorderColorRow > span:first-child{
  color:var(--sm-c-text-2)!important;
  font-size:9.5px!important;
  font-weight:600!important;
  letter-spacing:-0.005em!important;
  text-transform:none!important;
  margin-bottom:4px!important;
  opacity:1!important;
}
#smsBorderColorRow{margin-top:6px!important;}
/* Custom color input also needs a visible border on white bg */
#smsBorderColorCustom{border:1.5px solid rgba(0,0,0,0.15)!important;}

/* Color swatches — proper iOS-style ring on active */
.sms-csw,.sms-border-color-btn{
  width:20px!important;height:20px!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06)!important;
  transition:transform var(--sm-t-fast)!important;
}
.sms-csw:hover,.sms-border-color-btn:hover{transform:scale(1.12)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12)!important;}
.sms-csw.active,.sms-border-color-btn.active{box-shadow:0 0 0 2.5px var(--sm-c-brand),inset 0 0 0 2px #fff!important;}

/* Add grid — slightly more space for taps */
.sms-add-grid{gap:4px!important;}

/* Right config panel — floating column matching the left */
.sms-config{
  background:#ffffff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:0.5px solid rgba(60,60,67,0.10)!important;
  border-radius:18px!important;
  margin:10px 10px 10px 0!important;
  height:calc(100% - 20px)!important;
  box-shadow:0 2px 6px rgba(0,0,0,0.05),0 8px 28px rgba(0,0,0,0.08)!important;
}
.sms-config-section{
  background:var(--sm-c-surface)!important;
  border:none!important;
  border-top:none!important;
  border-bottom:none!important;
  border-radius:12px!important;
  margin:0 8px 3px 8px!important;
  padding:5px 8px 4px!important;
  box-shadow:var(--sm-sh-1)!important;
}
.sms-config-section:first-of-type{margin-top:6px!important;}
.sms-config-section + .sms-config-section{border-top:none!important;}
.sms-config{padding:0!important;}
.sms-config h3{
  font-size:10px!important;
  font-weight:600!important;
  color:var(--sm-c-text-2)!important;
  text-transform:none!important;
  letter-spacing:-0.01em!important;
  margin-bottom:5px!important;
}
/* Hide section heading icons on the right so it matches the left (text-only labels) */
.sms-config-section h3 svg{display:none!important;}

/* Pills — Apple segmented control feel */
.sms-pill,.sms-size-btn,.sms-size-label,.sms-qty-btn,.sms-qty-pre,.sms-finish-btn{
  border:0.5px solid var(--sm-c-border)!important;
  background:var(--sm-c-surface)!important;
  color:var(--sm-c-text-2)!important;
  border-radius:9999px!important;
  font-weight:600!important;
  font-size:10.5px!important;
  letter-spacing:-0.01em!important;
  box-shadow:none!important;
  transition:background var(--sm-t-fast),color var(--sm-t-fast),border-color var(--sm-t-fast),transform var(--sm-t-fast)!important;
  padding:5px 11px!important;
  min-height:0!important;
  line-height:1.2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
/* Finish buttons — same pill shape as size/qty, with their swatch */
.sms-finish-btn{gap:5px!important;}
.sms-finish-swatch{width:12px!important;height:12px!important;flex-shrink:0!important;}
/* Tighten gaps in pill grids */
.sms-sizes,.sms-qty-grid,.sms-sizes-grid,.sms-finish-row{gap:3px!important;}
.sms-pill:hover,.sms-size-btn:hover,.sms-size-label:hover,.sms-qty-btn:hover,.sms-qty-pre:hover,.sms-finish-btn:hover{
  background:#fff!important;
  border-color:var(--sm-c-border-strong)!important;
  color:var(--sm-c-text)!important;
}
.sms-pill:active,.sms-size-btn:active,.sms-qty-btn:active,.sms-finish-btn:active{transform:scale(0.96)!important;}
.sms-pill.active,.sms-size-btn.active,.sms-size-label.active,.sms-qty-btn.active,.sms-qty-pre.active,.sms-finish-btn.active{
  background:var(--sm-c-brand)!important;
  color:#fff!important;
  border-color:var(--sm-c-brand)!important;
  box-shadow:var(--sm-sh-brand)!important;
}
/* Size labels — radio inputs are visually hidden; the label IS the pill. Check sibling for active state. */
.sms-size-radio:checked + .sms-size-label{background:var(--sm-c-brand)!important;color:#fff!important;border-color:var(--sm-c-brand)!important;box-shadow:var(--sm-sh-brand)!important;}
/* Shape buttons — single row, all 6 fit with short labels */
.sms-shapes.sl2-shape-grid{grid-template-columns:repeat(6,1fr)!important;gap:3px!important;}
.sms-shape-btn,.sms-shape-btn.sl2-shape-card{
  border:none!important;
  background:transparent!important;
  color:var(--sm-c-text)!important;
  border-radius:9px!important;
  padding:6px 2px 5px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:3px!important;
  box-shadow:none!important;
  transition:background var(--sm-t-fast),box-shadow var(--sm-t-fast)!important;
  position:relative!important;
}
.sms-shape-btn.sl2-shape-card span{
  display:block!important;
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:-0.02em!important;
  color:var(--sm-c-text-2)!important;
  text-transform:none!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.sms-shape-btn.sl2-shape-card:hover{background:rgba(60,60,67,0.06)!important;}
.sms-shape-btn.sl2-shape-card.active{background:var(--sm-c-brand)!important;border-color:var(--sm-c-brand)!important;box-shadow:var(--sm-sh-brand)!important;}
.sms-shape-btn.sl2-shape-card.active span{color:#fff!important;font-weight:700!important;}
/* Make the SM-logo image icon read on solid blue: invert dark logo to white */
/* Bigger frame container + smaller inner img so the shape-specific frame reads */
.sms-config .sl2-shape-icon{width:26px!important;height:26px!important;background:#fff!important;border:1.5px solid #ccc!important;}
.sms-config .sl2-shape-icon img{width:13px!important;height:13px!important;object-fit:contain!important;}
/* Shape-specific frames */
.sms-config .sl2-shape-diecut{border-radius:5px!important;border:1.5px dashed #888!important;}
.sms-config .sl2-shape-circle{border-radius:50%!important;}
.sms-config .sl2-shape-square{border-radius:3px!important;}
.sms-config .sl2-shape-rect{border-radius:3px!important;width:34px!important;height:24px!important;}
.sms-config .sl2-shape-oval{border-radius:50%!important;width:34px!important;height:24px!important;}
.sms-config .sl2-shape-rounded{border-radius:8px!important;}
/* Active state: keep the frame white-background + dark SM logo visible inside, just brighter border to indicate selection */
.sms-shape-btn.sl2-shape-card.active .sl2-shape-icon{border-color:var(--sm-c-brand-2)!important;box-shadow:0 0 0 2px rgba(255,255,255,0.8)!important;}
.sms-pill:hover,.sms-size-btn:hover,.sms-qty-btn:hover,.sms-shape-btn:hover,.sms-finish-btn:hover{
  background:var(--sm-c-surface-2)!important;
  border-color:var(--sm-c-border-strong)!important;
  transform:none!important;
  box-shadow:none!important;
}
.sms-pill.active,.sms-size-btn.active,.sms-qty-btn.active,.sms-shape-btn.active,.sms-finish-btn.active{
  background:var(--sm-c-brand)!important;
  color:#fff!important;
  border-color:var(--sm-c-brand)!important;
  box-shadow:var(--sm-sh-brand)!important;
}

/* Price block */
.sms-price-box,#smsPriceBox{
  background:var(--sm-c-surface)!important;
  border:none!important;
  border-radius:12px!important;
  box-shadow:var(--sm-sh-1)!important;
  padding:5px 8px 4px!important;
  margin:0 8px 6px 8px!important;
}

/* ATC — iOS-style primary, compact to match the section cards */
#btnATCBottom,.sms-atc,.sms-atc-bottom{
  background:var(--sm-c-brand)!important;
  border:none!important;
  border-radius:9px!important;
  color:#fff!important;
  font-weight:700!important;
  font-size:12.5px!important;
  letter-spacing:-0.01em!important;
  padding:8px 12px!important;
  min-height:0!important;
  margin-top:5px!important;
  box-shadow:0 1px 2px rgba(0,122,255,0.18),0 3px 10px rgba(0,122,255,0.22)!important;
  transition:transform var(--sm-t-fast),box-shadow var(--sm-t-fast),background var(--sm-t-fast)!important;
}
.sms-atc-bottom svg{width:14px!important;height:14px!important;}
.sms-ca{padding:6px 10px!important;font-size:11.5px!important;border-radius:8px!important;}
#btnATCBottom:hover,.sms-atc:hover{
  background:var(--sm-c-brand-3)!important;
  transform:none!important;
  box-shadow:0 2px 4px rgba(0,122,255,0.20),0 6px 22px rgba(0,122,255,0.36)!important;
}
#btnATCBottom:active,.sms-atc:active{transform:scale(0.98)!important;}

/* Save badge — iOS green */
.sms-save,.sms-save-badge{
  background:#34c759!important;
  color:#fff!important;
  border:none!important;
  font-weight:700!important;
  letter-spacing:-0.01em!important;
  border-radius:8px!important;
  box-shadow:none!important;
}

/* Tooltips — refined */
.sms-tool-icon[title]:hover::before,.sms-tool-action[title]:hover::before{
  background:rgba(28,28,30,0.95)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:500!important;
  padding:6px 10px!important;
  border-radius:8px!important;
  letter-spacing:-0.01em!important;
  box-shadow:0 4px 16px rgba(0,0,0,0.16)!important;
  backdrop-filter:blur(20px)!important;
}

/* Focus ring — Apple blue, subtle */
.sms button:focus-visible,.sms input:focus-visible{
  outline:2px solid var(--sm-c-brand)!important;
  outline-offset:2px!important;
}

/* Scrollbars invisible until hovered */
.sms-toolstrip::-webkit-scrollbar,.sms-config::-webkit-scrollbar{width:5px;}
.sms-toolstrip::-webkit-scrollbar-thumb,.sms-config::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.0);border-radius:3px;transition:background 0.2s;}
.sms-toolstrip:hover::-webkit-scrollbar-thumb,.sms-config:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.18);}

/* Background gradient — pale, Apple-y */
.sms-editor{background:#f0f2f5!important;}

/* Mobile reset — the Apple-style desktop overrides above use !important without
   media queries, so they'd leak into mobile and break the bottom-bar layout.
   Reset toolstrip/config back to mobile defaults: flush full-width, no border
   radius, no floating margins, no cross-axis dimensions. */
@media(max-width:768px){
  .sms-toolstrip,.sms-config{
    margin:0!important;
    border-radius:0!important;
    height:auto!important;
    border:none!important;
    box-shadow:none!important;
    padding:0!important;
  }
  .sms-tool-group,.sms-config-section{
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .sms-add-grid{grid-template-columns:repeat(5,1fr)!important;}
}
#smsDetailWrap{margin-top:6px;margin-bottom:10px;padding:1px 2px;}
/* Shrink ALL toolstrip icons 30% to fit 4 cutline-smoothness buttons + reduce crowding */
.sms-toolstrip .sms-tool-icon svg{width:14px;height:14px;}
.sms-add-grid .sms-tool-icon svg{width:13px;height:13px;}
.sms-toolstrip .sms-tool-icon{padding:clamp(3px,0.4vh,5px) 3px;gap:1px;}
.sms-toolstrip .sms-tool-icon span{font-size:7.5px;}
/* Floating Start Over button — top right of canvas preview area */
.sms-startover-float{
  position:absolute;top:12px;right:12px;z-index:30;
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px 7px 10px;
  font-size:11px;font-weight:600;letter-spacing:0.2px;
  color:#444;background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.10),0 1px 2px rgba(0,0,0,0.06);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:all 0.15s ease;
}
.sms-startover-float:hover:not(:disabled){
  background:#fff;color:#222;border-color:rgba(0,0,0,0.15);
  box-shadow:0 3px 10px rgba(0,0,0,0.14),0 1px 3px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}
.sms-startover-float:disabled{opacity:0.35;cursor:not-allowed;}
.sms-startover-float svg{flex-shrink:0;}
/* Cutline computing loading indicator — thin animated progress bar at top
   of viewport. Shown while smoothness/border changes are recomputing. */
body.sms-cutline-computing::before{
  content:'';
  position:fixed;top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,transparent 0%,#2893f2 25%,#2893f2 75%,transparent 100%);
  background-size:50% 100%;
  background-repeat:no-repeat;
  z-index:99999;
  animation:sms-loading-slide 1.0s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sms-loading-slide{
  0%{background-position:-50% 0;}
  100%{background-position:150% 0;}
}
/* Subtle "computing" cursor hint on the toolbar during recompute */
body.sms-cutline-computing .sms-toolstrip,
body.sms-cutline-computing .sms-config{
  pointer-events:none;
  opacity:0.85;
  transition:opacity 0.15s ease;
}
/* PERF: GPU compositing hints on the canvas stage — smoother zoom/pan,
   no main-thread paint on transform changes. */
#stickerStage{
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* PERF: while user is actively dragging/resizing/touching the canvas, pause
   ALL CSS transitions and animations site-wide + hide expensive vinyl/gloss
   overlays. Dramatically reduces frame cost on mobile and low-end devices.
   Class is added on mouse/touch down, removed 120ms after release. */
body.sms-interacting *,
body.sms-interacting *::before,
body.sms-interacting *::after{
  transition:none!important;
  animation-play-state:paused!important;
}
body.sms-interacting .sms-vinyl-texture,
body.sms-interacting .sms-vinyl-specular,
body.sms-interacting .sms-edge-rim,
body.sms-interacting .sms-gloss,
body.sms-interacting .sms-gloss-layer,
body.sms-interacting .sms-holo-overlay,
body.sms-interacting .sms-stage-shadow{
  visibility:hidden;
}
/* push-bust-1777557691673597500 */