html:has(.sswmm),body:has(.sswmm){margin:0!important;background:#f5f6f8!important;overflow-x:hidden!important;overscroll-behavior:none!important;-webkit-text-size-adjust:100%!important}
body:has(.sswmm) header,body:has(.sswmm) footer,body:has(.sswmm) .site-header,body:has(.sswmm) .site-footer{display:none!important}
.sswmm{--teal:#17c8bf;--ink:#18191d;--glass:rgba(33,34,38,.78);position:relative;min-height:100svh;background:radial-gradient(circle at 50% 30%,#fff 0,#f6f7f9 44%,#eef0f4 100%);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans",sans-serif;color:var(--ink);overflow:hidden;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}
.sswmm *{box-sizing:border-box}
.sswmm-topbar{position:relative;margin:12px 18px 8px;height:54px;border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 8px 28px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;padding:0 48px;z-index:10}
.sswmm-back{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;font-size:42px;line-height:30px;color:#111}
.sswmm-title{font-weight:900;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.sswmm-colors-section{position:relative;z-index:8;padding:0 18px}
.sswmm-section-title{font-size:17px;font-weight:900;margin:6px 0 8px}
.sswmm-color-list{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.sswmm-color-list::-webkit-scrollbar{display:none}
.sswmm-color-card{flex:0 0 86px;height:102px;border:2px solid transparent;border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(0,0,0,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative;overflow:hidden}
.sswmm-color-card.active{border-color:var(--teal);box-shadow:0 10px 26px rgba(23,200,191,.18)}
.sswmm-color-card.active:after{content:"✓";position:absolute;right:7px;top:7px;width:22px;height:22px;border-radius:999px;background:var(--teal);color:#fff;font-size:15px;font-weight:900;display:flex;align-items:center;justify-content:center}
.sswmm-color-card img{width:58px;height:54px;object-fit:contain;display:block}
.sswmm-color-card span{font-size:11px;font-weight:800;line-height:1.15;max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sswmm-stage{position:relative;height:58svh;min-height:430px;display:flex;align-items:center;justify-content:center;padding:0 76px 8px 54px;z-index:1}
.sswmm-product{position:relative;width:min(98vw,680px);height:100%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 20px 28px rgba(0,0,0,.10))}
.sswmm-product-base{display:block;width:112%;height:112%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;z-index:1}
.sswmm-print-area{position:absolute;left:19%;top:24%;width:62%;height:42%;display:flex;align-items:center;justify-content:center;z-index:5;touch-action:none}
.sswmm-layer{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0) scale(1) rotate(0deg);transform-origin:center center;touch-action:none;will-change:transform,opacity;min-width:44px;min-height:44px;z-index:20}
.sswmm-layer.is-moving{filter:drop-shadow(0 14px 22px rgba(0,0,0,.24));z-index:40}
#sswmmImage{display:none;width:auto;height:auto;max-width:none;max-height:none;pointer-events:none;-webkit-user-drag:none}
.sswmm-text{display:inline-block;min-width:1em;min-height:1em;font-weight:900;color:#111;font-size:48px;line-height:1;white-space:pre;outline:0;border:0;background:transparent;text-align:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sswmm-text:focus{user-select:text;-webkit-user-select:text}
.sswmm-guide{position:absolute;background:var(--teal);opacity:0;pointer-events:none;z-index:1}.sswmm-guide.show{opacity:.85}.sswmm-guide-h{left:-40%;right:-40%;top:50%;height:1px}.sswmm-guide-v{top:-45%;bottom:-45%;left:50%;width:1px}
.sswmm-size{position:absolute;left:18px;top:44%;transform:translateY(-50%);width:56px;height:235px;background:var(--glass);border-radius:34px;box-shadow:0 14px 32px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;z-index:20;color:#fff}
.sswmm-size input{position:absolute;width:188px;transform:rotate(-90deg);accent-color:var(--teal)}
.sswmm-size-label{position:absolute;bottom:20px;text-align:center;font-weight:900;font-size:18px;line-height:1}.sswmm-size-label small{display:block;font-size:10px;margin-top:4px}
.sswmm-actions{position:absolute;right:16px;top:46%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:30}
.sswmm-action-btn{width:64px;height:64px;border:0;border-radius:18px;background:var(--glass);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:900;letter-spacing:.05em}
.sswmm-action-icon{font-size:28px;line-height:1}.sswmm-action-btn small{font-size:10px}
.sswmm-file input{display:none}
.sswmm-side-tabs{position:relative;z-index:15;display:flex;justify-content:center;gap:14px;margin:-18px auto 8px;padding:0 18px}
.sswmm-side-tabs button{min-width:120px;height:70px;border:2px solid transparent;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 8px 20px rgba(0,0,0,.07);font-size:15px;font-weight:900;color:#111}
.sswmm-side-tabs button.active{border-color:var(--teal);color:var(--teal)}
.sswmm-bottom{position:relative;z-index:20;margin:0 20px 12px;height:70px;border-radius:18px;background:linear-gradient(180deg,rgba(45,46,50,.92),rgba(30,31,35,.92));box-shadow:0 14px 32px rgba(0,0,0,.18);display:flex;overflow:hidden}
.sswmm-bottom button{flex:1;border:0;background:transparent;color:#fff;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-right:1px solid rgba(255,255,255,.08)}
.sswmm-bottom span{font-size:28px}.sswmm-bottom small{font-size:12px}.sswmm-color-tool span{width:36px;height:36px;border-radius:50%;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.sswmm-image-menu{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:45;display:none}.sswmm.image-active .sswmm-image-menu{display:block}
.sswmm-image-menu>button{height:44px;border:0;border-radius:999px;background:var(--glass);color:#fff;font-weight:900;padding:0 22px}
.sswmm-opacity-panel{display:none;margin-top:8px;width:280px;background:rgba(35,36,40,.92);border-radius:18px;padding:12px;color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.25)}.sswmm-opacity-panel.show{display:block}
.sswmm-opacity-modes{display:flex;gap:6px;margin-bottom:8px}.sswmm-opacity-modes button{flex:1;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-weight:800;padding:8px 4px}.sswmm-opacity-modes button.active{background:var(--teal)}
.sswmm-opacity-panel input{width:100%;accent-color:var(--teal)}
.sswmm-toast,.sswmm-loading{position:fixed;left:50%;top:15px;transform:translateX(-50%);z-index:99;background:rgba(0,0,0,.68);color:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:800;opacity:0;pointer-events:none;transition:.2s}.sswmm-toast.show,.sswmm-loading.show{opacity:1}
@media(max-height:740px){.sswmm-stage{height:54svh;min-height:360px}.sswmm-product-base{width:108%;height:108%}.sswmm-size{height:190px}.sswmm-side-tabs button{height:58px}.sswmm-bottom{height:62px}}
/* v1.5.2 mobile UI polish */
:root{--sswmm-emerald:#14c8bd}
body:has(.sswmm) footer,
body:has(.sswmm) .site-footer,
body:has(.sswmm) .storefront-handheld-footer-bar,
body:has(.sswmm) .woocommerce-store-notice,
body:has(.sswmm) .mobile-bottom-menu,
body:has(.sswmm) .bottom-navigation,
body:has(.sswmm) .handheld-footer-bar,
body:has(.sswmm) nav[class*="bottom"],
body:has(.sswmm) div[class*="mobile"][class*="footer"],
body:has(.sswmm) div[class*="bottom"][class*="menu"]{
display:none!important;
}
/* 上段の商品名/戻るボタンを非表示 */
.sswmm-topbar{display:none!important}
/* カラー一覧はサイトヘッダー直下、見出し非表示 */
.sswmm-colors-section{
padding:10px 10px 2px!important;
margin:0!important;
position:relative!important;
z-index:50!important;
}
.sswmm-section-title{display:none!important}
.sswmm-color-list{
gap:8px!important;
padding:0 2px 5px!important;
min-height:86px!important;
}
/* カラーリスト画像を大きく、背景を小さく軽く */
.sswmm-color-card{
flex:0 0 86px!important;
width:86px!important;
height:82px!important;
border-radius:12px!important;
background:rgba(255,255,255,.72)!important;
box-shadow:0 4px 12px rgba(0,0,0,.055)!important;
border:1px solid rgba(0,0,0,.045)!important;
gap:2px!important;
padding:3px 4px!important;
}
.sswmm-color-card.active{
border:2px solid var(--sswmm-emerald)!important;
box-shadow:0 6px 14px rgba(20,200,189,.18)!important;
}
.sswmm-color-card.active:after{
right:3px!important;
top:3px!important;
width:20px!important;
height:20px!important;
background:var(--sswmm-emerald)!important;
}
.sswmm-color-card img{
width:74px!important;
height:54px!important;
object-fit:contain!important;
}
.sswmm-color-card span{
font-size:10px!important;
line-height:1.05!important;
max-width:78px!important;
font-weight:800!important;
}
/* ボディ画像を最大化 */
.sswmm-stage{
height:68svh!important;
min-height:500px!important;
padding:0 48px 0 30px!important;
margin-top:-2px!important;
overflow:visible!important;
}
.sswmm-product{
width:118vw!important;
max-width:900px!important;
height:100%!important;
transform:translateX(-1px)!important;
}
.sswmm-product-base{
width:132%!important;
height:132%!important;
object-fit:contain!important;
max-width:none!important;
max-height:none!important;
}
.sswmm-print-area{
left:20%!important;
top:24%!important;
width:60%!important;
height:43%!important;
}
/* 右アイコンを小型化、白背景＋エメラルドグリーン */
.sswmm-actions{
right:10px!important;
top:47%!important;
gap:8px!important;
}
.sswmm-action-btn{
width:50px!important;
height:58px!important;
border-radius:14px!important;
background:rgba(255,255,255,.88)!important;
color:var(--sswmm-emerald)!important;
box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
border:1px solid rgba(20,200,189,.13)!important;
}
.sswmm-action-icon{
color:var(--sswmm-emerald)!important;
font-size:24px!important;
}
.sswmm-action-btn small{
color:var(--sswmm-emerald)!important;
font-size:9px!important;
font-weight:900!important;
}
/* 左レベルバーの外線を細く */
.sswmm-size{
left:10px!important;
top:52%!important;
width:44px!important;
height:210px!important;
border-radius:24px!important;
background:rgba(255,255,255,.55)!important;
border:1px solid rgba(0,0,0,.18)!important;
box-shadow:0 8px 18px rgba(0,0,0,.055)!important;
color:#111!important;
}
.sswmm-size input{
width:166px!important;
accent-color:var(--sswmm-emerald)!important;
}
.sswmm-size-label{
bottom:17px!important;
color:#151515!important;
font-size:15px!important;
}
.sswmm-size-label small{
font-size:9px!important;
font-weight:900!important;
}
/* 表/裏ボタン */
.sswmm-side-tabs{
margin:-8px auto 8px!important;
gap:12px!important;
padding:0 44px!important;
}
.sswmm-side-tabs button{
min-width:132px!important;
height:60px!important;
border-radius:15px!important;
background:rgba(255,255,255,.82)!important;
box-shadow:0 6px 14px rgba(0,0,0,.065)!important;
}
.sswmm-side-tabs button.active{
border-color:var(--sswmm-emerald)!important;
color:var(--sswmm-emerald)!important;
}
/* 下部ツールもエメラルドグリーン統一 */
.sswmm-bottom{
height:60px!important;
margin:0 16px 10px!important;
border-radius:14px!important;
background:rgba(255,255,255,.88)!important;
box-shadow:0 8px 20px rgba(0,0,0,.10)!important;
}
.sswmm-bottom button{
color:var(--sswmm-emerald)!important;
border-right:1px solid rgba(0,0,0,.06)!important;
}
.sswmm-bottom span{
font-size:24px!important;
color:var(--sswmm-emerald)!important;
}
.sswmm-bottom small{
color:var(--sswmm-emerald)!important;
font-size:10px!important;
font-weight:900!important;
}
.sswmm-image-menu>button{
background:rgba(255,255,255,.9)!important;
color:var(--sswmm-emerald)!important;
box-shadow:0 8px 20px rgba(0,0,0,.12)!important;
}
@media(max-height:760px){
.sswmm-stage{height:64svh!important;min-height:430px!important}
.sswmm-product-base{width:124%!important;height:124%!important}
.sswmm-color-card{flex-basis:78px!important;width:78px!important;height:76px!important}
.sswmm-color-card img{width:66px!important;height:49px!important}
.sswmm-size{height:185px!important}
}
.sswmm,.sswmm-stage,.sswmm-product,.sswmm-print-area,.sswmm-layer{
touch-action:none!important;
-webkit-user-select:none!important;
user-select:none!important;
-webkit-touch-callout:none!important;
}
/* v1.5.3 preview zoom controls */
.sswmm{--sswmm-preview-scale:1}
.sswmm-product{
transform:translateX(-1px) scale(var(--sswmm-preview-scale))!important;
transform-origin:center center!important;
transition:transform .16s ease-out!important;
}
.sswmm-preview-zoom{
position:absolute!important;
left:10px!important;
top:calc(52% + 124px)!important;
transform:translateY(-50%)!important;
z-index:28!important;
display:flex!important;
flex-direction:column!important;
gap:7px!important;
align-items:center!important;
}
.sswmm-preview-zoom button{
width:44px!important;
height:38px!important;
border-radius:16px!important;
border:1px solid rgba(20,200,189,.25)!important;
background:rgba(255,255,255,.78)!important;
color:var(--sswmm-emerald)!important;
font-weight:900!important;
font-size:18px!important;
line-height:1!important;
box-shadow:0 6px 14px rgba(0,0,0,.07)!important;
backdrop-filter:blur(10px)!important;
-webkit-backdrop-filter:blur(10px)!important;
}
#sswmmPreviewZoomReset{font-size:11px!important}
.sswmm-preview-zoom button:active{
transform:scale(.94)!important;
background:rgba(20,200,189,.12)!important;
}
@media(max-height:760px){
.sswmm-preview-zoom{top:calc(52% + 108px)!important;gap:5px!important}
.sswmm-preview-zoom button{width:42px!important;height:34px!important;border-radius:14px!important}
}
/* v1.5.4 final UI balance */
body:has(.sswmm) footer,
body:has(.sswmm) .site-footer,
body:has(.sswmm) .storefront-handheld-footer-bar,
body:has(.sswmm) .handheld-footer-bar,
body:has(.sswmm) .mobile-bottom-menu,
body:has(.sswmm) .bottom-navigation,
body:has(.sswmm) [class*="footer"],
body:has(.sswmm) [class*="Footer"],
body:has(.sswmm) [class*="bottom"][class*="nav"],
body:has(.sswmm) [class*="bottom"][class*="menu"]{
display:none!important;
visibility:hidden!important;
height:0!important;
min-height:0!important;
pointer-events:none!important;
}
.sswmm{padding-bottom:max(10px,env(safe-area-inset-bottom))!important;overflow:hidden!important}
.sswmm-stage{height:67svh!important;min-height:500px!important;padding:0 58px 0 42px!important;margin-top:0!important}
.sswmm-product{width:122vw!important;max-width:940px!important}
.sswmm-product-base{width:136%!important;height:136%!important}
.sswmm-size{left:12px!important;top:46%!important;width:42px!important;height:206px!important;z-index:35!important}
.sswmm-preview-zoom{left:12px!important;top:calc(46% + 178px)!important;z-index:36!important;gap:5px!important}
.sswmm-preview-zoom button{width:42px!important;height:40px!important;border-radius:15px!important}
#sswmmPreviewZoomReset{font-size:10px!important}
.sswmm-actions{right:10px!important;top:50%!important;transform:translateY(-50%)!important;gap:8px!important}
.sswmm-action-btn{width:52px!important;height:56px!important;border-radius:14px!important}
.sswmm-action-icon{font-size:23px!important}.sswmm-action-btn small{font-size:9px!important}
.sswmm-side-tabs{margin:-12px auto 8px!important;padding:0 82px!important}
.sswmm-side-tabs button{height:58px!important;min-width:124px!important}
.sswmm-bottom{height:60px!important;margin:0 14px 6px!important;border-radius:14px!important}
.sswmm-menu-toggle{position:relative!important;z-index:80!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;margin:6px auto 0!important;border:0!important;background:transparent!important;color:var(--sswmm-emerald)!important;font-weight:900!important;font-size:14px!important}
.sswmm-menu-toggle span{font-size:18px!important;transform:rotate(-35deg)!important}.sswmm-menu-toggle i{font-style:normal!important;font-size:16px!important}
.sswmm.menus-hidden .sswmm-size,
.sswmm.menus-hidden .sswmm-preview-zoom,
.sswmm.menus-hidden .sswmm-actions,
.sswmm.menus-hidden .sswmm-side-tabs,
.sswmm.menus-hidden .sswmm-bottom,
.sswmm.menus-hidden .sswmm-image-menu{opacity:0!important;pointer-events:none!important;transition:opacity .18s ease!important}
.sswmm.menus-hidden .sswmm-menu-toggle{position:fixed!important;bottom:max(12px,env(safe-area-inset-bottom))!important;left:50%!important;transform:translateX(-50%)!important;background:rgba(255,255,255,.88)!important;border:1px solid rgba(20,200,189,.18)!important;box-shadow:0 8px 20px rgba(0,0,0,.10)!important;border-radius:999px!important;padding:8px 15px!important}
.sswmm.menus-hidden .sswmm-menu-toggle b{font-size:0!important}.sswmm.menus-hidden .sswmm-menu-toggle b:before{content:"メニューを表示";font-size:14px!important}
.sswmm.menus-hidden .sswmm-menu-toggle i{transform:rotate(180deg)!important}
.sswmm.menus-hidden .sswmm-stage{height:78svh!important;padding:0 18px!important}
.sswmm.menus-hidden .sswmm-product{width:130vw!important}.sswmm.menus-hidden .sswmm-product-base{width:142%!important;height:142%!important}
@media(max-height:760px){
.sswmm-stage{height:64svh!important;min-height:430px!important}
.sswmm-product-base{width:128%!important;height:128%!important}
.sswmm-size{top:45%!important;height:178px!important}
.sswmm-preview-zoom{top:calc(45% + 154px)!important}
.sswmm-preview-zoom button{height:34px!important}
.sswmm-action-btn{height:52px!important}
.sswmm-bottom{height:56px!important}
}
/* v1.5.5 white unified background */
html:has(.sswmm),
body:has(.sswmm){
background:#ffffff!important;
}
.sswmm,
.sswmm-stage,
.sswmm-product,
.sswmm-colors-section,
.sswmm-side-tabs{
background:#ffffff!important;
}
.sswmm-bottom,
.sswmm-color-card,
.sswmm-action-btn,
.sswmm-preview-zoom button,
.sswmm-size,
.sswmm-menu-toggle,
.sswmm.menus-hidden .sswmm-menu-toggle{
background:#ffffff!important;
}
/* v1.5.6 footer + trash fix */
/* Force-hide WooCommerce / theme mobile footer bars */
html:has(.sswmm),
body:has(.sswmm){
padding-bottom:0!important;
margin-bottom:0!important;
overflow-x:hidden!important;
}
body:has(.sswmm) #colophon,
body:has(.sswmm) #footer,
body:has(.sswmm) .site-footer,
body:has(.sswmm) footer,
body:has(.sswmm) .storefront-handheld-footer-bar,
body:has(.sswmm) .handheld-footer-bar,
body:has(.sswmm) .woocommerce-mobile-bottom-navigation,
body:has(.sswmm) .woocommerce-store-notice,
body:has(.sswmm) .mobile-bottom-menu,
body:has(.sswmm) .mobile-footer-menu,
body:has(.sswmm) .bottom-navigation,
body:has(.sswmm) .bottom-menu,
body:has(.sswmm) .wc-block-mini-cart,
body:has(.sswmm) .wp-block-template-part,
body:has(.sswmm) [id*="footer"],
body:has(.sswmm) [class*="footer"],
body:has(.sswmm) [class*="Footer"],
body:has(.sswmm) [class*="handheld"],
body:has(.sswmm) [class*="bottom"][class*="bar"],
body:has(.sswmm) [class*="bottom"][class*="nav"],
body:has(.sswmm) [class*="bottom"][class*="menu"]{
display:none!important;
visibility:hidden!important;
opacity:0!important;
height:0!important;
min-height:0!important;
max-height:0!important;
overflow:hidden!important;
pointer-events:none!important;
position:absolute!important;
z-index:-9999!important;
}
/* keep maker controls visible during long-press / move */
.sswmm.is-dragging .sswmm-bottom,
.sswmm.is-dragging .sswmm-actions,
.sswmm.is-dragging .sswmm-side-tabs,
.sswmm.is-dragging .sswmm-menu-toggle{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
z-index:999!important;
}
/* trash/delete button must never disappear while editing/moving */
.sswmm-bottom [data-tool="delete"]{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
}
/* when menus are hidden, dragging should temporarily show the delete area */
.sswmm.menus-hidden.is-dragging .sswmm-bottom{
opacity:1!important;
pointer-events:auto!important;
transform:none!important;
position:relative!important;
}
/* v1.5.7 final clean UI / footer absolute hidden */
:root{--sswmm-emerald:#14c8bd!important}
/* absolute footer / mobile bar kill */
html:has(.sswmm),
body:has(.sswmm){
background:#fff!important;
padding-bottom:0!important;
margin-bottom:0!important;
overflow-x:hidden!important;
min-height:100svh!important;
}
body:has(.sswmm) footer,
body:has(.sswmm) #footer,
body:has(.sswmm) #colophon,
body:has(.sswmm) .site-footer,
body:has(.sswmm) .footer,
body:has(.sswmm) .site-info,
body:has(.sswmm) .storefront-handheld-footer-bar,
body:has(.sswmm) .handheld-footer-bar,
body:has(.sswmm) .woocommerce-mobile-bottom-navigation,
body:has(.sswmm) .wc-block-mini-cart,
body:has(.sswmm) .mobile-bottom-menu,
body:has(.sswmm) .mobile-footer-menu,
body:has(.sswmm) .bottom-navigation,
body:has(.sswmm) .bottom-menu,
body:has(.sswmm) .fixed-bottom,
body:has(.sswmm) .sticky-footer,
body:has(.sswmm) .wp-block-template-part:has(footer),
body:has(.sswmm) [id*="footer"],
body:has(.sswmm) [class*="footer"],
body:has(.sswmm) [class*="Footer"],
body:has(.sswmm) [class*="handheld"],
body:has(.sswmm) [class*="bottom"][class*="bar"],
body:has(.sswmm) [class*="bottom"][class*="nav"],
body:has(.sswmm) [class*="bottom"][class*="menu"]{
display:none!important;
visibility:hidden!important;
opacity:0!important;
width:0!important;
height:0!important;
min-width:0!important;
min-height:0!important;
max-height:0!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
pointer-events:none!important;
position:absolute!important;
left:-99999px!important;
bottom:auto!important;
z-index:-99999!important;
}
/* clean white canvas */
.sswmm{
background:#fff!important;
min-height:100svh!important;
padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
overflow:hidden!important;
}
/* color row */
.sswmm-topbar,
.sswmm-section-title{display:none!important}
.sswmm-colors-section{
background:#fff!important;
padding:12px 10px 4px!important;
margin:0!important;
z-index:60!important;
}
.sswmm-color-list{
min-height:92px!important;
gap:8px!important;
padding:0 4px 4px!important;
}
.sswmm-color-card{
flex:0 0 86px!important;
width:86px!important;
height:84px!important;
border-radius:13px!important;
background:#fff!important;
box-shadow:0 3px 12px rgba(0,0,0,.055)!important;
border:1px solid rgba(0,0,0,.06)!important;
padding:3px 4px!important;
}
.sswmm-color-card img{width:74px!important;height:55px!important;object-fit:contain!important}
.sswmm-color-card span{font-size:10px!important;font-weight:900!important;line-height:1.05!important}
.sswmm-color-card.active{border:2px solid var(--sswmm-emerald)!important;box-shadow:0 6px 18px rgba(20,200,189,.18)!important}
.sswmm-color-card.active:after{background:var(--sswmm-emerald)!important;width:20px!important;height:20px!important;top:3px!important;right:3px!important}
/* main preview: larger and balanced */
.sswmm-stage{
height:68svh!important;
min-height:510px!important;
padding:0 56px 0 48px!important;
margin:0!important;
background:#fff!important;
overflow:visible!important;
}
.sswmm-product{
width:124vw!important;
max-width:960px!important;
height:100%!important;
transform:translateX(0) scale(var(--sswmm-preview-scale,1))!important;
transform-origin:center center!important;
}
.sswmm-product-base{
width:138%!important;
height:138%!important;
max-width:none!important;
max-height:none!important;
object-fit:contain!important;
}
.sswmm-print-area{left:20%!important;top:24%!important;width:60%!important;height:43%!important}
/* left control separated */
.sswmm-size{
left:14px!important;
top:46%!important;
width:44px!important;
height:210px!important;
border-radius:24px!important;
background:#fff!important;
border:1px solid rgba(0,0,0,.15)!important;
box-shadow:0 5px 16px rgba(0,0,0,.06)!important;
color:#111!important;
z-index:45!important;
}
.sswmm-size input{width:170px!important;accent-color:var(--sswmm-emerald)!important}
.sswmm-size-label{font-size:16px!important;bottom:16px!important;color:#111!important}
.sswmm-size-label small{font-size:9px!important}
.sswmm-preview-zoom{
left:14px!important;
top:calc(46% + 184px)!important;
transform:translateY(-50%)!important;
gap:5px!important;
z-index:46!important;
}
.sswmm-preview-zoom button{
width:44px!important;
height:40px!important;
border-radius:15px!important;
background:#fff!important;
color:var(--sswmm-emerald)!important;
border:1px solid rgba(20,200,189,.20)!important;
box-shadow:0 5px 14px rgba(0,0,0,.06)!important;
font-weight:900!important;
}
#sswmmPreviewZoomReset{font-size:10px!important}
/* right action icons aligned */
.sswmm-actions{
right:11px!important;
top:50%!important;
transform:translateY(-50%)!important;
gap:9px!important;
z-index:46!important;
}
.sswmm-action-btn{
width:52px!important;
height:56px!important;
border-radius:14px!important;
background:#fff!important;
color:var(--sswmm-emerald)!important;
border:1px solid rgba(20,200,189,.13)!important;
box-shadow:0 5px 15px rgba(0,0,0,.07)!important;
}
.sswmm-action-icon{font-size:23px!important;color:var(--sswmm-emerald)!important}
.sswmm-action-btn small{font-size:9px!important;color:var(--sswmm-emerald)!important;font-weight:900!important}
/* side tabs */
.sswmm-side-tabs{
margin:-12px auto 8px!important;
padding:0 84px!important;
gap:14px!important;
}
.sswmm-side-tabs button{
height:58px!important;
min-width:124px!important;
border-radius:15px!important;
background:#fff!important;
box-shadow:0 4px 14px rgba(0,0,0,.06)!important;
}
.sswmm-side-tabs button.active{border-color:var(--sswmm-emerald)!important;color:var(--sswmm-emerald)!important}
/* bottom panel */
.sswmm-bottom{
height:60px!important;
margin:0 14px 6px!important;
border-radius:14px!important;
background:#fff!important;
box-shadow:0 6px 18px rgba(0,0,0,.08)!important;
}
.sswmm-bottom button,
.sswmm-bottom span,
.sswmm-bottom small{color:var(--sswmm-emerald)!important}
.sswmm-bottom span{font-size:24px!important}
.sswmm-bottom small{font-size:10px!important;font-weight:900!important}
/* menu toggle */
.sswmm-menu-toggle{
position:relative!important;
z-index:80!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
margin:7px auto 0!important;
border:0!important;
background:transparent!important;
color:var(--sswmm-emerald)!important;
font-weight:900!important;
font-size:14px!important;
}
.sswmm-menu-toggle i{font-style:normal!important}
.sswmm.menus-hidden .sswmm-size,
.sswmm.menus-hidden .sswmm-preview-zoom,
.sswmm.menus-hidden .sswmm-actions,
.sswmm.menus-hidden .sswmm-side-tabs,
.sswmm.menus-hidden .sswmm-bottom,
.sswmm.menus-hidden .sswmm-image-menu{opacity:0!important;pointer-events:none!important}
.sswmm.menus-hidden .sswmm-menu-toggle{
position:fixed!important;
left:50%!important;
bottom:max(12px,env(safe-area-inset-bottom))!important;
transform:translateX(-50%)!important;
background:#fff!important;
border:1px solid rgba(20,200,189,.18)!important;
box-shadow:0 8px 20px rgba(0,0,0,.10)!important;
border-radius:999px!important;
padding:8px 15px!important;
}
.sswmm.menus-hidden .sswmm-menu-toggle b{font-size:0!important}
.sswmm.menus-hidden .sswmm-menu-toggle b:before{content:"メニューを表示";font-size:14px!important}
.sswmm.menus-hidden .sswmm-stage{height:78svh!important;padding:0 18px!important}
.sswmm.menus-hidden .sswmm-product{width:132vw!important}
.sswmm.menus-hidden .sswmm-product-base{width:144%!important;height:144%!important}
/* dragging: keep delete visible */
.sswmm.is-dragging .sswmm-bottom,
.sswmm.is-dragging .sswmm-actions,
.sswmm.is-dragging .sswmm-side-tabs{opacity:1!important;display:flex!important;pointer-events:auto!important}
.sswmm-bottom [data-tool="delete"]{display:flex!important;opacity:1!important;visibility:visible!important}
/* mobile short screen */
@media(max-height:760px){
.sswmm-stage{height:64svh!important;min-height:430px!important}
.sswmm-product-base{width:130%!important;height:130%!important}
.sswmm-size{top:45%!important;height:178px!important}
.sswmm-preview-zoom{top:calc(45% + 156px)!important}
.sswmm-preview-zoom button{height:34px!important}
.sswmm-action-btn{height:52px!important}
.sswmm-bottom{height:56px!important}
}
/* v1.5.8 speed optimization */
body.sswmm-mobile-maker-active footer,
body.sswmm-mobile-maker-active #footer,
body.sswmm-mobile-maker-active #colophon,
body.sswmm-mobile-maker-active .site-footer,
body.sswmm-mobile-maker-active .footer,
body.sswmm-mobile-maker-active .site-info,
body.sswmm-mobile-maker-active .storefront-handheld-footer-bar,
body.sswmm-mobile-maker-active .handheld-footer-bar,
body.sswmm-mobile-maker-active .mobile-bottom-menu,
body.sswmm-mobile-maker-active .mobile-footer-menu,
body.sswmm-mobile-maker-active .bottom-navigation,
body.sswmm-mobile-maker-active .bottom-menu,
body.sswmm-mobile-maker-active .woocommerce-mobile-bottom-navigation{
display:none!important;
visibility:hidden!important;
height:0!important;
min-height:0!important;
max-height:0!important;
overflow:hidden!important;
pointer-events:none!important;
}
.sswmm-color-card img,
.sswmm-product-base{
content-visibility:auto;
}
/* v1.5.9 footer absolute hide + normal text input */
body.sswmm-mobile-maker-active{
padding-bottom:0!important;
margin-bottom:0!important;
}
body.sswmm-mobile-maker-active .storefront-handheld-footer-bar,
body.sswmm-mobile-maker-active .handheld-footer-bar,
body.sswmm-mobile-maker-active .mobile-bottom-menu,
body.sswmm-mobile-maker-active .mobile-footer-menu,
body.sswmm-mobile-maker-active .bottom-navigation,
body.sswmm-mobile-maker-active .bottom-menu,
body.sswmm-mobile-maker-active .woocommerce-mobile-bottom-navigation,
body.sswmm-mobile-maker-active .wp-block-woocommerce-customer-account,
body.sswmm-mobile-maker-active .wp-block-woocommerce-mini-cart,
body.sswmm-mobile-maker-active .wp-block-woocommerce-customer-account,
body.sswmm-mobile-maker-active [aria-label*="Shop"],
body.sswmm-mobile-maker-active [aria-label*="Cart"],
body.sswmm-mobile-maker-active [aria-label*="account"],
body.sswmm-mobile-maker-active [class*="handheld"],
body.sswmm-mobile-maker-active [class*="mobile"][class*="nav"],
body.sswmm-mobile-maker-active [class*="mobile"][class*="menu"],
body.sswmm-mobile-maker-active [class*="bottom"][class*="nav"],
body.sswmm-mobile-maker-active [class*="bottom"][class*="menu"],
body.sswmm-mobile-maker-active [class*="bottom"][class*="bar"]{
display:none!important;
visibility:hidden!important;
opacity:0!important;
height:0!important;
max-height:0!important;
min-height:0!important;
overflow:hidden!important;
pointer-events:none!important;
position:absolute!important;
left:-99999px!important;
z-index:-99999!important;
}
/* native text selection/callout disabled; text entry uses normal prompt */
.sswmm-text{
-webkit-user-select:none!important;
user-select:none!important;
-webkit-touch-callout:none!important;
cursor:pointer!important;
}
/* v1.6.0 image minimum scale + hide left level bar + force footer off */
/* left level bar hidden for both text and image */
.sswmm-size,
#sswmmSizePanel{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}
/* move preview zoom controls to left side neatly after hiding level bar */
.sswmm-preview-zoom{
left:12px!important;
top:50%!important;
transform:translateY(-50%)!important;
z-index:60!important;
}
/* force site footer/bottom nav hidden even if injected late */
html:has(.sswmm),
body:has(.sswmm),
body.sswmm-mobile-maker-active{
padding-bottom:0!important;
margin-bottom:0!important;
}
body:has(.sswmm) footer,
body:has(.sswmm) #footer,
body:has(.sswmm) #colophon,
body:has(.sswmm) .site-footer,
body:has(.sswmm) .footer,
body:has(.sswmm) .site-info,
body:has(.sswmm) .storefront-handheld-footer-bar,
body:has(.sswmm) .handheld-footer-bar,
body:has(.sswmm) .woocommerce-mobile-bottom-navigation,
body:has(.sswmm) .mobile-bottom-menu,
body:has(.sswmm) .mobile-footer-menu,
body:has(.sswmm) .bottom-navigation,
body:has(.sswmm) .bottom-menu,
body:has(.sswmm) .fixed-bottom,
body:has(.sswmm) .sticky-footer,
body:has(.sswmm) [role="navigation"][class*="mobile"],
body:has(.sswmm) [role="navigation"][class*="bottom"],
body:has(.sswmm) [class*="my-account"],
body:has(.sswmm) [class*="mini-cart"],
body:has(.sswmm) [class*="footer"],
body:has(.sswmm) [class*="Footer"],
body:has(.sswmm) [class*="handheld"],
body:has(.sswmm) [class*="bottom"][class*="nav"],
body:has(.sswmm) [class*="bottom"][class*="menu"],
body:has(.sswmm) [class*="bottom"][class*="bar"]{
display:none!important;
visibility:hidden!important;
opacity:0!important;
width:0!important;
height:0!important;
min-width:0!important;
min-height:0!important;
max-height:0!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
pointer-events:none!important;
position:absolute!important;
left:-100000px!important;
top:auto!important;
bottom:auto!important;
z-index:-100000!important;
}
/* keep our own menus visible */
.sswmm .sswmm-bottom,
.sswmm .sswmm-actions,
.sswmm .sswmm-side-tabs,
.sswmm .sswmm-preview-zoom{
visibility:visible!important;
}
/* v1.6.1 direct preview text input + footer/trash fixes */
body.sswmm-mobile-maker-active footer,
body.sswmm-mobile-maker-active #footer,
body.sswmm-mobile-maker-active #colophon,
body.sswmm-mobile-maker-active .site-footer,
body.sswmm-mobile-maker-active .footer,
body.sswmm-mobile-maker-active .site-info,
body.sswmm-mobile-maker-active .storefront-handheld-footer-bar,
body.sswmm-mobile-maker-active .handheld-footer-bar,
body.sswmm-mobile-maker-active .woocommerce-mobile-bottom-navigation,
body.sswmm-mobile-maker-active .mobile-bottom-menu,
body.sswmm-mobile-maker-active .mobile-footer-menu,
body.sswmm-mobile-maker-active .bottom-navigation,
body.sswmm-mobile-maker-active .bottom-menu,
body.sswmm-mobile-maker-active .fixed-bottom,
body.sswmm-mobile-maker-active .sticky-footer,
body.sswmm-mobile-maker-active [class*="footer"],
body.sswmm-mobile-maker-active [class*="Footer"],
body.sswmm-mobile-maker-active [class*="handheld"],
body.sswmm-mobile-maker-active [class*="bottom"][class*="nav"],
body.sswmm-mobile-maker-active [class*="bottom"][class*="menu"],
body.sswmm-mobile-maker-active [class*="bottom"][class*="bar"]{
display:none!important;
visibility:hidden!important;
opacity:0!important;
height:0!important;
max-height:0!important;
min-height:0!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
pointer-events:none!important;
position:absolute!important;
left:-100000px!important;
z-index:-100000!important;
}
.sswmm-text{
-webkit-user-select:text!important;
user-select:text!important;
-webkit-touch-callout:default!important;
cursor:text!important;
min-width:42px!important;
min-height:1.2em!important;
outline:0!important;
white-space:pre-wrap!important;
word-break:break-word!important;
}
.sswmm-text:focus{
outline:1px dashed rgba(20,200,189,.55)!important;
outline-offset:4px!important;
}
.sswmm.is-dragging .sswmm-bottom,
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"]{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
z-index:9999!important;
}
.sswmm.is-dragging .sswmm-bottom{
position:relative!important;
}
/* v1.6.2 design maker only: hide reCAPTCHA badge/box if injected late */
body.sswmm-mobile-maker-active .grecaptcha-badge,
body.sswmm-mobile-maker-active iframe[src*="recaptcha"],
body.sswmm-mobile-maker-active div[class*="grecaptcha"]{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}
/* v1.6.3 clean white design maker: white background, no shadow, no layer UI */
html:has(.sswmm),
body:has(.sswmm),
body.sswmm-mobile-maker-active,
.sswmm,
.sswmm-stage,
.sswmm-product,
.sswmm-print-area,
.sswmm-topbar,
.sswmm-colors-section,
.sswmm-color-card,
.sswmm-actions,
.sswmm-side-tabs button,
.sswmm-bottom,
.sswmm-image-menu,
.sswmm-opacity-panel,
.sswmm-preview-zoom,
.sswmm-menu-toggle{
background:#fff!important;
background-image:none!important;
box-shadow:none!important;
filter:none!important;
text-shadow:none!important;
}
.sswmm{background:#fff!important;overflow:hidden!important;color:#111!important;}
.sswmm-product{filter:none!important;}
.sswmm-product-base{filter:none!important;box-shadow:none!important;}
.sswmm-layer.is-moving{filter:none!important;}
.sswmm-topbar{border-bottom:1px solid #eee!important;border-radius:0!important;margin:0!important;height:48px!important;}
.sswmm-colors-section{padding:6px 12px!important;margin:0!important;border-bottom:1px solid #f0f0f0!important;}
.sswmm-color-card{border:1px solid #e8e8e8!important;border-radius:10px!important;}
.sswmm-color-card.active{border-color:#14c8bd!important;}
.sswmm-stage{background:#fff!important;}
.sswmm-bottom{
position:relative!important;
z-index:9999!important;
margin:0 10px max(8px,env(safe-area-inset-bottom))!important;
height:62px!important;
border:1px solid #e9e9e9!important;
border-radius:12px!important;
display:flex!important;
overflow:hidden!important;
}
.sswmm-bottom button{color:#111!important;background:#fff!important;border-right:1px solid #eee!important;}
.sswmm-bottom span{font-size:20px!important;color:#111!important;}
.sswmm-bottom small{font-size:10px!important;color:#111!important;}
.sswmm-bottom [data-tool="layer"],
.sswmm-bottom [data-tool="undo"]{display:none!important;}
.sswmm.text-active .sswmm-bottom [data-tool="font"],
.sswmm.text-active .sswmm-bottom [data-tool="color"],
.sswmm.text-active .sswmm-bottom [data-tool="stroke"],
.sswmm.text-active .sswmm-bottom [data-tool="warp"],
.sswmm.text-active .sswmm-bottom [data-tool="delete"]{display:flex!important;}
.sswmm.image-active .sswmm-bottom [data-tool="font"],
.sswmm.image-active .sswmm-bottom [data-tool="color"],
.sswmm.image-active .sswmm-bottom [data-tool="stroke"],
.sswmm.image-active .sswmm-bottom [data-tool="warp"]{display:none!important;}
.sswmm.is-dragging .sswmm-bottom,
.sswmm.menus-hidden.is-dragging .sswmm-bottom{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
position:relative!important;
z-index:99999!important;
}
.sswmm-text-tools-panel{
display:none;
position:absolute;
left:10px;
right:10px;
bottom:82px;
z-index:10000;
background:#fff!important;
border:1px solid #e6e6e6!important;
border-radius:12px!important;
padding:8px!important;
gap:8px!important;
overflow-x:auto!important;
white-space:nowrap!important;
box-shadow:none!important;
}
.sswmm-text-tools-panel.show{display:flex!important;}
.sswmm-text-tools-panel button{flex:0 0 auto;border:1px solid #ddd!important;background:#fff!important;color:#111!important;border-radius:999px!important;padding:9px 12px!important;font-weight:900!important;min-width:44px!important;min-height:38px!important;}
.sswmm-text-tools-panel button.swatch{width:42px!important;height:42px!important;border-radius:50%!important;padding:0!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)!important;}
.sswmm-text.warp-none{transform:none!important;letter-spacing:0!important;}
.sswmm-text.warp-arc{transform:perspective(240px) rotateX(var(--sswmm-warp-arc,10deg)) scaleY(.92)!important;}
.sswmm-text.warp-reverse{transform:perspective(240px) rotateX(calc(var(--sswmm-warp-arc,10deg) * -1)) scaleY(.92)!important;}
.sswmm-text.warp-wave{transform:skewY(var(--sswmm-warp-skew,-5deg))!important;}
.sswmm-text.warp-circle{letter-spacing:var(--sswmm-warp-space,.08em)!important;border-radius:999px!important;}
.sswmm-image-menu{display:none!important;}
.sswmm.image-active .sswmm-image-menu{display:none!important;}
/* v1.6.4 transparent direct text fix: prevent white box over product */
.sswmm-print-area,
.sswmm-layer,
.sswmm-layer.is-moving,
#sswmmText,
.sswmm-text,
.sswmm-text:focus,
.sswmm-text:active{
background:transparent!important;
background-color:transparent!important;
background-image:none!important;
box-shadow:none!important;
filter:none!important;
border:0!important;
}
.sswmm-layer{
width:auto!important;
height:auto!important;
min-width:0!important;
min-height:0!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
#sswmmText,
.sswmm-text{
display:inline-block!important;
padding:0!important;
margin:0!important;
appearance:none!important;
-webkit-appearance:none!important;
outline:none!important;
resize:none!important;
overflow:visible!important;
caret-color:#14c8bd!important;
box-decoration-break:clone!important;
-webkit-box-decoration-break:clone!important;
}
#sswmmText:empty:before{
content:'TEXT';
color:rgba(0,0,0,.35);
background:transparent!important;
}
#sswmmText::selection,
.sswmm-text::selection{
background:rgba(20,200,189,.25)!important;
color:inherit!important;
}
.sswmm.is-text-editing .sswmm-layer,
.sswmm.is-text-editing #sswmmText{
background:transparent!important;
}
/* v1.6.5 selection without visible frame + long-press trash */
.sswmm.has-selection .sswmm-layer,
.sswmm.has-selection .sswmm-layer * ,
.sswmm .sswmm-layer:focus,
.sswmm .sswmm-layer:focus-visible,
.sswmm .sswmm-text:focus,
.sswmm .sswmm-text:focus-visible,
.sswmm #sswmmImage:focus,
.sswmm #sswmmImage:focus-visible{
outline:0!important;
border:0!important;
box-shadow:none!important;
}
.sswmm.has-selection .sswmm-layer::before,
.sswmm.has-selection .sswmm-layer::after,
.sswmm .sswmm-text:focus::before,
.sswmm .sswmm-text:focus::after{
content:none!important;
display:none!important;
}
.sswmm.is-dragging .sswmm-bottom,
.sswmm.trash-visible .sswmm-bottom,
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"],
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"]{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
z-index:99999!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool]:not([data-tool="delete"]),
.sswmm.trash-visible .sswmm-bottom [data-tool]:not([data-tool="delete"]){
display:none!important;
}
.sswmm.is-dragging .sswmm-bottom,
.sswmm.trash-visible .sswmm-bottom{
position:relative!important;
background:#fff!important;
border:1px solid #e9e9e9!important;
}
/* v1.6.6 fixed main/submenu visibility + text input range + delete behavior */
.sswmm-actions,
.sswmm-side-tabs{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
z-index:10020!important;
}
.sswmm.menus-hidden .sswmm-actions,
.sswmm.menus-hidden .sswmm-side-tabs,
.sswmm.is-dragging .sswmm-actions,
.sswmm.is-dragging .sswmm-side-tabs,
.sswmm.trash-visible .sswmm-actions,
.sswmm.trash-visible .sswmm-side-tabs{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
}
.sswmm-menu-toggle{display:none!important;}
.sswmm-bottom{display:none!important;}
.sswmm.has-selection .sswmm-bottom,
.sswmm.is-dragging .sswmm-bottom,
.sswmm.trash-visible .sswmm-bottom{
display:flex!important;
position:absolute!important;
left:50%!important;
bottom:calc(78px + env(safe-area-inset-bottom))!important;
transform:translateX(-50%)!important;
width:min(94vw,420px)!important;
margin:0!important;
z-index:10010!important;
background:#fff!important;
border:1px solid #e5e5e5!important;
}
.sswmm-text-tools-panel{
position:absolute!important;
left:50%!important;
right:auto!important;
bottom:calc(148px + env(safe-area-inset-bottom))!important;
transform:translateX(-50%)!important;
width:min(94vw,420px)!important;
z-index:10030!important;
}
.sswmm-print-area{overflow:visible!important;}
.sswmm-layer{
max-width:100%!important;
max-height:100%!important;
}
#sswmmText,.sswmm-text{
max-width:100%!important;
min-width:24px!important;
min-height:24px!important;
white-space:pre-wrap!important;
overflow-wrap:anywhere!important;
word-break:break-word!important;
line-height:1.08!important;
text-align:center!important;
background:transparent!important;
}
.sswmm:not(.has-selection) .sswmm-bottom{display:none!important;}
.sswmm.has-selection .sswmm-layer,
.sswmm.has-selection .sswmm-text{outline:0!important;border:0!important;box-shadow:none!important;}
/* v1.6.7 text selection/edit separation */
.sswmm-text[contenteditable="false"]{
-webkit-user-select:none!important;
user-select:none!important;
caret-color:transparent!important;
}
.sswmm.is-text-editing .sswmm-text{
-webkit-user-select:text!important;
user-select:text!important;
caret-color:auto!important;
}
.sswmm-bottom{
position:relative!important;
z-index:80!important;
height:58px!important;
margin:0 10px max(8px,env(safe-area-inset-bottom))!important;
border-radius:14px!important;
background:#fff!important;
border:1px solid #e8eeee!important;
box-shadow:none!important;
}
.sswmm-bottom button{
min-width:0!important;
padding:4px 2px!important;
color:#008f87!important;
background:#fff!important;
}
.sswmm-bottom span{font-size:18px!important;line-height:1!important}
.sswmm-bottom small{font-size:9px!important;line-height:1.1!important}
.sswmm-text-tools-panel{
position:relative!important;
z-index:90!important;
display:none;
margin:0 10px 6px!important;
padding:8px!important;
background:#fff!important;
border:1px solid #e8eeee!important;
border-radius:14px!important;
box-shadow:none!important;
overflow-x:auto!important;
white-space:nowrap!important;
}
.sswmm-text-tools-panel.show{display:flex!important;gap:8px!important}
.sswmm-text-tools-panel button{
flex:0 0 auto!important;
min-width:56px!important;
height:38px!important;
border-radius:10px!important;
border:1px solid #dfe9e8!important;
background:#fff!important;
color:#111!important;
font-weight:800!important;
}
.sswmm-text-tools-panel .swatch{min-width:38px!important;width:38px!important;border-radius:999px!important}
/* v1.6.8 trash icon + suck-in delete motion */
.sswmm-bottom [data-tool="delete"],
.sswmm-trash-btn{
width:64px!important;
height:64px!important;
min-width:64px!important;
border-radius:999px!important;
background:#fff!important;
border:2px solid #111!important;
box-shadow:none!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:0!important;
color:#111!important;
}
.sswmm-bottom [data-tool="delete"] span,
.sswmm-trash-btn span{
font-size:30px!important;
line-height:1!important;
display:block!important;
}
.sswmm-bottom [data-tool="delete"] small,
.sswmm-trash-btn small{
display:none!important;
}
.sswmm.trash-visible .sswmm-bottom,
.sswmm.is-dragging .sswmm-bottom{
background:transparent!important;
border:none!important;
justify-content:center!important;
pointer-events:auto!important;
}
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"],
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"]{
width:76px!important;
height:76px!important;
min-width:76px!important;
transform:translateY(-4px) scale(1)!important;
transition:transform .18s ease, background .18s ease, border-color .18s ease!important;
}
.sswmm-bottom [data-tool="delete"].is-target,
.sswmm-trash-btn.is-target{
transform:translateY(-8px) scale(1.16)!important;
background:#111!important;
color:#fff!important;
border-color:#111!important;
}
.sswmm-layer.suck-to-trash{
transition:transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s ease!important;
transform:translate3d(calc(-50% + var(--trash-dx,0px) + 0px), calc(-50% + var(--trash-dy,0px) + 0px), 0) scale(.04) rotate(0deg)!important;
opacity:0!important;
pointer-events:none!important;
}
.sswmm.deleting-to-trash .sswmm-actions,
.sswmm.deleting-to-trash .sswmm-side-tabs,
.sswmm.deleting-to-trash .sswmm-text-tools-panel{
pointer-events:none!important;
}
/* v1.6.14 operation UI only: raise lower controls for mobile safe-area
CSV / product / REST logic is untouched. */
.sswmm{
--sswmm-side-bottom: calc(106px + env(safe-area-inset-bottom));
--sswmm-submenu-bottom: calc(184px + env(safe-area-inset-bottom));
--sswmm-panel-bottom: calc(254px + env(safe-area-inset-bottom));
padding-bottom: calc(env(safe-area-inset-bottom) + 210px)!important;
}
/* The old hide/show menu button caused the lower menu to vanish on mobile. */
.sswmm-menu-toggle,
.sswmm.menus-hidden .sswmm-menu-toggle{
display:none!important;
visibility:hidden!important;
pointer-events:none!important;
}
.sswmm.menus-hidden .sswmm-size,
.sswmm.menus-hidden .sswmm-preview-zoom,
.sswmm.menus-hidden .sswmm-actions,
.sswmm.menus-hidden .sswmm-side-tabs,
.sswmm.menus-hidden .sswmm-bottom,
.sswmm.menus-hidden .sswmm-image-menu{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
/* Keep the side switch above the iPhone home bar. */
.sswmm-side-tabs{
position:fixed!important;
left:50%!important;
bottom:var(--sswmm-side-bottom)!important;
transform:translateX(-50%)!important;
width:min(92vw,420px)!important;
margin:0!important;
padding:0!important;
z-index:10008!important;
display:flex!important;
justify-content:center!important;
gap:10px!important;
pointer-events:auto!important;
}
.sswmm-side-tabs button{
height:46px!important;
min-width:104px!important;
border-radius:14px!important;
font-size:14px!important;
}
/* Tap selection = show bottom submenu. Raised one more step. */
.sswmm-bottom,
.sswmm.has-selection .sswmm-bottom{
position:fixed!important;
left:50%!important;
bottom:var(--sswmm-submenu-bottom)!important;
transform:translateX(-50%)!important;
width:min(92vw,420px)!important;
height:58px!important;
margin:0!important;
z-index:10020!important;
background:#fff!important;
border:1px solid #e8eeee!important;
border-radius:14px!important;
box-shadow:none!important;
overflow:hidden!important;
}
.sswmm:not(.has-selection):not(.is-dragging):not(.trash-visible) .sswmm-bottom{
display:none!important;
}
.sswmm.has-selection:not(.is-dragging):not(.trash-visible) .sswmm-bottom{
display:flex!important;
}
.sswmm-bottom button{
min-height:58px!important;
}
/* Expanded font/color panels sit above the bottom submenu. */
.sswmm-text-tools-panel,
.sswmm-text-tools-panel.show{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:var(--sswmm-panel-bottom)!important;
transform:translateX(-50%)!important;
width:min(92vw,420px)!important;
margin:0!important;
z-index:10030!important;
}
.sswmm.is-dragging .sswmm-text-tools-panel,
.sswmm.trash-visible .sswmm-text-tools-panel,
.sswmm.deleting-to-trash .sswmm-text-tools-panel{
display:none!important;
}
/* Long press move = hide submenu, show trash only in center lower area. */
.sswmm.is-dragging .sswmm-bottom,
.sswmm.trash-visible .sswmm-bottom{
position:fixed!important;
left:50%!important;
bottom:calc(94px + env(safe-area-inset-bottom))!important;
transform:translateX(-50%)!important;
width:96px!important;
height:96px!important;
margin:0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:transparent!important;
border:0!important;
overflow:visible!important;
z-index:10050!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool]:not([data-tool="delete"]),
.sswmm.trash-visible .sswmm-bottom [data-tool]:not([data-tool="delete"]){
display:none!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"],
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"]{
display:flex!important;
width:78px!important;
height:78px!important;
min-width:78px!important;
border-radius:999px!important;
}
/* Make working stage shorter so fixed lower controls do not overlap too much. */
.sswmm-stage{
height:calc(100dvh - 330px)!important;
min-height:340px!important;
padding-bottom:0!important;
}
@supports not (height:100dvh){
.sswmm-stage{height:calc(100svh - 330px)!important;}
}
@media(max-height:760px){
.sswmm{
--sswmm-side-bottom: calc(92px + env(safe-area-inset-bottom));
--sswmm-submenu-bottom: calc(160px + env(safe-area-inset-bottom));
--sswmm-panel-bottom: calc(226px + env(safe-area-inset-bottom));
}
.sswmm-stage{height:calc(100dvh - 300px)!important;min-height:300px!important;}
.sswmm-side-tabs button{height:42px!important;min-width:98px!important;}
.sswmm-bottom{height:54px!important;}
.sswmm-bottom button{min-height:54px!important;}
}
/* v1.7.0 requested operation spec
- Initial screen: no text/image submenus until object is selected
- TEXT: tap selection + submenu, double tap edit, long press move + trash
- IMAGE: tap selection + opacity submenu, two-finger scale/rotate, long press move + trash
CSV/product/REST logic is untouched. */
.sswmm{
--sswmm-side-bottom: calc(110px + env(safe-area-inset-bottom));
--sswmm-submenu-bottom: calc(198px + env(safe-area-inset-bottom));
--sswmm-panel-bottom: calc(270px + env(safe-area-inset-bottom));
padding-bottom: calc(env(safe-area-inset-bottom) + 225px)!important;
}
.sswmm:not(.has-selection):not(.is-dragging):not(.trash-visible) .sswmm-bottom,
.sswmm:not(.has-selection):not(.is-dragging):not(.trash-visible) .sswmm-text-tools-panel,
.sswmm:not(.has-selection):not(.is-dragging):not(.trash-visible) .sswmm-image-menu,
.sswmm:not(.image-active) .sswmm-image-menu{
display:none!important;
opacity:0!important;
pointer-events:none!important;
}
.sswmm.has-selection.text-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom,
.sswmm.has-selection.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom{
display:flex!important;
opacity:1!important;
pointer-events:auto!important;
}
.sswmm.text-active .sswmm-bottom [data-tool="opacity"],
.sswmm.image-active .sswmm-bottom [data-tool="font"],
.sswmm.image-active .sswmm-bottom [data-tool="color"],
.sswmm.image-active .sswmm-bottom [data-tool="strokeColor"],
.sswmm.image-active .sswmm-bottom [data-tool="stroke"],
.sswmm.has-selection:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="delete"]{
display:none!important;
}
.sswmm.text-active .sswmm-bottom [data-tool="font"],
.sswmm.text-active .sswmm-bottom [data-tool="color"],
.sswmm.text-active .sswmm-bottom [data-tool="strokeColor"],
.sswmm.text-active .sswmm-bottom [data-tool="stroke"],
.sswmm.image-active .sswmm-bottom [data-tool="opacity"]{
display:flex!important;
}
.sswmm-image-menu{
position:fixed!important;
left:50%!important;
bottom:var(--sswmm-panel-bottom)!important;
transform:translateX(-50%)!important;
width:min(92vw,420px)!important;
z-index:10030!important;
background:transparent!important;
box-shadow:none!important;
margin:0!important;
padding:0!important;
}
.sswmm.image-active.has-selection:not(.is-dragging):not(.trash-visible) .sswmm-image-menu{
display:block!important;
opacity:1!important;
pointer-events:auto!important;
}
.sswmm-opacity-panel.show{
display:block!important;
width:100%!important;
box-sizing:border-box!important;
background:#fff!important;
color:#111!important;
border:1px solid #e8eeee!important;
box-shadow:none!important;
}
.sswmm-opacity-modes{display:none!important;}
.sswmm-opacity-panel label{font-weight:900!important;color:#111!important;}
.sswmm.trash-visible .sswmm-actions #sswmmSave,
.sswmm.is-dragging .sswmm-actions #sswmmSave,
.sswmm.deleting-to-trash .sswmm-actions #sswmmSave{
display:none!important;
}
.sswmm.trash-visible .sswmm-bottom,
.sswmm.is-dragging .sswmm-bottom{
bottom:calc(96px + env(safe-area-inset-bottom))!important;
}
@media(max-height:760px){
.sswmm{
--sswmm-side-bottom: calc(96px + env(safe-area-inset-bottom));
--sswmm-submenu-bottom: calc(176px + env(safe-area-inset-bottom));
--sswmm-panel-bottom: calc(244px + env(safe-area-inset-bottom));
}
}
/* v1.7.2 fixes: no initial TEXT, wider horizontal text, double tap editing, trash suck motion */
#sswmmText:empty:before,
.sswmm-text:empty:before{
content:none!important;
display:none!important;
}
#sswmmText,
.sswmm-text{
max-width:none!important;
width:max-content!important;
min-width:1.2em!important;
white-space:pre!important;
overflow-wrap:normal!important;
word-break:normal!important;
line-break:auto!important;
text-align:center!important;
}
.sswmm.is-text-editing #sswmmText,
.sswmm.is-text-editing .sswmm-text{
min-width:260px!important;
max-width:90vw!important;
white-space:pre!important;
overflow-x:visible!important;
}
.sswmm:not(.has-selection) #sswmmText:empty,
.sswmm:not(.has-selection) .sswmm-text:empty{
display:none!important;
}
@keyframes sswmmSuckIntoTrash{
0%{
transform:translate3d(calc(-50% + var(--trash-start-x,0px)),calc(-50% + var(--trash-start-y,0px)),0) scale(var(--trash-start-scale,1)) rotate(var(--trash-start-rotate,0deg));
opacity:1;
}
55%{
transform:translate3d(calc(-50% + var(--trash-dx,0px)),calc(-50% + var(--trash-dy,0px)),0) scale(.42) rotate(8deg);
opacity:1;
}
100%{
transform:translate3d(calc(-50% + var(--trash-dx,0px)),calc(-50% + var(--trash-dy,0px)),0) scale(.04) rotate(0deg);
opacity:0;
}
}
.sswmm-layer.suck-to-trash{
animation:sswmmSuckIntoTrash .46s cubic-bezier(.2,.8,.2,1) forwards!important;
transition:none!important;
pointer-events:none!important;
z-index:10060!important;
}
.sswmm-bottom [data-tool="delete"].is-target,
.sswmm-trash-btn.is-target{
transform:translateY(-8px) scale(1.2)!important;
}
/* v1.7.3: prevent deleted designs from reappearing + stronger initial text hiding */
.sswmm:not(.has-selection) #sswmmText:empty,
.sswmm:not(.has-selection) .sswmm-text:empty,
#sswmmText:empty,
.sswmm-text:empty{
display:none!important;
}
#sswmmText:empty::before,
#sswmmText:empty:before,
.sswmm-text:empty::before,
.sswmm-text:empty:before{
content:''!important;
display:none!important;
}
.sswmm-layer.suck-to-trash{
animation:sswmmSuckIntoTrash .46s cubic-bezier(.2,.8,.2,1) forwards!important;
transform-origin:center center!important;
}
/* v1.7.4 text outline/color UI only
Other layout/operation/product/API behavior is unchanged. */
/* Text outline is drawn behind the fill using duplicated text in ::before. */
#sswmmText,
.sswmm-text{
position:relative!important;
z-index:0!important;
overflow:visible!important;
isolation:isolate!important;
--sswmm-stroke-width:1px;
--sswmm-stroke-color:#000000;
-webkit-text-stroke:0 transparent!important;
text-shadow:none!important;
}
#sswmmText::before,
.sswmm-text::before{
content:attr(data-text)!important;
position:absolute!important;
inset:0!important;
z-index:-1!important;
color:transparent!important;
-webkit-text-stroke:var(--sswmm-stroke-width) var(--sswmm-stroke-color)!important;
text-shadow:none!important;
font:inherit!important;
line-height:inherit!important;
letter-spacing:inherit!important;
white-space:inherit!important;
text-align:inherit!important;
pointer-events:none!important;
}
#sswmmText:empty::before,
#sswmmText:empty:before,
.sswmm-text:empty::before,
.sswmm-text:empty:before{
content:''!important;
display:none!important;
}
/* Main color swatches show their actual color. */
.sswmm-text-tools-panel button.main-swatch{
background:var(--swatch)!important;
border:1px solid rgba(0,0,0,.22)!important;
}
.sswmm-text-tools-panel button.main-swatch[data-color="#ffffff"]{
box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)!important;
}
/* Stroke color swatches are shown as an outlined A, so it is clear this controls the outer line. */
.sswmm-text-tools-panel button.stroke-swatch{
background:#fff!important;
color:#111!important;
font-weight:900!important;
font-size:24px!important;
font-family:Arial Black, Impact, sans-serif!important;
line-height:1!important;
-webkit-text-stroke:2px var(--swatch)!important;
text-shadow:none!important;
border:1px solid rgba(0,0,0,.18)!important;
}
.sswmm-text-tools-panel button.stroke-swatch[data-stroke-color="#ffffff"]{
background:#333!important;
color:#fff!important;
-webkit-text-stroke:2px #fff!important;
}
/* Bottom line thickness button shows 5-step meaning without changing the rest of the UI. */
.sswmm-bottom [data-tool="stroke"] span{
font-size:17px!important;
font-weight:900!important;
}
/* v1.8.4 clean final overrides */
/* 画像とテキストの同時選択を防ぐ */
.sswmm.text-active #sswmmImage{display:none!important;}
.sswmm.image-active #sswmmText{display:none!important;}
/* 未選択時はサブメニュー非表示 */
.sswmm:not(.has-selection):not(.is-dragging):not(.trash-visible) .sswmm-bottom{
display:none!important;
}
/* 画像選択時は画像用だけ表示 */
.sswmm.image-active .sswmm-bottom [data-tool="font"],
.sswmm.image-active .sswmm-bottom [data-tool="color"],
.sswmm.image-active .sswmm-bottom [data-tool="strokeColor"],
.sswmm.image-active .sswmm-bottom [data-tool="stroke"]{
display:none!important;
}
.sswmm.image-active .sswmm-bottom [data-tool="opacity"],
.sswmm.image-active .sswmm-bottom [data-tool="imgTransparent"],
.sswmm.image-active .sswmm-bottom [data-tool="imgAuto"],
.sswmm.image-active .sswmm-bottom [data-tool="imgWhite"],
.sswmm.image-active .sswmm-bottom [data-tool="imgBlack"]{
display:flex!important;
}
/* テキスト選択時はテキスト用だけ表示 */
.sswmm.text-active .sswmm-bottom [data-tool="opacity"],
.sswmm.text-active .sswmm-bottom [data-tool="imgTransparent"],
.sswmm.text-active .sswmm-bottom [data-tool="imgAuto"],
.sswmm.text-active .sswmm-bottom [data-tool="imgWhite"],
.sswmm.text-active .sswmm-bottom [data-tool="imgBlack"]{
display:none!important;
}
/* 画像メニューを画像選択時に確実表示 */
.sswmm.image-active .sswmm-image-menu{
display:block!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
.sswmm.image-active .sswmm-opacity-panel.show{
display:block!important;
}
.sswmm.image-active .sswmm-opacity-modes{
display:flex!important;
}
/* 2本指操作をブラウザ側に取られないようにする */
#sswmmLayer,#sswmmImage,#sswmmText,#sswmmStage,.sswmm-print-area{
touch-action:none!important;
}
#sswmmImage,#sswmmText{
pointer-events:auto!important;
}
/* ゴミ箱の背面黒丸を消し、削除時はデザインをゴミ箱中心へ吸い込む */
.sswmm.is-dragging .sswmm-bottom,
.sswmm.trash-visible .sswmm-bottom{
background:transparent!important;
border:0!important;
box-shadow:none!important;
overflow:visible!important;
}
.sswmm.is-dragging .sswmm-bottom::before,
.sswmm.is-dragging .sswmm-bottom::after,
.sswmm.trash-visible .sswmm-bottom::before,
.sswmm.trash-visible .sswmm-bottom::after{
display:none!important;
content:none!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"],
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"]{
display:flex!important;
background:#fff!important;
color:#111!important;
border:3px solid var(--sswmm-emerald,#19bdb7)!important;
box-shadow:none!important;
width:76px!important;
height:76px!important;
min-width:76px!important;
border-radius:50%!important;
z-index:10080!important;
}
.sswmm-layer.suck-to-trash{
z-index:10070!important;
transition:transform .42s cubic-bezier(.18,.9,.2,1), opacity .42s ease!important;
transform:
translate3d(calc(-50% + var(--trash-dx,0px)),calc(-50% + var(--trash-dy,0px)),0)
scale(.04)
rotate(12deg)!important;
opacity:0!important;
}
/* サブメニュー位置：表面/裏面の下 */
.sswmm-side-tabs{
bottom:calc(170px + env(safe-area-inset-bottom))!important;
}
.sswmm-bottom{
bottom:calc(96px + env(safe-area-inset-bottom))!important;
}
.sswmm-image-menu{
bottom:calc(24px + env(safe-area-inset-bottom))!important;
}
/* v1.8.5 side buttons + cleaner button backgrounds + image fit */
/* 表面・裏面ボタンを左側に縦配置 */
.sswmm-side-tabs{
position:fixed!important;
left:8px!important;
top:50%!important;
bottom:auto!important;
transform:translateY(-50%)!important;
width:46px!important;
display:flex!important;
flex-direction:column!important;
gap:8px!important;
z-index:10030!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
.sswmm-side-tabs button{
width:44px!important;
min-width:44px!important;
height:58px!important;
writing-mode:vertical-rl!important;
text-orientation:mixed!important;
border-radius:12px!important;
background:rgba(255,255,255,.92)!important;
border:2px solid var(--sswmm-emerald,#19bdb7)!important;
box-shadow:none!important;
font-size:13px!important;
padding:4px 0!important;
}
/* ボタン背面に出る白い四角・変な背景を消す */
.sswmm-bottom,
.sswmm-actions,
.sswmm-side-tabs,
.sswmm-size,
.sswmm-preview-zoom{
box-shadow:none!important;
}
.sswmm-bottom::before,
.sswmm-bottom::after,
.sswmm-actions::before,
.sswmm-actions::after,
.sswmm-side-tabs::before,
.sswmm-side-tabs::after,
.sswmm-size::before,
.sswmm-size::after,
.sswmm-preview-zoom::before,
.sswmm-preview-zoom::after{
content:none!important;
display:none!important;
}
.sswmm-action-btn,
.sswmm-bottom button,
.sswmm-preview-zoom button{
box-shadow:none!important;
}
/* 左に表面/裏面を置く分、プレビューが被らないよう少しだけ余白 */
.sswmm-stage{
padding-left:56px!important;
}
/* 画像は元容量を変えず表示だけ70%フィット。縮小可能にする */
#sswmmImage{
max-width:none!important;
max-height:none!important;
width:auto;
height:auto;
touch-action:none!important;
transform-origin:center center!important;
}
#sswmmLayer{
touch-action:none!important;
}
/* v1.8.6 footer submenu + left controls stack + free image scale */
.sswmm-bottom,
.sswmm.has-selection .sswmm-bottom{
position:fixed!important;
left:50%!important;
bottom:calc(66px + env(safe-area-inset-bottom))!important;
transform:translateX(-50%)!important;
width:min(92vw,430px)!important;
height:56px!important;
margin:0!important;
z-index:10040!important;
}
.sswmm-text-tools-panel,
.sswmm-text-tools-panel.show,
.sswmm-image-menu,
.sswmm-image-menu.show,
.sswmm-opacity-panel.show{
bottom:calc(128px + env(safe-area-inset-bottom))!important;
z-index:10050!important;
}
.sswmm-preview-zoom{
position:fixed!important;
left:8px!important;
top:50%!important;
transform:translateY(-78px)!important;
z-index:10030!important;
background:transparent!important;
box-shadow:none!important;
}
.sswmm-side-tabs{
position:fixed!important;
left:8px!important;
top:50%!important;
bottom:auto!important;
transform:translateY(56px)!important;
width:42px!important;
display:flex!important;
flex-direction:column!important;
gap:6px!important;
z-index:10030!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
.sswmm-side-tabs button{
width:42px!important;
min-width:42px!important;
height:52px!important;
writing-mode:vertical-rl!important;
text-orientation:mixed!important;
border-radius:12px!important;
background:rgba(255,255,255,.92)!important;
border:2px solid var(--sswmm-emerald,#19bdb7)!important;
box-shadow:none!important;
font-size:12px!important;
padding:3px 0!important;
}
.sswmm-stage{
padding-left:58px!important;
}
.sswmm-preview-zoom,
.sswmm-side-tabs,
.sswmm-preview-zoom::before,
.sswmm-preview-zoom::after,
.sswmm-side-tabs::before,
.sswmm-side-tabs::after{
background:transparent!important;
box-shadow:none!important;
}
.sswmm-preview-zoom::before,
.sswmm-preview-zoom::after,
.sswmm-side-tabs::before,
.sswmm-side-tabs::after{
content:none!important;
display:none!important;
}
#sswmmImage{
max-width:none!important;
max-height:none!important;
width:auto;
height:auto;
transform-origin:center center!important;
touch-action:none!important;
}
#sswmmLayer{
touch-action:none!important;
}
/* v1.8.7 right controls style + unified side buttons + text pinch helper */
/* 右メニューを左ボタンと同じ系統の見た目へ：背景の白い枠なし */
.sswmm-actions{
position:fixed!important;
right:8px!important;
top:50%!important;
transform:translateY(-50%)!important;
display:flex!important;
flex-direction:column!important;
gap:6px!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
z-index:10030!important;
}
.sswmm-actions::before,
.sswmm-actions::after{
content:none!important;
display:none!important;
}
.sswmm-action-btn{
width:44px!important;
min-width:44px!important;
height:52px!important;
border-radius:12px!important;
background:rgba(255,255,255,.92)!important;
border:2px solid var(--sswmm-emerald,#19bdb7)!important;
box-shadow:none!important;
color:var(--sswmm-emerald,#19bdb7)!important;
padding:3px 0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:1px!important;
}
.sswmm-action-icon{
font-size:20px!important;
line-height:1!important;
}
.sswmm-action-btn small{
font-size:9px!important;
line-height:1!important;
color:var(--sswmm-emerald,#19bdb7)!important;
font-weight:900!important;
}
/* 表面・裏面も右メニューと同じ線幅・角丸・サイズ感へ統一 */
.sswmm-side-tabs button{
width:44px!important;
min-width:44px!important;
height:52px!important;
border:2px solid var(--sswmm-emerald,#19bdb7)!important;
border-radius:12px!important;
background:rgba(255,255,255,.92)!important;
box-shadow:none!important;
color:var(--sswmm-emerald,#19bdb7)!important;
font-weight:900!important;
font-size:12px!important;
padding:3px 0!important;
}
.sswmm-side-tabs button.active{
background:rgba(25,189,183,.12)!important;
color:var(--sswmm-emerald,#19bdb7)!important;
border-color:var(--sswmm-emerald,#19bdb7)!important;
}
/* 白い背景枠をさらに抑制 */
.sswmm-actions,
.sswmm-side-tabs,
.sswmm-preview-zoom{
background:transparent!important;
box-shadow:none!important;
}
.sswmm-action-btn::before,
.sswmm-action-btn::after,
.sswmm-side-tabs button::before,
.sswmm-side-tabs button::after{
content:none!important;
display:none!important;
}
/* テキストの長押し移動中、指を1本足した時の拡大縮小をブラウザに取られないように */
.sswmm.text-active #sswmmText,
.sswmm.text-active #sswmmLayer,
.sswmm.text-pinch-scaling,
.sswmm.text-pinch-scaling *{
touch-action:none!important;
}
.sswmm.text-pinch-scaling .sswmm-bottom{
display:none!important;
}
/* v1.8.8 final image scale + trash visual cleanup */
/* 画像は自由に拡大縮小可能。元サイズには戻さない */
#sswmmImage{
max-width:none!important;
max-height:none!important;
touch-action:none!important;
pointer-events:auto!important;
-webkit-user-drag:none!important;
user-select:none!important;
-webkit-user-select:none!important;
}
#sswmmLayer,
#sswmmStage,
.sswmm-layer,
.sswmm-stage,
.sswmm-print-area{
touch-action:none!important;
}
/* ゴミ箱を普通の丸サイズにする。横長○や背面の謎背景は消す */
.sswmm.is-dragging .sswmm-bottom,
.sswmm.trash-visible .sswmm-bottom{
position:fixed!important;
left:50%!important;
bottom:calc(80px + env(safe-area-inset-bottom))!important;
transform:translateX(-50%)!important;
width:72px!important;
height:72px!important;
min-width:72px!important;
max-width:72px!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
overflow:visible!important;
z-index:199000!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.sswmm.is-dragging .sswmm-bottom::before,
.sswmm.is-dragging .sswmm-bottom::after,
.sswmm.trash-visible .sswmm-bottom::before,
.sswmm.trash-visible .sswmm-bottom::after{
display:none!important;
content:none!important;
background:transparent!important;
box-shadow:none!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool]:not([data-tool="delete"]),
.sswmm.trash-visible .sswmm-bottom [data-tool]:not([data-tool="delete"]){
display:none!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"],
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"]{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:64px!important;
height:64px!important;
min-width:64px!important;
max-width:64px!important;
flex:0 0 64px!important;
padding:0!important;
margin:0!important;
border-radius:50%!important;
background:#fff!important;
color:#111!important;
border:3px solid var(--sswmm-emerald,#19bdb7)!important;
box-shadow:none!important;
opacity:1!important;
visibility:visible!important;
z-index:199010!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"] span,
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"] span{
font-size:30px!important;
line-height:1!important;
margin:0!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"] small,
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"] small{
display:none!important;
}
/* デザインがゴミ箱より上に見えるようにする */
.sswmm-stage,
.sswmm-print-area{
overflow:visible!important;
}
.sswmm-layer.is-moving,
.sswmm-layer.suck-to-trash{
z-index:200000!important;
position:absolute!important;
}
/* ゴミ箱上で離した時、デザインがゴミ箱中心へ吸い込まれる */
.sswmm-layer.suck-to-trash{
transition:transform .46s cubic-bezier(.16,.9,.22,1), opacity .46s ease!important;
transform:
translate3d(calc(-50% + var(--trash-dx,0px)),calc(-50% + var(--trash-dy,0px)),0)
scale(.03)
rotate(14deg)!important;
opacity:0!important;
pointer-events:none!important;
}
/* v1.9.7 final overrides: smaller text scale remains selectable. */
.sswmm-layer{
min-width:180px!important;
min-height:180px!important;
}
.sswmm-side-tabs{
left:6px!important;
width:60px!important;
}
.sswmm-side-tabs button{
width:60px!important;
min-width:60px!important;
max-width:60px!important;
padding-left:0!important;
padding-right:0!important;
}
.sswmm-side-tabs button::before,
.sswmm-side-tabs button::after{
left:-10px!important;
right:-10px!important;
}
/* v1.9.8: keep empty editable text alive and redraw text crisply after resizing. */
.sswmm.is-text-editing #sswmmText:empty,
.sswmm.is-text-editing .sswmm-text:empty{
display:inline-block!important;
min-width:260px!important;
min-height:1.25em!important;
}
#sswmmText,
.sswmm-text{
text-rendering:geometricPrecision!important;
-webkit-font-smoothing:antialiased!important;
font-synthesis-weight:none!important;
}
.sswmm.text-active .sswmm-layer,
.sswmm.is-text-editing .sswmm-layer{
will-change:transform!important;
}
/* v1.9.9: long text input must not drag the base canvas/page around. */
html:has(.sswmm.is-text-editing),
body:has(.sswmm.is-text-editing){
overflow-x:hidden!important;
overscroll-behavior:none!important;
}
.sswmm.is-text-editing{
overflow:hidden!important;
touch-action:none!important;
}
.sswmm.is-text-editing .sswmm-stage,
.sswmm.is-text-editing .sswmm-product,
.sswmm.is-text-editing .sswmm-print-area{
max-width:100vw!important;
overflow:visible!important;
}
.sswmm.is-text-editing #sswmmText,
.sswmm.is-text-editing .sswmm-text{
max-width:90vw!important;
overflow:visible!important;
white-space:pre!important;
}
/* v1.11.0: restore the site/WooCommerce mobile footer navigation. */
body.sswmm-mobile-maker-active{
padding-bottom:78px!important;
}
body.sswmm-mobile-maker-active footer,
body.sswmm-mobile-maker-active .site-footer,
body.sswmm-mobile-maker-active .storefront-handheld-footer-bar,
body.sswmm-mobile-maker-active .handheld-footer-bar,
body.sswmm-mobile-maker-active .woocommerce-mobile-bottom-navigation,
body.sswmm-mobile-maker-active .mobile-bottom-menu,
body.sswmm-mobile-maker-active .mobile-footer-menu,
body.sswmm-mobile-maker-active .bottom-navigation,
body.sswmm-mobile-maker-active .bottom-menu,
body.sswmm-mobile-maker-active .wp-block-woocommerce-customer-account,
body.sswmm-mobile-maker-active .wp-block-woocommerce-mini-cart{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
padding:initial;
margin:initial;
overflow:visible!important;
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
z-index:100020!important;
}
body.sswmm-mobile-maker-active .wp-block-woocommerce-customer-account,
body.sswmm-mobile-maker-active .wp-block-woocommerce-mini-cart{
position:relative!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
}
/* v1.9.7: easier touch targets for tiny text and side controls. */
.sswmm-layer{
min-width:180px!important;
min-height:180px!important;
}
.sswmm-side-tabs{
left:6px!important;
width:60px!important;
}
.sswmm-side-tabs button{
width:60px!important;
min-width:60px!important;
max-width:60px!important;
padding-left:0!important;
padding-right:0!important;
}
.sswmm-side-tabs button::before,
.sswmm-side-tabs button::after{
left:-10px!important;
right:-10px!important;
}
/* v1.9.0 image operation fix: single image controls, readable labels, trash absorb above icon */
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="imgTransparent"]{
display:none!important;
}
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="opacity"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="imgAuto"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="imgWhite"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="imgBlack"]{
display:flex!important;
}
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom{
width:min(96vw,460px)!important;
}
.sswmm-bottom [data-tool="imgAuto"] small,
.sswmm-bottom [data-tool="imgWhite"] small,
.sswmm-bottom [data-tool="imgBlack"] small,
.sswmm-bottom [data-tool="opacity"] small{
font-size:8px!important;
line-height:1.05!important;
white-space:normal!important;
max-width:76px!important;
}
.sswmm-opacity-panel{
width:min(92vw,430px)!important;
}
.sswmm-opacity-modes button{
font-size:10px!important;
line-height:1.15!important;
min-height:42px!important;
white-space:normal!important;
}
.sswmm-layer.is-moving,
.sswmm-layer.suck-to-trash{
z-index:300000!important;
}
.sswmm.is-dragging .sswmm-bottom,
.sswmm.trash-visible .sswmm-bottom{
z-index:250000!important;
}
/* v1.9.1 touch controls: left stack spacing and no hide-menu button */
.sswmm-menu-toggle{
display:none!important;
visibility:hidden!important;
pointer-events:none!important;
}
.sswmm-preview-zoom{
position:fixed!important;
left:8px!important;
top:50%!important;
transform:translateY(-150px)!important;
z-index:10030!important;
display:flex!important;
flex-direction:column!important;
gap:8px!important;
width:44px!important;
background:transparent!important;
}
.sswmm-side-tabs{
position:fixed!important;
left:8px!important;
top:50%!important;
bottom:auto!important;
transform:translateY(28px)!important;
width:44px!important;
display:flex!important;
flex-direction:column!important;
gap:8px!important;
z-index:10030!important;
padding:0!important;
margin:0!important;
background:transparent!important;
}
.sswmm-preview-zoom button,
.sswmm-side-tabs button{
width:44px!important;
min-width:44px!important;
border-radius:12px!important;
}
.sswmm-preview-zoom button{
height:44px!important;
}
.sswmm-side-tabs button{
height:56px!important;
}
/* v1.9.4 text tools: stroke slider, warp menu, eyedroppers */
.sswmm.text-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="font"],
.sswmm.text-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="color"],
.sswmm.text-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="strokeColor"],
.sswmm.text-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="stroke"],
.sswmm.text-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="warp"]{
display:flex!important;
}
.sswmm.image-active .sswmm-bottom [data-tool="warp"],
.sswmm.image-active .sswmm-bottom [data-tool="strokeColor"]{
display:none!important;
}
.sswmm-text-tools-panel{
align-items:center!important;
}
.sswmm-text-tools-panel .sswmm-eyedropper{
min-width:72px!important;
border-radius:12px!important;
}
.sswmm-text-tools-panel .sswmm-range-panel{
display:flex!important;
flex-direction:column!important;
gap:8px!important;
min-width:min(82vw,360px)!important;
padding:10px 12px!important;
background:#fff!important;
border:1px solid rgba(0,0,0,.14)!important;
border-radius:14px!important;
color:#111!important;
font-weight:900!important;
}
.sswmm-text-tools-panel .sswmm-range-panel label{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
font-size:13px!important;
}
.sswmm-text-tools-panel .sswmm-range-panel input[type="range"]{
width:100%!important;
accent-color:var(--sswmm-emerald,#19bdb7)!important;
}
.sswmm-text-tools-panel button.active{
background:var(--sswmm-emerald,#19bdb7)!important;
color:#fff!important;
}
.sswmm-layer{
min-width:132px!important;
min-height:132px!important;
}
/* v1.9.5 text pinch: broad invisible touch area for tiny text */
.sswmm-layer{
min-width:132px!important;
min-height:132px!important;
}
/* ゴミ箱に乗った時は普通の丸ゴミ箱だけ少し強調 */
.sswmm-bottom [data-tool="delete"].is-target{
transform:scale(1.12)!important;
background:#fff!important;
border-color:#e53935!important;
}
/* v1.8.9 unified image module CSS */
/* Image: only this module controls image transform, browser must not steal gestures. */
#sswmmImage{
pointer-events:auto!important;
touch-action:none!important;
-webkit-user-drag:none!important;
user-select:none!important;
-webkit-user-select:none!important;
max-width:none!important;
max-height:none!important;
}
#sswmmLayer,#sswmmStage,.sswmm-layer,.sswmm-stage,.sswmm-print-area{
touch-action:none!important;
}
/* Image menu visibility */
.sswmm.image-active .sswmm-bottom{
display:flex!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="opacity"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="imgTransparent"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="imgAuto"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="imgWhite"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="imgBlack"]{
display:flex!important;
}
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="font"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="color"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="strokeColor"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="stroke"],
.sswmm.image-active:not(.is-dragging):not(.trash-visible) .sswmm-bottom [data-tool="delete"]{
display:none!important;
}
/* Transparency panel */
.sswmm-image-transparency-panel{
position:fixed!important;
left:50%!important;
bottom:calc(128px + env(safe-area-inset-bottom))!important;
transform:translateX(-50%)!important;
width:min(92vw,430px)!important;
background:#fff!important;
border:1px solid rgba(0,0,0,.14)!important;
border-radius:16px!important;
padding:10px!important;
z-index:10090!important;
display:none!important;
box-shadow:none!important;
}
.sswmm-image-transparency-panel.show{display:block!important;}
.sswmm-image-panel-title{font-size:13px!important;font-weight:900!important;margin-bottom:6px!important;}
.sswmm-image-row{display:grid!important;grid-template-columns:66px 1fr 48px!important;align-items:center!important;gap:8px!important;margin:7px 0!important;font-size:12px!important;font-weight:900!important;}
.sswmm-image-row input[type="range"]{width:100%!important;accent-color:#18bdb8!important;}
.sswmm-image-row b{text-align:right!important;font-size:12px!important;}
.sswmm-image-mode{display:flex!important;gap:8px!important;margin-top:8px!important;}
.sswmm-image-mode button{flex:1!important;height:38px!important;border:1px solid #dceeee!important;border-radius:12px!important;background:#f8ffff!important;font-weight:900!important;}
.sswmm-image-mode button.is-active{background:#18bdb8!important;color:#fff!important;}
/* Trash: normal round icon, menu is not hidden except non-delete tools are visually irrelevant. */
.sswmm.is-dragging .sswmm-bottom,
.sswmm.trash-visible .sswmm-bottom{
position:fixed!important;
left:50%!important;
bottom:calc(80px + env(safe-area-inset-bottom))!important;
transform:translateX(-50%)!important;
width:72px!important;
height:72px!important;
min-width:72px!important;
max-width:72px!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
overflow:visible!important;
z-index:199000!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.sswmm.is-dragging .sswmm-bottom::before,
.sswmm.is-dragging .sswmm-bottom::after,
.sswmm.trash-visible .sswmm-bottom::before,
.sswmm.trash-visible .sswmm-bottom::after{
content:none!important;
display:none!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool]:not([data-tool="delete"]),
.sswmm.trash-visible .sswmm-bottom [data-tool]:not([data-tool="delete"]){
opacity:0!important;
pointer-events:none!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"],
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"]{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:64px!important;
height:64px!important;
min-width:64px!important;
max-width:64px!important;
flex:0 0 64px!important;
padding:0!important;
margin:0!important;
border-radius:50%!important;
background:#fff!important;
color:#111!important;
border:3px solid var(--sswmm-emerald,#19bdb7)!important;
box-shadow:none!important;
opacity:1!important;
visibility:visible!important;
z-index:199010!important;
}
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"] small,
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"] small{display:none!important;}
.sswmm.is-dragging .sswmm-bottom [data-tool="delete"] span,
.sswmm.trash-visible .sswmm-bottom [data-tool="delete"] span{font-size:30px!important;line-height:1!important;margin:0!important;}
.sswmm-bottom [data-tool="delete"].is-target{
transform:scale(1.12)!important;
border-color:#e53935!important;
}
/* Put design visually above trash while moving/deleting. */
.sswmm-stage,.sswmm-print-area{overflow:visible!important;}
.sswmm-layer.is-moving,.sswmm-layer.suck-to-trash{
z-index:200000!important;
position:absolute!important;
}
.sswmm-layer.suck-to-trash{
transition:transform .46s cubic-bezier(.16,.9,.22,1), opacity .46s ease!important;
transform:
translate3d(calc(-50% + var(--trash-dx,0px)),calc(-50% + var(--trash-dy,0px)),0)
scale(.03)
rotate(14deg)!important;
opacity:0!important;
pointer-events:none!important;
}
/* v1.9.7 end-of-file overrides: easier touch targets for tiny text and side controls. */
.sswmm-layer{
min-width:180px!important;
min-height:180px!important;
}
.sswmm-side-tabs{
left:6px!important;
width:60px!important;
}
.sswmm-side-tabs button{
width:60px!important;
min-width:60px!important;
max-width:60px!important;
padding-left:0!important;
padding-right:0!important;
}
.sswmm-side-tabs button::before,
.sswmm-side-tabs button::after{
left:-10px!important;
right:-10px!important;
}
/* v1.9.8 end-of-file overrides: keep empty editable text alive and redraw crisply. */
.sswmm.is-text-editing #sswmmText:empty,
.sswmm.is-text-editing .sswmm-text:empty{
display:inline-block!important;
min-width:260px!important;
min-height:1.25em!important;
}
#sswmmText,
.sswmm-text{
text-rendering:geometricPrecision!important;
-webkit-font-smoothing:antialiased!important;
font-synthesis-weight:none!important;
}
.sswmm.text-active .sswmm-layer,
.sswmm.is-text-editing .sswmm-layer{
will-change:transform!important;
}
/* v1.9.9 end-of-file overrides: long text input must not move the base/page. */
html:has(.sswmm.is-text-editing),
body:has(.sswmm.is-text-editing){
overflow-x:hidden!important;
overscroll-behavior:none!important;
}
.sswmm.is-text-editing{
overflow:hidden!important;
touch-action:none!important;
}
.sswmm.is-text-editing .sswmm-stage,
.sswmm.is-text-editing .sswmm-product,
.sswmm.is-text-editing .sswmm-print-area{
max-width:100vw!important;
overflow:visible!important;
}
.sswmm.is-text-editing #sswmmText,
.sswmm.is-text-editing .sswmm-text{
max-width:90vw!important;
overflow:visible!important;
white-space:pre!important;
}
/* v1.11.0 end-of-file: restore SHOP / CART / MY ACCOUNT footer nav. */
body.sswmm-mobile-maker-active{
padding-bottom:78px!important;
}
body.sswmm-mobile-maker-active footer,
body.sswmm-mobile-maker-active .site-footer,
body.sswmm-mobile-maker-active .storefront-handheld-footer-bar,
body.sswmm-mobile-maker-active .handheld-footer-bar,
body.sswmm-mobile-maker-active .woocommerce-mobile-bottom-navigation,
body.sswmm-mobile-maker-active .mobile-bottom-menu,
body.sswmm-mobile-maker-active .mobile-footer-menu,
body.sswmm-mobile-maker-active .bottom-navigation,
body.sswmm-mobile-maker-active .bottom-menu,
body.sswmm-mobile-maker-active .wp-block-woocommerce-customer-account,
body.sswmm-mobile-maker-active .wp-block-woocommerce-mini-cart{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
overflow:visible!important;
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
z-index:100020!important;
}
body.sswmm-mobile-maker-active .wp-block-woocommerce-customer-account,
body.sswmm-mobile-maker-active .wp-block-woocommerce-mini-cart{
position:relative!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
}
/* v1.14.3 cart button scrolls to detail input panel */
.sswmm-order-details{
background:#fff!important;
color:#111!important;
padding:18px 14px calc(90px + env(safe-area-inset-bottom))!important;
border-top:1px solid #e7f7f5!important;
font-family:inherit!important;
}
.sswmm-order-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:12px!important;
margin-bottom:14px!important;
}
.sswmm-order-head span{
color:#18bdb8!important;
font-size:11px!important;
font-weight:900!important;
letter-spacing:0!important;
}
.sswmm-order-head strong{
font-size:22px!important;
line-height:1!important;
font-weight:900!important;
}
.sswmm-order-lead{
margin:0 0 12px!important;
padding:10px 12px!important;
border-radius:8px!important;
background:#f2fffd!important;
color:#243b3a!important;
font-size:12px!important;
line-height:1.55!important;
font-weight:800!important;
}
.sswmm-order-summary{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:8px!important;
margin-bottom:12px!important;
}
.sswmm-order-summary-compact{
margin-bottom:14px!important;
}
.sswmm-order-summary div{
border:1px solid #dff3f1!important;
border-radius:8px!important;
padding:10px!important;
background:#fbfffe!important;
min-width:0!important;
}
.sswmm-order-summary small,
.sswmm-order-grid label,
.sswmm-print-option-field,
.sswmm-order-note{
display:block!important;
font-size:12px!important;
font-weight:900!important;
color:#111!important;
}
.sswmm-order-summary b{
display:block!important;
margin-top:4px!important;
font-size:14px!important;
line-height:1.25!important;
overflow-wrap:anywhere!important;
}
.sswmm-order-entry{
border:1px solid #d7e8e6!important;
border-radius:8px!important;
background:#ffffff!important;
padding:14px!important;
box-shadow:0 8px 22px rgba(0,0,0,.04)!important;
}
.sswmm-order-entry h3{
margin:0 0 12px!important;
font-size:16px!important;
line-height:1.35!important;
font-weight:900!important;
color:#111!important;
}
/* v1.15.1: keep the mobile maker page to the maker UI only. */
body:has(.sswmm) .entry-content > :not(.sswmm),
body:has(.sswmm) .wp-block-post-content > :not(.sswmm),
body.sswmm-mobile-maker-active .entry-content > :not(.sswmm),
body.sswmm-mobile-maker-active .wp-block-post-content > :not(.sswmm),
body.sswmm-mobile-maker-active .sswmm ~ *{
display:none!important;
visibility:hidden!important;
}
/* v1.15.2: force the design maker page into the mobile editor shell. */
html:has(.sswmm),
body:has(.sswmm),
body.sswmm-mobile-maker-active{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
background:#f5f6f8!important;
overflow-x:hidden!important;
}
body:has(.sswmm) .wd-page-title,
body:has(.sswmm) .page-title,
body:has(.sswmm) .wd-breadcrumbs,
body:has(.sswmm) .breadcrumbs,
body:has(.sswmm) .wd-header,
body:has(.sswmm) .whb-header,
body:has(.sswmm) header,
body.sswmm-mobile-maker-active .wd-page-title,
body.sswmm-mobile-maker-active .page-title,
body.sswmm-mobile-maker-active .wd-breadcrumbs,
body.sswmm-mobile-maker-active .breadcrumbs,
body.sswmm-mobile-maker-active .wd-header,
body.sswmm-mobile-maker-active .whb-header,
body.sswmm-mobile-maker-active header,
body.sswmm-mobile-maker-active #ssw-easy-design-maker,
body.sswmm-mobile-maker-active .ssw-edm33,
body.sswmm-mobile-maker-active [id*="easy-design"],
body.sswmm-mobile-maker-active [class*="easy-design"],
body.sswmm-mobile-maker-active [class*="ssw-edm"]{
display:none!important;
visibility:hidden!important;
opacity:0!important;
height:0!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
pointer-events:none!important;
}
body:has(.sswmm) .wd-page-content,
body:has(.sswmm) .main-page-wrapper,
body:has(.sswmm) #main-content,
body:has(.sswmm) .content-layout-wrapper,
body:has(.sswmm) .container,
body:has(.sswmm) .wd-content-area,
body:has(.sswmm) .site-content,
body:has(.sswmm) article.entry-content,
body.sswmm-mobile-maker-active .wd-page-content,
body.sswmm-mobile-maker-active .main-page-wrapper,
body.sswmm-mobile-maker-active #main-content,
body.sswmm-mobile-maker-active .content-layout-wrapper,
body.sswmm-mobile-maker-active .container,
body.sswmm-mobile-maker-active .wd-content-area,
body.sswmm-mobile-maker-active .site-content,
body.sswmm-mobile-maker-active article.entry-content{
width:100%!important;
max-width:none!important;
min-width:0!important;
margin:0!important;
padding:0!important;
border:0!important;
box-shadow:none!important;
}
body:has(.sswmm) .sswmm,
body.sswmm-mobile-maker-active .sswmm{
width:100vw!important;
max-width:100vw!important;
min-height:100svh!important;
margin:0!important;
border-radius:0!important;
}
.sswmm-order-grid{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:10px!important;
}
.sswmm-order-primary{
grid-column:1/-1!important;
padding:12px!important;
border:2px solid #18bdb8!important;
border-radius:8px!important;
background:#fbfffe!important;
}
.sswmm-order-primary input{
font-size:22px!important;
font-weight:900!important;
text-align:center!important;
}
.sswmm-order-grid select,
.sswmm-order-grid input,
.sswmm-print-option-field select,
.sswmm-order-note textarea{
width:100%!important;
box-sizing:border-box!important;
margin-top:6px!important;
border:1px solid #d7e8e6!important;
border-radius:8px!important;
background:#fff!important;
color:#111!important;
min-height:42px!important;
padding:9px 10px!important;
font-size:14px!important;
font-weight:800!important;
}
.sswmm-order-note{
margin-top:12px!important;
}
.sswmm-order-extra{
margin-top:12px!important;
border:1px solid #d7e8e6!important;
border-radius:8px!important;
background:#fff!important;
padding:0!important;
}
.sswmm-order-extra summary{
cursor:pointer!important;
list-style:none!important;
padding:12px!important;
font-size:13px!important;
font-weight:900!important;
color:#111!important;
}
.sswmm-order-extra summary::-webkit-details-marker{display:none!important}
.sswmm-order-extra summary:after{
content:"＋";
float:right;
color:#18bdb8!important;
}
.sswmm-order-extra[open] summary:after{content:"－"}
.sswmm-order-extra label{
display:block!important;
padding:0 12px 12px!important;
font-size:12px!important;
font-weight:900!important;
}
.sswmm-order-extra select{
width:100%!important;
box-sizing:border-box!important;
margin-top:6px!important;
border:1px solid #d7e8e6!important;
border-radius:8px!important;
background:#fff!important;
color:#111!important;
min-height:42px!important;
padding:9px 10px!important;
font-size:14px!important;
font-weight:800!important;
}
.sswmm-order-note textarea{
min-height:96px!important;
resize:vertical!important;
line-height:1.45!important;
}
.sswmm-order-submit{
width:100%!important;
min-height:48px!important;
margin-top:14px!important;
border:0!important;
border-radius:8px!important;
background:#18bdb8!important;
color:#fff!important;
font-size:15px!important;
font-weight:900!important;
}
.sswmm.order-mode .sswmm-colors-section,
.sswmm.order-mode .sswmm-actions,
.sswmm.order-mode .sswmm-size,
.sswmm.order-mode .sswmm-preview-zoom,
.sswmm.order-mode .sswmm-side-tabs,
.sswmm.order-mode .sswmm-bottom,
.sswmm.order-mode .sswmm-text-tools-panel,
.sswmm.order-mode .sswmm-image-menu,
.sswmm.order-mode .sswmm-menu-toggle{
display:none!important;
}
.sswmm-order-locations{
grid-column:1/-1!important;
border:1px solid #d7e8e6!important;
border-radius:8px!important;
padding:10px!important;
background:#fff!important;
}
.sswmm-order-locations span{
display:block!important;
font-size:12px!important;
font-weight:900!important;
margin-bottom:8px!important;
}
.sswmm-order-locations label{
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
width:auto!important;
min-height:34px!important;
margin:0 6px 6px 0!important;
padding:7px 10px!important;
border:1px solid #dff3f1!important;
border-radius:999px!important;
background:#fbfffe!important;
font-size:12px!important;
}
.sswmm-order-locations input{
width:16px!important;
height:16px!important;
min-height:0!important;
margin:0!important;
accent-color:#18bdb8!important;
}
.sswmm-order-estimate{
margin-top:12px!important;
border:1px solid #ccefeb!important;
border-radius:8px!important;
padding:12px!important;
background:#f7fffe!important;
}
.sswmm-order-estimate span,
.sswmm-order-estimate small{
display:block!important;
font-weight:900!important;
}
.sswmm-order-estimate span{
color:#18bdb8!important;
font-size:12px!important;
}
.sswmm-order-estimate strong{
display:block!important;
margin:4px 0!important;
font-size:24px!important;
line-height:1.1!important;
}
.sswmm-order-estimate small{
color:#333!important;
font-size:12px!important;
line-height:1.4!important;
}
/* v1.14.8 estimate flow: hide every editor control while entering estimate details. */
.sswmm.order-mode .sswmm-actions,
.sswmm.order-mode .sswmm-bottom,
.sswmm.order-mode .sswmm-text-tools-panel,
.sswmm.order-mode .sswmm-text-tools-panel.show,
.sswmm.order-mode .sswmm-image-menu,
.sswmm.order-mode .sswmm-image-menu.show,
.sswmm.order-mode .sswmm-opacity-panel,
.sswmm.order-mode .sswmm-opacity-panel.show,
.sswmm.order-mode .sswmm-size,
.sswmm.order-mode .sswmm-side-tabs,
.sswmm.order-mode .sswmm-preview-zoom,
.sswmm.order-mode .sswmm-colors-section,
.sswmm.order-mode .sswmm-menu-toggle{
display:none!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
/* v1.15.6: show estimate details as a full-screen mobile panel. */
.sswmm .sswmm-order-details{
display:none!important;
visibility:hidden!important;
opacity:0!important;
position:fixed!important;
inset:0!important;
width:100vw!important;
height:100svh!important;
min-height:100svh!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior:contain!important;
scroll-margin-top:0!important;
z-index:100500!important;
}
.sswmm .sswmm-order-details.is-open,
.sswmm.order-mode .sswmm-order-details{
display:block!important;
visibility:visible!important;
opacity:1!important;
transform:none!important;
}
.sswmm.order-mode{
overflow:hidden!important;
touch-action:auto!important;
}
.sswmm-order-back{
position:sticky!important;
top:0!important;
z-index:2!important;
width:100%!important;
min-height:44px!important;
margin:0 0 12px!important;
border:0!important;
border-radius:8px!important;
background:#111!important;
color:#fff!important;
font-size:14px!important;
font-weight:900!important;
}
/* v1.15.7: keep the estimate button tappable above every editor layer. */
#sswmmCart{
position:relative!important;
z-index:200500!important;
pointer-events:auto!important;
touch-action:manipulation!important;
}
.sswmm-actions{
pointer-events:auto!important;
z-index:200400!important;
}