/* A retail look: white header with a big search, underlined tabs, product photos on white tiles (a quiet line icon
   where there is no photo), cards with the price up front. Mobile first, logical properties (right-to-left and
   left-to-right), text contrast >= 4.5:1 in both themes. --pic is the display size the two size buttons and two
   fingers set (0.75–3, theme.js): the pictures follow it, and on a touch screen the text too, 1 to 2 times. Heebo is served from this site (fonts/, SIL OFL); Russian falls back to the system font. */
@font-face { font-family: "Heebo"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/static/fonts/heebo-hebrew-400-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-display: swap; font-weight: 500;
  src: url("/static/fonts/heebo-hebrew-500-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-display: swap; font-weight: 700;
  src: url("/static/fonts/heebo-hebrew-700-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-display: swap; font-weight: 800;
  src: url("/static/fonts/heebo-hebrew-800-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/static/fonts/heebo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Heebo"; font-style: normal; font-display: swap; font-weight: 500;
  src: url("/static/fonts/heebo-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Heebo"; font-style: normal; font-display: swap; font-weight: 700;
  src: url("/static/fonts/heebo-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Heebo"; font-style: normal; font-display: swap; font-weight: 800;
  src: url("/static/fonts/heebo-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --pic: 1;
  --bg: #f4f5f7;
  --card: #ffffff;
  --surface: #f6f7f9;
  --tile: #ffffff;
  --ink: #16191d;
  --muted: #5a626b;
  --line: #e2e5ea;
  --line-strong: #cfd4db;
  --teal: #29c5c8;
  --teal-ink: #0a6466;
  --teal-dark: #0b6b6e;
  --teal-tint: rgba(11, 107, 110, 0.08);
  --teal-tint-2: rgba(11, 107, 110, 0.16);
  --hero-1: #0b6467;
  --hero-2: #0f7c80;
  --on-hero: #16191d;
  --brand-ink: #ffffff;
  --icon: #8a939d;
  --ok: #17652a;
  --ok-bg: #e8f4ec;
  --warn: #8a4b00;
  --warn-bg: #fff4e0;
  --danger: #b0281b;
  --focus: #1f4fd6;
  --radius: 12px;
  --tap: 44px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --c-shufersal: #d71920;
  --c-rami_levy: #0a4da2;
  --c-carrefour: #1e5bc6;
  --c-victory: #f28c00;
  --c-mahsanei_hashuk: #2e9e44;
  --c-other: #6b7a80;
  color-scheme: light dark;
}
/* dark: the system setting, unless the visitor chose light; or the visitor's own choice (the sun/moon button, theme.js) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1214;
    --card: #171b1f;
    --surface: #1d2227;
    --tile: #f4f5f7;
    --ink: #eef1f4;
    --muted: #aab3bd;
    --line: #2c333a;
    --line-strong: #3b444d;
    --teal-ink: #6fe0e2;
    --teal-dark: #6fe0e2;
    --teal-tint: rgba(111, 224, 226, 0.1);
    --teal-tint-2: rgba(111, 224, 226, 0.2);
    --on-hero: #eef1f4;
    --brand-ink: #06262a;
    --icon: #7d8792;
    --ok: #7fd892;
    --ok-bg: rgba(46, 158, 68, 0.22);
    --warn: #ffc56b;
    --warn-bg: #3a2a10;
    --danger: #ff9c86;
    --focus: #8fb0ff;
    --shadow: none;
    --c-shufersal: #ff6b6f;
    --c-rami_levy: #6a9ef0;
    --c-carrefour: #8ab4ff;
    --c-victory: #ffa940;
    --c-mahsanei_hashuk: #5fcf75;
    --c-other: #9aa9ae;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1214;
  --card: #171b1f;
  --surface: #1d2227;
  --tile: #f4f5f7;
  --ink: #eef1f4;
  --muted: #aab3bd;
  --line: #2c333a;
  --line-strong: #3b444d;
  --teal-ink: #6fe0e2;
  --teal-dark: #6fe0e2;
  --teal-tint: rgba(111, 224, 226, 0.1);
  --teal-tint-2: rgba(111, 224, 226, 0.2);
  --on-hero: #eef1f4;
  --brand-ink: #06262a;
  --icon: #7d8792;
  --ok: #7fd892;
  --ok-bg: rgba(46, 158, 68, 0.22);
  --warn: #ffc56b;
  --warn-bg: #3a2a10;
  --danger: #ff9c86;
  --focus: #8fb0ff;
  --shadow: none;
  --c-shufersal: #ff6b6f;
  --c-rami_levy: #6a9ef0;
  --c-carrefour: #8ab4ff;
  --c-victory: #ffa940;
  --c-mahsanei_hashuk: #5fcf75;
  --c-other: #9aa9ae;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; scroll-padding-bottom: 5rem; }   /* room for the stuck bars */
/* On a touch screen (a phone, a tablet) the display size scales the text with the pictures, from 1 to 2 times
   (--pic, theme.js). With a mouse it is the pictures' size only, as the page looked before: there the browser's own
   zoom enlarges everything, and the few sizes that grow with the pictures are at the end of this file. */
@media (pointer: coarse) { html { font-size: calc(100% * max(1, min(var(--pic), 2))); } }
body {
  margin: 0;
  font-family: Heebo, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
}
a { color: var(--teal-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
svg.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

.skip {
  position: absolute; inset-inline-start: 0.5rem; top: -4rem;
  background: var(--teal-dark); color: var(--brand-ink); padding: 0.75rem 1rem; border-radius: var(--radius); z-index: 10;
}
.skip:focus { top: 0.5rem; }

/* ---- the page: one column of white panels */
.app { max-width: 72rem; margin: 0 auto; background: var(--card); min-height: 60vh; }
@media (min-width: 48rem) and (min-height: 32rem) {
  .app { margin: 16px auto; border-radius: 16px; overflow: hidden; overflow: clip; box-shadow: var(--shadow); border: 1px solid var(--line); }
}

/* ---- header: brand, tools, a big search */
.hero { background: var(--card); color: var(--on-hero); padding: 14px 16px 12px; border-block-end: 1px solid var(--line); }
.hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; align-items: center; }
.hero-title { min-width: 0; }
.hero h1 { font-size: 1.3rem; font-weight: 800; margin: 0; line-height: 1.2; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.hero h1 .logo { width: 32px; height: 32px; border-radius: 8px; flex: none; }
/* a long word (Russian at a big display size) breaks rather than leaving the screen */
.hero h1, header.site, footer.site { overflow-wrap: anywhere; hyphens: auto; }
.hero .sub { margin: 2px 0 0; font-size: 0.85rem; color: var(--muted); }
.best {
  background: var(--teal-tint); border: 1px solid var(--teal-tint-2); color: var(--ink); border-radius: var(--radius);
  padding: 6px 12px; font: inherit; font-size: 0.8rem; display: flex; flex-direction: column; align-items: flex-start;
  cursor: pointer; text-align: start; min-height: var(--tap); max-width: 55%;
}
.best span:first-of-type { color: var(--teal-ink); font-weight: 700; }
.best .best-icon { display: none; color: #b7791f; }
.best b { font-size: 0.9rem; }
.hero-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.zoom, .langs, .tools-start { display: flex; gap: 4px; }
.tools-start { gap: 8px; }
.icon-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px;
  width: var(--tap); height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit;
}
@media (hover: hover) { .icon-btn:hover { background: var(--surface); } }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lang-select {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
  min-height: 40px; padding: 4px 10px; font: inherit; font-size: max(16px, 0.9rem); cursor: pointer; max-width: 9rem;   /* (16px: iOS zooms into smaller fields) */
}
@media (hover: hover) { .lang-select:hover { background: var(--surface); } }
header.site .lang-select { min-height: 36px; }
.searchbox { position: relative; margin-top: 12px; scroll-margin-top: -4rem; }   /* 8px from the top, past the scroll padding */
.search-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--icon); display: flex; pointer-events: none; }
#search {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px;
  padding-inline-start: calc(24px + 1.25rem); padding-inline-end: 48px;     /* the icon grows with the text */
  font: inherit; font-size: 1rem; background: var(--surface); color: var(--ink); min-height: 48px;
}
#search:focus { background: var(--card); border-color: var(--teal-dark); }
#search::placeholder { color: var(--muted); opacity: 1; }
#search::-webkit-search-cancel-button { display: none; }
.sclear {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--muted); width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .sclear:hover { background: var(--line); } }
/* suggestions while typing: a list under the box, over the page, never taller than what the phone's keyboard
   leaves (--room, set by app.js from the visual viewport) */
.suggest {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column; max-height: min(var(--room, 60vh), 34rem); overflow: hidden;
  background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18);
}
/* the list itself scrolls (the arrow keys in the box scroll it too) */
.suggest ul { flex: 1 1 auto; min-height: 0; margin: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; }
.sopt {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px; cursor: pointer;
  border-block-start: 1px solid var(--line);
}
.sopt:first-child { border-block-start: 0; }
@media (hover: hover) { .sopt:hover { background: var(--surface); } }
.sopt[aria-selected="true"] {
  background: var(--teal-tint); outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px;
}
.stext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sname { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.smeta { font-size: 0.8rem; color: var(--muted); }
.sall .sname, .sfree .sname { color: var(--teal-ink); }
.sbadge {
  flex: none; background: var(--teal-dark); color: var(--brand-ink); border-radius: 8px; padding: 0 8px;
  font-size: 0.8rem; font-weight: 700;
}
.splus { flex: none; color: var(--teal-ink); display: inline-flex; }
.ph.sm { width: min(88px, calc(44px * var(--pic))); height: min(88px, calc(44px * var(--pic))); border-radius: 8px; }
img.ph.photo.sm { padding: 3px; }
.suggest-note {
  flex: none; margin: 0; padding: 8px 12px; font-size: 0.85rem; color: var(--muted); border-block-start: 1px solid var(--line);
}
/* while it is open the page is at least a screen tall, so the box can scroll to the top on a short phone */
.suggesting main { min-height: 100vh; }
.added-note {
  display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; font-size: 0.875rem; font-weight: 500; color: var(--ok);
}

/* ---- tabs: underlined, like a shop's navigation */
.tabs {
  display: flex; gap: 4px; padding: 0 8px; border-block-end: 1px solid var(--line); overflow-x: auto; overflow-y: hidden;
  background: var(--card); position: sticky; top: 0; z-index: 15;
}
.tabs button {
  flex: 1; border: 0; background: none; padding: 12px 8px; font: inherit; font-size: 0.95rem; font-weight: 500;
  color: var(--muted); cursor: pointer; white-space: nowrap; min-height: var(--tap);
  border-block-end: 3px solid transparent; margin-block-end: -1px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative;
}
.tabs button svg.icon { width: 1.15em; height: 1.15em; }
@media (hover: hover) { .tabs button:hover { color: var(--ink); } }
.tabs button.on { color: var(--teal-ink); border-block-end-color: var(--teal-dark); font-weight: 700; }
.pill { background: var(--teal-dark); color: var(--brand-ink); border-radius: 10px; padding: 0 7px; font-size: 0.75rem; font-weight: 700; }
.pill:empty { display: none; }
.btn.primary .pill { background: var(--brand-ink); color: var(--teal-dark); }   /* on the comparison bar's button */
@media (max-width: 30rem) {
  .tabs { gap: 0; padding: 0 4px; overflow: visible; }
  .tabs button {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 1px; padding: 7px 2px 5px; font-size: 0.75rem; line-height: 1.3;
  }
  .tabs button > span:not(.pill) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tabs button svg.icon { width: 22px; height: 22px; }
  .tabs .pill { position: absolute; top: 3px; inset-inline-start: calc(50% + 6px); }
}

main { padding: 0 0 16px; }
main:focus { outline: none; }
.panel:focus { outline: none; }
h2, h3 { margin: 0; }
.group { padding: 16px 16px 6px; font-weight: 700; font-size: 1rem; color: var(--ink); }
.note { font-size: 0.85rem; color: var(--muted); padding: 4px 16px; margin: 4px 0; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); }
.empty .btn { flex: none; }
.actions { display: flex; gap: 8px; padding: 10px 16px; flex-wrap: wrap; }
/* the way to the comparison under the products and the list: it stays at the bottom of the screen as they scroll */
.gobar { position: sticky; bottom: 0; z-index: 2; background: var(--card); border-block-start: 1px solid var(--line);
  padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px)); }
.box { padding: 4px 16px 8px; }

/* ---- buttons */
button, .btn { font: inherit; }
.btn {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); border-radius: 10px; padding: 10px 16px;
  font-size: 0.95rem; font-weight: 500; cursor: pointer; flex: 1; min-height: var(--tap); text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
@media (hover: hover) { .btn:hover { background: var(--surface); } }
.btn.primary { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--brand-ink); font-weight: 700; }
@media (hover: hover) { .btn.primary:hover { filter: brightness(1.08); } }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.link {
  border: 0; background: none; color: var(--teal-ink); text-decoration: underline; cursor: pointer; padding: 0.25rem;
  min-height: 0; font: inherit;
}
.chips { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; }
.chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 0.875rem;
  white-space: nowrap; cursor: pointer; color: var(--ink); min-height: 36px; display: inline-flex; align-items: center; gap: 6px;
}
.chip svg.icon { color: var(--muted); width: 1.1em; height: 1.1em; }
@media (hover: hover) { .chip:hover { border-color: var(--line-strong); } }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--card); }
.chip.on svg.icon { color: var(--card); }
ul.plain { list-style: none; padding: 0; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.choices .chip { min-height: var(--tap); }

/* ---- the picture slot: a photo on white, else a quiet grey tile with a line icon; grows with --pic */
.ph {
  width: calc(64px * var(--pic)); height: calc(64px * var(--pic)); border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; background: var(--tile); border: 1px solid var(--line);
  overflow: hidden; user-select: none;
}
.ph.lg { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
.ph.placeholder { background: var(--surface); color: var(--icon); }
.ph.placeholder svg.icon { width: 42%; height: 42%; stroke-width: 1.4; }
img.ph.photo { object-fit: contain; padding: 6%; background: #ffffff; }
/* a photo that opens in full size: the button is the picture itself */
.phbtn { border: 0; padding: 0; background: none; border-radius: 10px; cursor: zoom-in; flex: none; display: block; font: inherit; }
.phbtn.lg { width: 100%; }
.phbtn .ph { display: block; }
/* the enlarge button in the bottom corner of a tile's photo (the photo is a square under the tile's 8px padding) */
.tile { container-type: inline-size; }
.enlarge {
  position: absolute; top: calc(100cqw - 48px); inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: #ffffff; color: #16191d; cursor: zoom-in; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.enlarge svg.icon { width: 18px; height: 18px; }

/* ---- tiles (search results, catalogue) */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(130px * var(--pic))), 1fr));
  gap: 12px; padding: 4px 16px 16px;
}
.tile { position: relative; border-radius: 14px; border: 1px solid transparent; }
@media (hover: hover) { .tile:hover { border-color: var(--line); box-shadow: var(--shadow); } }
.tile.on { border-color: var(--teal-dark); box-shadow: 0 0 0 1px var(--teal-dark); }
.tile-btn {
  width: 100%; height: 100%; border: 0; background: none; color: var(--ink); padding: 8px; border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: start; font: inherit; text-decoration: none;
}
.tname { font-size: 0.875rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.tmeta { font-size: 0.8rem; color: var(--muted); }
.tprice { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tprice.none { font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.tbadge {
  position: absolute; top: 14px; inset-inline-start: 14px; background: var(--teal-dark); color: var(--brand-ink);
  border-radius: 8px; padding: 1px 8px; font-size: 0.8rem; font-weight: 700; pointer-events: none;
}
.minus {
  position: absolute; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: #ffffff; color: #16191d; cursor: pointer; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
}
.addfree .tname { color: var(--teal-ink); }

/* ---- the list: rows, or tiles from picture size 1.5 */
.rows .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-block-end: 1px solid var(--line); }
.rows .grow { flex: 1 1 11rem; }
.rows .stepper { margin-inline-start: auto; }
.grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.grow b { font-weight: 500; }
.lgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(11rem, calc(100px * var(--pic)))), 1fr));
  gap: 12px; padding: 4px 16px 12px;
}
.ltile {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  border-radius: 14px; padding: 10px; background: var(--card); border: 1px solid var(--line);
}
.ltile b { font-size: 0.9375rem; font-weight: 500; }
.ltile .del { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 1; background: #ffffff; }

.pchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pchip {
  font-size: 0.8rem; padding: 1px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line);
  white-space: nowrap; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums;
}
.pchip.cheap { background: var(--ok-bg); border-color: transparent; font-weight: 700; color: var(--ok); }
.pchip.miss { color: var(--danger); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 5px; background: var(--c-other); flex: none; }
.dot.c-shufersal { background: var(--c-shufersal); }
.dot.c-rami_levy { background: var(--c-rami_levy); }
.dot.c-carrefour { background: var(--c-carrefour); }
.dot.c-victory { background: var(--c-victory); }
.dot.c-mahsanei_hashuk { background: var(--c-mahsanei_hashuk); }

