.wcpp-wrap{margin:1.5rem 0;padding:1rem;border:1px solid #d9d9d9;border-radius:8px;}
.wcpp-panel[hidden]{display:none !important;}
.wcpp-status{margin-bottom:.75rem;color:#8a1f11;font-weight:600;}
.wcpp-sides-frontend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.wcpp-side-card{padding:12px;border:1px solid #e3e3e3;border-radius:10px;background:#fff;}
.wcpp-side-card h4{margin-top:0;}
.wcpp-preview,.wcpp-cart-thumb{position:relative;max-width:420px;}
.wcpp-preview img,.wcpp-cart-thumb img{display:block;width:100%;height:auto;}
.wcpp-preview .wcpp-overlay,.wcpp-cart-thumb .wcpp-overlay{position:absolute;object-fit:contain;pointer-events:none;z-index:3;}
.wcpp-preview .wcpp-mask,.wcpp-cart-thumb .wcpp-mask{position:absolute;border:2px solid #00e84f;background:rgba(0,232,79,.10);box-sizing:border-box;z-index:2;pointer-events:none;}
.wcpp-mask-label{position:absolute;left:0;top:0;transform:translateY(-100%);background:#00e84f;color:#083b13;font-size:11px;font-weight:600;padding:3px 6px;border-radius:4px 4px 0 0;white-space:nowrap;}
.wcpp-upload-row input[type="file"]{width:100%;}
.wcpp-side-meta{margin:.5rem 0 0;padding:8px 10px;background:#f7f7f7;border:1px solid #e8e8e8;border-radius:8px;}
.wcpp-help{margin-top:.75rem;font-size:.92em;opacity:.85;}
.wcpp-tier-list{margin:6px 0 0 18px;padding:0;}
.wcpp-cart-thumb{width:90px;border:1px solid #e3e3e3;border-radius:8px;overflow:hidden;background:#fff;padding:4px;}
.wcpp-cart-name-wrap{display:flex;align-items:flex-start;gap:12px;}
.wcpp-cart-name-text{min-width:0;}
.woocommerce table.shop_table .product-thumbnail .wcpp-cart-thumb{margin:0 auto;}
.woocommerce .cart_item dl.variation{margin-top:8px;padding:8px 10px;background:#fafafa;border:1px solid #ececec;border-radius:8px;}
.woocommerce .cart_item dl.variation dt,.woocommerce .cart_item dl.variation dd{margin-bottom:4px;}
@media (max-width:767px){.wcpp-sides-frontend{grid-template-columns:1fr;}}
.wcpp-mask-label{display:none !important;}
.wcpp-tier-collapse{margin:0;}
.wcpp-tier-collapse summary{cursor:pointer;font-weight:600;list-style:none;}
.wcpp-tier-collapse summary::-webkit-details-marker{display:none;}
.wcpp-tier-collapse summary::after{content:"+";float:right;font-weight:700;}
.wcpp-tier-collapse[open] summary::after{content:"−";}
.wcpp-tier-collapse .wcpp-tier-list{margin-top:8px;}

.wcpp-product-meta{margin-bottom:10px;}

.wcpp-side-meta{
  margin:.3rem 0 0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  font-size:.9em;
  color:#666;
}
.wcpp-side-meta strong{
  font-weight:600;
}
.wcpp-product-meta .wcpp-side-meta{
  margin:0 0 .35rem;
}

.wcpp-zoom-modal{
  position:fixed;
  inset:0;
  z-index:99999;
}
.wcpp-zoom-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
}
.wcpp-zoom-dialog{
  position:relative;
  width:min(90vw, 900px);
  margin:4vh auto;
  background:#fff;
  border-radius:12px;
  padding:16px;
  z-index:2;
}
.wcpp-zoom-close{
  position:absolute;
  right:10px;
  top:10px;
  border:0;
  background:transparent;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.wcpp-zoom-stage{
  position:relative;
  width:100%;
}
.wcpp-zoom-stage img{
  display:block;
  width:100%;
  height:auto;
}
.wcpp-zoom-stage .wcpp-zoom-overlay{
  position:absolute;
  inset:0;
  object-fit:contain;
  transform:scale(2);
  transform-origin:center center;
  pointer-events:none;
}

.wcpp-zoom-modal{
  position:fixed;
  inset:0;
  z-index:99999;
}
.wcpp-zoom-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}
.wcpp-zoom-dialog{
  position:relative;
  width:min(92vw, 980px);
  max-height:92vh;
  margin:4vh auto;
  background:#fff;
  border-radius:12px;
  padding:16px;
  z-index:2;
  overflow:auto;
}
.wcpp-zoom-close{
  position:absolute;
  right:10px;
  top:8px;
  background:transparent;
  border:0;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.wcpp-zoom-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}
.wcpp-zoom-content{
  overflow:auto;
  max-height:calc(92vh - 90px);
  padding:8px;
  background:#fafafa;
  border-radius:8px;
}
.wcpp-zoom-scale-wrap{
  transform-origin:top center;
  transition:transform .15s ease;
}
.wcpp-zoom-scale-wrap .wcpp-preview{
  margin:0 auto;
  max-width:780px;
}

.wcpp-zoom-tools{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.wcpp-zoom-tools input[type="range"]{
  width:110px;
}

.wcpp-zoom-toolbar .wcpp-zoom-range{
  width:160px;
  max-width:40vw;
}
.wcpp-modal-pdf-btn{
  margin-left:auto;
}

/* DB complete: modern frontend */
.wcpp-wrap{background:#fff;border:1px solid #edf0f3;border-radius:18px;padding:18px 20px;box-shadow:0 10px 34px rgba(15,23,42,.06);font-size:15px;}
.wcpp-wrap h3{font-size:20px;font-weight:500;margin:0 0 12px;color:#111827;}
.wcpp-wrap label{font-weight:500;color:#1f2937;}
.wcpp-panel{display:grid;gap:14px;}
.wcpp-designer-tools{display:grid;grid-template-columns:1fr 160px 120px auto;gap:10px;align-items:end;padding:14px;background:#f8fafc;border:1px solid #eef2f7;border-radius:14px;}
.wcpp-designer-tools input,.wcpp-designer-tools select{width:100%;min-height:40px;border:1px solid #dfe5ec;border-radius:10px;padding:8px 10px;background:#fff;}
.wcpp-sides-frontend{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.wcpp-side-card{border:1px solid #eef2f7;border-radius:16px;padding:14px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.05);}
.wcpp-side-card h4{font-size:16px;font-weight:600;margin:0 0 10px;color:#111827;}
.wcpp-preview{border-radius:14px;overflow:hidden;background:#f8fafc;border:1px solid #eef2f7;}
.wcpp-preview .wcpp-mask{border-color:#2dd4bf;background:rgba(45,212,191,.10);}
.wcpp-side-meta{font-size:13px;color:#667085;}
.wcpp-main-designer{float:left;width:48%;margin:0 4% 2em 0;opacity:1!important;}
.wcpp-main-stage{position:relative;border:1px solid #edf0f3;border-radius:22px;background:#fff;box-shadow:0 12px 38px rgba(15,23,42,.06);overflow:hidden;padding:18px;}
.wcpp-main-side{display:none;position:relative;line-height:0;}
.wcpp-main-side.is-active{display:block;}
.wcpp-main-base{display:block;width:100%;height:auto;}
.wcpp-main-zone{position:absolute;box-sizing:border-box;border:2px dashed rgba(31,143,131,.65);background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;overflow:hidden;line-height:1.2;}
.wcpp-main-upload{width:100%;height:100%;object-fit:contain;}
.wcpp-main-text{font-weight:600;font-size:clamp(14px,2.8vw,34px);text-align:center;word-break:break-word;line-height:1.05;white-space:pre-wrap;padding:4px;}
.wcpp-main-tabs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.wcpp-main-tabs button{border:1px solid #dfe5ec;border-radius:999px;background:#fff;padding:8px 13px;font-size:13px;cursor:pointer;}
.wcpp-main-tabs button.is-active{background:#111827;color:#fff;border-color:#111827;}
@media(max-width:900px){.wcpp-main-designer{float:none;width:100%;margin:0 0 22px}.wcpp-designer-tools{grid-template-columns:1fr 1fr}.wcpp-designer-tools button{grid-column:1/-1}}
@media(max-width:560px){.wcpp-wrap{padding:14px;border-radius:14px}.wcpp-designer-tools{grid-template-columns:1fr}.wcpp-main-stage{padding:10px;border-radius:16px}}
.wcpp-cart-thumb .wcpp-mask{display:flex;align-items:center;justify-content:center;font-size:10px;text-align:center;line-height:1.05;color:#111;overflow:hidden;}


/* v1.1 lightbox editor */
.wcpp-preview .wcpp-design-text-preview,
.wcpp-cart-design-text{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.05;font-weight:500;font-size:clamp(12px,3vw,28px);word-break:break-word;padding:6px;box-sizing:border-box;pointer-events:none;}
.wcpp-preview .wcpp-design-text-preview{left:33%;top:20%;width:25%;height:25%;}
.wcpp-editor-dialog{width:min(96vw,1180px);}
.wcpp-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;}
.wcpp-editor-panel{background:#f8fafc;border:1px solid #e7edf4;border-radius:16px;padding:16px;display:grid;gap:12px;}
.wcpp-editor-panel h3{margin:0;font-weight:500;font-size:18px;color:#111827;}
.wcpp-editor-panel label{display:grid;gap:6px;font-size:13px;color:#344054;font-weight:500;}
.wcpp-editor-panel textarea,.wcpp-editor-panel select,.wcpp-editor-panel input[type=color]{width:100%;border:1px solid #d0d5dd;border-radius:10px;background:#fff;padding:10px;font:inherit;box-sizing:border-box;}
.wcpp-editor-panel input[type=color]{height:42px;padding:4px;}
.wcpp-editor-templates{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.wcpp-editor-templates button{border:1px solid #d0d5dd;background:#fff;border-radius:10px;padding:9px;cursor:pointer;font-size:13px;}
.wcpp-editor-note{font-size:12px;color:#667085;margin:0;}
.wcpp-zoom-scale-wrap .wcpp-design-text-preview{position:absolute;}
.wcpp-cart-design-text{font-size:11px;font-weight:600;}
@media(max-width:800px){.wcpp-editor-layout{grid-template-columns:1fr}.wcpp-editor-panel{order:-1}.wcpp-zoom-toolbar{flex-wrap:wrap}.wcpp-modal-pdf-btn{margin-left:0}}


/* vNext object editor */
.wcpp-object-editor-modal .wcpp-zoom-content{background:#f3f5f7;border:1px solid #e7edf4;max-height:72vh;}
.wcpp-object-editor-modal .wcpp-preview{position:relative;overflow:hidden;max-width:860px;margin:0 auto;background:#fff;}
.wcpp-editor-object-layer{position:absolute;z-index:7;box-sizing:border-box;overflow:hidden;border:1px dashed rgba(20,184,166,.75);background:rgba(20,184,166,.06);}
.wcpp-editor-object{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:move;touch-action:none;border:1px solid transparent;user-select:none;}
.wcpp-editor-object.is-active{border:1px solid #2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.18);}
.wcpp-editor-object-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:500;line-height:1.05;word-break:break-word;padding:3px;box-sizing:border-box;}
.wcpp-editor-object-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;}
.wcpp-editor-resize{position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;background:#2563eb;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:nwse-resize;display:none;}
.wcpp-editor-object.is-active .wcpp-editor-resize{display:block;}
.wcpp-editor-actions{display:grid;grid-template-columns:1fr;gap:8px;}
.wcpp-add-image-label{display:flex!important;justify-content:center;align-items:center;margin:0;text-align:center;cursor:pointer;}
.wcpp-add-image-label input{display:none;}
.wcpp-editor-hint{font-size:12px;line-height:1.4;color:#667085;background:#fff;border:1px solid #e7edf4;border-radius:12px;padding:10px;}
.wcpp-editor-delete:disabled,.wcpp-editor-center:disabled{opacity:.45;cursor:not-allowed;}
.wcpp-design-json-preview{position:absolute;z-index:5;pointer-events:none;overflow:hidden;box-sizing:border-box;}
.wcpp-design-json-object{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.05;font-weight:500;word-break:break-word;}
.wcpp-design-json-image{object-fit:contain;}
.wcpp-main-json-layer{position:absolute;inset:0;z-index:6;pointer-events:none;}
.wcpp-main-json-object{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.05;font-weight:500;word-break:break-word;}
.wcpp-main-json-image{object-fit:contain;}
.wcpp-cart-object-layer{position:absolute;z-index:6;pointer-events:none;overflow:hidden;}
.wcpp-cart-object{position:absolute;box-sizing:border-box;}
.wcpp-cart-object-text{display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;font-weight:600;line-height:1.05;word-break:break-word;}
.wcpp-cart-object-image{object-fit:contain;}
@media(max-width:800px){
  .wcpp-editor-dialog{width:96vw;margin:2vh auto;padding:10px;border-radius:14px;}
  .wcpp-editor-layout{gap:10px;}
  .wcpp-editor-panel{padding:12px;border-radius:14px;}
  .wcpp-object-editor-modal .wcpp-zoom-content{max-height:50vh;padding:6px;}
  .wcpp-zoom-toolbar{gap:6px;}
  .wcpp-zoom-toolbar .button{font-size:12px;padding:6px 8px;}
}

/* v1.3 stable object editor fixes */
.wcpp-sides-frontend{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.wcpp-preview{position:relative;line-height:0}.wcpp-preview .wcpp-base{display:block;width:100%;height:auto}.wcpp-card-object-layer{position:absolute;z-index:5;overflow:hidden;pointer-events:none;box-sizing:border-box}.wcpp-editor-dialog{width:min(96vw,1180px);max-height:94vh;overflow:auto;border-radius:18px}.wcpp-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px}.wcpp-editor-topbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.wcpp-editor-stage{background:#f4f6f8;border:1px solid #e5e7eb;border-radius:16px;padding:14px;overflow:auto;max-height:76vh}.wcpp-editor-product{position:relative;max-width:760px;margin:0 auto;background:#fff;border-radius:14px;overflow:hidden}.wcpp-editor-base{display:block;width:100%;height:auto}.wcpp-editor-zone{position:absolute;box-sizing:border-box;border:2px dashed #14b8a6;background:rgba(20,184,166,.08);overflow:hidden;z-index:4}.wcpp-editor-object-layer{position:absolute;inset:0;overflow:hidden}.wcpp-editor-object{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:move;touch-action:none;border:1px solid transparent;user-select:none}.wcpp-editor-object.is-active{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.16)}.wcpp-editor-object-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:500;line-height:1.05;word-break:break-word;padding:3px;box-sizing:border-box}.wcpp-editor-object-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.wcpp-editor-resize{position:absolute;right:-6px;bottom:-6px;width:16px;height:16px;background:#2563eb;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:nwse-resize;display:none}.wcpp-editor-object.is-active .wcpp-editor-resize{display:block}.wcpp-editor-panel{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;display:grid;gap:12px;align-self:start}.wcpp-editor-panel h3{margin:0;font-size:18px;font-weight:500}.wcpp-editor-panel label{display:grid;gap:6px;font-size:13px;color:#344054}.wcpp-editor-panel textarea,.wcpp-editor-panel select,.wcpp-editor-panel input[type=color],.wcpp-editor-panel input[type=range]{width:100%;box-sizing:border-box}.wcpp-add-image-label input{display:none}.wcpp-editor-templates{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wcpp-editor-hint{font-size:12px;color:#667085;line-height:1.4;margin:0}.wcpp-design-json-object{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.05;font-weight:500;word-break:break-word}.wcpp-design-json-image{object-fit:contain}.wcpp-main-json-layer{position:absolute;inset:0;z-index:7;pointer-events:none}.wcpp-cart-thumb{position:relative;width:86px;min-width:86px;line-height:0}.wcpp-cart-thumb .wcpp-base{display:block;width:86px;height:auto}.wcpp-cart-thumb .wcpp-mask{display:none}.wcpp-cart-object-layer{position:absolute;z-index:7;pointer-events:none;overflow:hidden}.wcpp-cart-object{position:absolute;box-sizing:border-box}.wcpp-cart-object-text{display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;font-weight:600;line-height:1.05;word-break:break-word}.wcpp-cart-object-image{object-fit:contain}.wcpp-cart-name-wrap{display:flex;gap:10px;align-items:flex-start}.wcpp-cart-name-text{min-width:0}
@media(max-width:800px){.wcpp-editor-layout{grid-template-columns:1fr}.wcpp-editor-panel{order:-1}.wcpp-editor-stage{max-height:58vh;padding:8px}.wcpp-editor-dialog{width:96vw;margin:2vh auto;padding:12px}.wcpp-editor-topbar .button{font-size:12px;padding:6px 8px}.wcpp-sides-frontend{grid-template-columns:1fr}}

/* v1.4 styling refresh */
#wcpp-zoom-modal .wcpp-zoom-backdrop{background:rgba(17,24,39,.66);backdrop-filter:blur(6px)}
#wcpp-zoom-modal .wcpp-editor-dialog{width:min(96vw,1240px);max-height:92vh;margin:4vh auto;padding:0;border-radius:24px;background:#fff;box-shadow:0 28px 90px rgba(15,23,42,.35);overflow:hidden;border:1px solid rgba(255,255,255,.55)}
#wcpp-zoom-modal .wcpp-zoom-close{right:20px;top:18px;width:38px;height:38px;border-radius:999px;background:#f3f4f6;color:#111827;font-size:24px;line-height:36px;display:flex;align-items:center;justify-content:center;z-index:4;transition:.18s ease}
#wcpp-zoom-modal .wcpp-zoom-close:hover{background:#e5e7eb;transform:rotate(90deg)}
#wcpp-zoom-modal .wcpp-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;min-height:min(760px,92vh)}
#wcpp-zoom-modal .wcpp-editor-canvas{background:linear-gradient(180deg,#f8fafc,#eef2f7);padding:24px;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;gap:16px;min-width:0}
#wcpp-zoom-modal .wcpp-editor-topbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 48px 0 0;margin:0}
#wcpp-zoom-modal .wcpp-editor-topbar .button,#wcpp-zoom-modal .wcpp-editor-panel .button,#wcpp-zoom-modal .wcpp-add-image-label{border:1px solid #d9e0ea!important;background:#fff!important;color:#1f2937!important;border-radius:12px!important;min-height:42px;padding:10px 15px!important;font-weight:600!important;font-size:13px!important;line-height:1.15!important;text-transform:none!important;letter-spacing:0!important;box-shadow:0 1px 2px rgba(15,23,42,.04)!important;transition:.18s ease}
#wcpp-zoom-modal .wcpp-editor-topbar .button:hover,#wcpp-zoom-modal .wcpp-editor-panel .button:hover,#wcpp-zoom-modal .wcpp-add-image-label:hover{background:#f8fafc!important;border-color:#cbd5e1!important;box-shadow:0 8px 18px rgba(15,23,42,.08)!important;transform:translateY(-1px)}
#wcpp-zoom-modal .wcpp-add-text,#wcpp-zoom-modal .wcpp-add-image-label{background:#111827!important;border-color:#111827!important;color:#fff!important}
#wcpp-zoom-modal .wcpp-add-text:hover,#wcpp-zoom-modal .wcpp-add-image-label:hover{background:#263244!important;border-color:#263244!important}
#wcpp-zoom-modal .wcpp-editor-delete{color:#b42318!important;border-color:#f3c7c3!important;background:#fff7f6!important}
#wcpp-zoom-modal .wcpp-editor-delete:hover{background:#fee4e2!important}
#wcpp-zoom-modal .wcpp-editor-stage{flex:1;min-height:0;border:1px solid #dde5ef;border-radius:22px;background:#fff;padding:18px;overflow:auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 18px 42px rgba(15,23,42,.08)}
#wcpp-zoom-modal .wcpp-editor-product{position:relative;width:min(100%,850px);margin:0 auto;background:#fff;border-radius:18px;overflow:hidden}
#wcpp-zoom-modal .wcpp-editor-base{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
#wcpp-zoom-modal .wcpp-editor-zone{position:absolute;box-sizing:border-box;border:1.5px dashed rgba(20,184,166,.95);background:rgba(20,184,166,.08);box-shadow:0 0 0 9999px rgba(255,255,255,.16);overflow:hidden;z-index:4}
#wcpp-zoom-modal .wcpp-editor-zone:before{content:"Bedrukkingsvlak";position:absolute;left:8px;top:8px;z-index:1;background:rgba(15,118,110,.92);color:#fff;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:600;pointer-events:none}
#wcpp-zoom-modal .wcpp-editor-object-layer{position:absolute;inset:0;z-index:2}
#wcpp-zoom-modal .wcpp-editor-object{border-radius:8px;border:1px solid transparent;transition:.12s ease;background:transparent}
#wcpp-zoom-modal .wcpp-editor-object:hover{border-color:rgba(59,130,246,.35)}
#wcpp-zoom-modal .wcpp-editor-object.is-active{border:1.5px solid #2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.14);background:rgba(255,255,255,.1)}
#wcpp-zoom-modal .wcpp-editor-resize{right:-7px;bottom:-7px;width:18px;height:18px;background:#2563eb;border:3px solid #fff;box-shadow:0 6px 16px rgba(37,99,235,.35)}
#wcpp-zoom-modal .wcpp-editor-panel{background:#fff;border:0;border-radius:0;padding:26px 24px 24px;box-shadow:none;display:flex;flex-direction:column;gap:16px;min-width:0;overflow:auto}
#wcpp-zoom-modal .wcpp-editor-panel h3{font-size:21px;line-height:1.2;margin:0 44px 4px 0;font-weight:600;color:#111827}
#wcpp-zoom-modal .wcpp-editor-panel label{font-size:12px;font-weight:600;color:#374151;gap:8px}
#wcpp-zoom-modal .wcpp-editor-panel textarea,#wcpp-zoom-modal .wcpp-editor-panel select,#wcpp-zoom-modal .wcpp-editor-panel input[type=color]{border:1px solid #d9e0ea;border-radius:14px;background:#fff;color:#111827;padding:12px;font-size:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);outline:none;transition:.18s ease}
#wcpp-zoom-modal .wcpp-editor-panel textarea:focus,#wcpp-zoom-modal .wcpp-editor-panel select:focus{border-color:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.18)}
#wcpp-zoom-modal .wcpp-editor-panel textarea{min-height:112px;resize:vertical}
#wcpp-zoom-modal .wcpp-editor-panel input[type=color]{height:46px;padding:5px;cursor:pointer}
#wcpp-zoom-modal .wcpp-editor-size{accent-color:#111827;width:100%}
#wcpp-zoom-modal .wcpp-editor-templates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
#wcpp-zoom-modal .wcpp-editor-templates button{border:1px solid #d9e0ea;background:#fff;color:#111827;border-radius:14px;min-height:50px;padding:10px;font-size:13px;font-weight:600;text-transform:none;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:.18s ease}
#wcpp-zoom-modal .wcpp-editor-templates button:hover{border-color:#94a3b8;background:#f8fafc;transform:translateY(-1px)}
#wcpp-zoom-modal .wcpp-editor-hint{font-size:12.5px;color:#64748b;line-height:1.5;background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;padding:12px 14px;margin:0}
#wcpp-zoom-modal .wcpp-apply-design{margin-top:auto!important;background:#111827!important;border-color:#111827!important;color:#fff!important;width:100%;border-radius:14px!important;min-height:48px;font-size:14px!important}
#wcpp-zoom-modal .button:disabled{opacity:.45!important;transform:none!important;box-shadow:none!important;cursor:not-allowed!important}
.wcpp-side-card{border-color:#e6ebf2;border-radius:18px;box-shadow:0 12px 32px rgba(15,23,42,.06)}
.wcpp-side-card h4{font-weight:600;letter-spacing:-.01em}
.wcpp-preview{border-radius:16px;border-color:#e6ebf2}
.wcpp-side-card .button,.wcpp-side-card button{border-radius:12px!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important}
@media(max-width:900px){#wcpp-zoom-modal .wcpp-editor-dialog{width:calc(100vw - 18px);margin:9px auto;max-height:calc(100vh - 18px);border-radius:18px}#wcpp-zoom-modal .wcpp-editor-layout{grid-template-columns:1fr;min-height:0}#wcpp-zoom-modal .wcpp-editor-canvas{border-right:0;border-bottom:1px solid #e5e7eb;padding:16px}#wcpp-zoom-modal .wcpp-editor-stage{max-height:56vh;padding:10px;border-radius:16px}#wcpp-zoom-modal .wcpp-editor-panel{padding:18px;max-height:38vh}#wcpp-zoom-modal .wcpp-zoom-close{right:14px;top:14px}#wcpp-zoom-modal .wcpp-editor-topbar{padding-right:44px;gap:8px}#wcpp-zoom-modal .wcpp-editor-topbar .button,#wcpp-zoom-modal .wcpp-add-image-label{min-height:40px;padding:9px 12px!important;font-size:12px!important}}
@media(max-width:560px){#wcpp-zoom-modal .wcpp-editor-topbar{display:grid;grid-template-columns:1fr 1fr;width:100%}#wcpp-zoom-modal .wcpp-editor-topbar .button,#wcpp-zoom-modal .wcpp-add-image-label{width:100%;justify-content:center}#wcpp-zoom-modal .wcpp-editor-panel{gap:12px}#wcpp-zoom-modal .wcpp-editor-templates{grid-template-columns:1fr 1fr}#wcpp-zoom-modal .wcpp-editor-zone:before{font-size:10px;padding:3px 7px;left:6px;top:6px}}

/* v1.4.1 mobile order + clean print area */
#wcpp-zoom-modal .wcpp-editor-zone{
  border:2px dashed #d946ef!important;
  background:transparent!important;
  box-shadow:none!important;
}
#wcpp-zoom-modal .wcpp-editor-zone:before{
  content:none!important;
  display:none!important;
}
@media(max-width:900px){
  #wcpp-zoom-modal .wcpp-editor-layout{display:flex!important;flex-direction:column!important;}
  #wcpp-zoom-modal .wcpp-editor-canvas{order:1!important;}
  #wcpp-zoom-modal .wcpp-editor-panel{order:2!important;max-height:none!important;}
  #wcpp-zoom-modal .wcpp-editor-stage{max-height:54vh!important;}
}
@media(max-width:560px){
  #wcpp-zoom-modal .wcpp-editor-dialog{height:calc(100vh - 12px);max-height:calc(100vh - 12px);margin:6px auto!important;}
  #wcpp-zoom-modal .wcpp-editor-layout{height:100%;overflow:auto;}
  #wcpp-zoom-modal .wcpp-editor-canvas{padding:14px 12px 10px!important;}
  #wcpp-zoom-modal .wcpp-editor-panel{padding:14px 12px 18px!important;}
  #wcpp-zoom-modal .wcpp-editor-stage{max-height:48vh!important;}
}

/* v6 mobile UI + text-size fixes */
#wcpp-zoom-modal .wcpp-editor-zone{background:transparent!important;border:2px dashed #d946ef!important;}
#wcpp-zoom-modal .wcpp-editor-zone:before{content:none!important;display:none!important;}
#wcpp-zoom-modal .wcpp-editor-object-text{font-size:inherit;}
#wcpp-zoom-modal .wcpp-editor-topbar{align-items:center;}
#wcpp-zoom-modal .wcpp-editor-topbar .button,#wcpp-zoom-modal .wcpp-add-image-label{white-space:nowrap;}

@media(max-width:900px){
  #wcpp-zoom-modal .wcpp-editor-dialog{width:calc(100vw - 12px)!important;margin:6px auto!important;max-height:calc(100vh - 12px)!important;}
  #wcpp-zoom-modal .wcpp-editor-layout{display:flex!important;flex-direction:column!important;gap:0!important;}
  #wcpp-zoom-modal .wcpp-editor-canvas{order:1!important;padding:12px!important;}
  #wcpp-zoom-modal .wcpp-editor-panel{order:2!important;max-height:none!important;padding:14px!important;border-radius:0 0 18px 18px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px 12px!important;}
  #wcpp-zoom-modal .wcpp-editor-panel h3{grid-column:1/-1;font-size:17px!important;margin:0 42px 0 0!important;}
  #wcpp-zoom-modal .wcpp-editor-panel label{gap:5px!important;font-size:11.5px!important;}
  #wcpp-zoom-modal .wcpp-editor-panel textarea{min-height:64px!important;max-height:88px!important;padding:9px!important;}
  #wcpp-zoom-modal .wcpp-editor-panel select,#wcpp-zoom-modal .wcpp-editor-panel input[type=color]{min-height:40px!important;padding:8px 10px!important;border-radius:11px!important;}
  #wcpp-zoom-modal .wcpp-editor-templates{grid-column:1/-1;display:flex!important;gap:8px!important;overflow-x:auto!important;padding-bottom:2px!important;scroll-snap-type:x proximity;}
  #wcpp-zoom-modal .wcpp-editor-templates button{min-width:112px!important;min-height:40px!important;padding:8px 10px!important;border-radius:11px!important;scroll-snap-align:start;}
  #wcpp-zoom-modal .wcpp-editor-hint{display:none!important;}
  #wcpp-zoom-modal .wcpp-apply-design{grid-column:1/-1;min-height:44px!important;margin-top:0!important;}
  #wcpp-zoom-modal .wcpp-editor-stage{max-height:52vh!important;padding:8px!important;}
  #wcpp-zoom-modal .wcpp-editor-topbar{position:sticky;top:0;z-index:3;display:flex!important;flex-wrap:nowrap!important;gap:7px!important;overflow-x:auto!important;padding:0 44px 8px 0!important;background:#fff!important;}
  #wcpp-zoom-modal .wcpp-editor-topbar .button,#wcpp-zoom-modal .wcpp-add-image-label{width:auto!important;min-width:max-content!important;min-height:38px!important;padding:8px 11px!important;font-size:12px!important;border-radius:999px!important;}
}
@media(max-width:560px){
  #wcpp-zoom-modal .wcpp-editor-canvas{padding:10px!important;}
  #wcpp-zoom-modal .wcpp-editor-panel{grid-template-columns:1fr!important;padding:12px!important;gap:9px!important;}
  #wcpp-zoom-modal .wcpp-editor-stage{max-height:48vh!important;overflow:auto!important;-webkit-overflow-scrolling:touch;}
  #wcpp-zoom-modal .wcpp-editor-product{min-width:620px;}
  #wcpp-zoom-modal .wcpp-editor-panel textarea{min-height:58px!important;}
}

/* v1.5 editor tools: zoom, rotate, crop */
#wcpp-zoom-modal .wcpp-view-zoom-label{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;font-weight:600;color:#475467;white-space:nowrap;background:#fff;border:1px solid #d9e0ea;border-radius:999px;padding:7px 10px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
#wcpp-zoom-modal .wcpp-view-zoom{width:110px;accent-color:#111827}
#wcpp-zoom-modal .wcpp-image-options{display:none;grid-column:1/-1;border:1px solid #e5e7eb;background:#f8fafc;border-radius:16px;padding:12px;gap:10px}
#wcpp-zoom-modal .wcpp-image-options.is-active{display:grid}
#wcpp-zoom-modal .wcpp-image-options h4{margin:0;font-size:13px;font-weight:700;color:#111827}
#wcpp-zoom-modal .wcpp-image-options .button{min-height:40px!important}
#wcpp-zoom-modal .wcpp-editor-object{transform-origin:center center}
#wcpp-zoom-modal .wcpp-editor-object-img{transform-origin:center center}
.wcpp-design-json-object{transform-origin:center center;overflow:hidden}
.wcpp-design-json-image{transform-origin:center center}
#wcpp-zoom-modal .wcpp-editor-rotate,#wcpp-zoom-modal .wcpp-image-zoom,#wcpp-zoom-modal .wcpp-image-crop-x,#wcpp-zoom-modal .wcpp-image-crop-y{accent-color:#111827}
@media(max-width:900px){#wcpp-zoom-modal .wcpp-view-zoom-label{margin-left:0;min-width:max-content;padding:7px 10px}#wcpp-zoom-modal .wcpp-view-zoom{width:90px}#wcpp-zoom-modal .wcpp-image-options{grid-template-columns:1fr 1fr}#wcpp-zoom-modal .wcpp-image-options h4{grid-column:1/-1}}
@media(max-width:560px){#wcpp-zoom-modal .wcpp-image-options{grid-template-columns:1fr}}

/* v1.6 spread-style professional editor */
#wcpp-zoom-modal .wcpp-editor-dialog{
  width:min(98vw,1420px)!important;
  max-height:96vh!important;
  margin:2vh auto!important;
  padding:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#f4f4f5!important;
  box-shadow:0 30px 100px rgba(0,0,0,.30)!important;
}
#wcpp-zoom-modal .wcpp-spread-layout{
  display:grid!important;
  grid-template-columns:86px minmax(0,1fr) 360px!important;
  gap:0!important;
  min-height:78vh!important;
  max-height:96vh!important;
  background:#f4f4f5!important;
}
#wcpp-zoom-modal .wcpp-editor-sidebar{
  background:#fff!important;
  border-right:1px solid #e6e8ec!important;
  padding:16px 10px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  align-items:stretch!important;
}
#wcpp-zoom-modal .wcpp-sidebar-tool{
  border:0!important;
  background:#fff!important;
  border-radius:14px!important;
  color:#111827!important;
  min-height:72px!important;
  padding:9px 6px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  cursor:pointer!important;
  font:inherit!important;
  text-align:center!important;
  transition:.16s ease!important;
}
#wcpp-zoom-modal .wcpp-sidebar-tool:hover{background:#f2f4f7!important;transform:translateY(-1px)}
#wcpp-zoom-modal .wcpp-sidebar-tool span{font-size:25px!important;line-height:1!important;font-weight:700!important;display:block!important}
#wcpp-zoom-modal .wcpp-sidebar-tool em{font-style:normal!important;font-size:12px!important;font-weight:600!important;line-height:1.15!important}
#wcpp-zoom-modal .wcpp-sidebar-tool input{display:none!important}
#wcpp-zoom-modal .wcpp-editor-canvas{
  background:#f2f2f3!important;
  border-right:1px solid #e6e8ec!important;
  padding:18px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
}
#wcpp-zoom-modal .wcpp-editor-topbar{
  background:transparent!important;
  border:0!important;
  padding:0 50px 14px 0!important;
  gap:8px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
}
#wcpp-zoom-modal .wcpp-editor-topbar .button,
#wcpp-zoom-modal .wcpp-add-image-label.button{
  background:#fff!important;
  color:#101828!important;
  border:1px solid #d9dee7!important;
  border-radius:999px!important;
  min-height:38px!important;
  padding:8px 14px!important;
  font-size:13px!important;
  font-weight:600!important;
  box-shadow:0 1px 2px rgba(16,24,40,.04)!important;
}
#wcpp-zoom-modal .wcpp-editor-topbar .button:hover,
#wcpp-zoom-modal .wcpp-add-image-label.button:hover{background:#f8fafc!important;border-color:#b8c0cc!important}
#wcpp-zoom-modal .wcpp-view-zoom-label{
  background:#fff!important;
  border:1px solid #d9dee7!important;
  border-radius:999px!important;
  min-height:38px!important;
  padding:7px 12px!important;
  margin-left:auto!important;
  color:#475467!important;
}
#wcpp-zoom-modal .wcpp-editor-stage{
  flex:1!important;
  max-height:none!important;
  min-height:0!important;
  overflow:auto!important;
  background:#fff!important;
  border:1px solid #e6e8ec!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:28px!important;
}
#wcpp-zoom-modal .wcpp-editor-product{
  max-width:min(760px,92%)!important;
  margin:auto!important;
  transform-origin:center top!important;
}
#wcpp-zoom-modal .wcpp-editor-base{filter:drop-shadow(0 18px 22px rgba(15,23,42,.10))!important}
#wcpp-zoom-modal .wcpp-editor-zone{
  border:2px dashed #d946ef!important;
  background:transparent!important;
  overflow:visible!important;
}
#wcpp-zoom-modal .wcpp-safe-margin{
  position:absolute;
  inset:7%;
  border:1px dashed rgba(217,70,239,.55);
  pointer-events:none;
  z-index:1;
}
#wcpp-zoom-modal .wcpp-editor-object-layer{z-index:2!important;inset:0!important;border:0!important;background:transparent!important;overflow:visible!important}
#wcpp-zoom-modal .wcpp-editor-object{border-radius:10px!important;background:transparent!important}
#wcpp-zoom-modal .wcpp-editor-object.is-active{border:1.5px solid #111827!important;box-shadow:0 0 0 4px rgba(17,24,39,.12)!important}
#wcpp-zoom-modal .wcpp-editor-resize{background:#111827!important;width:18px!important;height:18px!important;right:-8px!important;bottom:-8px!important}
#wcpp-zoom-modal .wcpp-editor-panel{
  background:#fff!important;
  padding:22px!important;
  border:0!important;
  overflow:auto!important;
  gap:12px!important;
  display:flex!important;
  flex-direction:column!important;
}
#wcpp-zoom-modal .wcpp-editor-panel h3{font-size:22px!important;font-weight:600!important;margin:0 42px 4px 0!important;color:#101828!important}
#wcpp-zoom-modal .wcpp-editor-section{
  border:1px solid #e6e8ec!important;
  border-radius:16px!important;
  background:#fff!important;
  padding:0!important;
  overflow:hidden!important;
}
#wcpp-zoom-modal .wcpp-editor-section summary{
  cursor:pointer!important;
  padding:14px 15px!important;
  font-size:14px!important;
  font-weight:700!important;
  color:#101828!important;
  list-style:none!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
}
#wcpp-zoom-modal .wcpp-editor-section summary::-webkit-details-marker{display:none!important}
#wcpp-zoom-modal .wcpp-editor-section summary:after{content:'+';font-size:20px;font-weight:400;color:#667085!important}
#wcpp-zoom-modal .wcpp-editor-section[open] summary:after{content:'−'}
#wcpp-zoom-modal .wcpp-editor-section > label,
#wcpp-zoom-modal .wcpp-editor-section .wcpp-image-options,
#wcpp-zoom-modal .wcpp-editor-section .wcpp-editor-templates,
#wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-list,
#wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-actions{
  margin:0 14px 12px!important;
}
#wcpp-zoom-modal .wcpp-editor-section label{display:grid!important;gap:7px!important;font-size:12px!important;font-weight:600!important;color:#475467!important}
#wcpp-zoom-modal textarea.wcpp-editor-text{min-height:78px!important;max-height:150px!important}
#wcpp-zoom-modal .wcpp-editor-panel textarea,
#wcpp-zoom-modal .wcpp-editor-panel select,
#wcpp-zoom-modal .wcpp-editor-panel input[type=color]{border-radius:12px!important;border:1px solid #d9dee7!important;background:#fff!important;font-size:14px!important}
#wcpp-zoom-modal .wcpp-editor-templates{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
#wcpp-zoom-modal .wcpp-editor-templates button,
#wcpp-zoom-modal .wcpp-layer-actions .button,
#wcpp-zoom-modal .wcpp-image-reset{
  border:1px solid #d9dee7!important;
  background:#fff!important;
  color:#101828!important;
  border-radius:12px!important;
  min-height:40px!important;
  padding:8px 10px!important;
  font-size:12px!important;
  font-weight:600!important;
}
#wcpp-zoom-modal .wcpp-layer-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
#wcpp-zoom-modal .wcpp-layer-list{display:grid!important;gap:6px!important}
#wcpp-zoom-modal .wcpp-layer-item{
  width:100%!important;
  text-align:left!important;
  border:1px solid #e6e8ec!important;
  background:#f9fafb!important;
  color:#101828!important;
  border-radius:10px!important;
  padding:9px 10px!important;
  font-size:12px!important;
  cursor:pointer!important;
}
#wcpp-zoom-modal .wcpp-layer-item.is-active{background:#111827!important;color:#fff!important;border-color:#111827!important}
#wcpp-zoom-modal .wcpp-empty-layers{margin:0!important;color:#667085!important;font-size:12px!important}
#wcpp-zoom-modal .wcpp-editor-hint{background:#f9fafb!important;border-color:#e6e8ec!important;color:#667085!important;border-radius:14px!important}
#wcpp-zoom-modal .wcpp-apply-design{
  background:#111827!important;
  border:0!important;
  color:#fff!important;
  border-radius:999px!important;
  min-height:48px!important;
  font-size:14px!important;
  font-weight:700!important;
  margin-top:auto!important;
}
#wcpp-zoom-modal .wcpp-zoom-close{
  top:18px!important;
  right:18px!important;
  width:36px!important;
  height:36px!important;
  border-radius:50%!important;
  background:#fff!important;
  border:1px solid #e6e8ec!important;
  color:#111827!important;
  font-size:24px!important;
  z-index:5!important;
}

@media(max-width:980px){
  #wcpp-zoom-modal .wcpp-editor-dialog{width:calc(100vw - 10px)!important;height:calc(100vh - 10px)!important;max-height:calc(100vh - 10px)!important;margin:5px auto!important;border-radius:16px!important}
  #wcpp-zoom-modal .wcpp-spread-layout{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;max-height:none!important}
  #wcpp-zoom-modal .wcpp-editor-sidebar{order:1!important;flex-direction:row!important;overflow-x:auto!important;border-right:0!important;border-bottom:1px solid #e6e8ec!important;padding:8px!important;gap:7px!important;min-height:66px!important;scroll-snap-type:x proximity!important}
  #wcpp-zoom-modal .wcpp-sidebar-tool{min-width:76px!important;min-height:52px!important;padding:7px!important;scroll-snap-align:start!important;border:1px solid #eef1f5!important;background:#fff!important}
  #wcpp-zoom-modal .wcpp-sidebar-tool span{font-size:20px!important}
  #wcpp-zoom-modal .wcpp-sidebar-tool em{font-size:11px!important}
  #wcpp-zoom-modal .wcpp-editor-canvas{order:2!important;border-right:0!important;border-bottom:1px solid #e6e8ec!important;padding:10px!important;min-height:45vh!important;flex:1 1 auto!important}
  #wcpp-zoom-modal .wcpp-editor-topbar{padding:0 42px 8px 0!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important}
  #wcpp-zoom-modal .wcpp-editor-topbar .button,#wcpp-zoom-modal .wcpp-add-image-label.button{min-width:max-content!important;min-height:36px!important;padding:7px 11px!important;font-size:12px!important}
  #wcpp-zoom-modal .wcpp-view-zoom-label{min-width:max-content!important;margin-left:0!important;min-height:36px!important;font-size:11px!important;padding:6px 10px!important}
  #wcpp-zoom-modal .wcpp-editor-stage{padding:10px!important;min-height:38vh!important;max-height:none!important;border-radius:14px!important}
  #wcpp-zoom-modal .wcpp-editor-product{max-width:100%!important;min-width:420px!important}
  #wcpp-zoom-modal .wcpp-editor-panel{order:3!important;flex:0 0 auto!important;max-height:42vh!important;padding:12px!important;overflow:auto!important;display:block!important}
  #wcpp-zoom-modal .wcpp-editor-panel h3{font-size:18px!important;margin-bottom:10px!important}
  #wcpp-zoom-modal .wcpp-editor-section{margin-bottom:8px!important}
  #wcpp-zoom-modal .wcpp-editor-section:not([open]){background:#fff!important}
  #wcpp-zoom-modal .wcpp-editor-section summary{padding:12px 14px!important}
  #wcpp-zoom-modal .wcpp-editor-hint{display:none!important}
  #wcpp-zoom-modal .wcpp-apply-design{width:100%!important;min-height:44px!important;margin-top:10px!important}
  #wcpp-zoom-modal .wcpp-zoom-close{top:13px!important;right:12px!important}
}
@media(max-width:560px){
  #wcpp-zoom-modal .wcpp-editor-canvas{min-height:42vh!important}
  #wcpp-zoom-modal .wcpp-editor-stage{overflow:auto!important;-webkit-overflow-scrolling:touch!important;align-items:flex-start!important;justify-content:flex-start!important}
  #wcpp-zoom-modal .wcpp-editor-product{min-width:560px!important}
  #wcpp-zoom-modal .wcpp-editor-panel{max-height:40vh!important}
  #wcpp-zoom-modal .wcpp-editor-section > label,#wcpp-zoom-modal .wcpp-editor-section .wcpp-image-options,#wcpp-zoom-modal .wcpp-editor-section .wcpp-editor-templates,#wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-list,#wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-actions{margin-left:10px!important;margin-right:10px!important}
  #wcpp-zoom-modal .wcpp-editor-templates{display:flex!important;overflow-x:auto!important}
  #wcpp-zoom-modal .wcpp-editor-templates button{min-width:110px!important}
}

/* v1.9 mobile/editor layout fixes */
#wcpp-zoom-modal .wcpp-editor-dialog{overflow:hidden!important;}
#wcpp-zoom-modal .wcpp-spread-layout{height:96vh!important;min-height:0!important;}
#wcpp-zoom-modal .wcpp-editor-sidebar,#wcpp-zoom-modal .wcpp-editor-canvas,#wcpp-zoom-modal .wcpp-editor-panel{min-height:0!important;}
#wcpp-zoom-modal .wcpp-editor-panel{max-height:96vh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:24px!important;}
#wcpp-zoom-modal .wcpp-editor-stage{min-height:0!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;}
#wcpp-zoom-modal .wcpp-editor-topbar{flex-shrink:0!important;}
#wcpp-zoom-modal .wcpp-apply-design{position:sticky!important;bottom:0!important;z-index:3!important;box-shadow:0 -10px 24px rgba(255,255,255,.95)!important;}
@media(max-width:980px){
  #wcpp-zoom-modal .wcpp-editor-dialog{width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;}
  #wcpp-zoom-modal .wcpp-spread-layout{height:100dvh!important;max-height:100dvh!important;display:grid!important;grid-template-rows:auto minmax(42dvh,1fr) minmax(220px,40dvh)!important;grid-template-columns:1fr!important;overflow:hidden!important;}
  #wcpp-zoom-modal .wcpp-editor-sidebar{grid-row:1!important;order:0!important;min-height:58px!important;max-height:68px!important;padding:7px 50px 7px 8px!important;display:flex!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;border-bottom:1px solid #e5e7eb!important;background:#fff!important;}
  #wcpp-zoom-modal .wcpp-sidebar-tool{min-width:70px!important;min-height:48px!important;max-height:52px!important;padding:6px!important;flex:0 0 auto!important;}
  #wcpp-zoom-modal .wcpp-editor-canvas{grid-row:2!important;order:0!important;min-height:0!important;height:auto!important;padding:8px!important;overflow:hidden!important;border-bottom:1px solid #e5e7eb!important;}
  #wcpp-zoom-modal .wcpp-editor-topbar{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 42px 8px 0!important;background:#f2f2f3!important;flex:0 0 auto!important;}
  #wcpp-zoom-modal .wcpp-editor-stage{height:calc(100% - 48px)!important;min-height:0!important;max-height:none!important;padding:8px!important;display:block!important;overflow:auto!important;background:#fff!important;}
  #wcpp-zoom-modal .wcpp-editor-product{width:100%!important;min-width:0!important;max-width:520px!important;margin:0 auto!important;}
  #wcpp-zoom-modal .wcpp-editor-panel{grid-row:3!important;order:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;padding:10px 12px 16px!important;border-top:1px solid #e5e7eb!important;background:#fff!important;}
  #wcpp-zoom-modal .wcpp-editor-panel h3{display:none!important;}
  #wcpp-zoom-modal .wcpp-editor-section{margin-bottom:8px!important;}
  #wcpp-zoom-modal .wcpp-editor-section summary{padding:11px 13px!important;font-size:13px!important;}
  #wcpp-zoom-modal .wcpp-editor-section > label,#wcpp-zoom-modal .wcpp-editor-section .wcpp-image-options,#wcpp-zoom-modal .wcpp-editor-section .wcpp-editor-templates,#wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-list,#wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-actions{margin-left:10px!important;margin-right:10px!important;margin-bottom:10px!important;}
  #wcpp-zoom-modal .wcpp-apply-design{width:100%!important;min-height:46px!important;margin:8px 0 0!important;}
  #wcpp-zoom-modal .wcpp-zoom-close{top:10px!important;right:10px!important;background:#fff!important;}
}
@media(max-width:560px){
  #wcpp-zoom-modal .wcpp-spread-layout{grid-template-rows:auto minmax(46dvh,1fr) minmax(210px,38dvh)!important;}
  #wcpp-zoom-modal .wcpp-editor-stage{align-items:flex-start!important;justify-content:center!important;}
  #wcpp-zoom-modal .wcpp-editor-product{width:100%!important;min-width:0!important;max-width:100%!important;}
  #wcpp-zoom-modal .wcpp-editor-canvas{padding:7px!important;}
  #wcpp-zoom-modal .wcpp-editor-topbar .button,#wcpp-zoom-modal .wcpp-add-image-label.button,#wcpp-zoom-modal .wcpp-view-zoom-label{min-height:34px!important;padding:6px 10px!important;font-size:11.5px!important;}
  #wcpp-zoom-modal .wcpp-view-zoom{width:78px!important;}
  #wcpp-zoom-modal textarea.wcpp-editor-text{min-height:58px!important;}
}

/* v1.10 definitive mobile scroll fix
   Mobile gebruikt nu één scrollende modal in plaats van een vast grid met een afgesneden paneel. */
@media (max-width: 980px) {
  html.wcpp-editor-open,
  body.wcpp-editor-open {
    overflow: hidden !important;
    height: 100% !important;
  }

  #wcpp-zoom-modal {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    z-index: 999999 !important;
  }

  #wcpp-zoom-modal .wcpp-editor-dialog {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    display: block !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  #wcpp-zoom-modal .wcpp-spread-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #wcpp-zoom-modal .wcpp-editor-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 54px 8px 8px !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #wcpp-zoom-modal .wcpp-editor-canvas {
    order: 2 !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px !important;
    overflow: visible !important;
    background: #f4f6f8 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  #wcpp-zoom-modal .wcpp-editor-topbar {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 42px 8px 0 !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #wcpp-zoom-modal .wcpp-editor-stage {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px !important;
    overflow: visible !important;
    display: block !important;
    background: #fff !important;
    border-radius: 14px !important;
  }

  #wcpp-zoom-modal .wcpp-editor-product {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  #wcpp-zoom-modal .wcpp-editor-panel {
    order: 3 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    padding: 12px 12px 100px !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
  }

  #wcpp-zoom-modal .wcpp-editor-panel h3 {
    display: none !important;
  }

  #wcpp-zoom-modal .wcpp-editor-section {
    margin: 0 0 10px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #wcpp-zoom-modal .wcpp-editor-section summary {
    padding: 13px 14px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    cursor: pointer !important;
  }

  #wcpp-zoom-modal .wcpp-editor-section > label,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-image-options,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-editor-templates,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-list,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-actions,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-editor-hint {
    margin-left: 12px !important;
    margin-right: 12px !important;
    margin-bottom: 12px !important;
  }

  #wcpp-zoom-modal .wcpp-apply-design {
    position: sticky !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 30 !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 12px 0 0 !important;
    box-shadow: 0 -12px 30px rgba(255,255,255,.96), 0 10px 25px rgba(17,24,39,.16) !important;
  }

  #wcpp-zoom-modal .wcpp-zoom-close {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    z-index: 40 !important;
  }
}

@media (max-width: 560px) {
  #wcpp-zoom-modal .wcpp-editor-product {
    max-width: 100% !important;
  }
  #wcpp-zoom-modal .wcpp-editor-topbar .button,
  #wcpp-zoom-modal .wcpp-add-image-label.button,
  #wcpp-zoom-modal .wcpp-view-zoom-label {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }
  #wcpp-zoom-modal textarea.wcpp-editor-text {
    min-height: 64px !important;
  }
}

/* v1.13 final mobile fit: fixed header + fitted canvas + bottom drawer */
@media (max-width: 980px) {
  html.wcpp-editor-open, body.wcpp-editor-open { overflow:hidden!important; width:100%!important; height:100%!important; position:fixed!important; inset:0!important; }
  #wcpp-zoom-modal, #wcpp-zoom-modal * { box-sizing:border-box!important; }
  #wcpp-zoom-modal { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; overflow:hidden!important; background:#f5f6f8!important; z-index:999999!important; }
  #wcpp-zoom-modal .wcpp-zoom-backdrop { display:none!important; }
  #wcpp-zoom-modal .wcpp-editor-dialog { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; max-width:none!important; max-height:none!important; margin:0!important; padding:0!important; border-radius:0!important; overflow:hidden!important; background:#f5f6f8!important; }
  #wcpp-zoom-modal .wcpp-spread-layout { display:grid!important; grid-template-columns:1fr!important; grid-template-rows:74px minmax(0,1fr) 38dvh!important; width:100vw!important; height:100dvh!important; min-height:0!important; max-height:none!important; overflow:hidden!important; }
  #wcpp-zoom-modal .wcpp-editor-sidebar { grid-row:1!important; order:initial!important; display:flex!important; flex-direction:row!important; align-items:center!important; gap:8px!important; width:100%!important; min-width:0!important; height:74px!important; min-height:74px!important; max-height:74px!important; padding:8px 68px 8px 12px!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; background:#fff!important; border:0!important; border-bottom:1px solid #e8ebef!important; scrollbar-width:none!important; }
  #wcpp-zoom-modal .wcpp-editor-sidebar::-webkit-scrollbar{display:none!important}
  #wcpp-zoom-modal .wcpp-sidebar-tool { flex:0 0 82px!important; width:82px!important; min-width:82px!important; max-width:82px!important; height:56px!important; min-height:56px!important; max-height:56px!important; padding:7px 6px!important; border:1px solid #e7ebf0!important; border-radius:16px!important; background:#fff!important; box-shadow:0 5px 16px rgba(15,23,42,.05)!important; text-align:center!important; }
  #wcpp-zoom-modal .wcpp-sidebar-tool span{font-size:21px!important;line-height:1!important;display:block!important;margin:0!important}
  #wcpp-zoom-modal .wcpp-sidebar-tool em{font-size:10px!important;line-height:1.15!important;display:block!important;margin-top:4px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #wcpp-zoom-modal .wcpp-editor-canvas { grid-row:2!important; order:initial!important; min-width:0!important; min-height:0!important; width:100%!important; height:100%!important; padding:8px!important; overflow:hidden!important; background:#f5f6f8!important; border:0!important; }
  #wcpp-zoom-modal .wcpp-editor-topbar { display:flex!important; flex-wrap:nowrap!important; gap:8px!important; width:100%!important; max-width:100%!important; height:44px!important; min-height:44px!important; padding:0 0 8px 0!important; margin:0!important; overflow-x:auto!important; overflow-y:hidden!important; background:transparent!important; -webkit-overflow-scrolling:touch!important; scrollbar-width:none!important; }
  #wcpp-zoom-modal .wcpp-editor-topbar::-webkit-scrollbar{display:none!important}
  #wcpp-zoom-modal .wcpp-editor-topbar .button, #wcpp-zoom-modal .wcpp-add-image-label.button, #wcpp-zoom-modal .wcpp-view-zoom-label { flex:0 0 auto!important; width:auto!important; min-width:max-content!important; height:36px!important; min-height:36px!important; padding:7px 12px!important; border-radius:999px!important; font-size:12px!important; line-height:1!important; white-space:nowrap!important; }
  #wcpp-zoom-modal .wcpp-view-zoom{width:80px!important}
  #wcpp-zoom-modal .wcpp-editor-stage { width:100%!important; height:calc(100% - 44px)!important; min-height:0!important; max-height:none!important; padding:8px!important; margin:0!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#fff!important; border:1px solid #e8ebef!important; border-radius:18px!important; }
  #wcpp-zoom-modal .wcpp-editor-product { position:relative!important; width:auto!important; max-width:100%!important; max-height:100%!important; min-width:0!important; margin:0 auto!important; transform:none!important; transform-origin:center center!important; display:inline-block!important; overflow:hidden!important; background:#fff!important; }
  #wcpp-zoom-modal .wcpp-editor-base { display:block!important; width:auto!important; height:auto!important; max-width:100%!important; max-height:calc(62dvh - 130px)!important; object-fit:contain!important; margin:0 auto!important; }
  #wcpp-zoom-modal .wcpp-editor-panel { grid-row:3!important; order:initial!important; width:100%!important; height:38dvh!important; min-height:230px!important; max-height:38dvh!important; padding:10px 12px max(16px, env(safe-area-inset-bottom))!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; background:#fff!important; border:0!important; border-top:1px solid #e8ebef!important; border-radius:18px 18px 0 0!important; box-shadow:0 -12px 32px rgba(15,23,42,.08)!important; }
  #wcpp-zoom-modal .wcpp-editor-panel h3{display:none!important}
  #wcpp-zoom-modal .wcpp-editor-section{margin:0 0 9px!important;border:1px solid #e8ebef!important;border-radius:14px!important;background:#fff!important;overflow:hidden!important}
  #wcpp-zoom-modal .wcpp-editor-section summary{padding:12px 14px!important;font-size:13px!important;font-weight:650!important;cursor:pointer!important;list-style:none!important}
  #wcpp-zoom-modal .wcpp-editor-section summary::-webkit-details-marker{display:none!important}
  #wcpp-zoom-modal .wcpp-editor-section summary:after{content:'+';float:right;font-weight:700}
  #wcpp-zoom-modal .wcpp-editor-section[open] summary:after{content:'−'}
  #wcpp-zoom-modal .wcpp-editor-section > label, #wcpp-zoom-modal .wcpp-editor-section .wcpp-image-options, #wcpp-zoom-modal .wcpp-editor-section .wcpp-editor-templates, #wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-list, #wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-actions{margin:0 12px 12px!important}
  #wcpp-zoom-modal .wcpp-editor-hint{display:none!important}
  #wcpp-zoom-modal .wcpp-apply-design{position:sticky!important;bottom:0!important;z-index:10!important;width:100%!important;min-height:48px!important;margin:10px 0 0!important;border-radius:999px!important;background:#111827!important;color:#fff!important;box-shadow:0 -10px 24px rgba(255,255,255,.96),0 8px 18px rgba(15,23,42,.16)!important}
  #wcpp-zoom-modal .wcpp-zoom-close{position:fixed!important;top:max(12px, env(safe-area-inset-top))!important;right:12px!important;z-index:100!important;width:46px!important;height:46px!important;border-radius:50%!important;background:#fff!important;border:1px solid #e8ebef!important;box-shadow:0 8px 24px rgba(15,23,42,.10)!important}
}
@media (max-width:560px){
  #wcpp-zoom-modal .wcpp-spread-layout{grid-template-rows:70px minmax(0,1fr) 42dvh!important}
  #wcpp-zoom-modal .wcpp-editor-sidebar{height:70px!important;min-height:70px!important;max-height:70px!important;padding-right:66px!important}
  #wcpp-zoom-modal .wcpp-sidebar-tool{flex-basis:78px!important;width:78px!important;min-width:78px!important}
  #wcpp-zoom-modal .wcpp-editor-panel{height:42dvh!important;max-height:42dvh!important;min-height:245px!important}
  #wcpp-zoom-modal .wcpp-editor-base{max-height:calc(58dvh - 126px)!important}
}

/* v1.14 mobile redesign: overzichtelijke editor op mobiel
   Structuur mobiel:
   1. compacte toolbalk bovenin
   2. grote, gecentreerde productpreview
   3. scrollbare instellingen als bottom sheet
*/
@media (max-width: 980px) {
  html.wcpp-editor-open,
  body.wcpp-editor-open {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    inset: 0 !important;
  }

  #wcpp-zoom-modal,
  #wcpp-zoom-modal * {
    box-sizing: border-box !important;
  }

  #wcpp-zoom-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #f4f5f7 !important;
    z-index: 999999 !important;
  }

  #wcpp-zoom-modal .wcpp-zoom-backdrop {
    display: none !important;
  }

  #wcpp-zoom-modal .wcpp-editor-dialog {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #f4f5f7 !important;
  }

  #wcpp-zoom-modal .wcpp-spread-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 62px minmax(0, 1fr) minmax(255px, 43dvh) !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #f4f5f7 !important;
  }

  /* Bovenste menu: compact, horizontaal, niet dominant */
  #wcpp-zoom-modal .wcpp-editor-sidebar {
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 7px 62px 7px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03) !important;
  }
  #wcpp-zoom-modal .wcpp-editor-sidebar::-webkit-scrollbar { display: none !important; }

  #wcpp-zoom-modal .wcpp-sidebar-tool {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 74px !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 6px 9px !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04) !important;
    color: #111827 !important;
  }
  #wcpp-zoom-modal .wcpp-sidebar-tool span {
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  #wcpp-zoom-modal .wcpp-sidebar-tool em {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin-top: 3px !important;
    max-width: 62px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #wcpp-zoom-modal .wcpp-zoom-close {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    z-index: 100 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .10) !important;
    color: #111827 !important;
  }

  /* Canvas: product altijd gecentreerd en passend. Geen groot leeg vlak. */
  #wcpp-zoom-modal .wcpp-editor-canvas {
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px 10px 8px !important;
    overflow: hidden !important;
    background: #f4f5f7 !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #wcpp-zoom-modal .wcpp-editor-topbar {
    flex: 0 0 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 0 0 7px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: transparent !important;
  }
  #wcpp-zoom-modal .wcpp-editor-topbar::-webkit-scrollbar { display: none !important; }

  #wcpp-zoom-modal .wcpp-editor-topbar .button,
  #wcpp-zoom-modal .wcpp-add-image-label.button,
  #wcpp-zoom-modal .wcpp-view-zoom-label {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    height: 33px !important;
    min-height: 33px !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background: #fff !important;
    border: 1px solid #dde3ea !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .04) !important;
  }
  #wcpp-zoom-modal .wcpp-view-zoom { width: 72px !important; }

  #wcpp-zoom-modal .wcpp-editor-stage {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid #e7ebf0 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04) !important;
  }

  #wcpp-zoom-modal .wcpp-editor-product {
    position: relative !important;
    display: block !important;
    width: min(76vw, 360px) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    background: transparent !important;
    transform: none !important;
  }

  #wcpp-zoom-modal .wcpp-editor-base {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(57dvh - 122px) !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 12px 18px rgba(15,23,42,.10)) !important;
  }

  #wcpp-zoom-modal .wcpp-editor-zone {
    border: 2px dashed #d946ef !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  #wcpp-zoom-modal .wcpp-editor-zone:before { content: none !important; display: none !important; }
  #wcpp-zoom-modal .wcpp-safe-margin { border-color: rgba(217,70,239,.45) !important; }

  /* Bottom sheet: alle opties logisch onder de afbeelding en zelfstandig scrollbaar */
  #wcpp-zoom-modal .wcpp-editor-panel {
    grid-row: 3 !important;
    width: 100% !important;
    height: 43dvh !important;
    min-height: 255px !important;
    max-height: 43dvh !important;
    padding: 10px 12px max(16px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -16px 38px rgba(15, 23, 42, .10) !important;
    display: block !important;
  }

  #wcpp-zoom-modal .wcpp-editor-panel h3 { display: none !important; }
  #wcpp-zoom-modal .wcpp-editor-section {
    margin: 0 0 9px !important;
    border: 1px solid #e7ebf0 !important;
    border-radius: 15px !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  #wcpp-zoom-modal .wcpp-editor-section summary {
    padding: 12px 14px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    color: #101828 !important;
    cursor: pointer !important;
    list-style: none !important;
  }
  #wcpp-zoom-modal .wcpp-editor-section summary::-webkit-details-marker { display: none !important; }
  #wcpp-zoom-modal .wcpp-editor-section summary:after { content: '+'; float: right; font-weight: 700; color: #667085; }
  #wcpp-zoom-modal .wcpp-editor-section[open] summary:after { content: '−'; }

  #wcpp-zoom-modal .wcpp-editor-section > label,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-image-options,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-editor-templates,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-list,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-actions {
    margin: 0 12px 12px !important;
  }

  #wcpp-zoom-modal .wcpp-editor-panel textarea,
  #wcpp-zoom-modal .wcpp-editor-panel select,
  #wcpp-zoom-modal .wcpp-editor-panel input[type=color] {
    min-height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid #d9e0ea !important;
  }
  #wcpp-zoom-modal textarea.wcpp-editor-text { min-height: 58px !important; }

  #wcpp-zoom-modal .wcpp-editor-hint { display: none !important; }
  #wcpp-zoom-modal .wcpp-apply-design {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 10px 0 0 !important;
    border-radius: 999px !important;
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 -10px 24px rgba(255,255,255,.96), 0 8px 18px rgba(15,23,42,.16) !important;
  }
}

