/* Shopping Trolley on Smart Scan & Shopping. Prefix tr-. */
#huTrolley{ background:#fff; padding:44px 20px 52px; font-family:'Nunito',system-ui,sans-serif; }
#huTrolley .tr-wrap{ max-width:1120px; margin:0 auto; }
#huTrolley .tr-lead{ display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
#huTrolley .tr-lead-em{ font-size:1.9rem; line-height:1; flex:none; }
#huTrolley .tr-h{ margin:0; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huTrolley .tr-p{ margin:6px 0 0; font-size:.95rem; line-height:1.6; max-width:62ch;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huTrolley .tr-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

#huTrolley .tr-add{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:10px; }
#huTrolley .tr-in{ flex:1 1 260px; min-width:0; border:1.5px solid #E5E1DA; border-radius:14px;
  padding:12px 15px; font-family:inherit; font-size:.94rem; background:#FDFCFA; min-height:48px;
  color:#243447; }
#huTrolley .tr-sel{ border:1.5px solid #E5E1DA; border-radius:14px; padding:12px 14px; min-height:48px;
  font-family:inherit; font-size:.88rem; background:#FDFCFA; color:#243447; }
#huTrolley .tr-in:focus,#huTrolley .tr-sel:focus{ outline:none; border-color:#5F7350; background:#fff; }
#huTrolley .tr-acts{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
#huTrolley .tr-btn{ cursor:pointer; font-family:inherit; font-size:.84rem; font-weight:800;
  border-radius:999px; padding:12px 18px; min-height:48px;
  background:#fff !important; border:1px solid rgba(36,52,71,.14);
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huTrolley .tr-btn:hover{ background:#EEF4EC !important; border-color:#5F7350; }
#huTrolley .tr-btn--p{ background:#243447 !important; border-color:#243447 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
#huTrolley .tr-btn--p:hover{ background:#31465F !important; }
#huTrolley .tr-btn--ghost{ background:none !important; border:0; text-decoration:underline;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huTrolley .tr-btn:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }

#huTrolley .tr-group{ background:#FDFCFA; border:1px solid #EDE9E1; border-radius:20px;
  padding:16px 18px; margin-bottom:14px; }
#huTrolley .tr-g-h{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
#huTrolley .tr-g-ic{ font-size:1.15rem; }
#huTrolley .tr-g-t{ margin:0; font-size:1rem; font-weight:800;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huTrolley .tr-g-n{ margin-left:auto; font-size:.8rem; font-weight:800; border-radius:999px;
  padding:3px 11px; background:#EEF4EC;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important; }
#huTrolley .tr-list{ list-style:none; margin:0; padding:0; }
#huTrolley .tr-item{ display:flex; align-items:center; gap:12px; padding:10px 0;
  border-top:1px solid #F1EEE8; }
#huTrolley .tr-item:first-child{ border-top:0; }
#huTrolley .tr-item.is-done .tr-n{ text-decoration:line-through; opacity:.55; }
#huTrolley .tr-tick{ width:44px; height:44px; flex:none; border-radius:50%; cursor:pointer;
  border:2px solid #CFE0C8; background:#fff; font-size:1rem; font-weight:800;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important; }
#huTrolley .tr-tick[aria-checked="true"]{ background:#EEF4EC; border-color:#5F7350; }
#huTrolley .tr-b{ flex:1; min-width:0; }
#huTrolley .tr-n{ display:block; font-size:.95rem; font-weight:700;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huTrolley .tr-s{ display:block; margin-top:2px; font-size:.78rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huTrolley .tr-x{ width:44px; height:44px; flex:none; border-radius:50%; cursor:pointer;
  border:1px solid rgba(36,52,71,.12); background:#fff; font-size:.9rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huTrolley .tr-x:hover{ background:#FCEAEA !important; border-color:#C4707F; }
#huTrolley .tr-empty{ margin:0; font-size:.95rem;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }

#huTrolley .tr-receipt{ margin-top:22px; background:#FBF6EC; border:1px solid #EFE3CE;
  border-radius:20px; padding:18px 20px; }
#huTrolley .tr-r-h{ display:flex; gap:13px; align-items:flex-start; margin-bottom:13px; }
#huTrolley .tr-r-h span{ font-size:1.4rem; line-height:1; }
#huTrolley .tr-r-h b{ font-size:1rem;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#huTrolley .tr-r-h p{ margin:4px 0 0; font-size:.88rem; line-height:1.55;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#huTrolley .tr-r-b{ display:flex; gap:9px; flex-wrap:wrap; }
@media (max-width:560px){
  #huTrolley{ padding:32px 16px 40px; }
  #huTrolley .tr-add .tr-btn--p,#huTrolley .tr-sel{ flex:1 1 100%; }
}

/* The Yellow Sticker page's own hero text runs ~10px past a 320px screen: its
   inner block is 310px wide starting at x20, inside a 280px `.ys-hero`. Only
   visible now the page renders its content again. Pre-existing to the page. */
@media (max-width:340px){
  #page-ys-feature .kb-h1,
  #page-ys-feature .kb-lede,
  #page-ys-feature .kb-eyebrow,
  #page-ys-feature .kb-hero-ctas{ max-width:100% !important; }
  /* the inner block is 310px WIDE inside a 280px .ys-hero — a max-width alone will
     not pull it in, the width itself has to give */
  #page-ys-feature .ys-hero > *{
    max-width:100% !important; width:100% !important; min-width:0 !important;
    box-sizing:border-box;
  }
  #page-ys-feature .ys-hero{ overflow-x:hidden; }
  #page-ys-feature .kb-hero-ctas{ flex-wrap:wrap; }
  #page-ys-feature .kb-btn{ max-width:100% !important; white-space:normal !important; }
  #page-ys-feature .kb-h1{ font-size:1.5rem !important; word-break:break-word; }
}

/* back to My Kitchen, at the top of Yellow Sticker Shopping */
#ysBackWrap{ max-width:1120px; margin:0 auto; padding:18px clamp(16px,4vw,20px) 0;
  font-family:'Nunito',system-ui,sans-serif; }
#ysBackWrap .ys-back{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:.84rem; font-weight:800;
  border-radius:999px; padding:11px 18px; min-height:44px;
  background:#fff !important; border:1px solid rgba(36,52,71,.14);
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  box-shadow:0 3px 12px rgba(0,0,0,.06);
}
#ysBackWrap .ys-back:hover{ background:#EEF4EC !important; border-color:#5F7350; }
#ysBackWrap .ys-back:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }