/* Yellow Sticker Shopping — reuses kb-/rh-/sf- systems; yellow used sparingly. */
#page-ys-feature .ys-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:52px 0 40px; }
.ys-preview{ background:#fff; border:1px solid #E8E4DC; border-radius:26px; padding:20px; box-shadow:0 16px 40px rgba(32,53,75,.08); }
.ys-prev-top{ display:flex; gap:14px; align-items:flex-start; }
.ys-prev-img{ width:76px; height:76px; flex:0 0 76px; border-radius:18px; background:#F6F4EF; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.ys-prev-n{ font-family:Georgia,serif; font-size:1.1rem; font-weight:700; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin:0; }
.ys-prices{ display:flex; align-items:baseline; gap:9px; margin-top:6px; }
.ys-was{ font-size:0.86rem; color:#9aa0a8 !important; -webkit-text-fill-color:#9aa0a8 !important; text-decoration:line-through; }
.ys-now{ font-size:1.15rem; font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; }
.ys-badge{ display:inline-block; background:#FBF0CE; color:#7a6338 !important; -webkit-text-fill-color:#7a6338 !important;
  border-radius:50px; padding:4px 11px; font-size:0.7rem; font-weight:800; }
.ys-prev-rows{ margin-top:16px; border-top:1px solid #F1EEE8; padding-top:14px; display:flex; flex-direction:column; gap:9px; }
.ys-prev-row{ display:flex; justify-content:space-between; gap:12px; font-size:0.84rem; }
.ys-prev-k{ color:#687383 !important; -webkit-text-fill-color:#687383 !important; }
.ys-prev-v{ font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; }
.ys-prev-v.is-save{ color:#4d6a50 !important; -webkit-text-fill-color:#4d6a50 !important; }

/* status badges — calm, no alarm styling */
.ys-status{ display:inline-flex; align-items:center; gap:6px; border-radius:50px; padding:4px 11px; font-size:0.7rem; font-weight:800; }
.ys-status.s-today{ background:#FBF0CE; color:#7a6338 !important; -webkit-text-fill-color:#7a6338 !important; }
.ys-status.s-soon{ background:#F5F1E4; color:#7d7355 !important; -webkit-text-fill-color:#7d7355 !important; }
.ys-status.s-freeze{ background:#EDF3F6; color:#3f6377 !important; -webkit-text-fill-color:#3f6377 !important; }
.ys-status.s-planned{ background:#EFF4ED; color:#4d6a50 !important; -webkit-text-fill-color:#4d6a50 !important; }
.ys-status.s-used{ background:#EFF4ED; color:#4d6a50 !important; -webkit-text-fill-color:#4d6a50 !important; }
.ys-status.s-none{ background:#F6F4EF; color:#687383 !important; -webkit-text-fill-color:#687383 !important; }
.ys-status.s-discard{ background:#F4EEEC; color:#8a6a62 !important; -webkit-text-fill-color:#8a6a62 !important; }

/* item rows */
.ys-item{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; background:#fff;
  border:1px solid #E8E4DC; border-radius:20px; padding:14px; margin-top:12px; }
.ys-item-img{ width:64px; height:64px; border-radius:16px; background:#F6F4EF; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.ys-item-n{ font-weight:800; font-size:0.98rem; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin:0; }
.ys-item-m{ font-size:0.8rem; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:4px 0 0; }
.ys-item-acts{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ys-mini{ border:1px solid #E8E4DC; background:#fff; border-radius:50px; padding:8px 13px; font-family:inherit;
  font-size:0.74rem; font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; cursor:pointer; min-height:40px; }
.ys-mini:hover{ border-color:#B9CDB4; background:#FBFAF7; }

/* dashboard cards */
.ys-dash{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.ys-panel{ background:#fff; border:1px solid #E8E4DC; border-radius:22px; padding:20px; }
.ys-panel-h{ font-size:0.7rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#6F9272 !important; -webkit-text-fill-color:#6F9272 !important; margin:0 0 10px; }
.ys-big{ font-family:Georgia,serif; font-size:1.8rem; font-weight:700; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin:0; }
.ys-est{ font-size:0.72rem; color:#8b929b !important; -webkit-text-fill-color:#8b929b !important; margin:3px 0 0; }

/* safety notice */
.ys-safety{ background:#FBFAF7; border:1px solid #E8E4DC; border-radius:18px; padding:16px 18px; margin-top:16px; }
.ys-safety p{ font-size:0.82rem; line-height:1.65; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:0; }
.ys-safety strong{ color:#20354B !important; -webkit-text-fill-color:#20354B !important; }

@media (max-width:1024px){
  #page-ys-feature .ys-hero{ grid-template-columns:1fr; gap:28px; }
  .ys-dash{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  #page-ys-feature .ys-hero{ padding:28px 0 22px; }
  .ys-dash{ grid-template-columns:1fr; }
  .ys-item{ grid-template-columns:52px 1fr; }
  .ys-item-img{ width:52px; height:52px; font-size:1.3rem; }
  .ys-item-acts{ grid-column:1 / -1; justify-content:flex-start; }
}