/* ============================================================================ THE STORE'S DESIGN — «המסך», made the only one. Loaded after shop.css. shop.css owns the skeleton (the grid, the tile, the cart lines, the checkout fields, the accessibility rules); this file owns the look and the two page models: 1. THE CATALOGUE SCROLLS LIKE A PAGE. shop.css's `body.shop` model as it is: the document scrolls, the top bar scrolls away with it, and the title-and-chips row is STICKY so the two categories stay in reach. Ilai, 2026-09-03: the chips at the top are right, the grid under them should simply scroll, and there is no bar of buttons at the bottom. 2. PRODUCT, CART AND CHECKOUT ARE ONE SCREEN. `body.fit` re-establishes page.css's one-screen chain at (0,2,x): body is height:100dvh (the walk's stage does the same), main is flex:1 1 auto; min-height:0 and overflow-y:auto -- never hidden, so at the 125% and 150% text steps main scrolls under the bar and nothing is clipped. The product plate is the one flexible region; the description is an inner box between one and three lines. Each of these screens opens with a way BACK, a link, so it works with a dead script too. The ground is THE GALLERY WALL'S OWN TONE (it was white until 2026-09-20; see the token block). The accent is the rule under a title and the main button. Nowhere else: the current category chip is an ink inversion, the thumbs' ring is the ink, the back link is the ink at rest. THE PHONE BLOCK IS LAST IN THE FILE, and the two short-screen blocks after it are there on purpose, to trim what it just set. ========================================================================== */ html[data-store]{ /* THE SCROLLBAR'S WIDTH IS ALWAYS RESERVED (2026-09-20). The category chips are centred on every store page, and /shop/art (the wall) is the one page that does not scroll the document -- so without this it is the one page 15 px wider than the rest, and the chips shifted by half that every time you switched category. Older Safari ignores it and keeps the few pixels of drift it has today; nothing else changes. */ scrollbar-gutter:stable; /* THE GALLERY WALL'S TONE (Ilai, 2026-09-20: "inside the tab design objects change the white background to be the same color of the wall from the art & creations tab"). The ground was #ffffff from 2026-09-03 ("the whole page will be white") until the art tab stopped being a grid and became a room: one tab is now a lit gallery wall and the other was a sheet of white, and switching between them was switching buildings. IT IS THE WALL ITSELF, not a colour sampled off it (Ilai, 2026-09-20, second round: "exactly the same as the wall, just without the lights; it can fade and be exactly like the wall on the tab art & creations"). A flat average could not be right anywhere, because the wall is not flat: it is one paint under a vertical fade. So --wall-* below restate exactly what wall.css paints the room with — the plaster's own #efebe4 with its tile (shopassets/room/plaster.svg), under the room's light (.wlight, rgba(22,16,10,.52→.26→.40) top to bottom) — and leave out only the spotlights, which belong to the works hanging there. BOTH LAYERS ARE MAPPED THROUGH THE ROOM'S OWN GEOMETRY, or the two tabs do not line up. On /shop/art the stage is the viewport under the 48 px bar, it is 324 cm tall, and the wall is the top 288 of them (the last 36 are floor) — so the fade that runs 0→100 % of the WALL runs 0→89 % of the viewport, and its stops move with it: .16→14 %, .45→40 %, .80→71 %, 1→89 %. The floor's tone is then held to the bottom of the page, since this tab has no floor to hand over to. The plaster tile is 200 of those 324 cm, so 58vh. --ground stays a flat value for the few places that need one (the fade over a long description, the sticky checkout footer). #d1cdc6 is the wall measured mid-height, with patches laid over the rendered room until one disappeared — not computed, because the spotlights wash about fifteen points of light back onto it and the arithmetic answer (#b7b2ab) is visibly too dark. The store is still the light side of a dark site; the walk and the three pages keep the dark ground, and the black phone bar stays as the shared navigation. Every token page.css paints the dark site with is redefined here, and every component that was a light wash on dark is repainted the other way round below. The accent here is #b3491d, since #ef9068 — the hairline colour the bars use (page.css:269-279) — is 2.17:1 on a ground this light. The high-contrast attribute is doubled in page.css and outranks all of this, so the mode still goes to solid #000 / #fff. */ --ground:#d1cdc6; --wall-paint:#efebe4; /* The plaster is two bitmaps, not plaster.svg (2026-09-21): the fine grain on a quarter-size tile over the soft blotches. scripts/raster-room.cjs makes them from the SVG and says why -- Safari recomputed the SVG's noise filter on the CPU for every tile it painted while you scrolled. */ --wall-bg:linear-gradient(to bottom, rgba(22,16,10,.52) 0, rgba(22,16,10,.34) 14%, rgba(22,16,10,.26) 40%, rgba(22,16,10,.30) 71%, rgba(22,16,10,.40) 89%, rgba(22,16,10,.40) 100%), url("room/plaster-fine.webp"), url("room/plaster-lo.webp"); --wall-bg-size:100% 100vh, 14.5vh 14.5vh, 58vh 58vh; --wall-bg-repeat:no-repeat, repeat, repeat; --ink:#191714; --dim:rgba(25,23,20,.68); --accent:#b3491d; --accent-ink:#ffffff; --plate:rgba(25,23,20,.045); --edge:rgba(25,23,20,.30); --line:rgba(25,23,20,.13); color-scheme:light; /* ---- THE BUTTON, INVERTED FOR THIS GROUND (2026-09-03) ---------------- page.css declares one button for the whole site — a 13% wash of the BONE ink, a hairline, a blurred backdrop and a 14px corner — and every one of those values is invisible on white. So the six tokens are redeclared here with the ink going the other way and NOTHING ELSE CHANGES: the .btn rules in page.css, the @supports fallback and the high-contrast override all read these names and are already correct for the store. html[data-store] is (0,1,1) and page.css's :root is (0,1,0), so these win wherever both apply. The same trick the ground tokens above use. The blur stays declared in page.css and it does real work here too: the catalogue scrolls UNDER the sticky chip row, so a button on the product screen has moving pictures behind it more often than not. */ --glass:rgba(25,23,20,.055); --glass-hi:rgba(25,23,20,.10); --glass-on:rgba(25,23,20,.14); /* .62, and every part of that number is measured. The fill is a 5.5% wash, so it is the BOUNDARY that identifies the control, and WCAG 1.4.11 wants 3:1 for it. The chain: .30 over white gave #babab9, 1.96:1 — under the floor; .50 gave #8c8b8a, 3.40:1, and held while the ground was white. THE GROUND IS NO LONGER WHITE. The chips sit at the top of the wall, where the room's light is at its dimmest and the plaster renders about rgb(142,135,126) (measured off Ilai's own screenshot). .50 of the ink over that lands at rgb(83,79,73) — only 2.4:1, i.e. the button's outline quietly fell under the floor when the store took the wall's colour. .62 lands at rgb(72,69,64), which is 3.05:1 there and 4.6:1 on the lighter middle of the page, so the one number carries both ends of the fade. On the dark side of the site the same token is bone at .42, which measures 3.68:1 over the page scrim; the two grounds need different numbers to buy the same margin. */ --glass-edge:rgba(25,23,20,.62); --glass-edge-hi:rgba(25,23,20,.78); --glass-solid:rgba(25,23,20,.09); /* ---- WHY THERE IS NO DARK BUTTON HERE (2026-09-20, four rounds) ------- Ilai asked for the store's four buttons — the two category chips and the wall card's «צרו קשר»/«וואטסאפ» — to look like the one on /gallery and /space. That button is page.css's .btn in .actions-dark: a 52 % wash of rgba(20,16,13) with a bone hairline, on a PHOTOGRAPH. Three tries at copying it failed, and the pixels say why. Over that dark photograph the fill lands at rgb(31,24,17) and the hairline at rgb(145, 138,130): a dark glass with a rim that GLOWS, because the rim is lighter than everything around it. Over this light ground the same 52 % lands at rgb(133,129,126) — a brown-grey ("still there is a big difference in colors"). Raising it to 88 % matched the fill exactly, rgb(33,29,26) against rgb(31,24,17), and the corner curve, the rim, the label and the padding all measured the same — and it still read as a different thing ("completely different"), because a pale rim on a light card does not glow, it disappears, and the button stops being glass and becomes a black slab. What cannot be copied is the ground. So, asked to choose, Ilai took the button's OWN light-ground form: the six --glass-* tokens above, which are that same button inverted, exactly as this file always intended. What the dark rounds leave behind is the BOX — /space's 54 px height, padding, 700 weight and tracking, which the chips had never had — and the accent rule under the current chip. */ --gap:18px; --pad:clamp(16px, 2.6vw, 32px); --tile-ratio:4 / 5; /* 52 of 77 works are portrait, median 0.75; the picture is contained */ /* --tile-min is NOT set here: shop.css gives it 220px and 150px on a phone from :root, and a value on html[data-store] would outrank the phone one. */ overflow-x:clip; } /* ---- the white ground: page.css components repainted for it ------------- */ /* THE BAR IS THE SITE'S BAR. On a desktop page.css's bar is white glass (rgba(255,255,255,.52) + blur) and on the home screen it sits over the dark film, which is what makes it read as a bar; over a white page the same glass renders pure white and vanishes -- Ilai: "you changed the top bar to be white". So the site's dark ground stays behind the bar, exactly its 48px, and the glass composites to the same grey it does everywhere else. The phone bar is solid black on every width and hides the band; high contrast paints the bar solid white and hides it too. */ /* THE PAGE IS THE WALL. Three layers, in paint order: the 48 px band the top bar needs (above), then the room's light, then the plaster. The light and the plaster are FIXED — they are a wall the page moves past, not a sheet the page drags with it — and fixed also makes them line up, to the pixel, with the same two layers on the sticky chip row below, which is what lets that row hide the tiles passing under it without drawing a band of its own. FIXED BY A LAYER, NOT BY background-attachment (2026-09-21, Ilai: «פרטי עיצוב» "feels really slow and stuck on mobile" swiping up and down). An attachment:fixed background is repainted on every frame of a scroll, and this page had two of them (the body and the pinned chip row); iOS Safari ignores the keyword and scrolls the fade away instead. A position:fixed box is a layer the GPU simply holds still, on every browser, and it paints once. So the wall is body::before; the 48 px band, which DOES scroll away with the page, is body::after above it; and the chip row shows the same layer through a clip (.hwall, below) instead of painting its own. The room page (body.wall) paints its own room and needs no wall layer, but its desktop bar still sits on the band. */ html[data-store] body.shop{background-color:var(--wall-paint)} html[data-store] body.shop:not(.wall)::before, html[data-store] .hwall::before{ content:"";position:fixed;left:0;right:0;top:0;height:100vh;pointer-events:none; background-color:var(--wall-paint);background-image:var(--wall-bg); background-size:var(--wall-bg-size);background-repeat:var(--wall-bg-repeat)} html[data-store] body.shop:not(.wall)::before{z-index:-1} html[data-store] body.shop::after{ content:"";position:absolute;left:0;right:0;top:0;height:48px;z-index:-1; background:#141210;pointer-events:none} html[data-store] .copy{color:rgba(25,23,20,.72);text-shadow:none} /* The two rank classes used to need repainting here: .btn-alt was a bone wash that vanished on white and .btn-main was a fixed near-black block whose label had to be forced light. Both are gone. There is ONE button on the site now and it reads the six --glass-* tokens above, so it arrives on this ground already correct and neither class needs a rule. */ html[data-store] .btn-main:hover{color:#fff} html[data-store] .payplus pre{background:rgba(25,23,20,.06);color:var(--ink)} /* ---- the catalogue: title, chips, a grid that scrolls --------------------- */ html[data-store] .wrap{max-width:1100px} html[data-store] .hrow{ position:sticky;top:0;z-index:3; display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:max(8px, calc(.6 * var(--fit))) max(14px, calc(1.6 * var(--fit))); padding:max(10px, calc(1 * var(--fit))) 0 max(10px, calc(.9 * var(--fit))); /* the seam between the pinned row and the tiles passing under it */ box-shadow:0 8px 14px -8px rgba(25,23,20,.18)} /* the row's ground: the page's fixed wall layer, seen through the row's box. clip-path clips a position:fixed descendant (overflow would not), and it sits on this span rather than on .hrow so the seam shadow above survives */ html[data-store] .hwall{ position:absolute;inset:0;z-index:-1;pointer-events:none; clip-path:inset(0);-webkit-clip-path:inset(0)} /* the page's h1 stays for the document outline and screen readers; Ilai asked for the word next to the two chips to go (2026-09-03) */ html[data-store] .rtitle{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap;margin:0;padding:0} html[data-store] .rtitle::after{display:none} html[data-store] .cats{display:flex;gap:max(8px, calc(.6 * var(--fit)))} /* The category chips are the GALLERY'S BUTTON (Ilai, 2026-09-20: "the buttons art & creations and design objects … so they will also look like the buttons from the gallery tab"): the dark glass, the bone hairline, the bone label and that page's --btn-r corner. They were a wash of the ink with a hairline round it, which on white read as an empty outline — «פרטי עיצוב» all but vanished beside the filled one. THE BOX IS .btn's BOX, COPIED FROM page.css, NOT A CHIP-SIZED VERSION OF IT (Ilai, 2026-09-20, second round: "the buttons still don't look like the button inside the tab Workspace & Events"). The first pass took that page's colour but kept the chip's own 44 px height, tighter padding and smaller label, and a 44 px pill next to a 54 px button is plainly a different control. These four lines — min-height, padding, font and letter-spacing — are page.css's .btn values verbatim; if that button is ever retuned, retune them here with it. (A .chip is not a .btn, or it would simply inherit them.) THE WEIGHT IS 700 ON BOTH STATES, never 600 on one and 700 on the other: a heavier label is a WIDER label, and when only the current chip changed weight both chips moved every time you switched category (Ilai, 2026-09-20: "so they will not move and change position"). WHICH ONE YOU ARE ON is said with the ACCENT RULE UNDER THE LABEL — letter for letter the signal the top menu uses for the page you are on — over a slightly pressed fill. It used to be an ink inversion, one chip dark and one light, which is no longer wanted: both chips are now the same button, as they are on /gallery. (A ring was tried; it read as a focus outline.) None of this changes a metric, so the pair still cannot move when you switch. */ html[data-store] .chip{ position:relative; display:inline-flex;align-items:center;justify-content:center;min-height:54px; padding:0 calc(1.7 * var(--fit) + 20px);border-radius:var(--btn-r); text-decoration:none;color:var(--ink);white-space:nowrap; font:700 calc(clamp(15px, .88 * var(--fit), 17px) * var(--a11y-scale))/1 var(--sans); letter-spacing:.03em; background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-edge); -webkit-backdrop-filter:blur(12px) saturate(130%); backdrop-filter:blur(12px) saturate(130%); -webkit-tap-highlight-color:transparent;transition:background .15s ease} html[data-store] .chip:hover{background:var(--glass-hi); box-shadow:inset 0 0 0 1px var(--glass-edge-hi)} html[data-store] .chip[aria-current]{ background:var(--glass-on);box-shadow:inset 0 0 0 1px var(--glass-edge-hi)} html[data-store] .chip[aria-current]::after{ content:"";position:absolute;inset-inline:20px;bottom:9px; height:2px;border-radius:2px;background:var(--accent)} html[data-store] .grid{padding-top:max(8px, calc(.8 * var(--fit)))} /* A CLOSED CATEGORY (Ilai, 2026-09-21: «פרטי עיצוב» closed until its products and PayPlus are ready): the grid blurred and out of reach (inert in the markup), one large word over the screen. The word is text, not a box: no plate, no button. The blur is a filter on the grid, not a backdrop-filter over the screen -- a still raster, nothing to recompute while scrolling. The bar and the chips stay sharp and usable above it. */ html[data-store] body.is-closed .grid{filter:blur(14px);pointer-events:none;user-select:none} html[data-store] .soon{ position:fixed;inset:0;z-index:2;pointer-events:none; display:flex;align-items:center;justify-content:center;padding:0 var(--pad)} html[data-store] .soon-t{ margin:0;color:var(--ink);text-align:center;line-height:1;white-space:nowrap; font:400 min(34vw, 42vh)/1 var(--display);letter-spacing:.01em} html[lang="en"][data-store] .soon-t{font-size:min(15vw, 26vh)} /* the page is one blurred tile tall, so the copyright line would sit right under the word (the ק's tail crossed it on a desktop); it goes to the foot */ html[data-store] body.is-closed > .copy{position:fixed;left:0;right:0;bottom:12px;margin:0} html[data-a11y-contrast][data-a11y-contrast] body.is-closed .grid{filter:none;visibility:hidden} html[data-store] .plate{transition:background .18s ease} html[data-store] .tile:hover .plate{background:rgba(25,23,20,.08)} html[data-store] .tinfo{gap:1px} /* plaintext: a Latin name inside the Hebrew page resolves its own direction, so a long one is cut at its END with the ellipsis on the right, not at its start ("...drix from a stamp collection" was what the RTL box produced). The alignment is then physical, and flipped for the English page. */ html[data-store] .tname{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; unicode-bidi:plaintext;text-align:right; font-size:calc(clamp(13px, .95 * var(--fit), 15px) * var(--a11y-scale))} html[dir="ltr"][data-store] .tname{text-align:left} html[data-store] .tprice{ font-size:calc(clamp(12px, .85 * var(--fit), 14px) * var(--a11y-scale))} /* Only «דוגמה» and «מתנה» are flagged on a tile, and they sit on the plate's corner so a flag costs no height. */ html[data-store] .grid .tflag{ position:absolute;top:6px;inset-inline-start:6px;margin:0; background:rgba(255,255,255,.92);color:var(--ink); box-shadow:inset 0 0 0 1px var(--edge);opacity:1} /* ---- the one-screen chain, for product, cart and checkout ---------------- */ html[data-store] body.fit{ display:flex;flex-direction:column; height:100vh;height:100dvh;min-height:0;overflow-x:clip} html[data-store] body.fit main{ display:flex;flex-direction:column;flex:1 1 auto;min-height:0; align-items:stretch;justify-content:flex-start; padding:0;overflow-y:auto;overflow-x:clip} /* the copyright is the last flex row: one small line under the screen */ html[data-store] body.fit .copy{ flex:0 0 auto;margin:0;padding:6px 20px calc(8px + env(safe-area-inset-bottom)); font-size:calc(10px * var(--a11y-scale));color:rgba(25,23,20,.62);text-shadow:none} html[data-store] .scr{ flex:1 1 auto;min-height:0;display:flex;flex-direction:column; width:100%;max-width:min(1100px, 94vw);margin:0 auto; padding:max(6px, calc(.6 * var(--fit))) var(--pad) max(8px, calc(.8 * var(--fit)))} /* the way back: a text link with a chevron that follows the reading direction, 44px tall on every pointer, ink at rest */ html[data-store] .back{ flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px; min-height:44px;padding:0 4px;margin-inline-start:-4px; color:var(--dim);text-decoration:none; font-size:calc(clamp(13.5px, .9 * var(--fit), 15px) * var(--a11y-scale));font-weight:600} /* one glyph for both directions: U+2039 is bidi-mirrored, so it points left in English and right in Hebrew -- toward the start either way */ html[data-store] .back::before{content:"‹";font-size:1.5em;line-height:1;position:relative;top:-.06em} html[data-store] .back:hover{color:var(--ink)} html[data-store] .back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} /* ---- the product screen --------------------------------------------------- Reading order is screen order: the way back, the picture, the name, price and flags on one line, the description, the size chips, the buy button. The PLATE is the one flexible region; the description is the second and gives way first. */ html[data-store] .p4-plate{ position:relative;flex:1 1 0px;min-height:140px;min-width:0; display:flex;align-items:center;justify-content:center} html[data-store] .p4-fig{ margin:0;width:100%;height:100%;min-height:0; display:flex;align-items:center;justify-content:center} html[data-store] .p4-fig picture{ display:flex;width:100%;height:100%;min-height:0; align-items:center;justify-content:center} html[data-store] .p4-fig img{display:block;width:100%;height:100%;object-fit:contain} html[data-store] .p4-fig .ph{width:60%;height:auto;aspect-ratio:1;max-height:100%} html[data-store] .p4-thumbs{ position:absolute;inset-inline-end:0;bottom:0;display:flex;gap:4px;padding:4px; border-radius:2px;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px var(--line)} html[data-store] .p4-th{ position:relative;appearance:none;-webkit-appearance:none;border:0;padding:2px; width:40px;height:40px;border-radius:2px;background:var(--plate);cursor:pointer; -webkit-tap-highlight-color:transparent} html[data-store] .p4-th img{display:block;width:100%;height:100%;object-fit:contain} html[data-store] .p4-th[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink)} html[data-store] .p4-info{ flex:0 0 auto;display:flex;flex-direction:column;min-width:0; margin-top:max(8px, calc(.8 * var(--fit)))} html[data-store] .p4 h1{ margin:0;text-align:start;line-height:1.04; font-size:calc(clamp(22px, 2.8 * var(--fit), 40px) * var(--a11y-scale))} html[data-store] .p4 h1::after{ width:calc(6 * var(--fit));min-width:64px;margin:max(8px, calc(.7 * var(--fit))) 0 0} html[data-store] .p4-meta{ display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px; margin-top:max(4px, calc(.4 * var(--fit)))} html[data-store] .p4-meta .pprice{ margin:0;line-height:1.3; font-size:calc(clamp(17px, 1.7 * var(--fit), 26px) * var(--a11y-scale))} html[data-store] .p4-meta .tflag{margin:0;align-self:baseline} html[data-store] .p4-meta .pdims{margin:0;font-size:calc(12.5px * var(--a11y-scale))} /* the description: an inner scroll box between one and three lines, with a sticky fade in the ground colour as the "there is more" signal */ html[data-store] .p4 .pprose{ flex:0 1 auto;min-height:1.5em;max-height:4.5em;overflow-y:auto; overscroll-behavior:contain;position:relative;scrollbar-width:thin; margin:max(6px, calc(.6 * var(--fit))) 0 0;line-height:1.5; font-size:calc(clamp(13.5px, .92 * var(--fit), 17px) * var(--a11y-scale))} html[data-store] .p4 .pprose::after{ content:"";display:block;position:sticky;bottom:0;height:14px;margin-top:-14px; background:linear-gradient(transparent, var(--ground));pointer-events:none} html[data-store] .p4 .pprose p{margin:0 0 .5em} html[data-store] .p4 .pprose p:last-child{margin:0 0 14px} html[data-store] .p4 .pprose:focus-visible{outline:2px solid var(--accent);outline-offset:2px} html[data-store] .p4 .vars{margin:max(8px, calc(.7 * var(--fit))) 0 0} /* the legend stays for the fieldset's name; the chips carry the size */ html[data-store] .p4 .vars legend{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap;margin:0;padding:0} html[data-store] .p4 .varrow{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px; -webkit-overflow-scrolling:touch} html[data-store] .p4 .varrow label{flex:0 0 auto;min-height:44px;padding:0 14px} html[data-store] .p4-links{display:flex;gap:8px;margin:max(8px, calc(.7 * var(--fit))) 0 0} html[data-store] .p4-links .btn{ flex:1 1 0px;min-height:44px;padding:0 10px;font-size:calc(13px * var(--a11y-scale))} html[data-store] .p4 .addrow{margin:max(8px, calc(.8 * var(--fit))) 0 0} html[data-store] .p4 .addnote{color:var(--dim);font-size:calc(12px * var(--a11y-scale))} /* ---- the cart screen --------------------------------------------------- */ html[data-store] .c4 h1{ margin:0;text-align:center; font-size:calc(clamp(22px, 2.8 * var(--fit), 40px) * var(--a11y-scale))} html[data-store] .c4 h1::after{margin-top:max(8px, calc(.7 * var(--fit)))} html[data-store] #cartRoot{ flex:1 1 auto;min-height:0;display:flex;flex-direction:column; margin-top:max(8px, calc(.8 * var(--fit)))} /* the one region that scrolls, and only when there are more lines than fit */ html[data-store] .clines{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;padding-bottom:4px} html[data-store] .cline{padding:12px 0} html[data-store] .ctotals{flex:0 0 auto;padding:10px 0 0;border-top:1px solid var(--line)} html[data-store] .cnote{flex:0 0 auto;margin:6px 0 0} html[data-store] #cartRoot .actions{ flex:0 0 auto;flex-wrap:nowrap;margin:max(10px, calc(.9 * var(--fit))) 0 0} html[data-store] #cartRoot .actions .btn{flex:1 1 0px;padding-inline:10px} html[data-store] .cempty{flex:1 1 auto;margin:0;display:flex;align-items:center;justify-content:center} /* ---- the checkout screen ------------------------------------------------- */ html[data-store] .co4 h1{ margin:0;text-align:center; font-size:calc(clamp(22px, 2.8 * var(--fit), 40px) * var(--a11y-scale))} html[data-store] .co4 h1::after{margin-top:max(8px, calc(.7 * var(--fit)))} html[data-store] .co4-form{flex:0 0 auto;margin-top:max(8px, calc(.8 * var(--fit)))} html[data-store] .co4-fields{display:grid;gap:6px} /* an inline label column: a floating label needs two stacked lines in 44px */ html[data-store] .co4 .field{ display:grid;grid-template-columns:minmax(72px, 24%) minmax(0, 1fr); align-items:center;gap:8px;margin:0} html[data-store] .co4 .field > span{margin:0;font-size:calc(13.5px * var(--a11y-scale))} html[data-store] .co4 .field input{min-height:44px;padding:0 12px} html[data-store] .co4 .delivery{margin:8px 0 0} html[data-store] .co4 .delivery legend{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap;margin:0;padding:0} html[data-store] .co4 .delivery .varrow{flex-wrap:nowrap;gap:8px;padding:2px} html[data-store] .co4 .delivery label{flex:1 1 0px;justify-content:center;min-height:44px} html[data-store] .co4-sum{ flex:0 1 auto;min-height:calc(2.2em + 8px);max-height:30vh;overflow-y:auto; overscroll-behavior:contain;scrollbar-width:thin;margin-top:max(8px, calc(.8 * var(--fit))); padding-top:8px;border-top:1px solid var(--line)} /* the total is always the visible row; the lines scroll above it */ html[data-store] .co4-sum .ctotals{ position:sticky;bottom:0;padding:6px 0 0;background:var(--ground); font-size:calc(clamp(16px, 1.7 * var(--fit), 20px) * var(--a11y-scale))} html[data-store] .co4-sum .colines li{padding:5px 0} html[data-store] .co4-sum .cempty{margin:0;padding:8px 0} html[data-store] .co4-act{ flex:0 0 auto;flex-wrap:nowrap;margin-top:max(8px, calc(.8 * var(--fit)))} html[data-store] .co4-act .btn{flex:1 1 0px;padding-inline:10px} html[data-store] #coForm[hidden] ~ .co4-act .co4-pay{display:none} html[data-store] .colegal{flex:0 0 auto;margin:6px 0 0; font-size:calc(11px * var(--a11y-scale));line-height:1.35} /* the address block for courier delivery: ships hidden, cart.js reveals it. .co4-fields is display:grid, which outranks the UA's [hidden], so hidden is said again here */ html[data-store] .co4-addr{margin-top:8px} html[data-store] .co4-addr[hidden]{display:none} /* the error block: a declined or failed payment says so here, in the form's own words, with a way to a person. Rendered visible by the server on ?err=, or revealed by cart.js when /api/checkout says no */ html[data-store] .co4 .coerr{ flex:0 0 auto;margin:max(8px, calc(.8 * var(--fit))) 0 0;padding:10px 14px; box-shadow:inset 0 0 0 1px var(--accent);border-radius:2px; font-size:calc(14px * var(--a11y-scale));line-height:1.45} html[data-store] .co4 .coerr[hidden]{display:none} html[data-store] .co4 .coerr p{margin:0} html[data-store] .co4 .coerr p + p{margin-top:4px} html[data-store] .co4 .coerr a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} html[data-a11y-contrast][data-a11y-contrast] .co4 .coerr{box-shadow:inset 0 0 0 2px #000;color:#000} html[data-a11y-contrast][data-a11y-contrast] .co4 .coerr a{color:#000} /* the confirmation: one screen, the order number in a Latin run */ html[data-store] .done4 h1{margin:0 0 8px} html[data-store] .done4 p{margin:0 0 10px;font-size:calc(15px * var(--a11y-scale));line-height:1.5} html[data-store] .done4 .doneref{font-weight:600} html[data-store] .done4 .doneref span[dir=ltr]{display:inline-block;letter-spacing:.04em} html[data-store] .done4 .co4-act{margin-top:12px} /* ---- touch targets, added without moving anything ------------------------ */ @media (pointer: coarse){ html[data-store] .p4-th::before, html[data-store] .qbtn::before, html[data-store] .crm::before{content:"";position:absolute;inset:-5px} html[data-store] .qbtn, html[data-store] .crm{position:relative} } /* ---- accessibility ---------------------------------------------------------- Doubled attribute, as everywhere on this site: (0,2,x) outranks this file's own (0,1,x) rules. */ html[data-a11y-contrast][data-a11y-contrast] .hrow{background:#000;box-shadow:0 2px 0 #fff} html[data-a11y-contrast][data-a11y-contrast] .hwall{display:none} html[data-a11y-contrast][data-a11y-contrast] .chip{ background:#000;color:#fff;box-shadow:none;border:2px solid #fff; -webkit-backdrop-filter:none;backdrop-filter:none} html[data-a11y-contrast][data-a11y-contrast] .chip[aria-current]{background:#fff;color:#000} html[data-a11y-contrast][data-a11y-contrast] .chip[aria-current]::after{background:#000} html[data-a11y-contrast][data-a11y-contrast] .grid .tflag{ background:#000;color:#fff;box-shadow:inset 0 0 0 2px #fff} html[data-a11y-contrast][data-a11y-contrast] .back{color:#fff} html[data-a11y-contrast][data-a11y-contrast] body.fit .copy{color:#fff} html[data-a11y-contrast][data-a11y-contrast] .p4-thumbs{background:#000;box-shadow:inset 0 0 0 2px #fff} html[data-a11y-contrast][data-a11y-contrast] .p4-th{background:#000;box-shadow:inset 0 0 0 2px #fff} html[data-a11y-contrast][data-a11y-contrast] .p4-th[aria-pressed="true"]{box-shadow:inset 0 0 0 4px #fff} html[data-a11y-contrast][data-a11y-contrast] .p4 .pprose::after{ background:linear-gradient(transparent, #000)} html[data-a11y-contrast][data-a11y-contrast] .cline, html[data-a11y-contrast][data-a11y-contrast] .ctotals, html[data-a11y-contrast][data-a11y-contrast] .co4-sum{border-color:#fff} html[data-a11y-contrast][data-a11y-contrast] .co4-sum .ctotals{background:#000} html[data-a11y-contrast][data-a11y-contrast] .p4 .addnote, html[data-a11y-contrast][data-a11y-contrast] .p4-meta .pdims, html[data-a11y-contrast][data-a11y-contrast] .colegal{color:#fff;opacity:1} html[data-a11y-links] .chip, html[data-a11y-links] .back{text-decoration:underline} /* ---- the desktop -------------------------------------------------------- */ @media (min-width: 901px){ html[data-store] .p4{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);gap:0 calc(3 * var(--fit));align-items:center} html[data-store] .p4 .back{grid-column:1 / -1;justify-self:start} html[data-store] .p4-plate{min-height:0;height:100%} html[data-store] .p4-info{margin:0;max-height:100%;min-height:0;overflow-y:auto} html[data-store] .p4 .pprose{max-height:14.4em} html[data-store] .p4 .addrow .btn{width:auto} html[data-store] .c4, html[data-store] .co4{max-width:min(760px, 94vw)} html[data-store] .co4{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr); grid-template-rows:auto auto auto minmax(0,1fr) auto auto; gap:0 calc(3 * var(--fit));max-width:min(1100px, 94vw); grid-template-areas:"b b" "h h" "f s" "p s" "a s" "l s"} html[data-store] .co4 .back{grid-area:b;justify-self:start} html[data-store] .co4 h1{grid-area:h} html[data-store] .co4-form{grid-area:f} html[data-store] .co4 .coerr{grid-area:p} html[data-store] .co4-sum{grid-area:s;max-height:none;min-height:0;overflow-y:auto;align-self:start} html[data-store] .co4-act{grid-area:a} html[data-store] .colegal{grid-area:l} } /* ============================================================================ THE PHONE. LAST IN THE FILE, ON PURPOSE -- a media query adds no specificity, so a phone rule placed above a plain rule it means to override loses silently. ========================================================================== */ @media (max-width: 900px){ html[data-store]{--gap:12px} html[data-store] .hrow{padding:8px 0} html[data-store] .scr{padding:4px var(--pad) 8px} html[data-store] .back{min-height:40px} /* «נוסף לסל» appears inside the button's end edge: one grid cell, both in it */ html[data-store] .p4 .addrow{display:grid} html[data-store] .p4 .addrow > *{grid-area:1 / 1} html[data-store] .p4 .addrow .btn{width:100%} html[data-store] .p4 .addnote{ justify-self:end;align-self:center;margin:0;padding:0 14px;pointer-events:none} html[data-store] .cline{grid-template-columns:56px minmax(0,1fr);gap:4px 10px;padding:10px 0} html[data-store] .cthumb{width:56px} html[data-store] .cqty{margin-top:4px} html[data-store] .cprice{margin-top:0} } /* A short phone: trim the paddings before trimming the pictures. */ @media (max-width: 900px) and (max-height: 700px){ html[data-store] .scr{padding:2px var(--pad) 6px} html[data-store] .back{min-height:36px} html[data-store] .p4 h1{font-size:calc(20px * var(--a11y-scale))} html[data-store] .p4-plate{min-height:112px} html[data-store] .p4 .addrow .btn{min-height:48px} html[data-store] .p4-info, html[data-store] .p4-meta, html[data-store] .p4 .pprose, html[data-store] .p4 .vars, html[data-store] .p4-links, html[data-store] .p4 .addrow, html[data-store] .co4-form, html[data-store] .co4-sum, html[data-store] .co4-act{margin-top:6px} html[data-store] .co4 .field input{min-height:40px} html[data-store] .co4 .delivery label{min-height:40px} } /* A phone turned sideways: the 3x2 menu is half the screen. The one-screen pages shrink only their OWN chrome here -- the logo and the menu chips -- and the product goes two columns. One screen is not promised in this orientation; it is tested. */ @media (max-width: 900px) and (max-height: 560px){ html[data-store] body.fit .ptoprow{padding:6px 16px 8px} html[data-store] body.fit .plogo img{height:34px} html[data-store] body.fit .pmenu a{min-height:36px} html[data-store] body.fit .pbar{padding-bottom:8px} html[data-store] .p4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);gap:0 16px} html[data-store] .p4 .back{grid-column:1 / -1} html[data-store] .p4-plate{min-height:0} html[data-store] .p4-info{margin:0;min-height:0;overflow-y:auto} }