/* Heebo, self-hosted. The stylesheet used "Arial Hebrew", Arial and
   Verdana - system fallbacks rather than a chosen typeface, and Hebrew
   system faces are notably weak. A webfont cannot be linked from Google
   because the CSP is style-src 'self' / font-src 'self', so the files
   are served from our own origin: faster, no third party, no change to
   the header. Heebo is SIL Open Font License, which permits this.
   Only hebrew, latin and latin-ext are shipped; the math and symbol
   subsets Google also offers are dead weight for a price list. */
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/heebo-400-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/heebo-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/heebo-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/heebo-500-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/heebo-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/heebo-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/heebo-700-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/heebo-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/heebo-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 900; font-display: swap; src: url('/static/fonts/heebo-900-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 900; font-display: swap; src: url('/static/fonts/heebo-900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 900; font-display: swap; src: url('/static/fonts/heebo-900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Every colour on this site resolves through a token, so the light and dark
   palettes are two values of one system rather than two stylesheets. The
   bare :root block below is the complete light palette - a token that only
   existed inside a media query would leave the page unstyled for anyone
   whose browser is set to "system" with no preference expressed. */
:root {
  font-family: "Heebo", "Arial Hebrew", Arial, ui-sans-serif, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);

  --bg: #f3f0e9;
  --paper: #fffdf8;
  --paper-2: #ffffff;
  --text: #152035;
  --muted: #5f697b;
  --muted-2: #666d7e;  /* was #788092: 3.48:1 on --bg, under the 4.5 AA floor */
  --line: #d9d7cf;
  --line-2: #e5e3dd;
  --line-strong: #b9bcc4;
  --field-line: #c9cbd0;

  /* "ink" was doing two jobs - the darkest text colour, and the fill of
     solid blocks like the header and buttons. They invert differently, so
     they are separate tokens now. */
  --ink: #101a2f;
  --slab: #101a2f;
  --on-slab: #ffffff;
  --slab-sub: #b8c3d8;
  --slab-link: #dce4f3;

  --yellow: #ffd84d;
  --blue: #135ffd;     /* was #246bfd: 4.01:1 on --bg, under the 4.5 AA floor */
  --green: #087d5a;   /* two points darker than #087f5b, which read 4.43:1 against --good-wash */
  --orange: #e86a28;

  --wash-neutral: #f4f3ef;
  --wash-neutral-2: #f1f1ee;
  --note-wash: #fff7d6;
  --note-line: #dcc762;
  --note-ink: #54491c;
  --warn-wash: #fff6e8;
  --warn-line: #e19a3f;
  --warn-ink: #6d4214;
  --warn-strong: #8a4a0c;
  --caution-wash: #fff1e8;
  --caution-line: #efb28d;
  --caution-ink: #713313;
  --caution-strong: #a23f0c;
  --good-wash: #e8f4ec;
  --good-line: #4b9c6f;
  --good-ink: #1d6236;
  --bad-wash: #fdf1ef;
  --bad-line: #c0483a;
  --bad-ink: #991b1b;
  --info-wash: #eef1fb;
  --info-line: #5b6bb5;
  --info-ink: #2f3d80;
  --gold-wash: #fdf3d6;
  --gold-line: #b8891f;
  --gold-ink: #6b4c05;

  --chip-line: #cfd4de;
  --chip-ink: #4b5568;
  --shadow: rgba(16, 26, 47, .07);
  --shadow-2: rgba(16, 26, 47, .10);
  --ph-a: #f5f4f0;
  --ph-b: #edebe5;
  --focus: #246bfd;
  /* Yellow stays yellow in both themes, so anything sitting on it keeps
     a dark foreground - inverting it puts pale text on a bright ground. */
  --on-yellow: #101a2f;
  --on-yellow-soft: #4d4427;
  /* Amazon's product photos are cut out on white. A dark tile behind
     them shows as a white rectangle floating in the card, so the media
     well keeps a light ground in both themes. */
  --media-bg: #ffffff;
}

/* Dark is a designed palette, not an inversion: the cream ground becomes a
   cool slate, the navy slab lightens so it still separates from the page,
   and every wash keeps its hue at a fraction of the saturation so the
   good/warn/caution vocabulary survives. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151b;
    --paper: #191f27;
    --paper-2: #1f2731;
    --text: #e7ecf3;
    --muted: #a2aebd;
    --muted-2: #8b97a6;
    --line: #2b3540;
    --line-2: #242d37;
    --line-strong: #3c4854;
    --field-line: #3c4854;

    --ink: #e7ecf3;
    --slab: #232e3c;
    --on-slab: #f2f6fb;
    --slab-sub: #93a3ba;
    --slab-link: #c6d3e6;

    --yellow: #f5c93b;
    --blue: #6d9bff;
    --green: #4cbf94;
    --orange: #f08a4c;

    --wash-neutral: #1c232c;
    --wash-neutral-2: #1a2029;
    --note-wash: #2a2517;
    --note-line: #5c5028;
    --note-ink: #e5d59a;
    --warn-wash: #2b2116;
    --warn-line: #7a5a2c;
    --warn-ink: #f0c489;
    --warn-strong: #f3b871;
    --caution-wash: #2c1c15;
    --caution-line: #7d4a30;
    --caution-ink: #f2b193;
    --caution-strong: #f59a72;
    --good-wash: #16271f;
    --good-line: #3f7f5e;
    --good-ink: #7fd6a8;
    --bad-wash: #2b1917;
    --bad-line: #8a4038;
    --bad-ink: #f0a096;
    --info-wash: #1a2032;
    --info-line: #4a5a9c;
    --info-ink: #a8b8f0;
    --gold-wash: #2a2413;
    --gold-line: #7d6420;
    --gold-ink: #e8c979;

    --chip-line: #38424f;
    --chip-ink: #b3bece;
    --shadow: rgba(0, 0, 0, .38);
    --shadow-2: rgba(0, 0, 0, .5);
    --ph-a: #1c222a;
    --ph-b: #232a33;
    --focus: #8ab0ff;
    --on-yellow: #101a2f;
    --on-yellow-soft: #4d4427;
    --media-bg: #eef1f4;
  }
}

:root[data-theme="dark"] {
  --bg: #11151b;
  --paper: #191f27;
  --paper-2: #1f2731;
  --text: #e7ecf3;
  --muted: #a2aebd;
  --muted-2: #8b97a6;
  --line: #2b3540;
  --line-2: #242d37;
  --line-strong: #3c4854;
  --field-line: #3c4854;

  --ink: #e7ecf3;
  --slab: #232e3c;
  --on-slab: #f2f6fb;
  --slab-sub: #93a3ba;
  --slab-link: #c6d3e6;

  --yellow: #f5c93b;
  --blue: #6d9bff;
  --green: #4cbf94;
  --orange: #f08a4c;

  --wash-neutral: #1c232c;
  --wash-neutral-2: #1a2029;
  --note-wash: #2a2517;
  --note-line: #5c5028;
  --note-ink: #e5d59a;
  --warn-wash: #2b2116;
  --warn-line: #7a5a2c;
  --warn-ink: #f0c489;
  --warn-strong: #f3b871;
  --caution-wash: #2c1c15;
  --caution-line: #7d4a30;
  --caution-ink: #f2b193;
  --caution-strong: #f59a72;
  --good-wash: #16271f;
  --good-line: #3f7f5e;
  --good-ink: #7fd6a8;
  --bad-wash: #2b1917;
  --bad-line: #8a4038;
  --bad-ink: #f0a096;
  --info-wash: #1a2032;
  --info-line: #4a5a9c;
  --info-ink: #a8b8f0;
  --gold-wash: #2a2413;
  --gold-line: #7d6420;
  --gold-ink: #e8c979;

  --chip-line: #38424f;
  --chip-ink: #b3bece;
  --shadow: rgba(0, 0, 0, .38);
  --shadow-2: rgba(0, 0, 0, .5);
  --ph-a: #1c222a;
  --ph-b: #232a33;
  --focus: #8ab0ff;
  --on-yellow: #101a2f;
  --on-yellow-soft: #4d4427;
  --media-bg: #eef1f4;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: light dark; }
body { margin: 0; min-width: 0; overflow-x: hidden; background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
bdi, [dir="ltr"] { unicode-bidi: isolate; }

.container { width: min(1220px, 100%); margin: 0 auto; padding: 34px 28px 64px; }
.narrow { width: min(1040px, 100%); }
.public-main { padding-top: 0; }

.public-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 max(28px, calc((100vw - 1164px) / 2));
  background: var(--slab);
  color: var(--on-slab);
  border-bottom: 4px solid var(--yellow);
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
/* The channel's badge, shipped at 2x so it stays sharp. It replaced a
   yellow "IL" tile set in type - the channel is known by this mark, and two
   different marks for one product is one too many. No border or rotation:
   the badge already has its own ring. */
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: contain;
}
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { letter-spacing: .08em; font-size: 17px; }
.brand-copy small { margin-top: 6px; color: var(--slab-sub); font-size: 11px; }
.header-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 700; }
.header-links a { color: var(--slab-link); padding: 28px 0 24px; border-bottom: 3px solid transparent; }
.header-links a:hover { color: var(--on-slab); border-color: var(--yellow); }