/* which chains sell a product: a tag per chain (its colour as a dot, its name in words); a chosen chain that doesn't
   sell it is crossed out, one that sells it but not in the chosen branches is quieter */
.avail { display: flex; flex-wrap: wrap; gap: 3px 4px; }
.atag {
  display: inline-flex; align-items: center; font-size: 0.75rem; line-height: 1.4; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); white-space: nowrap;
}
.atag .dot { width: 7px; height: 7px; margin-inline-end: 4px; }
.atag.far { color: var(--muted); border-style: dashed; }
.atag.no { color: var(--muted); background: none; text-decoration: line-through; }
.atag.no .x { text-decoration: none; display: inline-block; margin-inline-end: 3px; color: var(--danger); }
.rows .avail, .ltile .avail { margin-block: 1px; }
.ltile .avail { justify-content: center; }
.pchip.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; gap: 4px; }
.pchip.warn svg.icon, .counts.warn svg.icon, .sizewarn svg.icon { width: 1em; height: 1em; }
.counts.warn { color: var(--warn); display: flex; align-items: center; gap: 4px; }

/* the quantity control grows with the pictures: in tiles it spans the tile */
.stepper { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 10px; flex: none; background: var(--card); }
.stepper button {
  border: 0; background: none; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: max(var(--tap), min(56px, calc(32px * var(--pic)))); height: max(40px, min(56px, calc(32px * var(--pic))));
}
@media (hover: hover) { .stepper button:hover { background: var(--surface); } }
.stepper input {
  width: 3.2em; border: 0; background: none; color: var(--ink); text-align: center; font: inherit; font-weight: 700;
  font-size: max(16px, 1rem); padding: 0; min-height: 40px; -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .unit { font-size: 0.75rem; color: var(--muted); padding: 0 2px; }
.ltile .stepper { width: 100%; justify-content: space-between; padding: 0 2px; }
.ltile .stepper button { width: var(--tap); flex: none; }
.ltile .stepper input { flex: 1 1 auto; width: auto; min-width: 2.6em; font-size: max(16px, 1rem); }
.ltile .stepper .unit { flex: none; }
.del {
  border: 1px solid var(--line); background: var(--card); color: var(--muted); width: var(--tap); height: 40px; border-radius: 10px;
  cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .del:hover { color: var(--danger); border-color: var(--danger); } }

/* ---- branches */
label { font-weight: 500; display: block; margin: 8px 0 4px; }
.hint { color: var(--muted); font-size: 0.875rem; margin: 2px 0 6px; }
.box input[type="search"], select {
  width: 100%; min-height: var(--tap); font: inherit; padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink);
}
#branch-groups { padding: 0 16px; }
details.group-box { border: 1px solid var(--line); border-radius: 12px; margin-block-end: 8px; background: var(--card); }
details.group-box > summary {
  min-height: var(--tap); padding: 0.7rem 1rem; cursor: pointer; font-weight: 500;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem;
}
details.group-box > summary .sub { font-weight: 400; color: var(--teal-ink); }
details.group-box[open] > summary { border-block-end: 1px solid var(--line); }
fieldset { border: 0; margin: 0; padding: 0.5rem 1rem; border-radius: 0 0 12px 12px; }
.check { display: flex; align-items: flex-start; gap: 0.6rem; min-height: var(--tap); padding: 0.35rem 0; }
.check input { width: 1.25rem; height: 1.25rem; margin-block-start: 0.15rem; flex: none; accent-color: var(--teal-dark); }
.check label { font-weight: 400; margin: 0; }
.check .sub { display: block; color: var(--muted); font-size: 0.875rem; }

