/*2026-09-29 - Site redesign: the one stylesheet of the new site (architecture 4). Mobile first, steps at 768px and 1024px. Bump __SiteCSSVer__ with every change.*/
/*2026-09-29 - Tokens from SiteRedesign_HomePage.md 1: teal darkened so white text passes 4.5:1, action green, neutral ground.*/
:root{
	--SiteTeal:#15697d;
	--SiteTealDark:#0c4a59;
	/*2026-10-02 - Owner: "the light blue you are using in several places is not the one from the logo" (the כללי tag, the cheaper option's chip and others). --SiteBlue is the logo's own blue, read from the picture's pixels; white text on it is 3.25:1, so it is a line and an accent, never a ground under small text. The tint is now that blue at 20% on white, and each light-blue chip is outlined in the logo's blue.*/
	/*--SiteTealTint:#d7eef3;*/
	--SiteBlue:#309bb1;
	--SiteTealTint:#d6ebef;
	--SiteGreen:#177a3e;
	--SiteGreenDark:#11602f;
	--SiteGround:#eef3f4;
	--SiteText:#13262d;
	--SiteText2:#52666d;
	--SiteLine:#dbe5e8;
	--SiteField:#c9d6da;
	/*2026-09-30 - Owner: the yellow focus frames are not the Pricez look. The keyboard focus ring is the site's teal, and white on the teal areas (the phone header, the hero).*/
	/*--SiteFocus:#f5b400;*/
	--SiteFocus:#15697d;
	--SiteHead:Rubik,Assistant,Arial,sans-serif;
	--SiteBody:Assistant,Arial,sans-serif;
	--SiteBarH:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/*2026-09-29 - --SiteAnchorH is the height of AdSense's bottom anchor ad, set by Site.js; the bottom bar and the page end rise above it.*/
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--SiteGround);color:var(--SiteText);font:400 16px/1.5 var(--SiteBody);padding-bottom:calc(var(--SiteBarH) + env(safe-area-inset-bottom) + var(--SiteAnchorH,0px))}
[hidden]{display:none!important}
main{flex-grow:1;outline:0}
a{color:var(--SiteTeal);text-decoration:none}
a:hover{color:var(--SiteTealDark);text-decoration:underline}
h1,h2,h3{margin:0;font-family:var(--SiteHead);font-weight:700;line-height:1.2}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--SiteFocus);outline-offset:2px}
.SiteSR{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.SiteSkip{position:absolute;top:-100px;right:16px;z-index:300;padding:12px 16px;background:#fff;border-radius:0 0 12px 12px;font-weight:700}
.SiteSkip:focus{top:0}
.SiteNoScroll,.SiteNoScroll body{overflow:hidden}
.SiteIcon{flex-shrink:0}
.SiteSpacer{flex-grow:1}
.SiteWrap{width:100%;max-width:1312px;margin:0 auto;padding:0 16px}

/*2026-09-29 - Buttons: 48px high, so every touch target clears 44px.*/
.SiteBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:12px;font-family:var(--SiteHead);font-weight:700;font-size:17px;text-decoration:none}
.SiteBtn:hover{text-decoration:none}
/*2026-10-02 - Owner: "add is still green" - the new site's buttons are teal. The class keeps its name and takes .SiteBtnTeal's colours, so each of its buttons (new list, login, sign-up, the password pages, add product, the free-text list) turns teal at once.*/
/*.SiteBtnGreen{background:var(--SiteGreen);color:#fff}*/
/*.SiteBtnGreen:hover{background:var(--SiteGreenDark);color:#fff}*/
.SiteBtnGreen{background:var(--SiteTeal);color:#fff}
.SiteBtnGreen:hover{background:var(--SiteTealDark);color:#fff}
.SiteBtnLine{background:#fff;color:var(--SiteText);border:1px solid var(--SiteField)}
.SiteBtnLine:hover{border-color:var(--SiteTeal);color:var(--SiteText)}
.SiteBtn[disabled]{opacity:.7;cursor:progress}

/*2026-09-29 - Header: a teal app bar on phones, a white bar from 1024px (canvas).*/
.SiteHeader{background:var(--SiteTeal);color:#fff}
/*2026-09-30 - A teal ring would vanish on teal: the phone header and the hero (its search box included) ring in white.*/
.SiteHeader,.SiteHero{--SiteFocus:#fff}
/*2026-09-29 - The left 64px stay free under 1024px: the accessibility button (user-a, fixed top-left) sits there and covered the login link.*/
.SiteHeaderIn{display:flex;align-items:center;gap:4px;height:60px;padding:0 8px;padding-inline-end:64px}
.SiteMenuBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 10px;background:none;border:0;border-radius:12px;color:inherit;font-weight:700}
.SiteMenuBtnText{display:none}
/*2026-10-02 - Owner: the real pricez logo, a picture (250x81, blue on a transparent ground), in place of the word in Rubik. 30px high on a phone; the slogan sits at its middle, not on a text baseline. On the teal header and the teal menu head the blue would not show, so the filter draws the same picture in white; where the ground is white (below) it keeps its own blue.*/
/*.SiteBrand{display:flex;align-items:baseline;gap:12px;min-width:0;color:inherit}*/
.SiteBrand{display:flex;align-items:center;gap:12px;min-width:0;color:inherit}
.SiteBrand:hover{color:inherit;text-decoration:none}
/*.SiteLogo{font-family:var(--SiteHead);font-weight:800;font-size:26px;letter-spacing:-.5px;line-height:1}*/
.SiteLogo{display:block;flex:none;width:auto;height:30px;filter:brightness(0) invert(1)}
.SiteSlogan{display:none;font-size:14px;color:var(--SiteText2)}
.SiteHeaderLink{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;height:44px;padding:0 8px;border-radius:12px;color:inherit;font-weight:600}
.SiteHeaderLink:hover{color:inherit}
/*2026-09-29 - Step 7c: the bell's count, a red circle on the bell's top corner; its ring matches the header (teal here, white from 1024px).*/
.SiteBell{position:relative}
.SiteBadge{position:absolute;top:2px;inset-inline-end:2px;min-width:20px;height:20px;padding:0 5px;border:2px solid var(--SiteTeal);border-radius:10px;background:#c62828;color:#fff;font-size:12px;font-weight:700;line-height:16px;text-align:center}
.SiteAvatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
/*2026-10-03 - Queue item 31 (owner: "looks bad"): the help button and the bell take the avatar's look - a 34px tinted circle inside a 44px touch box, a 20px icon - and the avatar's link drops its side padding, so the three circles match.*/
.SiteHeaderRound,.SiteHeaderMe{width:44px;padding:0}
.SiteHeaderRound{position:relative}
.SiteHeaderRound::before{content:'';position:absolute;inset:5px;border-radius:50%;background:rgba(255,255,255,.18)}
.SiteHeaderRound .SiteIcon{position:relative;width:20px;height:20px}
.SiteAccountText{display:none}
.SiteHideMobile{display:none}
/*2026-10-06 - Owner: "on some phones the profile drops a line in the header". The logged-in first row is 8 + 64 (the accessibility button) + 44 menu + 93 logo + 3 x 44 circles + 5 x 4 gaps = 361px, so on a 360px phone the avatar wrapped under the logo. Under 400px the gaps are 2px, the three boxes 40px (the circle inside stays 34px), and the logo 26px high: 327px, one row from 328px up.*/
@media (max-width:399.98px){
	.SiteHeaderIn{gap:2px}
	.SiteHeaderRound,.SiteHeaderMe{width:40px;min-width:40px}
	.SiteHeaderRound::before{inset:3px}
	.SiteLogo{height:26px}
}
.SiteLogin{border:1px solid rgba(255,255,255,.6);padding:0 14px}
/*2026-09-30 - Step 8b: logout is a form button, drawn as the link it replaced.*/
.SiteLogoutBtn{background:none;border:0}
.SiteMenuSmall.SiteLogoutBtn{padding:0}
/*2026-10-02 - Owner: logout is a menu item. The form's button takes the item's whole row and the page's font, as the links beside it.*/
.SiteMenuItem.SiteLogoutBtn{width:100%;font-family:inherit;cursor:pointer}

/*2026-09-29 - Hero with the search. Inputs at 16px+ so iOS does not zoom on focus.*/
.SiteHero{background:var(--SiteTeal);color:#fff;padding:12px 0 72px}
/*2026-10-01 - A guest's home page has no cards over the hero's edge (owner), so the hero keeps no room for them.*/
.SiteHeroFlat{padding-bottom:24px}
.SiteHero h1{font-size:26px}
.SiteHeroSub{margin:8px 0 16px;color:#e3f4f8}
.SiteSearch{display:flex;gap:8px;max-width:900px}
.SiteSearchBox{position:relative;flex-grow:1;min-width:0;display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;background:#fff;border-radius:12px;color:var(--SiteText2)}
.SiteSearchBox:focus-within{outline:3px solid var(--SiteFocus);outline-offset:2px}
.SiteSearchBox input{flex-grow:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--SiteText);font-size:17px;-webkit-appearance:none;appearance:none}
.SiteSearchBtn{flex-shrink:0;height:52px;padding:0 18px;border:0;border-radius:12px;background:#fff;color:var(--SiteTeal);font-family:var(--SiteHead);font-weight:700;font-size:17px}
.SiteSearchBtn:hover{background:#e3f4f8}
.SiteACList{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:50;margin:0;padding:6px;list-style:none;max-height:min(60vh,440px);overflow-y:auto;background:#fff;border-radius:12px;box-shadow:0 12px 32px rgba(19,38,45,.2);color:var(--SiteText)}
.SiteACList li{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 12px;border-radius:8px;line-height:1.3;cursor:pointer}
/*2026-09-29 - The product thumbnail on the right of each suggestion (RTL start).*/
.SiteACList img{flex-shrink:0;width:40px;height:40px;object-fit:contain;border-radius:6px;background:#fff}
/*2026-09-29 - The closing "all results" option: set apart by a rule, in the link colour.*/
.SiteACList li.SiteACAll{justify-content:center;margin-top:4px;border-top:1px solid var(--SiteLine);border-radius:0 0 8px 8px;color:var(--SiteTeal);font-weight:700}
.SiteACList li:hover,.SiteACList li[aria-selected="true"]{background:var(--SiteGround)}
/*2026-10-02 - Owner: an add button in the dropdown. The name takes the row's free width; the row ends in an outlined teal "+" (44px, the card's add button's look) or, for a product already in the list, in the filled "ברשימה" tag of the sale dialog - the two must not look alike.*/
.SiteACName{flex:1 1 auto;min-width:0}
/*2026-10-02 - Owner: the "ברשימה" tag was not centred under the column of "+" buttons - it is wider than a button, so its middle sat to the right of theirs. Both now fill one 66px slot around the same middle: the tag is 66px wide with its text centred, the 44px button has 11px on each side.*/
/*.SiteACAdd{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:2px solid var(--SiteTeal);border-radius:10px;background:#fff;color:var(--SiteTeal);font-size:22px;font-weight:700;line-height:1}*/
.SiteACAdd{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 11px;padding:0;border:2px solid var(--SiteTeal);border-radius:10px;background:#fff;color:var(--SiteTeal);font-size:22px;font-weight:700;line-height:1}
.SiteACAdd:hover{background:var(--SiteTealTint);color:var(--SiteTealDark)}
.SiteACAdd:disabled{opacity:.5;cursor:default}
/*.SiteACIn{flex:none;padding:0 10px;border-radius:999px;background:var(--SiteTeal);color:#fff;font-size:12px;font-weight:700;line-height:24px}*/
.SiteACIn{flex:none;width:66px;padding:0;border-radius:999px;background:var(--SiteTeal);color:#fff;font-size:12px;font-weight:700;line-height:24px;text-align:center}

/*2026-09-29 - Cards pulled up over the hero's edge; two columns from 1024px once step 7 adds the list card.*/
.SiteCards{position:relative;display:grid;gap:16px;margin-top:-52px}
.SiteCard{display:flex;flex-direction:column;gap:12px;padding:18px;background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(19,38,45,.08)}
.SiteCard h2{font-size:19px}
.SiteCardText{margin:0;color:var(--SiteText2)}
.SiteCardActions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.SiteFreeText{display:flex;flex-direction:column;gap:12px}
.SiteFreeText textarea{width:100%;height:150px;resize:vertical;padding:12px;border:1px solid var(--SiteField);border-radius:10px;background:#f8fbfb;font-size:16px;line-height:1.6}
.SiteWait{margin:0;padding:12px 14px;border-radius:10px;background:#e6f4ea;color:var(--SiteGreenDark);font-weight:600}
/*2026-09-29 - Step 7b list card: head row with the list link, the list select, the scopes as a segmented control, the basket button with its accuracy "i", the store row.*/
/*2026-10-03 - The head row and its links wrap, so the "לרשימה" pill never pushes the card wider than a phone.*/
/*.SiteCardHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}*/
.SiteCardHead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.SiteCardHead a{font-weight:600;font-size:15px}
/*2026-10-03 - Owner: on a phone it is hard to see how to reach the list. "לרשימה" is a filled teal pill with the list icon.*/
.SiteCardHead a.SiteCardGo{gap:6px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--SiteTeal);color:#fff;font-weight:700;white-space:nowrap}
.SiteCardHead a.SiteCardGo:hover{background:var(--SiteTealDark);color:#fff;text-decoration:none}
.SiteCardHead a.SiteCardGo:focus-visible{outline:2px solid var(--SiteTealDark);outline-offset:2px}
/*2026-10-03 - Owner: "העברה לחנות אונליין" is a pill too - an outlined one, as in the list bar, so the filled "לרשימה" stays the card's main way to the list.*/
.SiteCardLinks #SiteToStoreBtn{min-height:40px;padding:0 16px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;white-space:nowrap;cursor:pointer}
.SiteCardLinks #SiteToStoreBtn:hover{border-color:var(--SiteTeal);background:var(--SiteTealTint);color:var(--SiteTealDark);text-decoration:none}
.SiteCardLinks #SiteToStoreBtn:focus-visible{outline:2px solid var(--SiteTealDark);outline-offset:2px}
/*2026-09-29 - H3 (owner, 2026-09-29): "רשימה חדשה" beside "לרשימה", and the name field it opens.*/
/*.SiteCardLinks{display:flex;align-items:baseline;gap:16px}*/
.SiteCardLinks{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.SiteCardLinks a,.SiteLinkBtn{display:inline-flex;align-items:center;min-height:44px}
.SiteLinkBtn{padding:0;border:0;background:none;color:var(--SiteTeal);font-weight:600;font-size:15px}
.SiteLinkBtn:hover{color:var(--SiteTealDark);text-decoration:underline}
.SiteNewList{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--SiteGround)}
.SiteNewList label{font-weight:600}
.SiteNewListRow{display:flex;flex-wrap:wrap;gap:8px}
.SiteNewListRow input{flex:1 1 140px;min-width:0;min-height:48px;padding:0 12px;border:1px solid var(--SiteField);border-radius:10px;background:#fff;font-size:16px}
.SiteListSel{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--SiteField);border-radius:10px;background:#fff;font-size:16px}
.SiteListSel[disabled]{opacity:.7;cursor:progress}
/*2026-09-29 - pre-line: CreateShoppingList()'s quota refusal carries line breaks.*/
.SiteListErr{margin:0;color:#b3261e;font-weight:600;font-size:14px;white-space:pre-line}
.SiteBasket{display:flex;flex-direction:column;gap:12px}
.SiteScopes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:4px;border:0;border-radius:10px;background:var(--SiteGround)}
/*2026-09-29 - The radio stays in the page for keyboard and screen readers; the span beside it draws the chosen segment.*/
.SiteScopes label{position:relative;display:flex;cursor:pointer}
.SiteScopes input{position:absolute;opacity:0;width:1px;height:1px}
.SiteScopes span{flex-grow:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 6px;border-radius:8px;text-align:center;font-weight:600;font-size:14px;line-height:1.2}
.SiteScopes input:checked + span{background:#fff;box-shadow:0 1px 3px rgba(19,38,45,.12)}
.SiteScopes input:focus-visible + span{outline:3px solid var(--SiteFocus);outline-offset:2px}
/*2026-09-29 - "רשתות אונליין בלבד" (owner, 2026-09-29): a native checkbox in the site's teal, the whole label a 44px target.*/
.SiteCheck{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;cursor:pointer}
.SiteCheck input{flex-shrink:0;width:22px;height:22px;margin:0;accent-color:var(--SiteTeal)}
.SiteBasketRow{display:flex;align-items:center;gap:8px}
.SiteBasketRow .SiteBtn{flex-grow:1}
.SiteBtnTeal{background:var(--SiteTeal);color:#fff}
.SiteBtnTeal:hover{background:var(--SiteTealDark);color:#fff}
.SiteInfo{flex-shrink:0;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--SiteField);border-radius:50%;background:#fff;color:var(--SiteTeal);font-family:var(--SiteHead);font-weight:700;font-size:18px}
.SiteStoreRow{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;padding-top:8px;border-top:1px solid #e6eef0;font-size:15px}
.SiteStoreName{flex-grow:1;min-width:0}
.SiteStoreRow a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/*2026-09-29 - Categories: 3 across on phones, 4 on tablets, 6 on desktop.*/
.SiteSection{padding-top:24px}
.SiteSection > h2{margin-bottom:12px;font-size:19px}
.SiteCats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.SiteCat{height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;background:#fff;border:1px solid var(--SiteLine);border-radius:14px;color:var(--SiteText);text-align:center;font-weight:600;font-size:14px;line-height:1.25}
.SiteCat:hover{border-color:var(--SiteTeal);color:var(--SiteText);text-decoration:none}
.SiteCatIcon{width:52px;height:52px;border-radius:50%;background:var(--SiteCatBg,#fff);color:var(--SiteCatFg,var(--SiteTeal));display:flex;align-items:center;justify-content:center}
/*2026-10-02 - The logo's blue: the tint and the line come from the tokens, not from two blues of their own.*/
/*.SiteCatAll{justify-content:center;background:#e3f1f4;border-color:#b9dbe3;color:var(--SiteTeal);font-weight:700}*/
/*2026-10-02 - Owner: "it's still d6ebef instead of 309bb1" - the ground itself is the logo's blue, not a tint of it. The text on it is the site's dark text (4.8:1 on this blue; white is 3.25:1 and the dark teal 3:1, both under the 4.5:1 the accessibility statement commits to).*/
/*.SiteCatAll{justify-content:center;background:var(--SiteTealTint);border-color:var(--SiteBlue);color:var(--SiteTeal);font-weight:700}*/
/*.SiteCatAll:hover{color:var(--SiteTeal)}*/
/*2026-10-02 - Owner: "now you need white text" - white on the logo's blue, as the logo's own look. It is 3.25:1, under the 4.5:1 of small text; the owner's decision.*/
/*.SiteCatAll{justify-content:center;background:var(--SiteBlue);border-color:var(--SiteBlue);color:var(--SiteText);font-weight:700}*/
/*.SiteCatAll:hover{border-color:var(--SiteTealDark);color:var(--SiteText)}*/
.SiteCatAll{justify-content:center;background:var(--SiteBlue);border-color:var(--SiteBlue);color:#fff;font-weight:700}
.SiteCatAll:hover{border-color:var(--SiteTealDark);color:#fff}

/*2026-09-30 - The home page's explainer video (owner): in the hero, not a block in the middle of the page. Under 1024px a line under the search (white play circle + text); from 1024px a tile beside the search (below).*/
.SiteHeroVideo{display:inline-flex;align-items:center;gap:12px;margin-top:14px;min-height:44px;color:#fff;font-weight:600}
.SiteHeroVideo:hover{color:#fff;text-decoration:none}
.SiteHeroPlay{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--SiteTeal);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.18)}
/*2026-09-30 - The triangle's weight sits left of its box; 2px to the right centres it by eye.*/
.SiteHeroPlay svg{margin-left:2px}
.SiteHeroVideo:hover .SiteHeroPlay{background:#e3f4f8}
.SiteHeroVideoText{display:flex;flex-direction:column;line-height:1.25}
.SiteHeroVideoText span{font-size:14px;font-weight:400;color:#e3f4f8}
/*2026-09-30 - The player opens in a dialog over the page (Site.js): 16:9, up to 960px, the close button above its left corner.*/
.SiteVideoDlg{width:min(960px,calc(100vw - 32px));max-width:none;padding:0;border:0;border-radius:14px;background:#000;overflow:visible}
.SiteVideoDlg::backdrop{background:rgba(8,24,29,.82)}
.SiteVideo{aspect-ratio:16/9;border-radius:14px;overflow:hidden}
.SiteVideo iframe{display:block;width:100%;height:100%;border:0}
.SiteVideoClose{position:absolute;top:-54px;left:0;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--SiteText);display:flex;align-items:center;justify-content:center}

/*2026-09-29 - Community (step 7a): comments and contributors stacked on phones, the comments one column at a time behind tabs.*/
.SiteCommunity{display:grid;gap:24px}
.SiteCommunity h2{margin-bottom:12px;font-size:19px}
.SiteCommunity h3{margin-bottom:10px;font-family:var(--SiteBody);font-size:15px;font-weight:700;color:var(--SiteText2)}
.SiteTabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-bottom:12px;padding:4px;background:#fff;border:1px solid var(--SiteLine);border-radius:12px}
.SiteTabs button{min-height:44px;border:0;border-radius:9px;background:none;color:var(--SiteText2);font-weight:700}
.SiteTabs button[aria-selected="true"]{background:var(--SiteTeal);color:#fff}
.SiteTalkCols{display:grid;gap:16px}
.SiteTalkList{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.SiteTalkItem{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#fff;border:1px solid var(--SiteLine);border-radius:14px}
.SiteTalkItem img{flex-shrink:0;width:48px;height:48px;object-fit:contain;border-radius:8px;background:#fff}
/*2026-09-29 - flex-grow: the text column fills the card, so the average chip sits at the far end even when the comment is short.*/
.SiteTalkBody{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.SiteTalkSubject{font-weight:700;line-height:1.3}
.SiteTalkText{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.SiteTalkBy{margin:0;font-size:13px;color:var(--SiteText2)}
.SiteTalkTitle{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-weight:700;overflow-wrap:anywhere}
/*2026-09-29 - Head row: the name, and the stored average as a small chip at the far end.*/
.SiteTalkHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.SiteTalkAvg{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:999px;background:#fdf6e3;color:#6b4f00;font-size:13px;font-weight:700;line-height:1.5}
.SiteTalkAvgStar{color:#f5b400}
.SiteTalkMine{display:inline-flex;border-radius:6px}
/*2026-09-29 - Hover card, the dashboard's DashTip in the site's palette. A hover info carries the pointer cursor.*/
[data-tip]{cursor:pointer}
.SiteTipCard{position:absolute;z-index:200;max-width:min(300px,calc(100vw - 16px));padding:12px 14px;background:#fff;color:var(--SiteText);border:1px solid var(--SiteLine);border-top:4px solid var(--SiteTeal);border-radius:10px;box-shadow:0 8px 24px rgba(19,38,45,.16);font-size:14px;line-height:1.6;pointer-events:none}
.SiteTipTitle{margin-bottom:4px;font-family:var(--SiteHead);font-weight:700;font-size:15px;color:var(--SiteTeal)}
/*2026-10-04 - Owner: the other product's picture in its hover card, at the start of the text (right, RTL); the text wraps around it.*/
.SiteTipImg{float:right;width:72px;height:72px;margin:2px 0 6px 10px;object-fit:contain;border:1px solid var(--SiteLine);border-radius:8px;background:#fff}
/*2026-10-01 - Owner: an action sits inside the hover card, not as another button on the product card. A card with an action takes the pointer; its button is the card's last line.*/
/*.SiteTipCardAct{pointer-events:auto}*/
/*.SiteTipAct{display:block;margin-top:10px;min-height:36px;padding:0 14px;border:1px solid var(--SiteGreen);border-radius:999px;background:#fff;color:var(--SiteGreen);font:inherit;font-size:14px;font-weight:700;cursor:pointer}*/
/*2026-10-01 - Owner: the card's buttons smaller, and side by side. The size of the product card's own small button (.SiteProdHintBtn); a card with an action is a little wider so two fit on one line, and they wrap on a narrow phone.*/
.SiteTipCardAct{pointer-events:auto;max-width:min(340px,calc(100vw - 16px))}
/*.SiteTipAct{display:inline-block;margin-top:10px;margin-inline-end:6px;min-height:28px;padding:0 10px;border:1px solid var(--SiteGreen);border-radius:999px;background:#fff;color:var(--SiteGreen);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}*/
/*.SiteTipAct:hover{background:#eaf6ee}*/
/*2026-10-02 - The hover card's buttons were still green; the new site's controls are teal (as .SiteProdHintBtn since 1.50).*/
.SiteTipAct{display:inline-block;margin-top:10px;margin-inline-end:6px;min-height:28px;padding:0 10px;border:1px solid var(--SiteTeal);border-radius:999px;background:#fff;color:var(--SiteTeal);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.SiteTipAct:hover{background:var(--SiteTealTint)}
/*2026-10-02 - The card's link to the element's page: the look of its buttons.*/
a.SiteTipAct{line-height:26px;text-decoration:none}
a.SiteTipAct:hover{color:var(--SiteTeal);text-decoration:none}
/*2026-09-29 - Average grade: a grey row of stars, the gold row over it clipped from the right (RTL start) to the grade, then the number.*/
.SiteStars{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--SiteText2)}
.SiteStarsBar{position:relative;display:inline-block;width:75px;height:15px}
.SiteStarsBar svg{position:absolute;top:0;right:0;width:75px;height:15px;fill:#d5dde0}
.SiteStarsBar svg + svg{fill:#f5b400;clip-path:inset(0 0 0 calc(100% - var(--SiteStarsFill,0%)))}
.SiteTalkEmpty{margin:0;padding:14px;background:#fff;border:1px dashed var(--SiteField);border-radius:14px;color:var(--SiteText2)}
.SiteContribList{margin:0;padding:4px 16px;list-style:none;background:#fff;border:1px solid var(--SiteLine);border-radius:14px}
.SiteContribList li{display:flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid #e6eef0}
.SiteContribList li:last-child{border-bottom:0}
.SiteContribRank{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--SiteTealTint);color:var(--SiteTeal);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.SiteContribName{flex-grow:1;min-width:0;font-weight:600}
/*2026-10-06 - The title mark beside a top contributor's name (SiteHomeContributorList()); it carries a hover card, so the pointer cursor.*/
.SiteContribMark{display:inline-block;margin-inline-start:8px;font-size:18px;line-height:1;cursor:pointer}
.SiteContribPts{flex-shrink:0;font-size:14px;color:var(--SiteText2)}
.SiteContribHint{margin:10px 0 0;font-size:14px;color:var(--SiteText2)}
/*2026-09-29 - Below 1024px, once Site.js has set data-tab, only the chosen column shows and its heading moves to screen readers (the tab names it).*/
@media (max-width:1023.98px){
	.SiteTalk[data-tab="SiteTalkP"] #SiteTalkS,.SiteTalk[data-tab="SiteTalkS"] #SiteTalkP{display:none}
	.SiteTalk[data-tab] .SiteTalkCol h3{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/*2026-09-29 - Footer and the phone bottom bar (hidden from 1024px).*/
.SiteFooter{margin-top:28px;padding:20px 0;background:#fff;border-top:1px solid var(--SiteLine);font-size:13px;color:var(--SiteText2)}
.SiteFooter p{margin:8px 0 0}
.SiteInfoLinks{display:flex;flex-wrap:wrap;gap:0 18px;margin:0;padding:0;list-style:none;font-weight:600;font-size:14px}
.SiteInfoLinks a{display:inline-block;padding:10px 0}
.SiteBottomBar{position:fixed;right:0;bottom:var(--SiteAnchorH,0px);left:0;z-index:40;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--SiteBarH) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--SiteLine)}
.SiteBottomBar a,.SiteBottomBar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;background:none;border:0;color:var(--SiteText2);font-size:12px;font-weight:600}
.SiteBottomBar a:hover{text-decoration:none;color:var(--SiteTeal)}
.SiteBottomBar [aria-current="page"]{color:var(--SiteTeal)}

/*2026-09-29 - Menu: full screen on phones, a 760px drawer from the right edge from 768px.*/
.SiteMenuWrap{position:fixed;inset:0;z-index:100}
.SiteMenuBackdrop{position:absolute;inset:0;background:rgba(19,38,45,.5)}
.SiteMenu{position:absolute;top:0;right:0;bottom:0;width:100%;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background:#fff;outline:0}
.SiteMenuHead{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px 8px 16px 16px;background:var(--SiteTeal);color:#fff}
.SiteMenuClose{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;border-radius:12px;color:inherit}
.SiteMenuAccount{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 8px 0}
.SiteMenuMe{flex-grow:1;display:flex;align-items:center;gap:12px;color:inherit}
.SiteMenuMe:hover{color:inherit;text-decoration:none}
.SiteMenuMe .SiteAvatar{width:44px;height:44px;font-size:18px}
.SiteAccountLines{display:flex;flex-direction:column;line-height:1.2}
.SiteAccountLines span{font-size:14px;opacity:.85}
.SiteMenuSmall{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px}
.SiteMenuHead .SiteMenuSmall{color:#fff;text-decoration:underline}
.SiteMenuGroups{display:grid;padding:8px 0}
.SiteMenuGroup{padding:12px 0 4px;border-bottom:1px solid #e6eef0}
.SiteMenuGroupTitle{padding:0 20px 6px;font-family:var(--SiteBody);font-size:13px;font-weight:700;color:var(--SiteText2)}
.SiteMenuList{margin:0;padding:0;list-style:none}
.SiteMenuItem{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 20px;color:var(--SiteText);font-size:17px;font-weight:600}
.SiteMenuItem .SiteIcon{color:var(--SiteTeal)}
.SiteMenuItem:hover{background:var(--SiteGround);color:var(--SiteText);text-decoration:none}
.SiteSites{padding:16px 0;background:#f6f9fa;border-bottom:1px solid #e6eef0}
.SiteSitesList{display:grid;gap:10px;margin:4px 0 0;padding:0 20px;list-style:none}
.SiteSite{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--SiteLine);border-radius:12px;color:var(--SiteText)}
.SiteSite:hover{border-color:var(--SiteTeal);color:var(--SiteText);text-decoration:none}
.SiteSite .SiteIcon{color:var(--SiteText2)}
.SiteSiteText{flex-grow:1;min-width:0}
.SiteSiteName{display:block;font-weight:700}
.SiteSiteDomain{display:block;direction:ltr;text-align:right;font-size:13px;color:var(--SiteText2)}
.SiteMenuFoot{display:flex;flex-direction:column;gap:8px;padding:16px 20px 24px}
.SiteApps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.SiteMenuFoot > .SiteMenuSmall{color:var(--SiteText2)}
/*2026-10-02 - Owner: the store buttons carry their marks, and the PricezBI link is a framed teal row, not a grey line of small text.*/
.SiteApps .SiteBtn{gap:8px}
.SiteBrandIcon{flex:none}
.SiteMenuBI{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 16px;border:1px solid var(--SiteTeal);border-radius:12px;background:var(--SiteTealTint);color:var(--SiteTealDark)}
.SiteMenuBI:hover{background:var(--SiteTeal);color:#fff;text-decoration:none}
.SiteMenuBIText{display:flex;flex-direction:column;line-height:1.3}
.SiteMenuBIText b{font-size:16px}
.SiteMenuBIText span{font-size:13px}

/*2026-09-30 - Step 8a login page: one card on the ground, fields 48px high at 16px (no iOS zoom), the error box above the form.*/
/*2026-09-30 - Margin, not padding: the 768px rule .SiteWrap{padding:0 32px} comes later in the file and zeroed the top padding, so the card touched the header.*/
.SiteAuthWrap{display:flex;justify-content:center;margin-top:32px;margin-bottom:32px}
.SiteAuthCard{width:100%;max-width:440px}
.SiteAuthCard h1{font-size:24px}
.SiteAuthForm{display:flex;flex-direction:column;gap:14px}
.SiteAuthField{display:flex;flex-direction:column;gap:6px}
.SiteAuthField label{font-weight:600}
.SiteAuthField input{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--SiteField);border-radius:10px;background:#fff;font-size:16px;text-align:right}
.SiteAuthField input:focus{border-color:var(--SiteTeal)}
.SiteAuthForm .SiteBtn{width:100%}
.SiteAuthErr{margin:0;padding:12px 14px;border-radius:10px;background:#fdecea;color:#b3261e;font-weight:600}
.SiteAuthErr p{margin:0}
.SiteAuthErr a{color:inherit;text-decoration:underline}
.SiteAuthLinks{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px}
.SiteAuthLinks a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/*2026-09-30 - Delivery 2 step 8a registration page: the gender select as the fields, first and last name side by side, the hint under the password, the mailing checkbox, the sent box.*/
.SiteAuthField select{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--SiteField);border-radius:10px;background:#fff;font-size:16px}
.SiteAuthField select:focus{border-color:var(--SiteTeal)}
.SiteAuthRow{display:flex;gap:12px}
.SiteAuthRow > .SiteAuthField{flex:1 1 0;min-width:0}
.SiteAuthHint{margin:0;font-size:14px;color:var(--SiteText2)}
.SiteAuthCheck{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;cursor:pointer}
.SiteAuthCheck input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--SiteTeal)}
.SiteAuthOk{margin:0;padding:12px 14px;border-radius:10px;background:#e8f5ee;color:#1d6b3a;font-weight:600}
.SiteAuthOk p{margin:0}
/*2026-09-30 - The address in the sent box wraps as one piece; only an address wider than the card breaks, anywhere.*/
.SiteAuthAddr{display:inline-block;max-width:100%;overflow-wrap:anywhere}
/*2026-09-30 - The reCAPTCHA box is 304px wide; under 360px it is scaled from its right edge so it fits the card.*/
.SiteCaptcha{min-height:78px}
@media (max-width:359px){
	.SiteCaptcha .g-recaptcha{transform:scale(.82);transform-origin:right top}
	.SiteCaptcha{min-height:64px}
}
/*2026-10-04 - Queue item 47 slice 7 (SiteRedesign_PageInventory.md 5.7.5): the company pages' text - About-Us.html and the three legal pages. The legal texts are the old includes, which the app's pages share, so their inline look (yellow behind links, 30px list padding, 20px lines) is overridden here, never edited.*/
.SiteProse{max-width:820px;font-size:17px;line-height:1.75}
.SiteProse h1{font-size:24px;margin:0 0 8px}
.SiteProse h2{font-size:19px;margin:24px 0 8px}
.SiteProse p{margin:0 0 12px}
.SiteProse ol,.SiteProse ul{margin:0 0 12px;padding-inline-start:24px !important;line-height:1.75 !important}
.SiteProse li{margin:0 0 6px}
.SiteProse a{color:var(--SiteTeal);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.SiteProse [style*="yellow"]{background:none !important}
@media (min-width:1024px){
	.SiteProse h1{font-size:28px}
}
/*2026-10-04 - The contact form: the login card's fields, the card wider for the message, a textarea and a file field to match.*/
.SiteContactCard{max-width:600px}
.SiteAuthField textarea{width:100%;min-height:160px;padding:10px 12px;border:1px solid var(--SiteField);border-radius:10px;background:#fff;font:inherit;font-size:16px;line-height:1.5;resize:vertical}
.SiteAuthField textarea:focus{border-color:var(--SiteTeal)}
.SiteAuthField input[type="file"]{min-height:0;padding:10px 12px}

@media (min-width:768px){
	.SiteWrap{padding:0 32px}
	/*2026-09-30 - Owner: the menu button did not line up with the page's right edge. 22px + the button's 10px puts its icon on .SiteWrap's 32px.*/
	.SiteHeaderIn{padding-inline-start:22px}
	.SiteCards{margin-top:-60px}
	.SiteCats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
	/*2026-10-02 - Owner: "you can't have the menu on the left opening the layer on the right". The menu button is at the header's far left now, so the menu opens from the left edge, under the button, and its shadow falls to the right.*/
	/*.SiteMenu{width:min(760px,92vw);box-shadow:-12px 0 32px rgba(19,38,45,.18)}*/
	/*2026-10-02 - Owner: the menu button is back at the header's right, so the menu opens from the right edge again.*/
	/*.SiteMenu{right:auto;left:0;width:min(760px,92vw);box-shadow:12px 0 32px rgba(19,38,45,.18)}*/
	.SiteMenu{width:min(760px,92vw);box-shadow:-12px 0 32px rgba(19,38,45,.18)}
	.SiteMenuHead{flex-wrap:nowrap;gap:16px;min-height:72px;padding:0 32px;background:#fff;color:var(--SiteText);border-bottom:1px solid var(--SiteLine)}
	/*2026-10-02 - The logo is a picture: on the menu's white head it keeps its own blue.*/
	/*.SiteMenuHead .SiteLogo{color:var(--SiteTeal);font-size:30px}*/
	.SiteMenuHead .SiteLogo{height:36px;filter:none}
	.SiteMenuClose{border:1px solid var(--SiteField)}
	.SiteMenuAccount{flex-basis:auto;flex-wrap:nowrap;padding:0}
	.SiteMenuMe .SiteAvatar{width:36px;height:36px;font-size:16px;background:var(--SiteTealTint);color:var(--SiteTeal)}
	.SiteMenuHead .SiteMenuSmall{color:var(--SiteText2);text-decoration:none}
	.SiteMenuGroups{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;padding:16px 20px 8px}
	.SiteMenuGroup{border:0}
	.SiteMenuItem{min-height:44px;padding:0 12px;border-radius:10px;font-size:16px}
	.SiteMenuGroupTitle{padding:0 12px 6px}
	.SiteSites{margin:8px 32px 0;padding:16px;border:0;border-radius:14px}
	.SiteSites .SiteMenuGroupTitle{padding:0 0 6px}
	.SiteSitesList{grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
	.SiteMenuFoot{margin-top:auto;padding:20px 32px;border-top:1px solid var(--SiteLine)}
	.SiteApps{display:flex}
	.SiteApps .SiteBtn{min-width:150px}
}

@media (min-width:1024px){
	body{padding-bottom:0}
	.SiteBottomBar{display:none}
	.SiteHeader{background:#fff;color:var(--SiteText);border-bottom:1px solid var(--SiteLine)}
	/*2026-09-30 - The header is white from 1024px: its focus ring goes back to teal.*/
	.SiteHeader{--SiteFocus:var(--SiteTeal)}
	/*2026-09-30 - Owner: the menu button sat 32px inside the page's right edge. The header's right edge now matches .SiteWrap (1312px, 32px); the left keeps 64px for the accessibility button.*/
	/*.SiteHeaderIn{max-width:1440px;height:72px;margin:0 auto;padding:0 64px;gap:16px}*/
	/*.SiteHeaderIn{max-width:1312px;height:72px;margin:0 auto;padding:0 32px;padding-inline-end:64px;gap:16px}*/
	/*2026-09-30 - Owner: the account pill sat 32px inside the cards' left edge. The left is .SiteWrap's 32px once the header's own margin clears the accessibility button (user-a, fixed at 10-45px), and grows back to 64px as the window narrows.*/
	.SiteHeaderIn{max-width:1312px;height:72px;margin:0 auto;padding:0 32px;padding-inline-end:clamp(32px, 64px - (100vw - 1312px) / 2, 64px);gap:16px}
	.SiteMenuBtn{padding:0 14px;border:1px solid var(--SiteField)}
	.SiteMenuBtnText{display:inline}
	/*2026-10-02 - The logo is a picture: 40px high on the white header, in its own blue.*/
	/*.SiteLogo{font-size:32px;color:var(--SiteTeal)}*/
	.SiteLogo{height:40px;filter:none}
	.SiteSlogan{display:inline}
	.SiteAvatar{background:var(--SiteTealTint);color:var(--SiteTeal)}
	.SiteBadge{border-color:#fff}
	/*2026-10-03 - Queue item 31: on the white header the circles are the avatar's tint with a teal icon, and the three sit close as one group - the header's 16px gap less 14px between their touch boxes, about 12px between the circles.*/
	.SiteHeaderRound::before{background:var(--SiteTealTint)}
	.SiteHeaderRound,.SiteHeaderRound:hover{color:var(--SiteTeal)}
	.SiteHeaderRound + .SiteHeaderRound,.SiteHeaderRound + .SiteHeaderMe{margin-inline-start:-14px}
	/*2026-10-03 - Queue item 26: the BI user's PricezBI pill - filled with the logo's blue, white text, teal on hover. display stays with .SiteHideMobile, so the pill exists from 1024px only.*/
	.SiteHeaderBI{gap:8px;padding:0 16px;border-radius:999px;background:var(--SiteBlue);color:#fff;font-weight:700}
	.SiteHeaderBI:hover{background:var(--SiteTeal);color:#fff;text-decoration:none}
	.SiteAccount{padding-block:5px;padding-inline:5px 14px;height:auto;border:1px solid var(--SiteLine);border-radius:999px}
	.SiteAccountText{display:flex;flex-direction:column;line-height:1.15;font-size:14px}
	.SiteAccountText span{font-size:12px;color:var(--SiteText2);font-weight:400}
	.SiteHideMobile{display:inline-flex}
	.SiteLogout{font-size:14px;color:var(--SiteText2)}
	/*2026-10-02 - Owner: "why is the button still green?" - the header's login button had its own green from 1024px, apart from .SiteBtnGreen. Teal, as every button of the new site.*/
	/*.SiteLogin{border:0;background:var(--SiteGreen);color:#fff}*/
	/*.SiteLogin:hover{background:var(--SiteGreenDark);color:#fff;text-decoration:none}*/
	.SiteLogin{border:0;background:var(--SiteTeal);color:#fff}
	.SiteLogin:hover{background:var(--SiteTealDark);color:#fff;text-decoration:none}
	.SiteHero{padding:36px 0 96px}
	.SiteHeroFlat{padding-bottom:36px}
	.SiteHero h1{font-size:40px}
	.SiteHeroSub{margin:12px 0 18px;font-size:18px}
	/*2026-09-30 - The explainer video (owner): a 16:9 tile left of the heading and search, the play button and its text centred in it.*/
	.SiteHeroGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center}
	.SiteHeroVideo{flex-direction:column;justify-content:center;gap:14px;margin-top:0;aspect-ratio:16/9;padding:16px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:var(--SiteTealDark);text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.18)}
	.SiteHeroVideo:hover{background:#093e4b}
	.SiteHeroPlay{width:72px;height:72px}
	.SiteHeroPlay svg{width:32px;height:32px;margin-left:4px}
	.SiteHeroVideoText{align-items:center;gap:2px}
	.SiteHeroVideoText b{font-family:var(--SiteHead);font-size:20px}
	.SiteSearch{gap:12px}
	.SiteSearchBox{height:60px;padding:0 20px;border-radius:14px}
	.SiteSearchBox input{font-size:18px}
	.SiteSearchBtn{height:60px;padding:0 32px;border-radius:14px;font-size:18px}
	.SiteCards{margin-top:-64px;gap:24px}
	.SiteCards:has(> :nth-child(2)){grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
	.SiteCard{gap:16px;padding:28px;border-radius:18px}
	.SiteCard h2{font-size:22px}
	.SiteFreeText textarea{height:210px;font-size:17px}
	.SiteSection{padding-top:40px}
	.SiteSection > h2{margin-bottom:16px;font-size:24px}
	.SiteCats{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
	.SiteCat{gap:10px;padding:16px 12px;border-radius:16px;font-size:16px}
	.SiteCatIcon{width:72px;height:72px}
	.SiteCatIcon svg{width:36px;height:36px}
	.SiteCommunity{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
	.SiteCommunity h2{margin-bottom:16px;font-size:24px}
	.SiteTabs{display:none}
	.SiteTalkCols{grid-template-columns:repeat(2,minmax(0,1fr))}
	.SiteFooter{margin-top:48px;padding:28px 0;font-size:14px}
	.SiteInfoLinks{gap:0 24px}
}

/*2026-10-01 - Search results page (Search-Results.html): the search band, the results bar with the sorts and the store, the product cards, the pager and the empty state. One column on phones, 2 from 768px, 3 from 1024px, 4 from 1280px.*/
.SiteResTop{--SiteFocus:#fff;padding:14px 0;background:var(--SiteTeal);color:#fff}
/*2026-10-02 - Owner: the search lives in the header, and the slogan under the logo, so the page's top is not spent on a band. Under 1024px the header gets a second row for the form, full width (the first row's left 64px stay free for the accessibility button; the second row is below it). From 1024px the form sits in the header's one row between the logo and the account, a bordered box and a teal button on the white ground.*/
.SiteHeaderWithSearch{flex-wrap:wrap;height:auto;row-gap:8px;padding-top:8px;padding-bottom:10px}
.SiteHeadSearch{order:9;flex:1 1 100%;max-width:none;margin-inline-end:-56px}
@media (min-width:1024px){
	/*2026-10-02 - Owner: "search is not centered". As a flex item the form sat right after the logo. It is now taken out of the row and centred on the header itself, so it sits over the middle of the page whatever stands on its two sides; its width leaves 350px a side for the menu button and logo (right) and the bell and account (left).*/
	/*.SiteHeaderWithSearch{flex-wrap:nowrap;height:72px;padding-top:0;padding-bottom:0}*/
	/*.SiteHeadSearch{order:0;flex:1 1 360px;max-width:720px;margin-inline-end:0;gap:8px}*/
	/*2026-10-02 - Owner: "something feels off". Centred on the page, the form stood 36px from the logo and 180px from the bell, so it read as pushed to one side although its middle was the page's. It now fills the row between the logo and the bell, the same space on both sides, and the spacer that kept the left side open is off in this header.*/
	/*.SiteHeaderWithSearch{position:relative;flex-wrap:nowrap;height:72px;padding-top:0;padding-bottom:0}*/
	/*.SiteHeadSearch{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,calc(100% - 700px));max-width:none;margin-inline-end:0;gap:8px}*/
	/*2026-10-02 - Owner: "top line is crowded". The search is one control, 560px at most, with the same free space on its two sides (auto margins): the חיפוש button sits inside the box's end and no longer stands beside it. The menu button is the icon alone, at the header's far left (SiteLayout.inc), and the logo is the first item, at the far right.*/
	/*.SiteHeadSearch{order:0;flex:1 1 auto;max-width:none;margin-inline:16px;gap:8px}*/
	/*.SiteHeadSearch .SiteSearchBox{height:46px;padding:0 14px;border:1px solid var(--SiteField);border-radius:12px}*/
	/*.SiteHeadSearch .SiteSearchBtn{height:46px;padding:0 20px;border-radius:12px;background:var(--SiteTeal);color:#fff;font-size:16px}*/
	.SiteHeaderWithSearch{flex-wrap:nowrap;height:72px;padding-top:0;padding-bottom:0}
	.SiteHeaderWithSearch .SiteSpacer{display:none}
	.SiteHeadSearch{position:relative;order:0;flex:0 1 560px;max-width:none;margin-inline:auto;gap:0}
	.SiteHeadSearch .SiteSearchBox{height:46px;padding:0 14px;padding-inline-end:92px;border:1px solid var(--SiteField);border-radius:12px}
	.SiteHeadSearch .SiteSearchBox input{font-size:16px}
	.SiteHeadSearch .SiteSearchBtn{position:absolute;top:5px;inset-inline-end:5px;height:36px;padding:0 16px;border-radius:8px;background:var(--SiteTeal);color:#fff;font-size:14px}
	.SiteHeaderIn .SiteMenuBtn{width:44px;padding:0}
	.SiteHeaderIn .SiteMenuBtnText{display:none}
	.SiteHeadSearch .SiteSearchBtn:hover{background:var(--SiteTealDark)}
	.SiteBrand{flex:none;flex-direction:column;align-items:flex-start;gap:2px}
	.SiteBrand .SiteLogo{height:34px}
	.SiteSlogan{font-size:12px;line-height:1.2;white-space:nowrap}
}
.SiteResBar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.SiteResBar h1{font-size:22px;overflow-wrap:anywhere}
.SiteResCount{margin:0;font-size:15px;color:var(--SiteText2)}
.SiteResSort{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:15px}
.SiteResSort span{font-weight:700}
.SiteResSort a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteText);font-weight:600}
.SiteResSort a:hover{border-color:var(--SiteTeal);text-decoration:none}
.SiteResSort a[aria-current="true"]{background:var(--SiteTeal);border-color:var(--SiteTeal);color:#fff}
/*2026-10-03 - Queue item 30: "ללא אונליין" is a filter, not a sort - at the row's far end, outlined when off, the teal tint with a check when on, so it never reads as the current sort.*/
.SiteNoOnlineBtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-inline-start:auto;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteText);font:inherit;font-weight:600;cursor:pointer}
.SiteNoOnlineBtn:hover{border-color:var(--SiteTeal)}
.SiteNoOnlineBtn svg{display:none}
.SiteNoOnlineBtn[aria-pressed="true"]{border-color:var(--SiteTeal);background:var(--SiteTealTint);color:var(--SiteTealDark)}
.SiteNoOnlineBtn[aria-pressed="true"] svg{display:block}
.SiteNoOnlineBtn[disabled]{opacity:.6;cursor:progress}
/*2026-10-04 - Owner: the list / cards switch - one pill split in two, the chosen half filled teal; at the end of the sort row, "ללא אונליין" right after it.*/
.SiteViewSwitch{display:inline-flex;margin-inline-start:auto;border:1px solid var(--SiteLine);border-radius:999px;overflow:hidden;background:#fff}
.SiteViewSwitch[hidden]{display:none}
.SiteViewSwitch button{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border:0;background:none;color:var(--SiteText);font:inherit;font-weight:600;cursor:pointer}
.SiteViewSwitch button:hover{color:var(--SiteTeal)}
.SiteViewSwitch button[aria-pressed="true"],.SiteViewSwitch button[aria-pressed="true"]:hover{background:var(--SiteTeal);color:#fff}
.SiteViewSwitch + .SiteNoOnlineBtn{margin-inline-start:0}
.SiteResStore{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:4px 0 0;font-size:15px}
.SiteResStore a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/*2026-10-05 - SiteRedesign_PageInventory.md 5.4.10: the store line and the sort share one row - the store on the right, the sort at the left end - with the list page's smaller pills (SiteListTools); on a narrow screen the sort wraps under the store. A touch screen keeps 40px.*/
/*.SiteResTools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;margin-top:8px}*/
/*2026-10-05 - SiteRedesign_PageInventory.md 5.4.11: 10px above the row (the chips above lost their bottom padding), the store's links 28px, and the count (category page, Products.html) in the row, between the store and the sort, 13px.*/
.SiteResTools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;margin-top:10px}
.SiteResTools .SiteResSort,.SiteResTools .SiteResStore{margin:0;font-size:14px}
.SiteResTools .SiteResSort a,.SiteResTools .SiteResSort span[aria-current="true"]{min-height:32px;padding:0 12px;font-size:13px}
/*.SiteResTools .SiteResStore a{min-height:32px}*/
.SiteResTools .SiteResStore a{min-height:28px}
.SiteResTools .SiteResCount{margin:0;font-size:13px}
@media (hover:none){
	.SiteResTools .SiteResSort a,.SiteResTools .SiteResSort span[aria-current="true"],.SiteResTools .SiteResStore a{min-height:40px}
}
.SiteResGrid{display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none}
.SiteProd{display:flex;align-items:flex-start;gap:12px;padding:14px;background:#fff;border:1px solid var(--SiteLine);border-radius:14px}
/*2026-10-01 - Staff only: a product with no size type.*/
.SiteProdFix{border-color:#b3261e}
/*2026-10-01 - Owner: the staff edit link, small, in the card's top right corner. Without these rules it was drawn as a column of the card and squeezed the text.*/
.SiteProd{position:relative}
.SiteProdEdit{position:absolute;top:0;right:10px;font-size:10px;line-height:14px}
/*2026-10-01 - A price never breaks from its shekel sign.*/
.SiteProdHere b,.SiteProdRange b{white-space:nowrap}
/*2026-10-01 - Owner: the staff edit link, small, in the card's top right corner.*/
.SiteProd{position:relative}
.SiteProdEdit{position:absolute;top:0;right:10px;font-size:10px;line-height:14px}
.SiteProdPic{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:88px;height:88px}
.SiteProdPic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.SiteProdBody{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.SiteProdName{font-family:var(--SiteBody);font-size:16px;font-weight:700;line-height:1.3}
.SiteProdName a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
/*2026-10-02 - The logo's blue: the tag is outlined in it; the padding gives up the line's 1px so the tag keeps its size.*/
/*.SiteProdTag{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:999px;background:var(--SiteTealTint);color:var(--SiteTealDark);font-size:12px;font-weight:700}*/
/*2026-10-02 - Owner: the tag's ground is the logo's blue itself; dark text, as .SiteCatAll.*/
/*.SiteProdTag{display:inline-block;margin-top:4px;padding:0 7px;border:1px solid var(--SiteBlue);border-radius:999px;background:var(--SiteTealTint);color:var(--SiteTealDark);font-size:12px;font-weight:700}*/
/*2026-10-02 - Owner: white text on the logo's blue.*/
/*.SiteProdTag{display:inline-block;margin-top:4px;padding:0 7px;border:1px solid var(--SiteBlue);border-radius:999px;background:var(--SiteBlue);color:var(--SiteText);font-size:12px;font-weight:700}*/
.SiteProdTag{display:inline-block;margin-top:4px;padding:0 7px;border:1px solid var(--SiteBlue);border-radius:999px;background:var(--SiteBlue);color:#fff;font-size:12px;font-weight:700}
.SiteProdMeta{display:flex;flex-wrap:wrap;gap:0 12px;margin:0;font-size:14px}
/*2026-10-04 - Queue item 47 slice 2: on a supplier's own list the card's supplier is a span, not a link - it keeps the link's look.*/
/*.SiteProdMeta a{padding:4px 0;color:var(--SiteText2);overflow-wrap:anywhere}*/
.SiteProdMeta a,.SiteProdMeta>span{padding:4px 0;color:var(--SiteText2);overflow-wrap:anywhere}
.SiteProdGrade{align-self:flex-start;display:inline-flex;align-items:center;min-height:24px;font-size:13px;color:var(--SiteText2)}
.SiteProdMarks{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.SiteProdMarks a,.SiteProdMarks span{display:block;border-radius:4px}
.SiteProdMarks img{display:block;width:22px;height:22px;object-fit:contain}
.SiteProdHere,.SiteProdRange{margin:0;font-size:15px}
.SiteProdHere > span:first-child,.SiteProdRange > span:first-child{font-weight:700}
.SiteProdHere b{font-size:17px}
/*2026-10-01 - "מחיר פה" against the national range: lowest known, inside the range, highest known. Each passes 4.5:1 on white.*/
.SitePriceLow b{color:#177a3e}
/*.SitePriceMid b{color:#9a5b00}*/
/*2026-10-04 - Owner: "the in-range price is brown everywhere - make it more orange". #c2410c passes 4.5:1 on white (5.2:1), and white on it passes too (the chips).*/
/*.SitePriceMid b{color:#c2410c}*/
/*2026-10-04 - Owner: "the orange can hardly be told from the red" - #c2410c leans red. #c05600 is orange, far from the red #b3261e, and still passes 4.5:1 on white (4.6:1), as does white on it.*/
/*.SitePriceMid b{color:#c05600}*/
/*2026-10-04 - Owner: "the orange still leans brown". #e65c00 is a plain orange; on white it is 3.6:1 - enough for the card's 24px bold price (large text), short of 4.5:1 on the 17px line.*/
/*.SitePriceMid b{color:#e65c00}*/
/*2026-10-04 - Owner: "now the orange looks too red". #e07800 sits between the brown and the red: 3.1:1 on white, still enough for the card's 24px bold price.*/
.SitePriceMid b{color:#e07800}
/*2026-10-05 - Pre-launch review L8, owner: the 17px "מחיר פה" line is not large text and needs 4.5:1 - #b55d00 (4.6:1) on that line only; the card's 24px price keeps #e07800.*/
.SiteProdHere.SitePriceMid b{color:#b55d00}
/*.SitePriceHigh b{color:#b3261e}*/
/*2026-10-04 - Owner: "the red leans brown" - so the orange and the red looked alike. #d32f2f is a plain red: 5.0:1 on white, and white on it passes too (the chips). Only the price's red changes; the error and out-of-stock reds stay.*/
.SitePriceHigh b{color:#d32f2f}
.SiteProdUnit{font-size:13px;color:var(--SiteText2)}
/*2026-10-01 - Owner: the mark of a catch in the checked-in store, a pill above "מחיר פה". White on #177a3e passes 4.5:1.*/
.SiteProdCatch{align-self:flex-start;padding:1px 10px;border-radius:999px;background:#177a3e;color:#fff;font-size:13px;font-weight:700}
/*2026-10-01 - Owner: the pill alone is not enough - the whole card of a catch gets a green ground and edge.*/
.SiteProdIsCatch{background:#eaf6ee;border-color:#177a3e}
.SiteProdLinks{display:flex;flex-wrap:wrap;gap:0 14px;margin:0;font-size:13px}
.SiteProdLinks a{padding:4px 0;font-weight:600}
.SiteResPager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:20px;color:var(--SiteText2)}
.SiteResEmpty h1{font-size:22px;overflow-wrap:anywhere}
.SiteResEmpty .SiteCardActions a:not(.SiteBtn){display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (min-width:768px){
	.SiteResGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (min-width:1024px){
	.SiteResTop{padding:22px 0}
	.SiteResBar h1,.SiteResEmpty h1{font-size:28px}
	.SiteResGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media (min-width:1280px){
	.SiteResGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/*2026-10-01 - Owner: a user chooses the list he is working on from any page. The list bar under the header: the label, the select (16px, so iOS does not zoom) and the link to the list.*/
.SiteListBar{background:#fff;border-bottom:1px solid var(--SiteLine);font-size:15px}
/*2026-10-01 - Owner: a list is created from any page. The bar wraps, so the new list's name field opens as a full row under the select.*/
/*.SiteListBar .SiteWrap{display:flex;align-items:center;gap:10px;min-height:52px}*/
/*2026-10-02 - Owner: the bar's three actions were "too big and raw". They are small pills now, so a wrapped row needs a gap above it and the bar a little air.*/
/*.SiteListBar .SiteWrap{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-height:52px}*/
.SiteListBar .SiteWrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:52px;padding-top:6px;padding-bottom:6px}
.SiteListBar .SiteNewList{flex:1 1 100%;margin-bottom:10px}
.SiteListBar .SiteNewList label{color:var(--SiteText)}
.SiteListBar label{flex:none;font-weight:700;color:var(--SiteText2)}
.SiteListBarSel{flex:0 1 280px;width:auto;min-width:0;min-height:40px}
/*2026-10-02 - Owner: "the links are too big and raw". The bar's actions (the link to the list, the online store, a new list) are quiet pills of one look: 13px, a thin line, teal text; the line and the ground turn teal under the pointer. 32px high with a mouse, 40px where there is none (a finger).*/
/*.SiteListBar a{flex:none;display:inline-flex;align-items:center;min-height:44px;font-weight:600}*/
.SiteListBar a,.SiteListBar .SiteLinkBtn{flex:none;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteTeal);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
.SiteListBar a:hover,.SiteListBar .SiteLinkBtn:hover{border-color:var(--SiteTeal);background:var(--SiteTealTint);color:var(--SiteTealDark);text-decoration:none}
.SiteListBar a[hidden],.SiteListBar .SiteLinkBtn[hidden]{display:none}
/*2026-10-02 - Owner: "the list line is huge. it's an important part of any page but it feels too much". From 1024px the bar is a slim line: 40px, 13px text, a 30px select of 220px and 28px pills. A touch screen keeps its 40px pills (the rule below) and a phone the bar as it was.*/
@media (min-width:1024px){
	.SiteListBar{font-size:13px}
	.SiteListBar .SiteWrap{min-height:40px;padding-top:4px;padding-bottom:4px}
	.SiteListBar .SiteListBarSel{flex-basis:220px;min-height:30px;padding:0 8px;border-radius:8px;font-size:13px}
	.SiteListBar a,.SiteListBar .SiteLinkBtn{min-height:28px;font-size:12px}
}
@media (hover:none){
	.SiteListBar a,.SiteListBar .SiteLinkBtn{min-height:40px}
}
/*2026-10-03 - Owner: on a phone "העברה לחנות אונליין" took a second line. The button carries a cart icon beside its text; on a phone the text goes and the icon sits to the left of the list. The select grows from 0, not from 280px, so the row is measured as it will be and does not wrap.*/
#SiteToStoreBtn{gap:6px}
@media (max-width:599px){
	/*2026-10-05 - Queue item 55: grown from 0, the select had only what the label, the pills and the cart left (~120px at 390px), and an RTL select clips its name at the start ("P6 check (5)" showed "ck (5)"). It now takes the whole row beside the label - its basis is the row less the label's ~90px and the gap - so the pills wrap to a second row under it. A label wider than that puts the select on a full row of its own, still whole.*/
	/*.SiteListBar .SiteListBarSel{flex:1 1 0}*/
	.SiteListBar .SiteListBarSel{flex:1 1 calc(100% - 100px)}
	.SiteListBar #SiteToStoreBtn{min-width:40px;padding:0;justify-content:center}
	.SiteListBar .SiteToStoreTxt{display:none}
}

/*2026-10-01 - Owner: every save shows a sign. One line over the page's bottom, above the phone's bottom bar and the anchor ad; red for a failure.*/
/*2026-10-01 - Owner: black is not our colour. The sign after a save is the site's teal, as the header.*/
/*2026-10-01 - .SiteToast{position:fixed;z-index:250;right:16px;left:16px;bottom:calc(var(--SiteBarH) + env(safe-area-inset-bottom) + var(--SiteAnchorH,0px) + 12px);max-width:420px;margin:0 auto;padding:12px 16px;border-radius:12px;background:var(--SiteText);color:#fff;font-weight:600;text-align:center;white-space:pre-line;box-shadow:0 8px 24px rgba(19,38,45,.25);pointer-events:none}*/
.SiteToast{position:fixed;z-index:250;right:16px;left:16px;bottom:calc(var(--SiteBarH) + env(safe-area-inset-bottom) + var(--SiteAnchorH,0px) + 12px);max-width:420px;margin:0 auto;padding:12px 16px;border-radius:12px;background:var(--SiteTeal);color:#fff;font-weight:600;text-align:center;white-space:pre-line;box-shadow:0 8px 24px rgba(19,38,45,.25);pointer-events:none}
.SiteToastBad{background:#b3261e}

/*2026-10-01 - Owner: the card's new look (inventory 5.1.9). These rules come after the first card's and override them: the picture column is an action rail (132px on phones, 108px from 768px), the text column ends in the price block, pinned to the card's bottom.*/
.SiteProd{align-items:stretch;padding:12px}
.SiteProdRail{flex:none;width:132px;display:flex;flex-direction:column;gap:8px}
.SiteProdPicBox{position:relative}
.SiteProdPic{width:100%;height:132px;padding:8px;border:1px solid var(--SiteLine);border-radius:10px;background:#fff}
.SiteProdPic img{width:100%;height:100%}
/*2026-10-01 - The favourite star: a 44px target around a 30px chip on the picture's top right corner; gold when the product is a favourite.*/
.SiteProdFav{position:absolute;top:-10px;right:-10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:none;color:var(--SiteText2)}
.SiteProdFav span{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--SiteField);border-radius:50%;background:#fff}
.SiteProdFav:hover{color:var(--SiteText)}
.SiteProdFav[aria-pressed="true"] span{border-color:#e0a800}
.SiteProdFav[aria-pressed="true"] svg{fill:#f5b400;stroke:#b98600}
.SiteProdFav[disabled]{opacity:.6;cursor:progress}
/*2026-10-01 - The list control, at the rail's width. Quiet: an outline, no fill, in the same place on every card. In the list it is a stepper - minus, the typed quantity, plus; at the lowest quantity (.SiteStepMin) the minus is a bin.*/
/*2026-10-02 - Owner: too much green on the cards, and it is hard to tell what is already in the list. The control is in the site's teal, and its two states no longer look alike: not in the list - an outlined button on white; in the list - a stepper filled teal, its quantity and icons in white. The focus ring inside the filled stepper is white, as in the header.*/
/*.SiteProdAdd{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:44px;padding:0 6px;border:2px solid var(--SiteGreen);border-radius:10px;background:#fff;color:var(--SiteGreen);font-weight:700;font-size:15px}*/
/*.SiteProdAdd:hover{background:#eaf6ee;color:var(--SiteGreenDark);text-decoration:none}*/
/*.SiteProdStep{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;height:44px;border:2px solid var(--SiteGreen);border-radius:10px;background:#fff;overflow:hidden}*/
/*.SiteProdStep button{display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--SiteGreen)}*/
/*.SiteProdStep button:hover{background:#eaf6ee}*/
.SiteProdAdd{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:44px;padding:0 6px;border:2px solid var(--SiteTeal);border-radius:10px;background:#fff;color:var(--SiteTeal);font-weight:700;font-size:15px}
.SiteProdAdd:hover{background:var(--SiteTealTint);color:var(--SiteTealDark);text-decoration:none}
.SiteProdStep{--SiteFocus:#fff;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;height:44px;border:2px solid var(--SiteTeal);border-radius:10px;background:var(--SiteTeal);overflow:hidden}
.SiteProdStep button{display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:#fff}
.SiteProdStep button:hover{background:var(--SiteTealDark)}
.SiteProdStep button span{display:flex}
/*.SiteProdQty{width:100%;min-width:0;padding:0;border:0;border-inline:1px solid var(--SiteLine);border-radius:0;background:transparent;text-align:center;font-weight:700;font-size:16px}*/
.SiteProdQty{width:100%;min-width:0;padding:0;border:0;border-inline:1px solid rgba(255,255,255,.45);border-radius:0;background:transparent;color:#fff;text-align:center;font-weight:800;font-size:17px}
/*2026-10-01 - The two rules below lost to ".SiteProdStep button span{display:flex}" (a class and two elements outrank one class), so above the lowest quantity the bin was drawn beside the minus. The same rules, written under the stepper's button so they win.*/
/*2026-10-01 - .SiteStepBin,.SiteStepMin .SiteStepMinus{display:none}*/
/*2026-10-01 - .SiteStepMin .SiteStepBin{display:flex}*/
.SiteProdStep button .SiteStepBin,.SiteStepMin .SiteProdStep button .SiteStepMinus{display:none}
.SiteStepMin .SiteProdStep button .SiteStepBin{display:flex}
.SiteProdList[aria-busy="true"]{opacity:.6;pointer-events:none}
.SiteProdRailLinks{display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px;margin:0;font-size:12px}
.SiteProdRailLinks a{padding:2px 0;font-weight:600}
.SiteProdEdit{position:static;font-size:12px;line-height:inherit}
.SiteProdBody{gap:4px}
.SiteProdName a{-webkit-line-clamp:2;line-clamp:2}
.SiteProdMeta{align-items:baseline;gap:0 6px;font-size:13px;color:var(--SiteText2)}
/*.SiteProdMeta a{padding:2px 0}*/
.SiteProdMeta a,.SiteProdMeta>span{padding:2px 0}
.SiteProdMarksRow{display:flex;align-items:center;gap:6px}
.SiteProdMarksRow .SiteProdGrade{flex:none;align-self:center;margin-inline-start:auto}
.SiteProdPrice{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:8px;border-top:1px solid var(--SiteLine)}
.SiteProdIsCatch .SiteProdPrice{border-top-color:#b9dcc5}
.SiteProdLabel{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;font-size:13px;font-weight:600;color:var(--SiteText2)}
.SiteProdCatch{align-self:auto;font-size:12px}
/*2026-10-01 - A sale: the tag that opens its description, and the price in the house's sale green (#006400 bold), whatever its place in the national range.*/
.SiteProdSale{padding:0 8px;border:1px solid #006400;border-radius:999px;background:#fff;color:#006400;font-size:12px;font-weight:700}
.SiteProdBig{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin:0}
.SiteProdBig b{font-size:24px;line-height:1.2;white-space:nowrap}
.SiteProdBigRange{gap:0 5px;font-size:14px}
.SiteProdBigRange b{font-size:18px}
.SitePriceSale b{color:#006400}
/*2026-10-01 - Owner: the sale was unclear and the tags jumped between lines. The catch and sale tags always take the line under "מחיר פה", and the regular price is struck beside the sale price.*/
.SiteProdLabel > span:first-child{flex-basis:100%}
.SiteProdWas{font-size:15px;color:var(--SiteText2);text-decoration:line-through;white-space:nowrap}
/*2026-10-01 - Owner: the catch is not a tag in the price line but a strip across the card's top left corner. The same element, with its hover card, lifted out of the line; the name keeps clear of it.*/
.SiteProd{position:relative;overflow:hidden}
/*2026-10-01 - Owner: a bit smaller.*/
/*.SiteProd .SiteProdCatch{position:absolute;top:12px;left:-30px;width:110px;padding:2px 0;border-radius:0;transform:rotate(-45deg);text-align:center;font-size:12px;line-height:1.4;box-shadow:0 1px 3px rgba(19,38,45,.25)}*/
/*.SiteProdIsCatch .SiteProdName{padding-inline-end:30px}*/
.SiteProd .SiteProdCatch{position:absolute;top:8px;left:-34px;width:100px;padding:1px 0;border-radius:0;transform:rotate(-45deg);text-align:center;font-size:10px;line-height:1.4;box-shadow:0 1px 3px rgba(19,38,45,.25)}
.SiteProdIsCatch .SiteProdName{padding-inline-end:22px}
/*2026-10-01 - Owner: the category and the supplier, each always on its own line.*/
.SiteProdMeta{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0}
/*2026-10-01 - Owner: "מחיר פה" was lost beside what it names. It is the price block's heading now: larger, heavy, in the text colour.*/
.SiteProdLabel{font-size:15px;font-weight:800;color:var(--SiteText)}
.SiteProdNone{margin:0;font-size:15px;color:var(--SiteText2)}
.SiteProdRange{font-size:13px;color:var(--SiteText2)}
.SiteProdRange > span:first-child{font-weight:600}
/*2026-10-06 - Owner: the sale's description is always shown under the price, in the sale's green; the product page's store row gives it the row's full width, under the store and the price.*/
.SiteProdSaleDesc{color:#006400}
.SiteStoreSale{grid-column:1 / -1;margin:0;font-size:13px;line-height:1.5;color:#006400;overflow-wrap:anywhere}
@media (min-width:768px){
	.SiteProdRail{width:108px}
	.SiteProdPic{height:108px}
	.SiteProdStep{grid-template-columns:32px minmax(0,1fr) 32px}
	.SiteProdAdd{font-size:14px}
}
@media (min-width:1024px){
	.SiteToast{bottom:24px}
}

/*2026-10-01 - Owner: a click on a product's picture opens a large picture in the middle of the screen (Site.js, a[data-zoom]). The dialog is the size of its picture, which never passes the window; the close button is the video dialog's, above its left corner.*/
.SiteProdPic[data-zoom]{cursor:zoom-in}
.SiteZoomDlg{min-width:160px;min-height:160px;max-width:none;max-height:none;padding:12px;border:0;border-radius:14px;background:#fff;overflow:visible}
.SiteZoomDlg::backdrop{background:rgba(8,24,29,.82)}
.SiteZoomDlg img{display:block;max-width:min(720px,calc(100vw - 56px));max-height:calc(100vh - 150px);width:auto;height:auto;margin:0 auto}
.SiteZoomDlg .SiteVideoClose{font-size:28px;line-height:1}
/*2026-10-02 - Owner: the dialog of one sale's products (a card's quantity advice opens it): the sale, the list's total and whether it fits - green when it does, amber when it does not - then the products, picture and name only, each with a minus, its quantity and a plus. The dialog itself has no padding, so a click outside the box is a click on the dialog and closes it.*/
.SiteSaleDlg{width:min(560px,calc(100vw - 24px));max-width:none;max-height:none;padding:0;border:0;border-radius:14px;background:#fff;color:var(--SiteText);overflow:visible}
.SiteSaleDlg::backdrop{background:rgba(8,24,29,.82)}
.SiteSaleBox{position:relative;padding:16px}
.SiteSaleDlg .SiteVideoClose{top:10px;left:10px;width:36px;height:36px;background:var(--SiteGround);font-size:26px;line-height:1}
.SiteSaleDlg h2{margin:0 0 6px;padding-left:44px;font-family:var(--SiteHead);font-size:20px;color:var(--SiteTealDark)}
.SiteSaleDesc{margin:0 0 10px;font-size:14px}
.SiteSaleState{margin:0 0 6px;padding:10px 12px;border:2px solid var(--SiteLine);border-radius:10px;font-size:17px;font-weight:800}
/*2026-10-02 - Owner: "why green? our colours are blue" - the dialog is in the site's teal.*/
/*.SiteSaleState[data-fit="1"]{background:#eaf6ee;border-color:var(--SiteGreen);color:var(--SiteGreenDark)}*/
.SiteSaleState[data-fit="1"]{background:var(--SiteTealTint);border-color:var(--SiteTeal);color:var(--SiteTealDark)}
.SiteSaleState[data-fit="0"]{background:#fff4d6;border-color:#e0b040;color:#6b4f00}
.SiteSaleNote{margin:0 0 10px;font-size:14px}
.SiteSaleList{margin:0;padding:0;list-style:none;min-height:120px;max-height:calc(100vh - 340px);overflow-y:auto;border-top:1px solid var(--SiteLine)}
.SiteSaleList li{display:grid;grid-template-columns:56px minmax(0,1fr) 124px;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--SiteLine)}
/*2026-10-02 - Owner: a product in the list has to look different from one that is not - a teal ground, a teal bar on the row's right edge, a "ברשימה" tag by the name.*/
/*.SiteSaleList li.SiteSaleIn{background:#f4faf6}*/
.SiteSaleList li.SiteSaleIn{padding-inline-start:12px;background:var(--SiteTealTint);box-shadow:inset -5px 0 0 var(--SiteTeal)}
.SiteSaleTag{display:inline-block;margin-inline-start:8px;padding:0 8px;border-radius:999px;background:var(--SiteTeal);color:#fff;font-size:12px;font-weight:700;line-height:20px;vertical-align:middle}
.SiteSaleList img{width:56px;height:56px;object-fit:contain}
.SiteSaleName{font-size:15px;font-weight:700}
/*2026-10-02 - The stepper of a product in the list is filled teal; a product that is not in the list gets one outlined "+ הוספה" button (.SiteSaleCtlAdd).*/
/*.SiteSaleCtl{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;height:40px;border:2px solid var(--SiteGreen);border-radius:10px;background:#fff;overflow:hidden;text-align:center;font-size:16px;font-weight:700}*/
/*.SiteSaleCtl button{height:100%;padding:0;border:0;background:none;color:var(--SiteGreen);font-size:22px;font-weight:700;line-height:1}*/
/*.SiteSaleCtl button:hover{background:#eaf6ee}*/
.SiteSaleCtl{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;height:40px;border:2px solid var(--SiteTeal);border-radius:10px;background:var(--SiteTeal);color:#fff;overflow:hidden;text-align:center;font-size:17px;font-weight:800}
.SiteSaleCtl button{height:100%;padding:0;border:0;background:none;color:#fff;font-size:22px;font-weight:700;line-height:1}
.SiteSaleCtl button:hover{background:var(--SiteTealDark)}
.SiteSaleCtlAdd{grid-template-columns:minmax(0,1fr);background:#fff}
.SiteSaleCtlAdd button{color:var(--SiteTeal);font-size:15px}
.SiteSaleCtlAdd button:hover{background:var(--SiteTealTint)}
.SiteSaleCtl button:disabled{background:none;color:var(--SiteField)}
.SiteSaleMsg{min-height:22px;margin:8px 0 0;font-size:14px;font-weight:700;color:var(--SiteTealDark)}
.SiteSaleMsg.SiteSaleBad{color:#b3261e}
/*2026-10-02 - Owner: a list is sent to an online store. The dialog of the stores (Site.js) is the sale dialog's box: one outlined teal button per store, full width, 48px high; dimmed while a store is being asked. The link to the store shows only when the browser blocked the new tab.*/
.SiteStoreList{display:grid;gap:8px;margin:0;padding:0;list-style:none;max-height:calc(100vh - 300px);overflow-y:auto}
.SiteStoreList button{width:100%;min-height:48px;padding:0 14px;border:2px solid var(--SiteTeal);border-radius:10px;background:#fff;color:var(--SiteTeal);font-family:var(--SiteHead);font-weight:700;font-size:16px;cursor:pointer}
.SiteStoreList button:hover{background:var(--SiteTealTint);color:var(--SiteTealDark)}
.SiteStoreDlg[aria-busy="true"] .SiteStoreList button{opacity:.55;cursor:progress}
/*2026-10-03 - The product page's store rows (.SiteStoreGo, their arrow: 24px wide, grey, 26px) took over this dialog's link - "פתיחת <store>" was squeezed into 24px and spilled out of its button. The dialog's link is now scoped to the dialog, so the rows' rule cannot reach it.*/
/*.SiteStoreGo{width:100%;margin-top:10px}*/
/*.SiteStoreGo[hidden]{display:none}*/
.SiteStoreDlg .SiteStoreGo{display:flex;width:100%;height:auto;min-height:48px;margin-top:10px;font-size:17px;line-height:1.2;color:#fff}
.SiteStoreDlg .SiteStoreGo:hover{color:#fff}
.SiteStoreDlg .SiteStoreGo[hidden]{display:none}

/*2026-10-01 - Owner: the marks and the grade on separate lines, and no mark icons. The marks are word chips that wrap; the red marks and the green sign carry their colour. The grade's stars sit on the line under them.*/
.SiteProdMarksCol{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.SiteProdMarks{gap:4px}
.SiteProdMarks a,.SiteProdMarks span{padding:0 7px;border:1px solid var(--SiteLine);border-radius:999px;background:var(--SiteGround);color:var(--SiteText2);font-size:12px;font-weight:600;line-height:20px;white-space:nowrap}
.SiteProdMarks a:hover{border-color:var(--SiteTeal);text-decoration:none}
.SiteProdMarks .SiteMarkRed{background:#fdecea;border-color:#f1b5b0;color:#b3261e}
.SiteProdMarks .SiteMarkGreen{background:#eaf6ee;border-color:#b9dcc5;color:#11602f}
.SiteProdMarksCol .SiteProdGrade{align-self:flex-start;margin:0}
/*2026-10-01 - Owner: the marks are icons, not word chips. The chip look above is undone, and each icon is drawn at its file's own size (19 or 20 pixels), never stretched.*/
.SiteProdMarks{gap:6px}
.SiteProdMarks a,.SiteProdMarks span{padding:0;border:0;border-radius:4px;background:none;line-height:0}
.SiteProdMarks img{width:auto;height:auto}
/*2026-10-01 - Owner: the green and red marks are the Ministry of Health's originals, 252 pixel files (*HD.png), drawn at 22px so they stay sharp on a scaled screen.*/
.SiteProdMarks img[src$="HD.png"]{width:22px;height:22px}

/*2026-10-01 - Owner: the shopping list's two advices on the card, under the price block. Amber: the quantity does not fit the sale, with the button that sets the recommended one. Teal: a cheaper option the store sells, a link to it.*/
.SiteProdHints{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.SiteProdAdvice{display:contents}
/*.SiteProdHint{padding:0 8px;border:1px solid transparent;border-radius:999px;font-size:12px;font-weight:700;line-height:22px}*/
/*2026-10-02 - Owner: a chip whose text wrapped became a large ellipse. The radius is half of one line's height: a one-line chip is the same pill, and a chip that still wraps on a narrow card is a rounded box, not an ellipse.*/
.SiteProdHint{padding:0 8px;border:1px solid transparent;border-radius:12px;font-size:12px;font-weight:700;line-height:22px}
.SiteProdHintWarn{background:#fff4d6;border-color:#e0b040;color:#6b4f00}
/*2026-10-01 - Owner: the products of a sale group are marked together - the cards of the group's products, while the group's chip is pointed at.*/
.SiteProd.SiteProdInGroup{box-shadow:0 0 0 3px #e0b040}
.SiteProdHintWarn[data-group]{cursor:pointer}
/*2026-10-01 - Owner: every product of a sale whose quantity does not fit stands out. The chip of a product of the sale that is not in the list.*/
.SiteProdHintPart{background:#fff;border-color:#e0b040;color:#6b4f00;cursor:pointer}
/*2026-10-02 - The logo's blue: the chip's line.*/
/*.SiteProdHintAlt{background:var(--SiteTealTint);border-color:#9ccbd6;color:var(--SiteTealDark)}*/
/*2026-10-02 - Owner: the chip's ground is the logo's blue itself; dark text, and a dark line under the pointer.*/
/*.SiteProdHintAlt{background:var(--SiteTealTint);border-color:var(--SiteBlue);color:var(--SiteTealDark)}*/
/*.SiteProdHintAlt:hover{border-color:var(--SiteTeal);color:var(--SiteTealDark);text-decoration:none}*/
/*2026-10-02 - Owner: white text on the logo's blue.*/
/*.SiteProdHintAlt{background:var(--SiteBlue);border-color:var(--SiteBlue);color:var(--SiteText)}*/
/*.SiteProdHintAlt:hover{border-color:var(--SiteTealDark);color:var(--SiteText);text-decoration:none}*/
.SiteProdHintAlt{background:var(--SiteBlue);border-color:var(--SiteBlue);color:#fff}
.SiteProdHintAlt:hover{border-color:var(--SiteTealDark);color:#fff;text-decoration:none}
/*2026-10-02 - Owner: too much green on the cards - the advice's button in the site's teal.*/
/*.SiteProdHintBtn{min-height:28px;padding:0 10px;border:1px solid var(--SiteGreen);border-radius:999px;background:#fff;color:var(--SiteGreen);font-size:12px;font-weight:700}*/
/*.SiteProdHintBtn:hover{background:#eaf6ee}*/
/*2026-10-02 - Queue item 18, owner: the advice's button moved into the chip's hover card (.SiteTipAct), so nothing draws .SiteProdHintBtn any more. A chip whose card has a button shows the pointer.*/
/*.SiteProdHintBtn{min-height:28px;padding:0 10px;border:1px solid var(--SiteTeal);border-radius:999px;background:#fff;color:var(--SiteTeal);font-size:12px;font-weight:700}*/
/*.SiteProdHintBtn:hover{background:var(--SiteTealTint)}*/
.SiteProdHintWarn[data-tip-act]{cursor:pointer}

/*2026-10-02 - Queue item 16: the shopping list page (My-List.html). A notice (the words a free-text list did not find, a list longer than the page), the list's actions as the list bar's quiet pills - the marked products' button filled teal, since it shows only while something is marked - and the basket form in one compact card, in a row from 768px.*/
.SiteListNote{margin:0 0 12px;padding:10px 14px;border:1px solid #e0b040;border-radius:10px;background:#fff4d6;color:#6b4f00;font-size:15px}
/*2026-10-02 - Queue item 17: the free-text list (List-From-Text.html). The page is one card of a reading width with a tall field; the list page's notice is teal when everything the user wrote went into the list; the wait line of the free-text form is teal, on this page and on the home card (owner: not green).*/
.SiteListNoteOk{border-color:var(--SiteTeal);background:var(--SiteTealTint);color:var(--SiteTealDark)}
.SiteFreeTextPage{max-width:760px}
.SiteFreeTextPage h1{font-size:22px;overflow-wrap:anywhere}
.SiteFreeTextPage textarea{height:300px}
.SiteFreeText .SiteWait{background:var(--SiteTealTint);color:var(--SiteTealDark)}
.SiteListActs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
.SiteListActs a,.SiteListActs .SiteLinkBtn{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteTeal);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
.SiteListActs a:hover,.SiteListActs .SiteLinkBtn:hover{border-color:var(--SiteTeal);background:var(--SiteTealTint);color:var(--SiteTealDark);text-decoration:none}
.SiteListActs #SiteListMarkedBtn{border-color:var(--SiteTeal);background:var(--SiteTeal);color:#fff}
.SiteListActs #SiteListMarkedBtn:hover{border-color:var(--SiteTealDark);background:var(--SiteTealDark);color:#fff}
.SiteListBasket{margin-top:12px;padding:14px}
/*2026-10-02 - Owner: the list page's head was too heavy, "and not GREEN". Two lines and no card: the title and count, the teal הסל הזול button with "אפשרויות" and one "פעולות" pill; then the sort (32px chips, as the list bar's pills), the store, and the marked products' filled pill at the line's end. The wait text is teal here, on a row of its own. The options dialog and the actions dialog are the sale dialog's box; an action is a row, its name in teal over a line saying what it does.*/
.SiteListHead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.SiteListTitle{flex:1 1 260px;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.SiteListTitle h1{margin:0;font-size:22px;overflow-wrap:anywhere}
.SiteListTitle .SiteResCount{margin:0}
.SiteBasketSlim{flex-direction:row;align-items:center;gap:14px}
.SiteBasketSlim > .SiteBtn{min-height:44px;padding:0 24px}
.SiteListHead .SiteWait{order:9;flex:1 1 100%;background:var(--SiteTealTint);color:var(--SiteTealDark)}
/*2026-10-02 - Seen on an empty list: the "פעולות" pill touched the card under it - the card keeps 12px from the head.*/
.SiteListHead ~ .SiteResEmpty{margin-top:12px}
/*2026-10-02 - Owner, on a phone ("פעולות fell down"; "why is פעולות an ellipse and אפשרויות a link?"): the two are the same kind of control, so "אפשרויות" is a pill as "פעולות" is, at every width. A first try put both pills under the הסל הזול button and was refused: "פעולות has nothing to do with הסל הזול". Under 600px the head is a grid of two rows, each control beside what it acts on: the title with "פעולות" (the list's actions), then the הסל הזול button, filling the row, with "אפשרויות" (the basket's settings). The form is display:contents there, so its button and "אפשרויות" are placed by the head's grid; an empty list has no form and so one row.*/
@media (max-width:599px){
	.SiteListHead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 8px}
	.SiteBasketSlim{display:contents}
	.SiteListTitle{grid-column:1;grid-row:1}
	.SiteListMenuBtn{grid-column:2;grid-row:1;justify-content:center}
	.SiteBasketSlim > .SiteBtn{grid-column:1;grid-row:2}
	#SiteBasketOptBtn{grid-column:2;grid-row:2;justify-content:center}
	.SiteListHead .SiteWait{grid-column:1 / -1;grid-row:3}
}
#SiteBasketOptBtn:hover{border-color:var(--SiteTeal);background:var(--SiteTealTint);color:var(--SiteTealDark);text-decoration:none}
@media (hover:none){
	#SiteBasketOptBtn{min-height:40px}
}
/*.SiteListMenuBtn,.SiteListTools #SiteListMarkedBtn{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteTeal);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}*/
.SiteListMenuBtn,#SiteBasketOptBtn,.SiteListTools #SiteListMarkedBtn{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteTeal);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
.SiteListMenuBtn:hover{border-color:var(--SiteTeal);background:var(--SiteTealTint);color:var(--SiteTealDark)}
.SiteListTools #SiteListMarkedBtn{margin-inline-start:auto;border-color:var(--SiteTeal);background:var(--SiteTeal);color:#fff}
.SiteListTools #SiteListMarkedBtn:hover{border-color:var(--SiteTealDark);background:var(--SiteTealDark);color:#fff;text-decoration:none}
.SiteListMenuBtn[hidden],.SiteListTools #SiteListMarkedBtn[hidden],#SiteBasketOptBtn[hidden],.SiteBasketDlg .SiteScopes[hidden]{display:none}
.SiteListTools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-top:8px}
.SiteListTools .SiteResSort,.SiteListTools .SiteResStore{margin:0;font-size:14px}
.SiteListTools .SiteResSort a{min-height:32px;padding:0 12px;font-size:13px}
.SiteListTools .SiteResStore a{min-height:32px}
.SiteBasketDlg .SiteScopes{margin:8px 0}
.SiteBasketDlg .SiteSaleNote{margin:8px 0 0;color:var(--SiteText2);font-size:13px}
.SiteBasketDlg .SiteListDlgRow{margin:12px 0 0}
.SiteBasketDlg .SiteBtn{min-height:44px;padding:0 16px;font-size:15px}
.SiteListMenuH{margin:10px 0 2px;font-size:13px;color:var(--SiteText2)}
.SiteListMenuItem{display:block;width:100%;padding:8px 10px;border:0;border-radius:10px;background:none;color:var(--SiteText);font:inherit;text-align:start;cursor:pointer}
.SiteListMenuItem:hover{background:var(--SiteTealTint);text-decoration:none}
.SiteListMenuItem b{display:block;color:var(--SiteTeal);font-size:15px}
.SiteListMenuItem span{display:block;color:var(--SiteText2);font-size:13px}
@media (hover:none){
	.SiteListMenuBtn,.SiteListTools #SiteListMarkedBtn,.SiteListTools .SiteResSort a,.SiteListTools .SiteResStore a{min-height:40px}
}
/*2026-10-02 - The mark, an icon button under the list control: an outline while the product is not marked, filled teal when it is. A marked card is tinted, its name struck and its picture dimmed, so the bought products are told from the rest at a glance.*/
.SiteProdMark{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;padding:0;border:1px solid var(--SiteField);border-radius:10px;background:#fff;color:var(--SiteText2)}
.SiteProdMark:hover{border-color:var(--SiteTeal);color:var(--SiteTeal)}
.SiteProdMark[aria-pressed="true"]{--SiteFocus:var(--SiteTealDark);border-color:var(--SiteTeal);background:var(--SiteTeal);color:#fff}
.SiteProdMark[aria-pressed="true"]:hover{background:var(--SiteTealDark);color:#fff}
.SiteProdMark[disabled]{opacity:.6;cursor:progress}
.SiteProdMarked{background:var(--SiteTealTint);border-color:var(--SiteBlue)}
.SiteProdMarked .SiteProdName a{color:var(--SiteText2);text-decoration:line-through}
.SiteProdMarked .SiteProdPic img{opacity:.6}
/*2026-10-02 - The dialog of the list's actions (Site.js), in the sale dialog's box: the marked products as name and quantity, each action as a part with its sentence, a select or a number, and its button. A button that cannot be undone is outlined red.*/
.SiteListDlg .SiteSaleBox{max-height:calc(100vh - 24px);overflow-y:auto}
.SiteListDlgItems{margin:0 0 10px;padding:0;list-style:none;max-height:calc(100vh - 430px);min-height:44px;overflow-y:auto;border-top:1px solid var(--SiteLine);font-size:15px}
.SiteListDlgItems li{display:flex;justify-content:space-between;gap:10px;padding:6px 4px;border-bottom:1px solid var(--SiteLine)}
.SiteListDlgItems b{flex:none}
.SiteListDlgPart{margin:0 0 12px;padding:12px;border:1px solid var(--SiteLine);border-radius:10px}
.SiteListDlgPart h3{margin:0 0 4px;font-size:16px}
.SiteListDlgPart p{margin:0 0 8px;font-size:14px;color:var(--SiteText2)}
.SiteListDlgRow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.SiteListDlgRow label{flex:1 1 100%;font-size:14px;font-weight:600}
.SiteListDlgRow select,.SiteListDlgRow input{flex:1 1 160px;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--SiteField);border-radius:10px;background:#fff;font-size:16px}
.SiteListDlgRow input{flex:0 0 96px}
.SiteListDlg .SiteBtn{min-height:44px;padding:0 16px;font-size:15px}
.SiteListDlgBad{border:1px solid #b3261e;background:#fff;color:#b3261e}
.SiteListDlgBad:hover{background:#fdecea;color:#b3261e}
.SiteListDlg[aria-busy="true"] .SiteBtn{opacity:.55;cursor:progress}
@media (hover:none){
	.SiteListActs a,.SiteListActs .SiteLinkBtn{min-height:40px}
	.SiteProdMark{min-height:44px}
}
@media (min-width:768px){
	.SiteListBasket .SiteBasket{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
	.SiteListBasket .SiteScopes{flex:0 1 420px}
	.SiteListBasket .SiteBasketRow{flex:0 0 280px}
	.SiteListBasket .SiteWait{flex:1 1 100%}
}
/*2026-10-02 - Queue item 19, the help page (Guide.html): a narrow column; the filter field; the index as pills; each guide a white box that opens (a <details>, plus and minus at its end); the videos as tiles with a play mark, two in a row on a phone and three from 768px. scroll-margin keeps an anchor's target clear of the header and the list bar.*/
.SiteGuidePage{max-width:920px}
.SiteGuidePage h1{font-size:24px}
.SiteGuidePage > .SiteCardText{margin:6px 0 14px}
.SiteGuideFind input{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--SiteField);border-radius:12px;background:#fff;font-size:16px}
.SiteGuideIndex{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.SiteGuideIndex a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteTeal);font-size:14px;font-weight:600}
.SiteGuideIndex a:hover{background:var(--SiteTealTint);text-decoration:none}
.SiteGuideGroup{margin-top:24px;scroll-margin-top:140px}
.SiteGuideGroup h2{margin:0 0 10px;font-size:19px}
.SiteGuide{margin-bottom:8px;border:1px solid var(--SiteLine);border-radius:14px;background:#fff;scroll-margin-top:140px}
.SiteGuide[open]{border-color:var(--SiteBlue)}
.SiteGuide summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 16px;border-radius:14px;font-family:var(--SiteHead);font-weight:700;font-size:17px;color:var(--SiteTealDark);cursor:pointer;list-style:none}
.SiteGuide summary::-webkit-details-marker{display:none}
.SiteGuide summary::after{content:"+";flex:none;font-family:var(--SiteBody);font-size:24px;font-weight:400;line-height:1;color:var(--SiteTeal)}
.SiteGuide[open] summary::after{content:"\2212"}
.SiteGuide summary:hover{color:var(--SiteTeal)}
.SiteGuideBody{padding:0 16px 16px;line-height:1.65}
.SiteGuideBody p{margin:0 0 10px}
.SiteGuideBody ol,.SiteGuideBody ul{margin:0 0 10px;padding-inline-start:22px}
.SiteGuideBody li{margin-bottom:4px}
.SiteGuideActs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:4px}
.SiteGuideActs a:not(.SiteBtn){display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.SiteGuideDemo{min-height:44px;padding:0 16px;font-size:15px}
.SiteGuideDemo .SiteGuidePlay{width:26px;height:26px;background:#fff;color:var(--SiteTeal)}
.SiteGuideVids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.SiteGuideVid{display:flex;align-items:center;gap:10px;height:100%;min-height:64px;padding:10px 12px;border:1px solid var(--SiteLine);border-radius:14px;background:#fff;color:var(--SiteText);font-weight:600;font-size:14px;line-height:1.3}
.SiteGuideVid:hover{border-color:var(--SiteTeal);color:var(--SiteText);text-decoration:none}
.SiteGuidePlay{flex:none;width:36px;height:36px;border-radius:50%;background:var(--SiteTeal);color:#fff;display:flex;align-items:center;justify-content:center}
.SiteGuidePlay svg{margin-left:2px}
.SiteGuideMore{margin-top:24px}
/*2026-10-02 - The filter hides guides, tiles and groups by the hidden attribute; the tiles' and the index's own display would otherwise win over it.*/
.SiteGuidePage [hidden]{display:none}
/*2026-10-02 - A portrait recording (the app's, 250 x 541): a narrow dialog, no taller than the window less the close button above it.*/
.SiteVideoDlgTall{width:min(380px,calc(100vw - 32px),calc((100vh - 130px) * .462))}
.SiteVideoDlgTall .SiteVideo{aspect-ratio:250/541}
@media (min-width:768px){
	.SiteGuidePage h1{font-size:28px}
	.SiteGuideVids{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media (min-width:1024px){
	.SiteGuideGroup h2{font-size:22px}
}
/*2026-10-03 - Queue item 24, the category page (Category-Products.html): the breadcrumb, the heading with the department's line icon and "כל הקטגוריות", the level's categories as chips (one scrolling row on a phone, wrapped from 768px), the current sort as a pill that is not a link, and the dialog of the whole tree - a <details> per department and per level 2. The current category is filled with the logo's blue.*/
.SiteCrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0 0 8px;padding:0;list-style:none;font-size:14px;color:var(--SiteText2)}
.SiteCrumbs li+li::before{content:"\203A";margin-inline-end:6px}
.SiteCrumbs a{display:inline-flex;align-items:center;min-height:32px;font-weight:600}
.SiteCatHead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.SiteCatHead h1{margin:0;font-size:22px;overflow-wrap:anywhere}
.SiteCatHead .SiteCatIcon{flex:none}
.SiteCatAllBtn{margin-inline-start:auto}
.SiteCatAllBtn[hidden]{display:none}
.SiteCatChips{display:flex;gap:8px;margin:12px 0 0;padding:2px 0 6px;list-style:none;overflow-x:auto;scrollbar-width:thin}
.SiteCatChips li{flex:none}
.SiteCatChips a,.SiteCatChips span,.SiteCatSub a,.SiteCatSub span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteText);font-size:14px;font-weight:600;white-space:nowrap}
.SiteCatChips a:hover,.SiteCatSub a:hover{border-color:var(--SiteTeal);text-decoration:none}
.SiteCatChips [aria-current="page"],.SiteCatSub [aria-current="page"]{background:var(--SiteBlue);border-color:var(--SiteBlue);color:#fff}
/*2026-10-05 - SiteRedesign_PageInventory.md 5.4.10: the department's level-2 row - tabs, not pills, so it cannot be read as a second row of chips: plain links on one rule, the current one marked by a blue bar; its text is the darker teal, since the logo's blue is under 4.5:1 on the page. One scrolling row on a phone, wrapped from 768px.*/
.SiteCatL2{margin:12px 0 0;border-bottom:1px solid var(--SiteLine)}
.SiteCatL2 ul{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:thin}
.SiteCatL2 li{flex:none}
.SiteCatL2 a,.SiteCatL2 span{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--SiteTealDark);font-size:15px;font-weight:600;white-space:nowrap}
.SiteCatL2 a:hover{box-shadow:inset 0 -3px 0 var(--SiteTeal);text-decoration:none}
.SiteCatL2 [aria-current]{color:var(--SiteTeal);font-weight:700;box-shadow:inset 0 -3px 0 var(--SiteBlue)}
.SiteCatL2 + .SiteCatChips{margin-top:8px}
.SiteCatCount{margin-top:10px}
.SiteResSort span[aria-current="true"]{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--SiteTeal);border-radius:999px;background:var(--SiteTeal);color:#fff;font-weight:600}
.SiteCatLost{margin-top:16px}
.SiteCatTreeList{max-height:calc(100vh - 150px);overflow-y:auto;margin-top:8px;border-top:1px solid var(--SiteLine)}
.SiteCatDept{border-bottom:1px solid var(--SiteLine)}
.SiteCatDept > summary,.SiteCatSub > summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.SiteCatDept > summary::-webkit-details-marker,.SiteCatSub > summary::-webkit-details-marker{display:none}
.SiteCatDept > summary{min-height:56px;padding:6px 4px;font-size:16px;font-weight:700}
.SiteCatDept > summary .SiteCatIcon{flex:none;width:36px;height:36px}
.SiteCatDept > summary::after,.SiteCatSub > summary::after{content:"+";margin-inline-start:auto;font-size:22px;font-weight:400;line-height:1;color:var(--SiteTeal)}
.SiteCatDept[open] > summary::after,.SiteCatSub[open] > summary::after{content:"\2212"}
.SiteCatSub{padding-inline-start:46px}
.SiteCatSub > summary{min-height:44px;padding-inline-end:4px;font-weight:600;color:var(--SiteTealDark)}
.SiteCatSub ul{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none}
.SiteCatSub a,.SiteCatSub span{min-height:36px;white-space:normal}
/*2026-10-05 - SiteRedesign_PageInventory.md 5.4.11, Fable 5.1's proposal: the category page's head took ~333px before the first card (owner: "all of this image is too high. the 3rd level categories are huge"). Every row slimmer: the breadcrumb; the department's icon 40px (the home grid's 72px at 1024px reached it unscoped); "כל הקטגוריות" a sort-size pill; the level-2 tabs 36px; the level-3 chips 28px (the tree dialog's .SiteCatSub keeps 36px); the heading 22px on every width. A touch screen keeps 40px. The 404 state's "כל הקטגוריות" stays a full button - there it is the page's one action.*/
.SiteCrumbs ol{margin-bottom:4px}
.SiteCrumbs a{min-height:28px}
.SiteCatHead{gap:6px 12px}
.SiteCatHead .SiteCatIcon{width:40px;height:40px}
.SiteCatHead .SiteCatIcon svg{width:22px;height:22px}
.SiteCatHead .SiteCatAllBtn{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteText);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.SiteCatHead .SiteCatAllBtn:hover{border-color:var(--SiteTeal)}
.SiteCatHead .SiteCatAllBtn[hidden]{display:none}
.SiteCatL2{margin-top:8px}
.SiteCatL2 a,.SiteCatL2 span{min-height:36px;padding:0 10px;font-size:14px}
.SiteCatChips{gap:6px;padding-bottom:4px}
.SiteCatL2 + .SiteCatChips{margin-top:6px}
.SiteCatChips a,.SiteCatChips span{min-height:28px;padding:0 10px;font-size:13px}
@media (hover:none){
	.SiteCrumbs a,.SiteCatHead .SiteCatAllBtn,.SiteCatL2 a,.SiteCatL2 span,.SiteCatChips a,.SiteCatChips span{min-height:40px}
}
@media (min-width:768px){
	.SiteCatChips{flex-wrap:wrap;overflow:visible}
	.SiteCatL2 ul{flex-wrap:wrap;overflow:visible}
	/*.SiteCatHead h1{font-size:26px}*/
}
/*2026-10-03 - Queue item 28, the product page (Product-Prices.html): the out-of-stock ground of a card (any page) and of a store's row, the card at the page's scale (one column, a larger picture and name), the facts, the quiet pills, the location line, the store list (logo, store, price, the price page's arrow), the stock chips, the cheapest stores' dialog and the history graph. Red #b3261e and green #177a3e pass 4.5:1 with white.*/
.SiteProdIsOut{background:#fdeceb;border-color:#b3261e}
.SiteProdIsOut .SiteProdPrice{border-top-color:#f0c2be}
.SiteProdOutLine{margin:0}
.SiteProdOut{display:inline-block;padding:1px 10px;border-radius:999px;background:#b3261e;color:#fff;font-size:12px;font-weight:700}
.SiteResGrid.SiteProdTop{grid-template-columns:minmax(0,1fr)}
.SiteProdTop .SiteProd{padding:16px}
.SiteProdTop .SiteProdName{font-family:var(--SiteHead);font-size:21px;line-height:1.25;overflow-wrap:anywhere}
.SiteProdNote{margin:0;font-size:12px;color:var(--SiteText2);text-align:center}
.SiteProdPage .SiteResStore{margin-top:8px}
.SiteProdFacts{margin-top:14px}
.SiteProdFacts h2,.SiteProdStores h2,.SiteProdHistory h2{margin:0;font-size:19px}
.SiteProdFactList{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);align-items:baseline;gap:8px 14px;margin:0;font-size:15px}
.SiteProdFactList dt{font-weight:700;color:var(--SiteText2)}
.SiteProdFactList dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;overflow-wrap:anywhere}
.SiteProdFactList dd a{font-weight:600}
/*2026-10-03 - Queue item 32 (owner: "כל קבוצת חלופיים בשורה משלה"): the alternative-product groups stack, each on a line of its own, from the right edge.*/
.SiteProdFactList dd.SiteProdAlts{flex-direction:column;align-items:flex-start}
.SiteProdFactList b{white-space:nowrap}
.SiteProdPill,.SiteProdActs a,.SiteProdActs button{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteTeal);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
.SiteProdPill:hover,.SiteProdActs a:hover,.SiteProdActs button:hover{border-color:var(--SiteTeal);background:var(--SiteTealTint);color:var(--SiteTealDark);text-decoration:none}
.SiteProdPill[aria-busy="true"],.SiteProdPill[disabled]{opacity:.6;cursor:progress}
.SiteProdActs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.SiteProdStores{margin-top:24px}
.SiteProdLoc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0;font-size:15px}
/*.SiteStoreList{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}*/
/*2026-10-03 - Owner: "זה לא הגיוני שהתפריט הימני יותר ארוך מרשימת המחירים". The online-store dialog's list has the same class, and its cap (the window less 300px, its own scroll) cut the page's store list short. The page's list is scoped to the page and uncapped - every store at full length; the dialog keeps its cap and its margin.*/
/*2026-10-04 - Owner: the price far from its store. One store, one price and a logo cannot fill a 900px row: the page's list is a grid of store cards - two a line on a wide panel, one on a phone - so the price sits within one eye-span of its store.*/
/*.SiteProdStores .SiteStoreList{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none;max-height:none;overflow:visible}*/
/*2026-10-04 - Owner: the list (default) or the cards, the user's switch. The list is one column; the cards (.SiteStoresCards) are the grid.*/
/*.SiteProdStores .SiteStoreList{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none;max-height:none;overflow:visible}*/
.SiteProdStores .SiteStoreList{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none;max-height:none;overflow:visible}
/*2026-10-05 - Queue item 51 (Fable 5.1's store card, owner "yes"): the card no longer has a fixed price column, so a 300px card fits - two a line at 768 / 1024 / 1280, three from ~1440.*/
/*.SiteProdStores .SiteStoreList.SiteStoresCards{grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr))}*/
.SiteProdStores .SiteStoreList.SiteStoresCards{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
/*2026-10-04 - Queue item 47, slice 2: the row's arrow to /Price/ is dropped, and its 24px column with it.*/
/*.SiteStoreRow{display:grid;grid-template-columns:48px minmax(0,1fr) auto 24px;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid var(--SiteLine);border-radius:12px}*/
/*2026-10-04 - Owner: "bad design" - the price sat at the card's far edge, far from its store. The info column is capped and the grid packs to the start, so the price follows the store; the price column is a fixed width, so every row's price starts at the same place.*/
/*.SiteStoreRow{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid var(--SiteLine);border-radius:12px}*/
/*2026-10-04 - Owner: "seriously?" - the capped info column left half of every row an empty block. The price leads the row instead (.SiteStorePrice's order, below): next to the logo and the name, every price at the same x, and the free space is the ragged end of the text.*/
/*.SiteStoreRow{display:grid;grid-template-columns:48px minmax(0,26em) 8.5em;justify-content:start;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid var(--SiteLine);border-radius:12px}*/
/*2026-10-04 - The card: logo, store, and a fixed 9em price slot at its end; the price no longer leads.*/
/*.SiteStoreRow{display:grid;grid-template-columns:8.5em 48px minmax(0,1fr);align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid var(--SiteLine);border-radius:12px}*/
/*2026-10-04 - The list row: logo, store, the stock in the middle column, the price's fixed slot; a smaller padding, so the row is shorter.*/
/*.SiteStoreRow{display:grid;grid-template-columns:48px minmax(0,1fr) 9em;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid var(--SiteLine);border-radius:12px}*/
.SiteStoreRow{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr) 9em;align-items:center;gap:2px 12px;padding:6px 10px;background:#fff;border:1px solid var(--SiteLine);border-radius:12px}
.SiteStoreLogo{grid-column:1}
.SiteStoreMain{grid-column:2}
.SiteStoreStock{grid-column:3;justify-self:center}
.SiteStorePrice{grid-column:4}
/*2026-10-04 - The card: the logo and the price span two rows, the stock sits under the store.*/
/*.SiteStoresCards .SiteStoreRow{grid-template-columns:48px minmax(0,1fr) 9em;gap:2px 10px;padding:10px}*/
/*.SiteStoresCards .SiteStoreLogo{grid-row:1 / 3}*/
/*.SiteStoresCards .SiteStoreMain{grid-row:1}*/
/*.SiteStoresCards .SiteStoreStock{grid-column:2;grid-row:2;justify-self:start}*/
/*.SiteStoresCards .SiteStorePrice{grid-column:3;grid-row:1 / 3}*/
/*2026-10-05 - Queue item 51 (owner: "Cards are too big and ineffective"; Fable 5.1's card, owner "yes"): the logo (40x30) on the first row only, the price column sized to its content and every cell at the top - the price on the store's line. The basket's card: its stock cell (index, exact, stand-in, average) stays a full-width line under the store; its price cell keeps the delivery and "פירוט".*/
.SiteStoresCards .SiteStoreRow{grid-template-columns:40px minmax(0,1fr) auto;align-items:start;gap:2px 10px;padding:10px}
.SiteStoresCards .SiteStoreLogo{grid-row:1;width:40px;height:30px}
.SiteStoresCards .SiteStoreMain{grid-row:1}
.SiteStoresCards .SiteStoreStock{grid-column:2 / -1;grid-row:2;justify-self:start}
.SiteStoresCards .SiteStorePrice{grid-column:3;grid-row:1}
/*2026-10-05 - Queue item 51: the product page's card places each line itself - the store's and the price's boxes step aside (display:contents; the DOM order, store then price, is what a screen reader reads). Row 1 logo | name | price; row 2 grade | price per unit; row 3 distance or "אונליין" | the stock (chip or "דיווח מלאי") under the price; row 4 a general product's source, the card's width, one line with an ellipsis - the full name and barcode are in its hover card. An ungraded store's row 2 holds the unit price only, or nothing. Scoped to .SiteStoreList, so it outranks the phone's list rules and never reaches the basket.*/
.SiteStoreList.SiteStoresCards .SiteStoreRow{grid-template-columns:40px minmax(0,1fr) auto;align-items:start;gap:2px 10px;padding:10px}
.SiteStoreList.SiteStoresCards .SiteStoreMain,.SiteStoreList.SiteStoresCards .SiteStorePrice{display:contents}
.SiteStoreList.SiteStoresCards .SiteStoreLogo{grid-column:1;grid-row:1}
.SiteStoreList.SiteStoresCards .SiteStoreTitle{grid-column:2;grid-row:1;min-width:0}
.SiteStoreList.SiteStoresCards .SiteStoreBig{grid-column:3;grid-row:1}
.SiteStoreList.SiteStoresCards .SiteStoreTitle + .SiteStoreMeta{grid-column:2;grid-row:2}
.SiteStoreList.SiteStoresCards .SiteStoreUnit{grid-column:3;grid-row:2}
.SiteStoreList.SiteStoresCards .SiteStoreMain > .SiteStoreMeta:last-child{grid-column:2;grid-row:3}
.SiteStoreList.SiteStoresCards .SiteStoreStock{grid-column:3;grid-row:3;justify-self:start}
.SiteStoreList.SiteStoresCards .SiteStoreSource{grid-column:1 / -1;grid-row:4;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:none){
	.SiteStoreList.SiteStoresCards .SiteStockAsk{min-height:44px}
}
.SiteStoreLogo{display:flex;align-items:center;justify-content:center;width:48px;height:36px}
.SiteStoreLogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.SiteStoreMain{min-width:0;display:flex;flex-direction:column;gap:2px}
.SiteStoreTitle{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:0}
.SiteStoreName{font-weight:700;color:var(--SiteText);overflow-wrap:anywhere}
.SiteStoreHereTag{padding:0 8px;border-radius:999px;background:var(--SiteTeal);color:#fff;font-size:12px;font-weight:700}
.SiteStoreMeta{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:0;font-size:13px;color:var(--SiteText2)}
.SiteStoreMeta a{display:inline-flex;align-items:center;min-height:24px}
.SiteStoreStock{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:12px;color:var(--SiteText2)}
.SiteStoreStock:empty{display:none}
/*2026-10-03 - Queue item 37: a general product's row names the product that gave the price - one quiet line under the store, the name in teal; a long name wraps.*/
.SiteStoreSource{margin:0;font-size:13px;line-height:24px;color:var(--SiteText2);overflow-wrap:anywhere}
.SiteStoreSource a,.SiteStoreSource span{color:var(--SiteTeal);font-weight:700}
.SiteStockChip{padding:0 8px;border:1px solid;border-radius:999px;font-weight:700}
.SiteStockOut{border-color:#b3261e;background:#b3261e;color:#fff}
.SiteStockStale{border-color:#9a5b00;background:#fff;color:#9a5b00}
.SiteStockIn{border-color:#177a3e;background:#fff;color:#177a3e}
/*2026-10-04 - Owner: the prices zigzagged - aligned to the end, a price with a crossed-out old price stood further right than one without. Aligned to the start, every new price starts at the same x and the old price trails it.*/
/*.SiteStorePrice{display:flex;flex-direction:column;align-items:flex-end;text-align:left}*/
/*.SiteStoreBig{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:0 6px;margin:0;cursor:help}*/
/*2026-10-04 - The price is placed first by order only; the DOM keeps the store before its price, so a screen reader reads them in that order.*/
/*.SiteStorePrice{display:flex;flex-direction:column;align-items:flex-start;text-align:start}*/
/*2026-10-04 - The price is back in DOM order, at the card's end.*/
/*.SiteStorePrice{display:flex;flex-direction:column;align-items:flex-start;text-align:start;order:-1}*/
.SiteStorePrice{display:flex;flex-direction:column;align-items:flex-start;text-align:start}
.SiteStoreBig{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:0 6px;margin:0;cursor:help}
.SiteStoreBig b{font-size:19px;line-height:1.2;white-space:nowrap}
.SiteStoreBig s{font-size:13px;color:var(--SiteText2);white-space:nowrap}
.SiteStoreBig[aria-busy="true"]{opacity:.6}
.SiteStoreUnit,.SiteStoreDate{margin:0;font-size:12px;color:var(--SiteText2);white-space:nowrap}
/*2026-10-04 - Queue item 47, slice 2: the rows' arrow is gone; the store dialog's .SiteStoreGo keeps its own scoped rules.*/
/*.SiteStoreGo{display:flex;align-items:center;justify-content:center;width:24px;height:44px;font-size:26px;line-height:1;color:var(--SiteText2)}*/
/*.SiteStoreGo:hover{color:var(--SiteTeal);text-decoration:none}*/
.SiteStoreHere{border-color:var(--SiteTeal);box-shadow:inset 0 0 0 1px var(--SiteTeal)}
.SiteStoreIsOut{background:#fdeceb;border-color:#b3261e}
.SiteCheapList{display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.SiteCheapList a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 12px;border:1px solid var(--SiteLine);border-radius:10px;font-weight:600}
.SiteCheapList a:hover{border-color:var(--SiteTeal);text-decoration:none}
.SiteCheapList span{flex:none;font-weight:400;color:var(--SiteText2)}
.SiteProdHistory{margin-top:24px}
.SiteGraph{display:block;width:100%;height:auto;direction:ltr}
.SiteGraph line{stroke:var(--SiteLine);stroke-width:1}
.SiteGraph text{font:12px var(--SiteBody);fill:var(--SiteText2)}
.SiteGraph polyline{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
/*.SiteGraph .SiteGraphMax{stroke:#b3261e}*/
/*2026-10-04 - The history graph's highest price takes the price's new red, #d32f2f.*/
.SiteGraph .SiteGraphMax{stroke:#d32f2f}
.SiteGraph .SiteGraphMin{stroke:#177a3e}
.SiteGraph circle{fill:#fff;stroke-width:2}
.SiteGraph rect{fill:transparent;cursor:pointer}
.SiteGraph rect:hover{fill:rgba(21,105,125,.08)}
.SiteGraphKey{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--SiteText2)}
.SiteGraphKey span{display:inline-block;width:16px;height:3px;margin-inline-end:6px;border-radius:2px;vertical-align:middle}
/*.SiteGraphKeyMax{background:#b3261e}*/
.SiteGraphKeyMax{background:#d32f2f}
.SiteGraphKeyMin{background:#177a3e}
@media (max-width:599px){
	/*2026-10-04 - Queue item 47, slice 2: no arrow column.*/
	/*.SiteStoreRow{grid-template-columns:40px minmax(0,1fr) auto 20px;gap:8px;padding:8px}*/
	/*2026-10-04 - A narrow row keeps the full width for the store; the price column stays fixed, so the prices line up.*/
	/*.SiteStoreRow{grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding:8px}*/
	/*2026-10-04 - A narrow row keeps the price at its end: the distance is small here, and a leading price column would squeeze the store's name to ~140px.*/
	/*.SiteStoreRow{grid-template-columns:40px minmax(0,1fr) 7em;gap:8px;padding:8px}*/
	/*2026-10-04 - One card a line on the phone; no order rule is needed any more.*/
	/*.SiteStoreRow{grid-template-columns:40px minmax(0,1fr) 6.5em;gap:8px;padding:8px}*/
	/*.SiteStorePrice{order:0}*/
	/*2026-10-04 - On the phone both views stack the stock under the store: a middle column would leave the name ~100px.*/
	/*.SiteStoreRow{grid-template-columns:40px minmax(0,1fr) 7em;gap:8px;padding:8px}*/
	.SiteStoreList .SiteStoreRow{grid-template-columns:40px minmax(0,1fr) 7em;gap:2px 8px;padding:8px}
	.SiteStoreList .SiteStoreLogo{grid-row:1 / 3}
	.SiteStoreList .SiteStoreMain{grid-row:1}
	.SiteStoreList .SiteStoreStock{grid-column:2;grid-row:2;justify-self:start}
	.SiteStoreList .SiteStorePrice{grid-column:3;grid-row:1 / 3}
	.SiteStoreLogo{width:40px;height:30px}
	/*.SiteStoreGo{width:20px}*/
}
@media (min-width:768px){
	.SiteProdTop .SiteProdRail{width:200px}
	.SiteProdTop .SiteProdPic{height:200px}
	.SiteProdTop .SiteProdName{font-size:26px}
}
@media (hover:none){
	.SiteProdPill,.SiteProdActs a,.SiteProdActs button{min-height:44px}
}
/*2026-10-03 - Owner: "70% - 80% above the fold is not prices - a gross waste of space". The prices come right under the product. Phone: the card, then the store list, then the facts, the actions and the graph. From 1024px: a 360px column of the card, its facts and its actions beside the store list, which starts at the top; the graph spans both under them. The card is smaller at every size, and in the column the facts are one column (the label over its value).*/
/*.SiteProdGrid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stores" "facts" "acts" "hist"}*/
/*2026-10-03 - Queue item 27: the GS1 section (gs1) under the actions.*/
.SiteProdGrid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stores" "facts" "acts" "gs1" "hist"}
.SiteProdHead{grid-area:head;min-width:0}
.SiteProdGrid .SiteProdStores{grid-area:stores;margin-top:16px}
.SiteProdGrid .SiteProdFacts{grid-area:facts;margin-top:20px}
.SiteProdGrid .SiteProdActs{grid-area:acts}
.SiteProdGrid .SiteProdHistory{grid-area:hist}
/*2026-10-03 - Queue item 27: the GS1 section - the old page's warning small and grey, the parts in the help page's closed rows, the nutrition table in lines (a section-header row tinted, a sub-row indented), sideways scroll when a table is wider than the column.*/
.SiteProdGrid .SiteProdGS1{grid-area:gs1;margin-top:14px}
.SiteProdGS1 h2{margin:0;font-size:19px}
.SiteProdGS1Warn{margin:6px 0 12px;font-size:13px;color:var(--SiteText2)}
.SiteProdGS1Part summary{min-height:44px;font-size:16px}
.SiteProdGS1Text{white-space:pre-line}
.SiteProdGS1Scroll{overflow-x:auto;margin-bottom:10px}
.SiteProdGS1Table{width:100%;border-collapse:collapse;font-size:14px}
.SiteProdGS1Table caption{padding-bottom:6px;font-weight:700;text-align:right}
.SiteProdGS1Table th,.SiteProdGS1Table td{padding:6px 8px;border-bottom:1px solid var(--SiteLine);text-align:right}
.SiteProdGS1Table thead th{font-size:13px;color:var(--SiteText2)}
.SiteProdGS1Table tbody th{font-weight:600}
.SiteProdGS1Table td{white-space:nowrap}
.SiteProdGS1Sub th{padding-inline-start:22px;font-weight:400}
.SiteProdGS1Sect th{background:var(--SiteTealTint);color:var(--SiteTealDark);font-weight:700}
.SiteProdGS1Note{margin:0 0 10px;font-size:13px;color:var(--SiteText2)}
.SiteProdTop .SiteProd{padding:12px}
.SiteProdTop .SiteProdName{font-size:19px}
@media (min-width:768px){
	.SiteProdTop .SiteProdRail{width:132px}
	.SiteProdTop .SiteProdPic{height:132px}
	.SiteProdTop .SiteProdName{font-size:21px}
}
@media (min-width:1024px){
	/*.SiteProdGrid{grid-template-columns:360px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"head stores" "facts stores" "acts stores" ". stores" "hist hist";column-gap:24px;align-items:start}*/
	/*2026-10-03 - Queue item 27: the GS1 section in the narrow column, under the actions; with no section the row is empty.*/
	.SiteProdGrid{grid-template-columns:360px minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr auto;grid-template-areas:"head stores" "facts stores" "acts stores" "gs1 stores" ". stores" "hist hist";column-gap:24px;align-items:start}
	.SiteProdGrid .SiteProdStores{margin-top:0}
	.SiteProdGrid .SiteProdFacts{margin-top:14px}
	.SiteProdTop .SiteProdRail{width:112px}
	.SiteProdTop .SiteProdPic{height:112px}
	.SiteProdTop .SiteProdName{font-size:19px}
	.SiteProdGrid .SiteProdFactList{grid-template-columns:minmax(0,1fr);gap:2px}
	.SiteProdGrid .SiteProdFactList dd{margin-bottom:8px}
}
/*2026-10-03 - Owner: no user would know to point at the price to report the stock. "דיווח מלאי" is visible on every store row - quiet teal text with a dotted line, the stock line's last item.*/
.SiteStockAsk{display:inline-flex;align-items:center;min-height:24px;color:var(--SiteTeal);font-weight:600;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.SiteStockAsk:hover{color:var(--SiteTealDark)}
.SiteStockAsk[aria-busy="true"]{opacity:.6;cursor:progress}
@media (hover:none){
	.SiteStockAsk{min-height:36px}
}
/*2026-10-03 - Owner: "why is the pill far from the store's name?" - .SiteStoreName is also the home page's store card class (flex-grow:1), which stretched the name across the row. In the store list the name takes its own width, and "החנות שלך" sits right beside it.*/
.SiteStoreTitle .SiteStoreName{display:inline;flex-grow:0}
/*2026-10-03 - Owner: the pill sat lower than the name. The home page's store card also has .SiteStoreRow, and its ".SiteStoreRow a" (inline-flex, 44px high, weight 600) reached every link of the product page's rows: the name became a 44px box with its text at the top. Inside the store list the links keep their own size; the rating keeps its 24px, the name its 700.*/
.SiteStoreList .SiteStoreRow a{min-height:0}
.SiteStoreList .SiteStoreName{font-weight:700}
/*2026-10-04 - Owner: "why so many lines?" - the home page's store line (a div.SiteStoreRow, SiteHomeFunctions.inc) took the product page's store row rule (.SiteStoreRow, a grid with a 48px logo column), so "חנות:" and the store's name were squeezed into 48px, one word a line, and the label turned bold. The home line keeps its own one-line flex row; the product page's rows are li.*/
div.SiteStoreRow{display:flex;flex-wrap:wrap;align-items:center;grid-template-columns:none;gap:0 14px;padding:8px 0 0;background:none;border:0;border-top:1px solid #e6eef0;border-radius:0}
div.SiteStoreRow .SiteStoreName{flex-grow:1;min-width:0;font-weight:400;color:inherit;overflow-wrap:normal}
.SiteStoreList .SiteStoreMeta a{min-height:24px}
/*2026-10-03 - Owner: the list bar's "לרשימה" stands out as on the home page's list card - filled with the site's teal, white bold text and the list icon; the bar's other pills stay quiet.*/
.SiteListBar a.SiteCardGo{gap:6px;border-color:var(--SiteTeal);background:var(--SiteTeal);color:#fff;font-weight:700}
.SiteListBar a.SiteCardGo:hover{border-color:var(--SiteTealDark);background:var(--SiteTealDark);color:#fff}
/*2026-10-03 - Owner: the area and the check-in are chosen on the product page. The two windows: a label over each field, 44px fields at full width (16px, so iOS does not zoom), the suggestions as a scrolling list of buttons under the field; the store line's link is a pill, as the location line's.*/
.SiteAreaDlg label{display:block;margin:12px 0 4px;font-weight:700}
.SiteAreaDlg input[type="text"],.SiteAreaDlg select{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--SiteField);border-radius:10px;background:#fff;font-size:16px}
.SiteAreaBox{position:relative}
.SiteAreaList{max-height:240px;overflow-y:auto;margin:4px 0 0;padding:4px;border:1px solid var(--SiteLine);border-radius:10px;list-style:none;background:#fff}
.SiteAreaList button{display:block;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:8px;background:none;text-align:right;font-size:15px}
/*.SiteAreaList button:hover,.SiteAreaList button:focus-visible{background:var(--SiteTealTint)}*/
/*2026-10-06 - Pre-launch review A7: the suggestion the field's arrows marked (aria-selected) gets the hover's tint, as the search's list does.*/
.SiteAreaList button:hover,.SiteAreaList button:focus-visible,.SiteAreaList button[aria-selected="true"]{background:var(--SiteTealTint)}
.SiteAreaNone{padding:8px 10px;color:var(--SiteText2);font-size:14px}
.SiteAreaDlg .SiteCardActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.SiteProdPage .SiteResStore{gap:6px 10px}
/*2026-10-03 - Owner: "why so big?" - the results page's ".SiteResStore a" (44px high) outranked the pill's 36px in the store line. The pill keeps its own size there; a touch screen keeps 44px.*/
.SiteResStore a.SiteProdPill{min-height:36px}
/*2026-10-03 - Owner: the favourite stores first, then the stores in the area. The check-in window's two lists under their headings; each store a row with its distance at the row's end; the store checked in now is marked in the logo's blue.*/
.SiteCheckInH{margin:14px 0 4px;font-family:var(--SiteBody);font-size:15px;font-weight:700;color:var(--SiteText2)}
.SiteCheckInPicks{max-height:220px}
.SiteAreaList button[data-market]{display:flex;align-items:center;justify-content:space-between;gap:10px}
.SiteCheckInKm{flex:none;font-size:13px;color:var(--SiteText2)}
.SiteAreaList button[aria-current="true"]{background:var(--SiteBlue);color:#fff}
.SiteAreaList button[aria-current="true"] .SiteCheckInKm{color:#fff}
/*2026-10-03 - Owner: the favourites' heading carries the gold star of the favourites, beside its words; the store checked in now says "החנות שלי" in bold at its row's end.*/
.SiteCheckInH{display:flex;align-items:center;gap:6px}
.SiteCheckInStar{display:inline-flex;color:#b98600}
.SiteCheckInStar svg{fill:#f5b400}
.SiteAreaList button[aria-current="true"] .SiteCheckInKm{font-weight:700}
/*2026-10-05 - Owner: "every place a store is shown, its grade is shown". In the check-in window the store's stars sit under its name, the distance stays at the row's end; on the store checked in now the number is white. In a store list the grade's link is 24px high.*/
.SiteCheckInName{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.SiteAreaList button[aria-current="true"] .SiteStars{color:#fff}
/*2026-10-05 - Store grade slice 3: on a store already chosen in My-Account's search results (aria-pressed, the teal ground) the number is white too.*/
.SiteAreaList button[aria-pressed="true"] .SiteStars{color:#fff}
/*2026-10-05 - Store grade slice 3: in "איפה הכי זול?" the store's name with its stars under it takes the row's width, the distance stays at the end. ".SiteCheapList span" (the distance's look) is undone for the name and the number.*/
.SiteCheapList .SiteCheckInName{flex:1 1 auto;padding:4px 0}
.SiteCheapList .SiteCheckInName > span:first-child{font-weight:600;color:inherit}
.SiteCheapList .SiteStars,.SiteCheapList .SiteStarsNum{font-weight:700}
.SiteStorePickLine a{display:inline-flex;align-items:center;min-height:24px}
@media (hover:none){
	.SiteResStore a.SiteProdPill{min-height:44px}
}
/*2026-10-03 - Queue item 35 (owner: "העמוד הזה נראה הזוי. בלגן אחד גדול בעיניים"): the product page's second layout, .SiteProdGrid2. Phone: the card, the tabs, the facts card - .SiteProdSide is display:contents, so its two parts sit around the tabs. From 1024px: a 320px side on the right (the card, the store line, the facts and the actions) and the tabs beside it. The tabs are one white card with the tab list on its top; without JS every panel is a card of its own under its heading. The store list is one list with hairlines, not a card per store.*/
.SiteProdGrid2{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "main" "facts"}
.SiteProdGrid2 .SiteProdSide{display:contents}
.SiteProdGrid2 .SiteProdMain{grid-area:main;min-width:0;margin-top:14px}
.SiteProdGrid2 .SiteProdFacts{gap:0;margin-top:14px;padding:14px 16px}
/*.SiteProdHere{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:8px 0 0;font-size:14px}*/
/*2026-10-03 - Owner: "זה לא צריך להיות ב-2 שורות כי הם קשורים אחד לשני" - the store and its החלפת חנות share a line; the link wraps under the name only when the column is too narrow.*/
.SiteProdHere{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin:8px 0 0;font-size:14px}
.SiteProdHere a{display:inline-flex;align-items:center;min-height:32px;font-weight:600}
.SiteProdFact{display:flex;justify-content:space-between;gap:10px;margin:0 0 6px;font-size:14px}
.SiteProdFact > span:first-child{color:var(--SiteText2)}
.SiteProdFactH{margin:8px 0 2px;font-size:13px;font-weight:700;color:var(--SiteText2)}
.SiteProdFactLinks{display:flex;flex-direction:column;align-items:flex-start;margin:0}
.SiteProdFactLinks a{display:inline-flex;align-items:center;min-height:32px;font-weight:600}
.SiteProdActList{margin:10px 0 0;padding:0;list-style:none}
.SiteProdActList a,.SiteProdActList button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;border:0;border-top:1px solid var(--SiteLine);background:none;color:var(--SiteTeal);font:inherit;font-size:15px;font-weight:600;text-align:right;cursor:pointer}
.SiteProdActList a:hover,.SiteProdActList button:hover{color:var(--SiteTealDark);text-decoration:none}
.SiteProdActList .SiteProdActQuiet{color:var(--SiteText2)}
.SiteProdTabList{display:flex;gap:2px;overflow-x:auto;padding:0 8px;border-bottom:1px solid var(--SiteLine);border-radius:16px 16px 0 0;background:#fff;scrollbar-width:none}
.SiteProdTabList[hidden],.SiteProdPanel[hidden]{display:none}
.SiteProdTabList button{flex:none;min-height:48px;padding:0 12px;border:0;border-bottom:3px solid transparent;background:none;color:var(--SiteText2);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.SiteProdTabList button:hover{color:var(--SiteTeal)}
.SiteProdTabList button[aria-selected="true"]{border-bottom-color:var(--SiteTeal);color:var(--SiteTeal);font-weight:700}
.SiteProdGrid2 .SiteProdPanel{margin:0;padding:14px 16px;background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(19,38,45,.08)}
.SiteProdTabs:not(.SiteTabsOn) .SiteProdPanel + .SiteProdPanel{margin-top:14px}
.SiteTabsOn{border-radius:16px;box-shadow:0 8px 24px rgba(19,38,45,.08)}
.SiteTabsOn .SiteProdPanel{border-radius:0 0 16px 16px;box-shadow:none}
.SiteProdPanelH{margin:0 0 8px;font-size:19px}
.SiteTabsOn .SiteProdPanelH{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.SiteProdWhere{margin:0;font-size:14px;color:var(--SiteText2)}
.SiteProdTools{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.SiteProdPanel .SiteResSort{margin-top:8px}
/*2026-10-04 - The store list is a card grid (above): the cards keep their border and gap inside the tabs panel too; "my store" is the card's teal border, not a side bar.*/
/*.SiteProdPanel .SiteStoreList{gap:0;margin-top:8px}*/
/*.SiteProdPanel .SiteStoreRow{padding:10px 4px;border:0;border-top:1px solid var(--SiteLine);border-radius:0;background:#fff}*/
/*.SiteProdPanel .SiteStoreRow:first-child{border-top:0}*/
/*.SiteProdPanel .SiteStoreHere{padding-inline-start:10px;box-shadow:inset -3px 0 0 var(--SiteTeal)}*/
/*2026-10-04 - In the tabs panel the list view is the flat rows again (border-top separators, the "my store" side bar, a 6px padding); the cards keep their border, "my store" the teal one, out of stock the red one.*/
/*.SiteProdPanel .SiteStoreList{margin-top:8px}*/
.SiteProdPanel .SiteStoreList{gap:0;margin-top:8px}
.SiteProdPanel .SiteStoreRow{padding:6px 4px;border:0;border-top:1px solid var(--SiteLine);border-radius:0;background:#fff}
.SiteProdPanel .SiteStoreRow:first-child{border-top:0}
.SiteProdPanel .SiteStoreHere{padding-inline-start:10px;box-shadow:inset -3px 0 0 var(--SiteTeal)}
.SiteProdPanel .SiteStoresCards{gap:8px}
.SiteProdPanel .SiteStoresCards .SiteStoreRow{padding:10px;border:1px solid var(--SiteLine);border-radius:12px}
.SiteProdPanel .SiteStoresCards .SiteStoreHere{border-color:var(--SiteTeal);box-shadow:inset 0 0 0 1px var(--SiteTeal)}
.SiteProdPanel .SiteStoresCards .SiteStoreIsOut{border-color:#b3261e}
.SiteProdPanel .SiteStoreIsOut{background:#fdeceb}
.SiteProdPanel .SiteStorePrice{min-width:96px}
.SiteProdTalk{margin:0;padding:0;list-style:none}
.SiteProdTalk li{padding:12px 0;border-top:1px solid var(--SiteLine)}
.SiteProdTalk li:first-child{padding-top:0;border-top:0}
.SiteProdTalk p{margin:0}
.SiteProdTalkTitle{font-weight:700}
.SiteProdTalkText{margin-top:4px!important;white-space:pre-line;overflow-wrap:anywhere}
.SiteProdTalkBy{font-size:13px;color:var(--SiteText2)}
/*2026-10-03 - The add link is above the comments now: the room goes under it.*/
.SiteProdTalkAdd{margin:0 0 12px}
.SiteProdGS1Grid{display:grid;gap:18px}
.SiteProdGS1Part h3{margin:0 0 6px;font-size:16px}
@media (min-width:768px){
	.SiteProdGS1Grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
	.SiteProdGrid2{grid-template-columns:320px minmax(0,1fr);grid-template-rows:none;grid-template-areas:"side main";column-gap:24px;align-items:start}
	.SiteProdGrid2 .SiteProdSide{display:block;grid-area:side;min-width:0}
	.SiteProdGrid2 .SiteProdMain{margin-top:0}
}
/*2026-10-03 - Queue item 42, the store pages (Store.html, Stores.html, Chain.html): the store's card (the chain's logo, the name, one fact per line, the check-in at full width), the hours with today in the teal tint, the tabs as links in the product page's tab look, the price-type chips in the cards' own colours (green #177a3e, orange #9a5b00, red #b3261e: white on each passes 4.5:1), the department select (16px, so iOS does not zoom), the sale's end under a card's price, two card columns beside the side from 1024px and three from 1280px.*/
.SiteStoreHead{gap:4px}
.SiteStoreHeadLogo{display:block;width:auto;max-width:96px;height:auto;max-height:72px;object-fit:contain}
.SiteStoreHead h1{margin:6px 0 2px;font-size:22px;line-height:1.25;overflow-wrap:anywhere}
.SiteStoreLine{margin:0;font-size:15px;overflow-wrap:anywhere}
.SiteStoreLine a{display:inline-flex;align-items:center;min-height:32px;font-weight:600}
.SiteStoreCheck{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 0}
.SiteStoreCheck .SiteBtn{width:100%}
.SiteStoreCheck .SiteStoreHereTag{padding:2px 12px;font-size:14px}
.SiteStoreHours{width:100%;border-collapse:collapse;font-size:14px}
.SiteStoreHours th,.SiteStoreHours td{padding:5px 6px;border-bottom:1px solid var(--SiteLine);text-align:right;vertical-align:top}
.SiteStoreHours th{font-weight:600;white-space:nowrap}
.SiteStoreToday th,.SiteStoreToday td{background:var(--SiteTealTint);color:var(--SiteTealDark);font-weight:700}
.SiteStoreHoursDate{margin:6px 0 0;font-size:13px;color:var(--SiteText2)}
.SiteStoreSide .SiteProdFactH{margin-top:0}
.SiteProdTabList a{display:inline-flex;flex:none;align-items:center;min-height:48px;padding:0 12px;border-bottom:3px solid transparent;color:var(--SiteText2);font-size:15px;font-weight:600;white-space:nowrap}
.SiteProdTabList a:hover{color:var(--SiteTeal);text-decoration:none}
.SiteProdTabList a[aria-current="page"]{border-bottom-color:var(--SiteTeal);color:var(--SiteTeal);font-weight:700}
.SiteResSort a.SiteChipLow,.SiteResSort span.SiteChipLow{border-color:#177a3e;color:#177a3e}
/*.SiteResSort a.SiteChipMid,.SiteResSort span.SiteChipMid{border-color:#9a5b00;color:#9a5b00}*/
/*2026-10-04 - The store page's "בטווח" chip follows the in-range price's new orange.*/
/*.SiteResSort a.SiteChipMid,.SiteResSort span.SiteChipMid{border-color:#c2410c;color:#c2410c}*/
/*2026-10-04 - The chip follows the price's orange, #c05600.*/
/*.SiteResSort a.SiteChipMid,.SiteResSort span.SiteChipMid{border-color:#c05600;color:#c05600}*/
/*2026-10-04 - The chip follows the price's orange, #e65c00.*/
/*.SiteResSort a.SiteChipMid,.SiteResSort span.SiteChipMid{border-color:#e65c00;color:#e65c00}*/
/*.SiteResSort a.SiteChipMid,.SiteResSort span.SiteChipMid{border-color:#e07800;color:#e07800}*/
/*2026-10-05 - Pre-launch review L8, owner: the chip's 14px text needs 4.5:1 - #b55d00 (4.6:1); the border keeps the orange. The chosen chip (orange ground, dark text) already passes.*/
.SiteResSort a.SiteChipMid,.SiteResSort span.SiteChipMid{border-color:#e07800;color:#b55d00}
/*.SiteResSort a.SiteChipHigh,.SiteResSort span.SiteChipHigh{border-color:#b3261e;color:#b3261e}*/
/*2026-10-04 - The "הכי יקר" chip follows the price's new red, #d32f2f.*/
.SiteResSort a.SiteChipHigh,.SiteResSort span.SiteChipHigh{border-color:#d32f2f;color:#d32f2f}
.SiteResSort span.SiteChipLow[aria-current="true"]{background:#177a3e;color:#fff}
/*.SiteResSort span.SiteChipMid[aria-current="true"]{background:#9a5b00;color:#fff}*/
/*.SiteResSort span.SiteChipMid[aria-current="true"]{background:#c2410c;color:#fff}*/
/*.SiteResSort span.SiteChipMid[aria-current="true"]{background:#c05600;color:#fff}*/
/*2026-10-04 - White on #e65c00 is 3.6:1, too little for the chip's text; dark text on it is 5.9:1.*/
/*.SiteResSort span.SiteChipMid[aria-current="true"]{background:#e65c00;color:#1f1f1f}*/
.SiteResSort span.SiteChipMid[aria-current="true"]{background:#e07800;color:#1f1f1f}
/*.SiteResSort span.SiteChipHigh[aria-current="true"]{background:#b3261e;color:#fff}*/
.SiteResSort span.SiteChipHigh[aria-current="true"]{background:#d32f2f;color:#fff}
.SiteStoreDept{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px}
.SiteStoreDept label{font-weight:700}
.SiteStoreDept select{flex:0 1 320px;min-width:0;min-height:44px;padding:0 10px;border:1px solid var(--SiteField);border-radius:10px;background:#fff;font-size:16px}
.SiteProdEnds{font-size:13px}
.SiteStorePage .SiteResCount{margin-top:10px}
@media (min-width:1024px){
	.SiteStorePage .SiteResGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
	.SiteStorePage .SiteResGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/*2026-10-03 - Queue item 42: the store search and the chain page - the search field and its button on one row (16px, so iOS does not zoom), each part under its heading, the store rows as one white card with hairlines (the store and a line under it, the check-in at the row's end, the checked-in store marked by the teal edge, a store not updated today in grey words), the chains as a wrapping list of quiet pills, the hidden-chains notice in red.*/
.SiteStoresPage h1{font-size:24px}
.SiteStoresFind{margin-top:12px}
.SiteStoresFind label{display:block;margin-bottom:4px;font-weight:700}
.SiteStoresBox{display:flex;gap:8px}
.SiteStoresBox input{flex:1 1 auto;min-width:0;min-height:48px;padding:0 12px;border:1px solid var(--SiteField);border-radius:12px;background:#fff;font-size:16px}
.SiteStoresPart{margin-top:22px}
.SiteStoresPart h2{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:19px}
.SiteStoresPart > p{margin:0 0 8px;color:var(--SiteText2)}
.SiteStorePicks{margin:0;padding:0;list-style:none;background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(19,38,45,.08)}
.SiteStorePick{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:8px 14px;border-top:1px solid var(--SiteLine)}
.SiteStorePick:first-child{border-top:0}
.SiteStorePickMain{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.SiteStorePickName{font-weight:700;overflow-wrap:anywhere}
.SiteStorePickLine{font-size:13px;color:var(--SiteText2)}
.SiteStorePick.SiteStoreHere{border-color:var(--SiteLine);box-shadow:inset -3px 0 0 var(--SiteTeal)}
.SiteStorePickOff .SiteStorePickName{color:var(--SiteText2)}
.SiteStorePick .SiteProdPill,.SiteStorePick .SiteStoreHereTag{flex:none}
.SiteStoresChains{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.SiteStoresChains a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteText);font-size:14px;font-weight:600}
.SiteStoresChains a:hover{border-color:var(--SiteTeal);text-decoration:none}
.SiteStoresNote{margin:16px 0 0;padding:10px 14px;border:1px solid #b3261e;border-radius:12px 12px 0 0;background:#fdeceb;color:var(--SiteText)}
.SiteStoresNoteLink{margin-top:0;border-top:0;border-radius:0 0 12px 12px}
.SiteStoresNoteLink a{display:inline-flex;align-items:center;min-height:32px;font-weight:700}
.SiteChainHead{display:flex;align-items:center;gap:14px;margin-top:4px}
.SiteChainHead img{width:auto;max-width:96px;height:auto;max-height:72px;object-fit:contain}
.SiteChainHead h1{font-size:24px;overflow-wrap:anywhere}
@media (hover:none){
	.SiteStoreLine a,.SiteStoresNoteLink a{min-height:44px}
	.SiteStoresChains a{min-height:44px}
}
/*2026-10-04 - Queue item 47 slice 1: the report windows (SiteReportFunctions.inc). The comment and the wrong info open with show() under their own shade (Site.js - reCAPTCHA's picture challenge has to stay above them and reachable), centred and scrolling inside the screen like the modal windows. The text boxes match the windows' fields (16px, so iOS does not zoom). The grade is five 44px stars, 1 at the right: outlined in the second text colour, filled gold up to the chosen or the hovered one.*/
.SiteReportShade{position:fixed;inset:0;z-index:400;background:rgba(8,24,29,.82)}
.SiteSaleDlg.SiteReportDlg[open]:not(:modal){position:fixed;inset:0;z-index:401;height:fit-content;max-height:calc(100vh - 24px);margin:auto;overflow-y:auto}
.SiteReportDlg textarea{display:block;width:100%;min-height:132px;padding:10px 12px;border:1px solid var(--SiteField);border-radius:10px;background:#fff;font-size:16px;resize:vertical}
.SiteReportDlg input[type="file"]{display:block;width:100%;font-size:15px}
.SiteReportDlg .SiteCaptcha{margin-top:14px}
.SiteRate{min-width:0;margin:12px 0 0;padding:0;border:0}
.SiteRate legend{margin-bottom:2px;padding:0;font-weight:700}
.SiteRateStars{display:inline-flex;flex-direction:row-reverse}
.SiteRateStars input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.SiteAreaDlg .SiteRateStars label{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;border-radius:8px;color:var(--SiteText2);cursor:pointer}
.SiteRateStars .SiteIcon{fill:none}
.SiteAreaDlg .SiteRateStars input:checked ~ label,.SiteAreaDlg .SiteRateStars label:hover,.SiteAreaDlg .SiteRateStars label:hover ~ label{color:#b98600}
.SiteRateStars input:checked ~ label .SiteIcon,.SiteRateStars label:hover .SiteIcon,.SiteRateStars label:hover ~ label .SiteIcon{fill:currentColor}
.SiteRateStars input:focus-visible + label{outline:3px solid var(--SiteFocus);outline-offset:-3px}
/*2026-10-04 - Owner, test 2: "THE ICON OF THE BELL NEEDS TO CHANGE SO WE KNOW THERE IS AN ALERT SET". The product page's alert action with an alert set: the bell filled in the action's teal.*/
.SiteProdActList .SiteAlertSet .SiteIcon{fill:currentColor}
/*2026-10-04 - Owner: "you also need a green bell if the price exists according to the price alert". A met alert's bell is the site's green, filled; the words keep the action's teal.*/
.SiteProdActList .SiteAlertMet .SiteIcon{color:var(--SiteGreen)}
/*2026-10-04 - Queue item 47 slice 3: the personal area (My-Account.html). The tabs are the store page's; the open tab is one white panel. Each subject of a settings tab is a part under a hairline, its form no wider than a reading line, its button at the line's start; a part reached by its #id clears the sticky header. The favourite stores are the store rows in a hairline frame. The chains are a scrolling table with a sticky head, a 44px hide box and a discount field per chain. The clubs and cards are boxes drawn as pills, filled teal when ticked.*/
.SiteAccountPage h1{margin:4px 0 12px;font-size:24px}
.SiteAccountPage .SiteProdPanel{margin:0;padding:14px 16px;background:#fff}
.SiteAccountPart{padding:16px 0;border-top:1px solid var(--SiteLine);scroll-margin-top:80px}
.SiteAccountPart:first-of-type{padding-top:4px;border-top:0}
.SiteAccountPart h3{margin:0 0 10px;font-size:18px}
.SiteAccountPart > .SiteCardText{max-width:640px;margin:0 0 8px}
.SiteAccountPart .SiteAuthForm{max-width:520px}
.SiteAccountPart .SiteAuthForm .SiteBtn{width:auto;min-width:140px;align-self:flex-start}
.SiteAccountSign{max-width:640px;margin:0 0 12px}
.SiteAccountStores{max-width:640px;margin:0 0 12px;border:1px solid var(--SiteLine);box-shadow:none}
.SiteStorePick form{flex:none;margin:0}
.SiteAccountIgnore{margin-top:14px}
/*2026-10-04 - Owner: "למה לייף סטייל ירד שורה?" - the 520px reading line of the text fields broke the seven card pills into two rows. The clubs and cards form takes the panel's width; its pills still wrap on a phone.*/
#SiteAccountCards .SiteAuthForm{max-width:none}
/*2026-10-04 - Owner: the store search's results stay open on the personal area; a store already chosen is the teal ground with white words and "נבחרה" at the row's end.*/
.SiteAreaList button[aria-pressed="true"]{background:var(--SiteTeal);color:#fff;cursor:default}
.SiteAreaList button[aria-pressed="true"] .SiteCheckInKm{color:#fff;font-weight:700}
.SiteAreaList button:disabled{opacity:.6}
.SiteAccountTableWrap{max-width:640px;max-height:480px;overflow-y:auto;border:1px solid var(--SiteLine);border-radius:12px}
.SiteAccountChainTable{width:100%;border-collapse:collapse;font-size:15px}
.SiteAccountChainTable th,.SiteAccountChainTable td{padding:4px 10px;border-bottom:1px solid var(--SiteLine);text-align:right;vertical-align:middle}
.SiteAccountChainTable thead th{position:sticky;top:0;z-index:1;background:var(--SiteTealTint);font-size:14px}
.SiteAccountChainTable tbody th{font-weight:600;overflow-wrap:anywhere}
.SiteAccountChainTable td{white-space:nowrap}
.SiteAccountBox{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
.SiteAccountBox input{width:22px;height:22px;margin:0;accent-color:var(--SiteTeal)}
.SiteAccountChainTable input[type="text"]{width:72px;min-height:40px;padding:0 8px;border:1px solid var(--SiteField);border-radius:8px;background:#fff;font-size:16px;text-align:left}
.SiteAccountChainsForm .SiteBtn{min-width:140px;margin-top:12px}
.SiteAccountChips{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0;padding:0;border:0}
.SiteAccountChips legend{margin-bottom:6px;padding:0;font-weight:700}
.SiteAccountChip{position:relative;display:inline-flex}
.SiteAccountChip input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.SiteAccountChip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteText);font-size:14px;font-weight:600;cursor:pointer}
.SiteAccountChip input:checked + span{border-color:var(--SiteTeal);background:var(--SiteTeal);color:#fff}
.SiteAccountChip input:focus-visible + span{outline:3px solid var(--SiteFocus);outline-offset:2px}
/*2026-10-04 - Queue item 47 slice 3: the alerts tab's bell line on the card - filled teal while on, green and filled when met, grey and outlined when paused.*/
.SiteProdAlertLine{margin:4px 0 0}
.SiteProdAlert{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:14px;font-weight:700}
.SiteProdAlert:hover{text-decoration:none}
.SiteProdAlert.SiteAlertSet .SiteIcon,.SiteProdAlert.SiteAlertMet .SiteIcon{fill:currentColor}
.SiteProdAlert.SiteAlertMet{color:var(--SiteGreen)}
.SiteProdAlert.SiteAlertOff{color:var(--SiteText2)}
@media (hover:none){
	.SiteProdAlert,.SiteAccountChip span{min-height:44px}
}
/*2026-10-05 - Queue item 47 slice 4: הסל הזול (Basket.html). The run's facts are quiet lines under the head, one fact each. The stores are the store rows as cards, two a line on a wide screen: the index and the products priced exactly are lines of their own in the middle cell; the total leads the price cell, the delivery under it, then "פירוט". The "can be cheaper" mark is a green icon beside the name. The sort is the results' pills, drawn as buttons.*/
.SiteBasketFacts{display:grid;gap:2px;margin:8px 0 0;padding:0;list-style:none;font-size:14px;color:var(--SiteText2)}
.SiteBasketFacts li{cursor:pointer}
.SiteResSort button{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteText);font-weight:600;cursor:pointer}
.SiteResSort button:hover{border-color:var(--SiteTeal)}
.SiteResSort button[aria-pressed="true"]{background:var(--SiteTeal);border-color:var(--SiteTeal);color:#fff}
/*.SiteBasketList{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}*/
/*2026-10-05 - Owner: the list (default, one column) or the cards (.SiteStoresCards, two a line on a wide screen), as the product page's stores.*/
.SiteBasketList{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.SiteBasketList.SiteStoresCards{grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr))}
.SiteBasketList .SiteStoreRow a{min-height:0}
.SiteBasketList .SiteStoreMeta a{min-height:24px}
.SiteBasketList .SiteStoreStock{flex-direction:column;align-items:flex-start;gap:0;font-size:13px}
.SiteBasketList .SiteStoreStock span,.SiteBasketList .SiteStoreBig,.SiteBasketList .SiteStoreUnit{cursor:pointer}
.SiteBasketIndex{font-weight:700;color:var(--SiteText)}
.SiteBasketSave{display:inline-flex;align-items:center;color:var(--SiteGreen);cursor:pointer}
.SiteBasketGo{margin:2px 0 0}
.SiteBasketList .SiteBasketGo a{display:inline-flex;align-items:center;min-height:32px;font-weight:700}
/*2026-10-05 - The store's detail: the chain's logo beside a head of one fact a line - the total large, the delivery, the index, the products priced exactly, the scope - with its actions under them. Each card's line in the basket sits under its price; the "הוחלף" mark is a round icon in the logo's blue; a card whose product left the list is dimmed.*/
/*.SiteBasketHead{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 16px}*/
/*2026-10-05 - Owner: the head was tall and half empty - .SiteCard's flex-direction:column stayed on, so the facts' 260px basis became their height. A grid now: the logo and the facts, the actions on a row of their own on a phone; from 768px the actions at the row's end, at its foot.*/
.SiteBasketHead{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:start;gap:10px 16px}
.SiteBasketHeadLogo{display:flex;align-items:center;justify-content:center;width:96px;height:72px}
.SiteBasketHead .SiteBasketHeadLogo{width:72px;height:54px}
.SiteBasketHeadLogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/*.SiteBasketHeadMain{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}*/
.SiteBasketHeadMain{min-width:0;display:flex;flex-direction:column;gap:2px}
.SiteBasketHeadMain h1{margin:0 0 4px;font-size:22px;line-height:1.25;overflow-wrap:anywhere}
.SiteBasketHeadMain p{margin:0;font-size:15px;cursor:pointer}
.SiteBasketTotal b{font-size:26px;font-weight:800;color:var(--SiteText)}
/*.SiteBasketHead .SiteCardActions{flex:1 1 100%}*/
.SiteBasketHead .SiteCardActions{grid-column:1 / -1}
@media (min-width:768px){
	.SiteBasketHead{grid-template-columns:96px minmax(0,1fr) auto;gap:8px 24px}
	.SiteBasketHead .SiteBasketHeadLogo{width:96px;height:72px}
	.SiteBasketHead .SiteCardActions{grid-column:3;align-self:end;justify-content:flex-end}
}
.SiteBasketHead .SiteCardActions a:not(.SiteBtn){display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.SiteBasketPage .SiteResGrid,.SiteBasketPage .SiteResEmpty{margin-top:12px}
.SiteBasketLine{cursor:pointer}
.SiteBasketSwapLine{margin:4px 0 0}
.SiteBasketSwap{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--SiteBlue);border-radius:999px;background:#fff;color:var(--SiteBlue)}
.SiteBasketSwap:hover{background:var(--SiteTealTint);color:var(--SiteTealDark);text-decoration:none}
.SiteProdGone{opacity:.45}
/*2026-10-05 - Owner: on the basket's store detail a card priced by a parallel product has a ground in the logo's blue, one priced at the average price a yellow one, as a catch's card; the average's mark is the stand-in's round icon in the yellow's line colour.*/
.SiteProdIsSwap{background:#eaf4f7;border-color:var(--SiteBlue)}
.SiteProdIsSwap .SiteProdPrice{border-top-color:#bcdde5}
.SiteProdIsAvg{background:#fff8e1;border-color:#e0b040}
.SiteProdIsAvg .SiteProdPrice{border-top-color:#f0dca0}
.SiteBasketAvg{border-color:#e0b040;color:#8a6300;cursor:pointer}
.SiteBasketAvg:hover{background:#fff4d6;color:#6b4f00}
/*2026-10-05 - Owner: the marks sit in the rail under the quantity, full width as the list page's mark - the stand-in's filled in the logo's blue, the average's in the yellow.*/
.SiteBasketRailMark{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;border:1px solid;border-radius:10px;cursor:pointer}
.SiteBasketRailSwap{border-color:var(--SiteBlue);background:var(--SiteBlue);color:#fff}
.SiteBasketRailSwap:hover{border-color:var(--SiteTeal);background:var(--SiteTeal);color:#fff;text-decoration:none}
.SiteBasketRailAvg{border-color:#e0b040;background:#fff4d6;color:#6b4f00}
@media (hover:none){
	.SiteBasketRailMark{min-height:44px}
}
.SiteBasketAltPrice{display:block;font-weight:700;color:var(--SiteText)}
.SiteBasketAltUnit{display:block;font-size:12px;font-weight:400;color:var(--SiteText2)}
@media (hover:none){
	.SiteBasketSwap{width:44px;height:44px}
	.SiteBasketList .SiteBasketGo a{min-height:44px}
}
/*2026-10-05 - Queue item 47 slice 6: the receipt scan and the add-product form are the login card made wider (a reading line of 640px), each help a folded guide box under the form's text; the store field's suggestions are the account page's list. The examples table scrolls inside its box on a phone.*/
/*.SiteWideCard{max-width:640px}*/
/*2026-10-05 - Owner, test 3 ("בזבוז מקום משווע"): the two forms were one tall column of full-width fields. The card takes the help page's width, and from 768px the fields share rows on a six-column grid - on the add-product form the barcode and the name, the supplier and the category, the three measures, the two pictures (their inputs lined up at the row's foot); on the receipt scan the store and the name, the link and the files (lined up at the top, so the store's open suggestions push nothing). The button keeps its own width at the row's start. Under 768px the one column stays.*/
.SiteWideCard{max-width:920px}
@media (min-width:768px){
	#SiteAddForm,#SiteRcptForm{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 16px}
	#SiteAddForm{align-items:end}
	#SiteRcptForm{align-items:start}
	#SiteAddForm > *,#SiteRcptForm > *{grid-column:1 / -1}
	#SiteAddForm > .SiteAuthField:nth-of-type(1){grid-column:span 2}
	#SiteAddForm > .SiteAuthField:nth-of-type(2){grid-column:span 4}
	#SiteAddForm > .SiteAuthField:nth-of-type(3),#SiteAddForm > .SiteAuthField:nth-of-type(4),#SiteAddForm > .SiteAuthField:nth-of-type(8),#SiteAddForm > .SiteAuthField:nth-of-type(9){grid-column:span 3}
	#SiteAddForm > .SiteAuthField:nth-of-type(5),#SiteAddForm > .SiteAuthField:nth-of-type(6),#SiteAddForm > .SiteAuthField:nth-of-type(7){grid-column:span 2}
	#SiteRcptForm > .SiteAuthField{grid-column:span 3}
	#SiteAddForm .SiteBtn,#SiteRcptForm .SiteBtn{width:auto;min-width:220px;justify-self:start}
}
/*2026-10-05 - The category's suggestions: the category on the first line, its group under it in the second text colour - one fact per line.*/
.SiteCatPicks button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:right}
.SiteCatPickGroup{font-size:13px;font-weight:400;color:var(--SiteText2)}
.SiteFormHelp{margin:14px 0}
.SiteFormHelp summary{font-size:16px}
.SiteRcptChains{margin:0;padding:0;list-style:none}
.SiteRcptChains li{display:flex;flex-direction:column;padding:8px 0;border-top:1px solid var(--SiteLine)}
.SiteRcptChains li:first-child{border-top:0}
.SiteRcptChains span{font-size:14px;color:var(--SiteText2)}
.SiteAddExamplesWrap{overflow-x:auto}
.SiteAddExamples{width:100%;border-collapse:collapse;font-size:14px}
.SiteAddExamples th,.SiteAddExamples td{padding:6px 8px;border-bottom:1px solid var(--SiteLine);text-align:right;vertical-align:top}
.SiteAddExamples thead th{background:var(--SiteTealTint)}
.SiteAddExamples tbody th{font-weight:400}
.SiteAddExamples td{text-align:center;white-space:nowrap}
/*2026-10-05 - The status page: a box per chain (the help page's guide box), its name and its counts one fact per line - the not-updated count in red after 08:30 and amber before; the stores inside as the store rows, each with a tag at its end: green updated, amber waiting, red not updated.*/
.SiteStatusPage{max-width:920px}
.SiteStatusPage h1{font-size:24px}
.SiteStatusSum{margin:4px 0 0;font-weight:600}
.SiteStatusChains{margin:16px 0 0;padding:0;list-style:none}
.SiteStatusHead{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.SiteStatusLine{font-family:var(--SiteBody);font-size:14px;font-weight:600;color:var(--SiteText2)}
.SiteStatusLineOk{color:var(--SiteGreen)}
.SiteStatusLineWait{color:#8a5a00}
.SiteStatusLineBad{color:#b3261e}
.SiteStatusChainLink{margin:0 16px 10px}
.SiteStatusStores{margin:0 16px 16px;border:1px solid var(--SiteLine);box-shadow:none}
.SiteStatusTag{flex:none;display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:700}
.SiteStatusTagOk{background:#e8f5ee;color:#1d6b3a}
.SiteStatusTagWait{background:#fff4d6;color:#6b4f00}
.SiteStatusTagBad{background:#fdecea;color:#b3261e}
/*2026-10-05 - Queue item 47 slice 5: the list menu's "שיתוף" for a user who shares the list - a line of text, not an action.*/
.SiteListMenuOff{margin:0;cursor:default}
.SiteListMenuOff:hover{background:none}
.SiteListMenuOff b{color:var(--SiteText2)}
/*2026-10-05 - The share window's address takes the row's width; the dialog's number field keeps its 96px.*/
#SiteShareMail{flex:1 1 220px}
/*2026-10-05 - The lists' management (My-Lists.html): a card per list on a grid (one column, two from 768px, three from 1024px); the name with the active tag - filled in the logo's blue - or the link that makes the list active; one fact per line; the people and the invitations as quiet lines whose action is in their hover card; the card's actions at its foot.*/
.SiteListsPage h1{margin:0 0 4px;font-size:24px}
.SiteListsPage > h2{margin:20px 0 10px;font-size:19px}
.SiteListsGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:768px){
	.SiteListsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
	.SiteListsGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.SiteListsCard{gap:6px}
.SiteListsCard .SiteCardText{font-size:15px}
.SiteListsTop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.SiteListsName{flex:1 1 auto;min-width:0;font-size:19px;overflow-wrap:anywhere}
.SiteListsOn{flex:none;display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:var(--SiteBlue);color:#fff;font-size:13px;font-weight:700}
.SiteListsTop .SiteLinkBtn{flex:none;min-height:44px}
.SiteListsRename{display:flex;flex-direction:column;gap:6px}
.SiteListsRename label{font-size:14px;font-weight:600}
.SiteListsRename .SiteBtn{min-height:48px;padding:0 16px;font-size:15px}
.SiteListsPart{padding-top:8px;border-top:1px solid var(--SiteLine)}
.SiteListsPart h4{margin:0 0 4px;font-family:var(--SiteHead);font-size:15px}
.SiteListsPart ul{margin:0;padding:0;list-style:none}
.SiteListsPart li{display:flex;flex-direction:column;padding:4px 0}
.SiteListsWho{align-self:flex-start;max-width:100%;border-bottom:1px dashed var(--SiteField);color:var(--SiteText);font-weight:600;overflow-wrap:anywhere;cursor:pointer}
.SiteListsDate{font-size:13px;color:var(--SiteText2)}
.SiteListsActs{margin-top:auto;padding-top:6px;border-top:1px solid var(--SiteLine)}
.SiteListsActs a,.SiteListsActs .SiteLinkBtn{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.SiteListsActs .SiteListsBad{color:#b3261e}
.SiteListsActs .SiteListsBad:hover{color:#8c1d18}
/*2026-10-05 - Owner: "Cards and a list view option". The title and the view switch share a row. The list view: one full-width row per list - the name, its facts and its actions on the first line (the actions at its end), the rename form, the people and the invitations under it.*/
.SiteListsHead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.SiteListsHead h1{margin:0}
.SiteListsGrid.SiteListsRows{grid-template-columns:minmax(0,1fr);gap:8px}
.SiteListsRows .SiteListsCard{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:10px 16px;border:1px solid var(--SiteLine);border-radius:12px;box-shadow:none}
.SiteListsRows .SiteListsTop{flex:1 1 240px;min-width:0}
.SiteListsRows .SiteListsCard > .SiteCardText{flex:none}
.SiteListsRows .SiteListsActs{flex:none;margin-top:0;margin-inline-start:auto;padding-top:0;border-top:0}
.SiteListsRows .SiteListsRename{order:1;flex:1 1 100%}
.SiteListsRows .SiteListsPart{order:2;flex:1 1 100%}
/*2026-10-05 - The accept page of an invitation (List-Join.html): one card of a reading line's width.*/
.SiteJoinCard{max-width:640px}
.SiteJoinCard h1{font-size:24px}
.SiteJoinCard .SiteCardActions a:not(.SiteBtn){display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/*2026-10-05 - The print sheet (List-Print.html): white, no site frame; the bar of views and "הדפסה" stays off the paper. The view is main[data-mode]: 0 the cards with pictures, 1 the table, 2 the table with its picture column.*/
.SitePrintPage{display:block;min-height:0;padding:0;background:#fff}
.SitePrintPage main{max-width:1000px;margin:0 auto;padding:12px 16px 24px}
.SitePrintBar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--SiteLine)}
.SitePrintBar > a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.SitePrintModes{display:flex;flex-wrap:wrap;gap:6px}
.SitePrintModes button{min-height:44px;padding:0 14px;border:1px solid var(--SiteLine);border-radius:999px;background:#fff;color:var(--SiteText);font-size:14px;font-weight:600}
.SitePrintModes button[aria-pressed="true"]{border-color:var(--SiteTeal);background:var(--SiteTeal);color:#fff}
.SitePrintBar .SiteBtn{min-height:44px;margin-inline-start:auto}
.SitePrintHead{margin-bottom:12px;text-align:center}
.SitePrintHead img{display:block;width:155px;height:auto;margin:0 auto 6px}
.SitePrintHead h1{font-size:22px;overflow-wrap:anywhere}
.SitePrintHead p{margin:2px 0 0;font-size:14px;color:var(--SiteText2)}
.SitePrintEmpty{font-weight:600;text-align:center}
.SitePrintTable{width:100%;border-collapse:collapse;font-size:14px}
.SitePrintTable th,.SitePrintTable td{padding:4px 6px;border:1px solid #9aa9ae;text-align:right;vertical-align:middle}
.SitePrintTable thead th{background:#eef3f4}
.SitePrintTable .SitePrintCat th{background:#f6f9fa;font-size:13px}
.SitePrintNum{text-align:center!important;white-space:nowrap}
.SitePrintCode{white-space:nowrap}
.SitePrintPic{width:44px}
.SitePrintPic img{display:block;width:auto;height:30px;margin:0 auto}
#SiteListPrint[data-mode="1"] .SitePrintPic{display:none}
#SiteListPrint[data-mode="0"] .SitePrintTable{display:none}
#SiteListPrint:not([data-mode="0"]) .SitePrintGrid{display:none}
.SitePrintBox{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--SiteText);border-radius:3px;font-size:14px;font-weight:700;line-height:1}
.SitePrintGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
@media (min-width:768px){
	.SitePrintGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.SitePrintCatH{grid-column:1 / -1;margin-top:6px;padding-bottom:2px;border-bottom:1px solid #9aa9ae;font-size:14px;font-weight:700}
.SitePrintItem{display:flex;flex-direction:column;gap:2px;padding:8px;border:1px solid #9aa9ae;border-radius:8px;font-size:13px;break-inside:avoid}
.SitePrintItem img{display:block;width:auto;max-width:100%;height:80px;margin:0 auto 4px;object-fit:contain}
.SitePrintItem b{font-size:14px;overflow-wrap:anywhere}
.SitePrintItem .SitePrintBox{align-self:flex-start;margin-top:4px}
@media print{
	.SitePrintBar,.SiteToast,.SiteTipCard{display:none!important}
	.SitePrintPage main{max-width:none;padding:0}
	.SitePrintGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
	.SitePrintTable tr,.SitePrintItem{break-inside:avoid}
}
/*2026-10-05 - Owner: "every place a store is shown, its grade is shown". The "חנות:" line's grade (SiteStoreGrade(), span.SiteResStoreGrade) is a line of its own: the row's whole width, last in the row (on the home card under the status link too), its link the stars' height and weight, not the line's 44px / 600.*/
.SiteResStoreGrade{order:1;flex:1 1 100%;display:flex;align-items:center;margin:0}
.SiteResStore .SiteResStoreGrade a,.SiteProdHere .SiteResStoreGrade a,div.SiteStoreRow .SiteResStoreGrade a{display:inline-flex;align-items:center;min-height:24px;font-weight:400}
/*2026-10-05 - Queue item 52, owner: the divider and the prices sat at a different height on every card of a row - the price block was pinned to the card's bottom, so a struck price, a per-unit line or an advice chip lifted its top. Everything above the price block is one box now (.SiteProdInfo), with the body's own gap.*/
.SiteProdInfo{display:flex;flex-direction:column;gap:4px;min-width:0}
/*2026-10-05 - From two columns, each card takes three rows of the grid and shares them with the cards beside it (subgrid): the box above the price, the price block, the advices. The divider, "מחיר פה" and the figure stand on one line across the row; the rail spans the first two rows. The product page's own card, a phone (one column) and a browser with no subgrid keep the card as it was.*/
@supports (grid-template-rows:subgrid){
	@media (min-width:768px){
		.SiteResGrid:not(.SiteProdTop) > .SiteProd{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 3;gap:0 12px}
		.SiteResGrid:not(.SiteProdTop) > .SiteProd > .SiteProdRail{grid-column:1;grid-row:1 / span 2}
		.SiteResGrid:not(.SiteProdTop) > .SiteProd > .SiteProdBody{grid-column:2;grid-row:1 / -1;display:grid;grid-template-rows:subgrid;row-gap:0}
		.SiteResGrid:not(.SiteProdTop) .SiteProdBody > .SiteProdInfo{grid-row:1}
		.SiteResGrid:not(.SiteProdTop) .SiteProdBody > .SiteProdPrice{grid-row:2;align-self:start;margin-top:4px}
		.SiteResGrid:not(.SiteProdTop) .SiteProdBody > .SiteProdHints{grid-row:3;align-self:start;margin-top:4px}
	}
}