*{box-sizing:border-box}
:root{--navy:#0b3b70;--blue:#1e9fe6;--ink:#17324d;--paper:#f8fafc;--muted:#718096;--line:#dfe8f0}
html{scroll-behavior:smooth}
body{margin:0;background:#eef3f7;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;box-shadow:0 0 30px rgba(17,50,80,.05)}
.hero{padding:34px 20px 30px;text-align:center;background:linear-gradient(180deg,#fff 0%,#f5faff 100%);border-bottom:1px solid #e7eef5}
.small-brand{font-size:26px;font-weight:800;letter-spacing:-.5px;color:#5a3519}
.brush{height:6px;width:150px;margin:10px auto 20px;border-radius:50%;background:var(--blue);transform:rotate(-2deg);opacity:.9}
h1{margin:0;color:var(--navy);font-size:clamp(38px,9vw,64px);line-height:1.02;letter-spacing:-2px}
.sub{margin:12px 0 20px;font-size:28px;font-weight:700;color:#6b351a}
.fresh{display:inline-block;margin:0;padding:11px 25px;border-radius:999px;background:var(--navy);color:white;font-size:21px;font-weight:800}
.catalog{padding:30px 16px 34px}
.section-head{text-align:center;margin-bottom:18px}
.section-head h2{margin:0;font-size:28px;color:var(--navy)}
.section-head p{margin:5px 0 0;color:var(--muted);font-size:14px}
.categories{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 18px;scrollbar-width:none}
.categories::-webkit-scrollbar{display:none}
.category{border:1px solid var(--line);background:white;color:var(--navy);border-radius:999px;padding:9px 15px;font-size:15px;white-space:nowrap;cursor:pointer;transition:.15s ease}
.category:active{transform:scale(.97)}
.category.active{background:var(--navy);color:white;border-color:var(--navy)}
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.product-card{overflow:hidden;background:white;border:1px solid #e3ebf2;border-radius:18px;box-shadow:0 4px 16px rgba(24,55,85,.07)}
.product-image-wrap{width:100%;aspect-ratio:1/1;overflow:hidden;background:#eef4f8}
.product-image{width:100%;height:100%;display:block;object-fit:cover}
.product-image-empty{display:flex;align-items:center;justify-content:center;font-size:42px}
.product-info{padding:12px 12px 14px}
.product-info h3{margin:0 0 4px;font-size:17px;line-height:1.3;color:#18344e}
.product-category{font-size:12px;color:#7a8b9a;margin-bottom:5px}
.product-price{font-size:20px;font-weight:900;color:var(--navy);line-height:1.2}
.product-description{margin-top:5px;color:#68798a;font-size:12px;line-height:1.45}
.empty-card{grid-column:1/-1;border:1px dashed #cbd9e6;border-radius:20px;padding:34px 22px;text-align:center;background:#fbfdff}
.empty-icon{font-size:42px}
.empty-card h3{margin:10px 0 6px;font-size:21px}
.empty-card p{margin:0 auto;max-width:460px;color:var(--muted);line-height:1.55;font-size:14px}
.error-card{border-color:#f1c5c5;background:#fffafa}
.info{margin:0 16px 28px;padding:26px 20px;text-align:center;background:#f2f7fc;border-radius:24px}
.info h2{margin:0;color:var(--navy)}
.info p{margin:7px 0;color:#52687d}
.fresh-line{font-weight:800;color:var(--blue)!important}
.info-box{margin-top:16px;padding:14px;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;background:#f8fafc}
@media(min-width:560px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}.product-info h3{font-size:18px}}
@media(min-width:700px){.catalog{padding:38px 30px}.info{margin-left:30px;margin-right:30px}.products{grid-template-columns:repeat(3,minmax(0,1fr))}}