.hcp2{
  --hcp2-border:rgba(127,127,127,.28);
  --hcp2-soft:rgba(127,127,127,.06);
  --hcp2-soft-strong:rgba(127,127,127,.11);
  --hcp2-border:color-mix(in srgb,currentColor 18%,transparent);
  --hcp2-soft:color-mix(in srgb,currentColor 5%,transparent);
  --hcp2-soft-strong:color-mix(in srgb,currentColor 9%,transparent);
  --hcp2-danger:#c62828;
  --hcp2-warning:#f2aa00;
  --hcp2-preview-bg:#0A161D;
  --hcp2-theme-surface:Canvas;
  max-width:1100px;
  margin:24px auto;
  padding:0 12px 96px;
  font:inherit;
  color:inherit;
}
.hcp2 *{box-sizing:border-box}
.hcp2 [hidden]{display:none!important}
html.hcp2-modal-open{overflow:hidden}
.hcp2-panel{border:1px solid var(--hcp2-border);border-radius:18px;padding:18px;margin:16px 0;background:transparent;box-shadow:none;color:inherit}
.hcp2-intro{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hcp2-title{margin:0 0 5px;font-size:28px;line-height:1.15;color:inherit}
.hcp2-subtitle,.hcp2-section-head p{margin:0;opacity:.72;color:inherit}
.hcp2-summary{display:flex;gap:10px;flex-wrap:wrap;white-space:nowrap}
.hcp2-summary span{background:var(--hcp2-soft);border:1px solid var(--hcp2-border);border-radius:999px;padding:8px 12px;color:inherit}
.hcp2-section-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:16px}
.hcp2-section-head>div:first-child{display:flex;gap:12px;align-items:flex-start}
.hcp2-section-head h3{margin:0 0 4px;font-size:20px;color:inherit}
.hcp2-step{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--hcp2-border);background:var(--hcp2-soft-strong);color:inherit;font-weight:800}
.hcp2-btn,.hcp2-icon-btn,.hcp2-special-back,.hcp2-back-upload,.hcp2-dropzone,.hcp2-qty button,.hcp2-special-back-actions button,.hcp2-edit,.hcp2-warning{font:inherit;cursor:pointer}
.hcp2-btn{border-radius:12px;padding:10px 14px;font-weight:750}
.hcp2-btn:disabled{opacity:.4;cursor:not-allowed}
.hcp2-hidden-input{display:none!important}
.hcp2-dropzone{width:100%;min-height:150px;border:2px dashed var(--hcp2-border);border-radius:18px;background:var(--hcp2-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:inherit;transition:.15s ease}
.hcp2-dropzone:hover,.hcp2-dropzone.is-dragging{border-color:currentColor;background:var(--hcp2-soft-strong)}
.hcp2-dropzone:disabled{opacity:.55;cursor:wait}
.hcp2-upload-status{margin-top:10px;padding:9px 11px;border-radius:10px;background:var(--hcp2-soft);font-size:12px;line-height:1.4;color:inherit}
.hcp2-upload-status.is-success{border:1px solid rgba(30,130,76,.35)}
.hcp2-upload-status.is-error{border:1px solid color-mix(in srgb,var(--hcp2-danger) 45%,transparent);color:var(--hcp2-danger)}
.hcp2-drop-icon{font-size:28px;font-weight:300;line-height:1}
.hcp2-empty{text-align:center;padding:18px 0 2px;opacity:.55}
.hcp2-bulk-framing{margin-top:14px;padding:12px 13px;border:1px solid var(--hcp2-border);border-radius:14px;background:var(--hcp2-soft);display:flex;align-items:end;gap:14px;flex-wrap:wrap;color:inherit}
.hcp2-bulk-copy{display:flex;flex-direction:column;gap:2px;flex:1 1 250px}
.hcp2-bulk-framing .hcp2-bulk-copy{width:100%;flex:0 0 auto}
.hcp2-bulk-framing .hcp2-bulk-controls{width:100%}
.hcp2-bulk-copy>span{font-size:12px;opacity:.68}
.hcp2-bulk-copy>.hcp2-bulk-warning{color:var(--hcp2-danger);opacity:1;font-weight:800;margin-top:6px;line-height:1.35}
.hcp2-bulk-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap}
.hcp2-bulk-controls label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:750;opacity:.9;color:inherit}
.hcp2-bulk-controls select{min-height:40px;border-radius:10px;padding:8px 30px 8px 10px;font:inherit}
.hcp2-bulk-status{flex:1 1 100%;font-size:12px;opacity:.72;min-height:1em}
.hcp2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.hcp2-card{border:0;border-radius:0;overflow:visible;background:transparent;min-width:0;display:flex;flex-direction:column;gap:8px;color:inherit}
.hcp2-card-image-wrap,.hcp2-back-image-wrap{position:relative;aspect-ratio:63/88;background:var(--hcp2-preview-bg);overflow:hidden;cursor:grab;border:1px solid var(--hcp2-border)}
.hcp2-card-image-wrap{border-radius:9px}
.hcp2-card-image-wrap:active,.hcp2-back-image-wrap:active{cursor:grabbing}
.hcp2-card-image,.hcp2-default-back-preview img{position:absolute;display:block;max-width:none!important;object-fit:fill;user-select:none;-webkit-user-drag:none}
.hcp2-flip,.hcp2-edit,.hcp2-warning{position:absolute;z-index:4;display:grid;place-items:center;backdrop-filter:blur(5px)}
.hcp2-flip{top:9px;right:9px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.58);color:#fff;font-size:20px}
.hcp2-edit{right:9px;bottom:9px;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.58);color:#fff;font-size:17px}
.hcp2-warning{left:9px;top:9px;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--hcp2-warning);color:#111;font-size:18px;font-weight:950;line-height:1}
.hcp2-side-label{position:absolute;left:9px;bottom:9px;z-index:3;background:rgba(0,0,0,.58);color:#fff;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;backdrop-filter:blur(5px)}
.hcp2-card-body{padding:11px;border:1px solid var(--hcp2-border);border-radius:12px;background:transparent;color:inherit}
.hcp2-card-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.78;margin-bottom:9px}
.hcp2-card-controls{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hcp2-qty{display:grid;grid-template-columns:38px 42px 38px;border:1px solid var(--hcp2-border);border-radius:12px;overflow:hidden;height:40px}
.hcp2-qty button{border:0;background:var(--hcp2-soft);color:inherit;font-size:20px}
.hcp2-qty button:disabled{opacity:.32;cursor:not-allowed;background:var(--hcp2-soft)}
.hcp2-qty span{display:grid;place-items:center;font-weight:800;border-left:1px solid var(--hcp2-border);border-right:1px solid var(--hcp2-border)}
.hcp2-icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.hcp2-danger{color:var(--hcp2-danger)}
.hcp2-special-back{width:100%;margin-top:10px;border:1px dashed var(--hcp2-border);border-radius:11px;background:var(--hcp2-soft);padding:9px;font-weight:700}
.hcp2-special-back-actions{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px}
.hcp2-special-back-actions span{margin-right:auto;font-weight:700}
.hcp2-special-back-actions button{border:0;background:none;padding:4px;font-weight:750}
.hcp2-back-builder{max-width:330px}
.hcp2-back-bleed{max-width:720px;margin-top:14px;padding:12px 13px;border:1px solid var(--hcp2-border);border-radius:14px;background:var(--hcp2-soft);display:flex;align-items:end;gap:14px;flex-wrap:wrap;color:inherit}
.hcp2-back-upload{width:100%;aspect-ratio:63/88;border:2px dashed var(--hcp2-border);border-radius:18px;background:var(--hcp2-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:inherit}
.hcp2-default-back-preview{border:0;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:8px}
.hcp2-back-image-wrap{border-radius:16px}
.hcp2-back-actions{padding:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--hcp2-border);border-radius:12px;background:transparent;color:inherit}
.hcp2-back-actions>span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 100%}
.hcp2-review{position:sticky;bottom:10px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;z-index:20;box-shadow:0 8px 35px rgba(0,0,0,.16);background:var(--hcp2-theme-surface);color:inherit}
.hcp2-review-copy,.hcp2-review-price{display:flex;flex-direction:column;gap:2px;min-width:0}
.hcp2-review-copy span,.hcp2-review-price span,.hcp2-review-price small{font-size:12px;opacity:.68}
.hcp2-review-copy strong{font-size:17px}
.hcp2-review-price{text-align:right;min-width:135px}
.hcp2-review-price strong{font-size:22px;line-height:1.05;font-variant-numeric:tabular-nums}
.hcp2-review-price small{font-size:11px}

