/* צייד אליאקספרס — design system.
 *
 * MOBILE-FIRST, LITERALLY. Every base rule below is the 390px rule; wider
 * screens are additive @media (min-width) blocks. The previous stylesheet was
 * written desktop-first and it showed: at 390px the nav wrapped "צור / קשר"
 * across two lines and a block of category chips ate half the first screen
 * before a single product appeared. Israeli shopping traffic is overwhelmingly
 * mobile, so the small screen is the design, not the fallback.
 *
 * PALETTE. Deliberately not warm cream with a brown-orange accent — that is the
 * default "generated page" look and this has to read as a business. The scheme
 * is a cool marine navy (the brand), a teal accent (links and actions), and two
 * semantic colours that carry the entire pitch: RED for what you save, GREEN
 * for the verification we do. Those two are the product. Price is near-black
 * and large, because on a deals site the number is the headline.
 *
 * Every colour is defined on bare :root first, then redefined for dark under
 * both guards. No colour is ever defined only inside a media block.
 */

/* ---------- tokens: light ------------------------------------------------ */
:root{
  --ground:#f2f5f8;
  --surface:#ffffff;
  --surface-2:#e9eef3;
  --ink:#0d1b2a;
  --ink-soft:#4a5b6b;
  --ink-faint:#7b8b9a;
  --rule:#dde4ea;
  --brand:#10233b;
  --brand-ink:#ffffff;
  --accent:#0e7490;
  --accent-ink:#ffffff;
  --accent-soft:#e0f2f7;
  --save:#c81e1e;
  --save-ink:#ffffff;
  --trust:#0f6f4a;
  --trust-soft:#e3f5ec;
  --focus:#0891b2;
  --shadow:0 1px 2px rgba(13,27,42,.06),0 2px 8px rgba(13,27,42,.05);
  --shadow-lift:0 2px 6px rgba(13,27,42,.09),0 8px 24px rgba(13,27,42,.09);
  --radius:14px;
  --radius-sm:9px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0b1220;
    --surface:#141d2c;
    --surface-2:#1d2838;
    --ink:#e8eef6;
    --ink-soft:#a9b8c7;
    --ink-faint:#7e8fa0;
    --rule:#27334455;
    --brand:#0a1524;
    --brand-ink:#e8eef6;
    --accent:#3fc3dd;
    --accent-ink:#06202b;
    --accent-soft:#12303c;
    --save:#f2666b;
    --save-ink:#2a0b0d;
    --trust:#43d69a;
    --trust-soft:#0f2f24;
    --focus:#5fd8ef;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#0b1220;
  --surface:#141d2c;
  --surface-2:#1d2838;
  --ink:#e8eef6;
  --ink-soft:#a9b8c7;
  --ink-faint:#7e8fa0;
  --rule:#27334455;
  --brand:#0a1524;
  --brand-ink:#e8eef6;
  --accent:#3fc3dd;
  --accent-ink:#06202b;
  --accent-soft:#12303c;
  --save:#f2666b;
  --save-ink:#2a0b0d;
  --trust:#43d69a;
  --trust-soft:#0f2f24;
  --focus:#5fd8ef;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);
}

/* ---------- font --------------------------------------------------------- */
/* Rubik, self-hosted. NOT loaded from Google Fonts: privacy.html promises no
   third-party requests, and a webfont request is one. It is the variable
   family subset to Hebrew + Latin (32KB), so 400/500/700/800 all come from a
   single file that is smaller than one product thumbnail. */
@font-face{
  font-family:"Rubik";
  /* One src. The legacy "woff2-variations" token duplicated the request and
     made the browser warn that the preload went unused; a variable woff2 is
     served correctly by plain format("woff2") everywhere that supports
     variable fonts at all. */
  src:url("/fonts/rubik-var.woff2") format("woff2");
  font-weight:300 900;
  font-display:swap;
  font-style:normal;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Rubik","Segoe UI","Noto Sans Hebrew",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;          /* the body must never scroll sideways */
}
img{max-width:100%;height:auto}

/* ---------- header ------------------------------------------------------- */
.top{background:var(--brand);color:var(--brand-ink);position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;gap:.6rem;
  padding:.55rem .8rem;max-width:76rem;margin:0 auto}
.brand{display:flex;align-items:center;gap:.45rem;color:var(--brand-ink);
  text-decoration:none;font-weight:700;font-size:1.02rem;white-space:nowrap;
  flex:0 0 auto}
/* Below 600px only the mark and "צייד" show. The full wordmark plus five nav
   links do not fit on a 390px line, and the two were overlapping. */
