/* The free canvas (app/free-canvas.js, docs/VISUAL_CANVAS.md). A stage of
   design pixels (1200 wide; a phone layout 390) scaled by one transform to
   the width it gets: positions, sizes and type are design px on purpose, so
   the composition keeps its proportions at every width. The box reserves
   its height (aspect-ratio) before the script measures, so nothing shifts.
   left/top are physical on the stage: it is a coordinate plane, the same in
   both directions (the reading order is the DOM's). */
.editorial-block.editorial-free.has-canvas{min-height:0}
.editorial-free.has-canvas>.editorial-copy:empty{display:none}
/* Type is design px, but a shop that chose a «גודל טקסט» above רגיל
   (theme.fontScale → --font-scale, app.js) gets its canvas text larger by
   the same factor; a smaller choice leaves the design's sizes. */
.fc{--fc-ts:max(1, var(--font-scale, 1))}
.fc{position:relative;width:100%;aspect-ratio:1200/var(--fc-h,480);overflow:hidden;overflow:clip;background-size:cover;background-position:center}
.fc[data-fc-screen]{aspect-ratio:auto;height:100vh;height:100svh}
.fc[data-fc-bleed]{overflow:visible}
.editorial-block.editorial-free.fc-bleed{position:relative;z-index:6;overflow:visible}
.fc .fc-stage{position:absolute;top:0;left:0;width:1200px;height:calc(var(--fc-h,480) * 1px);transform:scale(var(--fc-k,1));transform-origin:0 0}
.fc .fc-el{position:absolute;box-sizing:border-box;margin:0;left:calc(var(--x) * 1px);top:calc(var(--y) / var(--fc-h,480) * 100%);width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);
  transform:rotate(var(--r,0deg));z-index:var(--z,0);--fsv:var(--fs,16);line-height:1.3;overflow-wrap:anywhere;color:var(--ink)}
