body{margin:0;font-family:'Anuphan',sans-serif;background:linear-gradient(140deg,#e8d9fb,#fbd9e8 45%,#d9ecfb) fixed;color:#4d3a75}
a{color:#5e4b85;text-decoration:none}a:hover{color:#4d3a75}
input,textarea,select,button{font-family:'Anuphan',sans-serif}
.wrap{min-height:100vh;display:flex;flex-direction:column}
.promo{text-align:center;font-size:12px;color:#7d6a9e;padding:9px;background:rgba(255,255,255,.45)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:18px clamp(16px,4vw,40px)}
.logo{font-size:23px;font-weight:700;color:#5e4b85;letter-spacing:.04em}
.nav-links{display:flex;gap:14px 22px;font-size:13.5px;color:#6f5e94;align-items:center;flex-wrap:wrap}
.btn-cart{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-radius:99px;padding:8px 20px;color:#5e4b85;font-weight:600;font-size:13.5px;white-space:nowrap;display:inline-block}
.main{flex:1;padding:6px clamp(16px,4vw,40px) 48px;margin:0 auto;width:100%;box-sizing:border-box}
.card{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);border-radius:24px;box-shadow:0 12px 30px rgba(94,75,133,.14)}
.card2{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:24px;box-shadow:0 8px 20px rgba(94,75,133,.1)}
.btn{background:#5e4b85;color:#fff;border:none;border-radius:99px;padding:12px 28px;font-size:14px;font-weight:600;cursor:pointer;display:inline-block;text-align:center}
.btn:hover{color:#fff;background:#4d3a75}
.btn-o{background:rgba(255,255,255,.8);border:1px solid #cbb9ec;color:#5e4b85;border-radius:99px;padding:12px 26px;font-size:14px;cursor:pointer;display:inline-block;text-align:center}
.btn-sm{background:#5e4b85;color:#fff;border:none;border-radius:99px;padding:7px 16px;font-size:12.5px;cursor:pointer}
.chip{background:rgba(255,255,255,.6);color:#5e4b85;border:1px solid rgba(255,255,255,.9);border-radius:99px;padding:7px 18px;font-size:13px;flex:none;white-space:nowrap;display:inline-block}
.chip.on{background:#5e4b85;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.pcard{padding:14px;cursor:pointer;display:block;color:inherit}
.pimg{height:160px;border-radius:16px;background:#eee5f8 center/cover no-repeat}
.h1{font-size:22px;font-weight:700;color:#4d3a75;margin-bottom:18px}
.muted{color:#9b8cbb;font-size:12px}
.inp{width:100%;border:1px solid #d9c9f0;border-radius:12px;padding:11px 14px;font-size:14px;color:#4d3a75;background:rgba(255,255,255,.85);box-sizing:border-box}
.lbl{font-size:13px;color:#6f5e94;margin-bottom:6px}
.err{font-size:13px;color:#c14d6e;background:#fdebf1;border-radius:10px;padding:10px 14px}
.ok{font-size:13px;color:#2e6647;background:#e7f8ef;border-radius:10px;padding:10px 14px}
.row{display:flex;justify-content:space-between;font-size:13.5px;color:#6f5e94}
.total{display:flex;justify-content:space-between;font-size:16px;font-weight:700;color:#4d3a75;border-top:1px dashed #cbb9ec;padding-top:10px}
.footer{background:rgba(255,255,255,.5);text-align:center;padding:13px;font-size:12px;color:#7d6a9e}
.toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:12px 22px;box-shadow:0 14px 34px rgba(77,58,117,.28);z-index:50;animation:rise .35s cubic-bezier(.2,.9,.3,1.2);display:flex;align-items:center;gap:12px;white-space:nowrap}
@keyframes rise{from{opacity:0;transform:translate(-50%,-70px)}to{opacity:1;transform:translate(-50%,0)}}
.qty{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.8);border:1px solid #cbb9ec;border-radius:99px;padding:6px 12px}
.qty button{border:none;background:none;color:#5e4b85;cursor:pointer;font-size:17px;padding:0 4px}
.catpanel{display:none;position:absolute;top:0;left:0;right:0;z-index:45;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);border-radius:24px;padding:22px;box-shadow:0 24px 60px rgba(77,58,117,.3);animation:slideDown .3s cubic-bezier(.2,.9,.3,1)}
.catpanel.open{display:block}
.backdrop{display:none;position:fixed;inset:0;background:rgba(77,58,117,.22);z-index:40}.backdrop.open{display:block}
@keyframes slideDown{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:translateY(0)}}
.catbtn{background:rgba(255,255,255,.8);color:#5e4b85;border:1.5px solid #e2d7f5;border-radius:16px;padding:10px 10px 14px;cursor:pointer;text-align:center;display:block}
.catbtn.on{background:#5e4b85;color:#fff;border-color:#5e4b85}
.thumb{flex:1;height:66px;border:2.5px solid rgba(255,255,255,.9);border-radius:12px;cursor:pointer;background:#eee5f8 center/cover}
.thumb.on{border-color:#5e4b85}
.shade{background:rgba(255,255,255,.7);color:#5e4b85;border:1px solid #cbb9ec;border-radius:99px;padding:8px 18px;font-size:12.5px;cursor:pointer}
.shade.on{background:#5e4b85;color:#fff;border-color:#5e4b85}
.pay-m{border:2px solid #e2e7f0;background:#fff;border-radius:12px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.pay-m.on{border-color:#1b2a4a;background:#f3f6fc}
.pay-m .dot{width:18px;height:18px;border-radius:99px;border:2px solid #c8d0e0;background:#fff}
.pay-m.on .dot{border-color:#1b2a4a;background:#1b2a4a}
.pay-in{border:1px solid #d8dfec;border-radius:10px;padding:11px 14px;font-size:13.5px;background:#fff;width:100%;box-sizing:border-box}
@keyframes popA{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.btn-cart{transition:none}