@media (max-width: 560px) {
  #wcpp-zoom-modal .wcpp-spread-layout {
    grid-template-rows: 60px minmax(0, 1fr) minmax(270px, 45dvh) !important;
  }
  #wcpp-zoom-modal .wcpp-editor-sidebar {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }
  #wcpp-zoom-modal .wcpp-sidebar-tool {
    min-width: 68px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
  #wcpp-zoom-modal .wcpp-sidebar-tool em { max-width: 56px !important; font-size: 9.8px !important; }
  #wcpp-zoom-modal .wcpp-editor-panel {
    height: 45dvh !important;
    max-height: 45dvh !important;
    min-height: 270px !important;
  }
  #wcpp-zoom-modal .wcpp-editor-product {
    width: min(82vw, 330px) !important;
  }
  #wcpp-zoom-modal .wcpp-editor-base {
    max-height: calc(55dvh - 118px) !important;
  }
}

/* v1.15 mobile UX redesign + clean print area
   Doel: desktop behouden, mobiel als duidelijke editor: tools boven, shirt gecentreerd, instellingen als bottom-sheet. */
#wcpp-zoom-modal .wcpp-editor-zone,
#wcpp-zoom-modal .wcpp-preview .wcpp-mask {
  border: 2px dashed #d946ef !important;
  background: transparent !important;
  box-shadow: none !important;
}
#wcpp-zoom-modal .wcpp-editor-zone:before,
#wcpp-zoom-modal .wcpp-mask-label,
#wcpp-zoom-modal .wcpp-safe-margin {
  display: none !important;
  content: none !important;
}
#wcpp-zoom-modal .wcpp-editor-object-layer {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#wcpp-zoom-modal .wcpp-editor-object,
#wcpp-zoom-modal .wcpp-editor-object:hover,
#wcpp-zoom-modal .wcpp-editor-object.is-active,
#wcpp-zoom-modal .wcpp-editor-object img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
#wcpp-zoom-modal .wcpp-editor-object.is-active .wcpp-editor-resize {
  display: block !important;
}
#wcpp-zoom-modal .wcpp-editor-resize {
  width: 18px !important;
  height: 18px !important;
  right: -9px !important;
  bottom: -9px !important;
  border-radius: 999px !important;
  background: #111827 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.25) !important;
}