/* Crop / framing editor */
.hcp2-modal{position:fixed;inset:0;z-index:999999;background:rgba(3,10,14,.72);display:flex;align-items:center;justify-content:center;padding:18px;color:inherit}
.hcp2-modal-card{width:min(760px,100%);max-height:calc(100dvh - 36px);overflow:auto;background:var(--hcp2-theme-surface);color:inherit;border-radius:18px;border:1px solid var(--hcp2-border);box-shadow:0 24px 80px rgba(0,0,0,.38)}
.hcp2-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--hcp2-border)}
.hcp2-modal-head h3{margin:0;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.hcp2-modal-close{border-radius:10px;width:38px;height:38px;font-size:20px;cursor:pointer;flex:0 0 auto}
.hcp2-crop-body{padding:16px}
.hcp2-crop-help{text-align:center;margin:0 0 12px;opacity:.72;font-size:13px}
.hcp2-crop-stage{position:relative;width:min(430px,88vw);aspect-ratio:72/98;margin:0 auto;overflow:hidden;border-radius:16px;background:repeating-conic-gradient(#dfe4e7 0 25%,#f4f6f7 0 50%) 50% / 20px 20px;touch-action:none;cursor:grab;box-shadow:inset 0 0 0 1px rgba(10,22,29,.16)}
.hcp2-crop-stage:active{cursor:grabbing}
.hcp2-crop-host{position:absolute;left:50%;top:50%;width:82%;aspect-ratio:63/88;transform:translate(-50%,-50%);overflow:visible}
.hcp2-crop-host img{position:absolute;max-width:none!important;object-fit:fill;user-select:none;pointer-events:none;-webkit-user-drag:none}
.hcp2-trim-guide{position:absolute;inset:0;z-index:3;border:2px dashed rgba(255,255,255,.96);border-radius:3.968253968% / 2.840909091%;box-shadow:0 0 0 999px rgba(0,0,0,.20),0 0 0 1px rgba(0,0,0,.42);pointer-events:none}
.hcp2-trim-guide::after{content:"63 × 88 mm";position:absolute;left:50%;top:10px;transform:translateX(-50%);padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.58);color:#fff;font-size:11px;font-weight:750;white-space:nowrap}
.hcp2-crop-status{display:flex;justify-content:center;align-items:center;gap:8px;margin:12px 0 2px;min-height:28px}
.hcp2-dpi-pill{border:1px solid var(--hcp2-border);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800}
.hcp2-dpi-warning{display:inline-flex;align-items:center;gap:6px;color:#b97800;font-size:12px;font-weight:750}
.hcp2-dpi-warning::before{content:"!";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--hcp2-warning);color:#111;font-weight:950}
.hcp2-zoom-row{display:grid;grid-template-columns:42px minmax(120px,1fr) 42px 64px;align-items:center;gap:8px;margin:14px auto 0;max-width:520px}
.hcp2-zoom-row button{height:40px;border-radius:10px;font-size:20px;cursor:pointer}
.hcp2-zoom-row button:disabled{opacity:.35;cursor:not-allowed}
.hcp2-zoom-row input{width:100%}
.hcp2-zoom-label{text-align:right;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.hcp2-crop-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--hcp2-border)}
.hcp2-crop-actions-right{display:flex;gap:10px;margin-left:auto}
.hcp2-confirm-text{padding:4px 2px 2px;line-height:1.5}
.hcp2-confirm-text p{margin:0 0 12px}
.hcp2-confirm-warning{margin-top:14px;padding:12px 13px;border-radius:12px;background:rgba(242,170,0,.12);border:1px solid rgba(211,139,0,.4);color:inherit}
.hcp2-confirm-warning p:last-child{margin-bottom:0}
.hcp2-confirm-warning strong{color:inherit}

@media(max-width:700px){
  .hcp2{padding-left:8px;padding-right:8px}
  .hcp2-panel{padding:14px;border-radius:15px}
  .hcp2-intro,.hcp2-section-head{align-items:stretch;flex-direction:column}
  .hcp2-title{font-size:24px}
  .hcp2-summary{white-space:normal}
  .hcp2-section-head>.hcp2-btn{width:100%}
  .hcp2-bulk-framing{align-items:stretch}
  .hcp2-bulk-controls{width:100%}
  .hcp2-bulk-controls label:first-child{flex:1 1 180px}
  .hcp2-bulk-controls select{width:100%}
  .hcp2-bulk-controls .hcp2-btn{flex:1 1 100%}
  .hcp2-grid{grid-template-columns:1fr;gap:12px}
  .hcp2-card-body{padding:8px}
  .hcp2-qty{grid-template-columns:34px 36px 34px;height:38px}
  .hcp2-icon-btn{width:38px;height:38px}
  .hcp2-back-builder{max-width:240px;margin:auto}
  .hcp2-back-bleed{align-items:stretch}
  .hcp2-back-bleed .hcp2-bulk-controls{width:100%}
  .hcp2-back-bleed .hcp2-bulk-controls label:first-child{flex:1 1 180px}
  .hcp2-back-bleed .hcp2-bulk-controls .hcp2-btn{flex:1 1 100%}
  .hcp2-review{bottom:6px;padding:12px;grid-template-columns:minmax(0,1fr) auto}
  .hcp2-review-price{grid-column:2;grid-row:1;text-align:right;min-width:110px}
  .hcp2-review>.hcp2-btn{grid-column:1 / -1;width:100%}
  .hcp2-modal{padding:8px;align-items:stretch}
  .hcp2-modal-card{max-height:calc(100dvh - 16px);margin:auto}
  .hcp2-crop-body{padding:12px}
  .hcp2-crop-stage{width:min(390px,94vw)}
  .hcp2-crop-help{font-size:12px}
  .hcp2-zoom-row{grid-template-columns:40px minmax(90px,1fr) 40px 58px}
  .hcp2-crop-actions{flex-direction:column}
  .hcp2-crop-actions-right{width:100%;margin:0}
  .hcp2-crop-actions .hcp2-btn{flex:1}
}
@media(max-width:480px){
  .hcp2-review{grid-template-columns:1fr}
  .hcp2-review-price{grid-column:1;grid-row:auto;text-align:left;min-width:0}
  .hcp2-review>.hcp2-btn{grid-column:1}
}
@media(max-width:390px){
  .hcp2-grid{gap:7px}
  .hcp2-card-name{font-size:11px}
  .hcp2-qty{grid-template-columns:31px 32px 31px}
  .hcp2-flip{width:32px;height:32px;top:7px;right:7px}
  .hcp2-edit{width:30px;height:30px;right:7px;bottom:7px}
  .hcp2-warning{width:27px;height:27px;left:7px;top:7px}
}