/* Products & Recipes tab */
:root{
  --tc0-bg:#E3EEFD;--tc0-fg:#1F5FBF; --tc1-bg:#FFF1CF;--tc1-fg:#7F5600; --tc2-bg:#FDE4E4;--tc2-fg:#B02525;
  --tc3-bg:#D9F3F3;--tc3-fg:#0C6868; --tc4-bg:#E1F5E6;--tc4-fg:#1D7438; --tc5-bg:#F4E8DC;--tc5-fg:#7A4A1E;
  --tc6-bg:#ECE4FA;--tc6-fg:#5733A3; --tc7-bg:#E6EBF0;--tc7-fg:#3C4A5A; --tc8-bg:#FBE4F0;--tc8-fg:#9C2667;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --tc0-bg:#16263F;--tc0-fg:#8DB8F5; --tc1-bg:#382B0C;--tc1-fg:#F2C46B; --tc2-bg:#3B1616;--tc2-fg:#FF9E9E;
  --tc3-bg:#0F2E2E;--tc3-fg:#72D7D7; --tc4-bg:#12301C;--tc4-fg:#80DB99; --tc5-bg:#33251A;--tc5-fg:#E2B78C;
  --tc6-bg:#261C3A;--tc6-fg:#C1A5F5; --tc7-bg:#1E252D;--tc7-fg:#AEBBCA; --tc8-bg:#3A1529;--tc8-fg:#F59CCB}}
:root[data-theme="dark"]{
  --tc0-bg:#16263F;--tc0-fg:#8DB8F5; --tc1-bg:#382B0C;--tc1-fg:#F2C46B; --tc2-bg:#3B1616;--tc2-fg:#FF9E9E;
  --tc3-bg:#0F2E2E;--tc3-fg:#72D7D7; --tc4-bg:#12301C;--tc4-fg:#80DB99; --tc5-bg:#33251A;--tc5-fg:#E2B78C;
  --tc6-bg:#261C3A;--tc6-fg:#C1A5F5; --tc7-bg:#1E252D;--tc7-fg:#AEBBCA; --tc8-bg:#3A1529;--tc8-fg:#F59CCB}
.tc0{--tb:var(--tc0-bg);--tf:var(--tc0-fg)}.tc1{--tb:var(--tc1-bg);--tf:var(--tc1-fg)}.tc2{--tb:var(--tc2-bg);--tf:var(--tc2-fg)}
.tc3{--tb:var(--tc3-bg);--tf:var(--tc3-fg)}.tc4{--tb:var(--tc4-bg);--tf:var(--tc4-fg)}.tc5{--tb:var(--tc5-bg);--tf:var(--tc5-fg)}
.tc6{--tb:var(--tc6-bg);--tf:var(--tc6-fg)}.tc7{--tb:var(--tc7-bg);--tf:var(--tc7-fg)}.tc8{--tb:var(--tc8-bg);--tf:var(--tc8-fg)}
.tcall{--tb:var(--surface-2);--tf:var(--ink)}

/* upload zones are hidden on tabs where they don't belong; their display rules must not keep the gap */
.zones[hidden],.folderbar[hidden]{display:none}
/* sub-tabs: same underline style as the main menu, a size smaller */
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtabs .tab{font-size:14px;padding:8px 12px 7px;margin-bottom:-1px}
.subtabs .subcount{font:600 12px/1 var(--mono);color:var(--muted);background:var(--surface-2);border-radius:999px;padding:3px 7px}
.subtabs .tab[aria-selected="true"] .subcount{color:var(--accent-text);background:var(--accent-soft)}
.ptools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ptools input[type=search]{flex:1 1 220px;width:auto}
.ptagbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}

.ptag{display:inline-flex;align-items:center;max-width:100%;font:600 12px/1 var(--body);padding:5px 9px;border-radius:999px;background:var(--tb);color:var(--tf);border:1.5px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.ptag{cursor:var(--cur-pointer)}
button.ptag:hover{border-color:var(--tf)}
.ptag.on{border-color:var(--tf);box-shadow:0 0 0 1px var(--tf) inset}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pcard{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);min-width:0}
.pcard:hover{border-color:var(--accent)}
.pimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-2)}
.pph{display:flex;align-items:center;justify-content:center;background:var(--tb);color:var(--tf)}
.pbody{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;min-width:0}
.ptop{display:flex;gap:6px;flex-wrap:wrap;min-height:22px}
.pname{font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.pdesc{color:var(--muted);font-size:13px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pmeta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.pprice{font-weight:600;color:var(--ink)}
.psup{color:var(--muted);font-size:12px;overflow-wrap:anywhere}

.plist tr[data-act]{cursor:var(--cur-pointer)}
.plist tr[data-act]:hover td{background:var(--surface-2)}
.plist td{vertical-align:middle}
.pthumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;display:flex}

.ptagedit{padding:16px;margin-bottom:14px}
.ptagedit h3{margin:0 0 4px;font:700 17px/1.2 var(--display)}
.ptagrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ptagrow input[type=text]{flex:1 1 160px;width:auto}
.swatches{display:flex;gap:4px;flex-wrap:wrap}
.sw{width:24px;height:24px;border-radius:50%;padding:0;background:var(--tb);border:2px solid var(--tf);cursor:var(--cur-pointer)}
.sw.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--tf)}

.modal.pmodal{max-width:760px}
.pmgrid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px}
.pmphoto img,.pmphoto .pph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:flex}
.pmphoto .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pmfields{display:grid;gap:12px;min-width:0}
@media (max-width:600px){.pmgrid{grid-template-columns:minmax(0,1fr)}.pmphoto{max-width:220px}}

.rgrid .rcard .pbody{padding:14px}
.rres{display:grid;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px;margin:-4px 0 12px;max-height:340px;overflow:auto}
.rresi{display:flex;align-items:center;gap:10px;background:none;border:0;text-align:left;padding:6px 8px;border-radius:8px;width:100%}
.rresi:hover,.rresi:focus-visible{background:var(--surface-2)}
.rresi .nm{flex:1;min-width:0;display:flex;flex-direction:column}
.rresi .nm small{color:var(--muted)}
.ritems td{vertical-align:middle}
.rqty{display:flex;gap:6px;align-items:center}
.rqty input{width:96px}
.rqty select{width:auto}
.rfrac{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.rfrac .btn{padding:3px 10px;font-size:13px;border-radius:999px}
.rfrac .btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.kpi em.note{display:block;margin:2px 0 0;font-size:12px}