:root{
  --ppp-border: rgba(0,0,0,.15);
  --ppp-border-strong: rgba(0,0,0,.35);
  --ppp-bg: #fff;
  --ppp-soft: rgba(0,0,0,.04);
  --ppp-radius: 14px;
  --ppp-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.ppp-wrap{max-width:1100px;margin:0 auto;padding:18px;}
.ppp-uploader{display:grid;gap:14px;}
.ppp-dropzone{
  position:relative;
  border:2px dashed var(--ppp-border-strong);
  background:linear-gradient(0deg,var(--ppp-soft),transparent);
  border-radius:var(--ppp-radius);
  padding:26px;
  cursor:pointer;
  box-shadow: var(--ppp-shadow);
  outline:none;
}
.ppp-dropzone.is-drag{border-color:rgba(0,0,0,.6); transform: scale(1.01);}
.ppp-file{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.ppp-dropzone-inner{display:grid;gap:6px;place-items:center;text-align:center;pointer-events:none;}
.ppp-title{font-size:22px;font-weight:800;}
.ppp-sub{font-size:16px;opacity:.9;}
.ppp-hint{font-size:14px;opacity:.8;}
.ppp-status{padding:10px 2px;min-height:26px;font-size:30px;font-weight:600;}
.ppp-retry{
  border:1px solid var(--ppp-border-strong);
  background:linear-gradient(180deg,#fff,#f7f7f7);
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  margin-bottom:6px;
  width:max-content;
}
.ppp-retry:hover{background:#f1f1f1;}
.ppp-wrap.ppp-has-image .ppp-dropzone{display:none;}
.ppp-wrap.ppp-has-image .ppp-cropper{display:none;}
.ppp-status.is-busy{opacity:.8;}
.ppp-status.is-error{color:#b00020;font-weight:600;}
.ppp-status.is-ok{color:#0b6b2f;font-weight:600;}

.ppp-preview{
  background:var(--ppp-bg);
  border-radius:var(--ppp-radius);
  box-shadow: var(--ppp-shadow);
  padding:14px;
}
.ppp-preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.ppp-preview-title{font-weight:800;font-size:16px;}
.ppp-clear{
  border:1px solid var(--ppp-border);
  background:transparent;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
}
.ppp-clear:hover{background:var(--ppp-soft);}
.ppp-preview-stage{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--ppp-border);
  background:#fff;
}
.ppp-preview-img{
  display:block;
  width:100%;
  height:auto;
}
.ppp-grid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.ppp-grid-line{stroke:rgba(0,0,0,.55);stroke-width:0.3;vector-effect:non-scaling-stroke;}
.ppp-grid-border{stroke:rgba(0,0,0,.7);stroke-width:0.6;vector-effect:non-scaling-stroke;}
.ppp-wrap.ppp-uploading .ppp-dropzone{display:none;}
.ppp-progress{
  margin-top:10px;
  background:var(--ppp-soft);
  border:1px solid var(--ppp-border);
  border-radius:10px;
  overflow:hidden;
  position:relative;
  height:16px;
}
.ppp-progress-bar{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0%;
  background:linear-gradient(90deg,#5cb7ff,#0074d9);
  transition:width .15s ease;
}
.ppp-progress-text{
  margin-top:6px;
  font-size:32px;
  font-weight:600;
}

.ppp-products{margin-top:8px;}
.ppp-products-title{font-weight:900;font-size:18px;margin:10px 0;}
.ppp-product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  gap:14px;
}
.ppp-product-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--ppp-bg);
  border-radius:var(--ppp-radius);
  border:1px solid var(--ppp-border);
  overflow:hidden;
  box-shadow: var(--ppp-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ppp-product-card:hover{transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.10);}
.ppp-product-name{font-weight:800;padding:14px 12px 0 12px;line-height:1.2;}
.ppp-product-price{padding:8px 12px 12px 12px;opacity:.85;font-size:14px;}
.ppp-empty{padding:10px 2px;opacity:.75;}

.ppp-cart-thumb{width:60px;height:auto;border-radius:10px;border:1px solid var(--ppp-border);}
.ppp-cart-name-thumb{vertical-align:middle;margin-right:8px;}
.ppp-cart-inline-preview{margin-top:6px;}
.ppp-cart-inline-block{margin-top:10px;}
.ppp-cart-inline-img{width:300px;height:auto;border-radius:10px;border:1px solid var(--ppp-border);}

/* Lightbox */
.ppp-lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.ppp-lightbox-overlay.is-active{
  opacity:1;
  pointer-events:auto;
}
.ppp-lightbox-content{
  max-width:90vw;
  max-height:90vh;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  border-radius:12px;
  overflow:hidden;
}
.ppp-lightbox-content img{
  display:block;
  width:100%;
  height:auto;
}
.ppp-lightbox-link{
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  text-decoration:none;
}
.ppp-lightbox-caption{
  font-size:12px;
  opacity:.7;
}

.ppp-product-stage{position:relative;}
.ppp-product-stage img{display:block;width:100%;height:auto;}
.ppp-grid-product{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.woocommerce-product-gallery__trigger{display:none!important;}

/* Cropper */
.ppp-cropper{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--ppp-border);
  border-radius:var(--ppp-radius);
  background:var(--ppp-bg);
  box-shadow: var(--ppp-shadow);
}
.ppp-crop-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.ppp-crop-title{font-weight:800;}
.ppp-crop-stage{position:relative;width:100%;max-width:760px;margin:0 auto;}
.ppp-crop-frame{
  position:relative;
  width:100%;
  background:rgba(0,0,0,.04);
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--ppp-border);
  touch-action:none;
}
.ppp-crop-img{
  position:absolute;
  top:0;left:0;
  width:auto;
  height:auto;
  will-change:transform;
  user-select:none;
  pointer-events:none;
}
.ppp-crop-select{
  position:absolute;
  inset:0;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 200vmax rgba(0,0,0,.45);
  cursor:move;
}
.ppp-crop-handle{
  position:absolute;
  right:-8px;
  bottom:-8px;
  width:16px;
  height:16px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--ppp-border-strong);
  border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  cursor:nwse-resize;
}
.ppp-crop-controls{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.ppp-zoom-label{display:flex;align-items:center;gap:8px;font-weight:600;}
.ppp-crop-zoom{min-width:160px;}
.ppp-crop-actions{display:flex;gap:8px;align-items:center;}
.ppp-crop-actions button{
  border:1px solid var(--ppp-border);
  background:transparent;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
}
.ppp-crop-actions .ppp-crop-apply{
  background:#0b6b2f;
  color:#fff;
  border-color:#0b6b2f;
}