*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh}
img{max-width:100%}
:root{--hdr-h:64px;--sbar-h:58px;--green:#4CAF50;--green-dark:#388E3C;--bg:#f2f2f7;--card:#fff;--surface:#f5f5f5;--text:#1a1a1a;--text2:#666;--text3:#757575;--border:#e8e8e8}
html[data-theme="dark"]{--bg:#121212;--card:#1e1e1e;--surface:#2a2a2a;--text:#ececec;--text2:#b8b8b8;--text3:#8e8e8e;--border:#333;color-scheme:dark}
/* Header */
.hdr{background:#2E7D32;box-sizing:border-box;height:var(--hdr-h);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.hdr .logo{display:flex;align-items:center;gap:8px}
.hdr .logo img{width:32px;height:32px;border-radius:50%;background:#fff}
.hdr .logo span{color:#fff;font-size:18px;font-weight:700}
.hdr .cbtn{background:rgba(255,255,255,.2);border:none;color:#fff;padding:5px 12px;border-radius:20px;font-size:12px;display:flex;align-items:center;gap:4px;cursor:pointer}
.hdr .cbtn img{width:20px;height:14px;border-radius:2px}
/* Search */
.sbar{overflow:hidden;box-sizing:border-box;padding:10px 16px;background:var(--card);position:sticky;top:var(--hdr-h);height:var(--sbar-h);z-index:99}
.sbar input{width:100%;padding:10px 14px 10px 36px;border:1px solid var(--border);border-radius:25px;font-size:14px;outline:none;color:var(--text);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999'%3E%3Cpath d='M11.7 10.3a6 6 0 10-1.4 1.4l4 4a1 1 0 001.4-1.4l-4-4zM2 7a5 5 0 1110 0A5 5 0 012 7z'/%3E%3C/svg%3E") 12px center no-repeat}
.sbar input:focus{border-color:var(--green);background-color:var(--card)}
/* Tabs */
.tabs{display:flex;background:var(--card);border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;position:sticky;top:calc(var(--hdr-h) + var(--sbar-h));z-index:99}
.tabs .t{flex:1;padding:11px 8px;font-size:13px;color:var(--text2);text-align:center;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer;font-weight:500;transition:all .2s}
.tabs .t.on{color:var(--green);border-bottom-color:var(--green);font-weight:700}
/* Category chips */
.cats{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);margin-bottom:6px}
.cats::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;background:var(--surface);border-radius:20px;font-size:12px;white-space:nowrap;cursor:pointer;transition:all .2s;border:1px solid transparent}
.chip.on{background:var(--green);color:#fff;border-color:var(--green-dark)}
/* Section */
.sec{padding:10px 16px 4px;font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.sec .sectitle{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec small{flex:0 0 auto;margin-inline-start:8px;white-space:nowrap;color:var(--green);font-size:12px;font-weight:500;cursor:pointer}
/* Offers Grid */
.ogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:8px 16px 16px}
/* Retailer Grid */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 16px 16px}
.rcard{background:var(--card);border-radius:14px;padding:14px 8px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:pointer;transition:transform .15s;position:relative}
.rcard:active{transform:scale(.96)}
.rcard img{width:56px;height:56px;object-fit:contain;border-radius:10px}
.rcard .nm{font-size:11px;margin-top:6px;color:var(--text);line-height:1.3;height:30px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rcard .fav{position:absolute;top:6px;right:6px;font-size:16px;cursor:pointer;opacity:.4}
.rcard .fav.liked{opacity:1;color:#e53e3e}
/* Flyer Cards */
.flist{padding:0 16px 90px}
.fcard{background:var(--card);border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.07);cursor:pointer;transition:transform .15s}
.fcard:active{transform:scale(.98)}
.fcard .cover{width:100%;height:160px;object-fit:cover;background:var(--surface);display:block}
.fcard .info{padding:10px 14px;display:flex;align-items:center;gap:10px}
.fcard .info img{width:40px;height:40px;border-radius:10px;object-fit:contain;border:1px solid var(--border);background:#fff}
.fcard .info .det{flex:1}
.fcard .info .det .nm{font-size:14px;font-weight:600}
.fcard .info .det .sub{font-size:11px;color:var(--text3);margin-top:2px}
.fcard .info .fav{font-size:20px;cursor:pointer;opacity:.3}
.fcard .info .fav.liked{opacity:1;color:#e53e3e}
.fcard .fover{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 8px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.74));color:#fff;pointer-events:none}
.fcard .fover .ft{font-size:14px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fcard .fover .fd{display:flex;justify-content:space-between;gap:8px;font-size:11px;margin-top:2px}
.fcard .fstores{display:block;width:calc(100% - 20px);margin:8px 10px 10px;background:var(--green);color:#fff;border:none;padding:9px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer}
/* Flyer Viewer (fullscreen): swipe pager, tappable products, page grid, more menu */
.viewer{position:fixed;top:0;left:0;right:0;bottom:0;background:#111;z-index:500;display:none;flex-direction:column}
.viewer.show{display:flex}
.viewer .vhdr{background:linear-gradient(90deg,#0b6a8a,#1f9a7a);padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px;display:flex;align-items:center;gap:6px;position:absolute;top:0;left:0;right:0;z-index:10;color:#fff}
.viewer .vbtn{background:transparent;border:none;color:#fff;font-size:21px;line-height:1;width:38px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.viewer .vlogo{height:32px;max-width:48px;object-fit:contain;background:#fff;border-radius:4px;flex:none}
.viewer .vtitle{flex:1;font-size:15px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpager{position:absolute;top:0;bottom:48px;left:0;right:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;direction:ltr;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
.vpager::-webkit-scrollbar{display:none}
.vpager.vlocked{overflow-x:hidden;scroll-snap-type:none}
.vslide{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;overflow-x:hidden;padding-top:calc(56px + env(safe-area-inset-top,0px));box-sizing:border-box;touch-action:pan-x pan-y;background:#f3f3f3}
.vslide.zoomed{overflow:auto}
.vwrap{position:relative;width:100%;min-height:50vh}
.vimg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.vspots{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.vhs{position:absolute;background:transparent;border:0;padding:0;margin:0;cursor:pointer;pointer-events:auto;border-radius:6px}
.vhs:active{background:rgba(255,235,59,.35)}
.vfoot{position:absolute;bottom:0;left:0;right:0;height:48px;background:#fff;display:flex;align-items:center;gap:12px;padding:0 16px calc(0px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 8px rgba(0,0,0,.2);z-index:10;direction:ltr}
.vfoot input[type=range]{flex:1;accent-color:#0b6a8a;min-width:0}
.vfoot #vPageLbl{font-size:15px;font-weight:700;color:#0b4a63;white-space:nowrap}
.vgrid{display:none;position:absolute;top:0;bottom:0;left:0;right:0;z-index:20;background:linear-gradient(#cfe6ec,#e8f1f3);overflow-y:auto;padding:calc(64px + env(safe-area-inset-top,0px)) 12px 16px;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:12px;align-content:start}
.vgrid.show{display:grid}
.vgcell{position:relative;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer;border:3px solid transparent}
.vgcell.on{border-color:#0b6a8a}
.vgcell img{display:block;width:100%;height:auto;min-height:120px;background:#eee}
.vgnum{position:absolute;right:8px;bottom:8px;background:rgba(40,40,40,.75);color:#fff;font-weight:800;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:16px}
.vgcnt{position:absolute;left:8px;bottom:8px;background:#e53935;color:#fff;font-weight:700;border-radius:10px;padding:2px 8px;font-size:11px}
.viewer .vhdr{z-index:30}
.vmenu{display:none;position:absolute;top:0;bottom:0;left:0;right:0;z-index:40;background:rgba(0,0,0,.5);align-items:flex-end}
.vmenu.show{display:flex}
.vmsheet{width:100%;background:#fff;border-radius:16px 16px 0 0;padding:8px 0 calc(12px + env(safe-area-inset-bottom,0px));color:#222}
.vmitem{display:flex;align-items:center;gap:18px;padding:18px 22px;font-size:17px;cursor:pointer}
.vmitem span:first-child{width:26px;text-align:center;font-size:20px;color:#555}
.vmitem .tsw{margin-inline-start:auto}
@media (prefers-color-scheme:dark){.vmsheet{background:#1e1e1e;color:#eee}.vmitem span:first-child{color:#bbb}}
:root[data-theme="dark"] .vmsheet{background:#1e1e1e;color:#eee}
/* Retailer Detail Page */
.rdetail{display:none}
.rdetail.show{display:block}
.rdetail .rhdr{background:var(--green);padding:16px;display:flex;align-items:center;gap:12px}
.rdetail .rhdr .back{color:#fff;font-size:22px;cursor:pointer}
.rdetail .rhdr img{width:50px;height:50px;border-radius:12px;background:#fff;object-fit:contain}
.rdetail .rhdr .rname{color:#fff;font-size:18px;font-weight:700}
/* Bottom Nav */
.bnav{position:fixed;bottom:0;left:0;right:0;background:var(--card);display:flex;justify-content:space-around;padding:6px 0 env(safe-area-inset-bottom,8px);border-top:1px solid var(--border);z-index:100}
.bnav .ni{flex:1;min-height:46px;text-align:center;font-size:10px;color:var(--text3);cursor:pointer;padding:2px 0}
.bnav .ni.on{color:var(--green)}
.bnav .ni .ic{font-size:20px;margin-bottom:1px}
/* Modal */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:300;display:none;align-items:flex-end;justify-content:center}
.modal.show{display:flex}
.modal .sheet{background:var(--card);color:var(--text);border-radius:20px 20px 0 0;width:100%;max-height:70vh;overflow-y:auto;animation:slideUp .3s}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal .sheet .mhdr{padding:16px;border-bottom:1px solid var(--border);font-size:17px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.modal .sheet .mhdr .cls{font-size:20px;color:#666;cursor:pointer}
.clist{padding:4px 0}
.citem{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .15s}
.citem:active{background:var(--surface)}
.citem img{width:30px;height:20px;border-radius:3px}
.citem .cn{font-size:15px}
.citem .ca{font-size:12px;color:var(--text3)}
/* Loading & Empty */
.loading{text-align:center;padding:60px 20px;color:var(--text3)}
.loading .sp{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:60px 20px;color:var(--text3)}
.empty .eicon{font-size:48px;margin-bottom:12px}
/* Search results */
.sresults{padding:0 16px 90px}
.sresult{background:var(--card);border-radius:12px;padding:12px;margin-bottom:8px;display:flex;align-items:center;gap:12px;cursor:pointer}
.sresult img{width:44px;height:44px;border-radius:10px;object-fit:contain;border:1px solid var(--border);background:#fff}
.sresult .sinfo .sn{font-size:14px;font-weight:600}
.sresult .sinfo .st{font-size:11px;color:var(--text3)}
.dritem{padding:14px 18px;font-size:14px;color:var(--text);cursor:pointer;border-bottom:1px solid var(--border)}
.dritem:hover{background:var(--surface)}
.modal#offerModal.show{display:flex !important}
/* ── RTL ── set by applyLanguage(); only the hard-coded sides need overriding,
flex and grid mirror themselves once dir=rtl is on the root. */
html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .chips,html[dir="rtl"] .tabs,html[dir="rtl"] .bnav{direction:rtl}
html[dir="rtl"] .search input{padding-right:44px;padding-left:14px}
html[dir="rtl"] .search .si{right:14px;left:auto}
html[dir="rtl"] .sinfo{text-align:right}
html[dir="rtl"] .ocard .disc,html[dir="rtl"] .badge{right:auto;left:8px}
/* Prices, per-kg figures and counts stay left-to-right inside Arabic text,
otherwise "SAR 19.99/kg" renders with the parts reversed. */
html[dir="rtl"] .price,html[dir="rtl"] .ppu,html[dir="rtl"] .cnt,
html[dir="rtl"] .num,html[dir="rtl"] #offersCount,html[dir="rtl"] #searchCount,
html[dir="rtl"] #offersSentinel,html[dir="rtl"] .sc{direction:ltr;unicode-bidi:embed;display:inline-block}
/* Counts read "30 of 200". Left to the RTL flow that paints as "of 200 30",
which is exactly the kind of scrambled number the client keeps reporting. */
/* ── Dark-mode switch in the menu ── */
.tsw{margin-inline-start:auto;width:40px;height:22px;border-radius:11px;background:#bbb;position:relative;transition:background .2s;flex:none}
.tsw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tsw.on{background:var(--green)}
.tsw.on i{transform:translateX(18px)}
html[dir="rtl"] .tsw i{left:auto;right:2px}
html[dir="rtl"] .tsw.on i{transform:translateX(-18px)}
/* ── Dark theme ──
Most of the interface paints its colours inline (cards, chips, tags), so the
values below are matched by attribute and replaced. Product and flyer images
are never touched; retailer logos (![]()
) keep their white backing. */
html[data-theme="dark"] .hdr{background:#25492a}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background-color:var(--surface);color:var(--text);border-color:var(--border)}
html[data-theme="dark"] ::placeholder{color:#8e8e8e}
html[data-theme="dark"] .sbar input{background-color:var(--surface)}
html[data-theme="dark"] #drawer{box-shadow:2px 0 10px rgba(0,0,0,.6)}
html[data-theme="dark"] :not(img)[style*="background:#fff;" i],
html[data-theme="dark"] :not(img)[style*="background:#fff " i],
html[data-theme="dark"] :not(img)[style*="background:#fff!" i],
html[data-theme="dark"] :not(img)[style$="background:#fff" i],
html[data-theme="dark"] :not(img)[style*="background: #fff;" i],
html[data-theme="dark"] :not(img)[style*="background: #fff " i],
html[data-theme="dark"] :not(img)[style$="background: #fff" i]{background:var(--card) !important}
html[data-theme="dark"] :not(img)[style*="background:#ffffff;" i],
html[data-theme="dark"] :not(img)[style*="background:#ffffff " i],
html[data-theme="dark"] :not(img)[style*="background:#ffffff!" i],
html[data-theme="dark"] :not(img)[style$="background:#ffffff" i],
html[data-theme="dark"] :not(img)[style*="background: #ffffff;" i],
html[data-theme="dark"] :not(img)[style*="background: #ffffff " i],
html[data-theme="dark"] :not(img)[style$="background: #ffffff" i]{background:var(--card) !important}
html[data-theme="dark"] :not(img)[style*="background:#fafafa;" i],
html[data-theme="dark"] :not(img)[style*="background:#fafafa " i],
html[data-theme="dark"] :not(img)[style*="background:#fafafa!" i],
html[data-theme="dark"] :not(img)[style$="background:#fafafa" i],
html[data-theme="dark"] :not(img)[style*="background: #fafafa;" i],
html[data-theme="dark"] :not(img)[style*="background: #fafafa " i],
html[data-theme="dark"] :not(img)[style$="background: #fafafa" i]{background:var(--card) !important}
html[data-theme="dark"] :not(img)[style*="background:#f9f9f9;" i],
html[data-theme="dark"] :not(img)[style*="background:#f9f9f9 " i],
html[data-theme="dark"] :not(img)[style*="background:#f9f9f9!" i],
html[data-theme="dark"] :not(img)[style$="background:#f9f9f9" i],
html[data-theme="dark"] :not(img)[style*="background: #f9f9f9;" i],
html[data-theme="dark"] :not(img)[style*="background: #f9f9f9 " i],
html[data-theme="dark"] :not(img)[style$="background: #f9f9f9" i]{background:var(--card) !important}
html[data-theme="dark"] :not(img)[style*="background:#f8f8f8;" i],
html[data-theme="dark"] :not(img)[style*="background:#f8f8f8 " i],
html[data-theme="dark"] :not(img)[style*="background:#f8f8f8!" i],
html[data-theme="dark"] :not(img)[style$="background:#f8f8f8" i],
html[data-theme="dark"] :not(img)[style*="background: #f8f8f8;" i],
html[data-theme="dark"] :not(img)[style*="background: #f8f8f8 " i],
html[data-theme="dark"] :not(img)[style$="background: #f8f8f8" i]{background:var(--surface) !important}
html[data-theme="dark"] :not(img)[style*="background:#f5f5f5;" i],
html[data-theme="dark"] :not(img)[style*="background:#f5f5f5 " i],
html[data-theme="dark"] :not(img)[style*="background:#f5f5f5!" i],
html[data-theme="dark"] :not(img)[style$="background:#f5f5f5" i],
html[data-theme="dark"] :not(img)[style*="background: #f5f5f5;" i],
html[data-theme="dark"] :not(img)[style*="background: #f5f5f5 " i],
html[data-theme="dark"] :not(img)[style$="background: #f5f5f5" i]{background:var(--surface) !important}
html[data-theme="dark"] :not(img)[style*="background:#f0f0f0;" i],
html[data-theme="dark"] :not(img)[style*="background:#f0f0f0 " i],
html[data-theme="dark"] :not(img)[style*="background:#f0f0f0!" i],
html[data-theme="dark"] :not(img)[style$="background:#f0f0f0" i],
html[data-theme="dark"] :not(img)[style*="background: #f0f0f0;" i],
html[data-theme="dark"] :not(img)[style*="background: #f0f0f0 " i],
html[data-theme="dark"] :not(img)[style$="background: #f0f0f0" i]{background:var(--surface) !important}
html[data-theme="dark"] :not(img)[style*="background:#f2f2f7;" i],
html[data-theme="dark"] :not(img)[style*="background:#f2f2f7 " i],
html[data-theme="dark"] :not(img)[style*="background:#f2f2f7!" i],
html[data-theme="dark"] :not(img)[style$="background:#f2f2f7" i],
html[data-theme="dark"] :not(img)[style*="background: #f2f2f7;" i],
html[data-theme="dark"] :not(img)[style*="background: #f2f2f7 " i],
html[data-theme="dark"] :not(img)[style$="background: #f2f2f7" i]{background:var(--bg) !important}
html[data-theme="dark"] :not(img)[style*="background:#eef;" i],
html[data-theme="dark"] :not(img)[style*="background:#eef " i],
html[data-theme="dark"] :not(img)[style*="background:#eef!" i],
html[data-theme="dark"] :not(img)[style$="background:#eef" i],
html[data-theme="dark"] :not(img)[style*="background: #eef;" i],
html[data-theme="dark"] :not(img)[style*="background: #eef " i],
html[data-theme="dark"] :not(img)[style$="background: #eef" i]{background:#26293d !important}
html[data-theme="dark"] :not(img)[style*="background:#e8f5e9;" i],
html[data-theme="dark"] :not(img)[style*="background:#e8f5e9 " i],
html[data-theme="dark"] :not(img)[style*="background:#e8f5e9!" i],
html[data-theme="dark"] :not(img)[style$="background:#e8f5e9" i],
html[data-theme="dark"] :not(img)[style*="background: #e8f5e9;" i],
html[data-theme="dark"] :not(img)[style*="background: #e8f5e9 " i],
html[data-theme="dark"] :not(img)[style$="background: #e8f5e9" i]{background:#1f3a23 !important}
html[data-theme="dark"] :not(img)[style*="background:#e3f2fd;" i],
html[data-theme="dark"] :not(img)[style*="background:#e3f2fd " i],
html[data-theme="dark"] :not(img)[style*="background:#e3f2fd!" i],
html[data-theme="dark"] :not(img)[style$="background:#e3f2fd" i],
html[data-theme="dark"] :not(img)[style*="background: #e3f2fd;" i],
html[data-theme="dark"] :not(img)[style*="background: #e3f2fd " i],
html[data-theme="dark"] :not(img)[style$="background: #e3f2fd" i]{background:#14304a !important}
html[data-theme="dark"] :not(img)[style*="background:#fff3e0;" i],
html[data-theme="dark"] :not(img)[style*="background:#fff3e0 " i],
html[data-theme="dark"] :not(img)[style*="background:#fff3e0!" i],
html[data-theme="dark"] :not(img)[style$="background:#fff3e0" i],
html[data-theme="dark"] :not(img)[style*="background: #fff3e0;" i],
html[data-theme="dark"] :not(img)[style*="background: #fff3e0 " i],
html[data-theme="dark"] :not(img)[style$="background: #fff3e0" i]{background:#3b2c14 !important}
html[data-theme="dark"] :not(img)[style*="background:#ffebee;" i],
html[data-theme="dark"] :not(img)[style*="background:#ffebee " i],
html[data-theme="dark"] :not(img)[style*="background:#ffebee!" i],
html[data-theme="dark"] :not(img)[style$="background:#ffebee" i],
html[data-theme="dark"] :not(img)[style*="background: #ffebee;" i],
html[data-theme="dark"] :not(img)[style*="background: #ffebee " i],
html[data-theme="dark"] :not(img)[style$="background: #ffebee" i]{background:#3d1f22 !important}
html[data-theme="dark"] :not(img)[style*="color:#333;" i],
html[data-theme="dark"] :not(img)[style*="color:#333 " i],
html[data-theme="dark"] :not(img)[style*="color:#333!" i],
html[data-theme="dark"] :not(img)[style$="color:#333" i],
html[data-theme="dark"] :not(img)[style*="color: #333;" i],
html[data-theme="dark"] :not(img)[style*="color: #333 " i],
html[data-theme="dark"] :not(img)[style$="color: #333" i]{color:#e6e6e6 !important}
html[data-theme="dark"] :not(img)[style*="color:#444;" i],
html[data-theme="dark"] :not(img)[style*="color:#444 " i],
html[data-theme="dark"] :not(img)[style*="color:#444!" i],
html[data-theme="dark"] :not(img)[style$="color:#444" i],
html[data-theme="dark"] :not(img)[style*="color: #444;" i],
html[data-theme="dark"] :not(img)[style*="color: #444 " i],
html[data-theme="dark"] :not(img)[style$="color: #444" i]{color:#d6d6d6 !important}
html[data-theme="dark"] :not(img)[style*="color:#555;" i],
html[data-theme="dark"] :not(img)[style*="color:#555 " i],
html[data-theme="dark"] :not(img)[style*="color:#555!" i],
html[data-theme="dark"] :not(img)[style$="color:#555" i],
html[data-theme="dark"] :not(img)[style*="color: #555;" i],
html[data-theme="dark"] :not(img)[style*="color: #555 " i],
html[data-theme="dark"] :not(img)[style$="color: #555" i]{color:#cfcfcf !important}
html[data-theme="dark"] :not(img)[style*="color:#666;" i],
html[data-theme="dark"] :not(img)[style*="color:#666 " i],
html[data-theme="dark"] :not(img)[style*="color:#666!" i],
html[data-theme="dark"] :not(img)[style$="color:#666" i],
html[data-theme="dark"] :not(img)[style*="color: #666;" i],
html[data-theme="dark"] :not(img)[style*="color: #666 " i],
html[data-theme="dark"] :not(img)[style$="color: #666" i]{color:#bdbdbd !important}
html[data-theme="dark"] :not(img)[style*="color:#777;" i],
html[data-theme="dark"] :not(img)[style*="color:#777 " i],
html[data-theme="dark"] :not(img)[style*="color:#777!" i],
html[data-theme="dark"] :not(img)[style$="color:#777" i],
html[data-theme="dark"] :not(img)[style*="color: #777;" i],
html[data-theme="dark"] :not(img)[style*="color: #777 " i],
html[data-theme="dark"] :not(img)[style$="color: #777" i]{color:#b0b0b0 !important}
html[data-theme="dark"] :not(img)[style*="color:#888;" i],
html[data-theme="dark"] :not(img)[style*="color:#888 " i],
html[data-theme="dark"] :not(img)[style*="color:#888!" i],
html[data-theme="dark"] :not(img)[style$="color:#888" i],
html[data-theme="dark"] :not(img)[style*="color: #888;" i],
html[data-theme="dark"] :not(img)[style*="color: #888 " i],
html[data-theme="dark"] :not(img)[style$="color: #888" i]{color:#a5a5a5 !important}
html[data-theme="dark"] :not(img)[style*="color:#111;" i],
html[data-theme="dark"] :not(img)[style*="color:#111 " i],
html[data-theme="dark"] :not(img)[style*="color:#111!" i],
html[data-theme="dark"] :not(img)[style$="color:#111" i],
html[data-theme="dark"] :not(img)[style*="color: #111;" i],
html[data-theme="dark"] :not(img)[style*="color: #111 " i],
html[data-theme="dark"] :not(img)[style$="color: #111" i]{color:#f2f2f2 !important}
html[data-theme="dark"] :not(img)[style*="color:#1a1a1a;" i],
html[data-theme="dark"] :not(img)[style*="color:#1a1a1a " i],
html[data-theme="dark"] :not(img)[style*="color:#1a1a1a!" i],
html[data-theme="dark"] :not(img)[style$="color:#1a1a1a" i],
html[data-theme="dark"] :not(img)[style*="color: #1a1a1a;" i],
html[data-theme="dark"] :not(img)[style*="color: #1a1a1a " i],
html[data-theme="dark"] :not(img)[style$="color: #1a1a1a" i]{color:#f2f2f2 !important}
html[data-theme="dark"] :not(img)[style*="color:#000;" i],
html[data-theme="dark"] :not(img)[style*="color:#000 " i],
html[data-theme="dark"] :not(img)[style*="color:#000!" i],
html[data-theme="dark"] :not(img)[style$="color:#000" i],
html[data-theme="dark"] :not(img)[style*="color: #000;" i],
html[data-theme="dark"] :not(img)[style*="color: #000 " i],
html[data-theme="dark"] :not(img)[style$="color: #000" i]{color:#f2f2f2 !important}
html[data-theme="dark"] :not(img)[style*="color:#2e7d32;" i],
html[data-theme="dark"] :not(img)[style*="color:#2e7d32 " i],
html[data-theme="dark"] :not(img)[style*="color:#2e7d32!" i],
html[data-theme="dark"] :not(img)[style$="color:#2e7d32" i],
html[data-theme="dark"] :not(img)[style*="color: #2e7d32;" i],
html[data-theme="dark"] :not(img)[style*="color: #2e7d32 " i],
html[data-theme="dark"] :not(img)[style$="color: #2e7d32" i]{color:#81c784 !important}
html[data-theme="dark"] :not(img)[style*="color:#4cb050;" i],
html[data-theme="dark"] :not(img)[style*="color:#4cb050 " i],
html[data-theme="dark"] :not(img)[style*="color:#4cb050!" i],
html[data-theme="dark"] :not(img)[style$="color:#4cb050" i],
html[data-theme="dark"] :not(img)[style*="color: #4cb050;" i],
html[data-theme="dark"] :not(img)[style*="color: #4cb050 " i],
html[data-theme="dark"] :not(img)[style$="color: #4cb050" i]{color:#81c784 !important}
html[data-theme="dark"] :not(img)[style*="color:#1565c0;" i],
html[data-theme="dark"] :not(img)[style*="color:#1565c0 " i],
html[data-theme="dark"] :not(img)[style*="color:#1565c0!" i],
html[data-theme="dark"] :not(img)[style$="color:#1565c0" i],
html[data-theme="dark"] :not(img)[style*="color: #1565c0;" i],
html[data-theme="dark"] :not(img)[style*="color: #1565c0 " i],
html[data-theme="dark"] :not(img)[style$="color: #1565c0" i]{color:#90caf9 !important}
html[data-theme="dark"] :not(img)[style*="color:#1976d2;" i],
html[data-theme="dark"] :not(img)[style*="color:#1976d2 " i],
html[data-theme="dark"] :not(img)[style*="color:#1976d2!" i],
html[data-theme="dark"] :not(img)[style$="color:#1976d2" i],
html[data-theme="dark"] :not(img)[style*="color: #1976d2;" i],
html[data-theme="dark"] :not(img)[style*="color: #1976d2 " i],
html[data-theme="dark"] :not(img)[style$="color: #1976d2" i]{color:#90caf9 !important}
html[data-theme="dark"] :not(img)[style*="color:#e53e3e;" i],
html[data-theme="dark"] :not(img)[style*="color:#e53e3e " i],
html[data-theme="dark"] :not(img)[style*="color:#e53e3e!" i],
html[data-theme="dark"] :not(img)[style$="color:#e53e3e" i],
html[data-theme="dark"] :not(img)[style*="color: #e53e3e;" i],
html[data-theme="dark"] :not(img)[style*="color: #e53e3e " i],
html[data-theme="dark"] :not(img)[style$="color: #e53e3e" i]{color:#ef9a9a !important}
html[data-theme="dark"] :not(img)[style*="color:#d32f2f;" i],
html[data-theme="dark"] :not(img)[style*="color:#d32f2f " i],
html[data-theme="dark"] :not(img)[style*="color:#d32f2f!" i],
html[data-theme="dark"] :not(img)[style$="color:#d32f2f" i],
html[data-theme="dark"] :not(img)[style*="color: #d32f2f;" i],
html[data-theme="dark"] :not(img)[style*="color: #d32f2f " i],
html[data-theme="dark"] :not(img)[style$="color: #d32f2f" i]{color:#ef9a9a !important}
html[data-theme="dark"] :not(img)[style*="color:#c62828;" i],
html[data-theme="dark"] :not(img)[style*="color:#c62828 " i],
html[data-theme="dark"] :not(img)[style*="color:#c62828!" i],
html[data-theme="dark"] :not(img)[style$="color:#c62828" i],
html[data-theme="dark"] :not(img)[style*="color: #c62828;" i],
html[data-theme="dark"] :not(img)[style*="color: #c62828 " i],
html[data-theme="dark"] :not(img)[style$="color: #c62828" i]{color:#ef9a9a !important}
html[data-theme="dark"] :not(img)[style*="color:#b26a00;" i],
html[data-theme="dark"] :not(img)[style*="color:#b26a00 " i],
html[data-theme="dark"] :not(img)[style*="color:#b26a00!" i],
html[data-theme="dark"] :not(img)[style$="color:#b26a00" i],
html[data-theme="dark"] :not(img)[style*="color: #b26a00;" i],
html[data-theme="dark"] :not(img)[style*="color: #b26a00 " i],
html[data-theme="dark"] :not(img)[style$="color: #b26a00" i]{color:#ffb74d !important}
html[data-theme="dark"] :not(img)[style*="color:#e65100;" i],
html[data-theme="dark"] :not(img)[style*="color:#e65100 " i],
html[data-theme="dark"] :not(img)[style*="color:#e65100!" i],
html[data-theme="dark"] :not(img)[style$="color:#e65100" i],
html[data-theme="dark"] :not(img)[style*="color: #e65100;" i],
html[data-theme="dark"] :not(img)[style*="color: #e65100 " i],
html[data-theme="dark"] :not(img)[style$="color: #e65100" i]{color:#ffb74d !important}
html[data-theme="dark"] :not(img)[style*="color:#f57c00;" i],
html[data-theme="dark"] :not(img)[style*="color:#f57c00 " i],
html[data-theme="dark"] :not(img)[style*="color:#f57c00!" i],
html[data-theme="dark"] :not(img)[style$="color:#f57c00" i],
html[data-theme="dark"] :not(img)[style*="color: #f57c00;" i],
html[data-theme="dark"] :not(img)[style*="color: #f57c00 " i],
html[data-theme="dark"] :not(img)[style$="color: #f57c00" i]{color:#ffb74d !important}
html[data-theme="dark"] [style*="solid #eee;" i],
html[data-theme="dark"] [style*="solid #eee " i],
html[data-theme="dark"] [style$="solid #eee" i],
html[data-theme="dark"] [style*="dashed #eee;" i],
html[data-theme="dark"] [style*="dashed #eee " i],
html[data-theme="dark"] [style$="dashed #eee" i],
html[data-theme="dark"] [style*="solid #ddd;" i],
html[data-theme="dark"] [style*="solid #ddd " i],
html[data-theme="dark"] [style$="solid #ddd" i],
html[data-theme="dark"] [style*="dashed #ddd;" i],
html[data-theme="dark"] [style*="dashed #ddd " i],
html[data-theme="dark"] [style$="dashed #ddd" i],
html[data-theme="dark"] [style*="solid #e0e0e0;" i],
html[data-theme="dark"] [style*="solid #e0e0e0 " i],
html[data-theme="dark"] [style$="solid #e0e0e0" i],
html[data-theme="dark"] [style*="dashed #e0e0e0;" i],
html[data-theme="dark"] [style*="dashed #e0e0e0 " i],
html[data-theme="dark"] [style$="dashed #e0e0e0" i],
html[data-theme="dark"] [style*="solid #f0f0f0;" i],
html[data-theme="dark"] [style*="solid #f0f0f0 " i],
html[data-theme="dark"] [style$="solid #f0f0f0" i],
html[data-theme="dark"] [style*="dashed #f0f0f0;" i],
html[data-theme="dark"] [style*="dashed #f0f0f0 " i],
html[data-theme="dark"] [style$="dashed #f0f0f0" i],
html[data-theme="dark"] [style*="solid #f5f5f5;" i],
html[data-theme="dark"] [style*="solid #f5f5f5 " i],
html[data-theme="dark"] [style$="solid #f5f5f5" i],
html[data-theme="dark"] [style*="dashed #f5f5f5;" i],
html[data-theme="dark"] [style*="dashed #f5f5f5 " i],
html[data-theme="dark"] [style$="dashed #f5f5f5" i],
html[data-theme="dark"] [style*="solid #e8e8e8;" i],
html[data-theme="dark"] [style*="solid #e8e8e8 " i],
html[data-theme="dark"] [style$="solid #e8e8e8" i],
html[data-theme="dark"] [style*="dashed #e8e8e8;" i],
html[data-theme="dark"] [style*="dashed #e8e8e8 " i],
html[data-theme="dark"] [style$="dashed #e8e8e8" i]{border-color:var(--border) !important}
#drawer{background:var(--card);color:var(--text)}
html[data-theme="dark"] :not(img)[style*="background: rgb(255, 255, 255)" i]{background:var(--card) !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(250, 250, 250)" i]{background:var(--card) !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(249, 249, 249)" i]{background:var(--card) !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(248, 248, 248)" i]{background:var(--surface) !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(245, 245, 245)" i]{background:var(--surface) !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(240, 240, 240)" i]{background:var(--surface) !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(242, 242, 247)" i]{background:var(--bg) !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(232, 245, 233)" i]{background:#1f3a23 !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(227, 242, 253)" i]{background:#14304a !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(255, 243, 224)" i]{background:#3b2c14 !important}
html[data-theme="dark"] :not(img)[style*="background: rgb(255, 235, 238)" i]{background:#3d1f22 !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(51, 51, 51)" i]{color:#e6e6e6 !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(85, 85, 85)" i]{color:#cfcfcf !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(102, 102, 102)" i]{color:#bdbdbd !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(119, 119, 119)" i]{color:#b0b0b0 !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(136, 136, 136)" i]{color:#a5a5a5 !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(17, 17, 17)" i]{color:#f2f2f2 !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(26, 26, 26)" i]{color:#f2f2f2 !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(46, 125, 50)" i]{color:#81c784 !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(21, 101, 192)" i]{color:#90caf9 !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(25, 118, 210)" i]{color:#90caf9 !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(229, 62, 62)" i]{color:#ef9a9a !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(211, 47, 47)" i]{color:#ef9a9a !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(198, 40, 40)" i]{color:#ef9a9a !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(230, 81, 0)" i]{color:#ffb74d !important}
html[data-theme="dark"] :not(img)[style*="color: rgb(245, 124, 0)" i]{color:#ffb74d !important}
/* Category tiles: pastel in light mode, same dark card as the store tiles in dark mode */
html[data-theme="dark"] .cattile{background:var(--card) !important}
/* Touch targets: Save buttons were 25px tall, chips 30px. */
button[onclick*="toggleSaveOffer"]{min-height:34px}
/* Offline banner */
#offlineBar{position:fixed;left:0;right:0;bottom:64px;z-index:9999;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;background:#b71c1c;color:#fff;font-size:13px;font-weight:600}
#offlineBar[hidden]{display:none}
#offlineBar button{background:#fff;color:#b71c1c;border:none;border-radius:14px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;min-height:32px}
/* Sort-in-progress loader: same look as the "Loading deals..." screen. */
#sortOverlay{position:fixed;left:0;right:0;bottom:56px;z-index:450;display:none;align-items:center;justify-content:center;background:var(--bg);text-align:center}
/* Header country button: no flag on the main page (the country and city lists keep theirs). */
#cflag{display:none}
/* The fixed bottom tabs covered the last row of every page, cutting off its buttons. */
#mainContent{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* search inside a flyer */
.viewer .vhdr .vtitle{font-size:13px;white-space:normal;line-height:1.15}
.vsearch{display:none;position:absolute;left:0;right:0;top:calc(56px + env(safe-area-inset-top,0px));z-index:25;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3);padding:8px 10px;color:#222}
.vsearch.show{display:block}
.vsrow{display:flex;align-items:center;gap:4px}
.vsrow input{flex:1;min-width:0;border:1px solid #cfd8dc;border-radius:20px;padding:9px 14px;font-size:15px;outline:none}
.vsrow input:focus{border-color:#0b6a8a}
.vsnav{background:#eef3f5;border:none;border-radius:50%;width:34px;height:34px;font-size:18px;line-height:1;cursor:pointer;flex:none;color:#0b4a63}
.vsinfo{font-size:12px;color:#555;padding:5px 4px 0;min-height:16px}
.vhs.hit{outline:3px solid #ffc107;background:rgba(255,235,59,.28)}
.vhs.cur{outline:4px solid #ff5722;background:rgba(255,87,34,.22)}
@media (prefers-color-scheme:dark){.vsearch{background:#1e1e1e;color:#eee}.vsrow input{background:#2a2a2a;color:#eee;border-color:#444}.vsinfo{color:#bbb}.vsnav{background:#333;color:#ddd}}
:root[data-theme="dark"] .vsearch{background:#1e1e1e;color:#eee}
:root[data-theme="dark"] .vsrow input{background:#2a2a2a;color:#eee;border-color:#444}
/* price per kg labels and quick add buttons on flyer products */
.vdeco{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.vtag{position:absolute;margin:4px 0 0 4px;background:rgba(21,101,52,.9);color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:7px;white-space:nowrap;line-height:1.3;pointer-events:none}
.vadd{position:absolute;transform:translateX(-100%);margin:4px 4px 0 0;width:26px;height:26px;border-radius:50%;background:rgba(76,175,80,.92);color:#fff;border:2px solid #fff;font-size:17px;font-weight:700;line-height:1;padding:0;cursor:pointer;pointer-events:auto;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.vadd.on{background:#1b5e20}
.viewer.noshop .vtag,.viewer.noshop .vadd{display:none}
/* report a problem */
.vrsheet{padding:16px 16px calc(14px + env(safe-area-inset-bottom,0px));max-height:90%;overflow-y:auto}
.vrtitle{font-size:17px;font-weight:800;margin:4px 4px 12px}
.vropts{display:flex;flex-direction:column;gap:8px}
.vropt{text-align:start;background:#f3f6f4;border:2px solid transparent;border-radius:12px;padding:12px 14px;font-size:15px;color:inherit;cursor:pointer}
.vropt.on{border-color:#2e7d32;background:#e6f4e8;font-weight:700}
.vrnote{width:100%;margin-top:12px;border:1px solid #cfd8dc;border-radius:12px;padding:10px 12px;font-size:15px;font-family:inherit;resize:none;background:#fff;color:#222}
.vrnote-hint{font-size:11px;color:#777;margin:6px 4px 12px}
.vrbtns{display:flex;gap:10px}
.vrcancel,.vrsend{flex:1;border:none;border-radius:12px;padding:13px;font-size:16px;font-weight:700;cursor:pointer}
.vrcancel{background:#eceff1;color:#333}
.vrsend{background:#2e7d32;color:#fff}
.vrsend:disabled{opacity:.45;cursor:default}
@media (prefers-color-scheme:dark){.vropt{background:#2a2a2a}.vropt.on{background:#1f3a22}.vrnote{background:#2a2a2a;color:#eee;border-color:#444}.vrcancel{background:#333;color:#ddd}}
:root[data-theme="dark"] .vropt{background:#2a2a2a}
:root[data-theme="dark"] .vropt.on{background:#1f3a22}
:root[data-theme="dark"] .vrnote{background:#2a2a2a;color:#eee;border-color:#444}
:root[data-theme="dark"] .vrcancel{background:#333;color:#ddd}
/* Arabic: pages run right to left, arrows mirror, the slider fills from the right */
html[dir="rtl"] .vpager{direction:rtl}
.vslide{direction:ltr}
html[dir="rtl"] .vfoot{direction:rtl}
html[dir="rtl"] .viewer .vbtn.back,html[dir="rtl"] .vsarrow{transform:scaleX(-1)}
/* flyer badges: ends soon / new / selected stores */
.fbadges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;z-index:2;pointer-events:none}
.fb{font-size:11px;font-weight:800;padding:3px 9px;border-radius:10px;color:#fff;line-height:1.25;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.fb-end{background:#f57c00}
.fb-end.today{background:#d32f2f}
.fb-new{background:#2e7d32}
.fb-sel{background:#f57c00;font-weight:700;font-size:10px}
.fbadges.sm{top:5px;left:5px;gap:3px}
.fbadges.sm .fb{font-size:10px;padding:2px 6px;border-radius:8px}
/* shopping list page */
.slt-bar{display:flex;gap:8px;padding:12px 14px 4px;overflow-x:auto}
.slt{flex:1;white-space:nowrap;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:20px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer}
.slt small{opacity:.7;font-weight:600}
.slt.on{background:var(--green);border-color:var(--green);color:#fff}
.sl-wrap{padding:6px 12px 190px}
.sl-top{display:flex;align-items:flex-end;justify-content:space-between;padding:10px 4px 8px}
.sl-title{font-size:22px;font-weight:800}
.sl-count{font-size:13px;color:var(--text3)}
.sl-clear{background:transparent;border:none;color:#e57373;font-size:14px;font-weight:700;cursor:pointer;padding:6px 4px}
.sl-group{background:var(--card);border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.08)}
.sl-ghead{display:flex;align-items:center;gap:10px;padding:10px 12px}
.sl-ghead img{width:46px;height:46px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--border);flex:none}
.sl-gname{flex:1;min-width:0}
.sl-gname .a{font-size:16px;font-weight:800}
.sl-gname .b{font-size:12px;color:var(--text3)}
.sl-gsum{text-align:end;font-size:14px;color:var(--text)}
.sl-gsum s{color:var(--text3);font-size:12px;display:block}
.sl-item{position:relative;overflow:hidden;border-top:1px solid var(--border)}
.sl-del{position:absolute;top:0;bottom:0;inset-inline-end:0;width:88px;background:#d32f2f;color:#fff;border:none;font-size:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.sl-del span{font-size:12px;font-weight:700}
.sl-row{position:relative;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--card);transition:transform .2s;touch-action:pan-y}
.sl-img{width:78px;height:78px;border-radius:10px;object-fit:contain;background:#fff;flex:none;cursor:pointer}
.sl-info{flex:1;min-width:0}
.sl-badges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.slb{font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;background:#eceff1;color:#455a64;white-space:nowrap}
.slb.off{background:#ffebee;color:#c62828}.slb.off.hot{background:#e53935;color:#fff}
.slb.dl{background:#fff3e0;color:#e65100}.slb.exp{background:#eceff1;color:#b71c1c}
.slb.hotdeal{background:#fff8e1;color:#e65100}
.sl-name{font-size:15px;font-weight:700;line-height:1.3;cursor:pointer;overflow-wrap:anywhere}
.sl-unit{font-size:13px;color:var(--text3);margin-top:2px}
.sl-unit s{margin-inline-start:4px}
.sl-unit.nop{font-style:italic}
.sl-qrow{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.sl-step{display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.sl-step button{width:32px;height:32px;border:none;background:var(--surface);color:var(--text);font-size:18px;cursor:pointer}
.sl-step button:disabled{opacity:.35;cursor:default}
.sl-step span{min-width:34px;text-align:center;font-weight:800}
.sl-line{font-size:17px;font-weight:800;color:var(--text)}
.sl-check{width:26px;height:26px;flex:none;border:2px solid #90a4ae;border-radius:7px;background:transparent;color:#fff;font-size:16px;font-weight:900;line-height:1;cursor:pointer;padding:0}
.sl-check.on{background:#2e7d32;border-color:#2e7d32}
.sl-item.done .sl-img,.sl-item.done .sl-info{opacity:.5} /* dim the content only: the row must stay opaque or Delete shows through */
.sl-item.done .sl-name{text-decoration:line-through}
.sl-item.done .sl-unit,.sl-item.done .sl-line{text-decoration:line-through}
.sl-note{font-size:12px;color:#e65100;padding:2px 6px 6px}
.sl-hint{font-size:11px;color:var(--text3);padding:6px 6px 0}
.sl-foot{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -3px 10px rgba(0,0,0,.15)}
.sl-basket{position:relative;text-align:center;font-size:30px;line-height:1;flex:none}
.sl-basket .n{position:absolute;top:-6px;inset-inline-end:-6px;background:#555;color:#fff;font-size:11px;font-weight:800;border-radius:9px;min-width:18px;height:18px;line-height:18px;padding:0 4px}
.sl-basket .t{font-size:11px;color:var(--text3);margin-top:2px}
.sl-sum{flex:1;text-align:end}
.sl-sum .was{font-size:12px;color:var(--text3);text-decoration:line-through}
.sl-sum .tot{font-size:18px;font-weight:700}.sl-sum .tot b{font-size:22px;color:#2e7d32}
.sl-sum .saved{font-size:13px;color:#2e7d32;font-weight:700}
.sl-sum .bought{font-size:11px;color:var(--text3)}
#slUndo{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:#323232;color:#fff;border-radius:24px;padding:10px 10px 10px 18px;display:flex;align-items:center;gap:14px;font-size:14px;font-weight:600;z-index:650;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#slUndo.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
#slUndo button{background:transparent;border:none;color:#81c784;font-size:14px;font-weight:800;cursor:pointer;padding:4px 8px}
.slc-cancel,.slc-go{flex:1;border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:700;cursor:pointer}
.slc-cancel{background:#eceff1;color:#333}.slc-go{background:#d32f2f;color:#fff}
/* sheets: never let a drag inside them move the page behind, and keep form fields in the app's own colours (WebView force-dark otherwise paints them dark on a white sheet) */
:root{color-scheme:light}
body:has(.modal.show){overflow:hidden}
.modal .sheet,#suggestBox{overscroll-behavior:contain}
.modal input{background-color:var(--surface);color:var(--text);border-color:var(--border)}
/* spelling suggestion row and banners */
.dym{border-bottom:1px solid #f0f0f0;background:#f1f8e9;color:#222}
.dym b,.dym>span:first-child{color:#2e7d32}
.sbanner{color:#555}
.sbanner a{color:#1565c0}
html[data-theme="dark"] .dym{background:#1f2d20;color:#e6e6e6;border-bottom-color:#333}
html[data-theme="dark"] .dym b,html[data-theme="dark"] .dym>span:first-child{color:#7bd67f}
html[data-theme="dark"] .sbanner{color:#c8c8c8}
html[data-theme="dark"] .sbanner a{color:#8ab4ff}
/* Accessibility pass: readable contrast, finger-sized tap targets, page structure */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hdr .cbtn{min-height:40px}
.rcard .fav{top:0;right:0;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}
html[dir="rtl"] .rcard .fav{right:auto;left:0}
.fcard .info .fav{padding:10px;margin:-10px}
.tap{display:inline-flex;align-items:center;min-height:40px;padding:0 6px;margin:-8px -6px}
#searchFiltersBar button,.chip{min-height:36px}
/* white text on the brand green needs a darker green to reach a readable contrast */
.chip.on,[style*="background:var(--green);color:#fff"],[style*="background:#4CAF50;color:#fff"]{background:#2E7D32 !important}
html:not([data-theme="dark"]) [style*="color:var(--green)"],html:not([data-theme="dark"]) [style*="color:#4CAF50"]{color:#2E7D32 !important}
/* second accessibility pass */
html:not([data-theme="dark"]) .tabs .t.on,html:not([data-theme="dark"]) .bnav .ni.on,html:not([data-theme="dark"]) .sec small{color:#2E7D32}
.xbtn,.modal .sheet .mhdr .cls{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;margin:-8px;color:#666 !important}
.vadd::after{content:"";position:absolute;inset:-9px;border-radius:50%}
html[data-theme="dark"] .xbtn,html[data-theme="dark"] .modal .sheet .mhdr .cls{color:#bbb !important}
.vadd{background:rgba(46,125,50,.95)}
/* third pass: inline greys, greens and reds that were just under a readable contrast on white */
html:not([data-theme="dark"]) :not(.viewer *)[style*="color:#999"],html:not([data-theme="dark"]) :not(.viewer *)[style*="color:#aaa"],html:not([data-theme="dark"]) :not(.viewer *)[style*="color:#777"]{color:#6b6b6b !important}
html:not([data-theme="dark"]) [style*="color:#4CB050"]{color:#2E7D32 !important}
html:not([data-theme="dark"]) [style*="color:#e53e3e"]{color:#d32f2f !important}
[style*="background:#ff5722"]{background:#d84315 !important}
/* keyboard open: no bottom tab bar over the keys */
body.kb .bnav{display:none}
/* header icons: 44 px tap area (look unchanged) */
.hdr>button:not(.cbtn){min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 !important}
/* shopping list tap targets */
.sl-clear{min-height:40px;padding:6px 8px}
.sl-name{padding:10px 0;margin:-10px 0}
.sl-check{position:relative}
.sl-check::after{content:"";position:absolute;inset:-9px}
/* flyer viewer: shown at once, with a spinner until its pages arrive */
.vload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#ccc;font-size:14px;text-align:center;padding:24px}
.vload .sp{width:34px;height:34px;border:3px solid rgba(255,255,255,.25);border-top-color:#66bb6a;border-radius:50%;animation:spin .8s linear infinite}
.vloadbtn{background:#2E7D32;color:#fff;border:none;border-radius:20px;padding:10px 26px;font-size:14px;font-weight:700;min-height:44px;cursor:pointer}
/* side menu open: the page behind must not move, and drags stay inside the menu */
body:has(#drawerBackdrop[style*="block"]){overflow:hidden}
#drawerBackdrop{touch-action:none;overscroll-behavior:contain}
#drawer{overscroll-behavior:contain}