.marketplace-disclosure {
  margin: 0; padding: 10px max(28px, calc((100vw - 1164px) / 2));
  background: var(--note-wash); color: var(--note-ink); border-bottom: 1px solid var(--note-line);
  font-size: 12px; line-height: 1.55;
}
.marketplace-disclosure strong { color: var(--ink); margin-inline-end: 5px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 54px;
  align-items: end;
  padding: 66px 0 42px;
  border-bottom: 1px solid var(--line);
}
.hero-copy { min-width: 0; }
.eyebrow { display: block; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { max-width: 680px; margin: 10px 0 14px; font-size: clamp(36px, 5vw, 66px); line-height: .98; letter-spacing: -.045em; }
.hero p { max-width: 680px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }

.search { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 9px; align-items: end; }
.search-field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.search-field > span { font-size: 11px; font-weight: 850; color: var(--muted); }
.search input, .search select, input, textarea, select {
  min-width: 0; width: 100%; border: 1px solid var(--field-line); border-radius: 0;
  padding: 12px 13px; background: var(--paper); color: var(--ink); outline: none;
}
.search input:focus, .search select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent); }
.search button, .button {
  border: 1px solid var(--line-strong); border-radius: 0; padding: 12px 18px;
  background: var(--slab); color: var(--on-slab); font-weight: 850; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; text-align: center;
}
.search button:hover, .button.primary:hover { background: var(--blue); border-color: var(--blue); }
.button:not(.primary) { background: var(--paper-2); color: var(--ink); }
.button.primary { background: var(--slab); border-color: var(--slab); color: var(--on-slab); }

