/* Picture boxes (js/dropzone.js) and the photo grid with delete buttons */
.dz{position:relative;border:2px dashed #9FB3CC;border-radius:14px;padding:16px;text-align:center;cursor:pointer;background:#F7FAFD;transition:border-color .15s,background .15s}
.dz:hover,.dz:focus-visible{border-color:#2563EB;outline:none}
.dz.over{border-color:#F5A623;background:#FFF8E6}
.dz-msg b{display:block;font-size:15px}
.dz-msg span{display:block;color:#6B7C93;font-size:13px;margin-top:2px}
.dz-msg kbd{background:#fff;border:1px solid #C3D2E5;border-bottom-width:2px;border-radius:5px;padding:0 5px;font:inherit;font-size:12px}
.dz .dz-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:50%;bottom:0}
.dz-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.dz-list:empty{display:none}
.dz-item{position:relative;width:86px;text-align:center}
.dz-item img{width:86px;height:86px;object-fit:cover;border-radius:10px;display:block;border:1px solid #D3DEEC}
.dz-item small{display:block;color:#6B7C93;font-size:11px;margin-top:2px}
.dz-x{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;border:0;background:#E5484D;color:#fff;font-size:16px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* the photos already on a product, each with a delete button */
.ph-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.ph-item{position:relative;width:110px}
.ph-item img{width:110px;height:110px;object-fit:cover;border-radius:12px;display:block;border:1px solid #D3DEEC}
.ph-item .ph-del{position:absolute;top:-8px;right:-8px;margin:0}
.ph-item .ph-del button{width:28px;height:28px;border-radius:50%;border:0;background:#E5484D;color:#fff;font-size:15px;line-height:1;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.ph-item .ph-cover{position:absolute;left:6px;bottom:6px;background:rgba(11,31,58,.75);color:#fff;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700}
.dz-note{margin:8px 0 0;font-weight:600;font-size:14px}