:root {
  --green: #2e7d32;
  --green-dark: #1b5e20;
  --bg: #f5f7f4;
  --card: #ffffff;
  --ink: #1f2a24;
  --muted: #6b7a70;
  --line: #e2e8e2;
  --accent: #0b6e4f;
  --soon: #c62828;
  /* Deals that haven't started yet. Purple because every other hue is taken:
     red is "ending soon", green is the brand and the unit price beside it, and
     blue is the seafood chip. Distinguishable from all three for the common
     forms of colour blindness, which matters for an older audience. */
  --upcoming: #8e24aa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
}

/* Header */
header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 12px 20px;
  background: var(--green); color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.brand { font-size: 1.35rem; font-weight: 700; }
.cart { font-size: 1.4rem; }
.headtools { display: flex; align-items: center; gap: 10px; }
.langtoggle { display: inline-flex; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; overflow: hidden; }
.langtoggle button {
  border: none; background: transparent; color: #fff;
  padding: 6px 13px; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.langtoggle button.active { background: #fff; color: var(--green-dark); }
.iconbtn {
  border: none; background: rgba(255, 255, 255, .15); color: #fff;
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { background: rgba(255, 255, 255, .3); }

/* Controls */
.controls { max-width: 1100px; margin: 16px auto 0; padding: 0 16px; }
.updated { color: var(--muted); font-size: .9rem; }
.storesline { margin: 6px 0 12px; font-size: .95rem; }
.stores-label { color: var(--green-dark); font-weight: 700; }
.linkbtn {
  border: none; background: none; color: var(--accent); font-weight: 600;
  cursor: pointer; padding: 0; font-size: inherit; text-decoration: underline;
}
.linkbtn:hover { color: var(--green-dark); }

.searchrow { display: flex; gap: 10px; }
#search {
  flex: 1; padding: 14px 16px; font-size: 1.1rem;
  border: 2px solid var(--line); border-radius: 10px; background: var(--card);
}
#search:focus { outline: none; border-color: var(--green); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; }
.group { display: flex; align-items: center; gap: 8px; }
.lbl { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; cursor: pointer; }
.chk.pad { margin-left: auto; }
.chk.meats { background: #fdecea; border: 1px solid #f3c0b8; padding: 6px 12px; border-radius: 20px; font-weight: 600; }
.chk.meats input { accent-color: var(--soon); }
.chk.seafood { background: #e7f1fb; border: 1px solid #b8d4f0; padding: 6px 12px; border-radius: 20px; font-weight: 600; }
.chk.seafood input { accent-color: #1565c0; }
.chk input { width: 18px; height: 18px; accent-color: var(--green); }

select { padding: 9px 12px; font-size: .95rem; border: 2px solid var(--line); border-radius: 8px; background: var(--card); }

/* Results */
main { max-width: 1100px; margin: 14px auto 40px; padding: 0 16px; }
.summary { color: var(--muted); font-size: .9rem; margin: 6px 2px 10px; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
thead th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #eef3ee; padding: 12px 14px; border-bottom: 2px solid var(--line); }
th.num, td.num { text-align: right; }
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: #f3f8f3; }
td.prod { display: flex; align-items: center; gap: 12px; }
td.prod img { width: 46px; height: 46px; object-fit: contain; border-radius: 6px; background: #fafafa; flex: none; cursor: zoom-in; }
td.prod img:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.name { font-weight: 600; line-height: 1.25; }
.sub { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.size { background: #eef3ee; padding: 1px 7px; border-radius: 20px; }
.sale { color: var(--soon); font-weight: 600; margin-left: 6px; }
td.price { font-weight: 700; font-size: 1.05rem; }
.unit { font-weight: 700; color: var(--accent); }
.alt { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; }
.muted { color: #b9c2bb; }
.ends { white-space: nowrap; }
.soon { color: var(--soon); font-weight: 700; }
.upcoming { color: var(--upcoming); font-weight: 700; }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; font-size: 1.05rem; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 0 16px 30px; }

/* Preferences / welcome dialog */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .5); }
.modal[hidden] { display: none; }
.modal-card { position: relative; background: var(--card); border-radius: 14px; padding: 24px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.modal-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: none; background: #eef3ee; border-radius: 50%; font-size: 1.1rem; cursor: pointer; color: var(--ink); }
.modal-close:hover { background: #dce7dc; }
.modal-card h2 { margin: 0 34px 6px 0; color: var(--green-dark); font-size: 1.4rem; }
.modal-intro { margin: 0 0 18px; color: var(--muted); line-height: 1.4; }
.pref-section { margin-bottom: 20px; }
.pref-label { font-weight: 700; margin-bottom: 10px; }
.langchoice { display: flex; gap: 10px; }
.langchoice button { flex: 1; padding: 10px; font-size: 1rem; font-weight: 600; border: 2px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; }
.langchoice button.active { border-color: var(--green); background: #eef6f2; color: var(--green-dark); }
.pref-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.pref-store { display: flex; align-items: center; gap: 8px; font-size: 1rem; cursor: pointer; padding: 4px 0; }
.pref-store input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.pref-note { color: var(--muted); font-size: .82rem; }
/* Intro / help dialog. Deliberately roomy type — the main audience is seniors. */
.intro-free { margin: 0 0 18px; line-height: 1.5; font-size: 1.02rem; }
.intro-free strong { color: var(--green-dark); }
.intro-h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--ink); }
.intro-steps { margin: 0 0 18px; padding-left: 22px; line-height: 1.55; }
.intro-steps li { margin-bottom: 9px; }
.intro-steps strong { color: var(--green-dark); }
.intro-note { margin: 0 0 20px; color: var(--muted); font-size: .9rem; line-height: 1.45; }

.prefs-warn { color: var(--soon); font-weight: 600; margin: 0 0 12px; }
.prefs-warn[hidden] { display: none; }
button.primary { padding: 0 20px; font-size: 1rem; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 10px; cursor: pointer; }
button.primary:hover { background: var(--green-dark); }
button.primary.big { width: 100%; padding: 14px; font-size: 1.1rem; }

/* Enlarged product image */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .82); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox-figure img { max-width: 92vw; max-height: 78vh; object-fit: contain; background: #fff; border-radius: 10px; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
.lightbox-caption { color: #fff; font-size: 1.1rem; font-weight: 600; text-align: center; max-width: 90vw; }
.lightbox-close { position: absolute; top: 16px; right: 20px; width: 48px; height: 48px; font-size: 1.5rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, .4); border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; cursor: pointer; }
.lightbox-close:hover { background: rgba(0, 0, 0, .7); }

/* My List — header button + badge */
.listbtn { position: relative; overflow: visible; }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--soon); color: #fff; font-size: .72rem; font-weight: 700;
  line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--green);
}
.badge[hidden] { display: none; }

/* My List — "add to list" checkbox on each row */
.pick { display: inline-flex; align-items: center; flex: none; cursor: pointer; }
.pick input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
tbody tr.picked { background: #eaf6ee; }
tbody tr.picked:hover { background: #e2f1e6; }

/* My List — modal contents */
.list-empty { color: var(--muted); line-height: 1.5; padding: 10px 2px 18px; }
.list-store { font-weight: 700; color: var(--green-dark); margin: 16px 0 4px; font-size: .95rem; }
.list-store:first-child { margin-top: 4px; }
.list-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.li-name { flex: 1; line-height: 1.3; }
.li-size { color: var(--muted); font-size: .82rem; }
.li-price { font-weight: 700; white-space: nowrap; }
.li-remove { border: none; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; flex: none; }
.li-remove:hover { color: var(--soon); }
.list-total { text-align: right; font-weight: 700; margin: 12px 2px 0; }
.list-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.list-actions[hidden] { display: none; }
.list-actions button.primary { padding: 12px 22px; }
button.secondary {
  padding: 12px 22px; font-size: 1rem; font-weight: 600; color: var(--accent);
  background: #eef6f2; border: 2px solid var(--accent); border-radius: 10px; cursor: pointer;
}
button.secondary:hover { background: #e0efe8; }
.linkbtn.danger { color: var(--soon); margin-left: auto; }
.linkbtn.danger:hover { color: #8e1b1b; }

/* Ko-fi "buy me a coffee" link (in the header) */
.kofi {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: #fff6e5; border: 1px solid #f0d9a8; color: #7a5b12;
  padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  white-space: nowrap;
}
.kofi:hover { background: #fdefd0; }
.kofi[hidden] { display: none; }
.kofi-emoji { font-size: 1.1rem; line-height: 1; }

/* Banner ad — sticky bottom bar (transparent; only the banner is opaque) */
.adbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; padding: 8px 16px;
  background: transparent;
  pointer-events: none;   /* transparent sides don't block clicks/scroll on content beneath */
}
.adbar[hidden] { display: none; }
.adbanner {
  display: inline-block; line-height: 0; border-radius: 10px; overflow: hidden;
  max-width: min(1100px, 100%); pointer-events: auto;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}
.adbanner img { display: block; max-width: 100%; height: auto; max-height: 80px; }

/* .adbar is pointer-events:none so its transparent margins don't block the page,
   so this wrapper has to switch pointer events back on for the ✕ (the banner
   itself does the same). */
.adwrap { position: relative; display: inline-block; max-width: min(1100px, 100%); pointer-events: auto; }
.adclose {
  position: absolute; top: -8px; right: -8px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff; background: var(--ink); color: #fff;
  font-size: .85rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.adclose:hover { background: #000; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: .95rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); z-index: 120;
}
.toast[hidden] { display: none; }

/* Mobile */
@media (max-width: 640px) {
  header { padding: 10px 14px; }
  .brand { font-size: 1.15rem; }
  .chk.pad { margin-left: 0; }
  .pref-stores { grid-template-columns: 1fr; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tbody tr { padding: 8px 4px; border-bottom: 8px solid var(--bg); }
  tbody td { border: none; padding: 4px 10px; }
  td.num { text-align: left; }
  td.prod { padding-top: 8px; }

  header { gap: 8px; }
  .brand { font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .headtools { gap: 6px; }
  .iconbtn { width: 36px; height: 36px; font-size: 1.05rem; }
  .langtoggle button { padding: 6px 10px; }
  .linkbtn.danger { margin-left: 0; }
  .kofi-text { display: none; }
  .kofi { padding: 7px 10px; }
}