@media (min-width: 901px) {
  #wcpp-zoom-modal .wcpp-editor-dialog {
    width: min(96vw, 1220px) !important;
    max-height: 92vh !important;
    border-radius: 22px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f5f6f8 !important;
  }
  #wcpp-zoom-modal .wcpp-spread-layout {
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr) 330px !important;
    gap: 0 !important;
    height: 92vh !important;
  }
  #wcpp-zoom-modal .wcpp-editor-sidebar {
    background: #fff !important;
    border-right: 1px solid #eaecf0 !important;
    padding: 16px 10px !important;
    gap: 12px !important;
  }
  #wcpp-zoom-modal .wcpp-editor-canvas {
    background: #f4f5f7 !important;
    padding: 18px !important;
    overflow: hidden !important;
  }
  #wcpp-zoom-modal .wcpp-editor-stage {
    height: calc(92vh - 86px) !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #fff !important;
    border-radius: 22px !important;
    border: 1px solid #eaecf0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #wcpp-zoom-modal .wcpp-editor-product {
    width: fit-content !important;
    max-width: 100% !important;
    margin: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }
  #wcpp-zoom-modal .wcpp-editor-base {
    width: auto !important;
    max-width: 100% !important;
    max-height: calc(92vh - 130px) !important;
    object-fit: contain !important;
  }
  #wcpp-zoom-modal .wcpp-editor-panel {
    border-radius: 0 !important;
    border: 0 !important;
    border-left: 1px solid #eaecf0 !important;
    height: 92vh !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 22px 18px !important;
    background: #fff !important;
  }
}