.fc .fc-el.fc-tx{white-space:pre-wrap}
.editorial-block .fc :is(h2,h3).fc-el::after{display:none}
.fc .fc-el:where(.fc-tx,.fc-shape,.fc-sticker,.fc-btn,.fc-counter){background:var(--fc-fill,transparent);border:var(--fc-sw,0) solid var(--fc-stroke,transparent);border-radius:var(--fc-rad,0)}
.fc .fc-btn{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-weight:700;cursor:pointer;background:var(--fc-fill,var(--primary));color:var(--paper)}
.fc .fc-counter{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.fc .fc-counter .fc-num{font-size:1em;line-height:1;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.fc .fc-counter .fc-label{font-size:max(.35em,14px);margin-top:.3em}
.fc .fc-sticker{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;background:var(--fc-fill,var(--gold));padding:.3em .6em}
.fc .fc-sticker[data-fc-sticker="pill"]{border-radius:999px}
.fc .fc-sticker[data-fc-sticker="circle"]{border-radius:50%}
.fc .fc-sticker[data-fc-sticker="burst"]{clip-path:polygon(50% 0,59% 12%,73% 5%,76% 20%,91% 18%,87% 33%,100% 40%,90% 51%,100% 62%,86% 68%,89% 83%,74% 81%,69% 95%,57% 87%,46% 100%,38% 87%,24% 94%,21% 80%,6% 81%,11% 67%,0 59%,10% 49%,1% 37%,15% 32%,12% 17%,27% 19%,31% 5%,44% 13%)}
.fc .fc-sticker[data-fc-sticker="tag"]{clip-path:polygon(12% 0,100% 0,100% 100%,12% 100%,0 50%);padding-inline-end:.8em;padding-inline-start:1.2em}
[dir="ltr"] .fc-sticker[data-fc-sticker="tag"]{clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%)}
.fc .fc-shape{background:var(--fc-fill,var(--primary))}
.fc .fc-shape[data-fc-shape="circle"]{border-radius:50%}
.fc .fc-shape:is([data-fc-shape="triangle"],[data-fc-shape="star"],[data-fc-shape="line"]){background:none;border:0}
.fc .fc-shape svg{display:block;width:100%;height:100%;overflow:visible}
.fc .fc-shape svg polygon{fill:var(--fc-fill,var(--primary));stroke:var(--fc-stroke,none);stroke-width:var(--fc-sw,0);vector-effect:non-scaling-stroke}
.fc .fc-shape svg line{stroke:var(--fc-stroke,var(--fc-fill,var(--ink)));stroke-width:max(var(--fc-sw,2px),1px);vector-effect:non-scaling-stroke}
.fc .fc-el.fc-divider{height:0;border:0;border-top:var(--fc-sw,2px) solid currentColor;top:calc((var(--y) + var(--h) / 2) / var(--fc-h,480) * 100%)}
.fc .fc-image,.fc .fc-img-link img{display:block;object-fit:cover;border-radius:var(--fc-rad,0);border:var(--fc-sw,0) solid var(--fc-stroke,transparent)}
.fc .fc-img-link img{width:100%;height:100%}
.fc .fc-icon{display:grid;place-items:center;color:var(--primary)}
.fc .fc-icon svg{width:100%;height:100%}
.fc .fc-embed{border-radius:var(--fc-rad,0);overflow:hidden;background:var(--paper-dim)}
.fc .fc-embed iframe{display:block;width:100%;height:100%;border:0}
.fc .fc-product{height:auto;min-height:calc(var(--h) * 1px)}
.fc .fc-product>.card{width:100%;margin:0}
/* «מוצרים» / «קטגוריות» (phase 3): the cards' own layout inside; the box takes their height. */
.fc .fc-flow{position:absolute;inset:0;pointer-events:none}
html .fc .fc-flow>.fc-el{pointer-events:auto;left:calc(var(--x) * var(--fc-k,1) * 1px);width:calc(var(--w) * var(--fc-k,1) * 1px);height:auto;min-height:calc(var(--h) * var(--fc-k,1) * 1px);font-size:inherit}
.fc .fc-grid{display:grid;grid-template-columns:repeat(var(--fc-cols,4),minmax(0,1fr));gap:16px}
.fc .fc-grid>.card{width:100%;margin:0;min-width:0}
.fc .fc-grid.fc-carousel{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--fc-cols,4) - 1) * 16px) / var(--fc-cols,4));overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.fc .fc-grid.fc-carousel>.card{scroll-snap-align:start}
.fc .fc-cat{display:grid;gap:8px;justify-items:center;text-align:center;color:var(--ink);text-decoration:none;font-weight:700}
.fc .fc-cat img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-panel,12px);background:var(--paper-dim)}
.fc .fc-cat-ic{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:var(--r-panel,12px);background:var(--paper-dim);font-size:3rem}
.fc .fc-cats-chips{display:flex;flex-wrap:wrap;gap:10px}
.fc .fc-cats-chips .fc-cat{padding:.5em 1.1em;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.fc .fc-cat:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF);outline-offset:2px}
.fc-area{position:absolute;inset:0;aspect-ratio:auto;z-index:4;pointer-events:none}
.fc-area .fc-stage{height:100%}
.fc.fc-area .fc-el{pointer-events:auto}
.fc .fc-el:where(a):focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF);outline-offset:2px}
/* «גדילה עם הטקסט» (canvas.grow, free-canvas.js grow()): a text's missing
   height and what it pushes, on top of the stored geometry; unset = none. */
.fc[data-fc-grow]{aspect-ratio:1200/var(--fc-hg,var(--fc-h,480))}
.fc[data-fc-grow] .fc-stage{height:calc(var(--fc-hg,var(--fc-h,480)) * 1px)}
.fc[data-fc-grow] .fc-el{top:calc((var(--y) + var(--gy,0)) / var(--fc-hg,var(--fc-h,480)) * 100%);height:calc((var(--h) + var(--gh,0)) * 1px)}
.fc[data-fc-grow] .fc-el.fc-divider{height:0;top:calc((var(--y) + var(--gy,0) + var(--h) / 2) / var(--fc-hg,var(--fc-h,480)) * 100%)}
/* The reduced-motion «no transform on hover» rules (theme.css) are about
   motion; the canvas's scale and an element's rotation are its geometry, so
   a pointer over the canvas never un-scales it (it moved the buttons away
   from the pointer). */