.badge { display: inline-block; border-radius: 6px; padding: 0 0.5rem; font-size: 0.8rem; font-weight: 700; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }

/* ---- compare: one card per branch, the chain's colour as a thin top line; the table marks each line's cheapest */
.status { min-height: 1.5rem; margin: 4px 16px; font-weight: 500; }
.status.error { color: var(--danger); }
.scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; padding: 0 16px; }
.scard {
  border-radius: 14px; border: 1px solid var(--line); border-top: 3px solid var(--c-other); padding: 14px;
  display: flex; flex-direction: column; gap: 6px; background: var(--card); box-shadow: var(--shadow);
}
.scard.c-shufersal { border-top-color: var(--c-shufersal); }
.scard.c-rami_levy { border-top-color: var(--c-rami_levy); }
.scard.c-carrefour { border-top-color: var(--c-carrefour); }
.scard.c-victory { border-top-color: var(--c-victory); }
.scard.c-mahsanei_hashuk { border-top-color: var(--c-mahsanei_hashuk); }
.scard.win { border-inline-color: var(--teal-dark); border-bottom-color: var(--teal-dark); box-shadow: 0 0 0 1px var(--teal-dark), var(--shadow); }
.scard p, .scard h4 { margin: 0; }
.shead { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shead .trophy { color: #b7791f; }
.big { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.big small { font-size: 0.8rem; font-weight: 400; color: var(--muted); margin-inline-start: 6px; }
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; }
.counts { font-size: 0.85rem; }
.counts.miss { color: var(--danger); }
.counts.ok { color: var(--ok); font-weight: 500; }
.scard .btn { margin-top: 6px; }
.scard .note { padding: 0; }
.scard .note.fair { font-weight: 500; color: var(--ink); }
.cartbox { display: flex; flex-direction: column; gap: 4px; }
.cartbox .note { padding: 0; font-size: 0.75rem; }
/* "checking the cart is yours": said before the shop opens, and next to its button */
.note.important, p.important {
  display: flex; gap: 6px; align-items: flex-start; color: var(--warn); background: var(--warn-bg); border-radius: 8px;
  padding: 6px 8px; font-weight: 500;
}
.cartbox .note.important { padding: 6px 8px; font-size: 0.8rem; }
.note.important svg.icon, p.important svg.icon { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.15em; }
dialog.ask p.important { margin: 8px 16px 0; font-size: 0.95rem; line-height: 1.5; }
.cartcopy > summary { cursor: pointer; font-size: 0.8rem; color: var(--teal-ink); min-height: var(--tap); padding-block: 0.6rem;
  text-decoration: underline; text-underline-offset: 2px; }
.cartnames { margin: 0; padding-inline-start: 1.1rem; font-size: 0.75rem; color: var(--muted); }
.cartnames li { margin-block: 2px; }
.cartcopy .btn { width: 100%; margin-top: 6px; }
.cartlines { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; resize: vertical;
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; background: var(--card); color: var(--ink); }

.table-wrap { position: relative; overflow-x: auto; margin: 8px 16px 0; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; min-width: 26rem; }
caption { text-align: start; padding: 8px 12px; color: var(--muted); }
th, td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--surface); text-align: center; font-weight: 500; border-bottom: 2px solid var(--c-other); }
thead th.c-shufersal { border-bottom-color: var(--c-shufersal); }
thead th.c-rami_levy { border-bottom-color: var(--c-rami_levy); }
thead th.c-carrefour { border-bottom-color: var(--c-carrefour); }
thead th.c-victory { border-bottom-color: var(--c-victory); }
thead th.c-mahsanei_hashuk { border-bottom-color: var(--c-mahsanei_hashuk); }
.iname { font-weight: 500; text-align: start; min-width: 90px; }
.iname small { font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.table-wrap thead th:first-child, .table-wrap th.iname {
  position: sticky; inset-inline-start: 0; z-index: 1; background: var(--card); box-shadow: inset -1px 0 0 var(--line);
}
.table-wrap thead th:first-child { background: var(--surface); }
[dir="rtl"] .table-wrap thead th:first-child, [dir="rtl"] .table-wrap th.iname { box-shadow: inset 1px 0 0 var(--line); }
.cell { text-align: center; min-width: 84px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell small { display: block; color: var(--muted); font-size: 0.75rem; max-width: 130px; margin: auto; overflow: hidden; text-overflow: ellipsis; }
.cell.min { background: var(--ok-bg); font-weight: 700; }
.cell.miss { color: var(--danger); }
.cell .unsure { display: block; color: var(--warn); font-size: 0.75rem; }
.cell .sub { display: block; font-size: 0.75rem; color: var(--muted); }
.cell.other { background: var(--warn-bg); }
.sizewarn { display: inline-flex; align-items: center; gap: 3px; color: var(--warn); font-size: 0.75rem; font-weight: 700; }
.cell .sizewarn { display: flex; justify-content: center; }
.cell small.size, .iname small.size { color: var(--ink); }
.iname small.size, .iname .sizewarn { display: block; margin-top: 2px; font-weight: 400; }
/* "change" in a cell: choose the product in that chain (the dialog) */
.fix {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; min-height: 32px; min-width: var(--tap);
  justify-content: center; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--teal-ink); font-size: 0.75rem; font-weight: 500; cursor: pointer;
}
.fix svg.icon { width: 1em; height: 1em; }
@media (hover: hover) { .fix:hover { background: var(--surface); } }
.legend { margin-top: 2px; }

/* the dialog: a sheet from the bottom on a phone, a card in the middle on a wide screen */
dialog.sheet {
  width: min(36rem, calc(100vw - 32px)); max-height: min(85vh, 48rem); overflow: auto; padding: 0 0 12px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
dialog.sheet::backdrop { background: rgba(10, 14, 18, 0.55); }
.sheet-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 14px 16px 8px; background: var(--card); border-block-end: 1px solid var(--line);
}
.sheet-head h2 { font-size: 1.05rem; line-height: 1.35; margin: 0; padding-top: 6px; }
.sheet .group { padding-top: 12px; }
.sheet .note.small { font-size: 0.8rem; }
.picks { padding: 0 16px; display: flex; flex-direction: column; gap: 6px; }
.pick {
  width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; text-align: start; cursor: pointer;
  min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--ink); font: inherit;
}
@media (hover: hover) { .pick:hover { border-color: var(--line-strong); background: var(--surface); } }
.pick.on { border-color: var(--teal-dark); box-shadow: 0 0 0 1px var(--teal-dark); }
.pick .pname { flex: 1 1 12rem; min-width: 0; font-weight: 500; }
.pick small { color: var(--muted); font-size: 0.8rem; }
.pick b { font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.fix-search { padding: 8px 16px 0; }
.fix-search label { margin-top: 4px; }
.fix-row { display: flex; gap: 8px; }
.fix-row input {
  flex: 1 1 auto; min-width: 0; min-height: var(--tap); font: inherit; font-size: max(16px, 1rem); padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink);
}
.fix-row .btn { flex: none; }
.fix-results { padding-bottom: 4px; }
.sheet .actions .btn { flex: 1 1 auto; }
/* the chosen product and its quantity: "1 on your list = 8 of these" */
.pick .ratio-hint { flex-basis: 100%; color: var(--teal-ink); font-weight: 500; }
.picked { margin: 4px 16px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.picked .pname { flex: 1 1 12rem; min-width: 0; font-weight: 700; }
.picked small { color: var(--muted); font-size: 0.8rem; }
.picked b { font-variant-numeric: tabular-nums; margin-inline-start: auto; }
fieldset.ratio { margin: 10px 16px 0; padding: 4px 12px 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
fieldset.ratio legend { font-weight: 700; padding: 0 4px; }
.ratio-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.ratio-row label { flex: 1 1 10rem; min-width: 0; margin: 6px 0; overflow-wrap: anywhere; }
.ratio-eq { margin: 0; text-align: center; font-weight: 700; color: var(--muted); }
#fix-sum { margin: 10px 16px 0; font-weight: 500; }
/* in a cell of another size: what the sizes suggest, and taking it in one tap */
.cell .advice { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; }
.cell .advice .sub { display: inline-flex; align-items: center; gap: 3px; color: var(--teal-ink); }
.cell .advice svg.icon { width: 1em; height: 1em; flex: none; }
/* a photo in full size: as big as the screen allows, on white (the photos are cut out on white) */
dialog.viewer {
  width: min(40rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0 0 12px; overflow: auto;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
dialog.viewer::backdrop { background: rgba(10, 14, 18, 0.8); }
.viewer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 16px 8px; }
.viewer-head h2 { font-size: 1.05rem; line-height: 1.35; margin: 0; padding-top: 6px; overflow-wrap: anywhere; }
dialog.viewer img.full {
  display: block; width: 100%; height: auto; max-height: calc(100vh - 160px); aspect-ratio: 1; object-fit: contain;
  background: #ffffff; padding: 4%; box-sizing: border-box; cursor: zoom-out;
}
dialog.viewer .note { text-align: center; }
/* "are you sure?": the question and its two buttons (a sheet from the bottom on a phone, as above) */
dialog.ask { width: min(26rem, calc(100vw - 32px)); padding: 0; }
dialog.ask h2 { font-size: 1.05rem; line-height: 1.4; margin: 0; padding: 18px 16px 4px; overflow-wrap: anywhere; }
dialog.ask .actions { padding: 12px 16px 16px; }
/* the − that would take the line off the list is a bin */
.stepper .less.last { color: var(--danger); }
.minus.last { color: #b0281b; }

.offline { background: var(--warn-bg); color: var(--warn); padding: 0.5rem 1rem; text-align: center; }
.chains-note { margin: 10px 16px 0; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 0.875rem; }

footer.site { max-width: 72rem; margin: 0 auto; padding: 1rem; color: var(--muted); font-size: 0.875rem; }
footer.site nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; padding: 0; margin: 0.5rem 0 0; }
footer.site a { display: inline-block; padding: 0.4rem 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.actions.near { padding: 4px 0; }
.actions.near .btn { flex: 0 1 auto; max-width: 100%; }     /* its own width, wrapping before the screen's edge */
#near-status:empty { display: none; }
.chips.wrap { flex-wrap: wrap; }
@media (min-width: 48rem) { #cat-chips { flex-wrap: wrap; } }

/* text pages: accessibility statement, privacy, terms */
.page { max-width: 46rem; margin: 0 auto; padding: 1rem; background: var(--card); }
.page h1 { font-size: 1.5rem; }
.page h2 { margin-top: 1.5rem; }
.page button, .page .button {
  font: inherit; min-height: var(--tap); padding: 0.5rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--card); color: var(--ink); font-weight: 500; cursor: pointer;
}
.page button.primary { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--brand-ink); }
header.site {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem; background: var(--card); color: var(--ink); border-block-end: 1px solid var(--line);
}
header.site h1, header.site p { margin: 0; font-size: 1.1rem; font-weight: 700; }
header.site a { color: var(--ink); text-decoration: none; }
.page input[type="text"], .page input[type="password"], .page input[type="search"], .page select, .page textarea {
  width: 100%; min-height: var(--tap); font: inherit; padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink);
}
.page label { margin-top: 0.75rem; }
.page .card { border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 1rem; background: var(--surface); margin-block-end: 0.75rem; }
.page .idea { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
/* code wraps instead of scrolling sideways (a phone at 320 px, and nothing to scroll for the keyboard) */
.page pre { direction: ltr; text-align: left; white-space: break-spaces; overflow-wrap: anywhere; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.85rem; line-height: 1.5; }
.page code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.page .downloads { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.5rem 0 1rem; }
.page .downloads .button { margin: 0; }
.page a.button { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.page a.button.primary { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--brand-ink); }
.page ol li, .page ul li { margin-block: 0.25rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.75rem; }
/* "sort by" over a list, and the search over the comparison */
.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; margin-block: 0.5rem; padding-inline: 16px; }
.sortbar label { display: inline; margin: 0; }
.sortbar select, .sortbar input[type="search"] {
  width: auto; max-width: 100%; min-width: 0; min-height: var(--tap); font: inherit; padding: 0.4rem 0.75rem;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink);
}
.sortbar input[type="search"] { flex: 1 1 12rem; }
.toolbar .sortbar { padding-inline: 0; margin-block: 0; flex: 1 1 100%; min-width: 0; }
#results > .toolbar { padding-inline: 16px; }

/* ---- phones: one row of tools under the title, the best branch as a slim bar of its own, inputs a thumb's width */
@media (max-width: 34.99rem) {
  dialog.sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 88vh; }
  .hero h1 { font-size: 1.15rem; }
  .best {
    flex: 1 1 100%; min-width: 0; max-width: none; flex-direction: row; align-items: center; gap: 8px; min-height: 40px;
    padding: 6px 12px;
  }
  .best .best-icon { display: inline-block; }                       /* the trophy says "best" in a line this short */
  .best span:first-of-type { display: none; }
  .best b { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
  .best span:last-child { flex: none; font-weight: 800; }
}
@media (max-width: 25.99rem) {
  .icon-btn { width: 40px; }
}

/* with a mouse the text keeps its size (see html above), so the list's tile names and amounts grow with the pictures */
@media not all and (pointer: coarse) {
  .ltile b { font-size: calc(13px + 2px * var(--pic)); }
  .stepper input { font-size: max(16px, min(24px, calc(15px * var(--pic)))); }
  .stepper .unit { font-size: min(18px, calc(12px * var(--pic))); }
  .ltile .stepper input { font-size: max(16px, min(22px, calc(14px * var(--pic)))); }
}