/* 在圖上點選要哪一隻（js/pick-points.js）。類別一律 pkp- 開頭，不跟其他頁面的規則撞名 */
html.pkp-open{overflow:hidden}
.pkp-wrap{position:fixed;inset:0;z-index:400;background:rgba(48,40,34,.72);display:flex;align-items:stretch;justify-content:center}
.pkp-wrap[hidden]{display:none}
.pkp-box{display:flex;flex-direction:column;width:100%;max-width:1080px;height:100%;background:#fffdf8;color:#5a463a;font-family:inherit}
.pkp-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid #eadfcd;padding-top:max(10px,env(safe-area-inset-top))}
.pkp-ht{flex:1;min-width:0}
.pkp-ht b{display:block;font-size:15px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkp-ht span{display:block;margin-top:2px;font-size:12.5px;color:#b0603f;font-weight:700}
.pkp-x{flex:0 0 44px;width:44px;height:44px;border:1px solid #e2d6c2;border-radius:12px;background:#fff;color:#7a6657;font-size:18px;cursor:pointer}
.pkp-main{flex:1;min-height:0;display:flex;flex-direction:column}
.pkp-stage{flex:1 1 0;min-height:0;overflow:auto;background:#2f2924;padding:8px;display:flex;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pkp-canvas{position:relative;margin:auto;flex:0 0 auto;touch-action:manipulation;cursor:crosshair;line-height:0;-webkit-tap-highlight-color:transparent}
.pkp-canvas img{display:block;width:100%;height:auto;border-radius:6px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
.pkp-dots{position:absolute;inset:0;pointer-events:none}
.pkp-dot{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;padding:0;border:3px solid #fff;border-radius:50%;color:#fff;font:800 14px/1 system-ui,sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 7px rgba(0,0,0,.55);pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pkp-dot.on{box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 6px rgba(0,0,0,.45),0 2px 7px rgba(0,0,0,.55);z-index:2}
.pkp-dot.sm{width:22px;height:22px;margin:-11px 0 0 -11px;border-width:2px;font-size:11px;pointer-events:none}
.pkp-side{flex:0 0 auto;display:flex;flex-direction:column;max-height:46%;border-top:1px solid #eadfcd;background:#fffdf8}
.pkp-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 12px 4px}
.pkp-zoom{flex:0 0 auto;height:36px;padding:0 14px;border:1px solid #d9c9ad;border-radius:99px;background:#fff;color:#6b5646;font-size:13px;font-weight:700;cursor:pointer}
.pkp-wrap.zoomed .pkp-zoom{background:#f4ead8}
.pkp-tip{flex:1;min-width:0;font-size:11.5px;line-height:1.45;color:#9a8672}
.pkp-tip.warn{color:#b3492f;font-weight:700}
.pkp-list{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 12px;-webkit-overflow-scrolling:touch}
.pkp-empty{margin:10px 0 12px;text-align:center;font-size:13px;line-height:1.7;color:#9a8672}
.pkp-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid #efe5d5;border-radius:12px;background:#fff;cursor:pointer}
.pkp-row + .pkp-row{margin-top:6px}
.pkp-row.on{border-color:#c9b28f;background:#fff8ea}
.pkp-sw{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.pkp-name{flex:1;min-width:0;font-size:13.5px;font-weight:700}
.pkp-qty{font-size:14px}
.pkp-step{flex:0 0 auto;display:flex;align-items:center;border:1px solid #d9c9ad;border-radius:10px;overflow:hidden;background:#fff}
.pkp-step button{width:38px;height:38px;border:0;background:#f8f1e4;color:#5a463a;font-size:19px;line-height:1;cursor:pointer}
.pkp-step input{width:44px;height:38px;border:0;border-left:1px solid #e6dac6;border-right:1px solid #e6dac6;border-radius:0;background:#fff;color:#5a463a;text-align:center;font:700 16px/1 system-ui,sans-serif;-moz-appearance:textfield;appearance:textfield;padding:0}
.pkp-step input::-webkit-outer-spin-button,.pkp-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pkp-del{flex:0 0 36px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#b08f7c;font-size:15px;cursor:pointer}
.pkp-foot{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));border-top:1px solid #eadfcd}
.pkp-sum{flex:1;min-width:0;line-height:1.35}
.pkp-sum b{display:block;font-size:14px}
.pkp-sum span{font-size:13px;color:#b0603f;font-weight:700}
.pkp-ok{flex:0 0 auto;min-width:150px;height:48px;padding:0 18px;border:0;border-radius:14px;background:#7f9a6f;color:#fff;font-size:15px;font-weight:800;cursor:pointer}
.pkp-ok.off{background:#cfc6b8}
.pkp-wrap.ro .pkp-canvas{cursor:default}
@media (min-width:860px){
  .pkp-wrap{padding:24px}
  .pkp-box{height:auto;max-height:100%;min-height:min(640px,100%);border-radius:20px;overflow:hidden}
  .pkp-main{flex-direction:row}
  .pkp-stage{flex:1 1 0}
  .pkp-side{flex:0 0 330px;max-height:none;border-top:0;border-left:1px solid #eadfcd}
  .pkp-dot{width:34px;height:34px;margin:-17px 0 0 -17px}
}
/* 購物車、訂單列：一排小圓點 */
.pkp-chips{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.pkp-chips i{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:99px;color:#fff;font:800 11px/1 system-ui,sans-serif;font-style:normal;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.pkp-cartline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px;font-size:11.5px;color:#927b68}
.pkp-edit{height:34px;padding:0 13px;border:1px solid #d9c9ad;border-radius:99px;background:#fff8ea;color:#8a5a3c;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
/* 唯讀小圖（後台訂單） */
.pkp-view{display:block;max-width:440px;margin:6px 15px 12px;border:1px solid #e5d9c5;border-radius:14px;background:#fffaf0;overflow:hidden;cursor:zoom-in;text-align:left}
.pkp-view .pkp-canvas{margin:0;width:100%;cursor:zoom-in}
.pkp-view .pkp-canvas img{border-radius:0}
.pkp-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 11px;font-size:12px;line-height:1.4;color:#6b5646}
.pkp-cap span{flex:0 0 auto;color:#a8763a}