/* E8 Instant Clean Preview — presentation only, no editor chrome. Scoped to #amwld-cp. */
#amwld-cp{position:fixed;inset:0;z-index:100003;display:flex;flex-direction:column;background:#ecebe7;color:#222;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
#amwld-cp *,#amwld-cp *::before,#amwld-cp *::after{box-sizing:border-box}
#amwld-cp [hidden]{display:none!important}
#amwld-cp button{min-height:40px;margin:0;border:1px solid #c9c6bf;border-radius:8px;padding:6px 12px;background:#fff;color:#222;font:inherit;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#amwld-cp button:focus-visible{outline:2px solid #1f6f5c;outline-offset:2px}
#amwld-cp .amwld-cp-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid #dcd9d2}
#amwld-cp .amwld-cp-back{font-weight:600}
#amwld-cp .amwld-cp-modes{display:inline-flex;border:1px solid #c9c6bf;border-radius:9px;overflow:hidden}
#amwld-cp .amwld-cp-modes button{border:0;border-radius:0;min-width:84px}
#amwld-cp .amwld-cp-modes button+button{border-left:1px solid #c9c6bf}
#amwld-cp .amwld-cp-modes button[aria-pressed=true]{background:#1f6f5c;color:#fff}
#amwld-cp .amwld-cp-zoom{display:inline-flex;gap:4px}
#amwld-cp .amwld-cp-zoom button{min-width:40px;padding:6px 10px}
#amwld-cp .amwld-cp-zoom button[aria-pressed=true]{border-color:#1f6f5c;color:#1f6f5c}
#amwld-cp .amwld-cp-stage{flex:1 1 auto;min-height:0;overflow:auto;display:flex;padding:16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#amwld-cp .amwld-cp-paper{flex:0 0 auto;margin:auto;line-height:0}
#amwld-cp .amwld-cp-paper canvas{display:block;max-width:none;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12),0 10px 30px rgba(0,0,0,.14)}
#amwld-cp .amwld-cp-paper.amwld-cp-framed canvas{background:transparent;box-shadow:0 4px 10px rgba(0,0,0,.18),0 18px 40px rgba(0,0,0,.18)}
#amwld-cp .amwld-cp-status{position:absolute;left:0;right:0;top:50%;margin:0;text-align:center;color:#555;pointer-events:none}
#amwld-cp.amwld-cp-ready .amwld-cp-status{top:auto;bottom:96px}
#amwld-cp .amwld-cp-status:empty{display:none}
#amwld-cp .amwld-cp-foot{flex:0 0 auto;background:#fff;border-top:1px solid #dcd9d2;padding:8px 16px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
#amwld-cp .amwld-cp-caption{margin:0;text-align:center;color:#444}
#amwld-cp .amwld-cp-frames{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#amwld-cp .amwld-cp-badge{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:#fff4d6;color:#7a5a00;font-size:13px;font-weight:600}
#amwld-cp .amwld-cp-swatches{display:flex;gap:8px;overflow-x:auto;flex:1 1 200px;min-width:0;padding:2px;scrollbar-width:thin}
#amwld-cp .amwld-cp-swatch{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;width:76px;min-height:0!important;padding:4px!important;font-size:12px!important}
#amwld-cp .amwld-cp-swatch img{display:block;width:64px;height:22px;object-fit:cover;border-radius:3px}
#amwld-cp .amwld-cp-swatch span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#amwld-cp .amwld-cp-swatch[aria-checked=true]{border-color:#1f6f5c;box-shadow:0 0 0 2px #1f6f5c inset}
#amwld-cp .amwld-cp-note{flex:1 0 100%;color:#666;font-size:12px}
#amwld-cp .amwld-cp-empty{color:#666;font-size:13px}
/* E8.1 lightweight 2.5D (CSS only): front canvas + 4 side planes + back shadow plate. Presentation only. */
#amwld-cp .amwld-cp-stage.amwld-cp-persp{perspective:1800px}
#amwld-cp .amwld-cp-paper{position:relative}
#amwld-cp .amwld-cp-paper.amwld-cp-3d{transform-style:preserve-3d;transition:transform .35s ease;cursor:grab;touch-action:none}
#amwld-cp .amwld-cp-paper.amwld-cp-3d.amwld-cp-dragging{transition:none;cursor:grabbing}
#amwld-cp .amwld-cp-paper.amwld-cp-3d canvas{position:relative;box-shadow:none}
#amwld-cp .amwld-cp-side,#amwld-cp .amwld-cp-back3d{position:absolute;display:none;pointer-events:none;margin:0;padding:0}
#amwld-cp .amwld-cp-3d .amwld-cp-side,#amwld-cp .amwld-cp-3d .amwld-cp-back3d{display:block}
#amwld-cp .amwld-cp-side-r,#amwld-cp .amwld-cp-side-l{top:0;width:var(--cp-d);height:var(--cp-h);transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,var(--cp-side),rgba(0,0,0,.45)),var(--cp-side)}
#amwld-cp .amwld-cp-side-r{left:var(--cp-w)}
#amwld-cp .amwld-cp-side-l{left:0}
#amwld-cp .amwld-cp-side-t,#amwld-cp .amwld-cp-side-b{left:0;width:var(--cp-w);height:var(--cp-d);transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(180deg,var(--cp-side),rgba(0,0,0,.4)),var(--cp-side)}
#amwld-cp .amwld-cp-side-t{top:0}
#amwld-cp .amwld-cp-side-b{top:var(--cp-h)}
#amwld-cp .amwld-cp-back3d{left:0;top:0;width:var(--cp-w);height:var(--cp-h);transform:translateZ(calc(-1 * var(--cp-d)));background:#3a3a3a;box-shadow:0 6px 14px rgba(0,0,0,.25),0 24px 50px rgba(0,0,0,.28)}
#amwld-cp .amwld-cp-views{display:inline-flex;gap:4px}
#amwld-cp .amwld-cp-views button{min-width:64px;padding:6px 10px}
#amwld-cp .amwld-cp-views button[aria-pressed=true]{background:#1f6f5c;border-color:#1f6f5c;color:#fff}
#amwld-cp .amwld-cp-rabbet{flex:1 0 100%;color:#7a5a00;font-size:12px}
#amwld-cp .amwld-cp-modes.amwld-cp-single button{border-radius:0}
@media (max-width:640px){
  #amwld-cp{font-size:14px}
  #amwld-cp .amwld-cp-bar{flex-wrap:wrap;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top))}
  #amwld-cp .amwld-cp-back{order:1}
  #amwld-cp .amwld-cp-zoom{order:2}
  #amwld-cp .amwld-cp-modes{order:3;flex:1 0 100%}
  #amwld-cp .amwld-cp-modes button{flex:1 1 50%;min-width:0}
  #amwld-cp .amwld-cp-stage{padding:10px}
  #amwld-cp .amwld-cp-foot{padding:6px 10px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  #amwld-cp .amwld-cp-note{display:none}
  #amwld-cp .amwld-cp-views{flex:0 0 auto}
  #amwld-cp .amwld-cp-views button{min-width:52px}
  #amwld-cp.amwld-cp-ready .amwld-cp-status{bottom:110px}
}
/* E9 direct order: [Quay lại chỉnh sửa] … [Đặt hàng] (desktop header) — sticky bottom commerce area + [ĐẶT HÀNG] (mobile). */
#amwld-cp .amwld-cp-order{order:9;min-width:132px;border-color:#b5401f;background:#c8502a;color:#fff;font-weight:700;letter-spacing:.02em}
#amwld-cp .amwld-cp-order:disabled{opacity:.55;cursor:default}
#amwld-cp .amwld-cp-order-bottom{display:none}
#amwld-cp .amwld-cp-buy{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
#amwld-cp .amwld-cp-buy-label{flex:1 1 200px;min-width:0;font-weight:600;font-size:14px}
#amwld-cp .amwld-cp-buy-none[aria-pressed=true]{border-color:#1f6f5c;box-shadow:0 0 0 2px #1f6f5c inset}
#amwld-cp .amwld-cp-buy-msg{flex:1 0 100%;margin:0;color:#b32d2e;font-size:13px}
#amwld-cp .amwld-cp-buy-msg:empty{display:none}
#amwld-cp .amwld-cp-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#666}
#amwld-cp .amwld-cp-tag-buy{color:#1f6f5c;font-weight:700}
#amwld-cp .amwld-cp-swatch[data-buy="0"] img{opacity:.75}
@media (max-width:640px){
  #amwld-cp .amwld-cp-order-top{display:none}
  #amwld-cp .amwld-cp-order-bottom{display:block;flex:1 0 100%;min-height:44px;font-size:16px}
  #amwld-cp .amwld-cp-buy{margin-top:2px;gap:4px}
  #amwld-cp .amwld-cp-buy-none{min-height:34px;padding:4px 10px}
  #amwld-cp .amwld-cp-buy-label{font-size:13px}
  #amwld-cp .amwld-cp-swatch{width:68px}
  #amwld-cp.amwld-cp-ready .amwld-cp-status{bottom:150px}
}