.trust-strip {
  display: flex; align-items: center; gap: 30px; min-height: 58px;
  padding: 10px 16px; background: var(--yellow); color: var(--on-yellow);
  border-bottom: 2px solid var(--line-strong);
}
.trust-strip span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 850; white-space: nowrap; }
.trust-strip b { font-size: 10px; border: 1px solid var(--on-yellow); padding: 3px 4px; }
.trust-strip small { margin-inline-start: auto; color: var(--on-yellow-soft); }

.feed-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 46px 0 20px; }
.feed-heading h2 { margin: 7px 0 0; font-size: 30px; letter-spacing: -.02em; }
.result-count { font-size: 12px; color: var(--muted); font-weight: 800; }

.deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.deal-card {
  min-width: 0; display: grid; grid-template-columns: 178px minmax(0, 1fr);
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow); transition: transform .16s ease, box-shadow .16s ease;
}
.deal-card:hover { transform: translateY(-3px); box-shadow: 7px 9px 0 var(--shadow-2); border-top-color: var(--blue); }
.deal-card.featured { grid-column: 1 / -1; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); border-top-color: var(--blue); }
.card-media { min-width: 0; min-height: 240px; position: relative; display: grid; place-items: center; background: var(--media-bg); border-inline-end: 1px solid var(--line-2); overflow: hidden; }
.card-media::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--yellow); }
.card-media img { width: 100%; height: 230px; object-fit: contain; padding: 16px; }
.featured .card-media img { height: 340px; }
.score {
  position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: baseline;
  padding: 7px 9px; background: var(--slab); color: var(--on-slab); font-size: 18px; line-height: 1; font-weight: 950;
  box-shadow: 3px 3px 0 var(--yellow);
}
.score small { font-size: 9px; margin-inline-start: 2px; }
.score.big { font-size: 24px; }
.card-body { min-width: 0; padding: 22px; display: flex; flex-direction: column; }
.card-kicker { display: flex; flex-wrap: wrap; gap: 10px; color: var(--blue); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.card-kicker span + span::before { content: "/"; margin-inline-end: 10px; color: var(--muted-2); }
.deal-card h3 { margin: 10px 0 7px; font-size: 19px; line-height: 1.28; letter-spacing: -.015em; }

/* Every string that comes from a supplier - a product title, a seller name -
   is printed inside <bdi>, so this is the one place to say that none of them
   may set the width of their column. Amazon titles run slash-separated runs
   like "C.A.H/PM/Phase 10/Uno/M.T.G./Yugioh" with no break opportunity in
   them, and one such title was widening the catalogue grid to 496px on a
   375px phone and scrolling the whole page sideways. */
bdi { overflow-wrap: anywhere; }
.featured h3 { font-size: 28px; max-width: 640px; }
.seller { color: var(--muted); font-size: 12px; }
.seller > span { margin-inline-end: 5px; }
.seller-warning {
  display: grid; gap: 2px; margin-top: 9px; padding: 8px 10px;
  color: var(--warn-ink); background: var(--warn-wash); border-inline-start: 3px solid var(--warn-line);
  font-size: 10px; line-height: 1.45;
}
.seller-warning strong { color: var(--warn-strong); }
.detail-seller-warning { margin-top: 14px; font-size: 12px; }

.price-panel { margin: 20px 0 12px; padding: 14px 0 13px; border-block: 1px solid var(--line-2); }
.price-label { color: var(--muted); font-size: 11px; font-weight: 850; margin-bottom: 4px; }
.dual-money { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px; direction: ltr; }
.dual-money-primary { color: var(--ink); font-size: 25px; line-height: 1; font-weight: 950; }
.dual-money-secondary { color: var(--green); font-size: 14px; font-weight: 850; }
/* Currency, not position, decides the colour: shekels ink, dollars green. */
.dual-money .is-ils { color: var(--ink); }
.dual-money .is-usd { color: var(--green); }
.price-explain { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.45; }

/* A found Israeli price is information; green is reserved for the verdict
   that Israel is actually cheaper, so the two no longer look alike. */
.market-line { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 11px; background: var(--wash-neutral); border-inline-start: 3px solid var(--line-strong); font-size: 11px; }
.market-line > span:first-child { color: var(--muted); font-weight: 700; }
.market-line .dual-money-primary { font-size: 15px; }
.market-line .dual-money-secondary { font-size: 10px; }
.market-line.pending { background: var(--wash-neutral-2); border-color: var(--line-strong); color: var(--muted); }
.market-line.pending b { font-size: 10px; }
.price-caution { margin-top: 10px; padding: 11px; background: var(--caution-wash); border: 1px solid var(--caution-line); color: var(--caution-ink); font-size: 11px; line-height: 1.5; }
.price-caution strong { display: block; color: var(--caution-strong); margin-bottom: 3px; }
.price-caution span { display: block; }
.price-caution .dual-money-primary { font-size: inherit; }
.price-caution .dual-money-secondary { font-size: inherit; color: inherit; }
.price-caution .dual-money .is-ils, .price-caution .dual-money .is-usd { color: inherit; }
.deal-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
.flag { padding: 5px 8px; border: 1px solid var(--chip-line); background: var(--paper-2); color: var(--chip-ink); font-size: 10px; font-weight: 850; }
.flag.best { background: var(--slab); border-color: var(--slab); color: var(--on-slab); }
.flag.recheck { background: var(--caution-wash); border-color: var(--caution-line); color: var(--caution-ink); }
.health { padding: 12px 14px; border: 1px solid var(--chip-line); background: var(--paper-2); margin-bottom: 14px; }
.health strong { display: block; font-size: 13px; }
.health span { display: block; color: var(--chip-ink); font-size: 12px; margin-top: 4px; }
.health ul { margin: 8px 0 0; padding-inline-start: 18px; font-size: 12px; }
.health small { display: block; color: var(--muted-2); font-size: 11px; margin-top: 6px; }
.health-ok { border-color: var(--good-line); background: var(--good-wash); }
.health-warn { border-color: var(--caution-line); background: var(--warn-wash); }
.health-alert { border-color: var(--bad-line); background: var(--bad-wash); }
.flag.best-local { background: var(--good-wash); border-color: var(--good-line); color: var(--good-ink); }
.market-line.best-local { background: var(--good-wash); border-inline-start: 3px solid var(--good-line); font-weight: 800; }
.market-line.best-local > span:first-child { color: var(--good-ink); font-weight: 900; }
.alternative-box.local-best { background: var(--good-wash); border-color: var(--good-line); }
.flag.tracked-low { background: var(--info-wash); border-color: var(--info-line); color: var(--info-ink); }
.flag.coupon { background: var(--caution-wash); border-color: var(--caution-line); color: var(--caution-ink); }
/* The only rule that scores 100: the item is selling at or under the US
   market price. Rare enough on this catalog to be worth its own colour. */
.flag.market { background: var(--gold-wash); border-color: var(--gold-line); color: var(--gold-ink); font-weight: 700; }

.image-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 220px; color: var(--muted-2); font-weight: 950; letter-spacing: .2em; background: repeating-linear-gradient(-45deg,var(--ph-a),var(--ph-a) 8px,var(--ph-b) 8px,var(--ph-b) 16px); }
.image-placeholder.large { min-height: 420px; }
.panel, .analysis { background: var(--paper); border: 1px solid var(--line); box-shadow: 4px 4px 0 var(--shadow); }
.empty { grid-column: 1/-1; padding: 42px; text-align: center; }

