:root{--bg:#120B06;--ink:#FCF5EC;--tan:#D8BFA0;--orange:#F8A848;--rule:#5A412C;--panel:#1B110A}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans Thai','Sukhumvit Set','Thonburi',system-ui,sans-serif;font-size:17px;line-height:1.6}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.cap{margin:0;font-family:'Josefin Sans','Noto Sans Thai',sans-serif;font-size:12px;line-height:1.4;letter-spacing:.3em;text-transform:uppercase;color:var(--tan)}
.skip{position:absolute;left:-999px;top:8px;background:var(--orange);color:#1B1007;padding:10px 14px;border-radius:8px;z-index:50}
.skip:focus{left:8px}

/* hero */
.hero{text-align:center;padding:52px 18px 34px;background:radial-gradient(ellipse 520px 300px at 88% 2%,rgba(252,206,140,.26),rgba(252,206,140,0) 70%),radial-gradient(ellipse 420px 260px at 50% 0%,rgba(248,168,72,.18),rgba(248,168,72,0) 70%),linear-gradient(180deg,#1E130B 0%,#120B06 100%)}
.sun{display:block;margin:0 auto 8px}
.brand{margin:0;font-family:'Yellowtail','Kaushan Script',cursive;font-weight:400;font-size:clamp(58px,17vw,104px);line-height:1.05}
.brand span{color:var(--orange)}
.sub{margin:6px 0 0;font-family:'Josefin Sans','Noto Sans Thai',sans-serif;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--tan)}
.sub b{font-weight:400;letter-spacing:.12em;text-transform:none}
.tag{margin:18px 0 0;font-family:'Sacramento','Yellowtail',cursive;font-size:32px;line-height:1.2;color:var(--tan)}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px auto 0;max-width:560px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:600;text-decoration:none;border:1px solid var(--tan);color:var(--ink);background:transparent}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#1B1007}
.btn[hidden]{display:none}

/* สั่งผ่านแอป */
.order{margin-top:26px}
.order[hidden]{display:none}
.order .box{border:1px solid var(--rule);border-radius:18px;background:var(--panel);padding:24px 18px;text-align:center}
.order h2{margin:0;font-size:26px;line-height:1.4;font-weight:700}
.rh{margin:18px auto 0;max-width:520px;padding:20px 16px;border:2px solid var(--orange);border-radius:16px;background:linear-gradient(180deg,rgba(248,168,72,.14),rgba(248,168,72,.04))}
.rh[hidden],#o-others[hidden]{display:none}
.badge{display:inline-block;padding:3px 14px;border-radius:999px;background:var(--orange);color:#1B1007;font-size:14px;font-weight:700}
.rh h3{margin:10px 0 2px;font-size:30px;line-height:1.3;font-weight:700}
.rh p{margin:0 0 16px;color:var(--tan);font-size:15px}
.btn.big{width:100%;max-width:360px;min-height:54px;font-size:18px}
.alt{margin:22px 0 10px;color:var(--tan);font-size:15px}
.apps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.apps .btn{flex:1 1 130px;max-width:200px}
.small{margin:12px 0 0;font-size:14px;color:var(--tan)}

/* menu */
.menu-head{padding:36px 0 14px;text-align:center}
.menu-head h2{margin:0;font-size:30px;line-height:1.3;font-weight:700}
.catnav{position:sticky;top:0;z-index:20;background:rgba(18,11,6,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.catnav ul{display:flex;gap:8px;margin:0 auto;padding:10px 18px;max-width:1080px;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.catnav ul::-webkit-scrollbar{display:none}
.catnav a{display:block;min-height:44px;padding:9px 16px;white-space:nowrap;font-size:15px;line-height:1.6;text-decoration:none;border:1px solid var(--rule);border-radius:999px}
.catnav a[aria-current="true"]{background:var(--orange);border-color:var(--orange);color:#1B1007;font-weight:600}
.cats{display:grid;gap:22px;padding:24px 0 12px;grid-template-columns:1fr}
@media (min-width:720px){.cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}}
@media (min-width:1020px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cat{scroll-margin-top:76px;background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:18px 18px 6px;break-inside:avoid}
.cat header{padding-bottom:10px;margin-bottom:4px;border-bottom:2px solid var(--orange)}
.cat h3{margin:0;font-size:23px;line-height:1.4;font-weight:600;color:var(--orange)}
.cat h4{margin:16px 0 0;font-size:17px;font-weight:600;color:var(--ink)}
.cat h4 .cap{display:inline;margin-left:8px;letter-spacing:.2em}
.items{list-style:none;margin:0;padding:0}
.items li{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.items li:last-child{border-bottom:0}
.nm{min-width:0}
.th{display:block;font-size:18px;line-height:1.5;font-weight:600;overflow-wrap:break-word}
.en{display:block;font-size:13px;line-height:1.4;color:var(--tan);overflow-wrap:break-word}
.pr{flex:none;font-size:22px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;padding-bottom:2px}
.pr i{font-style:normal;font-size:.62em;font-weight:600;margin-right:2px;color:var(--tan)}
.extras{grid-column:1/-1}
@media (min-width:720px){.extras .items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media (min-width:1020px){.extras .items{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pricenote{margin:6px 0 0;text-align:center;font-size:14px;color:var(--tan)}

/* visit */
.visit{margin:34px 0 10px;padding:26px 20px;border:1px solid var(--rule);border-radius:16px;background:var(--panel);text-align:center}
.visit[hidden]{display:none}
.visit h2{margin:0 0 4px;font-size:26px;line-height:1.4;font-weight:700}
.visit p{margin:8px 0 0}
.visit .row{margin:0;font-size:18px}
.visit .cta{margin-top:18px}
footer{padding:34px 18px 44px;text-align:center;color:var(--tan);font-size:14px}
footer .tag{margin:0 0 10px;font-size:28px}