:root{
  --bg:#FFF7EC; --ink:#2A1B3D; --muted:#76688A; --card:#FFFFFF;
  --pink:#FF4F79; --orange:#FF9F1C; --sun:#FFC93C; --purple:#7B3FE4; --sky:#2EB5F0; --coral:#FF6B4A;
  --dier:#CA2118; --schn:#D92931;
  --r:22px; --shadow:0 6px 0 rgba(42,27,61,.08), 0 10px 28px rgba(42,27,61,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.4;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255,201,60,.35) 0 60px, transparent 61px),
    radial-gradient(circle at 96% 30%, rgba(46,181,240,.18) 0 90px, transparent 91px),
    radial-gradient(circle at 4% 70%, rgba(255,79,121,.14) 0 80px, transparent 81px),
    radial-gradient(circle at 92% 92%, rgba(123,63,228,.14) 0 100px, transparent 101px);
  background-attachment:fixed;
}
.wrap{max-width:640px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 28px)}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.muted{color:var(--muted)}
[hidden]{display:none!important}

/* Update note */
.status{
  display:flex; gap:10px; align-items:center;
  background:#fff; border:2.5px solid var(--ink); border-radius:16px;
  padding:10px 12px; font-weight:800; font-size:14px; line-height:1.3;
  box-shadow:4px 4px 0 var(--ink);
}
.status .seg{display:inline-block}
.status .ic{color:var(--pink); width:22px; height:22px}

/* Ad weeks row */
.adweeks{display:flex; gap:10px; margin:12px 0 4px; flex-wrap:wrap}
.adweek{
  flex:1 1 46%; min-width:150px; display:flex; flex-direction:column; gap:6px;
  background:#fff; border-radius:16px; padding:10px 12px; box-shadow:var(--shadow);
}
.adweek .dates{display:flex; align-items:center; gap:6px; font-weight:800; font-size:15px}
.adweek .dates .ic{color:var(--purple)}
.adweek .lbl{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* Store badges */
.badge{min-height:30px; display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 11px 4px 5px; font-weight:900; font-size:14px; line-height:1; white-space:nowrap; align-self:flex-start}
.badge img{display:block}
.badge.dierbergs{background:var(--dier); color:#fff}
.badge.dierbergs img{width:22px;height:22px;border-radius:50%;background:#fff;padding:1px}
.badge.schnucks{background:#fff; border:2px solid var(--schn); padding:5px 10px}
.badge.schnucks img{height:13px;width:auto}
.badge.generic{background:var(--purple); color:#fff; padding:5px 11px}

/* Title */
.title{display:flex; align-items:center; gap:12px; margin:18px 2px 12px}
.title-icon{border-radius:14px; box-shadow:0 4px 12px rgba(255,79,121,.35)}
h1{margin:0; font-size:32px; line-height:1; font-weight:900; letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--pink),var(--orange) 55%,var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{margin:4px 0 0; color:var(--muted); font-weight:700; font-size:15px}

/* Headline (top pick) */
.headline{
  position:relative; overflow:hidden; border-radius:var(--r); padding:16px 18px 18px; color:#fff;
  background:linear-gradient(135deg,#FF9F1C 0%,#FF4F79 52%,#7B3FE4 100%); box-shadow:var(--shadow);
}
.headline::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.16)}
.headline .k{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.22);padding:5px 10px;border-radius:999px}
.headline .k .ic{color:#FFE066}
.headline p{margin:10px 0 0; font-size:22px; line-height:1.25; font-weight:900}

/* Notes */
.notes{display:flex; gap:10px; margin-top:12px; background:#FFF1B8; border-radius:18px; padding:12px 14px; font-size:15.5px; font-weight:600; transform:rotate(-.4deg); box-shadow:0 4px 0 rgba(0,0,0,.06)}
.notes .ic{color:var(--orange); width:22px; height:22px; margin-top:1px}
.offline{display:flex; gap:8px; align-items:center; margin-top:12px; background:#E8E1F7; color:#4B2C8F; padding:10px 14px; border-radius:14px; font-weight:700; font-size:15px}

/* Deals */
.deals{display:grid; gap:14px; margin-top:18px}
.deal{
  --accent:var(--pink); --tint:#FFE3EA;
  position:relative; background:var(--card); border-radius:var(--r); padding:16px; box-shadow:var(--shadow);
  border-top:7px solid var(--accent);
  display:grid; grid-template-columns:64px 1fr; gap:4px 14px;
}
.deal .food{grid-row:1 / span 2; width:64px; height:64px; border-radius:20px; background:var(--tint); display:grid; place-items:center; font-size:38px; line-height:1}
.deal .top{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:28px}
.deal h2{margin:2px 0 0; font-size:20.5px; line-height:1.2; font-weight:900; letter-spacing:-.01em}
.deal .body{grid-column:1 / -1}
.price{display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:24px; font-weight:900; color:var(--ink); background:var(--tint); padding:6px 14px; border-radius:14px}
.price .ic{color:var(--accent); width:20px;height:20px}
.extra{margin:8px 0 0; color:var(--muted); font-size:15px; font-weight:600}
.why{display:flex; gap:8px; margin:10px 0 0; font-size:16.5px; font-weight:600}
.why .ic{color:var(--accent); margin-top:2px}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:900; padding:5px 10px; border-radius:999px; line-height:1}
.chip.top{background:#FFE066; color:#6B4A00}
.chip.top .ic{color:#FF9F1C}
.chip.list{background:#DDF3FF; color:#0D5E86}
.chip.list .ic{color:var(--sky)}
.chip.other{background:#EFE6FF; color:#4B2C8F}
.deal.is-top{box-shadow:0 0 0 3px #FFE066, var(--shadow)}

.c0{--accent:#FF4F79;--tint:#FFE3EA}
.c1{--accent:#FF9F1C;--tint:#FFEFD6}
.c2{--accent:#2EB5F0;--tint:#DDF3FF}
.c3{--accent:#7B3FE4;--tint:#EFE6FF}
.c4{--accent:#FF6B4A;--tint:#FFE6DF}
.c5{--accent:#E2A400;--tint:#FFF4C7}

/* Past weeks */
.past{margin-top:22px; background:#fff; border-radius:18px; box-shadow:var(--shadow); overflow:hidden}
.past>summary{list-style:none; cursor:pointer; padding:14px 16px; font-weight:900; font-size:16px; display:flex; align-items:center; gap:8px}
.past>summary::-webkit-details-marker{display:none}
.past>summary .ic{color:var(--purple)}
.past .chev{margin-left:auto; font-size:22px; transition:transform .2s; color:var(--muted)}
.past[open] .chev{transform:rotate(90deg)}
.past-list{padding:0 16px 14px}
.week{border-top:1.5px dashed #E6DDF0; padding:10px 0}
.week summary{cursor:pointer; font-weight:800; font-size:15.5px}
.week ul{margin:8px 0 0; padding-left:0; list-style:none; display:grid; gap:6px}
.week li{font-size:15px; display:flex; gap:8px; align-items:baseline}
.week li .e{font-size:18px}
.week li b{font-weight:800}

.foot{margin-top:22px; font-size:13.5px; text-align:center}
.foot p{margin:6px 0}

@media (min-width:600px){ .deals{grid-template-columns:1fr 1fr} .deal.is-top{grid-column:1 / -1} }