.custom-product-trigger{
  width:100%;
  background:var(--cp-trigger-bg,#2d88c9);
  color:var(--cp-trigger-text,#fff);
  border:0;
  padding:var(--cp-btn-padding,12px 14px);
  border-radius:var(--cp-btn-radius,6px);
  font-weight:600;
  font-family:var(--cp-font-family,inherit);
  font-size:var(--cp-btn-font-size,inherit);
  cursor:pointer
}
.custom-product-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none
}
.custom-product-modal.is-open{
  display:block
}
.custom-product-modal [hidden]{
  display:none !important
}
.custom-product-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75)
}
.custom-product-modal__dialog{
  position:relative;
  margin:40px auto;
  width:min(1200px,calc(100vw - 40px));
  background:var(--cp-modal-bg,#2f2f2f);
  color:var(--cp-modal-text,#fff);
  border-radius:10px;
  overflow:hidden
}
.custom-product-modal__close{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  background:var(--cp-close-bg,#fff);
  color:var(--cp-close-text,#111);
  border:0;
  padding:8px 10px;
  border-radius:6px;
  font-family:var(--cp-font-family,inherit);
  cursor:pointer
}
.custom-product-modal__content{
  display:grid;
  grid-template-columns:1fr 360px;
  min-height:720px
}
.custom-product-canvas{
  padding:56px 24px 24px;
  background:var(--cp-canvas-bg,#5a5a5a)
}
.custom-product-side{
  padding:56px 20px 20px;
  background:var(--cp-side-bg,#1f1f1f);
  color:var(--cp-side-text,var(--cp-modal-text,#fff))
}
.custom-product-side h3{
  color:var(--cp-side-heading,var(--cp-modal-text,#fff))
}
.custom-product-drop{
  border:2px dashed rgba(255,255,255,.25);
  border-radius:10px;
  height:520px;
  display:flex;
  align-items:center;
  justify-content:center
}
.custom-product-drop__inner{
  text-align:center;
  width:min(520px,100%)
}
.custom-product-drop__title{
  font-weight:700;
  letter-spacing:.4px;
  margin:12px 0
}
.custom-product-choose{
  width:min(420px,100%);
  background:var(--cp-primary-bg,#2d88c9);
  border:0;
  padding:var(--cp-btn-padding,14px 16px);
  color:var(--cp-primary-text,#fff);
  font-weight:700;
  border-radius:var(--cp-btn-radius,6px);
  font-family:var(--cp-font-family,inherit);
  font-size:var(--cp-btn-font-size,inherit);
  cursor:pointer
}
.custom-product-preview{
  border:2px dashed rgba(255,255,255,.25);
  border-radius:10px;
  height:520px;
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:column;
  background:rgba(0,0,0,.08)
}
.custom-product-preview__header{
  padding:12px 12px 10px;
  background:rgba(0,0,0,.18)
}
.custom-product-hint{
  margin-top:8px;
  font-size:13px;
  opacity:.9;
  text-align:center
}
.custom-product-dims{
  margin-top:6px;
  font-weight:600;
  text-align:center
}
.custom-product-zoom-row{
  margin-top:10px;
  display:flex;
  justify-content:center
}
.custom-product-zoom{
  width:min(360px,100%)
}
.custom-product-preview__stage{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px;
  overflow:visible !important
}
.custom-product-cropframe{
  height:100%;
  width:auto;
  max-height:100%;
  max-width:100%;
  aspect-ratio:18.9 / 26.6;
  border:2px solid rgba(255,255,255,.35);
  border-radius:8px;
  position:relative;
  overflow:hidden;
  background:rgba(0,0,0,.12);
  touch-action:none;
  box-sizing:border-box
}
.custom-product-preview[data-mode="landscape"] .custom-product-cropframe{
  aspect-ratio:26.6 / 18.9
}
.custom-product-handle{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  z-index:4
}
.custom-product-handle--tl{left:6px;top:6px}
.custom-product-handle--tr{right:6px;top:6px}
.custom-product-handle--bl{left:6px;bottom:6px}
.custom-product-handle--br{right:6px;bottom:6px}
.custom-product-preview__img{
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0;
  will-change:transform
}
.custom-product-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center
}
.custom-product-mode,.custom-product-flip{
  background:var(--cp-toolbar-btn-bg,#3a3a3a);
  border:1px solid var(--cp-toolbar-btn-border,rgba(255,255,255,.15));
  color:var(--cp-toolbar-btn-text,#fff);
  padding:8px 12px;
  border-radius:6px;
  font-family:var(--cp-font-family,inherit);
  cursor:pointer
}
.custom-product-mode.is-active{
  background:var(--cp-toolbar-active-bg,#fff);
  color:var(--cp-toolbar-active-text,#111)
}
.custom-product-actions{
  margin-top:18px;
  display:grid;
  gap:10px
}
.custom-product-replace{
  background:var(--cp-danger-bg,#c62828);
  border:0;
  color:var(--cp-danger-text,#fff);
  padding:var(--cp-btn-padding,12px 14px);
  border-radius:var(--cp-btn-radius,6px);
  cursor:pointer;
  font-weight:700;
  font-family:var(--cp-font-family,inherit);
  font-size:var(--cp-btn-font-size,inherit)
}
.custom-product-upload{
  background:var(--cp-primary-bg,#2d88c9);
  border:0;
  color:var(--cp-primary-text,#fff);
  padding:var(--cp-btn-padding,12px 14px);
  border-radius:var(--cp-btn-radius,6px);
  cursor:pointer;
  font-weight:700;
  font-family:var(--cp-font-family,inherit);
  font-size:var(--cp-btn-font-size,inherit)
}
.custom-product-upload:disabled{
  opacity:.5;
  cursor:not-allowed
}
.custom-product-check{
  padding-left:18px;
  margin:10px 0;
  position:relative;
  opacity:.9
}
.custom-product-check::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#666
}
.custom-product-check.is-ok::before{
  background:#29b35a
}
.custom-product-check.is-bad::before{
  background:#d33
}
.custom-product-status{
  margin-top:12px;
  min-height:18px;
  font-size:13px;
  opacity:.9
}
body.wcps-custom-product-enabled .wcps-gallery-item:not(.wcps-frame-no-frame) .wcps-item-wrap img,
body.wcps-custom-product-enabled .wcps-gallery-nav-item:not(.wcps-frame-no-frame) .wcps-item-wrap img{
  transform:scale(var(--poster-scale-width), var(--poster-scale-height)) scaleX(var(--wcps-flip-x, 1)) scaleY(var(--wcps-flip-y, 1)) !important
}

@media (max-width: 1100px){
  .custom-product-modal__content{
    grid-template-columns:1fr 320px;
    min-height:660px
  }
  .custom-product-drop,
  .custom-product-preview{
    height:460px
  }
}

@media (max-width: 900px){
  .custom-product-modal__dialog{
    margin:12px auto;
    width:calc(100vw - 24px);
    max-height:calc(100vh - 24px);
    overflow:auto
  }
  .custom-product-modal__content{
    grid-template-columns:1fr;
    min-height:auto
  }
  .custom-product-canvas{
    padding:56px 14px 14px
  }
  .custom-product-side{
    padding:18px 14px 14px
  }
  .custom-product-drop,
  .custom-product-preview{
    height:420px
  }
}

@media (max-width: 520px){
  .custom-product-drop,
  .custom-product-preview{
    height:360px
  }
}