:root{--cream:#fbf5ec;--paper:#fffdf9;--ink:#2a1e16;--mute:#7a6a5d;--line:#eadfd0;--pink:#e23a74;--pink-dark:#c02660;--green:#3f8f2c;--orange:#f18a1c;--radius:16px}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Noto Sans Thai,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.45}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0}:focus-visible{outline:3px solid var(--pink);outline-offset:2px}img{max-width:100%;display:block}.logo{letter-spacing:-.3px;white-space:nowrap;font-family:Fredoka,sans-serif;font-weight:700;line-height:1}.disp{font-family:Fredoka,Noto Sans Thai,sans-serif}.my{font-family:Noto Sans Myanmar,sans-serif}.price{font-family:Fredoka,sans-serif;font-weight:600}.sr{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.shop{max-width:640px;margin:0 auto;padding-bottom:110px}.top{justify-content:space-between;align-items:center;gap:12px;padding:18px 16px 10px;display:flex}.top p{color:var(--mute);margin-top:6px;font-size:13px}.lang{background:var(--paper);border:1px solid var(--line);border-radius:999px;flex:none;padding:3px;display:flex}.lang button{color:var(--mute);border-radius:999px;min-height:34px;padding:6px 11px;font-size:13px;font-weight:600}.lang button[aria-pressed=true]{background:var(--ink);color:#fff}.chips{z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);scrollbar-width:none;background:#fbf5ecf5;gap:8px;padding:10px 16px;display:flex;position:sticky;top:0;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chips a{color:var(--ink);background:var(--paper);border:1px solid var(--line);white-space:nowrap;border-radius:999px;flex:none;padding:8px 14px;font-size:14px;font-weight:500;text-decoration:none}.chips a.on{background:var(--ink);color:#fff;border-color:var(--ink)}.cat{padding:22px 16px 4px;scroll-margin-top:60px}.cat h2{font-size:22px;font-weight:600}.cat h2 small{color:var(--pink);margin-left:8px;font-family:Noto Sans Thai,sans-serif;font-size:14px;font-weight:500}.item{text-align:left;border-bottom:1px solid var(--line);align-items:flex-start;gap:14px;width:100%;padding:14px 0;display:flex}.item:last-child{border-bottom:0}.item .info{flex:1;min-width:0}.item .nm{font-size:16px;font-weight:600;line-height:1.3}.item .th{color:var(--mute);font-size:13px}.item .ds{color:var(--mute);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:4px;font-size:13px;display:-webkit-box;overflow:hidden}.item .price{margin-top:6px;font-size:17px}.item .ph{background:var(--line);border-radius:14px;flex:none;width:104px;height:104px;position:relative;overflow:hidden}.item .ph img{object-fit:cover;width:100%;height:100%}.item .plus{width:32px;height:32px;color:var(--pink);text-align:center;background:#fff;border-radius:50%;font-size:22px;font-weight:600;line-height:32px;position:absolute;bottom:6px;right:6px;box-shadow:0 2px 8px #00000026}.item .qtybadge{background:var(--pink);color:#fff;text-align:center;border-radius:999px;min-width:24px;height:24px;padding:0 7px;font-size:13px;font-weight:700;line-height:24px;position:absolute;top:6px;left:6px}.item.out{opacity:.45}.item.out .ph:after{content:attr(data-out);color:#fff;background:#2a1e168c;place-items:center;font-weight:600;display:grid;position:absolute;inset:0}.cartbar{z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent, var(--cream) 30%);position:fixed;bottom:0;left:0;right:0}.cartbar button{background:var(--pink);color:#fff;border-radius:999px;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:608px;margin:0 auto;padding:15px 22px;font-size:16px;font-weight:600;display:flex;box-shadow:0 8px 24px #e23a7459}.cartbar .n{background:#ffffff40;border-radius:999px;padding:2px 10px;font-size:14px}.backdrop{z-index:30;background:#140c0680;animation:.18s ease-out fade;position:fixed;inset:0}.sheet{z-index:31;background:var(--paper);overscroll-behavior:contain;border-radius:22px 22px 0 0;max-width:640px;max-height:92dvh;margin:0 auto;animation:.22s cubic-bezier(.2,.8,.2,1) up;position:fixed;bottom:0;left:0;right:0;overflow-y:auto}@keyframes up{0%{opacity:0;transform:translateY(40px)}}@keyframes fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.sheet,.backdrop{animation:none}}.sheet .hero{aspect-ratio:16/10;background:var(--line);overflow:hidden}.sheet .hero img{object-fit:cover;width:100%;height:100%}.sheet .body{padding:18px 16px 8px}.sheet h3{font-size:22px;font-weight:600;line-height:1.2}.close{float:right;z-index:2;text-align:center;background:#fff;border-radius:50%;width:42px;height:42px;margin:10px 10px -52px 0;font-size:22px;line-height:42px;position:sticky;top:10px;box-shadow:0 2px 10px #0000002e}.group{margin-top:20px}.group .gh{justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;display:flex}.group .gh b{font-size:16px}.group .gh span{color:var(--mute);background:var(--cream);white-space:nowrap;border-radius:999px;padding:2px 9px;font-size:12px}.group .gh span.req{color:var(--pink-dark);background:#fde3ea}.opt{border-bottom:1px solid var(--line);cursor:pointer;align-items:center;gap:12px;min-height:48px;padding:11px 0;display:flex}.opt input{width:22px;height:22px;accent-color:var(--pink);flex:none}.opt .on{flex:1}.opt .p{color:var(--mute);font-size:14px}.opt.dis{opacity:.4;cursor:default}.sheetfoot{background:var(--paper);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));align-items:center;gap:12px;display:flex;position:sticky;bottom:0}.stepper{border:1px solid var(--line);border-radius:999px;align-items:center;display:flex}.stepper button{width:44px;height:46px;color:var(--pink);font-size:22px;font-weight:600}.stepper button:disabled{color:var(--line)}.stepper span{text-align:center;min-width:24px;font-weight:700}.primary{background:var(--pink);color:#fff;border-radius:999px;flex:1;justify-content:space-between;align-items:center;gap:10px;min-height:50px;padding:14px 18px;font-size:16px;font-weight:600;display:flex}.primary:disabled{background:#d9c9ba}.primary.center{justify-content:center}.line{border-bottom:1px solid var(--line);gap:12px;padding:12px 0;display:flex}.line img{object-fit:cover;border-radius:10px;flex:none;width:56px;height:56px}.line .info{flex:1;min-width:0}.line .mods{color:var(--mute);font-size:13px}.line .stepper button{width:36px;height:36px;font-size:18px}.field{margin-top:16px;display:block}.field span{margin-bottom:6px;font-size:14px;font-weight:600;display:block}.field input,.field textarea{border:1px solid var(--line);background:#fff;border-radius:12px;width:100%;padding:12px 14px;font-size:16px}.field textarea{resize:vertical;min-height:70px}.paychoice{grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;display:grid}.paychoice label{border:2px solid var(--line);cursor:pointer;background:#fff;border-radius:14px;padding:12px}.paychoice label:has(input:checked){border-color:var(--pink);background:#fff5f8}.paychoice input{opacity:0;position:absolute}.paychoice b{display:block}.paychoice small{color:var(--mute);font-size:12px}.err{color:var(--pink-dark);background:#fde3ea;border-radius:12px;margin-top:12px;padding:10px 12px;font-size:14px}.totalrow{justify-content:space-between;padding:14px 0 4px;font-size:18px;font-weight:700;display:flex}.status{text-align:center;max-width:520px;margin:0 auto;padding:20px 16px 40px}.status .card{background:var(--paper);border:1px solid var(--line);border-radius:22px;margin-top:16px;padding:22px 18px}.status .num{color:var(--pink);margin:6px 0 2px;font-family:Fredoka,sans-serif;font-size:72px;font-weight:700;line-height:1}.status .who{color:var(--mute)}.steps{justify-content:space-between;margin:20px 0 6px;display:flex;position:relative}.steps:before{content:"";background:var(--line);height:3px;position:absolute;top:13px;left:12%;right:12%}.steps div{color:var(--mute);flex:1;font-size:12px;position:relative}.steps i{background:var(--line);color:#fff;border-radius:50%;width:28px;height:28px;margin:0 auto 6px;font-style:normal;font-weight:700;line-height:28px;display:block}.steps .done i{background:var(--green)}.steps .done{color:var(--ink)}.headline{margin-top:10px;font-size:20px;font-weight:600}.ready{background:#e3f2dc;border-color:#b9dcaa}.qrbox{border:1px solid var(--line);background:#fff;border-radius:16px;width:min(280px,100%);margin:14px auto 8px;padding:14px}.qrbox img{width:100%;image-rendering:pixelated}.pp{color:#fff;background:#113566;border-radius:6px;padding:3px 10px;font-size:13px;font-weight:700;display:inline-block}.ghost{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:999px;justify-content:center;align-items:center;min-height:46px;padding:11px 18px;font-weight:600;text-decoration:none;display:inline-flex}.receipt{text-align:left;margin-top:8px}.receipt .r{border-bottom:1px dashed var(--line);justify-content:space-between;gap:10px;padding:7px 0;font-size:14px;display:flex}.receipt .r small{color:var(--mute);font-size:12px;display:block}.badge{border-radius:999px;padding:3px 12px;font-size:14px;font-weight:600;display:inline-block}.badge.paid{color:var(--green);background:#e3f2dc}.paychoice label b{font-size:16px}
