*{box-sizing:border-box}
:root{--navy:#0b3b70;--blue:#1e9fe6;--ink:#17324d;--paper:#f8fafc;--muted:#718096}
body{margin:0;background:#f4f7fa;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Segoe UI",sans-serif}
main{max-width:760px;margin:auto;background:white;min-height:100vh}
.hero{padding:42px 22px 34px;text-align:center;background:linear-gradient(180deg,#fff 0%,#f5faff 100%);border-bottom:1px solid #e7eef5}
.small-brand{font-size:30px;font-weight:800;letter-spacing:-1px;color:#5a3519}
.brush{height:6px;width:180px;margin:12px auto 24px;border-radius:50%;background:var(--blue);transform:rotate(-2deg);opacity:.9}
h1{margin:0;color:var(--navy);font-size:clamp(42px,10vw,72px);line-height:1.02;letter-spacing:-2px}
.sub{margin:14px 0 22px;font-size:30px;font-weight:700;color:#6b351a}
.fresh{display:inline-block;margin:0;padding:12px 28px;border-radius:999px;background:var(--navy);color:white;font-size:24px;font-weight:800}
.catalog{padding:30px 18px}
.section-head{text-align:center;margin-bottom:20px}
.section-head h2{margin:0;font-size:28px;color:var(--navy)}
.section-head p{margin:6px 0 0;color:var(--muted)}
.categories{display:flex;gap:8px;overflow-x:auto;padding:2px 0 16px;scrollbar-width:none}
.categories::-webkit-scrollbar{display:none}
.category{border:1px solid #d9e5ef;background:white;color:var(--navy);border-radius:999px;padding:10px 16px;font-size:15px;white-space:nowrap}
.category.active{background:var(--navy);color:white;border-color:var(--navy)}
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.empty-card{grid-column:1/-1;border:1px dashed #cbd9e6;border-radius:20px;padding:36px 24px;text-align:center;background:#fbfdff}
.empty-icon{font-size:48px}
.empty-card h3{margin:12px 0 8px;font-size:22px}
.empty-card p{margin:0 auto;max-width:460px;color:var(--muted);line-height:1.6}
.info{margin:0 18px 28px;padding:28px 22px;text-align:center;background:#f2f7fc;border-radius:24px}
.info h2{margin:0;color:var(--navy)}
.info p{margin:8px 0;color:#52687d}
.fresh-line{font-weight:800;color:var(--blue)!important}
.info-box{margin-top:18px;padding:16px;border-radius:16px;background:white;font-weight:700;line-height:1.8}
footer{max-width:760px;margin:auto;padding:20px;text-align:center;color:#8291a1;font-size:13px;display:flex;justify-content:center;gap:12px}
@media(min-width:700px){.catalog{padding:38px 30px}.products{grid-template-columns:repeat(3,minmax(0,1fr))}}