/* ==== Smart Scan & Shopping: inline dashboard + barcode scanner =========== */
/* the two "Open Yellow Sticker Shopping" buttons are gone — the dashboard is on
   this page now, so a button to a second page would be a route to a duplicate */
#page-ys-feature [data-ys-go="page-ys-dashboard"]{ display:none !important; }
/* THE PAGE ITSELF has always carried two back controls, one above the other:
   `.ys-back` "← Back to My Kitchen" at the very top, then `.kb-back` "My Kitchen"
   inside `.kb-wrap` just below it. Not caused by the inlined dashboard — it was
   there before. The lower one goes; the labelled one at the top stays. */
#page-ys-feature > .kb-wrap > .kb-back,
#page-ys-feature .kb-wrap > .kb-back{ display:none !important; }
#ysxScan.ysx-scanwrap, #ysxDash.ysx-dash{
  max-width:1100px; margin:0 auto 22px; padding:0 clamp(16px,4vw,28px);
  font-family:'Nunito',system-ui,sans-serif;
}
#ysxScan .ysx-scan, #ysxDash .ysx-dbody{
  background:#fff; border:1px solid #E8E4DC; border-radius:22px; padding:22px;
}
#ysxDash .ysx-dh{ margin:0 0 12px; }
#ysxDash .ysx-h, #ysxScan .ysx-sh{
  margin:0 0 4px; font-family:'Playfair Display',Georgia,serif; font-size:1.24rem; font-weight:700;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#ysxDash .ysx-sub, #ysxScan .ysx-ssub{
  margin:0; font-size:.88rem; line-height:1.55; max-width:62ch;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#ysxScan .ysx-shead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
#ysxScan .ysx-btn{
  cursor:pointer; font:inherit; font-size:.86rem; font-weight:800; border-radius:999px;
  padding:12px 20px; min-height:46px;
  background:#fff !important; border:1px solid #E4DFD2 !important;
  color:#3F4753 !important; -webkit-text-fill-color:#3F4753 !important;
}
#ysxScan .ysx-btn:hover{ background:#F4F6F1 !important; border-color:#CFE0C8 !important; }
#ysxScan .ysx-btn.is-primary{
  background:#4E6640 !important; border-color:#4E6640 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
#ysxScan .ysx-btn:focus-visible, #ysxScan .ysx-i:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
#ysxScan .ysx-cam{
  position:relative; background:#111; border-radius:16px; overflow:hidden;
  aspect-ratio:4/3; max-height:420px;
}
#ysxScan .ysx-cam video{ width:100%; height:100%; object-fit:cover; display:block; }
#ysxScan .ysx-frame{
  position:absolute; left:12%; right:12%; top:34%; height:32%;
  border:3px solid rgba(255,255,255,.9); border-radius:12px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.28);
}
#ysxScan .ysx-camfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; }
#ysxScan .ysx-status{
  font-size:.84rem; font-weight:700;
  color:#3F4753 !important; -webkit-text-fill-color:#3F4753 !important;
}
#ysxScan .ysx-manual{ margin-top:16px; padding-top:16px; border-top:1px solid #EFEAE0; }
#ysxScan .ysx-ml{
  display:block; margin-bottom:6px; font-size:.72rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:#4E5A49 !important; -webkit-text-fill-color:#4E5A49 !important;
}
#ysxScan .ysx-mrow{ display:flex; gap:10px; flex-wrap:wrap; }
#ysxScan .ysx-i{
  flex:1; min-width:200px; box-sizing:border-box; min-height:46px;
  border:1px solid #E4DFD2; border-radius:14px; padding:11px 14px; font:inherit; font-size:.9rem;
  background:#fff; color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#ysxScan .ysx-hint{
  margin:8px 0 0; font-size:.78rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#ysxScan .ysx-res{
  margin-top:18px; padding:18px; background:#FBFDFA; border:1px solid #DDE7D7; border-radius:18px;
}
#ysxScan .ysx-res.is-none{ background:#FBFAF8; border-color:#E4DFD2; border-style:dashed; }
#ysxScan .ysx-rhead{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
#ysxScan .ysx-rn{
  font-family:'Playfair Display',Georgia,serif; font-size:1.2rem; font-weight:700;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#ysxScan .ysx-rb{ font-size:.86rem; color:#4A5462 !important; -webkit-text-fill-color:#4A5462 !important; }
#ysxScan .ysx-rc{ font-size:.76rem; font-family:ui-monospace,Menlo,monospace;
  color:#5F6773 !important; -webkit-text-fill-color:#5F6773 !important; }
#ysxScan .ysx-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
#ysxScan .ysx-tag{
  border-radius:999px; padding:4px 11px; font-size:.72rem; font-weight:800; background:#EDF3E9;
  color:#41533C !important; -webkit-text-fill-color:#41533C !important;
}
#ysxScan .ysx-per{
  margin:0 0 8px; font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#4E5A49 !important; -webkit-text-fill-color:#4E5A49 !important;
}
#ysxScan .ysx-nut{ width:100%; border-collapse:collapse; margin-bottom:14px; }
#ysxScan .ysx-nut th, #ysxScan .ysx-nut td{
  text-align:left; padding:8px 10px; font-size:.86rem; border-bottom:1px solid #EFEAE0;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#ysxScan .ysx-nut th{ font-weight:600; color:#4A5462 !important; -webkit-text-fill-color:#4A5462 !important; }
#ysxScan .ysx-nut td{ text-align:right; font-weight:800; }
#ysxScan .ysx-racts{ display:flex; gap:10px; flex-wrap:wrap; }
#ysxScan .ysx-rt{ margin:0 0 6px; font-size:.98rem; font-weight:800;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#ysxScan .ysx-rm{ margin:0 0 12px; font-size:.84rem; line-height:1.55;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
.ysx-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px); z-index:10004;
  background:#243447; color:#fff !important; -webkit-text-fill-color:#fff !important;
  padding:12px 20px; border-radius:999px; font-size:.85rem; font-weight:700;
  font-family:'Nunito',system-ui,sans-serif; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.ysx-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:600px){
  #ysxScan .ysx-shead .ysx-btn{ width:100%; }
  #ysxScan .ysx-i{ min-width:0; width:100%; }
  #ysxScan .ysx-mrow .ysx-btn{ width:100%; }
  #ysxScan .ysx-racts .ysx-btn{ width:100%; }
}