/* Global font: Assistant (Google Fonts)
   Loaded via <link> in each page head.
   This CSS uses --he-font as the site-wide Hebrew UI font.
*/
/* KBWG – full standalone styling (RTL-first) */
:root{
  --he-font: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 550;
  --fw-bold: 600;
--bg: #f6f7f4;
  --paper: rgba(255,255,255,.85);
  --paper2: rgba(255,255,255,.70);
  --stroke: rgba(20,40,80,.10);
  --stroke2: rgba(20,40,80,.14);
  --ink: #111827;
  --muted: rgba(17,24,39,.70);
  --muted2: rgba(17,24,39,.56);
  --brand: #2a5b9a;
  --brand2: #9dc3e6;
  --shadow: 0 18px 40px rgba(20,35,60,.08);
  --radius: 22px;
  --radius2: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--he-font);
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(42,91,154,.12), transparent 60%),
    radial-gradient(800px 520px at 10% 20%, rgba(157,195,230,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(186,215,239,.12), transparent 55%),
    var(--bg);
  line-height:1.6;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }
img{ max-width:100%; height:auto; display:block; }

.wrap{ width:min(1120px, 100% - 32px); margin-inline:auto; }

.muted{ color: var(--muted); }
.mini{ font-size: 13px; color: var(--muted2); font-weight: var(--fw-medium); }
h1,h2,h3{ line-height: 1.15; letter-spacing: .2px; font-weight: var(--fw-semibold); }
h1{ font-size: clamp(30px, 4vw, 44px); margin:0 0 10px; }
h2{ font-size: clamp(20px, 2.6vw, 28px); margin:0 0 10px; }
h3{ font-size: 18px; margin:0 0 8px; }

/* Header */
.siteHeader{
  position: sticky; top:0; z-index:20;
  background: rgba(246,247,251,.70);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}
.headerRow{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 12px 0;
}

/* Header nav (desktop): keep everything on ONE row, next to the logo */
.siteHeader .nav{ flex: 1 1 auto; }
.siteHeader .logo{ flex: 0 0 auto; }

@media (min-width: 901px){
  .headerRow{ flex-wrap: nowrap; }
  .siteHeader .nav{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: visible; /* keep dropdowns visible */
    gap: 6px;
  }
  /* Slightly tighter pills so all top-level items fit */
  #siteHeader .navGroup > summary{
    padding: 6px 8px;
    font-size: 13px;
  }
  .siteHeader .nav a{
    font-size: 13px;
    padding: 6px 8px;
  }

  /* Give the nav more room on smaller desktops */
  .logo{ min-width: 0; }
  @media (max-width: 1100px){
    .logoText{ display:none; }
    .logo{ min-width: 0; }
  }
}
.logo{
  display:flex; align-items:center; gap:10px; min-width: 220px;
}
.logoImg{ width:34px; height:34px; border-radius:10px; border:1px solid var(--stroke); background:rgba(255,255,255,.8); }
.logoText{ font-weight: var(--fw-bold); letter-spacing:.3px; }

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  justify-content:flex-start;
  white-space:normal;
  overflow-x:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width: thin;
}
.nav a{
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: var(--fw-semibold);
  color: rgba(17,24,39,.78);
}
.nav a:hover{
  background: rgba(42,91,154,.10);
  text-decoration:none;
}
.nav a.active{
  background: rgba(42,91,154,.12);
  border: 1px solid rgba(42,91,154,.18);
  color: rgba(17,24,39,.92);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.92);
  font-weight: var(--fw-bold);
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.primary{
  border-color: rgba(42,91,154,.22);
  background: rgba(42,91,154,.12);
}
.btn.ghost{
  background: rgba(255,255,255,.75);
}
.actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Panels & Cards */
.panel, .card, .aboutCard{
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel{ padding: 16px; }
.card{ padding: 16px; }
.aboutCard{ padding: 16px; }
.spaced{ margin: 14px 0; }


/* ---------------------------------------------------------
   Weglot language switcher placement (desktop + mobile)
   --------------------------------------------------------- */
#siteHeader .langSlot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Show only one slot per breakpoint */
@media (min-width: 901px){
  #siteHeader #langSlotMobile{ display: none; }
}
@media (max-width: 900px){
  #siteHeader #langSlotDesktop{ display: none; }
}

/* Keep the switcher sized like the other header controls */
#siteHeader #langSlotMobile{ width: 44px; height: 44px; }

/* Mobile: keep the switcher between the hamburger and the site title (centered) */
@media (max-width: 900px){
  #siteHeader .headerRow{ position: relative; }
  #siteHeader #langSlotMobile{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10003;
  }
}

/* When the Weglot widget is moved into a slot, neutralize any fixed positioning */
#siteHeader .langSlot .wg-default,
#siteHeader .langSlot .wg-drop,
#siteHeader .langSlot .weglot-container,
#siteHeader .langSlot #wg-switcher-container,
#siteHeader .langSlot #wg-switcher,
#siteHeader .langSlot #weglot_switcher,
#siteHeader .langSlot #weglot_here,
#siteHeader .langSlot .kbwgWeglotMounted{
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
}

#siteHeader .langSlot .wg-default,
#siteHeader .langSlot .wg-drop,
#siteHeader .langSlot .weglot-container,
#siteHeader .langSlot #wg-switcher-container,
#siteHeader .langSlot #wg-switcher,
#siteHeader .langSlot .kbwgWeglotMounted{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-height: 44px;
}

/* Slightly tighten the widget so it doesn't steal space on small screens */
@media (max-width: 420px){
  #siteHeader .langSlot .wg-default,
  #siteHeader .langSlot .wg-drop{
    transform: scale(.92) !important;
    transform-origin: center;
  }
}


/* Hero */
.hero{
  position: relative;
  margin: 10px 0 12px;
}
.heroShell{
  position: relative;
  overflow:hidden;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.65));
  box-shadow: var(--shadow);
}
.heroBg{
  position:absolute; inset:-40px;
  object-fit: cover;
  width: 110%;
  height: 110%;
  filter: saturate(1.05) contrast(1.03) blur(2px);
  opacity: .22;
  transform: scale(1.0);
}
.heroDeco{
  position:absolute; inset:0;
  background:
    radial-gradient(520px 240px at 80% 30%, rgba(42,91,154,.18), transparent 60%),
    radial-gradient(480px 250px at 20% 60%, rgba(157,195,230,.14), transparent 65%),
    radial-gradient(520px 260px at 55% 105%, rgba(186,215,239,.16), transparent 60%);
  pointer-events:none;
}
.heroInner{
  position:relative;
  padding: 16px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items:center;
}
@media (max-width: 920px){
  .heroInner{ grid-template-columns: 1fr; }
}

/* Drawer nav moved to <body> (site.js v18)
   Some mobile browsers treat fixed elements inside sticky/backdrop-filter headers as a separate stacking context.
   When we move the nav to <body>, it no longer matches `.siteHeader .nav` selectors—so we restyle it here. */
@media (max-width: 900px){
  .kbwgDrawerNav{ direction: rtl; }
  .kbwgDrawerNav a{
    display: block;
    width: 100%;
    text-align: right;
  }
}

/* --- Compact heroes (show content without scrolling) --- */
.hero.heroCompact{ margin: 10px 0 12px; }
.hero.heroCompact .heroInner{
  padding: 12px;
  grid-template-columns: .85fr 1.15fr;
  gap: 12px;
}
@media (max-width: 920px){
  .hero.heroCompact .heroInner{ grid-template-columns: 1fr; padding: 14px; }
}
.hero.heroCompact .heroMedia{
  max-height: 220px;
  min-height: 170px;
  border-radius: calc(var(--radius) - 2px);
}
.hero.heroCompact .heroMedia img{
  height: 100%;
  max-height: 220px;
  object-fit: cover;
}
.hero.heroCompact h1{ margin-bottom: 6px; font-size:1.85rem; line-height:1.05; }
.hero.heroCompact .badgeRow{ margin-top: 8px; }

/* =========================================================
   FIX (Calendar hero): navy background + centered text + image right
   ========================================================= */
.hero.heroCompact{
  position: relative;
}

/* Navy hero background like other pages */
.hero.heroCompact .heroShell{
  background: linear-gradient(135deg, var(--accent, #2a5b9a), #1b3861);
  color: #fff;
  border: none;
}

/* Text readability */
.hero.heroCompact .muted,
.hero.heroCompact .heroCopy p{
  color: rgba(255,255,255,.88);
}

/* Badges on navy */
.hero.heroCompact .badge{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
}

/* Center hero title/copy */
.hero.heroCompact .heroCopy{
  text-align: center;
  justify-self: center;
  position: relative;
  z-index: 2;
}

/* Push hero image further right (RTL-safe) */
.hero.heroCompact .heroMedia{
  justify-self: end;
  margin-inline-start: auto;
  position: relative;
  z-index: 0;
}

/* Force cover fill for calendar hero (protects from later height:auto rules) */
.hero.heroCompact .heroMedia img{
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  max-height: 220px;
}

@media (max-width: 920px){
  .hero.heroCompact .heroMedia{
    justify-self: stretch;
    margin-inline-start: 0;
  }
}

/* Email row on contact page */
.emailRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top: 10px;
}
.emailText{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.92);
  font: inherit;
  font-weight: var(--fw-semibold);
  direction:ltr;
}

.heroCopy p{ margin:0 0 12px; font-weight: var(--fw-medium); }

/* Extra promise line inside the hero/header (replaces the old global notice banner) */
.heroCopy .heroVeganLine{
  margin-top: 10px;
  font-weight: var(--fw-medium);
  opacity: .96;
}
.heroCopy .heroVeganLine b{ font-weight: var(--fw-semibold); }
.badgeRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid var(--stroke);
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: rgba(17,24,39,.78);
}
.heroMedia{
  aspect-ratio: 4 / 3;
  max-height: 240px;

  background: rgba(255,255,255,.74);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  overflow:hidden;
  min-height: 160px;
  max-height: 240px;
  position:relative;
}
.heroMedia img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.0);
}
.heroMedia::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.58));
}
.quoteTag{
  position:absolute;
  inset:auto 14px 14px 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: var(--fw-bold);
  text-align:center;
}

/* Quote strip */
.quoteStrip{
  display:flex;
  gap:10px;
  overflow:auto;
  padding: 10px 2px 2px;
  scroll-snap-type: x mandatory;
}
.quoteStrip::-webkit-scrollbar{ height: 10px; }
.quoteStrip::-webkit-scrollbar-thumb{ background: rgba(17,24,39,.12); border-radius: 999px; }
.quotePill{
  scroll-snap-align:start;
  min-width: 200px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--stroke);
  font-weight: var(--fw-bold);
  box-shadow: 0 10px 22px rgba(20,35,60,.06);
  text-align:center;
}

/* Layout grids */
.grid{ display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 920px){ .grid, .grid.two, .grid.three{ grid-template-columns: 1fr; } }

/* Gallery */
.mosaic{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
}
@media (max-width: 920px){ .mosaic{ grid-template-columns: 1fr; } }
.mosaicLeft, .mosaicRight{
  display:grid; gap:14px;
}
.mosaicRight{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 520px){ .mosaicRight{ grid-template-columns: 1fr; } }
.photoCard{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  position:relative;
  min-height: 180px;
  box-shadow: var(--shadow);
}
.photoCard img{ width:100%; height:100%; object-fit: cover; }
.photoCard .cap{
  position:absolute;
  inset:auto 12px 12px 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--stroke);
  font-weight: var(--fw-bold);
}
.photoCard .cap small{ display:block; font-weight:var(--fw-semibold); color: var(--muted); margin-top: 2px; }

/* Forms */
.field{ display:flex; flex-direction:column; gap:6px; flex:1; }
.label{ font-weight:var(--fw-bold); color: rgba(17,24,39,.86); }
input[type="search"], input[type="text"], select{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.92);
  font: inherit;
  font-weight: var(--fw-semibold);
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible{
  outline: 2px solid rgba(42,91,154,.55);
  outline-offset: 2px;
}

/* Product UI */
.chipsRow{ display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0; }
.chip{
  position: relative;
  border: 1px solid rgba(15,23,42,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,246,255,.86));
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: var(--fw-bold);
  line-height: 1;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.chip::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
}
.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,23,42,.09);
}
.chip.active{
  background: linear-gradient(180deg, rgba(42,91,154,.14), rgba(255,255,255,.88));
  border-color: rgba(42,91,154,.35);
}
.chip.active::after{
  background: linear-gradient(90deg, rgba(16,185,129,.95), rgba(59,130,246,.90));
  opacity: 1;
}

.toolbar{
  display:grid;
  grid-template-columns: 1.3fr .7fr .7fr .6fr auto;
  gap: 6px;
  align-items:center;
  margin: 10px 0;
}
@media (max-width: 920px){
  .toolbar{ grid-template-columns: 1fr 1fr; }
}
.searchBox{ position:relative; }
.liveCount{
  position:absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.86);
  font-weight: var(--fw-bold);
  font-size: 12px;
}
.filtersRow{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin: 8px 0 12px;
}
.check{ display:flex; gap:8px; align-items:center; font-weight: var(--fw-bold); color: rgba(17,24,39,.78); }
.countPill{
  margin-inline-start:auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.78);
  font-weight: var(--fw-bold);
}

.productCard{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
}
.pTop{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.pBrand{ font-weight: var(--fw-bold); color: rgba(17,24,39,.88); }
.pName{ font-weight: var(--fw-semibold); color: rgba(17,24,39,.78); margin-top: 2px; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.78);
  font-weight: var(--fw-bold);
  font-size: 12px;
}
.offerList{ display:flex; flex-direction:column; gap:10px; margin-top: 12px; }
.offer{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.78);
}
.offerMeta{ font-size: 12px; font-weight: var(--fw-semibold); color: var(--muted); }
.offerStore{ font-size: 14px; font-weight: var(--fw-bold); color: rgba(15,23,42,.95); }

/* ------------------------------------------------------------------
   מוצרים page (v3) – compatibility styles
   Fixes: mixed checkboxes (RTL), missing pill styling, cleaner spacing
   ------------------------------------------------------------------ */

/* Main white toolbar container used by products.html */
.toolbar-container{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(20,40,80,.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 28px rgba(20,35,60,.06);
}

/* מוצרים search */
.search-wrapper{ position: relative; max-width: 640px; margin: 0 auto 16px; }
.search-wrapper input{
  width:100%;
  padding: 14px 46px 14px 16px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.96);
  font: inherit;
  font-weight: var(--fw-semibold);
}
.search-wrapper input:focus{ outline:none; border-color: rgba(42,91,154,.55); box-shadow: 0 0 0 4px rgba(42,91,154,.12); }
.search-btn{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border:none;
  background: transparent;
  font-size: 18px;
  cursor: default;
}

/* Dropdowns row */
.select-group{ display:flex; gap:10px; flex-wrap: wrap; }
.select.minimal{
  border: 1px solid rgba(15,23,42,.12);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  font: inherit;
  font-weight: var(--fw-semibold);
}

/* Toggle pills row (this is the issue in the screenshot) */
.toggles-row{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items:center;
  justify-content:flex-start;
  direction: rtl;
}

.check-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(44,62,80,.18);
  background: rgba(255,255,255,.92);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  line-height: 1;
  unicode-bidi: isolate;
}

.check-pill:hover{ border-color: rgba(42,91,154,.35); }
.check-pill input{ margin:0; accent-color: var(--brand); }
.check-pill.highlight{
  background: rgba(42,91,154,.10);
  border-color: rgba(42,91,154,.25);
}

.price-range-row{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.price-range-row .filter-label{
  font-weight:var(--fw-semibold);
  font-size:14px;
}

.price-range-inputs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.price-label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
}

.price-label input{
  max-width:120px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.8);
  font-size:13px;
  background-color:#fff;
}

