:root{--bg:#060806;--green:#86e01e;--green-dim:#5a9814;--white:#f5f6f2;--muted:#b9c4ae;--panel:#0e130b;--line:#2a3a1c;--orange:#ff8c1a;color-scheme:dark}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0;background:var(--bg);color:var(--white)}
body{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif}
#app{min-height:100vh}
.hp-basket-fab{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;z-index:60;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--green);background:rgba(6,8,6,.85);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.hp-basket-fab:hover{background:#142010}
.hp-basket-fab svg{width:26px;height:26px}
.hp-badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:var(--green);color:#000;font:600 12px/22px 'Poppins',sans-serif;text-align:center}
.hp-badge[hidden]{display:none}
.hp-badge.bump{animation:hpbump .35s ease}
@keyframes hpbump{50%{transform:scale(1.35)}}
.hp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;opacity:0;pointer-events:none;transition:opacity .25s}
.hp-overlay.open{opacity:1;pointer-events:auto}
.hp-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);box-sizing:border-box;z-index:80;background:var(--panel);border-left:1.5px solid var(--green);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 22px) 26px calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(100%);transition:transform .3s ease}
.hp-drawer.open{transform:none}
.hp-dr-head{display:flex;justify-content:space-between;align-items:center}
.hp-dr-head h2{margin:0;font:400 26px 'Goblin One',Georgia,serif;color:var(--green)}
.hp-dr-head h2 span{color:var(--white);font-size:17px}
.hp-icon-btn{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--white)}
.hp-icon-btn:hover{background:#1a2512}
.hp-toast{margin-top:14px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;background:#18240f;border:1px solid var(--line);font-size:13px}
.hp-toast[hidden]{display:none}
.hp-ship{margin-top:16px;font-size:13px}
.hp-ship b{color:var(--green);font-weight:600}
.hp-bar{margin-top:8px;height:8px;border-radius:4px;background:#1f2a16;overflow:hidden}
.hp-bar i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .3s}
.hp-dr-items{flex:1;overflow-y:auto;margin:8px -6px 0;padding:0 6px}
.hp-line{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.hp-line img{width:78px;height:78px;border-radius:50%;object-fit:cover;flex-shrink:0}
.hp-line .hp-info{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.hp-line .hp-top{display:flex;justify-content:space-between;gap:8px}
.hp-name{font-weight:600;font-size:15px;color:var(--white);text-decoration:none}
.hp-name:hover{color:var(--green)}
.hp-type{color:var(--green);font-size:12.5px}
.hp-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hp-each{color:var(--muted);font-size:12px}
.hp-lt{font:400 17px 'Goblin One',Georgia,serif}
.hp-step{display:inline-flex;align-items:center;border:1.5px solid var(--green);border-radius:22px;overflow:hidden}
.hp-step button{width:38px;height:36px;border:0;background:transparent;color:var(--green);font-size:18px;cursor:pointer}
.hp-step button:hover{background:var(--green);color:#000}
.hp-step span{min-width:26px;text-align:center;font-size:15px}
.hp-remove{width:40px;height:40px;margin:-8px -10px 0 0;border:0;background:transparent;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hp-remove:hover{background:#1a2512}
.hp-empty{padding:40px 0;text-align:center;color:var(--muted);font-size:14px}
.hp-empty strong{display:block;color:var(--green);font:400 20px 'Goblin One',Georgia,serif;margin-bottom:8px}
.hp-dr-foot{display:flex;flex-direction:column;gap:10px;padding-top:14px}
.hp-sub{display:flex;justify-content:space-between;align-items:baseline}
.hp-sub span{color:var(--green);font-size:15px}
.hp-sub strong{font:400 24px 'Goblin One',Georgia,serif}
.hp-note{color:var(--muted);font-size:12px}
.hp-btn{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:26px;text-decoration:none;cursor:pointer;font:400 15px 'Goblin One',Georgia,serif;box-sizing:border-box;width:100%}
.hp-btn-primary{background:var(--orange);color:#000;border:0}
.hp-btn-primary:hover{background:#ffa64d}
.hp-btn-ghost{background:transparent;color:var(--green);border:1.5px solid var(--green);font-family:'Poppins',sans-serif;font-size:14px}
.hp-btn-ghost:hover{background:var(--green);color:#000}
.hp-link{text-align:center;color:var(--green);font-size:13px;background:none;border:0;cursor:pointer;text-decoration:underline;padding:6px}
.hp-empty-btn{background:none;border:0;color:var(--muted);font:13px 'Poppins',sans-serif;text-decoration:underline;cursor:pointer;padding:8px;min-height:40px}
.hp-empty-btn:hover{color:#ff7b7b}
.hp-confirm{display:flex;flex-direction:column;gap:10px;align-items:center;padding:12px;border:1px solid #6b2a2a;border-radius:12px;background:#1c0f0f;font-size:13px;text-align:center}
.hp-confirm div{display:flex;gap:10px}
.hp-yes,.hp-no{min-height:40px;padding:0 18px;border-radius:20px;cursor:pointer;font:13px 'Poppins',sans-serif}
.hp-yes{background:#e24b4b;border:0;color:#fff}
.hp-yes:hover{background:#f06262}
.hp-no{background:transparent;border:1.5px solid var(--green);color:var(--green)}
.hp-no:hover{background:var(--green);color:#000}
#hpEmptyBox{display:flex;justify-content:center}