html .fc .fc-stage:is(:hover,:active){transform:scale(var(--fc-k,1)) !important}
html .fc .fc-el:is(:hover,:active,:focus){transform:rotate(var(--r,0deg)) !important}
/* «טקסט נפתח» (a button's link to: text): its text under it once opened; grow() makes the room. */
.fc button.fc-el{font-family:inherit;line-height:inherit}
.fc .fc-more{position:absolute;box-sizing:border-box;margin:0;left:calc(var(--mx) * 1px);width:calc(var(--mw) * 1px);top:calc((var(--y) + var(--gy,0) + var(--h) + 12) / var(--fc-hg,var(--fc-h,480)) * 100%);
  white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;text-align:center;color:var(--ink)}
.fc .fc-more[hidden]{display:none}
/* The hero, the footer and the header in free mode (theme.areaCanvas.<area>.free.hide):
   the parts the canvas replaces keep their room (so the area keeps its size)
   but are neither drawn nor read; its ground and live parts stay. */
[data-fc-free~="heroLabel"] #heroLabel{visibility:hidden !important}
[data-fc-free~="heroLogo"] #heroLogo{visibility:hidden !important}
[data-fc-free~="heroName"] #heroName{visibility:hidden !important}
[data-fc-free~="heroTitle"] #heroTitle{visibility:hidden !important}
[data-fc-free~="heroDesc"] #heroDesc{visibility:hidden !important}
[data-fc-free~="richHeroAction"] #richHeroAction{visibility:hidden !important}
[data-fc-free~="heroInfo"] #heroInfo{visibility:hidden !important}
[data-fc-free~="callBtn"] #callBtn{visibility:hidden !important}
[data-fc-free~="heroWhatsappBtn"] #heroWhatsappBtn{visibility:hidden !important}
[data-fc-free~="heroChips"] #heroChips{visibility:hidden !important}
[data-fc-free~="footerLogo"] #footerLogo{visibility:hidden !important}
[data-fc-free~="footerName"] #footerName{visibility:hidden !important}
[data-fc-free~="footerReview"] #footerReview{visibility:hidden !important}
[data-fc-free~="footerAddress"] #footerAddress{visibility:hidden !important}
[data-fc-free~="footerHours"] #footerHours{visibility:hidden !important}
[data-fc-free~="footerPhone"] #footerPhone{visibility:hidden !important}
[data-fc-free~="footerWhatsapp"] #footerWhatsapp{visibility:hidden !important}
[data-fc-free~="siteHeaderLogo"] #siteHeaderLogo{visibility:hidden !important}
/* A section turned free («עריכה חופשית», docs/FREE_LAYOUT.md) keeps the box
   its kind had: the width, ground and line of a plain story, a banner's tint. */