.price-range-hint{
  font-size:12px;
  color:var(--muted,#64748b);
}

.price-sep{
  font-size: 14px;
  opacity: 0.7;
}

.free-ship-row{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.freeShipLabel{
  font-weight: var(--fw-semibold);
  font-size: 14px;
}

.freeShipInput{
  max-width: 140px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(255,255,255,.96);
  font: inherit;
  font-weight: var(--fw-semibold);
  text-align: center;
}

/* RTL: keep the checkbox visually on the left for readability */
html[dir="rtl"] .check-pill{ flex-direction: row; }

/* Status bar (count + clear button) */
.status-bar{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.count-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,40,80,.12);
  background: rgba(245,248,255,.92);
  font-weight: var(--fw-bold);
  font-size: 13px;
}

.btn-link{
  border:none;
  background: transparent;
  color: rgba(42,91,154,.95);
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
}
.btn-link:hover{ background: rgba(42,91,154,.08); }

/* Slightly nicer separation between filters and cards */
.product-grid{ margin-top: 14px; }

@media (max-width: 768px){
  .status-bar{ justify-content:center; }
  .select-group{ justify-content:center; }
  .toggles-row{ justify-content:center; }
}

/* Footer */
.siteFooter{ padding: 18px 0 26px; margin-top: 14px; }
.siteFooter .muted{ font-weight: var(--fw-semibold); }

/* Decorative corners */
.corner{
  position: fixed;
  width: 220px;
  opacity: .12;
  pointer-events:none;
  filter: blur(.2px);
  z-index: 0;
}
.corner.r{ top:-30px; right:-40px; }
.corner.l{ bottom:-40px; left:-50px; transform: rotate(8deg); }
@media (max-width: 920px){ .corner{ display:none; } }

/* Sales calendar layout */
.agendaGrid{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 920px){ .agendaGrid{ grid-template-columns: 1fr; } }
.monthCard{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(20,40,80,.10);
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(20,35,60,.06);
  overflow:hidden;
}
.monthTop{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(170,200,235,.22), rgba(255,255,255,.0));
  border-bottom: 1px solid rgba(20,40,80,.08);
}
.monthTitle{ font-size: 18px; font-weight: var(--fw-bold); }
.monthMeta{ font-size: 13px; font-weight: var(--fw-semibold); color: rgba(30,45,70,.72); }
.eventList{ padding: 12px 12px 14px; display:flex; flex-direction:column; gap:10px; }
.eventItem{
  display:flex; gap:12px; align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(20,40,80,.10);
  background: rgba(255,255,255,.90);
}
.eventLeft{ min-width: 92px; display:flex; flex-direction:column; gap:6px; text-align:right; }
.datePill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: var(--fw-bold);
  font-size: 13px;
  border: 1px solid rgba(20,40,80,.12);
  background: rgba(245,248,255,.9);
  white-space: nowrap;
}
.tagPill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: var(--fw-bold);
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid rgba(20,40,80,.10);
}
.tag-major{ background: rgba(70,130,255,.14); }
.tag-mid  { background: rgba(40,170,140,.14); }
.tag-note { background: rgba(255,170,60,.16); }
.eventBody{ flex:1; min-width:0; }
.eventName{ font-weight: var(--fw-bold); font-size: 15px; margin-bottom: 3px; }
.eventDesc{ color: rgba(30,45,70,.78); font-weight: var(--fw-semibold); font-size: 13px; line-height: 1.45; }
.noEvents{ padding: 14px; color: rgba(30,45,70,.65); font-weight: var(--fw-semibold); font-size: 13px; }

/* --- v3 polish & fixes --- */
img{max-width:100%;height:auto}

/* Decorative corner: smaller + softer */
.corner{
  width: 180px !important;
  opacity: .06 !important;
  filter: blur(.1px);
}

/* Hero media: prevent giant images */
.heroMedia{
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.heroMedia img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: none;
}

/* Footer quote line */
.footerQuotes{
  margin-top: 10px;
  font-weight: var(--fw-semibold);
  font-size: 12px;
  color: rgba(30,45,70,.60);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.footerQuotes::before{
  content:"✦";
  opacity:.65;
  margin-inline-end: 6px;
}

/* Small buttons */
.btn.small{
  padding: 8px 12px;
  font-size: 12px;
}

/* Botanical additions */
.steps{ margin:0; padding-inline-start: 20px; }
.steps li{ margin: 10px 0; font-weight: var(--fw-medium); color: rgba(17,24,39,.78); }

/* --- Quote color pills (Botanical Calm + Blue) --- */
.quotePill{
  border-radius: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(17,24,39,.10);
  font-weight: var(--fw-bold);
  font-size: 13px;
}
.quotePill.q1{ background: rgba(157,195,230,.18); }     /* sage */
.quotePill.q2{ background: rgba(249,115,22,.10); }     /* warm peach */
.quotePill.q3{ background: rgba(42,91,154,.12); }     /* ocean blue */
.quotePill.q4{ background: rgba(168,85,247,.10); }     /* lavender */
.quotePill.q5{ background: rgba(65,155,210,.14); }     /* mint */

@media (max-width: 860px){
  .heroMedia{ max-height: 280px; }
}

/* --- Shopping Calendar: shop chips --- */
.eventBuy{ display:flex; gap:8px; flex-wrap: wrap; margin-top:10px; }
.buyChip{ display:inline-flex; align-items:center; padding:6px 10px; border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12); background: rgba(255,255,255,.7); font-weight: var(--fw-semibold); font-size: 12px; }

/* --- Layout variation: flip hero order on some pages --- */
.heroInner.flip .heroCopy { order: 2; }
.heroInner.flip .heroMedia { order: 1; }

/* --- Safer hero media sizing (prevents huge images) --- */
.heroMedia img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  max-height: 380px;
}

/* --- v6: Mixed layouts (more decorative) --- */

/* Decorative background wash + soft pattern */
body::before{
  content:"";
  position: fixed;
  inset: -20vh -20vw;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(42,91,154,.10), transparent 60%),
    radial-gradient(820px 420px at 82% 18%, rgba(157,195,230,.10), transparent 62%),
    radial-gradient(780px 420px at 60% 88%, rgba(249,115,22,.06), transparent 65%),
    radial-gradient(720px 360px at 12% 86%, rgba(168,85,247,.05), transparent 62%);
  filter: saturate(1.02);
}
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(rgba(17,24,39,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(closest-side, rgba(0,0,0,.70), rgba(0,0,0,0));
}

/* Image strip (Layout 2) */
.imgStrip{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 920px){ .imgStrip{ grid-template-columns: 1fr; } }

.stripCard{
  margin:0;
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(20,40,80,.10);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
}
.stripCard img{
  width:100%;
  height: 150px;
  object-fit: cover;
  display:block;
}
.stripCard figcaption{
  padding: 10px 12px 12px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:10px;
  font-weight: var(--fw-bold);
  color: rgba(17,24,39,.78);
}
.stripTag{
  font-size: 12px;
  font-weight: var(--fw-bold);
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.70);
  padding: 5px 9px;
  border-radius: 999px;
}

/* Inline media inside cards (Layout 3) */
.cardMedia{
  display:flex;
  gap: 12px;
  align-items:center;
}
.cardMedia .mediaImg{
  width: 78px;
  height: 78px;
  border-radius: 18px;
  border: 1px solid rgba(20,40,80,.12);
  background: rgba(255,255,255,.75);
  object-fit: cover;
  flex: 0 0 auto;
}
.cardMedia .mediaIcon{
  width: 78px;
  height: 78px;
  border-radius: 18px;
  border: 1px solid rgba(20,40,80,.12);
  background: rgba(255,255,255,.75);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  color: rgba(42,91,154,.95);
}
.cardMedia .mediaIcon svg{ width: 40px; height: 40px; }

/* Decorative section divider */
.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,40,80,.16), transparent);
  margin: 18px 0;
}

/* Softer hero quote tag */
.quoteTag{
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: var(--fw-bold);
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
}

/* --- Community gallery --- */
.communityGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 920px){
  .communityGrid{ grid-template-columns: 1fr; }
}
.communityCard{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(20,40,80,.10);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  position: relative;
}
.communityCard img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}
.communityCard .cap{
  position:absolute;
  inset: auto 12px 12px 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(17,24,39,.10);
  backdrop-filter: blur(6px);
  font-weight: var(--fw-bold);
  color: rgba(17,24,39,.82);
}
.communityCard .cap small{
  display:block;
  margin-top: 2px;
  font-weight: var(--fw-semibold);
  color: rgba(17,24,39,.60);
}

/* Skip link */
.skipLink{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(20,40,80,.14);
  background: rgba(255,255,255,.95);
  box-shadow: 0 12px 24px rgba(20,35,60,.10);
  font-weight: var(--fw-bold);
  transform: translateY(-140%);
}
.skipLink:focus{
  transform: translateY(0);
}