.brand span{display:none}
.brand img{width:28px;height:28px;border-radius:7px;display:block}
.brand b{font-weight:800}
.brand span{color:var(--accent);font-weight:800}
.top nav{margin-inline-start:auto;display:flex;gap:.15rem;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.top nav::-webkit-scrollbar{display:none}
/* nowrap is the fix for "צור / קשר" splitting across two lines at 390px */
.top nav a{color:var(--brand-ink);text-decoration:none;white-space:nowrap;
  font-size:.83rem;opacity:.82;padding:.3rem .45rem;border-radius:6px}
.top nav a:hover{opacity:1;background:#ffffff1a}
/* Below 600px the header keeps only the three links that earn the slot:
   browse, trust, and English. The other two live in the footer, which carries
   all seven. Measured, not guessed — five links needed 365px inside 276px, so
   the row scrolled silently and the last two sat off-screen entirely. */
@media (max-width:599px){.top nav a.wide-only{display:none}}

/* the category rail: one line that scrolls, never a block that wraps */
.rail{background:var(--surface);border-bottom:1px solid var(--rule);
  position:sticky;top:var(--railtop,44px);z-index:19}
.rail-in{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  padding:.5rem .8rem;max-width:76rem;margin:0 auto;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.rail-in::-webkit-scrollbar{display:none}
.rail a{white-space:nowrap;scroll-snap-align:start;font-size:.84rem;
  font-weight:500;text-decoration:none;color:var(--ink-soft);
  background:var(--surface-2);border-radius:999px;padding:.32rem .78rem}
.rail a:hover{color:var(--accent-ink);background:var(--accent)}
.rail a[aria-current="page"]{background:var(--accent);color:var(--accent-ink);font-weight:700}

.wrap{max-width:76rem;margin:0 auto;padding:1rem .8rem 3rem}
.narrow{max-width:44rem}

/* ---------- type --------------------------------------------------------- */
h1{font-size:1.45rem;line-height:1.28;margin:.6rem 0 .4rem;font-weight:800;
  letter-spacing:-.01em;text-wrap:balance}
h2{font-size:1.12rem;line-height:1.35;margin:1.9rem 0 .7rem;font-weight:700}
h3{font-size:1rem;margin:1.2rem 0 .4rem;font-weight:700}
p,li{color:var(--ink-soft)}
strong{color:var(--ink);font-weight:700}
a{color:var(--accent)}
.lede{font-size:1.02rem}
.crumbs{font-size:.8rem;color:var(--ink-faint);margin:.2rem 0 0}
.crumbs a{color:var(--ink-faint);text-decoration:none}
.more{font-weight:600;text-decoration:none;white-space:nowrap}
h2 .more{font-size:.8rem;font-weight:500;margin-inline-start:.4rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

/* ---------- product grid: the store ------------------------------------- */
/* Two columns at 390px. The photograph is the product — it is what makes a
   stranger stop — so the card is image-led and the whole thing is one tap
   target, not a thumbnail sitting next to a line of text. */
.cards{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.7rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.cards>li{display:flex}
.cards a{display:flex;flex-direction:column;width:100%;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.cards a:hover{box-shadow:var(--shadow-lift);border-color:var(--accent)}
.ph{position:relative;aspect-ratio:1/1;background:var(--surface-2)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;inset-inline-start:.45rem;top:.45rem;
  background:var(--save);color:var(--save-ink);font-weight:800;font-size:.76rem;
  border-radius:999px;padding:.12rem .5rem;letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.meta{padding:.55rem .6rem .65rem;display:flex;flex-direction:column;gap:.32rem;flex:1}
.nm{font-size:.86rem;line-height:1.35;margin:0;font-weight:500;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr{display:flex;align-items:baseline;gap:.4rem;margin-top:auto}
.now{font-size:1.32rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.was{font-size:.82rem;color:var(--ink-faint);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.chips{display:flex;gap:.3rem;flex-wrap:wrap}
.chip{font-size:.71rem;font-weight:600;border-radius:999px;padding:.1rem .45rem;
  background:var(--surface-2);color:var(--ink-soft);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.chip.tr{background:var(--trust-soft);color:var(--trust)}

/* ---------- category tiles: the aisles ---------------------------------- */
.tiles{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.7rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles a{display:block;position:relative;border-radius:var(--radius);
  overflow:hidden;text-decoration:none;background:var(--surface);
  border:1px solid var(--rule);box-shadow:var(--shadow);aspect-ratio:4/3}
.tiles img{width:100%;height:100%;object-fit:cover;display:block}
.tiles .lbl{position:absolute;inset-inline:0;bottom:0;padding:.55rem .6rem;
  background:linear-gradient(to top,rgba(8,16,26,.88),rgba(8,16,26,0));
  color:#fff}
.tiles .lbl b{display:block;font-size:.93rem;font-weight:700;line-height:1.25}
.tiles .lbl span{font-size:.76rem;opacity:.85;font-variant-numeric:tabular-nums}
.tiles a:hover{border-color:var(--accent);box-shadow:var(--shadow-lift)}

/* ---------- trust strip: our entire pitch, as signals not prose --------- */
.trust{display:grid;gap:.5rem;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:1.1rem 0 0;padding:0;list-style:none}
.trust li{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:.6rem .5rem;text-align:center;
  box-shadow:var(--shadow)}
/* The numbers are isolated LTR. In an RTL paragraph "92%+" renders as "+92%",
   which reads as a different claim. bdi in the markup plus this is belt and
   braces. */
.trust b{display:block;font-size:1.05rem;font-weight:800;color:var(--trust);
  font-variant-numeric:tabular-nums;line-height:1.2;
  direction:ltr;unicode-bidi:isolate}
.trust span{display:block;font-size:.72rem;color:var(--ink-soft);line-height:1.3;
  margin-top:.15rem}

/* ---------- deal page ---------------------------------------------------- */
.dealtop{display:block}
.dealmedia{min-width:0}
.hero{width:100%;border-radius:var(--radius);border:1px solid var(--rule);
  background:var(--surface);display:block;margin:.8rem 0;aspect-ratio:1/1;
  object-fit:contain;max-height:62vh}
.pricebar{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;margin:.4rem 0 .2rem}
.price{font-size:2.3rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  line-height:1.1;font-variant-numeric:tabular-nums}
.off{background:var(--save);color:var(--save-ink);border-radius:999px;
  padding:.16rem .6rem;font-size:.83rem;font-weight:800;
  font-variant-numeric:tabular-nums}
.asof{font-size:.8rem;color:var(--ink-faint);margin:.35rem 0 0;width:100%;line-height:1.5}
.proof{display:flex;gap:.4rem;flex-wrap:wrap;margin:.7rem 0 0;padding:0;list-style:none}
.proof li{background:var(--surface);border:1px solid var(--rule);
  border-radius:999px;padding:.32rem .7rem;font-size:.82rem;color:var(--ink-soft);
  font-weight:500;font-variant-numeric:tabular-nums}
.proof b{color:var(--trust);font-weight:800}
.cta{display:block;background:var(--accent);color:var(--accent-ink);
  text-align:center;font-weight:800;font-size:1.05rem;text-decoration:none;
  border-radius:var(--radius);padding:.95rem 1rem;margin:1.1rem 0 .5rem;
  box-shadow:var(--shadow-lift)}
.cta small{display:block;font-weight:400;font-size:.78rem;opacity:.92;margin-top:.15rem}
.cta:hover{filter:brightness(1.07)}

/* ---------- panels ------------------------------------------------------- */
.disc{background:var(--surface);border:1px solid var(--rule);
  border-inline-start:4px solid var(--accent);border-radius:var(--radius-sm);
  padding:.7rem .85rem;margin:1.2rem 0;font-size:.85rem;line-height:1.6}
.disc p{margin:0;color:var(--ink-soft)}
.ctx{background:var(--accent-soft);border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:.75rem .9rem;margin:.8rem 0;font-size:.92rem}
.ctx p{margin:0;color:var(--ink)}
.join{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:1rem;margin:1.8rem 0;box-shadow:var(--shadow)}
.join p{margin:.3rem 0}
.btns{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 0}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);
  border-radius:var(--radius-sm);padding:.55rem 1rem;font-weight:700;
  text-decoration:none;font-size:.92rem}
.btn.alt{background:var(--surface-2);color:var(--ink)}
.btn:hover{filter:brightness(1.07)}
.muted{display:inline-block;color:var(--ink-faint);padding:.55rem 0;font-size:.9rem}
ul.check{padding-inline-start:1.1rem;margin:.5rem 0}
ul.check li{margin:.4rem 0}
.catlist{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.45rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.catlist li{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:.5rem .7rem;font-size:.9rem}
.catlist span{color:var(--ink-faint);font-size:.8rem;font-variant-numeric:tabular-nums}
.catnav{margin:1rem 0;font-size:.9rem;display:flex;gap:.4rem;flex-wrap:wrap}
.catnav a{text-decoration:none;background:var(--surface-2);border-radius:999px;
  padding:.25rem .7rem;color:var(--ink-soft);white-space:nowrap}

/* ---------- search ------------------------------------------------------- */
.searchbox{margin:1rem 0 .3rem}
.searchbox label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);
  margin-bottom:.35rem}
.searchbox input{width:100%;font:inherit;font-size:1rem;padding:.7rem .9rem;
  border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink)}
.searchbox input::placeholder{color:var(--ink-faint)}

/* wide content scrolls in its own container; the body never does */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:start;padding:.5rem .6rem;border-bottom:1px solid var(--rule)}

footer{border-top:1px solid var(--rule);margin-top:2.5rem;padding:1.2rem .8rem 2rem;
  font-size:.85rem;color:var(--ink-faint);background:var(--surface)}
.foot-in{max-width:76rem;margin:0 auto}
.fl{margin:.3rem 0;display:flex;gap:.9rem;flex-wrap:wrap}
footer a{color:var(--ink-soft);text-decoration:none;white-space:nowrap}
footer a:hover{color:var(--accent)}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- wider screens are additive ---------------------------------- */
@media (min-width:600px){
  .brand span{display:inline}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  h1{font-size:1.75rem}
  .wrap{padding:1.3rem 1.1rem 3.5rem}
}
@media (min-width:900px){
  /* image beside the buy box, so price + CTA are never below the fold */
  .dealtop{display:grid;grid-template-columns:1.15fr .85fr;gap:1.6rem;
    align-items:start}
  .dealbuy{position:sticky;top:6.2rem}
  .hero{margin-top:0;max-height:none}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  h1{font-size:2rem}
  .nm{font-size:.9rem}
  .catlist{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1200px){
  .cards{grid-template-columns:repeat(5,minmax(0,1fr))}
}