.deal-page { padding-top: 30px; }
.back { display: inline-block; color: var(--muted); font-size: 13px; font-weight: 800; margin-bottom: 16px; }
.deal-detail { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr); background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--blue); box-shadow: 8px 8px 0 var(--shadow); }
.detail-media { min-width: 0; position: relative; display: grid; place-items: center; background: var(--media-bg); border-inline-end: 1px solid var(--line); }
.hero-img { width: 100%; height: 470px; object-fit: contain; padding: 28px; }
.detail-content { min-width: 0; padding: 38px; }
.detail-content h1 { margin: 12px 0 9px; font-size: clamp(28px,4vw,44px); line-height: 1.08; letter-spacing: -.035em; }
.detail-price { margin: 28px 0 16px; padding: 22px; background: var(--info-wash); border-inline-start: 5px solid var(--blue); }
.detail-price .dual-money-primary { font-size: 42px; }
.detail-price .dual-money-secondary { font-size: 19px; }
.detail-price p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.detail-price p.coupon-note { color: var(--caution-ink); background: var(--caution-wash); border: 1px solid var(--caution-line); padding: 10px 12px; }
.detail-flags { margin: 0 0 18px; padding: 0; }
.detail-caution { margin: 16px 0; font-size: 13px; }
.alternative-box { display: grid; gap: 7px; margin: 18px 0; padding: 15px; border: 1px solid var(--info-line); background: var(--info-wash); font-size: 13px; }
.alternative-box strong { font-size: 14px; }
.alternative-box .dual-money-primary { font-size: 17px; }
.alternative-box .dual-money-secondary { font-size: 11px; }
.buy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.buy-button { margin-top: 6px; min-width: 230px; }
.disclosure, .muted { color: var(--muted-2); font-size: 11px; line-height: 1.45; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.analysis { padding: 25px; }
.analysis h2 { margin: 7px 0 18px; font-size: 24px; }
.price-breakdown { margin: 0; }
.price-breakdown > div, .reference-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line-2); }
.price-breakdown dt, .reference-row > span { color: var(--muted); font-size: 12px; }
.price-breakdown dd { margin: 0; text-align: end; }
.price-breakdown dd small, .reference-row small { display: block; color: var(--muted-2); margin-top: 4px; font-size: 10px; }
.price-breakdown .dual-money-primary, .reference-row .dual-money-primary { font-size: 17px; }
.price-breakdown .dual-money-secondary, .reference-row .dual-money-secondary { font-size: 11px; }
.reference-empty { display: grid; gap: 5px; padding: 18px; background: var(--wash-neutral-2); color: var(--muted); }
.reference-empty span, .reference-note { font-size: 11px; line-height: 1.55; color: var(--muted-2); }
.methodology { margin-top: 18px; border-top: 4px solid var(--yellow); }
.methodology p, .prose { font-size: 16px; line-height: 1.75; }

/* Admin area keeps a dense operational layout, separate from the public editorial UI. */
.admin-nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 28px; background: var(--slab); color: var(--on-slab); }
.admin-nav > div { display: flex; gap: 20px; align-items: center; }
.admin-nav a:not(.brand) { color: var(--slab-link); }
.link-button, .danger-link { background: none; border: 0; color: var(--slab-link); cursor: pointer; }
.danger-link { color: var(--bad-line); margin-top: 8px; }
.admin-main { max-width: 1320px; margin: auto; padding: 26px; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 18px 0 26px; }
.page-head h1 { margin: 0 0 7px; font-size: 34px; }
.page-head p { margin: 0; color: var(--muted); }
.notice, .note { background: var(--note-wash); border: 1px solid var(--note-line); padding: 12px 14px; color: var(--note-ink); margin-bottom: 22px; }
/* The seller-checking note is a disclosure a reader should be able to find,
   not one that has to be read before the first deal. Collapsed it costs a
   line; expanded it says exactly what it always said. Measured on a 375x812
   phone, the open version pushed the first deal card to 950px - past a whole
   screen - on a page whose entire job is showing deals. */
