/* «תחולה» — the hero's background reaching the category area or the whole
   page (app/background-scope.js, docs/THEME.md «Background scope»). Only
   while html[data-bg-scope] is set; high contrast keeps the plain page. The
   layer is the lowest thing on the page (z-index -1 under #appRoot), so a
   section's own ground, a divider mask at a section's edge and every card
   stay above it. No background-attachment: fixed. */
html[data-bg-scope]:not([data-a11y-contrast="1"]) #appRoot{position:relative;}
.bg-scope{position:absolute; inset-inline:0; top:0; z-index:-1; overflow:hidden; pointer-events:none;}
html[data-a11y-contrast="1"] .bg-scope{display:none;}
/* «עד הקטגוריות»: the surface fades out under #shop into the page itself. */
.bg-scope.is-fading{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
}
.bg-scope-tiles, .bg-scope-wash{position:absolute; inset:0;}
.bg-scope-tile{position:absolute; inset-inline:0; background-size:cover; background-position:center; background-repeat:no-repeat;}
@media (max-width:640px){ .bg-scope-tile.has-phone-image{background-image:var(--bgs-phone) !important;} }
.bg-scope[data-kind="split"] .bg-scope-tile{
  background:var(--primary);
  background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 82%, #ffffff), var(--primary) 55%, color-mix(in srgb, var(--primary) 72%, #000000));
}
.bg-scope[data-kind="none"] .bg-scope-tile{background:var(--ui-page-bg, var(--stone));}
.bg-scope-pattern{
  position:absolute; inset-inline:0; bottom:0;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 120px);
  mask-image:linear-gradient(to bottom, transparent, #000 120px);
}

/* The hero's own ground steps aside; its video stays in the hero. */
html[data-bg-scope]:not([data-a11y-contrast="1"]) #home{background:transparent !important;}
html[data-bg-scope]:not([data-a11y-contrast="1"]):not([data-layout-hero="split"]) #home #heroBg{background-image:none !important;}
html[data-bg-scope]:not([data-a11y-contrast="1"]) #home .hero-overlay{background:transparent !important;}
html[data-bg-scope][data-layout-hero="split"]:not([data-a11y-contrast="1"]) #home::after{background:none;}
html[data-bg-scope][data-layout-hero="none"]:not([data-a11y-contrast="1"]) #home::before{background:none; box-shadow:none;}

/* The category area shows the surface. A ground the owner set on the area
   itself (theme.storeDesign.parts, `html #shop`) still wins: :where() keeps
   this rule at one id; an area with its own background («רקע»,
   [data-part-ground]) covers the surface. */
