*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',system-ui,sans-serif;background:#FDF8F0;color:#2C1A0E;min-height:100vh;font-size:14px;line-height:1.5}
.header{background:#2C1A0E;color:#F5EDD8;padding:20px 32px;display:flex;align-items:center;gap:12px}
.header h1{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:600;letter-spacing:.02em}
.header .sub{font-size:11px;color:#C4862A;letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.container{max-width:940px;margin:0 auto;padding:22px 24px 48px}
.search-row{display:flex;align-āitems:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
input[type=text]{flex:1;min-width:200px;max-width:400px;height:38px;padding:0 14px;border:1.5px solid #D4B896;border-radius:8px;background:#fff;color:#2C1A0E;font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color .15s}
input[type=text]:focus{border-color:#C4862A}
input[type=text]::placeholder{color:#B08B60}
select{height:38px;padding:0 12px;border:1.5px solid #D4B896;border-radius:8px;background:#fff;color:#2C1A0E;font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;outline:none}
select:focus{border-color:#C4862A}
.item-count{font-size:13px;color:#9B7040;white-space:nowrap}
.filter-group{margin-bottom:12px}
.filter-label{font-size:11px;color:#9B7040;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-weight:500}
.btn-row{display:flex;flex-wrap:wrap;gap:5px}
.bbtn{padding:6px 13px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;border:1.5px solid transparent;transition:all .15s;line-height:1}
.bbtn[data-b=all]{background:#F5EDD8;color:#4A2C1A;border-color:#C4A070}
.bbtn[data-b=all].on{background:#3D2310;color:#F5EDD8}
.bbtn[data-b=deli]{background:#FEF7E8;color:#7A5210;border-color:#DEB84A}
.bbtn[data-b=deli].on{background:#B08B1A;color:#fff}
.bbtn[data-b=restaurant]{background:#FDF0E8;color:#7A3A14;border-color:#E09070}
.bbtn[data-b=restaurant].on{background:#B05830;color:#fff}
.bbtn[data-b=hospital]{background:#EEF4F0;color:#2A5A3A;border-color:#80B090}
.bbtn[data-b=hospital].on{background:#3A6B4A;color:#fff}
.bbtn[data-b=school]{background:#FEFCE4;color:#705A10;border-color:#D4AA30}
.bbtn[data-b=school].on{background:#A08218;color:#fff}
.bbtn[data-b=catering]{background:#F8EFF4;color:#6A2A50;border-color:#C080A0}
.bbtn[data-b=catering].on{background:#7A3460;color:#fff}
.bbtn[data-b=hotel]{background:#FDF6E8;color:#7A5A20;border-color:#D4A850}
.bbtn[data-b=hotel].on{background:#9A7228;color:#fff}
.bbtn[data-b=cafe]{background:#F0EAE4;color:#4A2C18;border-color:#A07858}
.bbtn[data-b=cafe].on{background:#5C3820;color:#fff}
.bbtn[data-b=wholesale]{background:#F0EDE8;color:#4A3C28;border-color:#A09070}
.bbtn[data-b=wholesale].on{background:#6B5438;color:#fff}
.dbtn{padding:6px 14px;border-radius:20px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;border:1.5px solid transparent;transition:all .15s;line-height:1}
.dbtn[data-d=all]{background:#F5EDD8;color:#4A2C1A;border-color:#C4A070}
.dbtn[data-d=all].on{background:#3D2310;color:#F5EDD8}
.dbtn[data-d=kp]{background:#EAF0FD;color:#1A3A80;border-color:#7A9CD8}.dbtn[data-d=kp].on{background:#1A3A80;color:#fff}
.dbtn[data-d=kd]{background:#FDF0F5;color:#8A1A4A;border-color:#D87AA0}.dbtn[data-d=kd].on{background:#8A1A4A;color:#fff}
.dbtn[data-d=g]{background:#FEFAE0;color:#6A5010;border-color:#D4B030}.dbtn[data-d=g].on{background:#8A6A10;color:#fff}
.dbtn[data-d=n]{background:#FBF0E8;color:#6A3A10;border-color:#C49060}.dbtn[data-d=n].on{background:#8A4A18;color:#fff}
.dbtn[data-d=y]{background:#E8F4FD;color:#1A4A7A;border-color:#6AAAD8}.dbtn[data-d=y].on{background:#1A5A9A;color:#fff}
.dbtn[data-d=v]{background:#E8F5EC;color:#1A5030;border-color:#60A878}.dbtn[data-d=v].on{background:#1A6030;color:#fff}
.dbtn[data-d=x]{background:#F4EDF8;color:#5A2878;border-color:#A870C8}.dbtn[data-d=x].on{background:#6A2888;color:#fff}
.dbtn[data-d=l]{background:#E8F5F5;color:#1A5858;border-color:#50A8A8}.dbtn[data-d=l].on{background:#1A6868;color:#fff}
.dbtn[data-d=e]{background:#F0F0F0;color:#404040;border-color:#909090}.dbtn[data-d=e].on{background:#404040;color:#fff}
.disclaimer{font-size:11px;color:#9B7040;background:#FDF3E0;border:1px solid #E8D0A0;border-radius:8px;padding:8px 12px;margin-bottom:16px;line-height:1.5}
.disclaimer strong{color:#7A5020}
.cat-section{margin-bottom:1.5rem}
.cat-header{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#9B7040;padding:5px 0 7px;border-bottom:1px solid #E8D5B7;margin-bottom:2px;font-weight:500;display:flex;align-items:center;gap:6px}
.cat-count{opacity:.6;font-weight:400}
.prow{display:flex;align-items:flex-start;gap:10px;padding:6px 8px;border-radius:6px;transition:background .1s}
.prow:hover{background:rgba(196,134,42,.07)}
.prod-code-btn{font-size:11px;color:#9B7040;font-family:'Courier New',monospace;min-width:66px;padding:2px 4px 2px 0;flex-shrink:0;background:none;border:none;cursor:pointer;text-align:left;text-decoration:underline dotted #C4A070;text-underline-offset:2px;transition:color .12s;line-height:1.6}
.prod-code-btn:hover{color:#C4862A;text-decoration:underline solid #C4862A}
.has-photo{font-size:9px;margin-left:3px;opacity:.7;text-decoration:none;vertical-align:middle}
.prod-name{flex:1;font-size:13px;color:#2C1A0E}
.prod-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;max-width:160px;flex-shrink:0}
.btag{font-size:10px;padding:1px 6px;border-radius:5px;white-space:nowrap;line-height:1.8;border:1px solid transparent}
.btag-deli{background:#FEF7E8;color:#7A5210;border-color:#DEB84A}
.btag-restaurant{background:#FDF0E8;color:#7A3A14;border-color:#E09070}
.btag-hospital{background:#EEF4F0;color:#2A5A3A;border-color:#80B090}
.btag-school{background:#FEFCE4;color:#705A10;border-color:#D4AA30}
.btag-catering{background:#F8EFF4;color:#6A2A50;border-color:#C080A0}
.btag-hotel{background:#FDF6E8;color:#7A5A20;border-color:#D4A850}
.btag-cafe{background:#F0EAE4;color:#4A2C18;border-color:#A07858}
.btag-wholesale{background:#F0EDE8;color:#4A3C28;border-color:#A09070}
.dtag{font-size:10px;padding:1px 7px;border-radius:10px;white-space:nowrap;line-height:1.8;border:1px solid transparent}
.dtag-kp{background:#EAF0FD;color:#1A3A80;border-color:#7A9CD8}
.dtag-kd{background:#FDF0F5;color:#8A1A4A;border-color:#D87AA0}
.dtag-g{background:#FEFAE0;color:#6A5010;border-color:#D4B030}
.dtag-n{background:#FBF0E8;color:#6A3A10;border-color:#C49060}
.dtag-y{background:#E8F4FD;color:#1A4A7A;border-color:#6AAAD8}
.dtag-v{background:#E8F5EC;color:#1A5030;border-color:#60A878}
.dtag-x{background:#F4EDF8;color:#5A2878;border-color:#A870C8}
.dtag-l{background:#E8F5F5;color:#1A5858;border-color:#50A8A8}
.empty{color:#9B7040;font-size:14px;padding:3rem 0;text-align:center}

/* === MODAL === */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(44,26,14,.6);z-index:1000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.modal-overlay.open{display:flex}
.modal-card{background:#FDF8F0;border-radius:14px;width:100%;max-width:380px;box-shadow:0 24px 64px rgba(44,26,14,.4);overflow:hidden;position:relative;animation:modal-in .18s ease}
@keyframes modal-in{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:11px;right:12px;background:#EDE0CC;border:none;border-radius:50%;width:26px;height:26px;font-size:13px;cursor:pointer;color:#6A4418;display:flex;align-items:center;justify-content:center;transition:background .12s;z-index:2;line-height:1}
.modal-close:hover{background:#DDD0BC}
.modal-header{padding:16px 18px 12px;border-bottom:1px solid #EAD8C0}
.modal-code-lbl{font-family:'Courier New',monospace;font-size:11px;color:#C4862A;letter-spacing:.06em;font-weight:700;margin-bottom:4px}
.modal-name-lbl{font-family:'Playfair Display',Georgia,serif;font-size:16px;color:#2C1A0E;line-height:1.3;padding-right:22px}
.modal-img-wrap{background:#F5EDD8;min-height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.modal-img-wrap img{width:100%;max-height:250px;object-fit:cover;display:block}
.modal-nophoto{flex-direction:column;align-items:center;gap:8px;padding:32px 20px;display:flex}
.modal-nophoto-icon{font-size:38px;opacity:.45}
.modal-nophoto-txt{font-size:12px;color:#B08B60;text-align:center}
.modal-nophoto-key{font-family:'Courier New',monospace;font-size:10px;color:#C4A060;margin-top:2px}
.modal-footer{padding:10px 18px;border-top:1px solid #EAD8C0;display:flex;align-items:center;gap:8px}
.modal-nutri-row{font-size:11px;color:#B08B60;display:flex;align-items:center;gap:6px;flex:1}
.modal-nutri-badge{font-size:10px;background:#EAD8C0;color:#7A5020;padding:2px 9px;border-radius:20px;font-weight:500;white-space:nowrap}