.marketplace-disclosure { margin-bottom: 18px; }
.marketplace-disclosure > summary { cursor: pointer; padding: 10px 14px; font-weight: 800; font-size: 13px; color: var(--note-ink); background: var(--note-wash); border: 1px solid var(--note-line); list-style: none; }
.marketplace-disclosure > summary::-webkit-details-marker { display: none; }
.marketplace-disclosure > summary::after { content: " ▾"; opacity: .7; }
.marketplace-disclosure[open] > summary::after { content: " ▴"; }
.marketplace-disclosure > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.marketplace-disclosure > p { margin: 0; padding: 12px 14px; border: 1px solid var(--note-line); border-top: 0; background: var(--note-wash); color: var(--note-ink); font-size: 13px; line-height: 1.6; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 30px; }
.panel { padding: 20px; margin-bottom: 18px; }
.login { width: min(420px,100%); }
.login label, .form-grid label { display: flex; flex-direction: column; gap: 7px; font-weight: 700; }
.login label { margin: 14px 0; }
.error { background: var(--bad-wash); color: var(--bad-ink); padding: 10px; }
.stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 20px; }
.stats > div { background: var(--paper-2); border: 1px solid var(--line); padding: 18px; }
.stats b { display: block; font-size: 28px; }
.stats span { color: var(--muted-2); font-size: 13px; }
.status-row { display: flex; justify-content: space-between; border-top: 1px solid var(--line-2); padding: 10px 0; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.form-grid .wide { grid-column: 1/-1; }
.form-grid .check { flex-direction: row; align-items: center; }
.form-grid textarea { min-height: 90px; }
.actions { display: flex; align-items: end; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; color: var(--muted-2); background: var(--wash-neutral); }
.table-wrap { overflow: auto; }
.score.small { position: static; min-width: 42px; justify-content: center; box-shadow: none; font-size: 12px; }

html[dir="rtl"] .container { text-align: right; }
html[dir="rtl"] .tagline { margin-left: 0; margin-right: 14px; }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
  .deal-grid { grid-template-columns: 1fr; }
  .deal-card.featured { grid-column: auto; grid-template-columns: 210px minmax(0,1fr); }
  .featured .card-media img { height: 260px; }
  .deal-detail, .detail-grid { grid-template-columns: 1fr; }
  .detail-media { border-inline-end: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 680px) {
  .container { padding-inline: 16px; }
  .public-header { align-items: flex-start; flex-direction: column; padding: 16px; gap: 10px; }
  .marketplace-disclosure { padding-inline: 16px; }
  /* A horizontally scrolling nav strip leaves a grey scrollbar track sitting
     under the header on every phone, which reads as something half-built
     rather than as a design. Seven short Hebrew labels wrap onto two lines
     at 375px with room to spare, and wrapping needs no scrollbar, no JS and
     no hidden items. */
  .header-links { width: 100%; flex-wrap: wrap; gap: 2px 16px; justify-content: flex-start; overflow-x: visible; }
  .header-links a { padding: 7px 0; white-space: nowrap; font-size: 13px; }
  .hero h1 { font-size: 34px; margin: 6px 0 8px; }
  .hero p { font-size: 15px; line-height: 1.5; }
  /* Three stacked full-width controls came to 218px - more than the hero
     copy above them - on a page whose job is showing deals. The query needs
     the full width; the game filter and the button do not, and they sit
     together on one row. align-items:end keeps them on a baseline despite
     only one of them carrying a label. */
  .search { grid-template-columns: 1fr 1fr; gap: 9px 10px; }
  .search > .search-field { grid-column: 1 / -1; }
  .search > .search-field.compact { grid-column: 1 / 2; }
  .search > button { grid-column: 2 / 3; }
  .trust-strip { margin-inline: -16px; overflow-x: auto; gap: 18px; }
  .trust-strip small { display: none; }
  .deal-card, .deal-card.featured { grid-template-columns: 1fr; }
  .card-media { min-height: 210px; border-inline-end: 0; border-bottom: 1px solid var(--line-2); }
  .card-media img, .featured .card-media img { height: 230px; }
  .featured h3 { font-size: 22px; }
  .detail-content { padding: 20px; }
  /* A deal page reached from a Telegram link exists to confirm a price. On a
     375x812 phone the image was 331px and the title 151px, which put the
     price block at 805px - the fold, to the pixel. The picture still says
     what the product is at 200px; the price is the thing the reader came
     for and it belongs on the first screen. */
  .hero-img { height: 200px; padding: 16px; }
  .detail-content h1 { font-size: 22px; line-height: 1.15; margin: 8px 0 6px; }
  .detail-price { padding: 17px; }
  .detail-price .dual-money-primary { font-size: 34px; }
  .feed-heading { padding-top: 34px; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .admin-nav, .page-head { align-items: stretch; flex-direction: column; }
  .admin-nav > div { flex-wrap: wrap; }
}

/* Admin: one Save for every discovery source. */
.toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 12px 0; }
.toggle-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); background: var(--wash-neutral-2); }
.toggle-row span { display: flex; flex-direction: column; }
.toggle-row small { color: var(--muted-2); font-size: 10px; }
.force-check { background: none; border: 1px solid var(--line); font-size: 10px; padding: 3px 7px; cursor: pointer; }
.force-check:hover { border-color: var(--ink); }