.editorial-free[data-fc-from="story-plain"]{--block-default-width:860px;--block-default-background:transparent;--block-default-border:0 solid transparent}
.editorial-free[data-fc-from="banner"]{--block-default-background:color-mix(in srgb,var(--primary) 9%,var(--paper,#FBF7EF));--block-default-border:0 solid transparent}
@media (max-width:640px){
  .fc[data-fc-phone]{aspect-ratio:390/var(--fc-ph,640)}
  .fc[data-fc-phone] .fc-stage{width:390px;height:calc(var(--fc-ph,640) * 1px)}
  .fc[data-fc-phone] .fc-el{left:calc(var(--px) * 1px);top:calc(var(--py) / var(--fc-ph,640) * 100%);width:calc(var(--pw) * 1px);height:calc(var(--ph) * 1px);transform:rotate(var(--pr,0deg));--fsv:var(--pfs,16)}
  .fc[data-fc-phone] .fc-el.fc-divider{height:0;top:calc((var(--py) + var(--ph) / 2) / var(--fc-ph,640) * 100%)}
  .fc[data-fc-phone] .fc-el[data-fc-hide]{display:none}
  .fc .fc-grid{--fc-cols:var(--fc-pcols,2)}
  html .fc[data-fc-phone] .fc-flow>.fc-el{left:calc(var(--px) * var(--fc-k,1) * 1px);width:calc(var(--pw) * var(--fc-k,1) * 1px);height:auto;min-height:calc(var(--ph) * var(--fc-k,1) * 1px)}
  html .fc[data-fc-auto] .fc-flow{position:static;display:flex;flex-direction:column;gap:16px;padding:0 20px 24px}
  html .fc[data-fc-auto] .fc-flow>.fc-el{position:relative;left:auto;top:auto;width:100%;min-height:0}
  .fc[data-fc-grow][data-fc-phone]{aspect-ratio:390/var(--fc-phg,var(--fc-ph,640))}
  .fc[data-fc-grow][data-fc-phone] .fc-stage{height:calc(var(--fc-phg,var(--fc-ph,640)) * 1px)}
  .fc[data-fc-grow][data-fc-phone] .fc-el{top:calc((var(--py) + var(--pgy,0)) / var(--fc-phg,var(--fc-ph,640)) * 100%);height:calc((var(--ph) + var(--pgh,0)) * 1px)}
  html .fc[data-fc-phone] .fc-el:is(:hover,:active,:focus){transform:rotate(var(--pr,0deg)) !important}
  html .fc[data-fc-auto] .fc-stage:is(:hover,:active),html .fc[data-fc-auto] .fc-el:is(:hover,:active,:focus){transform:none !important}
  .fc[data-fc-phone] .fc-more{left:calc(var(--pmx) * 1px);width:calc(var(--pmw) * 1px);top:calc((var(--py) + var(--pgy,0) + var(--ph) + 12) / var(--fc-phg,var(--fc-ph,640)) * 100%);--fsv:var(--pfs,16)}
  .fc[data-fc-grow][data-fc-phone] .fc-el.fc-divider{height:0;top:calc((var(--py) + var(--pgy,0) + var(--ph) / 2) / var(--fc-phg,var(--fc-ph,640)) * 100%)}
  .fc-area[data-fc-phone]{aspect-ratio:auto}
  /* «אוטומטי»: no phone layout — the elements stack by reading order. */
  .fc[data-fc-auto]{aspect-ratio:auto}
  .fc[data-fc-auto][data-fc-screen]{height:auto;min-height:100svh}
  .fc[data-fc-auto] .fc-stage{position:static;display:flex;flex-direction:column;align-items:center;gap:16px;width:auto;height:auto;padding:24px 20px;transform:none}
  .fc[data-fc-auto] .fc-el{position:relative;left:auto;top:auto;width:min(100%,calc(var(--aw) * 1px));height:auto;aspect-ratio:var(--w)/var(--h);transform:none;--fsv:var(--afs,16);order:var(--ao)}
  .fc[data-fc-auto] .fc-el:is(h2,h3,p,.fc-product,.fc-divider,.fc-products,.fc-categories){aspect-ratio:auto;width:100%}
  .fc[data-fc-auto] .fc-counter{aspect-ratio:auto}
  .fc[data-fc-auto] .fc-shape:not([data-fc-bg]){display:none}
  .fc[data-fc-auto] .fc-el[data-fc-bg]{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;z-index:0}
  .fc[data-fc-auto] .fc-btn{width:auto;min-width:min(100%,220px);min-height:48px;padding:.5em 1.2em}
  .fc[data-fc-auto] .fc-el.fc-divider{top:auto}
}
