:root{--ink:#1c1c1c;--brand:#d81e5b;--line:#e7e5e0}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#fff;display:flex;flex-direction:column;height:100vh;overflow:hidden}header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 18px;background:#fff;border-bottom:1px solid var(--line);z-index:30}.logo{display:flex;align-items:center;gap:8px}.logo img{height:30px;display:block}.ver{font-size:10px;color:#c3c3c8}.hbar{display:flex;align-items:center;gap:12px}.live{font-size:11px;color:#16a34a;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:999px;padding:2px 9px;font-weight:600;white-space:nowrap}.counter{font-variant-numeric:tabular-nums;color:#6b7280;font-size:13px;white-space:nowrap}.cartbtn{position:relative;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 12px;font-size:14px;white-space:nowrap}.cartbtn .badge{position:absolute;top:-8px;right:-8px;background:var(--brand);color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px}.stage{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center;padding:6px 64px}.frame{position:relative;line-height:0;box-shadow:0 14px 40px #00000038;transition:opacity .18s ease}.frame img{display:block;width:auto;height:auto;max-width:calc(100vw - 140px);max-height:calc(100vh - 68px);user-select:none;-webkit-user-drag:none}.hotspot{position:absolute;transform:translate(-50%,-50%);z-index:6;line-height:normal}.pin{position:relative;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 10px #00000059}.pin:before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--brand);opacity:.55;animation:pulse 2.2s infinite}@keyframes pulse{0%{transform:scale(1);opacity:.55}to{transform:scale(1.9);opacity:0}}.pin.out{background:#9ca3af}.pin.out:before{border-color:#9ca3af;animation:none}.pin .qty{position:absolute;top:-8px;right:-9px;background:#111;color:#fff;font-size:10px;line-height:16px;min-width:16px;height:16px;border-radius:999px;padding:0 4px;font-weight:700;text-align:center}.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:44px;height:44px;border-radius:50%;background:#ffffffeb;border:1px solid var(--line);cursor:pointer;font-size:22px;color:#111;box-shadow:0 2px 12px #0000002e;display:flex;align-items:center;justify-content:center}.arrow:hover{background:#fff}.arrow.prev{left:14px}.arrow.next{right:14px}.arrow[disabled]{opacity:.3;cursor:default}.pop{position:fixed;z-index:50;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 50px #00000040;width:290px;overflow:hidden}.pop h4{margin:0;padding:12px 14px;background:#faf7f8;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.3px;color:#6b7280}.pop .meta{padding:10px 14px 6px;font-size:13px;color:#374151}.pop .meta .name{font-weight:700;color:#1c1c1c;font-size:14px}.pop .price{font-weight:800;font-size:19px;color:var(--brand)}.pop .lbl{padding:2px 14px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#9ca3af}.pop .sizes{max-height:210px;overflow:auto;padding-bottom:6px}.pop .size{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-top:1px solid var(--line);cursor:pointer;font-size:14px}.pop .size:hover{background:#fdf2f6}.pop .size.disabled{color:#c3c3c8;cursor:not-allowed}.pop .size .add{color:var(--brand);font-weight:700;font-size:12px}.pop .size .stock{font-size:12px;color:#6b7280}.drawer{position:fixed;top:0;right:0;height:100vh;width:340px;background:#fff;border-left:1px solid var(--line);z-index:60;transform:translate(100%);transition:.25s;display:flex;flex-direction:column}.drawer.open{transform:translate(0)}.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.drawer .items{flex:1;overflow:auto}.drawer .item{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px}.drawer .foot{padding:16px;border-top:1px solid var(--line)}.wa{display:block;text-align:center;background:#25d366;color:#fff;text-decoration:none;padding:12px;border-radius:10px;font-weight:700}.empty{color:#9ca3af;padding:24px;text-align:center;font-size:14px}