/* Concrete answers to "add $4 of eligible products". */
.cart-fillers { margin-top: 14px; padding: 12px 14px; background: var(--info-wash); border-inline-start: 3px solid var(--info-line); }
.cart-fillers h3 { font-size: 12px; margin: 0 0 8px; color: var(--info-ink); }
.cart-fillers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cart-fillers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; }
.cart-fillers .filler-price { flex: none; }

/* ==========================================================================
   Accessibility toolbar and theme switch
   ==========================================================================
   Israeli Standard 5568 adopts WCAG 2.0 level AA, and the Equal Rights for
   Persons with Disabilities regulations require both the adjustments below
   and a published accessibility statement naming a person to contact.

   Every control here works by setting a data attribute on <html>, and all
   the styling hangs off those attributes. Nothing writes an inline style,
   because the Content-Security-Policy this site sends allows no inline
   styles or scripts - a widget that reached for element.style would simply
   stop working the day someone tested the header.
   ========================================================================== */

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--yellow);
  color: var(--on-yellow);
  font-weight: 850;
}
.skip-link:focus { inset-inline-start: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.a11y-launcher {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  z-index: 60;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 2px solid var(--slab);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px var(--shadow-2);
}
.a11y-launcher:hover { background: var(--slab); color: var(--on-slab); }

.a11y-panel {
  position: fixed;
  inset-block-end: 82px;
  inset-inline-start: 18px;
  z-index: 61;
  width: min(310px, calc(100vw - 36px));
  padding: 16px;
  background: var(--paper);
  color: var(--text);
  border: 2px solid var(--slab);
  box-shadow: 0 6px 22px var(--shadow-2);
  display: grid;
  gap: 8px;
  text-align: start;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { margin: 0 0 4px; font-size: 15px; }
.a11y-panel button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  color: var(--text);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  text-align: start;
}
.a11y-panel button:hover { border-color: var(--blue); }
.a11y-panel button[aria-pressed="true"] {
  background: var(--slab); border-color: var(--slab); color: var(--on-slab);
}
.a11y-panel button[aria-pressed="true"]::after { content: "✓"; }
.a11y-panel .a11y-reset { background: none; border-style: dashed; font-weight: 700; }
.a11y-panel .a11y-statement { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.a11y-panel .a11y-statement a { color: var(--blue); text-decoration: underline; }

.theme-toggle {
  border: 1px solid var(--slab-link);
  background: none;
  color: var(--slab-link);
  padding: 6px 11px;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--on-slab); border-color: var(--on-slab); }

/* --- reader adjustments, all attribute-driven --- */
html[data-a11y-font="lg"]  { font-size: 112.5%; }
html[data-a11y-font="xl"]  { font-size: 125%; }
html[data-a11y-font="xxl"] { font-size: 140%; }

html[data-a11y-contrast="high"] {
  --paper: var(--bg);
  --paper-2: var(--bg);
  --muted: var(--text);
  --muted-2: var(--text);
  --line: var(--text);
  --line-2: var(--text);
  --line-strong: var(--text);
  --chip-ink: var(--text);
  --chip-line: var(--text);
}
html[data-a11y-contrast="high"] :where(.wash-neutral, .market-line, .reference-empty) {
  background: var(--bg);
}

html[data-a11y-links="on"] :where(main, footer) a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 800;
}

html[data-a11y-font-face="readable"],
html[data-a11y-font-face="readable"] :where(button, input, select, textarea) {
  font-family: Verdana, Tahoma, "Arial Hebrew", Arial, sans-serif;
}

html[data-a11y-spacing="on"] :where(p, li, dd, dt) {
  line-height: 2;
  letter-spacing: .04em;
  word-spacing: .1em;
}

html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .deal-card { transition: none; }
  .deal-card:hover { transform: none; }
}

@media print {
  .a11y-launcher, .a11y-panel, .theme-toggle, .skip-link { display: none; }
}

.site-footer {
  margin-top: 54px;
  padding: 26px max(28px, calc((100vw - 1164px) / 2));
  background: var(--slab);
  color: var(--slab-sub);
  font-size: 13px;
  line-height: 1.7;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; }
.site-footer a { color: var(--slab-link); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.site-footer a:hover { color: var(--on-slab); }
.site-footer p { margin: 0; max-width: 68ch; }

/* The accessibility launcher is fixed 18px from the inline-start edge, and
   below about 1340px the footer's own side padding is narrower than that, so
   the button lands on the last lines of the disclaimer - the one paragraph
   that has to stay readable. Reserve the height at the end of the page
   rather than moving the button, which has to stay reachable everywhere. */
@media (max-width: 1340px) {
  .site-footer { padding-block-end: 88px; }
}

/* ---------------- compare page ---------------- */

/* Rebuilt from inline style attributes on the form controls. The form is one
   column at every width: a URL field wants the whole line, and the label,
   field, button and the note about which shops are supported read as a
   sequence rather than a grid. */
.compare-form {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.compare-field { font-weight: 700; font-size: 14px; }
.compare-form input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--text);
  background: var(--paper-2);
  border: 1px solid var(--field-line);
  border-radius: 3px;
}
.compare-form input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.compare-form .button { margin-block-start: 2px; }
.compare-hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.compare-hosts { color: var(--text); font-weight: 600; }

/* Label above, figure below, so a long Hebrew label and a two-currency
   figure never compete for the same line on a phone. */