/* --- Unified products-style theme overrides (v2) --- */
:root{
  --primary:#2c3e50;
  --accent:#2a5b9a;
  --accent-hover:#234e86;
  --bg-light:#f5f8ff;
  --card-shadow:0 8px 20px rgba(0,0,0,.06);
  --card-hover:0 12px 28px rgba(0,0,0,.12);
  --radius:12px;
}
body{font-family: var(--he-font);}
.logoTag{font-size:12px;color:rgba(255,255,255,.9);margin-inline-start:10px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);}
.siteHeader{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);}
.siteHeader .logoTag{color:#1f2a37;background:rgba(42,91,154,.12);}
.nav a.active{background:rgba(42,91,154,.14);border-color:rgba(42,91,154,.2);}

.hero.product-hero{
  background: linear-gradient(135deg, var(--accent), #1b3861);
  color:#fff;
  border-radius: 18px;
  max-width: 980px;
  width: min(980px, calc(100% - 28px));
  margin: 12px auto 14px;
  padding: 12px 14px;
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

 /* ✅ Hero: put the image NEXT to the text (not behind it) */
.hero.product-hero{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: nowrap;
  direction: rtl;
}

.hero.product-hero > .decorPhoto{
  position: static;
  flex: 0 0 auto;
  width: min(320px, 30vw);
  max-width: 340px;
  height: auto;
  opacity: 1;
  margin: 0;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.hero.product-hero .wrap.heroInner{
  width: auto;
  margin-inline: 0;
  flex: 1 1 560px;
  max-width: 760px;
}
.hero.product-hero .heroCopy{ position: relative; z-index: 2; }

/* Mobile: keep side-by-side but smaller */
@media (max-width: 640px){
  .hero.product-hero{
    gap: 6px;
    padding: 10px 12px;
    margin: 10px auto 12px;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.09);
  }
  .hero.product-hero > .decorPhoto{
    width: 110px;
    max-width: 34vw;
    max-height: 84px;
    padding: 0;
    border-radius: 14px;
  }
  .hero.product-hero .wrap.heroInner{
    flex: 1 1 auto;
    max-width: none;
  }
  .hero.product-hero .heroCopy.center-text{
    direction: rtl;
    text-align: right;
  }
  .hero.product-hero .badgeRow{justify-content:flex-start;}
}

.heroSmall{padding:18px 0 20px;}

/* ✅ FIX: was global .heroInner{display:flex...} and broke other pages */
.hero.product-hero .heroInner{position:relative; z-index:2;}

/* Contrast fixes (v17) — ensure hero/header text is always readable */
.hero.product-hero .heroCopy,
.hero.product-hero .heroCopy h1,
.hero.product-hero .heroCopy p{
  color: rgba(255,255,255,.95);
}
.hero.product-hero .muted{
  color: rgba(255,255,255,.86) !important;
}

/* Buttons on dark hero: avoid white-on-white / black-on-blue */
.hero.product-hero .btn{
  background: rgba(255,255,255,.92);
  color: #0f172a;
  border-color: rgba(255,255,255,.24);
}
.hero.product-hero .btn.primary{
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.26);
}
.hero.product-hero .btn.ghost{
  background: rgba(255,255,255,.92);
  color: #0f172a;
}
.hero.product-hero .btn:hover{
  filter: brightness(1.02);
}
.hero.product-hero .btn:focus{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

.center-text{text-align:center;}
.center-text h1{margin:0 0 6px;font-size:1.55rem;line-height:1.06;}
.center-text p{margin:0 auto 12px;max-width:720px;font-size:1.02rem;line-height:1.25;opacity:.92;}
.badgeRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.trust-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);padding:6px 14px;border-radius:999px;font-weight:var(--fw-semibold);font-size:.9rem;}
.trust-badge .icon{filter:saturate(1.1);}

.panel.filter-panel{padding-top:0;}
.toolbar-container,.contentCard{background:#fff;border-radius:16px;padding:22px;box-shadow:var(--card-shadow);}
.contentCard{margin-bottom:26px;}
.lead{font-size:1.05rem;margin:0 0 14px;color:#213043;opacity:.92;}

.cardsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:16px 0;}
.homeGrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.miniCard{display:block;text-decoration:none;background:#fff;border:1px solid rgba(31,41,55,.08);border-radius:16px;padding:16px;box-shadow:0 6px 14px rgba(0,0,0,.04);transition:.18s;}
.miniCard:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.08);}
.miniCardIcon{font-size:26px;margin-bottom:10px}
.miniCardTitle{font-weight:var(--fw-semibold);color:#0f172a;margin-bottom:4px}
.miniCardText{color:#475569;font-size:.95rem}

.infoCard{background:#fff;border:1px solid rgba(31,41,55,.08);border-radius:16px;padding:16px;box-shadow:0 6px 14px rgba(0,0,0,.04);}
.infoCard h2{margin:0 0 8px;font-size:1.15rem}
.infoCard p, .infoCard li{color:#334155}
.infoCard ul{margin:0;padding-inline-start:18px}

.noteBox{margin-top:18px;border-radius:16px;padding:16px;background:linear-gradient(180deg,rgba(42,91,154,.10),rgba(42,91,154,.04));border:1px solid rgba(42,91,154,.15);}
.steps{margin:8px 0 0;padding-inline-start:20px}
.steps li{margin:6px 0;color:#1f2937}

.photoCard{margin:16px 0;display:grid;grid-template-columns: minmax(200px,360px) 1fr;gap:14px;align-items:center;background:rgba(255,255,255,.85);border:1px solid rgba(31,41,55,.08);border-radius:18px;padding:12px;}
.photoCardImg{width:100%;max-height:260px;object-fit:contain;background:rgba(42,91,154,.08);border-radius:14px;padding:8px;}
.photoCardCap{margin:0;color:#334155;font-weight:var(--fw-semibold);}
@media (max-width: 720px){
  .photoCard{grid-template-columns:1fr;}
  .center-text h1{font-size:1.35rem;}
  .heroSmall{padding:18px 0 20px;}
}

.searchBlock{max-width:720px;margin:0 auto 14px;}
.fieldLabel{display:block;font-weight:var(--fw-semibold);margin-bottom:6px;color:#0f172a;}
.searchBlock input{width:100%;padding:14px 16px;border-radius:999px;border:2px solid rgba(15,23,42,.10);font-size:1.05rem;}
.searchBlock input:focus{outline:none;border-color:rgba(42,91,154,.55);box-shadow:0 0 0 4px rgba(42,91,154,.12);}
.hintText{margin-top:8px;color:#475569;font-size:.95rem;}
.suggestions{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;}
.sugBtn{border:none;cursor:pointer;border-radius:999px;padding:8px 12px;background:rgba(42,91,154,.10);color:#0f172a;font-weight:var(--fw-semibold);}
.sugBtn:hover{background:rgba(42,91,154,.18);}
.resultGrid{display:grid;gap:12px;margin-top:14px;}
.resultCard{background:#fff;border:1px solid rgba(31,41,55,.08);border-radius:16px;padding:14px;box-shadow:0 6px 14px rgba(0,0,0,.04);}
.resultCard h3{margin:0 0 6px;}
.small{font-size:.9rem}
.emailRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.btnPrimary{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:12px;padding:10px 14px;background:var(--accent);color:#fff;text-decoration:none;font-weight:var(--fw-semibold);cursor:pointer;}
.btnPrimary:hover{background:var(--accent-hover);}
.btnSmall{padding:8px 12px;border-radius:10px;font-size:.95rem;}

.footerQuotes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.quotePill{background:rgba(42,91,154,.10);border:1px solid rgba(42,91,154,.15);border-radius:999px;padding:8px 14px;font-weight:var(--fw-semibold);color:#0f172a;}

/* ===========================
   Product grid: side-by-side
   =========================== */
.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.productCard{ height: 100%; }
@media (max-width: 680px){
  .product-grid{ grid-template-columns: 1fr; }
}

/* ===========================
   Decorative corner photos (one per page)
   - Put inside .hero / .pageHero
   =========================== */
.hero, .pageHero, .product-hero{ position: relative; overflow: hidden; }
.hero .wrap, .pageHero .wrap, .product-hero .wrap{ position: relative; z-index: 2; }

.decorPhoto{
  position:absolute;
  width: min(320px, 38vw);
  height: auto;
  opacity: .30;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  object-fit: contain;
  background: rgba(255,255,255,.35);
  padding: 6px;
  backdrop-filter: blur(2px);
}

.decorTL{ top: 18px; left: 18px; transform: rotate(-2deg); }
.decorTR{ top: 18px; right: 18px; transform: rotate(2deg); }
.decorBL{ bottom: 18px; left: 18px; transform: rotate(2deg); }
.decorBR{ bottom: 18px; right: 18px; transform: rotate(-2deg); }
.decorCL{ top: 50%; left: 18px; transform: translateY(-50%) rotate(-2deg); }
.decorCR{ top: 50%; right: 18px; transform: translateY(-50%) rotate(2deg); }
.decorBC{ bottom: 18px; left: 50%; transform: translateX(-50%) rotate(-1deg); }

@media (max-width: 768px){
  .decorPhoto{ width: min(200px, 46vw); opacity: .18; }
  .center-text h1, .hero.heroCompact h1{ font-size:1.55rem; }
  .center-text p{ font-size:0.98rem; line-height:1.22; }
}

/* ✅ FIX: Calendar hero decor photo behind hero card (prevents title being hidden) */
.hero.heroCompact .decorPhoto{ z-index: 0; }
.hero.heroCompact .heroShell{ z-index: 2; position: relative; }

/* ------------------------------------------------------------------
   מוצרים page toolbar (new layout) – make filters look clean in RTL
   ------------------------------------------------------------------ */

/* When products.html uses the "filter-panel" layout, keep it consistent */
.filter-panel{ position: relative; z-index: 10; }

.toolbar-container{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(31,41,55,.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  margin-bottom: 22px;
}

/* חיפוש */
.search-wrapper{ position: relative; max-width: 720px; margin: 0 auto 18px; }
.search-wrapper input{
  width: 100%;
  padding: 14px 50px 14px 18px;
  border: 2px solid rgba(15,23,42,.10);
  border-radius: 999px;
  font-size: 1.05rem;
  font-family: inherit;
}
.search-wrapper input:focus{ outline: none; border-color: rgba(42,91,154,.55); box-shadow: 0 0 0 4px rgba(42,91,154,.12); }
.search-btn{ position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.15rem; opacity: .75; cursor: default; }

/* Selects row */
.select-group{ display:flex; gap: 6px; flex-wrap: wrap; }
.select.minimal{
  border: 1px solid rgba(31,41,55,.14);
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  font: inherit;
  font-weight: var(--fw-semibold);
  min-width: 180px;
}

/* Checkboxes (Pills) – fixes the mixed/merged labels in RTL */
.toggles-row{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  align-items:center;
  justify-content: flex-start;
  direction: rtl;
}

.check-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(31,41,55,.16);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  line-height: 1;
  unicode-bidi: isolate;
}
.check-pill:hover{ border-color: rgba(42,91,154,.40); }
.check-pill input{ margin: 0; accent-color: var(--accent); }
.check-pill.highlight{ background: rgba(42,91,154,.10); border-color: rgba(42,91,154,.24); }

/* In RTL the checkbox should visually sit on the left for readability */
html[dir="rtl"] .check-pill{ flex-direction: row; }

/* Count + clear */
.status-bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.count-tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,.12);
  background: rgba(245,248,255,.9);
  font-weight: var(--fw-bold);
}
.btn-link{
  border: none;
  background: none;
  color: rgba(42,91,154,.95);
  font-weight: var(--fw-bold);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
}
.btn-link:hover{ background: rgba(42,91,154,.08); }

/* מוצרים list spacing under filters */
.product-grid{ margin-top: 18px; }

@media (max-width: 768px){
  .toolbar-container{ padding: 16px; }
  .select.minimal{ min-width: 0; width: 100%; }
  .status-bar{ justify-content: center; }
}
/* Shopping calendar quote bubble text color */
.calendarHero .quoteTag{
  color: #000080; /* change to whatever you want */
}
/* Force quote bubble text color (calendar hero only) */
.hero.product-hero.calendarHero .quoteTag{
  color: #000080 !important; /* navy text */
}
.hero.product-hero.calendarHero .quoteTag,
.hero.product-hero.calendarHero .quoteTag *{
  color: #000080 !important;
}

/* =========================================================
   Mobile compatibility pass (2025-12)
   - Hamburger nav
   - Prevent horizontal scroll
   - Better stacking for filters/calendar
   ========================================================= */

body{ overflow-x: hidden; }

/* Touch targets */
.nav a, .btn, button, .chip, .check-pill{
  -webkit-tap-highlight-color: transparent;
}

/* Hamburger button (injected by assets/js/site.js) */
.navToggle{
  display:none;
  border: 1px solid rgba(31,41,55,.12);
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  padding: 8px 10px;
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.04);
}

.navDrawerHeader{ display:none; }
.navDrawerSearch{ display:none; }

@media (max-width: 900px){
  /* Ensure drawer is above overlay (header creates stacking context due to backdrop-filter) */
  .siteHeader{ z-index: 10001; }

  /* Fix: allow fixed-position drawer to use viewport (avoid backdrop-filter containing block) */
  .siteHeader{ backdrop-filter: none; -webkit-backdrop-filter: none; }

  .headerRow{ flex-wrap: wrap; }

  .logo{ min-width: 0; }

  .navToggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Collapse nav into a drawer */
  .siteHeader .nav{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0; /* RTL: open from the right side */
    left: auto;
    width: min(320px, 86vw);
    background: #fff;
    border-left: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: -18px 0 40px rgba(0,0,0,.14);
    /* Remove the extra empty strip above the drawer header (seen on Galaxy S8/S9).
       Safe-area padding is handled by the drawer header itself. */
    padding: 0 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(105%);
    opacity: 1;
    pointer-events: none;
    transition: transform .22s ease;
    z-index: 10002;
  }
  .siteHeader.navOpen .nav{
    transform: translateX(0);
    pointer-events: auto;
  }

  /* Drawer header (logo + close) */
  .navDrawerHeader{
    position: sticky;
    top: 0;
    z-index: 2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 6px;
    /* Sit flush at the very top; include safe-area inset for notched phones */
    padding: calc(10px + env(safe-area-inset-top, 0px)) 6px 12px;
    margin: 0 0 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(15,23,42,.06);
  }
  .navDrawerLogo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    min-width: 0;
  }
  .navDrawerLogoImg{
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(15,23,42,.10);
    flex: 0 0 auto;
  }
  .navDrawerLogoText{
    font-weight: var(--fw-bold);
    letter-spacing: -0.2px;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .navDrawerClose{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .navDrawerClose:active{ transform: scale(.98); }

  /* Drawer links */
  .siteHeader .nav a{
    background: rgba(42,91,154,.06);
    border: 1px solid rgba(42,91,154,.12);
    text-align: right;
    padding: 6px 10px;
    border-radius: 14px;
  }

  .siteHeader .nav a{
    background: rgba(42,91,154,.08);
    border: 1px solid rgba(42,91,154,.12);
    text-align: center;
    padding: 6px 10px;
  }

  .navOverlay{
    position: fixed;
    inset: 0;
    background: rgba(10, 17, 31, .35);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 10000;
  }
  body.menuOpen .navOverlay{
    opacity: 1;
    pointer-events: auto;
  }
  body.menuOpen{ overflow: hidden; }
}

/* מוצרים filters: force clean stacking on phones */
@media (max-width: 820px){
  .filters-actions{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .select-group{ width: 100%; justify-content: center; }
  .select-group .select{ width: 100%; }
  .toggles-row{ justify-content: center; }
  .status-bar{ justify-content: center; }
}

/* Advanced filters (details) */
.more-filters{
  margin-top: 10px;
  margin-bottom: 8px;
}
.more-filters > summary{
  cursor: pointer;
  list-style: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft, #e0e0e0);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.more-filters > summary::marker{
  display: none;
}
.more-filters[open] > summary{
  background: #f5f5f5;
}
.more-filters-inner{
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 10px 4px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid var(--border-soft, #e0e0e0);
}
.price-range-inputs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.price-range-inputs label{
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
}
.price-range-inputs input{
  margin-top: 2px;
  max-width: 110px;
}
.price-range-hint{
  font-size: 0.75rem;
  color: #777;
  margin-top: 4px;
}

/* On very small screens, stack selects nicely */
@media (max-width: 600px){
  .more-filters-inner .select-group{
    flex-direction: column;
    align-items: stretch;
  }
  .more-filters-inner .select-group .select{
    width: 100%;
  }
}
/* Chips row: smooth horizontal scroll */
.chips-scroll-container{ -webkit-overflow-scrolling: touch; }
/* Chips row: tighter + scroll on small screens (less vertical scrolling) */
.chips-scroll-container{
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}
@media (max-width: 900px){
  .chipsRow{
    flex-wrap: nowrap;
    gap: 8px;
    margin: 10px 0;
  }
  .chip{
    white-space: nowrap;
    padding: 7px 10px;
    font-size: 0.92rem;
  }
}

/* Decorative photos: keep visible but out of text on mobile */
@media (max-width: 768px){
  .decorPhoto{
    opacity: .34;
    width: min(240px, 62vw);
    filter: saturate(1.05) contrast(1.06) blur(.25px);
  }
  .decorTL, .decorTR{ top: -56px; }
}

/* =========================================================
   מוצרים page layout (desktop sidebar + mobile stack)
   - Does NOT affect the hero section
   ========================================================= */
.productsLayout{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  align-items: start;
}

.productsFilters{
  position: sticky;
  top: 86px; /* below sticky header */
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-bottom: 16px;
}

.productsResults{
  min-width: 0;
}

@media (max-width: 980px){
  .productsLayout{ grid-template-columns: 1fr; }
  .productsFilters{ position: static; top: auto; max-height: none; overflow: visible; padding-bottom: 0; }
}

/* Product cards – responsive split layout */
.productCard{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  padding: 14px;
}

.pMedia{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(20,40,80,.10);
  background: rgba(245,248,255,.75);
  min-height: 140px;
  display: grid;
  place-items: center;
}
.pMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pPlaceholder{
  font-size: 36px;
  opacity: .75;
}

.pContent{ min-width: 0; display: grid; gap: 6px; }
.pHeader{
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: flex-start;
}
.pTitleWrap{ min-width: 0; }
.pBrand{ font-weight: var(--fw-bold); }
.pName{ font-weight: var(--fw-bold); }
.pMeta{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.pMetaPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,40,80,.12);
  background: rgba(255,255,255,.80);
  font-weight: var(--fw-bold);
  font-size: 12px;
  white-space: nowrap;
}

.emptyState{
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed rgba(20,40,80,.18);
  background: rgba(255,255,255,.75);
  font-weight: var(--fw-bold);
  color: rgba(17,24,39,.70);
}

@media (max-width: 520px){
  .productCard{ grid-template-columns: 1fr; }
  .pMedia{ min-height: 170px; }
}

/* =========================================================
   מוצרים page quick polish (2025-12-31)
   - Smaller text on cards
   - Tiny image/placeholder until you have real images
   - חיפוש bar aligned to the right (RTL)
   - Logical positioning for RTL/LTR safety
   ========================================================= */

.productsFilters .search-wrapper{
  max-width: none;
  margin: 0 0 16px;
  display: flex;
  justify-content: flex-end; /* right side in RTL */
}
.productsFilters .search-wrapper input{
  max-width: 520px;
  font-size: 0.98rem;
}
.productsFilters .search-btn{
  right: auto;
  top: auto;
  inset-inline-end: 14px;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

/* Product cards: compact + smaller type */
.productsResults .productCard{
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 12px;
}
.productsResults .pMedia{
  min-height: 84px;
}
.productsResults .pPlaceholder{
  font-size: 22px;
}
.productsResults .pBrand{
  font-size: 13px;
}
.productsResults .pName{
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* avoids huge cards with long descriptions */
  overflow: hidden;
}
.productsResults .tag{ font-size: 11px; }
.productsResults .offerMeta{ font-size: 11px; }

@media (max-width: 520px){
  .productsResults .productCard{ grid-template-columns: 1fr; }
  .productsResults .pMedia{ min-height: 72px; }
}

/* =========================================================
   Learn + Israeli brands – enhancements (scoped & safe)
   ========================================================= */

/* Comparison table (learn.html) */
.compareTableWrap{overflow:auto;margin-top:14px;border-radius:16px;border:1px solid rgba(20,40,80,.12);background:rgba(255,255,255,.85);}
.compareTable{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;}
.compareTable th,.compareTable td{padding:12px 14px;text-align:right;vertical-align:top;}
.compareTable thead th{position:sticky;top:0;background:linear-gradient(180deg,rgba(42,91,154,.14),rgba(42,91,154,.06));font-weight:var(--fw-bold);color:#0f172a;border-bottom:1px solid rgba(20,40,80,.10);}
.compareTable tbody tr:not(:last-child) td{border-bottom:1px solid rgba(20,40,80,.08);}
.compareTable tbody td:first-child{font-weight:var(--fw-bold);color:#0f172a;white-space:nowrap;}
.compareTable td{color:#334155;}
.comparePill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 12px;border:1px solid rgba(20,40,80,.14);background:rgba(255,255,255,.85);font-weight:var(--fw-bold);}

/* Israeli brands directory (israeli-brands.html) */
.brandSearch{max-width:720px;margin:14px auto 0;}
.brandSearch input{width:100%;padding:14px 16px;border-radius:999px;border:2px solid rgba(15,23,42,.10);font:inherit;font-weight:var(--fw-semibold);background:rgba(255,255,255,.96);}
.brandSearch input:focus{outline:none;border-color:rgba(42,91,154,.55);box-shadow:0 0 0 4px rgba(42,91,154,.12);}
.brandGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:14px;}
.brandCard{background:#fff;border:1px solid rgba(31,41,55,.08);border-radius:18px;padding:16px;box-shadow:0 6px 14px rgba(0,0,0,.04);transition:.18s;}
.brandCard:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.10);}
.brandTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.brandName{font-weight: var(--fw-bold);font-size:1.05rem;color:#0f172a;}
.brandCat{font-weight:var(--fw-bold);color:rgba(42,91,154,.92);}
.brandDesc{margin:10px 0 0;color:#334155;line-height:1.55;}
.brandBadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.brandBadge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(20,40,80,.12);background:rgba(245,248,255,.75);font-weight:var(--fw-bold);font-size:12px;color:#0f172a;}
.brandLinks{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;}
.brandLinks a{font-weight:var(--fw-bold);}

/* מוצרים page – premium font + subtle wow, without touching header/hero */
.page-products main{font-family:"Assistant",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:400;}
.page-products main p,.page-products main li,.page-products main .muted{font-weight:300;}
.page-products main h1,.page-products main h2,.page-products main h3{font-weight:500;}
.page-products .productsResults .productCard{transition:transform .18s, box-shadow .18s, border-color .18s;}
.page-products .productsResults .productCard:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.10);border-color:rgba(42,91,154,.28);}
.page-products .productsResults .pMedia{background:linear-gradient(180deg,rgba(42,91,154,.10),rgba(255,255,255,.65));}

/* === New product-card layout (like single tall card design) === */
.page-products .productCard {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: stretch;
  text-align: center;
  padding: 10px 10px 12px; /* slightly smaller card */
  border-radius: 18px;
  border: 1px solid rgba(20, 40, 80, 0.08);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
}

.page-products .productCard .pMedia{
  display: grid !important;          /* override previous hide */
  place-items: center;
  width: 100%;
  height: 110px;                     /* compact but visible */
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.06);
  margin-bottom: 8px;
}
.page-products .productCard .pMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* no weird stretching */
  display: block;
}
.page-products .productCard .pPlaceholder{
  font-size: 28px;
  line-height: 1;
}
.page-products .productCard .pContent {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px; /* tighter vertical spacing inside card */
  flex: 1;
}

.page-products .productCard .pHeader {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.page-products .productCard .pTitleWrap {
  text-align: center;
}

.page-products .productCard .pBrand {
  font-size: 14px;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.55);
}

.page-products .productCard .pName {
  font-size: 18px;
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: rgba(15, 23, 42, 0.95);
}

/* top pills row (size, category etc.) */
.page-products .productCard .pMeta {
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.page-products .productCard .pMetaPill {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(20, 40, 80, 0.10);
  background: #ffffff;
  font-weight: var(--fw-semibold);
  font-size: 11px;
}

.page-products .productCard .pMetaPill--freeShip {
  border-color: rgba(34, 197, 94, 0.35); /* greenish to indicate benefit */
  background: #ecfdf3;
}

.page-products .productCard .pPriceRange {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.8);
  text-align: center;
}

/* badges row (Leaping Bunny, Vegan, etc.) */
.page-products .productCard .tags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: nowrap;       /* try to keep all tags on one line */
  overflow-x: auto;        /* allow horizontal scroll if really narrow */
}

/* offer block */
.page-products .productCard .offerList {
  margin-top: auto;
}

.page-products .productCard .offer {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px 12px;
  border-radius: 18px;
  border: none;
  background: #f5f7fb;
  text-align: center;
}

.page-products .productCard .offerMeta {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(15, 23, 42, 0.65);
}

/* “צפייה באמזון” button style */
.page-products .productCard .offer .btn.primary {
  width: 100%;
  margin-top: 8px;
  border-radius: 999px;
  padding: 10px 0;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  border-color: rgba(37, 99, 235, 0.25);
  background: #e5edff;
}

/* Product grid columns: 3 on desktop, 2 on smaller screens, 4 on very wide */
.page-products .product-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* equal height rows */
}

/* Ensure each card fills its grid cell */
.page-products .product-grid > .productCard{
  height: 100%;
}

@media (max-width: 1024px){
  .page-products .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* tablets & small laptops */
  }
}

@media (max-width: 600px){
  .page-products .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* phones: 2 per row */
  }
}

@media (min-width: 1440px){
  .page-products .product-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* very wide screens */
  }
}

/* כרטיס הטקסט מעל הפילטרים בדף מוצרים – קטן יותר */
.page-products .panel.filter-panel .contentCard{
  padding: 10px 18px;    /* פחות רווח פנימי – ברירת מחדל הייתה 22px */
  margin-bottom: 18px;   /* פחות מרווח מתחת לכרטיס */
  max-width: 1000px;     /* אפשר להקטין/להגדיל לפי הטעם */
  margin-left: auto;
  margin-right: auto;    /* לוודא שהוא נשאר ממורכז */
}

/* כותרת קצת יותר קטנה */
.page-products .panel.filter-panel .contentCard h2{
  font-size: 0.8rem;     /* היה גדול יותר – אפשר גם 1.3rem אם תרצי עוד קטן */
  margin-bottom: 4px;
}

/* טקסט הפסקה קצת יותר קטן וצפוף */
.page-products .panel.filter-panel .contentCard p{
  font-size: 0.95rem;
  margin: 0;
}

/* מוצרים page: collapsible Amazon info heading */
.amazon-short-intro .amazon-toggle {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #c2185b;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  text-decoration: underline;
}
.amazon-short-intro .amazon-toggle .icon {
  font-size: 0.85em;
}

/* Recommended brands – filters & card polish */
.brandsControls{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-end;
  margin:1.5rem 0 1.25rem;
}

.brandsSearchControl{
  flex:1 1 220px;
}

.brandSearchInput{
  width:100%;
  padding:.6rem .85rem;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background:var(--paper2);
  font-size:.95rem;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.brandSearchInput:focus{
  border-color:var(--brand);
  background:#fff;
  box-shadow:0 0 0 1px rgba(42,91,154,.15);
}

.brandsCategoryControl{
  flex:0 0 220px;
}

.brandsCategoryControl label{
  display:block;
  font-size:.75rem;
  margin-bottom:.25rem;
  color:var(--muted2);
}

.brandCategoryFilter{
  width:100%;
  padding:.55rem .85rem;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background:var(--paper2);
  font-size:.9rem;
  outline:none;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}

.brandCategoryFilter:focus{
  border-color:var(--brand);
  background:#fff;
}

.brandEmptyMsg{
  margin-top:1.5rem;
  text-align:center;
  color:var(--muted2);
  font-size:.9rem;
}

.brandCard{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.brandCard:hover,
.brandCard:focus-within{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(15,23,42,.08);
  border-color:var(--stroke2);
}

@media (max-width:640px){
  .brandsControls{
    align-items:stretch;
  }
  .brandsCategoryControl{
    flex-basis:100%;
  }
}

/* Recommended brands – refreshed card layout */
.brandCard{
  background:#ffffff;
  border-radius:1.2rem;
  border:1px solid rgba(15,23,42,0.06);
  padding:1.4rem 1.6rem 1.3rem;
  box-shadow:0 10px 24px rgba(15,23,42,0.05);
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease,background-color 0.18s ease;
}
.brandCard:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(15,23,42,0.12);
  border-color:rgba(79,70,229,0.35);
  background:linear-gradient(135deg,#ffffff,#f9fafb);
}
.brandTop{
  display:flex;
  justify-content:space-between;
  gap:0.5rem;
  align-items:flex-start;
}
.brandName{
  font-weight:var(--fw-semibold);
  font-size:1.05rem;
  letter-spacing:.02em;
  color:#0f172a;
}
.brandCat{
  font-weight:600;
  color:#1f2933;
  font-size:.8rem;
}
.brandDesc{
  margin-top:0.4rem;
  color:#334155;
  line-height:1.55;
  font-size:.8rem;
}
.brandBadges{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  margin-top:0.4rem;
}
.brandBadge{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.2rem 0.6rem;
  border-radius:999px;
  border:none;
  background:rgba(248,250,252,0.9);
  font-weight:600;
  font-size:.72rem;
  color:#0f172a;
}
.brandBadge--Vegan{
  background:rgba(34,197,94,0.10);
  color:#166534;
}
.brandBadge--Cruelty-Free{
  background:rgba(59,130,246,0.12);
  color:#1d4ed8;
}
.brandLinks{
  margin-top:0.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}
.brandLinks a{
  font-weight:var(--fw-semibold);
  font-size:.8rem;
}

/* Recommended brands sections (accordion by category) */
.cardsGrid--brands {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.brandSection {
  border-radius: 1rem;
  background: #f9fafb;
  padding: 0.6rem 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.brandSection__header {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.25rem;
  cursor: pointer;
  text-align: right;
}

.brandSection__title {
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  color: #0f172a;
}

.brandSection__count {
  font-size: 0.8rem;
  color: #6b7280;
}

.brandSection__chevron {
  transition: transform 0.15s ease;
  font-size: 0.85rem;
}

.brandSection__header[aria-expanded="false"] .brandSection__chevron {
  transform: rotate(180deg);
}

.brandSection__body {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.brandSection--empty {
  opacity: 0.4;
}

@media (min-width: 768px) {
  .brandSection {
    padding: 0.75rem 0.9rem;
  }
}

/* === Intl Brands page: keep grid layout during filtering + nicer colorful cards === */
.page-recommended-brands #brandGrid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-content: start !important;
}
@media (max-width: 900px){
  .page-recommended-brands #brandGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Make sure cards don't stretch full width in non-grid fallbacks */
.page-recommended-brands .brandCard{
  width: auto !important;
  max-width: 100% !important;
}

/* Colorful, "alive" card look (only on this page) */
.page-recommended-brands .brandCard{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(16,185,129,.10), rgba(255,255,255,0) 40%),
    #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.page-recommended-brands .brandCard::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, rgba(16,185,129,.95), rgba(59,130,246,.85), rgba(236,72,153,.85));
}
.page-recommended-brands .brandCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

/* Big brand name on top, other info below */
.page-recommended-brands .brandName{
  font-size: 1.55rem;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  margin: 0;
}
.page-recommended-brands .brandTop{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Meta lines */
.page-recommended-brands .brandMeta,
.page-recommended-brands .metaLine{
  color: rgba(0,0,0,.72);
  font-size: 0.92rem;
  line-height: 1.25;
}

/* Pills */
.page-recommended-brands .brandTag,
.page-recommended-brands .tag{
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.18);
  color: rgba(0,0,0,.78);
  border-radius: 999px;
  padding: 4px 8px;
}

/* Link buttons */
.page-recommended-brands .brandLinks a,
.page-recommended-brands .links a{
  border-radius: 12px;
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.page-recommended-brands .brandLinks a.btnPrimary,
.page-recommended-brands .links a.btnPrimary{
  background: rgba(16,185,129,.14);
  border: 1px solid rgba(16,185,129,.24);
}
.page-recommended-brands .brandLinks a.btn,
.page-recommended-brands .links a.btn{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.12);
}

/* === Intl Brands page v15: keep 4-in-row after filtering + equal card sizes + richer colors === */
.page-recommended-brands #brandGrid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;   /* critical: prevents "single column" behavior when few items are visible */
  align-items: stretch !important;
  justify-content: start !important;
  gap: 14px !important;
}
@media (max-width: 900px){
  .page-recommended-brands #brandGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
  }
}

/* Equal card sizes (fixed height) */
.page-recommended-brands .brandCard{
  height: 250px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px){
  .page-recommended-brands .brandCard{
    height: 270px;
  }
}

/* Prevent long text from changing card height */
.page-recommended-brands .brandCat,
.page-recommended-brands .brandMeta{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-recommended-brands .brandCat{
  -webkit-line-clamp: 2;
}
.page-recommended-brands .brandBadges{
  -webkit-line-clamp: 2;
}

/* Make the cards more "alive" with tasteful color accents (only this page) */
.page-recommended-brands .brandCard{
  --rb-accent: linear-gradient(90deg, rgba(16,185,129,.95), rgba(59,130,246,.85), rgba(236,72,153,.85));
  background:
    radial-gradient(120px 120px at 12% 0%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(140px 140px at 85% 10%, rgba(236,72,153,.10), transparent 60%),
    linear-gradient(180deg, rgba(16,185,129,.10), rgba(255,255,255,0) 42%),
    #fff;
}
.page-recommended-brands .brandCard::before{
  background: var(--rb-accent) !important;
}
.page-recommended-brands .brandCard::after{
  content:"";
  position:absolute;
  inset: auto -40px -40px auto;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: rgba(16,185,129,.10);
  filter: blur(0px);
  pointer-events:none;
}
.page-recommended-brands .brandCard:nth-child(4n+1){ --rb-accent: linear-gradient(90deg, rgba(16,185,129,.95), rgba(14,165,233,.85)); }
.page-recommended-brands .brandCard:nth-child(4n+2){ --rb-accent: linear-gradient(90deg, rgba(59,130,246,.92), rgba(236,72,153,.82)); }
.page-recommended-brands .brandCard:nth-child(4n+3){ --rb-accent: linear-gradient(90deg, rgba(245,158,11,.92), rgba(236,72,153,.80)); }
.page-recommended-brands .brandCard:nth-child(4n){   --rb-accent: linear-gradient(90deg, rgba(20,184,166,.92), rgba(59,130,246,.82)); }

/* מותג name bigger */
.page-recommended-brands .brandName{
  font-size: 1.65rem !important;
}

/* Keep buttons at the bottom consistently */
.page-recommended-brands .brandLinks{
  margin-top: auto !important;
}

/* Keep hero content above decorative photo */
.hero.heroCompact .heroShell{ position:relative; z-index:2; }
.hero.heroCompact .heroInner{ position:relative; z-index:2; }

/* Hero image: place next to text (left side), not behind */
.hero.product-hero.heroSmall{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 28px;
}
.hero.product-hero.heroSmall .heroInner{
  flex: 1 1 auto;
  order: 1; /* keep text on the right in RTL */
}
.hero.product-hero.heroSmall .decorPhoto{
  position: relative;
  inset: auto;
  top: auto; right: auto; bottom: auto; left: auto;
  transform: none;
  opacity: .95;
  z-index: 1;
  flex: 0 0 auto;
  width: min(340px, 34vw);
  max-width: 380px;
  height: auto;
  order: 2; /* image on the left in RTL */
}

/* Mobile: keep image visible, just smaller */
@media (max-width: 640px){
  .hero.product-hero.heroSmall{
    gap: 14px;
  }
  .hero.product-hero.heroSmall .decorPhoto{
    width: min(150px, 40vw);
    opacity: .92;
  }
}

/* Ensure hero image never overlaps copy */
.hero.product-hero > .decorPhoto{ box-shadow: 0 12px 28px rgba(0,0,0,.12); background: rgba(255,255,255,.22); backdrop-filter: blur(2px); }

/* =========================
   ✅ FIX: Product hero image beside text (RTL-safe)
   ========================= */
.hero.product-hero .heroInner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 26px;
  direction:ltr; /* keep image on physical left even when page is rtl */
}

.hero.product-hero .decorPhoto{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
  z-index:1 !important;
  flex: 0 0 auto;
  width: min(520px, 44vw);
  height:auto;
  max-width:100%;
  object-fit:cover;
}

.hero.product-hero .heroCopy{
  flex: 1 1 520px;
  direction:rtl; /* text stays rtl */
  text-align:right;
  z-index:2;
}

/* Mobile: keep image visible and next to text, just smaller */
@media (max-width: 640px){
  .hero.product-hero .heroInner{
    gap: 14px;
    padding-inline: 10px;
  }
  .hero.product-hero .decorPhoto{
    width: 140px;
    border-radius: 14px;
  }
  .hero.product-hero .heroCopy{
    flex: 1 1 auto;
  }
  .hero.product-hero .heroCopy.center-text{
    padding: 0;
  }
}

/* =========================================================
   HERO LAYOUT OVERRIDE (v33) — make ALL pages match index hero
   Image is a real flex item (left of text), never behind text
   Works with RTL: container is LTR for layout, text stays RTL
   ========================================================= */
.hero.product-hero{
  /* fix broken/old background tokens + unify look */
  background: linear-gradient(135deg, var(--brand) 0%, #163a63 100%) !important;
  color: #fff !important;
  border-radius: 0 0 28px 28px !important;
  margin-bottom: -26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  flex-wrap: nowrap !important;
  direction: ltr !important; /* puts first child (image) on the LEFT */
}

.hero.product-hero > .decorPhoto{
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: 1 !important;

  flex: 0 0 auto !important;
  width: min(420px, 36vw) !important;
  max-width: 440px !important;
  height: 240px !important;
  object-fit: cover !important;

  margin: 0 !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow) !important;
}

.hero.product-hero .heroInner{
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 620px !important;
  max-width: 820px !important;
}

.hero.product-hero .heroCopy{
  direction: rtl !important;
  text-align: right !important;
}

.hero.product-hero .badgeRow{
  justify-content: flex-start !important;
}

/* Mobile: keep image visible and NOT behind; stack neatly */
@media (max-width: 768px){
  .hero.product-hero{
    flex-direction: column !important;
    direction: rtl !important;
    gap: 14px !important;
    padding: 14px 0 16px !important;
  }
  .hero.product-hero > .decorPhoto{
    width: min(520px, 92vw) !important;
    max-width: 92vw !important;
    height: 200px !important;
  }
  .hero.product-hero .heroCopy{
    text-align: center !important;
  }
  .hero.product-hero .badgeRow{
    justify-content: center !important;
  }
}

/* v34 hero sizing */
@media (max-width: 640px){
  .hero.product-hero{max-width: calc(100% - 16px); margin: 10px auto 14px; padding: 12px 12px; gap: 12px;}
  .hero.product-hero > .decorPhoto{width: 42vw; max-width: 170px; border-radius: 16px;}
  .hero.product-hero .center-text h1{font-size:1.25rem;}
}

@media (max-width: 420px){
  .hero.product-hero > .decorPhoto{ width: 96px; max-height: 72px; }
  .hero.product-hero .center-text h1{ font-size: 1.15rem; }
  .hero.product-hero .center-text p{ font-size: 0.9rem; }
}

/* ===========================================================
   v36: SUPER compact hero on mobile (no full-screen header)
   - forces small height, thumbnail image, text on the right (RTL)
   =========================================================== */

@media (max-width: 768px){
  .hero.product-hero.heroSmall{
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .hero.product-hero.heroSmall .decorPhoto{
    width: min(150px, 32vw) !important;
    max-height: 110px !important;
    height: auto !important;
    object-fit: cover !important;
  }
}

@media (max-width: 640px){
  .hero.product-hero.heroSmall{
    width: calc(100% - 18px) !important;
    margin: 8px auto 10px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }

  /* thumbnail image (other side of the text) */
  .hero.product-hero.heroSmall .decorPhoto{
    width: 92px !important;
    max-width: 34vw !important;
    max-height: 68px !important;
    border-radius: 12px !important;
    padding: 0 !important;
  }

  /* keep text on the right in RTL */
  .hero.product-hero.heroSmall .heroInner{ order: 2 !important; }
  .hero.product-hero.heroSmall .decorPhoto{ order: 1 !important; }

  .hero.product-hero.heroSmall .heroCopy.center-text{
    padding: 0 !important;
    text-align: right !important;
  }

  .hero.product-hero.heroSmall .center-text h1{
    font-size: 1.05rem !important;
    line-height: 1.1 !important;
    margin: 0 0 2px !important;
  }
  .hero.product-hero.heroSmall .center-text p{
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    opacity: .92;
  }

  /* badges: keep one row, scroll if needed (prevents tall header) */
  .hero.product-hero.heroSmall .badgeRow{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding: 6px 0 0 !important;
  }
  .hero.product-hero.heroSmall .pill,
  .hero.product-hero.heroSmall .badge{
    padding: 6px 10px !important;
    font-size: 0.84rem !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}

/* v37: HERO FIX — compact height on mobile + deterministic text/image sides (RTL) */
.hero.product-hero{
  /* ensure this section sizes to its content (no accidental full-height) */
  height: auto;
  min-height: unset;
  overflow: hidden;
}
.hero.product-hero .heroInner{ position: relative; z-index: 2; }

/* Deterministic layout order in RTL:
   - text (heroInner) on the RIGHT
   - image (decorPhoto) on the LEFT
*/
.hero.product-hero .wrap.heroInner{ order: 1; }
.hero.product-hero > .decorPhoto{ order: 2; }

@media (max-width: 640px){
  .hero.product-hero,
  .hero.product-hero.heroSmall,
  .hero.product-hero.heroSmall1{
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }

  /* Make the inner wrapper a compact row: text right, image left */
  .hero.product-hero .wrap.heroInner{
    display: flex !important;
    flex-direction: column !important; /* keep text block intact */
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  /* Container is flex: place blocks side-by-side */
  .hero.product-hero{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .hero.product-hero > .decorPhoto{
    width: 96px !important;
    height: 70px !important;
    flex: 0 0 auto !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
  }

  .hero.product-hero .heroCopy{
    width: auto !important;
    flex: 1 1 auto !important;
    text-align: right !important;
    padding: 0 !important;
  }

  .hero.product-hero .center-text h1,
  .hero.product-hero .heroCopy h1{
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    word-break: break-word;
  }

  .hero.product-hero .center-text p,
  .hero.product-hero .heroCopy p{
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .hero.product-hero .pillRow{
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
  }
}

/* A bit larger phones/tablets: keep hero compact as well */
@media (min-width: 641px) and (max-width: 900px){
  .hero.product-hero{
    padding: 14px 16px !important;
    min-height: unset !important;
  }
  .hero.product-hero > .decorPhoto{
    width: min(280px, 40vw) !important;
    height: auto !important;
  }
}

/* === v38: Recommended Brands hero - make mobile header compact so content is visible === */
@media (max-width: 640px){
  .page-recommended-brands .hero.product-hero.heroSmall{
    padding: 8px 10px !important;
    margin: 8px auto 10px !important;
    gap: 8px !important;
    min-height: auto !important;
  }
  .page-recommended-brands .hero.product-hero.heroSmall > .decorPhoto{
    width: 72px !important;
    max-width: 30vw !important;
    max-height: 56px !important;
    border-radius: 12px !important;
  }
  .page-recommended-brands .hero.product-hero.heroSmall .center-text h1{
    font-size: 1.05rem !important;
    line-height: 1.05 !important;
    margin: 0 0 2px !important;
  }
  .page-recommended-brands .hero.product-hero.heroSmall .center-text p{
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (max-width: 420px){
  .page-recommended-brands .hero.product-hero.heroSmall > .decorPhoto{
    width: 64px !important;
    max-height: 50px !important;
  }
  .page-recommended-brands .hero.product-hero.heroSmall .center-text h1{
    font-size: 1rem !important;
  }
  .page-recommended-brands .hero.product-hero.heroSmall .center-text p{
    font-size: 0.82rem !important;
    -webkit-line-clamp: 1 !important;
  }
}

/* Compact hero text on very small screens (show content sooner) */
@media (max-width: 520px){
  .hero.product-hero .heroCopy p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Mobile: collapse filter/search panels to save space */
@media (max-width: 768px){
  .filter-panel .mobileFilterToggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    max-width: 680px;
    margin: 10px auto 6px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 22px rgba(15,23,42,.06);
    font-weight: var(--fw-semibold);
    cursor: pointer;
  }
  .filter-panel .mobileFilterToggle .chev{
    display:inline-block;
    transition: transform .18s ease;
  }
  .filter-panel.mobileCollapsed .mobileFilterToggle .chev{
    transform: rotate(0deg);
  }
  .filter-panel:not(.mobileCollapsed) .mobileFilterToggle .chev{
    transform: rotate(180deg);
  }
  .filter-panel.mobileCollapsed .filterPanel__collapseArea{
    max-height: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .filter-panel .filterPanel__collapseArea{
    transition: max-height .22s ease, padding .22s ease, margin .22s ease;
  }
}

/* =========================================================
   v41: Small-phone polish (Galaxy S9 / ~360px)
   - Reduce cramped UI on very small screens
   - Make key layouts less “2-columns on phone”
   - Improve header/logo truncation
   - Improve table readability on mobile
   - Add fallbacks for older/quirky mobile browsers
   ========================================================= */

@media (max-width: 420px){
  /* Slightly wider content area (12px gutters instead of 16px) */
  .wrap{ width: calc(100% - 24px); }

  /* Header: keep it compact and avoid awkward wrapping */
  .headerRow{ padding: 10px 0; gap: 6px; }
  .logo{ gap: 8px; }
  .logoImg{ width: 32px; height: 32px; border-radius: 10px; }
  .logoTag{ display: none; }
  .logoText{
    font-size: 15px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hamburger: icon-only on tiny phones */
  .navToggle{ padding: 8px 10px; }
  .navToggleText{ display: none; }
  .navToggleIcon{ font-size: 18px; line-height: 1; }

  /* Drawer links: align to start (RTL-friendly) */
  .siteHeader .nav a{ text-align: start !important; }

  /* Cards/panels: reduce padding so content isn't squeezed */
  .toolbar-container,.contentCard{ padding: 16px; border-radius: 14px; }
  .panel{ padding: 12px; border-radius: 14px; }

  /* Headings: keep them readable without taking over */
  .center-text h1{ font-size: 1.22rem; }
  .center-text p{ font-size: .95rem; }

  /* Product & brand grids: keep 2-per-row even on tiny phones (reduce scrolling) */
  .page-products .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; }
  .brandGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .brandTop{ flex-direction: column; align-items: stretch; }
  .page-recommended-brands #brandGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .brandLinks{ gap: 8px; }
  .brandLinks a.btn,
  .brandLinks a.btn.small{ flex: 1 1 calc(50% - 8px); justify-content: center; }

  /* מוצרים page: the intro card heading was made too small in a previous patch */
  .page-products .page-products .panel.filter-panel .contentCard h2{ font-size: 1.05rem; }
  .page-products .page-products .panel.filter-panel .contentCard p{ font-size: .95rem; }

  /* Table: remove forced min-width so it can fit without horizontal scrolling */
  .compareTable{ min-width: 0; table-layout: fixed; }
  .compareTable th,.compareTable td{ padding: 10px 10px; font-size: 13px; overflow-wrap: anywhere; }
  .compareTable tbody td:first-child{ white-space: normal; }

  /* Hero: on tiny phones, prefer a clean vertical stack (less cramped than side-by-side) */
  .hero.product-hero,
  .hero.product-hero.heroSmall{
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: right !important;
    gap: 10px !important;
  }
  .hero.product-hero > .decorPhoto,
  .hero.product-hero.heroSmall > .decorPhoto{
    width: 100% !important;
    max-width: none !important;
    height: 140px !important;
    max-height: none !important;
    border-radius: 14px !important;
    object-fit: cover !important;
  }
  .hero.product-hero .heroCopy.center-text{ text-align: right !important; }
  .hero.product-hero .badgeRow,
  .hero.product-hero.heroSmall .badgeRow{
    justify-content: flex-start !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
}

/* Safe-area support for newer phones (no harm on others) */
.siteHeader{ padding-top: env(safe-area-inset-top, 0px); }
body{ padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Legacy/quirky mobile fallback: replace min()/clamp() dependent sizing when unsupported */
@supports not (width: min(10px, 20px)){
  .wrap{ width: calc(100% - 32px); max-width: 1120px; }
  .hero.product-hero{ max-width: 980px; width: calc(100% - 28px); }
}

@supports not (font-size: clamp(1rem, 2vw, 2rem)){
  h1{ font-size: 32px; }
  h2{ font-size: 24px; }
}

/* =========================================================
   v43: Site-wide responsive cleanup (2026-01)
   Goals:
   - Make the header compact on phones (Galaxy S9 / 320–360px)
   - Ensure the mobile nav drawer never inflates the header height
   - Make heroes shorter and more consistent across pages
   - Improve general mobile compatibility & accessibility
   ========================================================= */

html{ -webkit-text-size-adjust: 100%; }
*,*::before,*::after{ box-sizing: border-box; }
img,svg,video,canvas{ max-width:100%; height:auto; }

/* Accessible focus (keyboard) */
:focus-visible{ outline: 3px solid rgba(42,91,154,.45); outline-offset: 2px; }

/* ---------- Header & mobile nav ---------- */

@media (max-width: 900px){
  /* Keep header in a single compact row */
  .headerRow{
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  /* Allow logo to shrink (avoid forcing the header to become 2 lines) */
  .logo{ min-width: 0 !important; flex: 1 1 auto; }
  .logoText{
    max-width: min(58vw, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .logoTag{ display:none !important; }

  /* Make sure the drawer behaves like a single column list */
  .siteHeader .nav{ flex-wrap: nowrap !important; }
  .siteHeader .nav{ align-items: stretch !important; }
  .siteHeader .nav a{ text-align: start !important; }

  /* Drawer padding: account for header + safe area without being huge */
  .siteHeader .nav{ padding-top: calc(env(safe-area-inset-top, 0px) + 66px) !important; }
}

@media (max-width: 420px){
  .headerRow{ padding: 8px 0 !important; }
  .logoImg{ width: 30px !important; height: 30px !important; }
  .logoText{ max-width: min(52vw, 220px); font-size: 14px; }
  .navToggle{ padding: 8px 10px !important; }
}

/* ---------- Heroes: shorter, consistent, mobile-first ---------- */

/* heroSmall was historically used to add extra vertical padding/min-height.
   On small screens it makes pages feel like "giant headers". */
@media (max-width: 720px){
  .hero.heroSmall{ min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}

@media (max-width: 640px){
  .hero.product-hero{
    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 10px auto 12px !important;
  }
  .hero.product-hero > .decorPhoto{
    width: 96px !important;
    max-width: 34vw !important;
    max-height: 72px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
  }
  .hero.product-hero .center-text h1{ font-size: 1.2rem !important; }
  .hero.product-hero .center-text p{ font-size: .92rem !important; }
  .trust-badge{ padding: 5px 10px !important; font-size: .82rem !important; }
}

/* Override the older "stack hero vertically" rule on tiny phones.
   Side-by-side is shorter and avoids the huge top box effect. */
@media (max-width: 420px){
  .hero.product-hero,
  .hero.product-hero.heroSmall{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .hero.product-hero > .decorPhoto,
  .hero.product-hero.heroSmall > .decorPhoto{
    width: 84px !important;
    max-height: 64px !important;
    height: auto !important;
  }
  .hero.product-hero .badgeRow{ gap: 8px !important; }
}

/* ---------- Tables: always usable on phones ---------- */
table{ width: 100%; border-collapse: collapse; }
@media (max-width: 640px){
  .compareTable{ display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; }
}

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

/* =========================================================
   v44: Compact density (reduce scrolling)
   - Keep 2 cards per row on מוצרים + Brands pages
   - Tighten card padding + typography on small screens
   ========================================================= */

@media (max-width: 600px){
  /* Global vertical rhythm */
  .hero{ margin: 10px 0 12px; }
  .heroShell{ padding: 14px; }
  .contentCard{ margin-bottom: 12px; }
  .panel{ margin-top: 12px; }

  /* מוצרים: always show 2 cards per row on phones */
  .page-products .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .page-products .productCard{ padding: 8px 8px 10px; border-radius: 16px; }
  .page-products .productCard .pBrand{ font-size: 12px; }
  .page-products .productCard .pName{ font-size: 15px; line-height: 1.25; }
  .page-products .productCard .pMeta{ margin-top: 4px; gap: 6px; }
  .page-products .productCard .pMetaPill{ padding: 3px 7px; font-size: 10.5px; }
  .page-products .productCard .pPriceRange{ margin-top: 4px; font-size: 12px; }
  .page-products .productCard .offer{ padding: 10px 10px 10px; border-radius: 16px; gap: 6px; }
  .page-products .productCard .offerMeta{ margin-top: 2px; font-size: 12px; }
  .page-products .productCard .offer .btn.primary{ margin-top: 6px; padding: 9px 0; font-size: 14px; }

  /* Israeli brands directory: force 2 columns on phones */
  .brandGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .brandCard{ padding: 12px; border-radius: 16px; }
  .brandName{ font-size: .98rem; }
  .brandDesc{
    margin-top: 8px;
    line-height: 1.4;
    font-size: .92rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .brandBadges{ margin-top: 10px; gap: 6px; }
  .brandBadge{ padding: 5px 8px; font-size: 11px; }
  .brandLinks{ margin-top: 10px; gap: 8px; }

  /* Recommended brands (intl): denser cards on phones */
  .page-recommended-brands #brandGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .page-recommended-brands .brandCard{
    height: auto;
    min-height: 210px;
    padding: 12px !important;
    border-radius: 16px;
  }
  .page-recommended-brands .brandName{ font-size: 1.15rem; }
  .page-recommended-brands .brandMeta,
  .page-recommended-brands .metaLine{ font-size: .85rem; }
  .page-recommended-brands .brandTag,
  .page-recommended-brands .tag{ padding: 3px 6px; font-size: 11px; }
}

/* Extra-tight on very small phones (Galaxy S9 ~360px) */
@media (max-width: 380px){
  .page-products .product-grid{ gap: 8px !important; }
  .page-products .productCard{ padding: 7px 7px 9px; }
  .page-products .productCard .pName{ font-size: 14.5px; }
  .brandCard{ padding: 11px; }
  .page-recommended-brands .brandCard{ min-height: 200px; }
}

/* Mobile-only דף הבית link in hamburger menu */
.navHomeMobile{ display:none; }
@media (max-width: 900px){
  .navHomeMobile{ display:block; }
}

/* =========================================================
   v8: Compact mobile filters + tighter Intl brands UI
   - Collapse filter/search blocks by default (mobile)
   - Keep toggle compact + show active filter summary
   ========================================================= */
@media (max-width: 768px){
  /* Mobile filter toggle – compact bar */
  .filter-panel .mobileFilterToggle{
    margin: 8px 0 10px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    max-width: none !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.07) !important;
  }
  .filter-panel .mobileFilterToggle .mfText{
    display:inline-block;
    max-width: calc(100% - 28px);
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .filter-panel .mobileFilterToggle .mfMeta{
    font-weight: var(--fw-medium);
    opacity: .75;
  }
  .filter-panel .mobileFilterToggle .chev{
    transition: transform .18s ease;
    opacity: .65;
    flex: 0 0 auto;
  }
  .filter-panel.mobileCollapsed .mobileFilterToggle .chev{
    transform: rotate(-90deg);
  }

  /* When collapsed, hide the heavy toolbar/card UI completely (toggle stays visible) */
  .filter-panel.mobileCollapsed .toolbar-container{
    display:none !important;
  }
}

/* =========================================================
   v12: מוצרים page — mobile alignment + collapsible filters
   Match the Intl brands UX on mobile:
   - Filters/search collapsed by default (uses existing mobileFilterToggle JS)
   - Cards align to start (RTL) like Intl brand cards
   Scoped to .page-products only to avoid affecting other pages
   ========================================================= */

.page-products .productsLayout > .filterPanel__collapseArea{min-width:0; width:100%;}
.page-products .productsLayout > .filterPanel__collapseArea > .productsFilters{width:100%;}

@media (max-width: 768px){
  /* When collapsed, hide the info card too (reduces scrolling) */
  .page-products .filter-panel.mobileCollapsed .contentCard{
    display: none !important;
  }
  /* If the collapsed wrapper leaves a gap, remove it */
  .page-products .filter-panel.mobileCollapsed .productsLayout{
    gap: 0 !important;
    margin-top: 0 !important;
  }
  /* Safety: ensure filters are hidden even if max-height doesn't animate well */
  .page-products .filter-panel.mobileCollapsed .productsFilters{
    display: none !important;
  }

  /* Product cards: align like Intl brand cards (start-aligned, RTL friendly) */
  .page-products .productCard{
    text-align: start !important;
  }
  .page-products .productCard .pHeader{
    align-items: flex-start !important;
    text-align: start !important;
  }
  .page-products .productCard .pTitleWrap{
    text-align: start !important;
  }
  .page-products .productCard .pMeta{
    justify-content: flex-start !important;
  }
  .page-products .productCard .tags{
    justify-content: flex-start !important;
  }
  .page-products .productCard .offer{
    text-align: start !important;
  }
  .page-products .productCard .offer .btn.primary{
    width: 100%;
  }
}

/* מחיר tier: renders $$$$$ with inactive $ in gray */
.price-tier{display:inline-flex;gap:.08em;font-weight:var(--fw-semibold);letter-spacing:.02em;font-family:inherit;user-select:none;}
.price-tier .dollar{opacity:.9;}
.price-tier .dollar.inactive{opacity:.25;filter:grayscale(1);}
.price-tier--sm{font-size:.92em;}

/* --- January 2026 UI fixes --- */

/* Fix LTR word order inside RTL nav (helps Weglot /en pages) */
.nav a{ unicode-bidi: plaintext; }

/* מוצרים filter panel: prevent overlap + horizontal scroll */
.page-products .productsFilters{ overflow-x: hidden; }
.page-products .toolbar-container{ overflow-x: hidden; }
.page-products .more-filters-inner{ padding-bottom: 12px; }
.page-products .price-range-hint{ margin-top: 6px; margin-bottom: 12px; }
.page-products .free-ship-row{ margin-top: 14px; flex-wrap: wrap; }

/* Additional filters: allow rows to wrap on small widths */
.page-products .more-filters-inner .row{ flex-wrap: wrap; }
.page-products .more-filters-inner .row > label{ flex: 1 1 180px; min-width: 0; }
.page-products .more-filters-inner select{ width: 100%; }

/* Promotions hero subtitle: improve contrast on dark image */
.page-shopping-calendar .hero .muted,
.page-shopping-calendar .hero p.muted{ color: rgba(255,255,255,.90) !important; }

/* מותגי intl: better mobile cards (single column + auto height) */
@media (max-width: 560px){
  .page-recommended-brands #brandGrid{ grid-template-columns: 1fr !important; }
  .page-recommended-brands .brandCard{ height: auto !important; min-height: 0 !important; }
  .page-recommended-brands .brandTop{ height: auto !important; }
  .page-recommended-brands .brandHeader{ align-items: center !important; }
  .page-recommended-brands .brandName{ font-size: 1.25rem !important; line-height: 1.22 !important; }
  .page-recommended-brands .brandCatsInline{ white-space: normal !important; max-width: 100% !important; }
  .page-recommended-brands .brandLinks{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .page-recommended-brands .brandLinks .btn.small{ padding: 6px 8px !important; font-size: 12px !important; }
}

/* Info page: allow long pills to wrap (avoid clipping on mobile) */
.comparePill{ flex-wrap: wrap; white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; }

/* Footer quotes: make all pills aligned on mobile */
@media (max-width: 520px){
  .footerQuotes{ flex-direction: column; align-items: center; }
  .footerQuotes::before{ display:none; }
  .footerQuotes .quotePill{ width: min(340px, 100%); justify-content: center; }
}

/* ===== v44: small UI fixes (mobile overflow, info pills, footer alignment) ===== */
html, body{ overflow-x: hidden; }

.calendarHero .muted{ color: rgba(255,255,255,.86); }

/* מוצרים: prevent the price-range hint from being visually cut by the next row */
.page-products .price-range-hint{ display:block; margin-top: 6px; margin-bottom: 14px; }
.page-products .price-range-row{ padding-bottom: 10px; border-bottom: 1px dashed rgba(15,23,42,.10); }

/* Info page: prevent long inline pill text from spilling outside the frame */
@media (max-width: 640px){
  .comparePill{ display:block; width:100%; white-space: normal; }
  .comparePill b{ display:inline; }
}

/* Footer quote pills: center + align neatly */
.footerQuotes{ justify-content: center; align-items: center; }
.footerQuotes::before{ display:none; }

@media (max-width: 520px){
  .compareTable th, .compareTable td{ padding: 8px 8px; font-size: 12px; }
  .compareTable th{ font-size: 11px; }
}

/* =========================================================
   vNEXT: 2026-01 UI polish
   - Fix products filter hint overlap
   - Make mobile filter panels expand reliably
   - Calendar: start showing 2 months per row on tablets
   - Info cards: denser layout on small phones
   - Footer quote pills aligned
   ========================================================= */

/* מוצרים: prevent the free-shipping pill from overlapping the price hint */
.price-range-hint{
  margin-top: 4px;
  margin-bottom: 10px;
  line-height: 1.3;
}
.free-ship-row{ align-items: flex-start; }
.free-ship-row .check-pill{
  white-space: normal;
  line-height: 1.25;
  max-width: 100%;
}

/* Mobile collapse panels: give the expanded state a max-height so nested content (details/summary) isn't clipped */
@media (max-width: 768px){
  .filter-panel:not(.mobileCollapsed) .filterPanel__collapseArea{
    max-height: 5000px;
    overflow: visible;
  }
}

/* Calendar grid: keep 2 months per row for tablets/small desktop, switch to 1 only on small phones */
@media (max-width: 920px){
  .agendaGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  .agendaGrid{ grid-template-columns: 1fr; }
}

/* Calendar hero: muted text should be readable on dark backgrounds */
.hero.product-hero.calendarHero .heroCopy .muted{
  color: rgba(255,255,255,.86) !important;
}

/* Learn/info: denser cards grid on phones */
@media (max-width: 520px){
  .cardsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .infoCard{ padding: 12px; }
}
@media (max-width: 360px){
  .cardsGrid{ grid-template-columns: 1fr; }
}

/* Footer quote pills: align neatly */
@media (max-width: 520px){
  .footerQuotes{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: min(420px, 100%);
    margin-inline: auto;
    justify-items: stretch;
    align-items: stretch;
  }
  .footerQuotes::before{ display:none !important; }
  .footerQuotes .quotePill{
    width: 100% !important;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 360px){
  .footerQuotes{ grid-template-columns: 1fr !important; }
}

/* Header: keep nav on one line on desktop (allow horizontal scroll instead of wrapping) */
@media (min-width: 860px){
  .headerRow{ flex-wrap: nowrap; }
}

/* --- מחיר tier color mapping (same tier = same color) --- */
:root{
  --tier1:#16a34a;
  --tier2:#0ea5a4;
  --tier3:var(--brand);
  --tier4:#7c3aed;
  --tier5:#f59e0b;
}
.price-tier .dollar{font-weight: var(--fw-bold);}
.price-tier .dollar.inactive{color:rgba(15,23,42,.22);}
.price-tier--t1 .dollar:not(.inactive){color:var(--tier1);}
.price-tier--t2 .dollar:not(.inactive){color:var(--tier2);}
.price-tier--t3 .dollar:not(.inactive){color:var(--tier3);}
.price-tier--t4 .dollar:not(.inactive){color:var(--tier4);}
.price-tier--t5 .dollar:not(.inactive){color:var(--tier5);}

/* --- מותג logo fallback (initials) --- */
.brandLogo{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(157,195,230,.55), rgba(42,91,154,.10));
  border:1px solid rgba(42,91,154,.18);
  color:#0f172a;
  font-weight: var(--fw-bold);
  letter-spacing:.02em;
  box-shadow:0 10px 22px rgba(20,35,60,.08);
}
.brandHeader{display:flex;gap:12px;align-items:center;}
.brandTitleBlock{display:flex;flex-direction:column;gap:2px;}
.brandCard[role="link"]{cursor:pointer;}
.brandCard[role="link"] .brandName{cursor:pointer;text-decoration:none;}
.brandCard[role="link"] .brandName:hover{text-decoration:underline;}

/* --- מבצעים page --- */
.page-deals .dealsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:14px;}
.page-deals .dealCard{padding:16px;border-radius:var(--radius);border:1px solid var(--stroke);background:rgba(255,255,255,.86);box-shadow:var(--shadow);transition:transform .18s, box-shadow .18s, border-color .18s;}
.page-deals .dealCard:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(20,35,60,.10);border-color:rgba(42,91,154,.22);}
.page-deals .dealTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.page-deals .dealBrandRow{display:flex;gap:12px;align-items:center;}
.page-deals .dealBrand{font-weight: var(--fw-bold);color:rgba(17,24,39,.92);}
.page-deals .dealName{font-weight:var(--fw-semibold);color:rgba(17,24,39,.78);margin-top:2px;line-height:1.35;}
.page-deals .dealMeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.page-deals .dealCta{margin-top:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;}
.page-deals .dealPrice{font-weight: var(--fw-bold);}
.page-deals .dealBtn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(42,91,154,.22);background:rgba(157,195,230,.22);color:#0f172a;font-weight: var(--fw-bold);text-decoration:none;}
.page-deals .dealBtn:hover{background:rgba(157,195,230,.32);}

/* --- Hebrew RTL enhancements --- */
:root { --he-font: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
html[dir="rtl"] body { direction: rtl; text-align: right; font-family: var(--he-font); }
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { font-family: var(--he-font); }
html[dir="rtl"] .nav, html[dir="rtl"] nav ul { flex-direction: row; }
html[dir="rtl"] .menu, html[dir="rtl"] .topMenu, html[dir="rtl"] .navbar, html[dir="rtl"] .nav-links { flex-direction: row; }
html[dir="rtl"] .card, html[dir="rtl"] .productCard, html[dir="rtl"] .dealCard, html[dir="rtl"] .brandCard { text-align: right; }

/* ------------------------------------------------------------
   Mobile: reduce scrolling by showing 2 cards per row
   (Brands / Products / Deals). Falls back to 1 column on very
   small screens.
------------------------------------------------------------ */

@media (max-width: 720px){
  /* Brands */
  .brandGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .brandCard{ padding: 12px; border-radius: 16px; }

  /* Deals */
  .page-deals .dealsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .page-deals .dealCard{ padding: 12px; border-radius: 16px; }

  /* Products */
  .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .productsResults .productCard{
    grid-template-columns: 1fr; /* stack image on top for tighter cards */
    padding: 12px;
    border-radius: 16px;
  }
  .productsResults .productCard .pMedia{ height: 130px; }
  .productsResults .productCard .pName{ -webkit-line-clamp: 2; }
}

@media (max-width: 360px){
  .brandGrid{ grid-template-columns: 1fr; }
  .page-deals .dealsGrid{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: 1fr !important; }
}
html[dir="rtl"] .price, html[dir="rtl"] .priceLabel { direction: ltr; unicode-bidi: embed; } /* keep numbers readable */

/* Mobile nav overlay */
.navOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 10000;
}
body.menuOpen .navOverlay{
  opacity: 1;
  pointer-events: auto;
}

/* ==== FINAL MOBILE DRAWER FIX (v12) ==== */
@media (max-width: 920px){
  /* Drawer */
  .siteHeader .nav{
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(320px, 85vw) !important;
    background: #fff !important;
    box-shadow: -18px 0 40px rgba(0,0,0,.15) !important;
    border-left: 1px solid rgba(15,23,42,.08) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 12px !important;
    transform: translateX(105%) !important;
    transition: transform .25s ease !important;
    z-index: 10002 !important;
    pointer-events: none !important;
  }

  .siteHeader.navOpen .nav,
  .siteHeader.navopen .nav{
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .siteHeader .nav a{
    width: 100% !important;
    padding: 10px 12px !important;
    text-align: right !important;
    white-space: normal !important;
  }

  .navOverlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.28) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
    z-index: 10000 !important;
  }
  body.menuOpen .navOverlay,
  body.menuopen .navOverlay{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Desktop nav */
@media (min-width: 921px){
  .siteHeader .headerRow{
    gap: 12px;
  }

  .siteHeader .nav{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(15, 23, 42, 0.06);
  }

  .siteHeader .nav a{
    font-size: clamp(13px, 0.95vw, 15px);
    font-weight: 600;
    letter-spacing: 0.1px;
    color: rgba(15,23,42,.86);
    padding: 8px 12px;
    border-radius: 999px;
    line-height: 1;
    transition: background .15s ease, color .15s ease, transform .15s ease;
  }

  .siteHeader .nav a:hover{
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15,23,42,.96);
  }

  /* Active page highlight (works if links already get .active / aria-current) */
  .siteHeader .nav a[aria-current="page"],
  .siteHeader .nav a.active{
    background: rgba(15, 23, 42, 0.10);
    color: rgba(15,23,42,.98);
  }

  /* CTA pill (the "לקנות בלי לפגוע" button) */
  .siteHeader .ctaPill{
    font-size: 13px;
    font-weight: var(--fw-semibold);
    padding: 8px 12px;
    border-radius: 999px;
  }
}

/* Medium screens: slightly tighter to avoid wrapping too much */
@media (min-width: 921px) and (max-width: 1100px){
  .siteHeader .nav{
    gap: 6px 8px;
    padding: 8px 8px;
  }
  .siteHeader .nav a{
    padding: 7px 10px;
    font-size: 13px;
  }
}

/* ==== Top menu: keep in ONE ROW on desktop (v18) ==== */
@media (min-width: 921px){
  /* Keep header compact */
  .siteHeader .headerRow{ gap: 12px; }

  /* One-line nav */
  .siteHeader .nav{
    display: flex;
    flex-wrap: nowrap;          /* IMPORTANT: one row */
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    overflow-x: auto;           /* fallback if screen is narrow */
    scrollbar-width: none;      /* Firefox */
  }
  .siteHeader .nav::-webkit-scrollbar{ display: none; }

  .siteHeader .nav a{
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: rgba(15,23,42,.86);
    padding: 6px 10px;
    border-radius: 999px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
  }
  .siteHeader .nav a:hover{
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15,23,42,.96);
  }
  .siteHeader .nav a[aria-current="page"],
  .siteHeader .nav a.active{
    background: rgba(15, 23, 42, 0.10);
    color: rgba(15,23,42,.98);
  }

  /* CTA pill */
  .siteHeader .ctaPill{
    font-size: 13px;
    font-weight: var(--fw-semibold);
    padding: 7px 12px;
    border-radius: 999px;
    white-space: nowrap;
  }
}

/* Slightly tighter on mid-size desktops */
@media (min-width: 921px) and (max-width: 1100px){
  .siteHeader .nav{ gap: 6px; }
  .siteHeader .nav a{ font-size: 13px; padding: 6px 9px; }
}

/* --- Product cards: image on top + compact height (hotfix) --- */
.page-products .productCard{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-products .productCard .pContent{
  gap: 6px;
}
.page-products .productCard .offer{
  padding: 10px 10px 10px;
}
.page-products .productCard .offer .btn.primary{
  margin-top: 6px;
  padding: 9px 0;
  font-size: 15px;
}

/* === KBWG PATCH: clearer product images + show full image (2026-02-02-v19) === */
/* Make product thumbnails clearer and show the whole product (no cropping) */
.page-products .pMedia{
  /* slightly taller for readability, still compact */
  height: 84px !important;
  background: rgba(255,255,255,.96);
}

@media (max-width: 480px){
  .page-products .pMedia{ height: 74px !important; }
}

.page-products .pMedia img{
  object-fit: contain !important;   /* show full image */
  object-position: center center;
  padding: 6px;                    /* breathing room so edges aren't cut */
  background: transparent;
  /* avoid any blur filters; let browser render crisply */
  image-rendering: auto;
  transform: translateZ(0);
}
/* === /KBWG PATCH v6 === */

/* === KBWG PATCH: larger + sharper thumbnails (2026-02-02-v19) === */
/* Bigger thumbnail area (still compact) + reduce internal whitespace */
.page-products .pMedia{
  height: 112px !important;
  background: #fff;
}
@media (max-width: 480px){
  .page-products .pMedia{ height: 96px !important; }
}

/* Show the whole image but make it fill the available space better */
.page-products .pMedia img{
  object-fit: contain !important;
  object-position: center center;
  padding: 2px !important;      /* less empty space */
  background: #fff;
  /* slightly crisper in Chromium-based browsers */
  image-rendering: -webkit-optimize-contrast;
}
/* === /KBWG PATCH v7 === */

/* === KBWG PATCH: crisp full-fit thumbnails (2026-02-02-v19) === */
/* The fade is coming from low opacity / overlays. Force a clean white canvas and full opacity. */
.page-products .pMedia{
  background: #fff !important;
  border-color: rgba(20,40,80,.14) !important;
}
.page-products .pMedia::after{
  content: none !important; /* prevent any gradient overlay */
}
.page-products .pMedia img{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  object-fit: contain !important;   /* never crop */
  padding: 4px !important;
  background: #fff !important;
  image-rendering: -webkit-optimize-contrast;
}

/* Ensure the img isn't constrained by inherited height:auto rules */
.page-products .pMedia img{
  width: 100% !important;
  height: 100% !important;
}
/* === /KBWG PATCH v8 === */

/* === KBWG PATCH: maximize full image visibility (2026-02-02-v19) === */
/* Make the media area tall enough so 'contain' can show the full product without cutting.
   This is the most reliable way to guarantee no crop across portrait/landscape images. */
.page-products .pMedia{
  height: 140px !important;
  padding: 0 !important;
  background: #fff !important;
  display: block !important;
}
@media (max-width: 920px){
  .page-products .pMedia{ height: 128px !important; }
}
@media (max-width: 480px){
  .page-products .pMedia{ height: 116px !important; }
}

/* Ensure image always fits fully (no crop) */
.page-products .pMedia img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 6px !important; /* small frame */
  background: #fff !important;
}

/* If placeholder is used, keep it centered and not huge */
.page-products .pPlaceholder{
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  place-items: center;
}
/* === /KBWG PATCH v9 === */

/* === KBWG PATCH: full image + bigger (2026-02-02-v19) === */
/* If it still feels "cut", it's usually because padding leaves less usable space,
   or the box is still a bit short for portrait product shots.
   This makes the box a bit taller and removes most padding while STILL never cropping. */

.page-products .pMedia{
  height: 168px !important;
}
@media (max-width: 920px){
  .page-products .pMedia{ height: 150px !important; }
}
@media (max-width: 480px){
  .page-products .pMedia{ height: 132px !important; }
}

.page-products .pMedia img{
  padding: 0px !important;      /* maximize usable area */
  object-fit: contain !important;
  object-position: center center !important;
}
/* === /KBWG PATCH v10 === */

/* === KBWG PATCH: square thumb tuned for portrait packshots (2026-02-02-v19) === */
/* Your images are packshots like the sample (portrait/square with white bg).
   A wide banner thumbnail makes them look tiny. Switch to a SQUARE thumbnail so the product fills the box,
   while still using `contain` (never crops). */

.page-products .pMedia{
  /* square makes portrait packshots look much larger */
  aspect-ratio: 1 / 1 !important;
  height: auto !important;          /* let aspect-ratio control height */
  width: 100%;
  max-height: 170px;                /* keep cards reasonable */
}
@media (max-width: 920px){
  .page-products .pMedia{ max-height: 155px; }
}
@media (max-width: 480px){
  .page-products .pMedia{ max-height: 140px; }
}

/* Maximize product size inside the square */
.page-products .pMedia img{
  object-fit: contain !important;   /* never crop */
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #fff !important;
}
/* === /KBWG PATCH v11 === */

/* === KBWG PATCH: shorter thumb + shift image up (2026-02-02-v19) === */
/* Shorter image area (reduce card height) */
.page-products .pMedia{
  max-height: 138px !important;   /* was 170 */
}
@media (max-width: 920px){
  .page-products .pMedia{ max-height: 126px !important; }
}
@media (max-width: 480px){
  .page-products .pMedia{ max-height: 118px !important; }
}

/* Nudge the image UP so we see more of the bottom part of the product */
.page-products .pMedia img{
  object-fit: contain !important;
  object-position: 50% 42% !important; /* up a bit (default is 50% 50%) */
}
/* === /KBWG PATCH v12 === */

/* === KBWG PATCH: show more bottom of packshot (2026-02-02-v19) === */
/* With object-fit: contain, the image is NOT cropped unless we shift it.
   The screenshot shows bottoms getting cut → shift DOWN (not up) so more bottom is visible. */

.page-products .pMedia img{
  object-fit: contain !important;
  /* move image down so bottom part is visible */
  object-position: 50% 62% !important;
}

/* Keep the thumbnail area compact */
.page-products .pMedia{
  max-height: 132px !important;
}
@media (max-width: 920px){
  .page-products .pMedia{ max-height: 122px !important; }
}
@media (max-width: 480px){
  .page-products .pMedia{ max-height: 112px !important; }
}
/* === /KBWG PATCH v13 === */

/* === KBWG PATCH: bottom-align packshots (2026-02-02-v19) === */
/* Best effort for your Amazon-style packshots:
   - keep square thumb (makes packshots look larger)
   - align image to the BOTTOM so jars/tubes don't look "cut" when the file has extra whitespace on top
   - still NEVER crop (contain) */

.page-products .pMedia{
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  width: 100%;
  max-height: 132px !important; /* compact */
  background: #fff !important;
}
@media (max-width: 920px){
  .page-products .pMedia{ max-height: 122px !important; }
}
@media (max-width: 480px){
  .page-products .pMedia{ max-height: 112px !important; }
}

.page-products .pMedia img{
  object-fit: contain !important;
  /* bottom align to reveal lower part when source has top whitespace */
  object-position: 50% 100% !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #fff !important;
}
/* === /KBWG PATCH v14 === */

/* === KBWG PATCH: square thumb with capped width (2026-02-02-v19) === */
/* Problem in desktop: the card is wide, and max-height forces the media to become a wide rectangle,
   which makes packshot images look tiny.
   Fix: keep the thumb SQUARE but cap its WIDTH (so it stays compact and the product stays big). */

.page-products .pMedia{
  width: 100% !important;
  max-width: 190px;              /* cap thumb size */
  margin-inline: auto;           /* center in RTL/LTR */
  aspect-ratio: 1 / 1 !important;/* always square */
  height: auto !important;       /* driven by aspect ratio */
  max-height: none !important;   /* prevent squashing */
  background: #fff !important;
}

@media (max-width: 920px){
  .page-products .pMedia{ max-width: 175px; }
}
@media (max-width: 480px){
  .page-products .pMedia{ max-width: 155px; }
}

/* Full image, bottom aligned */
.page-products .pMedia img{
  object-fit: contain !important;
  object-position: 50% 100% !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #fff !important;
}
/* === /KBWG PATCH v15 === */

/* === KBWG PATCH: slightly taller thumbs (2026-02-02-v19) === */
/* Slightly taller by increasing capped width (square aspect-ratio keeps it proportional) */
.page-products .pMedia{
  max-width: 210px !important; /* was 190 */
}
@media (max-width: 920px){
  .page-products .pMedia{ max-width: 190px !important; } /* was 175 */
}
@media (max-width: 480px){
  .page-products .pMedia{ max-width: 170px !important; } /* was 155 */
}
/* === /KBWG PATCH v16 === */

/* === KBWG PATCH: best-looking thumbs (no fade) + show bottom (2026-02-02-v19) === */
/* 1) Fix "faded" look: remove any opacity/filters/overlays and force clean white canvas */
.page-products .pMedia{
  background: #fff !important;
  opacity: 1 !important;
  filter: none !important;
}
.page-products .pMedia::before,
.page-products .pMedia::after{
  content: none !important;
  display: none !important;
}
.page-products .pMedia img{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: #fff !important;
  image-rendering: -webkit-optimize-contrast;
}

/* 2) Ensure full image is shown (no cropping) AND prevent the rounded corners from clipping the bottom:
      add a tiny bottom padding frame and position slightly above bottom */
.page-products .pMedia{
  overflow: hidden !important; /* keep rounded corners clean */
}
.page-products .pMedia img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;         /* never crop */
  object-position: 50% 90% !important;    /* a touch above bottom */
  padding: 2px 2px 10px 2px !important;   /* extra room at bottom so it won't look "cut" */
  box-sizing: border-box !important;
}
/* === /KBWG PATCH v17 === */

/* === KBWG PATCH: polish product cards (2026-02-02-v19) === */
/* Visual polish (keep your current layout, just cleaner) */

/* Card: slightly tighter + nicer separation */
.page-products .productCard{
  padding: 14px !important;
  border: 1px solid rgba(20,40,80,.08) !important;
  box-shadow: 0 10px 24px rgba(20,40,80,.06);
}
@media (max-width: 480px){
  .page-products .productCard{ padding: 12px !important; }
}

/* Image: keep crisp + reduce the "washed" feel */
.page-products .pMedia{
  border: 1px solid rgba(20,40,80,.10) !important;
  border-radius: 18px !important;
}
.page-products .pMedia img{
  /* slight contrast boost without looking edited */
  filter: contrast(1.02) saturate(1.03) !important;
}

/* Brand line: calmer (less heavy), closer to title */
.page-products .pBrand{
  font-weight: var(--fw-semibold) !important;
  opacity: .75 !important;
  letter-spacing: .2px;
  margin-top: 2px;
}

/* Title: slightly smaller so it wraps nicer in Hebrew/English mix */
.page-products .pName{
  font-size: 18px !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}
@media (max-width: 480px){
  .page-products .pName{ font-size: 16.5px !important; }
}

/* Pills: consistent spacing and size */
.page-products .pMeta{
  gap: 8px !important;
  margin-top: 6px !important;
}
.page-products .pMeta .pill,
.page-products .tag{
  border-color: rgba(20,40,80,.14) !important;
  background: #fff !important;
}

/* Offer box: a bit less tall + more readable */
.page-products .offer{
  border-radius: 18px !important;
  background: rgba(240,245,255,.65) !important;
  border: 1px solid rgba(120,160,255,.20) !important;
}
.page-products .offerStore{
  font-weight: var(--fw-semibold) !important;
}
.page-products .offer .btn{
  border-radius: 999px !important;
}

/* Hover polish for desktop */
@media (hover:hover) and (pointer:fine){
  .page-products .productCard{
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .page-products .productCard:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(20,40,80,.09);
  }
}
/* === /KBWG PATCH v18 === */

/* === KBWG PATCH: eliminate bottom clip illusion (2026-02-02-v19) === */
/* Some packshots still look "cut" at the bottom because:
   - the image sits too close to the rounded border, and
   - subpixel rounding can clip the last pixels.
   Fix: add guaranteed bottom breathing room inside the media box. */

.page-products .pMedia{
  padding-bottom: 12px !important; /* breathing room */
  box-sizing: border-box !important;
}
.page-products .pMedia img{
  height: calc(100% - 12px) !important; /* respect the padding */
  object-fit: contain !important;
  object-position: 50% 100% !important; /* bottom align */
  padding: 0 !important;
  display: block !important;
}
/* === /KBWG PATCH v19 === */

/* === KBWG PATCH: fixed thumb size 100x140 (2026-02-02-v19) === */
/* Match the attached image dimensions exactly: 100x140px (portrait, 5:7). */
.page-products .pMedia{
  width: 100px !important;
  height: 140px !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin-inline: auto !important; /* center in card */
  padding-bottom: 12px !important; /* keep anti-clip breathing room */
  box-sizing: border-box !important;
}

/* Keep full image visible and bottom-aligned */
.page-products .pMedia img{
  width: 100% !important;
  height: calc(100% - 12px) !important;
  object-fit: contain !important;
  object-position: 50% 100% !important;
  padding: 0 !important;
}

/* Optional: on very small screens, shrink a little so it doesn't overflow */
@media (max-width: 360px){
  .page-products .pMedia{ width: 92px !important; height: 128px !important; }
}
/* Today's deals: make product images smaller on-screen */
.page-deals .dealMedia{
  width: 140px;          /* change to 110 / 120 / 160 as you like */
  aspect-ratio: 1 / 1;
  margin-inline: auto;   /* center the thumbnail */
}

.page-deals .dealImg,
.page-deals .dealPlaceholder{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* use 'contain' if you prefer no cropping */
}

/* Optional: even smaller on mobile */
@media (max-width: 480px){
  .page-deals .dealMedia{ width: 120px; }
}

/* === /KBWG PATCH v20 === */

input,button,select,textarea{ font-family: inherit; }

/* -------------------------------------------------------
   Cross‑site responsive polish (mobile + iPad)
-------------------------------------------------------- */
@media (max-width: 600px){
  .wrap{ width: min(1120px, 100% - 24px); }
  .toolbar-container, .contentCard{ padding: 16px; border-radius: 14px; }
  .contentCard{ margin-bottom: 18px; }
  .cardsGrid{ gap: 12px; margin: 12px 0; }
  .homeGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miniCard{ padding: 14px; }
  .miniCardIcon{ font-size: 24px; margin-bottom: 8px; }
  .miniCardText{ font-size: .92rem; }
  .lead{ font-size: 1rem; }
  .heroCopy p{ font-size: 1.02rem; }
  .btn{ padding: 10px 14px; }
}

@media (max-width: 420px){
  .homeGrid{ grid-template-columns: 1fr; }
}

/* iPad / tablets: more breathing room and stacked hero */
@media (min-width: 768px) and (max-width: 1024px){
  .wrap{ width: min(1120px, 100% - 32px); }
  .heroInner{ grid-template-columns: 1fr; }
  .heroMedia{ max-height: 320px; }
  .siteHeader .nav a{ padding: 8px 10px; }
}

/* ===== HERO RESPONSIVE FIX (v9) =====
   Goal: prevent oversized hero on iPad/tablet and show full hero images without cropping.
*/
.hero{ 
  /* don't force viewport-height heroes */
  min-height: unset;
}
.hero .heroInner{
  min-height: unset;
}
.hero.product-hero.heroSmall{
  padding: 34px 0;
}
.hero.product-hero.heroSmall .heroInner{
  gap: 18px;
}

/* Make hero image area predictable across breakpoints */
.hero.product-hero > .decorPhoto{
  display: block;
  width: min(360px, 34vw);
  max-width: 360px;
  height: 220px;
  object-fit: contain;
  object-position: center;
}

/* Tablet/iPad: reduce vertical space and prevent huge empty areas */
@media (min-width: 641px) and (max-width: 1024px){
  .hero.product-hero.heroSmall{ padding: 26px 0; }
  .hero.product-hero.heroSmall .heroInner{ min-height: unset; }
  .hero.product-hero > .decorPhoto{
    width: min(260px, 34vw);
    height: 160px;
  }
}

/* Mobile: keep hero compact */
@media (max-width: 640px){
  .hero.product-hero.heroSmall{ padding: 22px 0; }
  .hero.product-hero > .decorPhoto{
    width: 122px;
    height: 92px;
  }
}

/* Tablet hero padding clamp */
@media (min-width: 641px) and (max-width: 1024px){
  .hero{ padding-top: 40px; padding-bottom: 34px; }
}

/* ===== PAGINATION + LOAD MORE (v10) ===== */
.kbPager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:16px 0 6px;
}
.kbPager .btnSmall{ min-width: 90px; }
.kbPagerInfo{
  font-size: .95rem;
  color: rgba(0,0,0,.72);
  padding: 2px 6px;
}
.kbLoadMoreWrap{
  display:flex;
  justify-content:center;
  margin: 16px 0 6px;
}
.kbLoadMoreWrap .btn{ min-width: 180px; }

/* Home teasers (v12) — lightweight preview grids */
.homeTeasers .contentCard{ background: rgba(255,255,255,.80); }
.homeTeaserLoading{
  display:flex; align-items:center; justify-content:center;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(42,91,154,.22);
  background: rgba(157,195,230,.14);
  font-weight: var(--fw-bold);
}
.homeTeaserEmpty{ padding: 10px 0; text-align:center; }

.homeCardsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.homeCardsGrid--deals .dealCard,
.homeCardsGrid--products .productCard{
  box-shadow: var(--shadow);
}
.homeCardsGrid .dealCard{ margin:0; }
.homeCardsGrid .dealCta .dealBtn{ padding: 8px 10px; border-radius: 12px; }
.homeCardsGrid .productCard{ padding: 14px; }
.homeCardsGrid .pMedia img{ border-radius: 14px; }

@media (max-width: 900px){
  .homeCardsGrid{ grid-template-columns: 1fr; }
}

/* Pager (v12) — shared pagination UI */
.pager{
  margin: 14px 0 4px;
  display:flex;
  justify-content:center;
}
.pagerRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.78);
}
.pagerNums{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.pagerBtn,.pagerNum{
  border: 1px solid rgba(42,91,154,.22);
  background: rgba(157,195,230,.18);
  color: #0f172a;
  font-weight: var(--fw-bold);
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
}
.pagerBtn[disabled]{ opacity:.5; cursor: not-allowed; }
.pagerNum.is-active{
  background: rgba(42,91,154,.20);
}
.pagerEllipsis{ padding: 0 6px; font-weight: var(--fw-bold); color: var(--muted); }

/* Sticky header (v13) */
.siteHeader{
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(31,41,55,.08);
}
@supports not (backdrop-filter: blur(10px)){
  .siteHeader{ background: rgba(255,255,255,.92); }
}

/* Home quick cards: show grid on mobile, highlight Products */
@media (max-width: 520px){
  .homeGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miniCard{ padding: 14px; }
  .miniCardIcon{ font-size: 24px; }
  .miniCardText{ font-size: .92rem; }
}

.miniCard.isPrimary{
  border-color: rgba(42,91,154,.22);
  background: linear-gradient(180deg, rgba(157,195,230,.20), rgba(255,255,255,.92));
}
.miniCard.isPrimary .miniCardTitle{ color: #0f172a; }

/* Ingredient checker mobile (v13) */
.pasteBlock textarea{
  width:100%;
  min-height: 140px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,.14);
  font-size: 1rem;
  line-height: 1.4;
  resize: vertical;
}
@media (max-width: 520px){
  #qIng{
    padding: 14px 14px;
    font-size: 1.05rem;
    border-radius: 14px;
  }
  .suggestions .sugItem{
    padding: 12px 12px;
    border-radius: 14px;
  }
}

.brandBadge--muted{
  background: rgba(148,163,184,.18);
  border-color: rgba(148,163,184,.26);
  color: rgba(30,41,59,.82);
}

/* Notice banner (v13) — less intrusive */
.siteNotice{ padding: 8px 0; }
.siteNotice p{ margin:0; font-weight: var(--fw-semibold); font-size: .95rem; }
@media (max-width: 520px){
  .siteNotice p{ font-size: .92rem; }
}

/* Pharmacy (v15) */
.pillBtn{ border: 1px solid rgba(42,91,154,.18); background: rgba(157,195,230,.14); color: #0f172a; font-weight: var(--fw-bold); padding: 8px 10px; border-radius: 999px; cursor: pointer; }
.pillBtn.is-active{ background: rgba(42,91,154,.18); border-color: rgba(42,91,154,.26); }
.phMetaRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.phCard{ border: 1px solid rgba(31,41,55,.10); background: rgba(255,255,255,.86); border-radius: 18px; padding: 14px; box-shadow: 0 10px 22px rgba(0,0,0,.04); }
.phTitle{ margin: 0 0 8px; font-size: 1.06rem; }
.phBadges,.phStores{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.pill{ display:inline-flex; align-items:center; padding: 6px 10px; border-radius:999px; font-weight:var(--fw-bold); border:1px solid rgba(31,41,55,.10); }
.pill--soft{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.16); }
.pill--muted{ background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.20); color: rgba(30,41,59,.86); }
.phActions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 520px){ .phActions .btn{ width:100%; justify-content:center; } }
/* KBWG MOBILE MENU HOTFIX v29
   Fix: on mobile, the drawer was ending up BEHIND the overlay/content due to stacking contexts.
   This forces the overlay to be truly removed when closed, and ensures the header/nav sit above it when open. */
@media (max-width: 920px){
  /* overlay must not block clicks when closed */
  .navOverlay{ display:none !important; }
  body.menuOpen .navOverlay,
  body.menuopen .navOverlay{ display:block !important; }

  /* when the menu is open, lift header/nav above the overlay */
  body.menuOpen .siteHeader,
  body.menuopen .siteHeader{ z-index: 2147483000 !important; }

  /* overlay stays above the page but below the header/nav */
  body.menuOpen .navOverlay,
  body.menuopen .navOverlay{ z-index: 2147482990 !important; }

  /* extra safety: nav always on top inside the header stacking context */
  body.menuOpen .siteHeader .nav,
  body.menuopen .siteHeader .nav{ z-index: 2147483010 !important; }
}

/* =========================================================
   Home/index hero — compact + cleaner search line (v1)
   Makes the navy hero box shorter and tightens the pills + search input.
   Safe: scoped to .hero.heroCompact only.
   ========================================================= */

.hero.heroCompact{
  padding: 26px 0 18px; /* smaller navy box */
}
.hero.heroCompact .heroInner{
  padding: 12px;
  gap: 12px;
}

/* Slightly smaller headline + tighter spacing */
.hero.heroCompact .heroCopy h1{
  font-size: clamp(1.55rem, 3.2vw, 1.95rem);
  margin: 0 0 8px;
}
.hero.heroCompact .heroCopy p{
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Certifications row */
.hero.heroCompact .badgeRow{
  margin-top: 10px;
  gap: 8px;
}
.hero.heroCompact .badge{
  padding: 6px 10px;
  font-size: 12px;
}

/* The two “products / vegan” pills (usually .btn and .btn.primary) */
.hero.heroCompact .heroCopy .btn{
  padding: 9px 12px;
  font-size: 15px;
  border-width: 1px;
}
.hero.heroCompact .heroCopy .btn.primary{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}
.hero.heroCompact .heroCopy .btn:not(.primary){
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.14);
  color: rgba(15,23,42,.92);
}

/* Optional (HTML): wrap the “Search for / products / vegan / in Israel” row with class="heroSearchLine" */
.hero.heroCompact .heroSearchLine{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 6px;
}
.hero.heroCompact .heroSearchLine .heroSearchLabel{
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,.88);
  opacity: .95;
}

/* Search input inside the hero */
.hero.heroCompact .search-wrapper{
  margin-top: 10px;
}
.hero.heroCompact .search-wrapper input{
  padding: 12px 46px 12px 18px;
  font-size: 16px;
}
.hero.heroCompact .search-btn{
  right: 12px;
  font-size: 18px;
}

/* Hero image: a little shorter, still visible */
.hero.heroCompact .heroMedia{
  min-height: 150px;
  max-height: 200px;
}

@media (max-width: 640px){
  .hero.heroCompact{
    padding: 20px 0 14px;
  }
  .hero.heroCompact .heroInner{
    padding: 10px;
    gap: 10px;
  }
  .hero.heroCompact .heroCopy .btn{
    padding: 8px 10px;
    font-size: 14px;
  }
  .hero.heroCompact .heroMedia{
    min-height: 130px;
    max-height: 175px;
  }
}

/* Moderate emphasis for a single-weight handwriting font */
strong, b{ font-weight: var(--fw-semibold); }

/* Attribution / credits (optional) */
.credits{
  font-size: .85rem;
  color: var(--muted2);
  text-align: center;
  padding: 18px 12px;
}
.credits a{ color: var(--brand); text-decoration: underline; }

/* =========================================================
   Mobile menu improvements (drawer nav)
   ========================================================= */
@media (max-width: 900px){
  /* Drawer container */
  .siteHeader .nav{
    width: min(380px, 92vw);
    padding: 0;
    gap: 0;
    background: #fff;
  }

  /* Search bar in drawer */
  .navDrawerSearch{
    position: sticky;
    top: 64px; /* just under drawer header */
    z-index: 2;
    display: flex;
    gap: 10px;
    padding: 10px 12px 12px;
    margin: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90));
    border-bottom: 1px solid rgba(15,23,42,.06);
    backdrop-filter: blur(6px);
  }
  .navDrawerSearchInput{
    flex: 1;
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.12);
    padding: 0 14px;
    font: inherit;
    font-size: 1.05rem;
    background: rgba(255,255,255,.96);
  }
  .navDrawerSearchBtn{
    min-width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(42,91,154,.10);
    font: inherit;
    cursor: pointer;
  }
  .navDrawerSearchInput:focus{ outline: none; }
  .navDrawerSearchInput:focus-visible{ box-shadow: 0 0 0 3px rgba(42,91,154,.22); }

  /* Accordion sections */
  .siteHeader .navGroup{
    width: 100%;
    border-bottom: 1px solid rgba(15,23,42,.06);
    padding: 0;
    margin: 0;
  }
  .siteHeader .navGroup > summary{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 0;
    border: none;
    background: transparent;
    font-size: 1.15rem;
    letter-spacing: -0.2px;
  }
  .siteHeader .navGroup[open] > summary{
    background: rgba(42,91,154,.08);
  }

  /* Chevron animation (RTL-friendly) */
  #siteHeader .navChevron{
    opacity: .70;
    transform: rotate(180deg); /* point left (RTL) */
    transition: transform .18s ease;
    font-size: 1.15rem;
  }
  #siteHeader .navGroup[open] .navChevron{ transform: rotate(90deg); } /* down */

  /* Dropdown panel */
  #siteHeader .navDrop{
    margin: 8px 12px 14px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(42,91,154,.10);
    background: rgba(42,91,154,.04);
  }
  #siteHeader .navDrop a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: right;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,23,42,.06);
    min-height: 48px;
    font-size: 1.05rem;
  }
  #siteHeader .navDrop a + a{ margin-top: 8px; }
  #siteHeader .navDrop a:hover{ background: #fff; }

  #siteHeader .navItemIcon{
    flex: 0 0 auto;
    width: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #siteHeader .navItemLabel{
    flex: 1;
  }
  /* Right-side arrow for links */
  #siteHeader .navDrop a::after{
    content: "›";
    opacity: .55;
    font-size: 1.2rem;
    line-height: 1;
    flex: 0 0 auto;
    transform: rotate(180deg); /* point left in RTL */
  }

  /* Remove conflicting pill styles in drawer */
  .siteHeader .nav > a{
    width: 100%;
    border-radius: 0;
    background: transparent;
    border: none;
    text-align: right;
    padding: 14px 12px;
    font-size: 1.15rem;
  }
}

/* --- Mobile menu typography tweaks (no search bar) --- */
@media (max-width: 768px){
  /* Bigger section titles + main links */
  .navDrawer .menuTitle,
  .navDrawer .menuItem > a,
  .navDrawer summary{
    font-size: 1.15rem;
    line-height: 1.35;
  }

  /* Slightly bigger sub-links */
  .navDrawer .submenu a{
    font-size: 1.05rem;
    line-height: 1.35;
  }

  /* More comfortable tap area */
  .navDrawer a,
  .navDrawer summary{
    padding: 14px 16px;
  }
}

/* --- Force site font everywhere (beats older page-specific rules) --- */
html, body, main, button, input, select, textarea {
  font-family: var(--he-font) !important;
}

/* Some pages set a hard font on main (e.g. .page-products main). Override it: */
[class^="page-"] main,
[class*=" page-"] main,
.page-products main {
  font-family: var(--he-font) !important;
}

/* --- Mobile drawer tweaks: hide ANY search bar & make titles bigger --- */
@media (max-width: 768px){
  /* Hide any search UI that might still be in the drawer */
  .navDrawer input[type="search"],
  .navDrawer input[placeholder*="חיפוש"],
  .navDrawer form[role="search"],
  .navDrawer .navSearch,
  .navDrawer .menuSearch,
  .navDrawer .searchBar,
  .navDrawer .drawerSearch,
  .navDrawer .mobileSearch {
    display: none !important;
  }

  /* Bigger titles / main items */
  .navDrawer summary,
  .navDrawer .menuTitle,
  .navDrawer .menuItem > a,
  .navDrawer .menuList > li > a,
  .navDrawer .menuList > li > summary{
    font-size: 1.25rem !important;
    line-height: 1.35;
  }

  /* Sub items slightly smaller */
  .navDrawer .submenu a{
    font-size: 1.10rem !important;
    line-height: 1.35;
  }

  /* Bigger tap targets */
  .navDrawer a,
  .navDrawer summary{
    padding: 16px 16px !important;
  }
}

/* --- Mobile drawer typography + spacing (bigger titles, RTL alignment) --- */
@media (max-width: 900px){
  /* Hide drawer search if it exists anywhere */
  .navDrawerSearch{ display:none !important; }

  /* Section headers (details > summary) */
  .navGroup > summary{
    font-size: 1.28rem !important;
    line-height: 1.35;
    padding: 16px 10px !important;
    font-weight: var(--fw-bold);
    text-align: right !important;
  }

  /* Dropdown links inside sections */
  .navDrop a{
    font-size: 1.12rem !important;
    line-height: 1.35;
    padding: 14px 12px !important;
    border-radius: 14px !important;
    text-align: right !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .navItemIcon{ font-size: 1.15em; }
  .navItemLabel{ font-size: 1em; }

  /* Any top-level links that are not inside dropdowns */
  .siteHeader .nav > a{
    font-size: 1.15rem !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
    text-align: right !important;
  }

  /* Chevron: make it clearer + animate open */
  .navChevron{
    font-size: 22px;
    transition: transform .18s ease;
  }
  details[open] > summary .navChevron{
    transform: rotate(90deg);
  }
}

/* --- Mobile menu: prevent "jumping" when opening sections --- */
@media (max-width: 900px){
  /* Disable scroll anchoring inside the drawer to avoid sudden jumps */
  .navDrawer,
  .navDrawer *{
    overflow-anchor: none;
  }

  /* Make expanded panels scroll inside themselves instead of pushing the whole menu */
  .navGroup[open] > .navDrop{
    max-height: 38vh;
    overflow-y: auto;
    padding-inline: 6px;
    margin-inline: 6px;
  }

  /* Slightly smaller typography to reduce expansion height */
  .navGroup > summary{
    font-size: 1.18rem !important;
    padding: 14px 10px !important;
  }

  .navDrop a{
    font-size: 1.06rem !important;
    padding: 12px 12px !important;
  }

  /* Optional: keep scrollbar space stable */
  .navDrawer{
    scrollbar-gutter: stable;
  }
}

/* --- Mobile drawer: FORCE it to slide in from the RIGHT in RTL --- */
@media (max-width: 900px){
  html[dir="rtl"] .siteHeader .nav{
    right: 0 !important;
    left: auto !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;

    /* closed state: keep it fully off-screen to the right */
    transform: translateX(110%) !important;
  }

  /* open state (support both toggles): header.navOpen OR body.menuOpen */
  html[dir="rtl"] .siteHeader.navOpen .nav,
  html[dir="rtl"] body.menuOpen .siteHeader .nav,
  html[dir="rtl"] body.menuopen .siteHeader .nav{
    transform: translateX(0) !important;
  }

  /* (optional) ensure drawer content is RTL aligned */
  html[dir="rtl"] .siteHeader .nav{
    direction: rtl;
    text-align: right;
  }
}

/* --- HARD override: drawer must be RIGHT-anchored (even if other CSS sets left:0) --- */
@media (max-width: 920px){
  html[dir="rtl"] #siteHeader.siteHeader .nav{
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;

    right: 0 !important;
    left: auto !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;

    width: min(320px, 86vw) !important;
    transform: translateX(110%) !important; /* closed */
    transition: transform .25s ease !important;
  }

  html[dir="rtl"] body.menuOpen #siteHeader.siteHeader .nav,
  html[dir="rtl"] body.menuopen #siteHeader.siteHeader .nav{
    transform: translateX(0) !important; /* open */
  }

  /* If any rule tries to open via left positioning, neutralize it */
  html[dir="rtl"] body.menuOpen #siteHeader.siteHeader .nav,
  html[dir="rtl"] body.menuopen #siteHeader.siteHeader .nav{
    right: 0 !important;
    left: auto !important;
  }
}

/* =========================================================
   Galaxy S9 / Android Chrome drawer "jump" fix
   - The drawer scroller is .siteHeader .nav (NOT .navDrawer)
   - Disable scroll anchoring + keep open panels scrolling internally
   ========================================================= */
@media (max-width: 920px){
  /* Prevent Chrome scroll-anchoring from jumping when <details> opens */
  .siteHeader .nav,
  .siteHeader .nav *{
    overflow-anchor: none !important;
  }

  /* Keep the drawer stable and contain overscroll */
  .siteHeader .nav{
    overscroll-behavior: contain;
    scroll-behavior: auto;
  }

  /* Make opened panels scroll INSIDE instead of pushing the whole list */
  .siteHeader .navGroup[open] > .navDrop{
    max-height: 36vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: auto;
    padding-inline: 6px;
    margin-inline: 6px;
  }

  /* Fix accidental centered text in mobile drawer */
  .siteHeader .nav a{
    text-align: right !important;
    justify-content: flex-start !important;
  }

  /* Slightly reduce sizes to minimize expansion height */
  .siteHeader .navGroup > summary{
    font-size: 1.16rem !important;
    padding: 14px 10px !important;
  }
  .siteHeader .navDrop a{
    font-size: 1.05rem !important;
    padding: 12px 12px !important;
  }
}

/* --- Mobile drawer: dropdown panels must be IN-FLOW (fix "opens on the left") --- */
@media (max-width: 920px){
  /* Header fragment has desktop dropdown styles (position:absolute). Override for mobile. */
  #siteHeader .navGroup{ position: static !important; }
  #siteHeader .navDrop{
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Make dropdown links a single clean row (icon + text + arrow), RTL-friendly */
  #siteHeader .navDrop a{
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  #siteHeader .navDrop a::after{
    margin-inline-start: auto !important; /* push arrow to the left edge in RTL */
  }
}

/* =========================================================
   FINAL mobile dropdown fix (prevents submenu opening "outside" the drawer)
   Applies to your real structure: #siteHeader .nav > details.navGroup > .navDrop
   ========================================================= */
@media (max-width: 920px){
  /* Drawer container should clip sideways overflow */
  #siteHeader .nav{
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Ensure each group is a full-width block row */
  #siteHeader details.navGroup{
    display: block !important;
    width: 100% !important;
    position: static !important;
  }

  /* Summary should be a full-width "row button" */
  #siteHeader details.navGroup > summary{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #siteHeader details.navGroup > summary::-webkit-details-marker{ display:none; }

  /* The dropdown must be in-flow and visible when the group is open */
  #siteHeader details.navGroup > .navDrop{
    display: none !important; /* closed */
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #siteHeader details.navGroup[open] > .navDrop{
    display: grid !important; /* open */
  }

  /* Kill desktop hover behavior on mobile (can cause weird positioning) */
  #siteHeader .navGroup:hover > .navDrop,
  #siteHeader .navGroup:focus-within > .navDrop{
    position: static !important;
  }
}

/* =========================================================
   Mobile drawer fixes for the REAL element: nav.kbwgDrawerNav
   - Prevent submenu "splitting" to the left (force in-flow)
   - Prevent Android/Galaxy scroll-jump when opening sections
   - Hide accidental duplicate drawer navs if injected twice
   ========================================================= */
@media (max-width: 920px){
  /* If the drawer nav is duplicated, hide the later one */
  nav.kbwgDrawerNav + nav.kbwgDrawerNav{
    display: none !important;
  }

  /* Make the drawer a stable scroll container */
  nav.kbwgDrawerNav{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    direction: rtl;
    text-align: right;
    contain: layout paint;
    scrollbar-gutter: stable;
  }

  /* Disable scroll anchoring inside the drawer to stop "jumping" */
  nav.kbwgDrawerNav,
  nav.kbwgDrawerNav *{
    overflow-anchor: none !important;
  }

  /* --- Dropdown behavior: keep panels IN-FLOW (do NOT override visibility rules) --- */
  nav.kbwgDrawerNav details.navGroup{
    position: static !important;
    display: block !important;
    width: 100% !important;
  }
  nav.kbwgDrawerNav details.navGroup > summary{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scroll-margin-top: 90px;
  }
  nav.kbwgDrawerNav details.navGroup > summary::-webkit-details-marker{ display:none; }

  nav.kbwgDrawerNav details.navGroup > .navDrop{
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Neutralize desktop hover/focus dropdown triggers on mobile */
  nav.kbwgDrawerNav .navGroup:hover > .navDrop,
  nav.kbwgDrawerNav .navGroup:focus-within > .navDrop{
    position: static !important;
    transform: none !important;
  }
}@media (max-width: 920px){
  /* v3: do NOT hide a second injected drawer nav (it can appear when menu updates) */
  nav.kbwgDrawerNav + nav.kbwgDrawerNav{
    display: flex !important;
  }
}

@media (max-width: 920px){
  /* v3: Any dropdown/flyout inside the drawer must stay inside the drawer */
  nav.kbwgDrawerNav .navDrop,
  nav.kbwgDrawerNav .navDropdown,
  nav.kbwgDrawerNav .dropdown,
  nav.kbwgDrawerNav [class*="Drop"],
  nav.kbwgDrawerNav [class*="dropdown"],
  nav.kbwgDrawerNav [class*="flyout"]{
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep everything within drawer width so nothing can render "on the left" */
  nav.kbwgDrawerNav *{
    max-width: 100%;
  }
}

/* KBWG FIX v7: deals cards + drawer nav */
/* Deals page: ensure card backgrounds include all text (mobile especially) */
.page-deals .dealsGrid{ align-items:stretch; }
.page-deals .dealCard{
  display:flex !important;
  flex-direction:column !important;
  height:100%;
  overflow:hidden; /* keep rounded corners consistent */
}
.page-deals .dealMedia{ flex:0 0 auto; }
.page-deals .dealTop{ flex:0 0 auto; }
.page-deals .dealMeta{ flex:0 0 auto; }
.page-deals .dealCta{ margin-top:auto; }

/* Prevent long text from “spilling” visually */
.page-deals .dealName{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.page-deals .dealWhy{ 
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* Mobile drawer nav: make dropdowns work even after JS moves the nav into <body> */
@media (max-width: 920px){
  nav.kbwgDrawerNav{
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 90px;
  }

  /* Hide dropdown by default, show only when <details> is open */
  nav.kbwgDrawerNav details.navGroup > .navDrop{
    display:none !important;
    position:static !important;
    inset:auto !important;
    transform:none !important;
    margin: 8px 0 12px !important;
    padding: 6px !important;
    width: 100% !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
  }
  nav.kbwgDrawerNav details.navGroup[open] > .navDrop{ display:grid !important; }

  /* Keep items readable & aligned RTL */
  nav.kbwgDrawerNav a{
    justify-content:flex-start !important;
    text-align:right !important;
  }
}
/* /KBWG FIX v7 */


/* KBWG FIX v8: iPhone deals card overflow (keep text inside the card) */
.page-deals .dealCard{
  height: auto !important;      /* override previous height:100% */
  min-height: 0 !important;
  align-self: stretch;
  box-sizing: border-box;
}

/* Let flex children shrink (prevents long words from spilling outside) */
.page-deals .dealTop,
.page-deals .dealBrandRow,
.page-deals .dealBrandRow > div{
  min-width: 0;
}

/* Strong wrapping rules for long Latin words / URLs */
.page-deals .dealBrand,
.page-deals .dealName,
.page-deals .pMetaPill{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Extra safety: keep the card background covering all content */
.page-deals .dealCard > *{
  width: 100%;
}


/* ---------------------------------------------------------
   KBWG Weglot visibility guard
   If you hid the default floating widget via Weglot "Custom CSS",
   use :not(.kbwgWeglotMounted) so the header-mounted one still shows.
   --------------------------------------------------------- */
#siteHeader .langSlot .kbwgWeglotMounted,
#siteHeader .langSlot .kbwgWeglotMounted *{
  visibility: visible !important;
  opacity: 1 !important;
}

/* If Weglot custom CSS used display:none !important on the default containers,
   this makes the mounted one show when inside the header slot. */
#siteHeader .langSlot .weglot-container.kbwgWeglotMounted,
#siteHeader .langSlot #wg-switcher-container.kbwgWeglotMounted,
#siteHeader .langSlot #wg-switcher.kbwgWeglotMounted,
#siteHeader .langSlot .wg-default.kbwgWeglotMounted,
#siteHeader .langSlot .wg-drop.kbwgWeglotMounted{
  display: inline-flex !important;
}
/* DEALS: make the product images much smaller */
.page-deals .dealCard > a.dealMedia{
  width: 80px !important;        /* <-- change this (60–110) */
  max-width: 80px !important;
  margin-inline: auto !important; /* keep it centered */
}

/* Make sure the image fills the smaller box nicely */
.page-deals .dealMedia{ aspect-ratio: 1 / 1; }
.page-deals .dealImg{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* use 'contain' if you hate cropping */
}

/* Even smaller on phones */
@media (max-width: 720px){
  .page-deals .dealCard > a.dealMedia{
    width: 64px !important;
    max-width: 64px !important;
  }
}
/* DEALS: discount badge as a corner sticker (top-left, angled) */
.page-deals .dealCard { 
  position: relative; 
  overflow: visible;      /* lets the sticker “hang” a bit */
}

.page-deals .dealBadge{
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;     /* physical left even on RTL */
  right: auto !important;
  width: auto !important;    /* stop it becoming a full-width bar */
  max-width: none !important;

  background: #22c55e !important;  /* green */
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;

  transform: rotate(-12deg) !important;  /* “bending/angled” look */
  transform-origin: top left !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  z-index: 50 !important;
  pointer-events: none; /* so it doesn't block clicks */
}

/* Optional: tiny “fold” triangle */
.page-deals .dealBadge::after{
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #00B853 transparent transparent;
}