:where(html[data-bg-scope]:not([data-a11y-contrast="1"])) #shop:where(:not([data-part-ground])){background:transparent; border-bottom-color:transparent;}
html[data-bg-scope][data-layout-hero="full"][data-layout-categories="tiles"]:not([data-a11y-contrast="1"]) #home + #shop:not([data-part-ground]){background:transparent;}
/* The words list has no card under its text: it gets the page's own panel. */
html[data-bg-scope][data-layout-categories="list"]:not([data-a11y-contrast="1"]) #shop .nav-scroll{
  background:var(--ui-page-bg, var(--paper, #FBF7EF)); border-radius:var(--r-panel, 14px); padding-block:6px;
}
@media (max-width:767px){
  html[data-bg-scope][data-layout-categories="list"]:not([data-a11y-contrast="1"]) #shop .nav-scroll{margin-inline:12px;}
}
/* «כל הדף»: the offers strip shows it too; its panel keeps its ground. */
:where(html[data-bg-scope="page"]:not([data-a11y-contrast="1"])) #dealsStrip:where(:not([data-part-ground])){background:transparent; border-bottom-color:transparent;}

/* «עוצמת הרקע» (theme.backgroundVeil "normal" / "light", html[data-bg-veil]):
   the veil is thinner, so the words that sit straight on the layer get a
   halo of the page colour (the ink stays the page's): the category words,
   the catalogue headings and the sections' titles, eyebrows and text. Cards,
   panels and buttons keep their own grounds and take no halo. */
html[data-bg-scope][data-bg-veil]:not([data-a11y-contrast="1"]) :is(#shop .cat-card-name, #catalog .category-head :is(h2, p), .editorial-block:not([style*="--block-background"]) .editorial-copy :is(h2, .editorial-eyebrow, .rich-text)){
  --bgs-halo:var(--bgs-page, var(--paper, #FBF7EF));   /* the page colour the veil is made of (background-scope.js) */
  text-shadow:0 0 1px var(--bgs-halo), 0 0 2px var(--bgs-halo), 0 0 4px var(--bgs-halo), 0 0 8px var(--bgs-halo), 0 0 8px var(--bgs-halo), 0 0 14px var(--bgs-halo), 0 0 14px var(--bgs-halo), 0 0 24px var(--bgs-halo);
}
/* …and on a light page the catalogue headings switch from the brand colour
   to the page's own ink, the strongest contrast it has, since more of the
   photo shows behind them (a dark page's headings are already near white). */
html[data-bg-scope][data-bg-veil]:not([data-a11y-contrast="1"]):not(:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],
  [data-theme-background="espresso"],[data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"])) #catalog .category-head h2{color:var(--ink, #1E2B22);}

/* A dark page ground (the «קצבייה» kit's espresso, and the other dark
   recipes): the bands follow it (benchmark 2026-10-27, item 4). Before, the
   category band, the offers tray and the footer stayed light stripes across
   a dark shop. The bands take the ground (a shade darker for the footer),
   their words turn light; the cards, the sheets, the inputs and the cart
   keep their own light panels, which read on dark. An owner's own band
   colour (--ui-menu-bg, --ui-deals-bg), a part ground and high contrast win. */
html:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"]):not([data-a11y-contrast="1"]){
  --dark-band-line:rgba(255,255,255,0.12); --dark-band-ink:#F3F5F3; --dark-band-soft:rgba(243,245,243,0.78);
}
html:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"]):not([data-a11y-contrast="1"]) :is(#shop, #dealsStrip):where(:not([data-part-ground])){
  background:var(--ui-menu-bg, transparent); border-bottom-color:var(--dark-band-line);
}
html:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"]):not([data-a11y-contrast="1"]) #dealsStrip:where(:not([data-part-ground])){
  --deals-ground:var(--ui-deals-bg, rgba(255,255,255,0.06));
}
html:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"]):not([data-a11y-contrast="1"]) #dealsStrip:where(:not([data-part-ground])) .deals-panel{
  border-color:var(--dark-band-line); box-shadow:none;
}
html:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"]):not([data-a11y-contrast="1"]) #dealsStrip:where(:not([data-part-ground])):not([style*="--ui-deals-bg"]) .deals-head h2{
  color:var(--dark-band-ink);
}
html:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]){
  background:rgba(0,0,0,0.28); border-top-color:var(--dark-band-line); color:var(--dark-band-soft);
}
html:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.footer-name, .footer-col-h, .footer-copy-link, .footer-pickup-title, .footer-pickup-name){
  color:var(--dark-band-ink);
}
html:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.footer-info, .footer-contact-link, .footer-legal a, .footer-legal .sep, .footer-col-link, .copy, .footer-pickup-address, .footer-pickup-hours, .footer-pickup-note){
  color:var(--dark-band-soft);
}
html:is([data-theme-background="deep"],[data-theme-background="black"],[data-theme-background="ink"],[data-theme-background="espresso"],
  [data-theme-background="darkhatch"],[data-theme-background="darkherring"],[data-theme-background="darkfade"])[data-home-footer="light"]:not([data-a11y-contrast="1"]) #siteFooter:not([data-part-ground]) :is(.copy, .footer-zones, .footer-zone-pickup){
  border-top-color:var(--dark-band-line);
}