.compare-figures { display: grid; gap: 2px 18px; margin: 14px 0 0; }
.compare-figures dt { font-size: 13px; color: var(--muted); }
.compare-figures dd { margin: 0 0 10px; font-weight: 800; font-size: 17px; }
@media (min-width: 620px) {
  .compare-figures { grid-template-columns: max-content 1fr; align-items: baseline; }
  .compare-figures dd { margin-block-end: 4px; }
}

/* ---------------- error page ---------------- */

.error-page { padding-block: 54px 72px; }
.error-code {
  margin: 0;
  font-size: 15px; font-weight: 900; letter-spacing: .18em;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.error-page h1 { margin: 6px 0 14px; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }

/* ---------------- catalogue pager ---------------- */

.pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px;
  margin-block-start: 34px;
}
.pager-status {
  font-size: 14px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.button.is-disabled { opacity: .38; pointer-events: none; }

/* The affiliate line and the contact address sit a step below the trading
   disclaimer above them: still legible, clearly secondary. */
.site-footer .footer-meta { margin-block-start: 10px; font-size: 12px; color: var(--slab-sub); }
.site-footer .footer-meta a { font-weight: 700; }

/* ---------------- long-form pages ---------------- */

/* The FAQ, the disclosure, the privacy policy and the accessibility
   statement are real documents, and they were inheriting browser defaults
   for everything but font-size: headings at h2-is-1.5em, list bullets at the
   default indent, and lines running the full 1040px of .narrow, which is
   over a hundred characters. A measure and a type scale is the whole
   difference between a page someone reads and a page someone leaves. */
.prose { max-width: 68ch; }
.prose > h1 { margin: 0 0 6px; font-size: clamp(30px, 5vw, 40px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.prose > h2 {
  margin: 40px 0 10px;
  font-size: 21px; line-height: 1.3; letter-spacing: -.01em;
  text-wrap: balance;
}
.prose > h2:first-of-type { margin-block-start: 32px; }
.prose > h3 { margin: 26px 0 8px; font-size: 17px; }
.prose > p { margin: 0 0 16px; }

/* The opening paragraph carries the page's claim; the rest supports it. */
.prose > .lede {
  margin-block-end: 22px;
  font-size: 18px; line-height: 1.65; color: var(--text);
  border-inline-start: 4px solid var(--yellow);
  padding-inline-start: 14px;
}

.prose ul, .prose ol { margin: 0 0 16px; padding-inline-start: 22px; }
.prose li { margin-block-end: 7px; }
.prose li::marker { color: var(--muted-2); }

/* "Last updated" closes the document rather than trailing off it. */
.prose > .muted:last-child {
  margin-block-start: 34px;
  padding-block-start: 14px;
  border-top: 1px solid var(--line);
}

@media (max-width: 700px) {
  .prose > h2 { margin-block-start: 30px; }
}

/* ===================================================================
   Deals page, Phase 1: sections and the reduced card.
   ===================================================================
   Built on the existing tokens - no new palette. The old .deal-card
   rules are untouched because /products still renders them in catalog
   mode; .deal-card.v2 overrides only what it must.

   The point of this block is hierarchy. A reader deciding between four
   products reads one number: the delivered shekel price. Everything
   else on the card is smaller than it, and everything that is not on
   the list of eleven fields is behind Details. The previous card put
   the item price, shipping, import estimate, market comparison, seller
   rating and a caution box at the same visual weight, so nothing was
   emphasised and the price a buyer actually pays was not the largest
   thing on it. */

.deal-section { margin: 0 0 40px; }
.deal-section .feed-heading { align-items: flex-end; }
.deal-section h2 { display: flex; align-items: center; gap: 9px; margin: 0; }
.section-icon { font-size: .85em; line-height: 1; }
.section-blurb { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* Scoped to the sections, so /products keeps the catalogue grid.
   One card per row until 1200px: at three-up the text column came to
   ~204px, which is narrower than the price it has to carry. */
.deal-section .deal-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }

.deal-card.v2 {
  display: flex; flex-direction: column; grid-template-columns: none;
  border-top-width: 3px; position: relative;
}
/* The media box states every one of its own dimensions.
   ----------------------------------------------------------------
   It did not, and the card shipped with the image lying across the
   title. Measured at 1440px: the grid track was 132px and the media
   element was 240x240, overflowing 94px into the text column, 72px of
   it across the title.

   Two things combined. .card-media (the catalog card, line ~326)
   carries min-height: 240px, and this rule overrode the properties it
   named without naming that one - so the height was forced to 240px.
   Then aspect-ratio: 1 derived the *width* from that height rather
   than taking it from the grid track, and a grid item wider than its
   track simply overflows it. No absolute positioning was involved,
   which is why it did not look like an overlap bug in the source.

   So: min-height is reset rather than left to be inherited, the height
   is stated outright, aspect-ratio is off (it is the thing that turns a
   height into a width), and width is pinned to the track it was given.
   A grid item that cannot exceed its own column cannot reach the column
   beside it - the invariant, rather than a number that happens to fit. */
.deal-card.v2 {
  --media-w: clamp(96px, 30%, 136px);
  --media-h: 128px;
}
.deal-card.v2 .card-link {
  display: grid; grid-template-columns: var(--media-w) minmax(0, 1fr);
  gap: 16px; padding: 15px; text-decoration: none; color: inherit;
  align-items: start; min-width: 0;
}
.deal-card.v2 .card-media {
  min-height: 0;            /* the leak: 240px from the catalog card */
  aspect-ratio: auto;       /* height is stated; never derive a width */
  width: 100%; max-width: 100%; min-width: 0;
  height: var(--media-h);
  /* The row has to be told its size too.
     This box is a grid, and its single row was implicit - so it was
     content-sized, to 229px for a 745x1000 Amazon render. The image's own
     height: 100% then resolved against the row the image had just sized,
     which is circular: the percentage came back as 229px, max-height: 100%
     could never clamp it, and overflow: hidden cropped the picture inside a
     160px box. minmax(0, 1fr) ties the row to the box's content height, so
     a percentage inside it resolves against a definite number and the row
     can never outgrow its container. */
  display: grid; place-items: center; grid-template-rows: minmax(0, 1fr);
  padding: 6px;             /* whitespace belongs to the box, not the image */
  position: relative; background: var(--media-bg);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* The catalog card's 4px yellow rule, pinned to the bottom of the media
   box. It belongs to a 240px-tall panel, not to a 124px thumbnail. */
.deal-card.v2 .card-media::after { content: none; }
.deal-card.v2 .card-media img {
  /* Both pairs on purpose. width/height + contain letterbox an odd Amazon
     shape inside the box; the max-* pair means no later rule can push the
     image past its container even if it sets an explicit size. */
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
/* min-height: 220px, from the catalog placeholder. */
.deal-card.v2 .image-placeholder { min-height: 0; height: 100%; }
.save-badge {
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  background: var(--good-ink); color: var(--on-slab); font-weight: 700;
  font-size: 12px; padding: 2px 7px; letter-spacing: .01em;
}
.deal-card.v2 .card-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.deal-card.v2 .card-title {
  margin: 0; font-size: 18px; line-height: 1.34; font-weight: 650;
  /* Two lines, then ellipsis. A 140-character Amazon title otherwise
     pushes the price below the fold on a phone. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The one number that matters. */
.card-price { display: flex; flex-direction: column; gap: 2px; }
.card-price-ils {
  font-size: 26px; line-height: 1.05; font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.card-price-note { font-size: 11.5px; color: var(--muted); }

.card-saving {
  font-size: 13px; font-weight: 650; color: var(--good-ink);
  display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline;
}
.card-saving-vs { font-weight: 400; color: var(--muted); font-size: 12px; }

.card-signals { display: flex; flex-wrap: wrap; gap: 6px; }

/* Card typography, scoped so the catalogue card and every other surface
   that shares these class names is left where it is. Sizes are stated
   once here and lifted a step at 1200px, where the column is widest. */
.deal-card.v2 .card-price-ils { font-size: 31px; }
.deal-card.v2 .card-price-note { font-size: 14px; }
.deal-card.v2 .card-saving { font-size: 14.5px; }
.deal-card.v2 .card-saving-vs { font-size: 14px; }
.deal-card.v2 .chip { font-size: 14px; padding: 3px 9px; }
.deal-card.v2 .card-foot { font-size: 14px; gap: 5px 12px; }
.chip {
  font-size: 11.5px; padding: 2px 7px; border: 1px solid var(--chip-line);
  color: var(--chip-ink); background: var(--paper); white-space: nowrap;
}
.chip-status { border-color: var(--line-strong); font-weight: 600; }
.chip-restock { background: var(--good-wash); border-color: var(--good-line); color: var(--good-ink); }
/* Distinct from chip-restock on purpose: a reader scanning the grid should
   be able to tell "stock is back" from "it ships here again" without
   reading either one twice. */
.chip-israel-back { background: var(--note-wash); border-color: var(--note-line); color: var(--note-ink); }

/* A last-verified price, shown as history rather than as an offer. Muted
   and struck-through weight so the number cannot be mistaken for a live
   total at a glance; the caution box above it says so in words. */
.detail-price.is-unverified { opacity: .72; }
.detail-price.is-unverified .price-label { color: var(--caution-strong); font-weight: 700; }
.chip-drop { background: var(--info-wash); border-color: var(--info-line); color: var(--info-ink); }

.card-foot {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  font-size: 11.5px; color: var(--muted); margin-top: auto;
}
/* A third-party seller is worth knowing and is not a warning. It used to
   be a bordered box with a bold heading on every such card, which is most
   of them, so the one card that genuinely needed attention looked the
   same as the rest. */
.card-trust.is-thirdparty { color: var(--caution-strong); }
.card-checked.is-stale { color: var(--caution-strong); }

.card-actions {
  display: flex; gap: 10px; padding: 0 15px 15px; margin-top: auto;
}
.card-actions .button { flex: 1; text-align: center; padding: 9px 10px; font-size: 13.5px; }
.deal-card.v2 .card-actions .button { padding: 11px 14px; font-size: 15.5px; }
.card-actions .button.ghost { flex: 0 0 auto; background: transparent; }

@media (min-width: 600px) {
  .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  /* Roomier, still secondary to the price: a 176px column holding a
     160px-tall box, so a tall Amazon render letterboxes with whitespace
     either side instead of setting the card's height. */
  .deal-card.v2 { --media-w: 176px; --media-h: 160px; }
  .card-price-ils { font-size: 28px; }
}
@media (min-width: 1000px) {
  .deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Two per row, and only here. The card is read left-to-right as image ->
   title -> price, so the text column is what the extra width has to go to;
   a third column would take it back again. */
@media (min-width: 1200px) {
  .deal-section .deal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
  }
  .deal-card.v2 .card-title { font-size: 19px; }
  .deal-card.v2 .card-price-ils { font-size: 33px; }
  .deal-card.v2 .card-link { gap: 18px; padding: 16px; }
  .deal-card.v2 .card-actions { padding: 0 16px 16px; }
}