@media (max-width: 900px) {
  html.wcpp-editor-open,
  body.wcpp-editor-open {
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: none !important;
  }

  #wcpp-zoom-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
  }
  #wcpp-zoom-modal .wcpp-zoom-backdrop { display: none !important; }
  #wcpp-zoom-modal .wcpp-zoom-dialog {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
  }

  #wcpp-zoom-modal .wcpp-spread-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 68px minmax(0, 1fr) 34dvh !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    gap: 0 !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
  }

  /* Bovenbalk: korte acties, horizontaal scrollbaar */
  #wcpp-zoom-modal .wcpp-editor-sidebar {
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100vw !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 9px 62px 9px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.04) !important;
  }
  #wcpp-zoom-modal .wcpp-editor-sidebar::-webkit-scrollbar { display: none !important; }
  #wcpp-zoom-modal .wcpp-sidebar-tool {
    flex: 0 0 auto !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 50px !important;
    min-height: 50px !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.04) !important;
    padding: 5px !important;
  }
  #wcpp-zoom-modal .wcpp-sidebar-tool span {
    font-size: 18px !important;
    line-height: 1 !important;
  }
  #wcpp-zoom-modal .wcpp-sidebar-tool em {
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1.05 !important;
    margin-top: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #wcpp-zoom-modal .wcpp-zoom-close {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    z-index: 50 !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: #111827 !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 26px !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.22) !important;
  }

  /* Midden: canvas altijd passend, product gecentreerd zonder grote witte vlakken */
  #wcpp-zoom-modal .wcpp-editor-canvas {
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    padding: 8px 10px 10px !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
  }
  #wcpp-zoom-modal .wcpp-editor-topbar {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 7px 0 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: transparent !important;
  }
  #wcpp-zoom-modal .wcpp-editor-topbar::-webkit-scrollbar { display: none !important; }
  #wcpp-zoom-modal .wcpp-editor-topbar .button,
  #wcpp-zoom-modal .wcpp-add-image-label.button,
  #wcpp-zoom-modal .wcpp-view-zoom-label {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.05) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: #111827 !important;
    white-space: nowrap !important;
  }
  #wcpp-zoom-modal .wcpp-view-zoom-label { display: none !important; }

  #wcpp-zoom-modal .wcpp-editor-stage {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 8px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #wcpp-zoom-modal .wcpp-editor-product {
    position: relative !important;
    display: block !important;
    width: fit-content !important;
    max-width: 92vw !important;
    height: fit-content !important;
    max-height: 100% !important;
    margin: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  #wcpp-zoom-modal .wcpp-editor-base {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 92vw !important;
    max-height: calc(66dvh - 126px) !important;
    object-fit: contain !important;
    margin: auto !important;
    filter: drop-shadow(0 12px 18px rgba(15,23,42,.09)) !important;
  }

  /* Onder: bottom sheet, duidelijk en compact. Alle functies blijven bereikbaar. */
  #wcpp-zoom-modal .wcpp-editor-panel {
    grid-row: 3 !important;
    display: block !important;
    width: 100vw !important;
    height: 34dvh !important;
    min-height: 230px !important;
    max-height: 34dvh !important;
    padding: 10px 12px max(16px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -18px 40px rgba(15,23,42,.14) !important;
  }
  #wcpp-zoom-modal .wcpp-editor-panel h3 {
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    color: #101828 !important;
  }
  #wcpp-zoom-modal .wcpp-editor-section {
    margin: 0 0 8px !important;
    border: 1px solid #e6ebf1 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  #wcpp-zoom-modal .wcpp-editor-section summary {
    padding: 11px 13px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    color: #111827 !important;
    list-style: none !important;
    cursor: pointer !important;
  }
  #wcpp-zoom-modal .wcpp-editor-section summary::-webkit-details-marker { display: none !important; }
  #wcpp-zoom-modal .wcpp-editor-section summary:after {
    content: '+' !important;
    float: right !important;
    color: #64748b !important;
    font-weight: 800 !important;
  }
  #wcpp-zoom-modal .wcpp-editor-section[open] summary:after { content: '−' !important; }
  #wcpp-zoom-modal .wcpp-editor-section > label,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-image-options,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-editor-templates,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-actions,
  #wcpp-zoom-modal .wcpp-editor-section .wcpp-layer-list {
    margin: 0 12px 12px !important;
  }
  #wcpp-zoom-modal .wcpp-editor-panel textarea,
  #wcpp-zoom-modal .wcpp-editor-panel select,
  #wcpp-zoom-modal .wcpp-editor-panel input[type=color],
  #wcpp-zoom-modal .wcpp-editor-panel input[type=range] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    border: 1px solid #d8dee8 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
  #wcpp-zoom-modal textarea.wcpp-editor-text { min-height: 58px !important; }
  #wcpp-zoom-modal .wcpp-editor-templates,
  #wcpp-zoom-modal .wcpp-layer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #wcpp-zoom-modal .wcpp-editor-templates button,
  #wcpp-zoom-modal .wcpp-layer-actions .button,
  #wcpp-zoom-modal .wcpp-image-reset {
    min-height: 38px !important;
    border-radius: 12px !important;
    border: 1px solid #d8dee8 !important;
    background: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  #wcpp-zoom-modal .wcpp-editor-hint { display: none !important; }
  #wcpp-zoom-modal .wcpp-apply-design {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 10px 0 0 !important;
    border-radius: 999px !important;
    background: #111827 !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 -10px 22px rgba(255,255,255,.96), 0 8px 20px rgba(15,23,42,.16) !important;
  }
}

@media (max-width: 420px) {
  #wcpp-zoom-modal .wcpp-spread-layout {
    grid-template-rows: 64px minmax(0, 1fr) 36dvh !important;
  }
  #wcpp-zoom-modal .wcpp-editor-sidebar {
    height: 64px !important;
    min-height: 64px !important;
  }
  #wcpp-zoom-modal .wcpp-sidebar-tool {
    width: 60px !important;
    min-width: 60px !important;
    height: 47px !important;
    min-height: 47px !important;
  }
  #wcpp-zoom-modal .wcpp-editor-panel {
    height: 36dvh !important;
    max-height: 36dvh !important;
    min-height: 238px !important;
  }
  #wcpp-zoom-modal .wcpp-editor-base {
    max-height: calc(64dvh - 122px) !important;
  }
}