/* Paper-texture viewer only. The product photo and its handwriting are never redrawn. */
.paper-texture-preview {
 box-sizing:border-box;
 width:min(1120px,calc(100vw - 32px));
 max-width:calc(100vw - 32px);
 max-height:calc(100vh - 32px);
 max-height:calc(100dvh - 32px);
 margin:auto;
 padding:18px 20px;
 overflow:hidden;
 border:1px solid #b9d0de;
 border-radius:6px;
 color:#173b55;
 background:#fff;
}
.paper-texture-preview::backdrop { background:rgba(15,35,49,.65); }
.paper-texture-head {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 margin-bottom:12px;
}
.paper-texture-title { margin:0; color:#173b55; font-size:20px; line-height:1.5; }
.paper-texture-preview button {
 box-sizing:border-box;
 min-height:36px;
 margin:0;
 padding:6px 12px;
 border:1px solid #b7cbd7;
 border-radius:3px;
 color:#173b55;
 background:#fff;
 font:inherit;
 font-size:13px;
 line-height:1.5;
 cursor:pointer;
 touch-action:manipulation;
}
.paper-texture-preview button:hover { background:#edf3f7; }
.paper-texture-preview button:focus-visible,
.paper-texture-stage:focus-visible { outline:3px solid #36769a; outline-offset:3px; }
.paper-texture-preview button:disabled { opacity:.45; cursor:default; }
.paper-texture-close { flex:none; white-space:nowrap; }
.paper-texture-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.paper-texture-toolbar .paper-texture-zoom { width:38px; padding-inline:6px; font-size:20px; line-height:1; }
.paper-texture-scale { min-width:57px; color:#173b55; font-size:13px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.paper-texture-help { margin:0 0 10px; color:#586b78; font-size:12px; line-height:1.6; }
.paper-texture-stage {
 position:relative;
 box-sizing:border-box;
 width:100%;
 height:min(62vh,660px);
 height:min(62dvh,660px);
 min-height:150px;
 overflow:hidden;
 border:1px solid #d4e0e8;
 background:#f4f7fa;
 touch-action:none;
 overscroll-behavior:contain;
 cursor:zoom-in;
}
.paper-texture-stage[data-paper-zoomed="true"] { cursor:grab; }
.paper-texture-stage.paper-texture-dragging { cursor:grabbing; }
.paper-texture-image {
 position:absolute;
 left:50%;
 top:50%;
 display:block;
 width:var(--paper-fit-width,100%);
 height:var(--paper-fit-height,auto);
 max-width:none;
 max-height:none;
 margin:0;
 object-fit:contain;
 transform-origin:50% 50%;
 transform:translate(-50%,-50%) translate(0px,0px) scale(1);
 will-change:transform;
 user-select:none;
 -webkit-user-select:none;
 -webkit-user-drag:none;
 pointer-events:none;
}
@media(max-width:760px) {
 .paper-texture-preview { width:calc(100vw - 24px); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:14px; }
 .paper-texture-head { gap:10px; margin-bottom:10px; }
 .paper-texture-title { font-size:17px; }
 .paper-texture-preview button { min-height:40px; padding:7px 10px; }
 .paper-texture-toolbar .paper-texture-zoom { width:40px; }
 .paper-texture-help { font-size:11px; }
 .paper-texture-stage { height:calc(100vh - 230px); height:calc(100dvh - 230px); min-height:120px; }
}
@media(max-height:520px) {
 .paper-texture-preview { padding:10px 14px; }
 .paper-texture-head { margin-bottom:7px; }
 .paper-texture-help { display:none; }
 .paper-texture-toolbar { margin-bottom:8px; }
 .paper-texture-stage { height:calc(100vh - 170px); height:calc(100dvh - 170px); min-height:70px; }
}